15 files changed, 314 insertions, 149 deletions

diff --git a/src/actions/service.js b/src/actions/service.js
index d32bb80d3..f0c42e8aa 100644
--- a/src/actions/service.js
+++ b/src/actions/service.js
@@ -28,8 +28,9 @@ export default {
     serviceId: PropTypes.string.isRequired,
     redirect: PropTypes.string,
   },
-  openDarkmodeCss: {
+  openRecipeFile: {
     recipe: PropTypes.string.isRequired,
+    file: PropTypes.string.isRequired,
   },
   clearCache: {
     serviceId: PropTypes.string.isRequired,
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 860863d26..f6832038a 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -135,9 +135,11 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
     } = this.props;
 
     const {
-      showServiceNavigationBar,
+      navigationBarBehaviour,
     } = stores.settings.app;
 
+    const showNavBar = navigationBarBehaviour === 'always' || (navigationBarBehaviour === 'custom' && service.recipe.id === CUSTOM_WEBSITE_ID);
+
     const webviewClasses = classnames({
       services__webview: true,
       'services__webview-wrapper': true,
@@ -193,7 +195,7 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
           <>
             {!service.isHibernating ? (
               <>
-                {(service.recipe.id === CUSTOM_WEBSITE_ID || showServiceNavigationBar) && (
+                {showNavBar && (
                   <WebControlsScreen service={service} />
                 )}
                 <ServiceWebview
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 89c82c7f8..98051d78f 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -33,6 +33,18 @@ const messages = defineMessages({
     id: 'settings.service.form.openDarkmodeCss',
     defaultMessage: '!!!Open darkmode.css',
   },
+  openUserCss: {
+    id: 'settings.service.form.openUserCss',
+    defaultMessage: '!!!Open user.css',
+  },
+  openUserJs: {
+    id: 'settings.service.form.openUserJs',
+    defaultMessage: '!!!Open user.js',
+  },
+  recipeFileInfo: {
+    id: 'settings.service.form.recipeFileInfo',
+    defaultMessage: '!!!Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.',
+  },
   availableServices: {
     id: 'settings.service.form.availableServices',
     defaultMessage: '!!!Available services',
@@ -131,8 +143,7 @@ export default @observer class EditServiceForm extends Component {
     form: PropTypes.instanceOf(Form).isRequired,
     onSubmit: PropTypes.func.isRequired,
     onDelete: PropTypes.func.isRequired,
-    openDarkmodeCss: PropTypes.func.isRequired,
-    isOpeningDarkModeCss: PropTypes.bool.isRequired,
+    openRecipeFile: PropTypes.func.isRequired,
     isSaving: PropTypes.bool.isRequired,
     isDeleting: PropTypes.bool.isRequired,
     isProxyFeatureEnabled: PropTypes.bool.isRequired,
@@ -199,8 +210,7 @@ export default @observer class EditServiceForm extends Component {
       isSaving,
       isDeleting,
       onDelete,
-      openDarkmodeCss,
-      isOpeningDarkModeCss,
+      openRecipeFile,
       isProxyFeatureEnabled,
       isServiceProxyIncludedInCurrentPlan,
       isSpellcheckerIncludedInCurrentPlan,
@@ -226,23 +236,6 @@ export default @observer class EditServiceForm extends Component {
       />
     );
 
-    const openDarkmodeCssButton = isOpeningDarkModeCss ? (
-      <Button
-        label={intl.formatMessage(messages.openDarkmodeCss)}
-        loaded={false}
-        buttonType="secondary"
-        className="settings__open-dark-mode-button"
-        disabled
-      />
-    ) : (
-      <Button
-        buttonType="secondary"
-        label={intl.formatMessage(messages.openDarkmodeCss)}
-        className="settings__open-dark-mode-button"
-        onClick={openDarkmodeCss}
-      />
-    );
-
     let activeTabIndex = 0;
     if (recipe.hasHostedOption && service.team) {
       activeTabIndex = 1;
@@ -430,11 +423,39 @@ export default @observer class EditServiceForm extends Component {
               </PremiumFeatureContainer>
             )}
           </form>
+
+          {action === 'edit' && (
+            <>
+              <div className="settings__open-recipe-file-container">
+                <Button
+                  buttonType="secondary"
+                  label={intl.formatMessage(messages.openDarkmodeCss)}
+                  className="settings__open-recipe-file-button"
+                  onClick={() => openRecipeFile('darkmode.css')}
+                />
+                <Button
+                  buttonType="secondary"
+                  label={intl.formatMessage(messages.openUserCss)}
+                  className="settings__open-recipe-file-button"
+                  onClick={() => openRecipeFile('user.css')}
+                />
+                <Button
+                  buttonType="secondary"
+                  label={intl.formatMessage(messages.openUserJs)}
+                  className="settings__open-recipe-file-button"
+                  onClick={() => openRecipeFile('user.js')}
+                />
+              </div>
+              <p style={{ marginTop: 10 }}>
+                <span className="mdi mdi-information" />
+                {intl.formatMessage(messages.recipeFileInfo)}
+              </p>
+            </>
+          )}
         </div>
         <div className="settings__controls">
           {/* Delete Button */}
           {action === 'edit' && deleteButton}
-          {action === 'edit' && openDarkmodeCssButton}
 
           {/* Save Button */}
           {isSaving || isValidatingCustomUrl ? (
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 432a546d9..f41c7db8e 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -256,7 +256,7 @@ export default @observer class EditSettingsForm extends Component {
               <Toggle field={form.$('minimizeToSystemTray')} />
             )}
             <Toggle field={form.$('privateNotifications')} />
-            <Toggle field={form.$('showServiceNavigationBar')} />
+            <Select field={form.$('navigationBarBehaviour')} />
 
             <Hr />
 
diff --git a/src/config.js b/src/config.js
index 9b77aa9a5..283c20f84 100644
--- a/src/config.js
+++ b/src/config.js
@@ -45,6 +45,12 @@ export const HIBERNATION_STRATEGIES = {
   3600: 'Extemely Slow Hibernation (1hour)',
 };
 
+export const NAVIGATION_BAR_BEHAVIOURS = {
+  custom: 'Show navigation bar on custom websites only',
+  always: 'Show navigation bar on all services',
+  never: 'Never show navigation bar',
+};
+
 export const SIDEBAR_WIDTH = {
   35: 'Extemely slim sidebar',
   45: 'Very slim sidebar',
@@ -107,6 +113,7 @@ export const DEFAULT_APP_SETTINGS = {
   serviceRibbonWidth: 68,
   iconSize: iconSizeBias,
   sentry: false,
+  navigationBarBehaviour: 'custom',
 };
 
 export const DEFAULT_FEATURES_CONFIG = {
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index 99c40b086..a7d33a3ea 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -92,10 +92,6 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
     intl: intlShape,
   };
 
-  state = {
-    isOpeningDarkModeCss: false,
-  }
-
   onSubmit(data) {
     const { action } = this.props.router.params;
     const { recipes, services } = this.props.stores;
@@ -282,25 +278,16 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
     }
   }
 
-  openDarkmodeCss() {
-    const { openDarkmodeCss } = this.props.actions.service;
+  openRecipeFile(file) {
+    const { openRecipeFile } = this.props.actions.service;
     const { action } = this.props.router.params;
 
     if (action === 'edit') {
-      this.setState({
-        isOpeningDarkModeCss: true,
-      });
-
       const { activeSettings: service } = this.props.stores.services;
-      openDarkmodeCss({
+      openRecipeFile({
         recipe: service.recipe.id,
+        file,
       });
-
-      setTimeout(() => {
-        this.setState({
-          isOpeningDarkModeCss: false,
-        });
-      }, 2500);
     }
   }
 
@@ -355,8 +342,7 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
           isDeleting={services.deleteServiceRequest.isExecuting}
           onSubmit={d => this.onSubmit(d)}
           onDelete={() => this.deleteService()}
-          openDarkmodeCss={() => this.openDarkmodeCss()}
-          isOpeningDarkModeCss={this.state.isOpeningDarkModeCss}
+          openRecipeFile={file => this.openRecipeFile(file)}
           isProxyFeatureEnabled={proxyFeature.isEnabled}
           isServiceProxyIncludedInCurrentPlan={proxyFeature.isIncludedInCurrentPlan}
           isSpellcheckerIncludedInCurrentPlan={spellcheckerFeature.isIncludedInCurrentPlan}
@@ -384,7 +370,7 @@ EditServiceScreen.wrappedComponent.propTypes = {
       createService: PropTypes.func.isRequired,
       updateService: PropTypes.func.isRequired,
       deleteService: PropTypes.func.isRequired,
-      openDarkmodeCss: PropTypes.func.isRequired,
+      openRecipeFile: PropTypes.func.isRequired,
     }).isRequired,
     // settings: PropTypes.shape({
     //   update: PropTypes.func.isRequred,
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index ee5e3615c..6dd21f961 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -11,7 +11,7 @@ import TodosStore from '../../features/todos/store';
 import Form from '../../lib/Form';
 import { APP_LOCALES, SPELLCHECKER_LOCALES } from '../../i18n/languages';
 import {
-  DEFAULT_APP_SETTINGS, HIBERNATION_STRATEGIES, SIDEBAR_WIDTH, ICON_SIZES,
+  DEFAULT_APP_SETTINGS, HIBERNATION_STRATEGIES, SIDEBAR_WIDTH, ICON_SIZES, NAVIGATION_BAR_BEHAVIOURS,
 } from '../../config';
 import { config as spellcheckerConfig } from '../../features/spellchecker';
 
@@ -56,9 +56,9 @@ const messages = defineMessages({
     id: 'settings.app.form.privateNotifications',
     defaultMessage: '!!!Don\'t show message content in notifications',
   },
-  showServiceNavigationBar: {
-    id: 'settings.app.form.showServiceNavigationBar',
-    defaultMessage: '!!!Always show service navigation bar',
+  navigationBarBehaviour: {
+    id: 'settings.app.form.navigationBarBehaviour',
+    defaultMessage: '!!!Navigation bar behaviour',
   },
   sentry: {
     id: 'settings.app.form.sentry',
@@ -194,7 +194,7 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
         startMinimized: settingsData.startMinimized,
         minimizeToSystemTray: settingsData.minimizeToSystemTray,
         privateNotifications: settingsData.privateNotifications,
-        showServiceNavigationBar: settingsData.showServiceNavigationBar,
+        navigationBarBehaviour: settingsData.navigationBarBehaviour,
         sentry: settingsData.sentry,
         hibernate: settingsData.hibernate,
         hibernationStrategy: settingsData.hibernationStrategy,
@@ -260,6 +260,11 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
       locales: APP_LOCALES,
     });
 
+    const navigationBarBehaviours = getSelectOptions({
+      locales: NAVIGATION_BAR_BEHAVIOURS,
+      sort: false,
+    });
+
     const hibernationStrategies = getSelectOptions({
       locales: HIBERNATION_STRATEGIES,
       sort: false,
@@ -317,10 +322,11 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
           value: settings.all.app.privateNotifications,
           default: DEFAULT_APP_SETTINGS.privateNotifications,
         },
-        showServiceNavigationBar: {
-          label: intl.formatMessage(messages.showServiceNavigationBar),
-          value: settings.all.app.showServiceNavigationBar,
-          default: DEFAULT_APP_SETTINGS.showServiceNavigationBar,
+        navigationBarBehaviour: {
+          label: intl.formatMessage(messages.navigationBarBehaviour),
+          value: settings.all.app.navigationBarBehaviour,
+          default: DEFAULT_APP_SETTINGS.navigationBarBehaviour,
+          options: navigationBarBehaviours,
         },
         sentry: {
           label: intl.formatMessage(messages.sentry),
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 44411cdad..211214d93 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -2143,263 +2143,302 @@
         }
       },
       {
-        "defaultMessage": "!!!Available services",
+        "defaultMessage": "!!!Open user.css",
         "end": {
           "column": 3,
           "line": 39
         },
         "file": "src/components/settings/services/EditServiceForm.js",
+        "id": "settings.service.form.openUserCss",
+        "start": {
+          "column": 15,
+          "line": 36
+        }
+      },
+      {
+        "defaultMessage": "!!!Open user.js",
+        "end": {
+          "column": 3,
+          "line": 43
+        },
+        "file": "src/components/settings/services/EditServiceForm.js",
+        "id": "settings.service.form.openUserJs",
+        "start": {
+          "column": 14,
+          "line": 40
+        }
+      },
+      {
+        "defaultMessage": "!!!Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.",
+        "end": {
+          "column": 3,
+          "line": 47
+        },
+        "file": "src/components/settings/services/EditServiceForm.js",
+        "id": "settings.service.form.recipeFileInfo",
+        "start": {
+          "column": 18,
+          "line": 44
+        }
+      },
+      {
+        "defaultMessage": "!!!Available services",
+        "end": {
+          "column": 3,
+          "line": 51
+        },
+        "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.availableServices",
         "start": {
           "column": 21,
-          "line": 36
+          "line": 48
         }
       },
       {
         "defaultMessage": "!!!Your services",
         "end": {
           "column": 3,
-          "line": 43
+          "line": 55
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.yourServices",
         "start": {
           "column": 16,
-          "line": 40
+          "line": 52
         }
       },
       {
         "defaultMessage": "!!!Add {name}",
         "end": {
           "column": 3,
-          "line": 47
+          "line": 59
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.addServiceHeadline",
         "start": {
           "column": 22,
-          "line": 44
+          "line": 56
         }
       },
       {
         "defaultMessage": "!!!Edit {name}",
         "end": {
           "column": 3,
-          "line": 51
+          "line": 63
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.editServiceHeadline",
         "start": {
           "column": 23,
-          "line": 48
+          "line": 60
         }
       },
       {
         "defaultMessage": "!!!Hosted",
         "end": {
           "column": 3,
-          "line": 55
+          "line": 67
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.tabHosted",
         "start": {
           "column": 13,
-          "line": 52
+          "line": 64
         }
       },
       {
         "defaultMessage": "!!!Self hosted ⭐️",
         "end": {
           "column": 3,
-          "line": 59
+          "line": 71
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.tabOnPremise",
         "start": {
           "column": 16,
-          "line": 56
+          "line": 68
         }
       },
       {
         "defaultMessage": "!!!Use the hosted {name} service.",
         "end": {
           "column": 3,
-          "line": 63
+          "line": 75
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.useHostedService",
         "start": {
           "column": 20,
-          "line": 60
+          "line": 72
         }
       },
       {
         "defaultMessage": "!!!Could not validate custom {name} server.",
         "end": {
           "column": 3,
-          "line": 67
+          "line": 79
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.customUrlValidationError",
         "start": {
           "column": 28,
-          "line": 64
+          "line": 76
         }
       },
       {
         "defaultMessage": "!!!To add self hosted services, you need a Ferdi Premium Supporter Account.",
         "end": {
           "column": 3,
-          "line": 71
+          "line": 83
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.customUrlPremiumInfo",
         "start": {
           "column": 24,
-          "line": 68
+          "line": 80
         }
       },
       {
         "defaultMessage": "!!!Upgrade your account",
         "end": {
           "column": 3,
-          "line": 75
+          "line": 87
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.customUrlUpgradeAccount",
         "start": {
           "column": 27,
-          "line": 72
+          "line": 84
         }
       },
       {
         "defaultMessage": "!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...",
         "end": {
           "column": 3,
-          "line": 79
+          "line": 91
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.indirectMessageInfo",
         "start": {
           "column": 23,
-          "line": 76
+          "line": 88
         }
       },
       {
         "defaultMessage": "!!!When disabled, all notification sounds and audio playback are muted",
         "end": {
           "column": 3,
-          "line": 83
+          "line": 95
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.isMutedInfo",
         "start": {
           "column": 15,
-          "line": 80
+          "line": 92
         }
       },
       {
         "defaultMessage": "!!!Notifications",
         "end": {
           "column": 3,
-          "line": 87
+          "line": 99
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.headlineNotifications",
         "start": {
           "column": 25,
-          "line": 84
+          "line": 96
         }
       },
       {
         "defaultMessage": "!!!Unread message badges",
         "end": {
           "column": 3,
-          "line": 91
+          "line": 103
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.headlineBadges",
         "start": {
           "column": 18,
-          "line": 88
+          "line": 100
         }
       },
       {
         "defaultMessage": "!!!General",
         "end": {
           "column": 3,
-          "line": 95
+          "line": 107
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.headlineGeneral",
         "start": {
           "column": 19,
-          "line": 92
+          "line": 104
         }
       },
       {
         "defaultMessage": "!!!Delete",
         "end": {
           "column": 3,
-          "line": 99
+          "line": 111
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.iconDelete",
         "start": {
           "column": 14,
-          "line": 96
+          "line": 108
         }
       },
       {
         "defaultMessage": "!!!Drop your image, or click here",
         "end": {
           "column": 3,
-          "line": 103
+          "line": 115
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.iconUpload",
         "start": {
           "column": 14,
-          "line": 100
+          "line": 112
         }
       },
       {
         "defaultMessage": "!!!HTTP/HTTPS Proxy Settings",
         "end": {
           "column": 3,
-          "line": 107
+          "line": 119
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.proxy.headline",
         "start": {
           "column": 17,
-          "line": 104
+          "line": 116
         }
       },
       {
         "defaultMessage": "!!!Please restart Ferdi after changing proxy Settings.",
         "end": {
           "column": 3,
-          "line": 111
+          "line": 123
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.proxy.restartInfo",
         "start": {
           "column": 20,
-          "line": 108
+          "line": 120
         }
       },
       {
         "defaultMessage": "!!!Proxy settings will not be synchronized with the Ferdi servers.",
         "end": {
           "column": 3,
-          "line": 115
+          "line": 127
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.proxy.info",
         "start": {
           "column": 13,
-          "line": 112
+          "line": 124
         }
       }
     ],
@@ -4175,15 +4214,15 @@
         }
       },
       {
-        "defaultMessage": "!!!Always show service navigation bar",
+        "defaultMessage": "!!!Navigation bar behaviour",
         "end": {
           "column": 3,
           "line": 62
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
-        "id": "settings.app.form.showServiceNavigationBar",
+        "id": "settings.app.form.navigationBarBehaviour",
         "start": {
-          "column": 28,
+          "column": 26,
           "line": 59
         }
       },
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 97be15fed..36494724b 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -284,6 +284,7 @@
   "settings.app.form.language": "Language",
   "settings.app.form.lockPassword": "Password",
   "settings.app.form.minimizeToSystemTray": "Minimize Ferdi to system tray",
+  "settings.app.form.navigationBarBehaviour": "Navigation bar behaviour",
   "settings.app.form.noUpdates": "Disable updates",
   "settings.app.form.privateNotifications": "Don't show message content in notifications",
   "settings.app.form.runInBackground": "Keep Ferdi in background when closing the window",
@@ -295,7 +296,6 @@
   "settings.app.form.serviceRibbonWidth": "Sidebar width",
   "settings.app.form.showDisabledServices": "Display disabled services tabs",
   "settings.app.form.showMessagesBadgesWhenMuted": "Show unread message badge when notifications are disabled",
-  "settings.app.form.showServiceNavigationBar": "Always show service navigation bar",
   "settings.app.form.startMinimized": "Start minimized in tray",
   "settings.app.form.todoServer": "Todo Server",
   "settings.app.form.universalDarkMode": "Enable universal Dark Mode",
@@ -374,6 +374,8 @@
   "settings.service.form.isMutedInfo": "When disabled, all notification sounds and audio playback are muted",
   "settings.service.form.name": "Name",
   "settings.service.form.openDarkmodeCss": "Open darkmode.css",
+  "settings.service.form.openUserCss": "Open user.css",
+  "settings.service.form.openUserJs": "Open user.js",
   "settings.service.form.proxy.headline": "HTTP/HTTPS Proxy Settings",
   "settings.service.form.proxy.host": "Proxy Host/IP",
   "settings.service.form.proxy.info": "Proxy settings will not synced with the Ferdi servers.",
@@ -382,6 +384,7 @@
   "settings.service.form.proxy.port": "Port",
   "settings.service.form.proxy.restartInfo": "Please restart Ferdi after changing proxy Settings.",
   "settings.service.form.proxy.user": "User (optional)",
+  "settings.service.form.recipeFileInfo": "Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.",
   "settings.service.form.saveButton": "Save service",
   "settings.service.form.tabHosted": "Hosted",
   "settings.service.form.tabOnPremise": "Self hosted ⭐️",
diff --git a/src/i18n/messages/src/components/settings/services/EditServiceForm.json b/src/i18n/messages/src/components/settings/services/EditServiceForm.json
index f4692ed29..df64c8a5f 100644
--- a/src/i18n/messages/src/components/settings/services/EditServiceForm.json
+++ b/src/i18n/messages/src/components/settings/services/EditServiceForm.json
@@ -39,15 +39,54 @@
     }
   },
   {
+    "id": "settings.service.form.openUserCss",
+    "defaultMessage": "!!!Open user.css",
+    "file": "src/components/settings/services/EditServiceForm.js",
+    "start": {
+      "line": 36,
+      "column": 15
+    },
+    "end": {
+      "line": 39,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.service.form.openUserJs",
+    "defaultMessage": "!!!Open user.js",
+    "file": "src/components/settings/services/EditServiceForm.js",
+    "start": {
+      "line": 40,
+      "column": 14
+    },
+    "end": {
+      "line": 43,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.service.form.recipeFileInfo",
+    "defaultMessage": "!!!Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.",
+    "file": "src/components/settings/services/EditServiceForm.js",
+    "start": {
+      "line": 44,
+      "column": 18
+    },
+    "end": {
+      "line": 47,
+      "column": 3
+    }
+  },
+  {
     "id": "settings.service.form.availableServices",
     "defaultMessage": "!!!Available services",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 36,
+      "line": 48,
       "column": 21
     },
     "end": {
-      "line": 39,
+      "line": 51,
       "column": 3
     }
   },
@@ -56,11 +95,11 @@
     "defaultMessage": "!!!Your services",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 40,
+      "line": 52,
       "column": 16
     },
     "end": {
-      "line": 43,
+      "line": 55,
       "column": 3
     }
   },
@@ -69,11 +108,11 @@
     "defaultMessage": "!!!Add {name}",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 44,
+      "line": 56,
       "column": 22
     },
     "end": {
-      "line": 47,
+      "line": 59,
       "column": 3
     }
   },
@@ -82,11 +121,11 @@
     "defaultMessage": "!!!Edit {name}",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 48,
+      "line": 60,
       "column": 23
     },
     "end": {
-      "line": 51,
+      "line": 63,
       "column": 3
     }
   },
@@ -95,11 +134,11 @@
     "defaultMessage": "!!!Hosted",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 52,
+      "line": 64,
       "column": 13
     },
     "end": {
-      "line": 55,
+      "line": 67,
       "column": 3
     }
   },
@@ -108,11 +147,11 @@
     "defaultMessage": "!!!Self hosted ⭐️",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 56,
+      "line": 68,
       "column": 16
     },
     "end": {
-      "line": 59,
+      "line": 71,
       "column": 3
     }
   },
@@ -121,11 +160,11 @@
     "defaultMessage": "!!!Use the hosted {name} service.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 60,
+      "line": 72,
       "column": 20
     },
     "end": {
-      "line": 63,
+      "line": 75,
       "column": 3
     }
   },
@@ -134,11 +173,11 @@
     "defaultMessage": "!!!Could not validate custom {name} server.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 64,
+      "line": 76,
       "column": 28
     },
     "end": {
-      "line": 67,
+      "line": 79,
       "column": 3
     }
   },
@@ -147,11 +186,11 @@
     "defaultMessage": "!!!To add self hosted services, you need a Ferdi Premium Supporter Account.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 68,
+      "line": 80,
       "column": 24
     },
     "end": {
-      "line": 71,
+      "line": 83,
       "column": 3
     }
   },
@@ -160,11 +199,11 @@
     "defaultMessage": "!!!Upgrade your account",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 72,
+      "line": 84,
       "column": 27
     },
     "end": {
-      "line": 75,
+      "line": 87,
       "column": 3
     }
   },
@@ -173,11 +212,11 @@
     "defaultMessage": "!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 76,
+      "line": 88,
       "column": 23
     },
     "end": {
-      "line": 79,
+      "line": 91,
       "column": 3
     }
   },
@@ -186,11 +225,11 @@
     "defaultMessage": "!!!When disabled, all notification sounds and audio playback are muted",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 80,
+      "line": 92,
       "column": 15
     },
     "end": {
-      "line": 83,
+      "line": 95,
       "column": 3
     }
   },
@@ -199,11 +238,11 @@
     "defaultMessage": "!!!Notifications",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 84,
+      "line": 96,
       "column": 25
     },
     "end": {
-      "line": 87,
+      "line": 99,
       "column": 3
     }
   },
@@ -212,11 +251,11 @@
     "defaultMessage": "!!!Unread message badges",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 88,
+      "line": 100,
       "column": 18
     },
     "end": {
-      "line": 91,
+      "line": 103,
       "column": 3
     }
   },
@@ -225,11 +264,11 @@
     "defaultMessage": "!!!General",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 92,
+      "line": 104,
       "column": 19
     },
     "end": {
-      "line": 95,
+      "line": 107,
       "column": 3
     }
   },
@@ -238,11 +277,11 @@
     "defaultMessage": "!!!Delete",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 96,
+      "line": 108,
       "column": 14
     },
     "end": {
-      "line": 99,
+      "line": 111,
       "column": 3
     }
   },
@@ -251,11 +290,11 @@
     "defaultMessage": "!!!Drop your image, or click here",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 100,
+      "line": 112,
       "column": 14
     },
     "end": {
-      "line": 103,
+      "line": 115,
       "column": 3
     }
   },
@@ -264,11 +303,11 @@
     "defaultMessage": "!!!HTTP/HTTPS Proxy Settings",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 104,
+      "line": 116,
       "column": 17
     },
     "end": {
-      "line": 107,
+      "line": 119,
       "column": 3
     }
   },
@@ -277,11 +316,11 @@
     "defaultMessage": "!!!Please restart Ferdi after changing proxy Settings.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 108,
+      "line": 120,
       "column": 20
     },
     "end": {
-      "line": 111,
+      "line": 123,
       "column": 3
     }
   },
@@ -290,11 +329,11 @@
     "defaultMessage": "!!!Proxy settings will not be synchronized with the Ferdi servers.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 112,
+      "line": 124,
       "column": 13
     },
     "end": {
-      "line": 115,
+      "line": 127,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/containers/settings/EditSettingsScreen.json b/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
index 98abb0f2b..fdf49bbb6 100644
--- a/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
+++ b/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
@@ -91,12 +91,12 @@
     }
   },
   {
-    "id": "settings.app.form.showServiceNavigationBar",
-    "defaultMessage": "!!!Always show service navigation bar",
+    "id": "settings.app.form.navigationBarBehaviour",
+    "defaultMessage": "!!!Navigation bar behaviour",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
       "line": 59,
-      "column": 28
+      "column": 26
     },
     "end": {
       "line": 62,
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index e38b82f03..ae6ba11c5 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -58,7 +58,7 @@ export default class ServicesStore extends Store {
     this.actions.service.createFromLegacyService.listen(this._createFromLegacyService.bind(this));
     this.actions.service.updateService.listen(this._updateService.bind(this));
     this.actions.service.deleteService.listen(this._deleteService.bind(this));
-    this.actions.service.openDarkmodeCss.listen(this._openDarkmodeCss.bind(this));
+    this.actions.service.openRecipeFile.listen(this._openRecipeFile.bind(this));
     this.actions.service.clearCache.listen(this._clearCache.bind(this));
     this.actions.service.setWebviewReference.listen(this._setWebviewReference.bind(this));
     this.actions.service.detachService.listen(this._detachService.bind(this));
@@ -334,7 +334,7 @@ export default class ServicesStore extends Store {
     this.actionStatus = request.result.status;
   }
 
-  @action async _openDarkmodeCss({ recipe }) {
+  @action async _openRecipeFile({ recipe, file }) {
     // Get directory for recipe
     const normalDirectory = getRecipeDirectory(recipe);
     const devDirectory = getDevRecipeDirectory(recipe);
@@ -349,10 +349,10 @@ export default class ServicesStore extends Store {
       return;
     }
 
-    // Create and open darkmode.css
-    const file = path.join(directory, 'darkmode.css');
-    await fs.ensureFile(file);
-    shell.showItemInFolder(file);
+    // Create and open file
+    const filePath = path.join(directory, file);
+    await fs.ensureFile(filePath);
+    shell.showItemInFolder(filePath);
   }
 
   @action async _clearCache({ serviceId }) {
diff --git a/src/stores/SettingsStore.js b/src/stores/SettingsStore.js
index feee282e4..26e83b725 100644
--- a/src/stores/SettingsStore.js
+++ b/src/stores/SettingsStore.js
@@ -240,5 +240,25 @@ export default class SettingsStore extends Store {
         },
       });
     }
+
+    if (!this.all.migration['5.4.4-beta.2-settings']) {
+      const {
+        showServiceNavigationBar,
+      } = this.all.app;
+
+      this.actions.settings.update({
+        type: 'app',
+        data: {
+          navigationBarBehaviour: showServiceNavigationBar ? 'custom' : 'never',
+        },
+      });
+
+      this.actions.settings.update({
+        type: 'migration',
+        data: {
+          '5.4.4-beta.2-settings': true,
+        },
+      });
+    }
   }
 }
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 305450fd2..14cc91f87 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -306,7 +306,15 @@
   }
 
   .settings__delete-button { right: 0; }
-  .settings__open-dark-mode-button { right: 0; cursor:pointer; }
+  .settings__open-recipe-file-button {
+    cursor:pointer; 
+    margin-right: 10px;
+  }
+  .settings__open-recipe-file-container {
+    margin-top: 20px;
+    display: flex;
+    height: auto !important;
+  }
 
   .settings__empty-state {
     align-items: center;
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index e95cae18b..1a22542d8 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -99,6 +99,39 @@ class RecipeController {
     } catch (err) {
       console.error('Recipe initialization failed', err);
     }
+
+    this.loadUserFiles(recipe, config);
+  }
+
+  async loadUserFiles(recipe, config) {
+    const userCss = path.join(recipe.path, 'user.css');
+    if (await fs.exists(userCss)) {
+      const data = await fs.readFile(userCss);
+      const styles = document.createElement('style');
+      styles.innerHTML = data.toString();
+
+      document.querySelector('head').appendChild(styles);
+    }
+
+    const userJs = path.join(recipe.path, 'user.js');
+    if (await fs.exists(userJs)) {
+      const loadUserJs = () => {
+        // eslint-disable-next-line
+        const userJsModule = require(userJs);
+
+        if (typeof userJsModule === 'function') {
+          userJsModule(config);
+        }
+      };
+
+      if (document.readyState !== 'loading') {
+        loadUserJs();
+      } else {
+        document.addEventListener('DOMContentLoaded', () => {
+          loadUserJs();
+        });
+      }
+    }
   }
 
   update() {