diff --git a/client/src/components/User/UserDatasetPermissions.vue b/client/src/components/User/UserDatasetPermissions.vue
new file mode 100644
index 000000000000..baa26dbb924d
--- /dev/null
+++ b/client/src/components/User/UserDatasetPermissions.vue
@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import axios from "axios";
+import { computed, ref } from "vue";
+
+import { withPrefix } from "@/utils/redirect";
+
+import FormGeneric from "@/components/Form/FormGeneric.vue";
+
+interface UserDatasetPermissionsProps {
+    userId: string;
+}
+const props = defineProps<UserDatasetPermissionsProps>();
+
+const loading = ref(true);
+
+interface InputOption {
+    roleName: string;
+    roleValue: number;
+}
+
+const selectedAdvancedForm = ref(false);
+const managePermissionsOptions = ref<InputOption[]>([]);
+const accessPermissionsOptions = ref<InputOption[]>([]);
+const managePermissions = ref<number[]>([]);
+const accessPermissions = ref<number[]>([]);
+
+const inputsUrl = computed(() => {
+    return `/api/users/${props.userId}/permissions/inputs`;
+});
+
+async function init() {
+    const { data } = await axios.get(withPrefix(inputsUrl.value));
+    console.log(data);
+    loading.value = false;
+    const inputs = data.inputs;
+    const manageInput = inputs[0];
+    const accessInput = inputs[1];
+    managePermissionsOptions.value = manageInput.options.map((v: [string, number]) => { return <InputOption> {roleName: v[0], roleValue: v[1]}; } );
+    accessPermissionsOptions.value = accessInput.options.map((v: [string, number]) => { return <InputOption> {roleName: v[0], roleValue: v[1]}; } );
+
+    managePermissions.value = manageInput.value;
+    accessPermissions.value = accessInput.value;
+}
+init();
+
+const simplePermissions = computed(() => {
+    // we have one manage permission and read access can be that or not that but nothing else
+    const hasOneManagePermission = managePermissions.value.length == 1;
+    const hasAtMostOneAccessPermissions = accessPermissions.value.length < 2;
+    if (!hasOneManagePermission || !hasAtMostOneAccessPermissions) {
+        return false;
+    }
+    const managePermissionValue = managePermissions.value[0];
+    return accessPermissions.value.length == 0 || accessPermissions.value[0] == managePermissionValue;
+});
+
+const title = "Set Dataset Permissions for New Histories";
+
+const formConfig = computed(() => {
+    return {
+        title: title,
+        id: "edit-preferences-permissions",
+        description: "Grant others default access to newly created histories. Changes made here will only affect histories created after these settings have been stored.",
+        url: inputsUrl.value,
+        icon: "fa-users",
+        submitTitle: "Save Permissions",
+        redirect: "/user",
+    };
+});
+
+const checked = ref(false);
+
+async function change(value: unknown) {
+    const managePermissionValue: number = managePermissions.value[0] as number;
+    let access: number[] = [] as number[];
+    if(value) {
+        access = [managePermissionValue];
+    }
+    const formValue = {
+        "DATASET_MANAGE_PERMISSIONS": [managePermissionValue],
+        "DATASET_ACCESS": access,
+    };
+    const { data } = await axios.put(withPrefix(inputsUrl.value), formValue);
+    console.log(data);
+}
+</script>
+
+<template>
+    <div>
+        <div v-if="loading">
+            Loading....
+        </div>
+        <div v-else-if="simplePermissions && !selectedAdvancedForm">
+            <div class="ui-portlet-section">
+                <div class="portlet-header"><span class="portlet-title"><span class="portlet-title-icon fa mr-1 fa-users"></span> <b itemprop="name" class="portlet-title-text">{{ title }}</b> </span></div>
+                <div class="portlet-content">
+                    <div class="mb-3 mt-3">
+                        <b-form-checkbox v-model="checked" name="check-button" switch @change="change">
+                            Make new datasets private
+                        </b-form-checkbox>
+                    </div>
+                    <a href="#" @click="selectedAdvancedForm = true">Show advanced options.</a>
+                </div>
+            </div>
+        </div>
+        <div v-else>
+            <FormGeneric v-bind="formConfig" />
+        </div>
+    </div>
+</template>
diff --git a/client/src/components/User/UserPreferences.vue b/client/src/components/User/UserPreferences.vue
index e432f8a506b9..b4c63a597076 100644
--- a/client/src/components/User/UserPreferences.vue
+++ b/client/src/components/User/UserPreferences.vue
@@ -29,6 +29,13 @@
             :title="link.title"
             :description="link.description"
             :to="`/user/${index}`" />
+        <UserPreferencesElement
+            v-if="isConfigLoaded && !config.single_user"
+            id="edit-preferences-permissions"
+            icon="fa-users"
+            title="Set Dataset Permissions for New Histories"
+            description="Grant others default access to newly created histories. Changes made here will only affect histories created after these settings have been stored."
+            to="/user/permissions" />
         <UserPreferencesElement
             id="edit-preferences-api-key"
             icon="fa-key"
diff --git a/client/src/components/User/UserPreferencesModel.js b/client/src/components/User/UserPreferencesModel.js
index c4ece7087cd8..5efff575efa7 100644
--- a/client/src/components/User/UserPreferencesModel.js
+++ b/client/src/components/User/UserPreferencesModel.js
@@ -27,18 +27,6 @@ export const getUserPreferencesModel = (user_id) => {
             redirect: "/user",
             disabled: config.use_remote_user || !config.enable_account_interface,
         },
-        permissions: {
-            title: _l("Set Dataset Permissions for New Histories"),
-            id: "edit-preferences-permissions",
-            description: _l(
-                "Grant others default access to newly created histories. Changes made here will only affect histories created after these settings have been stored."
-            ),
-            url: `/api/users/${user_id}/permissions/inputs`,
-            icon: "fa-users",
-            submitTitle: "Save Permissions",
-            redirect: "/user",
-            disabled: config.single_user,
-        },
         toolbox_filters: {
             title: _l("Manage Toolbox Filters"),
             id: "edit-preferences-toolbox-filters",
diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js
index b0618f00a18d..864e812f3cfb 100644
--- a/client/src/entry/analysis/router.js
+++ b/client/src/entry/analysis/router.js
@@ -71,6 +71,7 @@ import HistoryArchiveWizard from "@/components/History/Archiving/HistoryArchiveW
 import NotificationsList from "@/components/Notifications/NotificationsList.vue";
 import Sharing from "@/components/Sharing/SharingPage.vue";
 import HistoryStorageOverview from "@/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue";
+import UserDatasetPermissions from "@/components/User/UserDatasetPermissions.vue";
 import WorkflowPublished from "@/components/Workflow/Published/WorkflowPublished.vue";
 
 Vue.use(VueRouter);
@@ -431,6 +432,14 @@ export function getRouter(Galaxy) {
                         component: NotificationsPreferences,
                         redirect: redirectAnon(),
                     },
+                    {
+                        path: "user/permissions",
+                        component: UserDatasetPermissions,
+                        redirect: redirectAnon(),
+                        props: (route) => ({
+                            userId: Galaxy.user.id,
+                        }),
+                    },
                     {
                         path: "user/:formId",
                         component: UserPreferencesForm,