diff --git a/src/App.tsx b/src/App.tsx
index 0f7b653..b9797b0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import { Routes, Route, Navigate } from 'react-router-dom';
+import { Routes, Route, Navigate, Outlet } from 'react-router-dom';
 import { Toaster } from 'react-hot-toast';
 
 import { useAuth } from 'src/services/auth';
@@ -10,7 +10,13 @@ import { LoginCallback } from './modules/login/LoginCallback';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function App() {
-  const { authToken } = useAuth();
+  const { authToken, currentUser, isAdmin } = useAuth();
+
+  const redirectToLogin = !authToken || !currentUser?.app_roles;
+
+  const ProtectedRoute = () => {
+    return isAdmin ? <Outlet /> : <Navigate to="/dashboard" />;
+  };
 
   return (
     <>
@@ -26,7 +32,7 @@ function App() {
       </Helmet>
 
       <div className="app bg-gray-50 min-h-screen flex flex-col">
-        {!authToken ? (
+        {redirectToLogin ? (
           <Routes>
             <Route path="/login" element={<Login />} />
             <Route path="/login-callback" element={<LoginCallback />} />
@@ -36,7 +42,9 @@ function App() {
           <Layout>
             <Routes>
               <Route path="/dashboard" element={<Dashboard />} />
-              <Route path="/users" element={<Users />} />
+              <Route path="/users" element={<ProtectedRoute />}>
+                <Route path="/users" element={<Users />} />
+              </Route>
               <Route path="*" element={<Navigate to="/dashboard" />} />
             </Routes>
           </Layout>
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 141da56..a58e2d8 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -8,20 +8,28 @@ import clsx from 'clsx';
 import { CurrentUserModal } from './components/CurrentUserModal';
 
 const navigation = [
-  { name: 'Dashboard', to: '/dashboard' },
-  { name: 'Users', to: '/users' },
+  { name: 'Dashboard', to: '/dashboard', requiresAdmin: false },
+  { name: 'Users', to: '/users', requiresAdmin: true },
 ];
 
 function classNames(...classes: any[]) {
   return classes.filter(Boolean).join(' ');
 }
 
+function filterNavigationByDashboardRole(isAdmin: boolean) {
+  if (isAdmin) {
+    return navigation;
+  }
+
+  return navigation.filter((item) => !item.requiresAdmin);
+}
+
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface HeaderProps {}
 
 const Header: React.FC<HeaderProps> = () => {
   const [currentUserModal, setCurrentUserModal] = useState(false);
-  const { logOut, currentUser } = useAuth();
+  const { logOut, currentUser, isAdmin } = useAuth();
 
   const { pathname } = useLocation();
 
@@ -30,6 +38,8 @@ const Header: React.FC<HeaderProps> = () => {
   };
   const currentUserModalClose = () => setCurrentUserModal(false);
 
+  const navigationItems = filterNavigationByDashboardRole(isAdmin);
+
   return (
     <>
       <Disclosure as="nav" className="bg-white shadow relative z-10">
@@ -55,7 +65,7 @@ const Header: React.FC<HeaderProps> = () => {
                   </Link>
                   <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
                     {/* Current: "border-primary-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
-                    {navigation.map((item) => (
+                    {navigationItems.map((item) => (
                       <Link
                         key={item.name}
                         to={item.to}
diff --git a/src/components/Header/components/CurrentUserModal/CurrentUserModal.tsx b/src/components/Header/components/CurrentUserModal/CurrentUserModal.tsx
index cf578cb..29a3c16 100644
--- a/src/components/Header/components/CurrentUserModal/CurrentUserModal.tsx
+++ b/src/components/Header/components/CurrentUserModal/CurrentUserModal.tsx
@@ -1,31 +1,33 @@
+import _ from 'lodash';
 import React, { useEffect } from 'react';
-import { useForm } from 'react-hook-form';
-import { Modal, Banner } from 'src/components';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { Modal } from 'src/components';
 import { Input, Select } from 'src/components/Form';
+import { useAuth } from 'src/services/auth';
 import { User, UserRole, useUsers } from 'src/services/users';
-import { appAccessList } from './consts';
+import { appAccessList, initialUserForm } from './consts';
 import { UserModalProps } from './types';
 
 export const CurrentUserModal = ({ open, onClose, user }: UserModalProps) => {
   const { editUserById, userModalLoading } = useUsers();
+  const { isAdmin } = useAuth();
 
   const { control, reset, handleSubmit } = useForm<User>({
-    defaultValues: {
-      name: null,
-      email: null,
-      id: null,
-      role_id: null,
-      status: null,
-    },
+    defaultValues: initialUserForm,
+  });
+
+  const { fields } = useFieldArray({
+    control,
+    name: 'app_roles',
   });
 
   useEffect(() => {
-    if (user) {
+    if (user && !_.isEmpty(user)) {
       reset(user);
     }
 
     return () => {
-      reset({ name: null, email: null, id: null });
+      reset(initialUserForm);
     };
   }, [user, reset]);
 
@@ -54,7 +56,7 @@ export const CurrentUserModal = ({ open, onClose, user }: UserModalProps) => {
   return (
     <Modal onClose={handleClose} open={open} onSave={handleSave} isLoading={userModalLoading} useCancelButton>
       <div className="bg-white px-4">
-        <div className="space-y-4 divide-y divide-gray-200">
+        <div className="space-y-10 divide-y divide-gray-200">
           <div>
             <div>
               <h3 className="text-lg leading-6 font-medium text-gray-900">Profile</h3>
@@ -69,77 +71,90 @@ export const CurrentUserModal = ({ open, onClose, user }: UserModalProps) => {
                 <Input control={control} name="email" label="Email" type="email" onKeyPress={handleKeyPress} />
               </div>
 
-              <div className="sm:col-span-6">
-                <Select
-                  control={control}
-                  name="role_id"
-                  label="Role"
-                  options={[
-                    { value: UserRole.Admin, name: 'Admin' },
-                    { value: UserRole.User, name: 'User' },
-                  ]}
-                />
+              {isAdmin && (
+                <>
+                  <div className="sm:col-span-3">
+                    {fields
+                      .filter((field) => field.name === 'dashboard')
+                      .map((item, index) => (
+                        <Select
+                          key={item.id}
+                          control={control}
+                          name={`app_roles.${index}.role`}
+                          label="Role"
+                          options={[
+                            { value: UserRole.Admin, name: 'Admin' },
+                            { value: UserRole.User, name: 'User' },
+                          ]}
+                        />
+                      ))}
+                  </div>
+
+                  <div className="sm:col-span-3 opacity-40 cursor-default pointer-events-none select-none">
+                    {/* <Select control={control} name="status" label="Status" options={['Admin', 'Inactive']} /> */}
+                    <label htmlFor="status" className="block text-sm font-medium text-gray-700">
+                      Status
+                    </label>
+                    <div className="mt-1">
+                      <select
+                        id="status"
+                        name="status"
+                        className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                      >
+                        <option>Active</option>
+                        <option>Inactive</option>
+                        <option>Banned</option>
+                      </select>
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+
+          {isAdmin && (
+            <div>
+              <div className="mt-8">
+                <h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
               </div>
 
-              <div className="sm:col-span-6">
-                <Banner title="Editing user status and app access coming soon." titleSm="Comming soon!" />
-              </div>
-
-              <div className="sm:col-span-3 opacity-40 cursor-default pointer-events-none select-none">
-                {/* <Select control={control} name="status" label="Status" options={['Admin', 'Inactive']} /> */}
-                <label htmlFor="status" className="block text-sm font-medium text-gray-700">
-                  Status
-                </label>
-                <div className="mt-1">
-                  <select
-                    id="status"
-                    name="status"
-                    className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
-                  >
-                    <option>Active</option>
-                    <option>Inactive</option>
-                    <option>Banned</option>
-                  </select>
+              <div>
+                <div className="flow-root mt-6">
+                  <ul className="-my-5 divide-y divide-gray-200 ">
+                    {fields
+                      .filter((field) => field.name !== 'dashboard')
+                      .map((item, index) => (
+                        <li className="py-4" key={item.name}>
+                          <div className="flex items-center space-x-4">
+                            <div className="flex-shrink-0 flex-1 flex items-center">
+                              <img
+                                className="h-10 w-10 rounded-md overflow-hidden"
+                                src={_.find(appAccessList, ['name', item.name!])?.image}
+                                alt={item.name ?? 'Image'}
+                              />
+                              <h3 className="ml-4 text-md leading-6 font-medium text-gray-900">
+                                {_.find(appAccessList, ['name', item.name!])?.label}
+                              </h3>
+                            </div>
+                            <div>
+                              <Select
+                                key={item.id}
+                                control={control}
+                                name={`app_roles.${index}.role`}
+                                options={[
+                                  { value: UserRole.Admin, name: 'Admin' },
+                                  { value: UserRole.User, name: 'User' },
+                                ]}
+                              />
+                            </div>
+                          </div>
+                        </li>
+                      ))}
+                  </ul>
                 </div>
               </div>
             </div>
-          </div>
-
-          <div className="opacity-40 cursor-default pointer-events-none select-none">
-            <div className="mt-4">
-              <h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
-            </div>
-
-            <div>
-              <div className="flow-root mt-6">
-                <ul className="-my-5 divide-y divide-gray-200 ">
-                  {appAccessList.map((app: any) => {
-                    return (
-                      <li className="py-4" key={app.name}>
-                        <div className="flex items-center space-x-4">
-                          <div className="flex-shrink-0 flex-1 flex items-center">
-                            <img className="h-10 w-10 rounded-md overflow-hidden" src={app.image} alt={app.name} />
-                            <h3 className="ml-4 text-md leading-6 font-medium text-gray-900">{app.name}</h3>
-                          </div>
-                          <div>
-                            <select
-                              id={app.name}
-                              name={app.name}
-                              className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
-                            >
-                              <option>User</option>
-                              <option>Admin</option>
-                              <option>Super Admin</option>
-                            </select>
-                          </div>
-                        </div>
-                      </li>
-                    );
-                  })}
-                </ul>
-              </div>
-            </div>
-          </div>
+          )}
         </div>
       </div>
     </Modal>
diff --git a/src/components/Header/components/CurrentUserModal/consts.ts b/src/components/Header/components/CurrentUserModal/consts.ts
index 080c939..abda708 100644
--- a/src/components/Header/components/CurrentUserModal/consts.ts
+++ b/src/components/Header/components/CurrentUserModal/consts.ts
@@ -1,18 +1,55 @@
+import { UserRole } from 'src/services/users';
+
 export const appAccessList = [
   {
+    name: 'wekan',
     image: '/assets/wekan.svg',
-    name: 'Wekan',
+    label: 'Wekan',
   },
   {
+    name: 'wordpress',
     image: '/assets/wordpress.svg',
-    name: 'Wordpress',
+    label: 'Wordpress',
   },
   {
+    name: 'next-cloud',
     image: '/assets/nextcloud.svg',
-    name: 'NextCloud',
+    label: 'NextCloud',
   },
   {
+    name: 'zulip',
     image: '/assets/zulip.svg',
-    name: 'Zulip',
+    label: 'Zulip',
   },
 ];
+
+const initialAppRoles = [
+  {
+    name: 'dashboard',
+    role: UserRole.User,
+  },
+  {
+    name: 'wekan',
+    role: UserRole.User,
+  },
+  {
+    name: 'wordpress',
+    role: UserRole.User,
+  },
+  {
+    name: 'next-cloud',
+    role: UserRole.User,
+  },
+  {
+    name: 'zulip',
+    role: UserRole.User,
+  },
+];
+
+export const initialUserForm = {
+  id: '',
+  name: '',
+  email: '',
+  app_roles: initialAppRoles,
+  status: '',
+};
diff --git a/src/components/Header/components/CurrentUserModal/types.ts b/src/components/Header/components/CurrentUserModal/types.ts
index 00bc7d6..aa11c0e 100644
--- a/src/components/Header/components/CurrentUserModal/types.ts
+++ b/src/components/Header/components/CurrentUserModal/types.ts
@@ -3,5 +3,5 @@ import { User } from 'src/services/users';
 export type UserModalProps = {
   open: boolean;
   onClose: () => void;
-  user: User;
+  user: User | null;
 };
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 09eb629..157b728 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -148,26 +148,28 @@ export const Table = <T extends Record<string, unknown>>({
               );
             })
           ) : (
-            <td colSpan={4} className="py-24">
-              <div className="flex flex-col justify-center items-center">
-                <div className="flex justify-center items-center border border-transparent text-base font-medium rounded-md text-white transition ease-in-out duration-150">
-                  <svg
-                    className="animate-spin h-6 w-6 text-primary"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                  >
-                    <circle className="opacity-50" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                    <path
-                      className="opacity-100"
-                      fill="currentColor"
-                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                    />
-                  </svg>
+            <tr>
+              <td colSpan={4} className="py-24">
+                <div className="flex flex-col justify-center items-center">
+                  <div className="flex justify-center items-center border border-transparent text-base font-medium rounded-md text-white transition ease-in-out duration-150">
+                    <svg
+                      className="animate-spin h-6 w-6 text-primary"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                    >
+                      <circle className="opacity-50" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                      <path
+                        className="opacity-100"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      />
+                    </svg>
+                  </div>
+                  <p className="text-sm text-primary-600 mt-2">Loading users</p>
                 </div>
-                <p className="text-sm text-primary-600 mt-2">Loading users</p>
-              </div>
-            </td>
+              </td>
+            </tr>
           )}
         </tbody>
       </table>
diff --git a/src/modules/users/Users.tsx b/src/modules/users/Users.tsx
index 899065a..6ba3265 100644
--- a/src/modules/users/Users.tsx
+++ b/src/modules/users/Users.tsx
@@ -5,6 +5,7 @@ import { CogIcon, TrashIcon } from '@heroicons/react/outline';
 import { useUsers } from 'src/services/users';
 import { Table } from 'src/components';
 import { debounce } from 'lodash';
+import { useAuth } from 'src/services/auth';
 import { UserModal } from './components/UserModal';
 
 export const Users: React.FC = () => {
@@ -13,6 +14,7 @@ export const Users: React.FC = () => {
   const [userId, setUserId] = useState(null);
   const [search, setSearch] = useState('');
   const { users, loadUsers, userTableLoading } = useUsers();
+  const { isAdmin } = useAuth();
 
   const handleSearch = (event: any) => {
     setSearch(event.target.value);
@@ -60,23 +62,27 @@ export const Users: React.FC = () => {
         Cell: (props: any) => {
           const { row } = props;
 
-          return (
-            <div className="text-right lg:opacity-0 group-hover:opacity-100 transition-opacity">
-              <button
-                onClick={() => configureModalOpen(row.original.id)}
-                type="button"
-                className="inline-flex items-center px-4 py-2 border border-gray-200 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
-              >
-                <CogIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
-                Configure
-              </button>
-            </div>
-          );
+          if (isAdmin) {
+            return (
+              <div className="text-right lg:opacity-0 group-hover:opacity-100 transition-opacity">
+                <button
+                  onClick={() => configureModalOpen(row.original.id)}
+                  type="button"
+                  className="inline-flex items-center px-4 py-2 border border-gray-200 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+                >
+                  <CogIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
+                  Configure
+                </button>
+              </div>
+            );
+          }
+
+          return null;
         },
         width: 'auto',
       },
     ],
-    [],
+    [isAdmin],
   );
 
   const selectedRows = useCallback((rows: Record<string, boolean>) => {
@@ -88,16 +94,19 @@ export const Users: React.FC = () => {
       <div className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8 h-full flex-grow">
         <div className="pb-5 mt-6 border-b border-gray-200 sm:flex sm:items-center sm:justify-between">
           <h1 className="text-3xl leading-6 font-bold text-gray-900">Users</h1>
-          <div className="mt-3 sm:mt-0 sm:ml-4">
-            <button
-              onClick={() => configureModalOpen(null)}
-              type="button"
-              className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-700 hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-800"
-            >
-              <PlusIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
-              Add new user
-            </button>
-          </div>
+
+          {isAdmin && (
+            <div className="mt-3 sm:mt-0 sm:ml-4">
+              <button
+                onClick={() => configureModalOpen(null)}
+                type="button"
+                className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-700 hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-800"
+              >
+                <PlusIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
+                Add new user
+              </button>
+            </div>
+          )}
         </div>
 
         <div className="flex justify-between w-100 my-3 items-center mb-5 ">
@@ -153,7 +162,7 @@ export const Users: React.FC = () => {
           </div>
         </div>
 
-        <UserModal open={configureModal} onClose={configureModalClose} userId={userId} />
+        <UserModal open={configureModal} onClose={configureModalClose} userId={userId} setUserId={setUserId} />
       </div>
     </div>
   );
diff --git a/src/modules/users/components/UserModal/UserModal.tsx b/src/modules/users/components/UserModal/UserModal.tsx
index 5b3814b..b31d218 100644
--- a/src/modules/users/components/UserModal/UserModal.tsx
+++ b/src/modules/users/components/UserModal/UserModal.tsx
@@ -1,26 +1,27 @@
 import React, { useEffect, useState } from 'react';
+import _ from 'lodash';
 import { TrashIcon } from '@heroicons/react/outline';
-import { useForm } from 'react-hook-form';
-import { Modal, Banner, ConfirmationModal } from 'src/components';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { Modal, ConfirmationModal } from 'src/components';
 import { Input, Select } from 'src/components/Form';
 import { User, UserRole, useUsers } from 'src/services/users';
 import { useAuth } from 'src/services/auth';
-import { appAccessList } from './consts';
+import { appAccessList, initialUserForm } from './consts';
 import { UserModalProps } from './types';
 
-export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
+export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps) => {
   const [deleteModal, setDeleteModal] = useState(false);
-  const { user, loadUser, editUserById, createNewUser, userModalLoading, deleteUserById } = useUsers();
-  const { currentUser } = useAuth();
+  const { user, loadUser, editUserById, createNewUser, userModalLoading, deleteUserById, clearSelectedUser } =
+    useUsers();
+  const { currentUser, isAdmin } = useAuth();
 
   const { control, reset, handleSubmit } = useForm<User>({
-    defaultValues: {
-      name: null,
-      email: null,
-      id: null,
-      role_id: null,
-      status: null,
-    },
+    defaultValues: initialUserForm,
+  });
+
+  const { fields } = useFieldArray({
+    control,
+    name: 'app_roles',
   });
 
   useEffect(() => {
@@ -28,19 +29,19 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
       loadUser(userId);
     }
 
-    reset({ name: null, email: null, id: null, status: null });
+    reset(initialUserForm);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [userId]);
+  }, [userId, open]);
 
   useEffect(() => {
-    if (user) {
+    if (!_.isEmpty(user)) {
       reset(user);
     }
 
     return () => {
-      reset({ name: null, email: null, id: null, status: null });
+      reset(initialUserForm);
     };
-  }, [user, reset]);
+  }, [user, reset, open]);
 
   const handleSave = async () => {
     try {
@@ -48,13 +49,14 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
         await handleSubmit((data) => editUserById(data))();
       } else {
         await handleSubmit((data) => createNewUser(data))();
-        reset({ name: null, email: null, id: null, status: null });
       }
-
-      onClose();
     } catch (e: any) {
       // Continue
     }
+
+    onClose();
+    clearSelectedUser();
+    setUserId(null);
   };
 
   const handleKeyPress = (e: any) => {
@@ -65,6 +67,8 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
 
   const handleClose = () => {
     onClose();
+    clearSelectedUser();
+    setUserId(null);
   };
 
   const deleteModalOpen = () => setDeleteModal(true);
@@ -74,6 +78,9 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
     if (userId) {
       deleteUserById(userId);
     }
+
+    clearSelectedUser();
+    setUserId(null);
     handleClose();
     deleteModalClose();
   };
@@ -87,7 +94,7 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
         isLoading={userModalLoading}
         leftActions={
           userId &&
-          user.email !== currentUser.email && (
+          user.email !== currentUser?.email && (
             <button
               onClick={deleteModalOpen}
               type="button"
@@ -101,7 +108,7 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
         useCancelButton
       >
         <div className="bg-white px-4">
-          <div className="space-y-4 divide-y divide-gray-200">
+          <div className="space-y-10 divide-y divide-gray-200">
             <div>
               <div>
                 <h3 className="text-lg leading-6 font-medium text-gray-900">{userId ? 'Edit user' : 'Add new user'}</h3>
@@ -116,77 +123,91 @@ export const UserModal = ({ open, onClose, userId }: UserModalProps) => {
                   <Input control={control} name="email" label="Email" type="email" onKeyPress={handleKeyPress} />
                 </div>
 
-                <div className="sm:col-span-6">
-                  <Select
-                    control={control}
-                    name="role_id"
-                    label="Role"
-                    options={[
-                      { value: UserRole.Admin, name: 'Admin' },
-                      { value: UserRole.User, name: 'User' },
-                    ]}
-                  />
+                <div className="sm:col-span-3">
+                  {fields
+                    .filter((field) => field.name === 'dashboard')
+                    .map((item, index) => (
+                      <Select
+                        key={item.name}
+                        control={control}
+                        name={`app_roles.${index}.role`}
+                        label="Role"
+                        options={[
+                          { value: UserRole.User, name: 'User' },
+                          { value: UserRole.Admin, name: 'Admin' },
+                        ]}
+                      />
+                    ))}
                 </div>
 
-                <div className="sm:col-span-6">
-                  <Banner title="Editing user status and app access coming soon." titleSm="Comming soon!" />
+                {isAdmin && (
+                  <div className="sm:col-span-3 opacity-40 cursor-default pointer-events-none select-none">
+                    <label htmlFor="status" className="block text-sm font-medium text-gray-700">
+                      Status
+                    </label>
+                    <div className="mt-1">
+                      <select
+                        id="status"
+                        name="status"
+                        className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                      >
+                        <option>Active</option>
+                        <option>Inactive</option>
+                        <option>Banned</option>
+                      </select>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {isAdmin && (
+              <div>
+                <div className="mt-8">
+                  <h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
                 </div>
 
-                <div className="sm:col-span-3 opacity-40 cursor-default pointer-events-none select-none">
-                  {/* <Select control={control} name="status" label="Status" options={['Active', 'Inactive']} /> */}
-                  <label htmlFor="status" className="block text-sm font-medium text-gray-700">
-                    Status
-                  </label>
-                  <div className="mt-1">
-                    <select
-                      id="status"
-                      name="status"
-                      className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
-                    >
-                      <option>Active</option>
-                      <option>Inactive</option>
-                      <option>Banned</option>
-                    </select>
+                <div>
+                  <div className="flow-root mt-6">
+                    <ul className="-my-5 divide-y divide-gray-200 ">
+                      {fields.map((item, index) => {
+                        if (item.name === 'dashboard') {
+                          return null;
+                        }
+
+                        return (
+                          <li className="py-4" key={item.name}>
+                            <div className="flex items-center space-x-4">
+                              <div className="flex-shrink-0 flex-1 flex items-center">
+                                <img
+                                  className="h-10 w-10 rounded-md overflow-hidden"
+                                  src={_.find(appAccessList, ['name', item.name!])?.image}
+                                  alt={item.name ?? 'Image'}
+                                />
+                                <h3 className="ml-4 text-md leading-6 font-medium text-gray-900">
+                                  {_.find(appAccessList, ['name', item.name!])?.label}
+                                </h3>
+                              </div>
+                              <div>
+                                <Select
+                                  key={item.id}
+                                  control={control}
+                                  name={`app_roles.${index}.role`}
+                                  options={[
+                                    { value: UserRole.User, name: 'User' },
+                                    { value: UserRole.Admin, name: 'Admin' },
+                                  ]}
+                                />
+                              </div>
+                            </div>
+                          </li>
+                        );
+                      })}
+                    </ul>
                   </div>
                 </div>
               </div>
-            </div>
-
-            <div className="opacity-40 cursor-default pointer-events-none select-none">
-              <div className="mt-4">
-                <h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
-              </div>
-
-              <div>
-                <div className="flow-root mt-6">
-                  <ul className="-my-5 divide-y divide-gray-200 ">
-                    {appAccessList.map((app: any) => {
-                      return (
-                        <li className="py-4" key={app.name}>
-                          <div className="flex items-center space-x-4">
-                            <div className="flex-shrink-0 flex-1 flex items-center">
-                              <img className="h-10 w-10 rounded-md overflow-hidden" src={app.image} alt={app.name} />
-                              <h3 className="ml-4 text-md leading-6 font-medium text-gray-900">{app.name}</h3>
-                            </div>
-                            <div>
-                              <select
-                                id={app.name}
-                                name={app.name}
-                                className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
-                              >
-                                <option>User</option>
-                                <option>Admin</option>
-                                <option>Super Admin</option>
-                              </select>
-                            </div>
-                          </div>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                </div>
-              </div>
-            </div>
+            )}
           </div>
         </div>
       </Modal>
diff --git a/src/modules/users/components/UserModal/consts.ts b/src/modules/users/components/UserModal/consts.ts
index 080c939..a47d6de 100644
--- a/src/modules/users/components/UserModal/consts.ts
+++ b/src/modules/users/components/UserModal/consts.ts
@@ -1,18 +1,55 @@
+import { UserRole } from 'src/services/users';
+
 export const appAccessList = [
   {
+    name: 'wekan',
     image: '/assets/wekan.svg',
-    name: 'Wekan',
+    label: 'Wekan',
   },
   {
+    name: 'wordpress',
     image: '/assets/wordpress.svg',
-    name: 'Wordpress',
+    label: 'Wordpress',
   },
   {
+    name: 'nextcloud',
     image: '/assets/nextcloud.svg',
-    name: 'NextCloud',
+    label: 'NextCloud',
   },
   {
+    name: 'zulip',
     image: '/assets/zulip.svg',
-    name: 'Zulip',
+    label: 'Zulip',
   },
 ];
+
+const initialAppRoles = [
+  {
+    name: 'dashboard',
+    role: UserRole.User,
+  },
+  {
+    name: 'wekan',
+    role: UserRole.User,
+  },
+  {
+    name: 'wordpress',
+    role: UserRole.User,
+  },
+  {
+    name: 'nextcloud',
+    role: UserRole.User,
+  },
+  {
+    name: 'zulip',
+    role: UserRole.User,
+  },
+];
+
+export const initialUserForm = {
+  id: '',
+  name: '',
+  email: '',
+  app_roles: initialAppRoles,
+  status: '',
+};
diff --git a/src/modules/users/components/UserModal/types.ts b/src/modules/users/components/UserModal/types.ts
index 710d29e..f7804ae 100644
--- a/src/modules/users/components/UserModal/types.ts
+++ b/src/modules/users/components/UserModal/types.ts
@@ -2,4 +2,5 @@ export type UserModalProps = {
   open: boolean;
   onClose: () => void;
   userId: string | null;
+  setUserId: any;
 };
diff --git a/src/services/auth/hooks/use-auth.ts b/src/services/auth/hooks/use-auth.ts
index 89fc5ff..cd9356b 100644
--- a/src/services/auth/hooks/use-auth.ts
+++ b/src/services/auth/hooks/use-auth.ts
@@ -1,11 +1,12 @@
 import { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { getAuthToken, getCurrentUser, signIn, signOut } from '../redux';
+import { getAuthToken, getCurrentUser, getIsAdmin, signIn, signOut } from '../redux';
 
 export function useAuth() {
   const dispatch = useDispatch();
   const currentUser = useSelector(getCurrentUser);
   const authToken = useSelector(getAuthToken);
+  const isAdmin = useSelector(getIsAdmin);
 
   const logIn = useCallback(
     (params) => {
@@ -21,6 +22,7 @@ export function useAuth() {
   return {
     authToken,
     currentUser,
+    isAdmin,
     logIn,
     logOut,
   };
diff --git a/src/services/auth/redux/index.ts b/src/services/auth/redux/index.ts
index d65fe6c..c1d0083 100644
--- a/src/services/auth/redux/index.ts
+++ b/src/services/auth/redux/index.ts
@@ -1,4 +1,4 @@
 export { signIn, signOut, AuthActionTypes } from './actions';
 export { default as reducer } from './reducers';
-export { getAuth, getIsAuthLoading, getAuthToken, getCurrentUser } from './selectors';
+export { getAuth, getIsAuthLoading, getAuthToken, getCurrentUser, getIsAdmin } from './selectors';
 export * from './types';
diff --git a/src/services/auth/redux/reducers.ts b/src/services/auth/redux/reducers.ts
index 8deb265..43fb2dd 100644
--- a/src/services/auth/redux/reducers.ts
+++ b/src/services/auth/redux/reducers.ts
@@ -6,12 +6,12 @@ import { AuthActionTypes } from './actions';
 import { transformAuthUser } from '../transformations';
 
 const initialCurrentUserState: User = {
-  email: null,
-  name: null,
-  id: null,
-  role_id: null,
-  status: null,
-  preferredUsername: null,
+  email: '',
+  name: '',
+  id: '',
+  app_roles: [],
+  status: '',
+  preferredUsername: '',
 };
 
 const initialState: AuthState = {
diff --git a/src/services/auth/redux/selectors.ts b/src/services/auth/redux/selectors.ts
index 4982e5e..0feaae5 100644
--- a/src/services/auth/redux/selectors.ts
+++ b/src/services/auth/redux/selectors.ts
@@ -1,6 +1,7 @@
 import { State } from 'src/redux';
 
 import { isLoading } from 'src/services/api';
+import { UserRole } from 'src/services/users';
 
 export const getAuth = (state: State) => state.auth;
 
@@ -8,6 +9,20 @@ export const getAuthToken = (state: State) => state.auth.token;
 
 export const getCurrentUser = (state: State) => state.auth.userInfo;
 
+export const getIsAdmin = (state: State) => {
+  // check since old users wont have this
+  if (state.auth.userInfo) {
+    if (!state.auth.userInfo.app_roles) {
+      return false;
+    }
+    const isAdmin = state.auth.userInfo.app_roles.find(
+      (role) => role.name === 'dashboard' && role.role === UserRole.Admin,
+    );
+    return !!isAdmin;
+  }
+  return false;
+};
+
 export const getIsAuthLoading = (state: State) => isLoading(getAuth(state));
 
 export const getToken = (state: State) => state.auth.token;
diff --git a/src/services/auth/transformations.ts b/src/services/auth/transformations.ts
index 2cfebaf..1f39058 100644
--- a/src/services/auth/transformations.ts
+++ b/src/services/auth/transformations.ts
@@ -1,18 +1,21 @@
-import { UserRole } from '../users';
+import { User } from '../users';
 import { Auth } from './types';
+import { transformAppRoles } from '../users/transformations';
 
-export const transformAuthUser = (response: any): Auth => {
-  const resolvedUserRole = !response.userInfo.role_id ? UserRole.User : response.userInfo.role_id;
-
+const transformUser = (response: any): User => {
   return {
-    token: response.accessToken,
-    userInfo: {
-      id: response.userInfo.id,
-      role_id: resolvedUserRole,
-      email: response.userInfo.email ?? null,
-      name: response.userInfo.name ?? null,
-      preferredUsername: response.userInfo.preferredUsername,
-      status: response.userInfo.state ?? null,
-    },
+    id: response.id ?? '',
+    app_roles: response.app_roles ? response.app_roles.map(transformAppRoles) : [],
+    email: response.email ?? '',
+    name: response.name ?? '',
+    preferredUsername: response.preferredUsername ?? '',
+    status: response.state ?? '',
+  };
+};
+
+export const transformAuthUser = (response: any): Auth => {
+  return {
+    token: response.accessToken,
+    userInfo: response.userInfo ? transformUser(response.userInfo) : null,
   };
 };
diff --git a/src/services/auth/types.ts b/src/services/auth/types.ts
index f196385..a8ba8c5 100644
--- a/src/services/auth/types.ts
+++ b/src/services/auth/types.ts
@@ -2,5 +2,5 @@ import { User } from '../users';
 
 export interface Auth {
   token: string | null;
-  userInfo: User;
+  userInfo: User | null;
 }
diff --git a/src/services/users/hooks/use-users.ts b/src/services/users/hooks/use-users.ts
index 8595252..0e5dd35 100644
--- a/src/services/users/hooks/use-users.ts
+++ b/src/services/users/hooks/use-users.ts
@@ -1,5 +1,13 @@
 import { useDispatch, useSelector } from 'react-redux';
-import { getUsers, fetchUsers, fetchUserById, updateUserById, createUser, deleteUser } from '../redux';
+import {
+  getUsers,
+  fetchUsers,
+  fetchUserById,
+  updateUserById,
+  createUser,
+  deleteUser,
+  clearCurrentUser,
+} from '../redux';
 import { getUserById, getUserModalLoading, getUserslLoading } from '../redux/selectors';
 
 export function useUsers() {
@@ -17,6 +25,10 @@ export function useUsers() {
     return dispatch(fetchUserById(id));
   }
 
+  function clearSelectedUser() {
+    return dispatch(clearCurrentUser());
+  }
+
   function editUserById(data: any) {
     return dispatch(updateUserById(data));
   }
@@ -39,5 +51,6 @@ export function useUsers() {
     userTableLoading,
     createNewUser,
     deleteUserById,
+    clearSelectedUser,
   };
 }
diff --git a/src/services/users/redux/actions.ts b/src/services/users/redux/actions.ts
index 67be7ee..7c35034 100644
--- a/src/services/users/redux/actions.ts
+++ b/src/services/users/redux/actions.ts
@@ -1,5 +1,6 @@
 import { Dispatch } from 'redux';
 import { showToast, ToastType } from 'src/common/util/show-toast';
+import { State } from 'src/redux/types';
 import { performApiCall } from 'src/services/api';
 import { AuthActionTypes } from 'src/services/auth';
 import { transformRequestUser, transformUser } from '../transformations';
@@ -68,9 +69,11 @@ export const fetchUserById = (id: string) => async (dispatch: Dispatch<any>) =>
   dispatch(setUserModalLoading(false));
 };
 
-export const updateUserById = (user: any) => async (dispatch: Dispatch<any>) => {
+export const updateUserById = (user: any) => async (dispatch: Dispatch<any>, getState: any) => {
   dispatch(setUserModalLoading(true));
 
+  const state: State = getState();
+
   try {
     const { data } = await performApiCall({
       path: `/users/${user.id}`,
@@ -83,10 +86,12 @@ export const updateUserById = (user: any) => async (dispatch: Dispatch<any>) =>
       payload: transformUser(data),
     });
 
-    dispatch({
-      type: AuthActionTypes.UPDATE_AUTH_USER,
-      payload: transformUser(data),
-    });
+    if (state.auth.userInfo?.id === user.id) {
+      dispatch({
+        type: AuthActionTypes.UPDATE_AUTH_USER,
+        payload: transformUser(data),
+      });
+    }
 
     showToast('User updated successfully.', ToastType.Success);
 
@@ -148,3 +153,10 @@ export const deleteUser = (id: string) => async (dispatch: Dispatch<any>) => {
 
   dispatch(setUserModalLoading(false));
 };
+
+export const clearCurrentUser = () => (dispatch: Dispatch<any>) => {
+  dispatch({
+    type: UserActionTypes.DELETE_USER,
+    payload: {},
+  });
+};
diff --git a/src/services/users/transformations.ts b/src/services/users/transformations.ts
index 5bef470..5f1c2f7 100644
--- a/src/services/users/transformations.ts
+++ b/src/services/users/transformations.ts
@@ -1,33 +1,38 @@
-import _ from 'lodash';
+import { AppRoles, User, UserRole } from './types';
 
-import { User, UserRole } from './types';
+export const transformAppRoles = (data: any): AppRoles => {
+  const resolvedAdminRole = data.role_id === 1 ? UserRole.Admin : UserRole.User;
+
+  return {
+    name: data.name ?? '',
+    role: resolvedAdminRole ?? UserRole.User,
+  };
+};
+
+export const transformRequestAppRoles = (data: AppRoles): any => {
+  const resolvedRequestRole = data.role === UserRole.Admin ? 1 : null;
+
+  return {
+    name: data.name ?? '',
+    role_id: resolvedRequestRole,
+  };
+};
 
 export const transformUser = (response: any): User => {
-  const userResponse = _.get(response, 'user', response);
-
-  const resolvedUserRole = !userResponse.traits.role_id ? UserRole.User : userResponse.traits.role_id;
-
   return {
-    id: userResponse.id,
-    role_id: resolvedUserRole,
-    email: userResponse.traits.email,
-    name: userResponse.traits.name ?? null,
-    preferredUsername: userResponse.preferredUsername,
-    status: userResponse.state,
+    id: response.id ?? '',
+    app_roles: response.traits.app_roles ? response.traits.app_roles.map(transformAppRoles) : [],
+    email: response.traits.email ?? '',
+    name: response.traits.name ?? '',
+    preferredUsername: response.preferredUsername ?? '',
+    status: response.state ?? '',
   };
 };
 
-export const transformRequestUser = (data: Pick<User, 'role_id' | 'name' | 'email'>) => {
-  if (data.role_id === UserRole.User) {
-    return {
-      email: data.email,
-      name: data.name,
-    };
-  }
-
+export const transformRequestUser = (data: Pick<User, 'app_roles' | 'name' | 'email'>) => {
   return {
-    role_id: Number(data.role_id),
-    email: data.email,
-    name: data.name,
+    app_roles: data.app_roles.map(transformRequestAppRoles),
+    email: data.email ?? '',
+    name: data.name ?? '',
   };
 };
diff --git a/src/services/users/types.ts b/src/services/users/types.ts
index 2ab4e1b..9245247 100644
--- a/src/services/users/types.ts
+++ b/src/services/users/types.ts
@@ -1,10 +1,10 @@
 export interface User {
-  id: number | null;
-  role_id: UserRole | null;
-  email: string | null;
-  name: string | null;
-  preferredUsername: string | null;
-  status: string | null;
+  id: string;
+  app_roles: AppRoles[];
+  email: string;
+  name: string;
+  preferredUsername: string;
+  status: string;
 }
 
 export interface FormUser extends User {
@@ -13,8 +13,13 @@ export interface FormUser extends User {
 }
 
 export enum UserRole {
-  Admin = '1',
-  User = '2',
+  Admin = 'admin',
+  User = 'user',
+}
+
+export interface AppRoles {
+  name: string | null;
+  role: UserRole | null;
 }
 
 export interface UserApiRequest {