diff --git a/app/frontend/src/javascript/api/member.ts b/app/frontend/src/javascript/api/member.ts
new file mode 100644
index 000000000..6832cf951
--- /dev/null
+++ b/app/frontend/src/javascript/api/member.ts
@@ -0,0 +1,20 @@
+import apiClient from './clients/api-client';
+import { AxiosResponse } from 'axios';
+import { User, UserIndexFilter } from '../models/user';
+
+export default class MemberAPI {
+  static async list (filters: UserIndexFilter): Promise<Array<User>> {
+    const res: AxiosResponse<Array<User>> = await apiClient.post('/api/members/list', filters);
+    return res?.data;
+  }
+
+  static async create (user: User): Promise<User> {
+    const res: AxiosResponse<User> = await apiClient.post('/api/members/create', { user });
+    return res?.data;
+  }
+
+  static async update (user: User): Promise<User> {
+    const res: AxiosResponse<User> = await apiClient.patch(`/api/members/${user.id}`, { user });
+    return res?.data;
+  }
+}
diff --git a/app/frontend/src/javascript/components/user/user-profile-form.tsx b/app/frontend/src/javascript/components/user/user-profile-form.tsx
index be1d5de93..73e25c060 100644
--- a/app/frontend/src/javascript/components/user/user-profile-form.tsx
+++ b/app/frontend/src/javascript/components/user/user-profile-form.tsx
@@ -13,6 +13,7 @@ import { ChangePassword } from './change-password';
 import { PasswordInput } from './password-input';
 import { FormSwitch } from '../form/form-switch';
 import { FormRichText } from '../form/form-rich-text';
+import MemberAPI from '../../api/member';
 
 declare const Application: IApplication;
 
@@ -22,9 +23,10 @@ interface UserProfileFormProps {
   user: User,
   className?: string,
   onError: (message: string) => void,
+  onSuccess: (user: User) => void,
 }
 
-export const UserProfileForm: React.FC<UserProfileFormProps> = ({ action, size, user, className, onError }) => {
+export const UserProfileForm: React.FC<UserProfileFormProps> = ({ action, size, user, className, onError, onSuccess }) => {
   const { t } = useTranslation('shared');
 
   // regular expression to validate the the input fields
@@ -40,7 +42,9 @@ export const UserProfileForm: React.FC<UserProfileFormProps> = ({ action, size,
    * Callback triggered when the form is submitted: process with the user creation or update.
    */
   const onSubmit: SubmitHandler<User> = (data: User) => {
-    console.log(action, data);
+    MemberAPI[action](data)
+      .then(res => { onSuccess(res); })
+      .catch((error) => { onError(error); });
   };
 
   return (
@@ -195,4 +199,4 @@ const UserProfileFormWrapper: React.FC<UserProfileFormProps> = (props) => {
   );
 };
 
-Application.Components.component('userProfileForm', react2angular(UserProfileFormWrapper, ['action', 'size', 'user', 'className', 'onError']));
+Application.Components.component('userProfileForm', react2angular(UserProfileFormWrapper, ['action', 'size', 'user', 'className', 'onError', 'onSuccess']));
diff --git a/app/frontend/src/javascript/controllers/members.js b/app/frontend/src/javascript/controllers/members.js
index 0b1ce3c7b..5fe08245b 100644
--- a/app/frontend/src/javascript/controllers/members.js
+++ b/app/frontend/src/javascript/controllers/members.js
@@ -283,6 +283,16 @@ Application.Controllers.controller('EditProfileController', ['$scope', '$rootSco
       growl.error(message);
     };
 
+    /**
+     * Callback triggered when the user was successfully updated
+     * @param user {object} the updated user
+     */
+    $scope.onSuccess = function (user) {
+      $scope.currentUser = _.cloneDeep(user);
+      Auth._currentUser = _.cloneDeep(user);
+      $rootScope.currentUser = _.cloneDeep(user);
+    };
+
     /* PRIVATE SCOPE */
 
     /**
diff --git a/app/frontend/src/javascript/models/user.ts b/app/frontend/src/javascript/models/user.ts
index d519510b7..c70b0b89c 100644
--- a/app/frontend/src/javascript/models/user.ts
+++ b/app/frontend/src/javascript/models/user.ts
@@ -87,3 +87,13 @@ export interface User {
   machine_credits: Array<{machine_id: number, hours_used: number}>,
   last_sign_in_at: TDateISO
 }
+
+type OrderingKey = 'last_name' | 'first_name' | 'email' | 'phone' | 'group' | 'plan' | 'id'
+
+export interface UserIndexFilter {
+  search?: string,
+  filter?: 'inactive_for_3_years' | 'not_confirmed',
+  order_by?: OrderingKey | `-${OrderingKey}`,
+  page?: number,
+  size?: number
+}
diff --git a/app/frontend/templates/dashboard/settings.html b/app/frontend/templates/dashboard/settings.html
index c27453d4a..0317be349 100644
--- a/app/frontend/templates/dashboard/settings.html
+++ b/app/frontend/templates/dashboard/settings.html
@@ -121,7 +121,7 @@
               </section>
               <section class="panel panel-default bg-light m">
                 <div class="panel-body m-r">
-                  <user-profile-form user="user" action="'update'" on-error="onError" />
+                  <user-profile-form user="user" action="'update'" on-error="onError" on-success="onSuccess" />
                   <ng-include src="'/shared/_member_form.html'"></ng-include>
                 </div>   <!-- ./panel-body  -->
               </section>
diff --git a/app/frontend/templates/shared/publicProfile.html.erb b/app/frontend/templates/shared/publicProfile.html.erb
index e3415bd3a..1bd4f602a 100644
--- a/app/frontend/templates/shared/publicProfile.html.erb
+++ b/app/frontend/templates/shared/publicProfile.html.erb
@@ -54,11 +54,11 @@
             <div class="row m-b">
               <div class="col-xs-5 text-right">
                 <span class="font-bold bio-title" translate>{{ 'app.shared.public_profile.interests' }}</span>
-                <div class="m-b m-t-sm">{{user.profile.interest}}</div>
+                <div class="m-b m-t-sm" ng-bind-html="user.profile_attributes.interest"></div>
               </div>
               <div class="col-xs-offset-2 col-xs-5">
                 <span class="font-bold bio-title" translate>{{ 'app.shared.public_profile.CAD_softwares_mastered' }}</span>
-                <div class="m-t-sm">{{user.profile.software_mastered}}</div>
+                <div class="m-t-sm" ng-bind-html="user.profile_attributes.software_mastered"></div>
               </div>
             </div>
           </div>