diff --git a/admin-ui/openapi-merge.json b/admin-ui/openapi-merge.json
new file mode 100644
index 000000000..42b81080a
--- /dev/null
+++ b/admin-ui/openapi-merge.json
@@ -0,0 +1,14 @@
+{
+    "inputs": [
+      {
+        "inputURL": "https://raw.githubusercontent.com/JanssenProject/jans/main/jans-config-api/docs/jans-config-api-swagger-auto.yaml"
+      },
+      {
+        "inputURL": "https://raw.githubusercontent.com/JanssenProject/jans/main/jans-config-api/plugins/docs/jans-admin-ui-plugin-swagger.yaml"
+      },
+      {
+        "inputURL": "https://raw.githubusercontent.com/JanssenProject/jans/main/jans-config-api/plugins/docs/user-mgt-plugin-swagger.yaml"
+      }
+    ], 
+    "output": "./configApiSpecs.yaml"
+  }
\ No newline at end of file
diff --git a/admin-ui/package.json b/admin-ui/package.json
index 5afb6c0c8..f8f79e062 100644
--- a/admin-ui/package.json
+++ b/admin-ui/package.json
@@ -55,8 +55,8 @@
     "start:dev": "node ./build/cli-tools.js --clear dist --create dist && webpack serve --config ./build/webpack.config.client.dev.js",
     "start:prod": "node ./build/cli-tools.js --clear dist --create dist && webpack-dev-server --config ./build/webpack.config.client.prod.js",
     "lint": "eslint app/ --ext .js,jsx --fix",
-    "api": "rm -rf jans_config_api && openapi-generator-cli generate -i https://raw.githubusercontent.com/JanssenProject/jans/main/jans-config-api/docs/jans-config-api-swagger.yaml --skip-validate-spec -g javascript -o jans_config_api && cd jans_config_api && npm install && npm run build",
-    "api-win": "del /f jans_config_api && openapi-generator-cli generate -i https://raw.githubusercontent.com/JanssenProject/jans/main/jans-config-api/docs/jans-config-api-swagger.yaml -g javascript -o jans_config_api && cd jans_config_api && npm install && npm run build",
+    "api": "rm -rf jans_config_api && openapi-merge-cli && openapi-generator-cli generate -i ./configApiSpecs.yaml --skip-validate-spec -g javascript -o jans_config_api && cd jans_config_api && npm install && npm run build",
+    "api-win": "del /f jans_config_api && openapi-merge-cli && openapi-generator-cli generate -i ./configApiSpecs.yaml -g javascript -o jans_config_api && cd jans_config_api && npm install && npm run build",
     "plugin:showAll": "node ./build/plugin-cli.js --showAllPlugins",
     "plugin:add": "node ./build/plugin-cli.js --addPlugin",
     "plugin:remove": "node ./build/plugin-cli.js --removePlugin",
diff --git a/admin-ui/plugins/admin/components/Mapping/MappingApi.js b/admin-ui/plugins/admin/components/Mapping/MappingApi.js
new file mode 100644
index 000000000..c6ddac2a6
--- /dev/null
+++ b/admin-ui/plugins/admin/components/Mapping/MappingApi.js
@@ -0,0 +1,41 @@
+import { handleResponse } from 'Utils/ApiUtils'
+
+export default class MappingApi {
+  constructor(api) {
+    this.api = api
+  }
+  getMappings = () => {
+    return new Promise((resolve, reject) => {
+      this.api.getAdminuiRolePermissions((error, data) => {
+        handleResponse(error, reject, resolve, data)
+      })
+    })
+  }
+
+  updateMapping = (data) => {
+    const options = {}
+    options['rolePermissionMapping'] = data
+    return new Promise((resolve, reject) => {
+      this.api.mapPermissionsToRole(options, (error, options) => {
+        handleResponse(error, reject, resolve, data)
+      })
+    })
+  }
+
+  addMapping = (data) => {
+    const options = {}
+    options['rolePermissionMapping'] = data
+    return new Promise((resolve, reject) => {
+      this.api.mapPermissionsToRole(options, (error, options) => {
+        handleResponse(error, reject, resolve, data)
+      })
+    })
+  }
+  deleteMapping = (data) => {
+    return new Promise((resolve, reject) => {
+      this.api.removeRolePermissionsPermission(data.role, (error, options) => {
+        handleResponse(error, reject, resolve, data)
+      })
+    })
+  }
+}
diff --git a/admin-ui/plugins/admin/components/Permissions/PermissionApi.js b/admin-ui/plugins/admin/components/Permissions/PermissionApi.js
new file mode 100644
index 000000000..c375ca05e
--- /dev/null
+++ b/admin-ui/plugins/admin/components/Permissions/PermissionApi.js
@@ -0,0 +1,42 @@
+import { handleResponse } from 'Utils/ApiUtils'
+
+export default class PermissionApi {
+  constructor(api) {
+    this.api = api
+  }
+  getPermissions = () => {
+    return new Promise((resolve, reject) => {
+      this.api.getAdminuiPermissions((error, data) => {
+        handleResponse(error, reject, resolve, data)
+      })
+    })
+  }
+
+  addPermission = (data) => {
+    const options = {}
+    options['adminPermission'] = data
+    return new Promise((resolve, reject) => {
+      this.api.addAdminuiPermission(options, (error, data) => {
+        handleResponse(error, reject, resolve, data)
+      })
+    })
+  }
+
+  editPermission = (data) => {
+    const options = {}
+    options['adminPermission'] = data
+    return new Promise((resolve, reject) => {
+      this.api.editAdminuiPermission(options, (error, data) => {
+        handleResponse(error, reject, resolve, data)
+      })
+    })
+  }
+  
+  deletePermission = async (data) => {
+    return new Promise((resolve, reject) => {
+      this.api.deleteAdminuiPermission(data.permission, (error, data) => {
+        handleResponse(error, reject, resolve, data)
+      })
+    })
+  }
+}
diff --git a/admin-ui/plugins/admin/components/Roles/RoleApi.js b/admin-ui/plugins/admin/components/Roles/RoleApi.js
new file mode 100644
index 000000000..8652b1a3a
--- /dev/null
+++ b/admin-ui/plugins/admin/components/Roles/RoleApi.js
@@ -0,0 +1,42 @@
+import { handleResponse } from 'Utils/ApiUtils'
+
+export default class RoleApi {
+  constructor(api) {
+    this.api = api
+  }
+  getRoles = () => {
+    return new Promise((resolve, reject) => {
+      this.api.getAdminuiRoles((error, data) => {
+        handleResponse(error, reject, resolve, data)
+      })
+    })
+  }
+
+  addRole = (data) => {
+    const options = {}
+    options['adminRole'] = data
+    return new Promise((resolve, reject) => {
+      this.api.addAdminuiRole(options, (error, data) => {
+        handleResponse(error, reject, resolve, data)
+      })
+    })
+  }
+
+  editRole = (data) => {
+    const options = {}
+    options['adminRole'] = data
+    return new Promise((resolve, reject) => {
+      this.api.editAdminuiRole(options, (error, data) => {
+        handleResponse(error, reject, resolve, data)
+      })
+    })
+  }
+
+  deleteRole = async (data) => {
+    return new Promise((resolve, reject) => {
+      this.api.deleteAdminuiRole(data.role, (error, data) => {
+        handleResponse(error, reject, resolve, data)
+      })
+    })
+  }
+}