diff --git a/js/src/admin/components/BasicsPage.js b/js/src/admin/components/BasicsPage.js
index edf2c5907..c2b6175af 100644
--- a/js/src/admin/components/BasicsPage.js
+++ b/js/src/admin/components/BasicsPage.js
@@ -25,10 +25,6 @@ export default class BasicsPage extends Page {
       'welcome_message',
       'display_name_driver',
     ];
-    this.values = {};
-
-    const settings = app.data.settings;
-    this.fields.forEach((key) => (this.values[key] = Stream(settings[key])));
 
     this.localeOptions = {};
     const locales = app.data.locales;
@@ -42,8 +38,29 @@ export default class BasicsPage extends Page {
       this.displayNameOptions[identifier] = identifier;
     }, this);
 
+    this.slugDriverOptions = {};
+    Object.keys(app.data.slugDrivers).forEach((model) => {
+      this.fields.push(`slug_driver_${model}`);
+      this.slugDriverOptions[model] = {};
+
+      app.data.slugDrivers[model].forEach((option) => {
+        this.slugDriverOptions[model][option] = option;
+      });
+    });
+
+    this.values = {};
+
+    const settings = app.data.settings;
+    this.fields.forEach((key) => (this.values[key] = Stream(settings[key])));
+
     if (!this.values.display_name_driver() && displayNameDrivers.includes('username')) this.values.display_name_driver('username');
 
+    Object.keys(app.data.slugDrivers).forEach((model) => {
+      if (!this.values[`slug_driver_${model}`]() && 'default' in this.slugDriverOptions[model]) {
+        this.values[`slug_driver_${model}`]('default');
+      }
+    });
+
     if (typeof this.values.show_language_selector() !== 'number') this.values.show_language_selector(1);
   }
 
@@ -132,20 +149,30 @@ export default class BasicsPage extends Page {
               ]
             )}
 
-            {Object.keys(this.displayNameOptions).length > 1
-              ? FieldSet.component(
-                  {
-                    label: app.translator.trans('core.admin.basics.display_name_heading'),
-                  },
-                  [
-                    <div className="helpText">{app.translator.trans('core.admin.basics.display_name_text')}</div>,
-                    Select.component({
-                      options: this.displayNameOptions,
-                      bidi: this.values.display_name_driver,
-                    }),
-                  ]
-                )
-              : ''}
+            {Object.keys(this.displayNameOptions).length > 1 ? (
+              <FieldSet label={app.translator.trans('core.admin.basics.display_name_heading')}>
+                <div className="helpText">{app.translator.trans('core.admin.basics.display_name_text')}</div>
+                <Select
+                  options={this.displayNameOptions}
+                  value={this.values.display_name_driver()}
+                  onchange={this.values.display_name_driver}
+                ></Select>
+              </FieldSet>
+            ) : (
+              ''
+            )}
+
+            {Object.keys(this.slugDriverOptions).map((model) => {
+              const options = this.slugDriverOptions[model];
+              if (Object.keys(options).length > 1) {
+                return (
+                  <FieldSet label={app.translator.trans('core.admin.basics.slug_driver_heading', { model })}>
+                    <div className="helpText">{app.translator.trans('core.admin.basics.slug_driver_text', { model })}</div>
+                    <Select options={options} value={this.values[`slug_driver_${model}`]()} onchange={this.values[`slug_driver_${model}`]}></Select>
+                  </FieldSet>
+                );
+              }
+            })}
 
             {Button.component(
               {
diff --git a/js/src/common/components/Select.js b/js/src/common/components/Select.js
index d4cfab4fa..5256b8570 100644
--- a/js/src/common/components/Select.js
+++ b/js/src/common/components/Select.js
@@ -13,7 +13,7 @@ import withAttr from '../utils/withAttr';
  */
 export default class Select extends Component {
   view() {
-    const { options, onchange, value, disabled } = this.attrs;
+    const { options, onchange, value, disabled, bidi } = this.attrs;
 
     return (
       <span className="Select">
diff --git a/src/Admin/Content/AdminPayload.php b/src/Admin/Content/AdminPayload.php
index e766c072a..82f77dee2 100644
--- a/src/Admin/Content/AdminPayload.php
+++ b/src/Admin/Content/AdminPayload.php
@@ -75,6 +75,9 @@ class AdminPayload
         $document->payload['extensions'] = $this->extensions->getExtensions()->toArray();
 
         $document->payload['displayNameDrivers'] = array_keys($this->container->make('flarum.user.display_name.supported_drivers'));
+        $document->payload['slugDrivers'] = array_map(function($resourceDrivers) {
+            return array_keys($resourceDrivers);
+        }, $this->container->make('flarum.http.slugDrivers'));
 
         $document->payload['phpVersion'] = PHP_VERSION;
         $document->payload['mysqlVersion'] = $this->db->selectOne('select version() as version')->version;