diff --git a/frontend/api/model.js b/frontend/api/model.js
new file mode 100644
index 0000000000000000000000000000000000000000..f855f014fdb8d90560eba7b34fad972a7fc45575
--- /dev/null
+++ b/frontend/api/model.js
@@ -0,0 +1,88 @@
+import Lokka from 'lokka';
+import Transport from 'lokka-transport-http';
+
+
+export default class OpenAppStackModel {
+  constructor(graphQlUrl){
+    this.backendApiUrl = graphQlUrl || 'http://127.0.0.1:5000/graphql';
+    this.graphQlClient = new Lokka({
+        transport: new Transport(this.backendApiUrl)
+    });
+  }
+  allUsers(){
+    return this.graphQlClient.query(`
+      {
+        allUsers{
+          edges{
+            node{
+              username,
+              email,
+              applications{
+                edges{
+                  node{
+                    name
+                  }
+                }
+              },
+              roles{
+                edges{
+                  node{
+                    name
+                  }
+                }
+              }
+            }
+          }
+        }
+      }`)
+      .then( users => {
+        return users;
+      });
+  }
+  allApplications(){
+    return this.graphQlClient.query(`
+      {
+        allApplications{
+          edges{
+            node{
+              name,
+              users{
+                edges{
+                  node{
+                    username,
+                    email
+                  }
+                }
+              }
+            }
+          }
+        }
+      }`)
+      .then( applications => {
+        return applications;
+      });
+  }
+  allRoles(){
+    return this.graphQlClient.query(`
+      {
+        allRoles{
+          edges{
+            node{
+              name,
+              users{
+                edges{
+                  node{
+                    username,
+                    email
+                  }
+                }
+              }
+            }
+          }
+        }
+      }`)
+      .then( roles => {
+        return roles;
+      });
+  }
+}
diff --git a/frontend/package.json b/frontend/package.json
index f36a31652db82dac9901e30daf767566d275c375..f71f37c606159944d5b3748c059240ee0347168d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,6 +19,8 @@
     "@nuxtjs/axios": "^5.6.0",
     "bootstrap-vue": "^2.0.3",
     "cookie-parser": "^1.4.4",
+    "lokka": "^1.7.0",
+    "lokka-transport-http": "^1.6.1",
     "nuxt": "latest",
     "openid-client": "^3.7.3"
   },
diff --git a/frontend/pages/users.vue b/frontend/pages/users.vue
index 79e6a3e67b8ce7618734402151d440b5e937d539..b222e8bc730af8e2bbdca23b5f487880553799ff 100644
--- a/frontend/pages/users.vue
+++ b/frontend/pages/users.vue
@@ -62,6 +62,8 @@
 import editUsers from '~/components/edit-users'
 import editUser from '~/components/edit-user'
 import axios from 'axios'
+import OpenAppStackModel from '~/api/model.js'
+var backend = new OpenAppStackModel('/api/admin/graphql')
 
 export default {
   methods: {
@@ -181,47 +183,45 @@ export default {
     }
   },
   asyncData({req, params, env}){
-    var url = env.baseUrl + "/api/admin/graphql";
     if (process.server){
       // bypass authentication and access api directly because SSR doesn't contain cookie
       // with token
-      url = env.BACKEND_API_URL;
+      backend = new OpenAppStackModel(env.BACKEND_API_URL);
     }
-    return axios.post(
-      url, {
-        query: "query{allUsers{edges{node{username, email, roles{edges{node{name}}}, applications{edges{node{name}}}}}},allRoles{edges{node{name, description, users{edges{node{username}}}}}},allApplications{edges{node{name, users{edges{node{username}}}}}}}"
-      }).then((res) => {
-        return {users: res.data.data.allUsers.edges.map(user => {
-          var rUser = {};
-          rUser["username"] = user.node.username;
-          rUser["email"] = user.node.email;
-          rUser["roles"] = user.node.roles.edges.map(role => {
-            return role.node.name;
-          });
-          rUser["applications"] = user.node.applications.edges.map(app => {
-            return app.node.name;
-          });
-          rUser["password"] = "";
-          return rUser;
-        }), roles: res.data.data.allRoles.edges.map(role => {
-          var rRole = {};
-          rRole["name"] = role.node.name;
-          rRole["description"] = role.node.description;
-          rRole["users"] = role.node.users.edges.map(user => {
-            return user.node.username;
-          });
-          return rRole;
-        }), applications: res.data.data.allApplications.edges.map(app => {
-          var rApp = {};
-          rApp["name"] = app.node.name;
-          rApp["users"] = app.node.users.edges.map(user => {
-            return user.node.username;
-          });
-          return rApp;
-        })}
-      }).catch((e) => {
-        console.log(e);
-      });
+    var users = backend.allUsers()
+    var applications = backend.allApplications()
+    var roles = backend.allRoles()
+    return Promise.all([users, applications, roles])
+      .then( results => {
+        return {
+          users: results[0].allUsers.edges.map(user => {
+            var rUser = {};
+            rUser["username"] = user.node.username;
+            rUser["email"] = user.node.email;
+            rUser["roles"] = user.node.roles.edges.map(role => {
+              return role.node.name});
+            rUser["applications"] = user.node.applications.edges.map(app => {
+              return app.node.name});
+            rUser["password"] = "";
+            return rUser;
+            }),
+          applications: results[1].allApplications.edges.map(app => {
+            var rApp = {};
+            rApp["name"] = app.node.name;
+            rApp["users"] = app.node.users.edges.map(user => {
+              return user.node.username});
+            return rApp;
+            }),
+          roles: results[2].allRoles.edges.map(role => {
+            var rRole = {};
+            rRole["name"] = role.node.name;
+            rRole["description"] = role.node.description;
+            rRole["users"] = role.node.users.edges.map(user => {
+              return user.node.username});
+            return rRole;
+            })
+          }
+      })
   },
   middleware: ['auth', 'admin'],
   components: { editUsers, editUser },
@@ -230,6 +230,7 @@ export default {
       users: [],
       newUser: {username: "", password: "", email: "", roles: []},
       roles: [],
+      applications: [],
       addUserButtonVisibility: true,
       usernameFormVisibility: false,
       userFormVisibility: false,