diff --git a/web/frontend/src/components/modal/AddAdminUserModal.tsx b/web/frontend/src/components/modal/AddAdminUserModal.tsx
deleted file mode 100644
index edc337f46..000000000
--- a/web/frontend/src/components/modal/AddAdminUserModal.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import React, { FC, Fragment, useContext, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Dialog, Listbox, Transition } from '@headlessui/react';
-import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';
-
-import { ENDPOINT_ADD_ROLE } from 'components/utils/Endpoints';
-import { useTranslation } from 'react-i18next';
-import SpinnerIcon from 'components/utils/SpinnerIcon';
-import { UserAddIcon } from '@heroicons/react/outline';
-import ShortUniqueId from 'short-unique-id';
-import { FlashContext, FlashLevel } from 'index';
-
-const uid = new ShortUniqueId({ length: 8 });
-
-type AddAdminUserModalProps = {
-  open: boolean;
-  setOpen(opened: boolean): void;
-  handleAddRoleUser(user: object): void;
-};
-
-const roles = ['Admin', 'Operator'];
-
-const AddAdminUserModal: FC<AddAdminUserModalProps> = ({ open, setOpen, handleAddRoleUser }) => {
-  const { t } = useTranslation();
-  const fctx = useContext(FlashContext);
-
-  const [loading, setLoading] = useState(false);
-  const [sciperValue, setSciperValue] = useState('');
-  const [selectedRole, setSelectedRole] = useState(roles[0]);
-
-  const handleClose = () => setOpen(false);
-
-  const handleUserInput = (e: any) => {
-    setSciperValue(e.target.value);
-  };
-
-  const handleAddUser = async () => {
-    const userToAdd = { id: uid(), sciper: sciperValue, role: selectedRole };
-    const requestOptions = {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(userToAdd),
-    };
-
-    try {
-      setLoading(true);
-      const res = await fetch(ENDPOINT_ADD_ROLE, requestOptions);
-      if (res.status !== 200) {
-        const response = await res.text();
-        fctx.addMessage(
-          `Error HTTP ${res.status} (${res.statusText}) : ${response}`,
-          FlashLevel.Error
-        );
-      } else {
-        setSciperValue('');
-        setSelectedRole(roles[0]);
-        handleAddRoleUser(userToAdd);
-        fctx.addMessage(`${t('successAddUser')}`, FlashLevel.Info);
-      }
-    } catch (error) {
-      fctx.addMessage(`${t('errorAddUser')}: ${error.message}`, FlashLevel.Error);
-    }
-    setLoading(false);
-    setOpen(false);
-  };
-  const cancelButtonRef = useRef(null);
-
-  return (
-    <Transition.Root show={open} as={Fragment}>
-      <Dialog
-        as="div"
-        className="fixed z-10 inset-0 px-4 sm:px-0 overflow-y-auto"
-        initialFocus={cancelButtonRef}
-        onClose={setOpen}>
-        <div className="block items-end justify-center min-h-screen text-center">
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0">
-            <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-          </Transition.Child>
-
-          {/* This element is to trick the browser into centering the modal contents. */}
-          <span className="inline-block align-middle h-screen" aria-hidden="true">
-            &#8203;
-          </span>
-          <Transition.Child
-            as={Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enterTo="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
-            <div className="inline-block bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all my-8 align-middle max-w-lg w-full p-6">
-              <div>
-                <div className="text-center">
-                  <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900">
-                    {t('enterSciper')}
-                  </Dialog.Title>
-                  <input
-                    onChange={handleUserInput}
-                    value={sciperValue}
-                    placeholder="Sciper"
-                    className="mt-8 mb-4 border pl-2 w-1/2 py-1 flex rounded-lg"
-                  />
-                  <div className="mt-2 pb-4">
-                    <Listbox value={selectedRole} onChange={setSelectedRole}>
-                      <div className="relative mt-1">
-                        <Listbox.Button className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left border focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
-                          <span className="block truncate">{selectedRole}</span>
-                          <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                            <SelectorIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
-                          </span>
-                        </Listbox.Button>
-                        <Transition
-                          as={Fragment}
-                          leave="transition ease-in duration-100"
-                          leaveFrom="opacity-100"
-                          leaveTo="opacity-0">
-                          <Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-                            {roles.map((role, personIdx) => (
-                              <Listbox.Option
-                                key={personIdx}
-                                className={({ active }) =>
-                                  `relative cursor-default select-none py-2 pl-10 pr-4 ${
-                                    active ? 'bg-indigo-100 text-indigo-900' : 'text-gray-900'
-                                  }`
-                                }
-                                value={role}>
-                                {({ selected }) => (
-                                  <>
-                                    <span
-                                      className={`block truncate ${
-                                        selected ? 'font-medium' : 'font-normal'
-                                      }`}>
-                                      {role}
-                                    </span>
-                                    {selected ? (
-                                      <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-indigo-600">
-                                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                                      </span>
-                                    ) : null}
-                                  </>
-                                )}
-                              </Listbox.Option>
-                            ))}
-                          </Listbox.Options>
-                        </Transition>
-                      </div>
-                    </Listbox>
-                  </div>
-                </div>
-              </div>
-              <div className="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
-                <button
-                  type="button"
-                  className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm"
-                  onClick={handleAddUser}>
-                  {loading ? (
-                    <SpinnerIcon />
-                  ) : (
-                    <UserAddIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
-                  )}
-                  {t('addUser')}
-                </button>
-                <button
-                  type="button"
-                  className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm"
-                  onClick={handleClose}
-                  ref={cancelButtonRef}>
-                  {t('cancel')}
-                </button>
-              </div>
-            </div>
-          </Transition.Child>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
-
-AddAdminUserModal.propTypes = {
-  open: PropTypes.bool.isRequired,
-  setOpen: PropTypes.func.isRequired,
-};
-
-export default AddAdminUserModal;
diff --git a/web/frontend/src/components/modal/RemoveAdminUserModal.tsx b/web/frontend/src/components/modal/RemoveAdminUserModal.tsx
deleted file mode 100644
index 0e64f2a01..000000000
--- a/web/frontend/src/components/modal/RemoveAdminUserModal.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import React, { FC, Fragment, useContext, useRef, useState } from 'react';
-import { ENDPOINT_REMOVE_ROLE } from '../utils/Endpoints';
-import PropTypes from 'prop-types';
-import { Dialog, Transition } from '@headlessui/react';
-import { UserRemoveIcon } from '@heroicons/react/outline';
-import SpinnerIcon from 'components/utils/SpinnerIcon';
-import { useTranslation } from 'react-i18next';
-import { FlashContext, FlashLevel } from 'index';
-
-type RemoveAdminUserModalProps = {
-  open: boolean;
-  setOpen(opened: boolean): void;
-  sciper: number;
-  handleRemoveRoleUser(): void;
-};
-
-const RemoveAdminUserModal: FC<RemoveAdminUserModalProps> = ({
-  open,
-  setOpen,
-  sciper,
-  handleRemoveRoleUser,
-}) => {
-  const { t } = useTranslation();
-  const fctx = useContext(FlashContext);
-
-  const [loading, setLoading] = useState(false);
-
-  const handleClose = () => setOpen(false);
-
-  const handleDelete = async () => {
-    const requestOptions = {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ sciper: sciper }),
-    };
-
-    try {
-      setLoading(true);
-      const res = await fetch(ENDPOINT_REMOVE_ROLE, requestOptions);
-      if (res.status !== 200) {
-        const response = await res.text();
-        fctx.addMessage(
-          `Error HTTP ${res.status} (${res.statusText}) : ${response}`,
-          FlashLevel.Error
-        );
-      } else {
-        handleRemoveRoleUser();
-        fctx.addMessage(t('successRemoveUser'), FlashLevel.Info);
-      }
-    } catch (error) {
-      fctx.addMessage(`${t('errorRemoveUser')}: ${error.message}`, FlashLevel.Error);
-    }
-    setLoading(false);
-    setOpen(false);
-  };
-  const cancelButtonRef = useRef(null);
-
-  return (
-    <div>
-      <Transition.Root show={open} as={Fragment}>
-        <Dialog
-          as="div"
-          className="fixed z-10 inset-0 px-4 sm:px-0 overflow-y-auto"
-          initialFocus={cancelButtonRef}
-          onClose={setOpen}>
-          <div className="block items-end justify-center min-h-screen text-center">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0">
-              <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-            </Transition.Child>
-
-            {/* This element is to trick the browser into centering the modal contents. */}
-            <span className="inline-block align-middle h-screen" aria-hidden="true">
-              &#8203;
-            </span>
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
-              <div className="inline-block bg-white rounded-lg  text-left overflow-hidden shadow-xl transform transition-all my-8 align-middle max-w-lg w-full p-6">
-                <div>
-                  <div className="text-center">
-                    <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900">
-                      {t('confirmDeleteUserSciper')} {sciper}
-                    </Dialog.Title>
-                  </div>
-                </div>
-                <div className="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
-                  <button
-                    type="button"
-                    className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm"
-                    onClick={handleDelete}>
-                    {loading ? (
-                      <SpinnerIcon />
-                    ) : (
-                      <UserRemoveIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
-                    )}
-                    {t('delete')}
-                  </button>
-                  <button
-                    type="button"
-                    className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm"
-                    onClick={handleClose}
-                    ref={cancelButtonRef}>
-                    {t('cancel')}
-                  </button>
-                </div>
-              </div>
-            </Transition.Child>
-          </div>
-        </Dialog>
-      </Transition.Root>
-    </div>
-  );
-};
-
-RemoveAdminUserModal.propTypes = {
-  open: PropTypes.bool.isRequired,
-  setOpen: PropTypes.func.isRequired,
-  sciper: PropTypes.number.isRequired,
-};
-
-export default RemoveAdminUserModal;
diff --git a/web/frontend/src/language/en.json b/web/frontend/src/language/en.json
index 69c240502..32ad2bdf9 100644
--- a/web/frontend/src/language/en.json
+++ b/web/frontend/src/language/en.json
@@ -60,6 +60,7 @@
     "addCandidate": "Add a candidate",
     "addUser": "Add user",
     "role": "Role",
+    "roles": "Roles",
     "edit": "Edit",
     "nothingToAdd": "There is nothing to add.",
     "duplicateCandidate": "This candidate has already been added.",
@@ -214,6 +215,20 @@
     "filterByStatus": "Filter by status",
     "all": "All",
     "resetFilter": "Reset filter",
-    "showingNOverMOfXResults": "Showing {{n}}/{{m}} of {{x}} results."
+    "showingNOverMOfXResults": "Showing {{n}}/{{m}} of {{x}} results.",
+    "addProxy": "Add proxy",
+    "editProxy": "Edit the proxy address",
+    "proxy": "Proxy",
+    "confirmDeleteProxy": "Do confirm deleting this node address",
+    "nodeDetails": "Add, edit or remove the mapping between a node address and its proxy address.",
+    "inputNodeProxyError": "Error: the address of the node and the proxy cannot be empty.",
+    "proxySuccessfullyEdited": "The proxy address was successfully modified !",
+    "nodeProxySuccessfullyAdded": "The node and proxy addresses were successfully added !",
+    "proxySuccessfullyDeleted": "The node and proxy addresses were successfully deleted !",
+    "addNodeProxyError": "An error occurred while trying to add the node and proxy addresses. Error: ",
+    "editProxyError": "An error occurred while trying to edit the proxy address. Error: ",
+    "removeProxyError": "An error occurred while trying to remove the node and proxy addresses. Error: ",
+    "enterNodeProxy": "Please enter the addresses of the node and the proxy",
+    "invalidProxyError": "Error: the address you entered is not a valid URL."
   }
 }
diff --git a/web/frontend/src/layout/App.tsx b/web/frontend/src/layout/App.tsx
index c434b5b1d..a3ce2f13c 100644
--- a/web/frontend/src/layout/App.tsx
+++ b/web/frontend/src/layout/App.tsx
@@ -14,7 +14,7 @@ import {
 import Login from '../pages/session/Login';
 import Home from '../pages/Home';
 import About from '../pages/About';
-import Admin from '../pages/Admin';
+import Admin from 'pages/admin/Admin';
 import ElectionIndex from '../pages/election/Index';
 import ElectionCreate from '../pages/election/New';
 import ElectionResult from '../pages/election/Result';
diff --git a/web/frontend/src/mocks/handlers.ts b/web/frontend/src/mocks/handlers.ts
index efa0b22c4..af6378d9f 100644
--- a/web/frontend/src/mocks/handlers.ts
+++ b/web/frontend/src/mocks/handlers.ts
@@ -34,14 +34,14 @@ const mockUserID = 561934;
 
 const { mockElections, mockResults, mockDKG, mockNodeProxyAddresses } = setupMockElection();
 
-var mockUserDB = setupMockUserDB();
+let mockUserDB = setupMockUserDB();
 
 const RESPONSE_TIME = 500;
 const CHANGE_STATUS_TIMER = 2000;
-const INIT_TIMER = 3000;
-const SETUP_TIMER = 4000;
+const INIT_TIMER = 2000;
+const SETUP_TIMER = 3000;
 const SHUFFLE_TIMER = 2000;
-const DECRYPT_TIMER = 8000;
+const DECRYPT_TIMER = 4000;
 
 const isAuthorized = (roles: UserRole[]): boolean => {
   const id = sessionStorage.getItem('id');
@@ -168,7 +168,7 @@ export const handlers = [
   rest.put(endpoints.editElection(':ElectionID'), async (req, res, ctx) => {
     const body = req.body as EditElectionBody;
     const { ElectionID } = req.params;
-    var status = Status.Initial;
+    let status = Status.Initial;
     const Result = [];
 
     await new Promise((r) => setTimeout(r, RESPONSE_TIME));
@@ -243,7 +243,7 @@ export const handlers = [
     switch (body.Action) {
       case Action.Setup:
         const newDKGStatus = new Map(mockDKG.get(ElectionID as string));
-        var node = '';
+        let node = '';
 
         mockElections.get(ElectionID as string).Roster.forEach((n) => {
           const p = mockNodeProxyAddresses.get(n);
@@ -279,7 +279,7 @@ export const handlers = [
   rest.get(endpoints.getDKGActors('*', ':ElectionID'), async (req, res, ctx) => {
     const { ElectionID } = req.params;
     const Proxy = req.params[0];
-    var node = '';
+    let node = '';
 
     mockElections.get(ElectionID as string).Roster.forEach((n) => {
       const p = mockNodeProxyAddresses.get(n);
@@ -408,4 +408,14 @@ export const handlers = [
 
     return res(ctx.status(200), ctx.text('Action successfully done'));
   }),
+
+  rest.delete(endpoints.editProxyAddress('*'), async (req, res, ctx) => {
+    const NodeAddr = req.params[0];
+
+    mockNodeProxyAddresses.delete(decodeURIComponent(NodeAddr as string));
+
+    await new Promise((r) => setTimeout(r, RESPONSE_TIME));
+
+    return res(ctx.status(200), ctx.text('Action successfully done'));
+  }),
 ];
diff --git a/web/frontend/src/mocks/setupMockUserDB.ts b/web/frontend/src/mocks/setupMockUserDB.ts
index 957f7f05a..7ed08ff75 100644
--- a/web/frontend/src/mocks/setupMockUserDB.ts
+++ b/web/frontend/src/mocks/setupMockUserDB.ts
@@ -1,34 +1,34 @@
 import ShortUniqueId from 'short-unique-id';
-import { UserRole } from 'types/userRole';
+import { User, UserRole } from 'types/userRole';
 
 const uid = new ShortUniqueId({ length: 8 });
 
-const mockUser1 = {
+const mockUser1: User = {
   id: uid(),
   sciper: '123456',
   role: UserRole.Admin,
 };
 
-const mockUser2 = {
+const mockUser2: User = {
   id: uid(),
   sciper: '234567',
   role: UserRole.Operator,
 };
 
-const mockUser3 = {
+const mockUser3: User = {
   id: uid(),
   sciper: '345678',
   role: UserRole.Voter,
 };
 
-const user = {
+const user: User = {
   id: uid(),
   sciper: '561934',
   role: UserRole.Admin,
 };
 
-const setupMockUserDB = () => {
-  const userDB = [];
+const setupMockUserDB = (): User[] => {
+  const userDB: User[] = [];
   userDB.push(mockUser1);
   userDB.push(mockUser2);
   userDB.push(mockUser3);
diff --git a/web/frontend/src/pages/Admin.tsx b/web/frontend/src/pages/Admin.tsx
deleted file mode 100644
index ac1cab024..000000000
--- a/web/frontend/src/pages/Admin.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import { useContext, useEffect, useState } from 'react';
-
-import { ENDPOINT_USER_RIGHTS } from 'components/utils/Endpoints';
-
-import AddAdminUserModal from 'components/modal/AddAdminUserModal';
-import { useTranslation } from 'react-i18next';
-import RemoveAdminUserModal from 'components/modal/RemoveAdminUserModal';
-import Loading from './Loading';
-import { FlashContext, FlashLevel } from 'index';
-
-const SCIPERS_PER_PAGE = 10;
-
-const Admin = () => {
-  const { t } = useTranslation();
-  const fctx = useContext(FlashContext);
-
-  const [users, setUsers] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [showDeleteModal, setShowDeleteModal] = useState(false);
-  const [newUserOpen, setNewUserOpen] = useState(false);
-  const [scipersToDisplay, setScipersToDisplay] = useState([]);
-  const [sciperToDelete, setSciperToDelete] = useState(0);
-  const [pageIndex, setPageIndex] = useState(0);
-
-  const openModal = () => setNewUserOpen(true);
-
-  useEffect(() => {
-    setLoading(true);
-    fetch(ENDPOINT_USER_RIGHTS)
-      .then((resp) => {
-        setLoading(false);
-        if (resp.status === 200) {
-          const jsonData = resp.json();
-          jsonData.then((result) => {
-            setUsers(result);
-          });
-        } else {
-          setUsers([]);
-          fctx.addMessage(t('errorFetchingUsers'), FlashLevel.Error);
-        }
-      })
-      .catch((error) => {
-        setLoading(false);
-        fctx.addMessage(`${t('errorFetchingUsers')}: ${error.message}`, FlashLevel.Error);
-      });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const partitionArray = (array: any[], size: number) =>
-    array.map((v, i) => (i % size === 0 ? array.slice(i, i + size) : null)).filter((v) => v);
-
-  useEffect(() => {
-    if (users.length) {
-      setScipersToDisplay(partitionArray(users, SCIPERS_PER_PAGE)[pageIndex]);
-    }
-  }, [users, pageIndex]);
-
-  const handleDelete = (sciper: number): void => {
-    setSciperToDelete(sciper);
-    setShowDeleteModal(true);
-  };
-
-  const handlePrevious = (): void => {
-    if (pageIndex > 0) {
-      setPageIndex(pageIndex - 1);
-    }
-  };
-  const handleNext = (): void => {
-    if (partitionArray(users, SCIPERS_PER_PAGE).length > pageIndex + 1) {
-      setPageIndex(pageIndex + 1);
-    }
-  };
-
-  const handleAddRoleUser = (user: object): void => {
-    setUsers([...users, user]);
-  };
-  const handleRemoveRoleUser = (): void => {
-    setUsers(users.filter((user) => user.sciper !== sciperToDelete));
-  };
-
-  return !loading ? (
-    <div className="w-[60rem] font-sans px-4 py-8">
-      <AddAdminUserModal
-        open={newUserOpen}
-        setOpen={setNewUserOpen}
-        handleAddRoleUser={handleAddRoleUser}
-      />
-      <RemoveAdminUserModal
-        setOpen={setShowDeleteModal}
-        open={showDeleteModal}
-        sciper={sciperToDelete}
-        handleRemoveRoleUser={handleRemoveRoleUser}
-      />
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex-1 min-w-0">
-          <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
-            {t('admin')}
-          </h2>
-          <div className="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6">
-            <div className="mt-2 flex items-center text-sm text-gray-500">{t('adminDetails')}</div>
-          </div>
-        </div>
-        <div className="mt-5 flex lg:mt-0 lg:ml-4">
-          <span className="sm:ml-3">
-            <button
-              type="button"
-              onClick={openModal}
-              className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
-              {t('addUser')}
-            </button>
-          </span>
-        </div>
-      </div>
-
-      <div className="flex flex-col">
-        <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-          <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
-            <div className="overflow-hidden border-gray-200 sm:rounded-lg">
-              <table className="min-w-full divide-y divide-gray-300">
-                <thead className="">
-                  <tr>
-                    <th
-                      scope="col"
-                      className="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
-                      Sciper
-                    </th>
-                    <th
-                      scope="col"
-                      className="px-6 py-3 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
-                      {t('role')}
-                    </th>
-                    <th scope="col" className="relative px-6 py-3">
-                      <span className="sr-only">{t('edit')}</span>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody className="bg-white divide-y divide-gray-200">
-                  {scipersToDisplay.map((user) => (
-                    <tr key={user.id}>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
-                        {user.sciper}
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                        {user.role}
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                        <div
-                          className="cursor-pointer text-indigo-600 hover:text-indigo-900"
-                          onClick={() => handleDelete(user.sciper)}>
-                          {t('delete')}
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-              <nav
-                className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
-                aria-label="Pagination">
-                <div className="hidden sm:block">
-                  <p className="text-sm text-gray-700">
-                    {t('showing')} <span className="font-medium">{pageIndex + 1}</span> /{' '}
-                    <span className="font-medium">
-                      {partitionArray(users, SCIPERS_PER_PAGE).length}
-                    </span>{' '}
-                    {t('of')} <span className="font-medium">{users.length}</span> {t('results')}
-                  </p>
-                </div>
-                <div className="flex-1 flex justify-between sm:justify-end">
-                  <button
-                    disabled={pageIndex === 0}
-                    onClick={handlePrevious}
-                    className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
-                    {t('previous')}
-                  </button>
-                  <button
-                    disabled={partitionArray(users, SCIPERS_PER_PAGE).length <= pageIndex + 1}
-                    onClick={handleNext}
-                    className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
-                    {t('next')}
-                  </button>
-                </div>
-              </nav>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  ) : (
-    <Loading />
-  );
-};
-export default Admin;
diff --git a/web/frontend/src/pages/admin/Admin.tsx b/web/frontend/src/pages/admin/Admin.tsx
new file mode 100644
index 000000000..9852d415a
--- /dev/null
+++ b/web/frontend/src/pages/admin/Admin.tsx
@@ -0,0 +1,101 @@
+import React, { FC, useContext, useEffect, useState } from 'react';
+import { ENDPOINT_USER_RIGHTS } from 'components/utils/Endpoints';
+import { FlashContext, FlashLevel } from 'index';
+import Loading from 'pages/Loading';
+import { useTranslation } from 'react-i18next';
+import AdminTable from './AdminTable';
+import DKGTable from './DKGTable';
+import useFetchCall from 'components/utils/useFetchCall';
+import * as endpoints from 'components/utils/Endpoints';
+
+const Admin: FC = () => {
+  const { t } = useTranslation();
+  const fctx = useContext(FlashContext);
+  const [users, setUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const abortController = new AbortController();
+  const signal = abortController.signal;
+
+  const request = {
+    method: 'GET',
+    signal: signal,
+  };
+
+  const [nodeProxyObject, nodeProxyLoading, nodeProxyError] = useFetchCall(
+    endpoints.getProxiesAddresses,
+    request
+  );
+  const [, setNodeProxyLoading] = useState(true);
+
+  const [nodeProxyAddresses, setNodeProxyAddresses] = useState<Map<string, string>>(null);
+
+  useEffect(() => {
+    if (nodeProxyError !== null) {
+      fctx.addMessage(t('errorRetrievingProxy') + nodeProxyError.message, FlashLevel.Error);
+      setNodeProxyLoading(false);
+    }
+
+    if (nodeProxyObject !== null) {
+      const newNodeProxyAddresses = new Map();
+
+      nodeProxyObject.Proxies.forEach((value) => {
+        Object.entries(value).forEach(([node, proxy]) => {
+          newNodeProxyAddresses.set(node, proxy);
+        });
+      });
+
+      setNodeProxyAddresses(newNodeProxyAddresses);
+      setNodeProxyLoading(false);
+    }
+
+    return () => {
+      abortController.abort();
+    };
+  }, [nodeProxyObject, nodeProxyError]);
+
+  useEffect(() => {
+    fetch(ENDPOINT_USER_RIGHTS)
+      .then((resp) => {
+        setLoading(false);
+        if (resp.status === 200) {
+          const jsonData = resp.json();
+          jsonData.then((result) => {
+            setUsers(result);
+          });
+        } else {
+          setUsers([]);
+          fctx.addMessage(t('errorFetchingUsers'), FlashLevel.Error);
+        }
+      })
+      .catch((error) => {
+        setLoading(false);
+        fctx.addMessage(`${t('errorFetchingUsers')}: ${error.message}`, FlashLevel.Error);
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return !loading && !nodeProxyLoading ? (
+    <div className="w-[60rem] font-sans px-4 py-4">
+      <div className="flex items-center justify-between mb-4 pt-8">
+        <div className="flex-1 min-w-0">
+          <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
+            {t('admin')}
+          </h2>
+        </div>
+      </div>
+
+      <AdminTable users={users} setUsers={setUsers} />
+      <div className="mt-4 mb-8">
+        <DKGTable
+          nodeProxyAddresses={nodeProxyAddresses}
+          setNodeProxyAddresses={setNodeProxyAddresses}
+        />
+      </div>
+    </div>
+  ) : (
+    <Loading />
+  );
+};
+
+export default Admin;
diff --git a/web/frontend/src/pages/admin/AdminTable.tsx b/web/frontend/src/pages/admin/AdminTable.tsx
new file mode 100644
index 000000000..9ffc2a0b2
--- /dev/null
+++ b/web/frontend/src/pages/admin/AdminTable.tsx
@@ -0,0 +1,165 @@
+import { FC, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { User } from 'types/userRole';
+import AddAdminUserModal from './components/AddAdminUserModal';
+import RemoveAdminUserModal from './components/RemoveAdminUserModal';
+
+const SCIPERS_PER_PAGE = 5;
+
+type AdminTableProps = {
+  users: User[];
+  setUsers: (users: User[]) => void;
+};
+
+const AdminTable: FC<AdminTableProps> = ({ users, setUsers }) => {
+  const { t } = useTranslation();
+
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [newUserOpen, setNewUserOpen] = useState(false);
+  const [scipersToDisplay, setScipersToDisplay] = useState([]);
+  const [sciperToDelete, setSciperToDelete] = useState(0);
+  const [pageIndex, setPageIndex] = useState(0);
+
+  const openModal = () => setNewUserOpen(true);
+
+  const partitionArray = (array: User[], size: number) =>
+    array.map((_v, i) => (i % size === 0 ? array.slice(i, i + size) : null)).filter((v) => v);
+
+  useEffect(() => {
+    if (users.length) {
+      setScipersToDisplay(partitionArray(users, SCIPERS_PER_PAGE)[pageIndex]);
+    }
+  }, [users, pageIndex]);
+
+  const handleDelete = (sciper: number): void => {
+    setSciperToDelete(sciper);
+    setShowDeleteModal(true);
+  };
+
+  const handlePrevious = (): void => {
+    if (pageIndex > 0) {
+      setPageIndex(pageIndex - 1);
+    }
+  };
+
+  const handleNext = (): void => {
+    if (partitionArray(users, SCIPERS_PER_PAGE).length > pageIndex + 1) {
+      setPageIndex(pageIndex + 1);
+    }
+  };
+
+  const handleAddRoleUser = (user: User): void => {
+    const newUsers = [...users, user];
+    setUsers(newUsers);
+    setPageIndex(partitionArray(newUsers, SCIPERS_PER_PAGE).length - 1);
+  };
+
+  const handleRemoveRoleUser = (): void => {
+    const newUsers = users.filter((user) => user.sciper !== sciperToDelete.toString());
+    setUsers(newUsers);
+
+    if (newUsers.length % SCIPERS_PER_PAGE === 0) {
+      setPageIndex(pageIndex - 1);
+    }
+  };
+
+  return (
+    <div>
+      <AddAdminUserModal
+        open={newUserOpen}
+        setOpen={setNewUserOpen}
+        handleAddRoleUser={handleAddRoleUser}
+      />
+      <RemoveAdminUserModal
+        setOpen={setShowDeleteModal}
+        open={showDeleteModal}
+        sciper={sciperToDelete}
+        handleRemoveRoleUser={handleRemoveRoleUser}
+      />
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between mb-4 py-6 pl-2">
+        <div>
+          <div className="font-bold uppercase text-lg text-gray-700">{t('roles')}</div>
+
+          <div className="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6">
+            <div className="mt-2 flex items-center text-sm text-gray-500">{t('adminDetails')}</div>
+          </div>
+        </div>
+
+        <div className="mt-5 flex lg:mt-0 lg:ml-4">
+          <span className="sm:ml-3">
+            <button
+              type="button"
+              onClick={openModal}
+              className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
+              {t('addUser')}
+            </button>
+          </span>
+        </div>
+      </div>
+
+      <div className="relative divide-y overflow-x-auto shadow-md sm:rounded-lg mt-2">
+        <table className="w-full text-sm text-left text-gray-500">
+          <thead className="text-xs text-gray-700 uppercase bg-gray-50">
+            <tr>
+              <th scope="col" className="px-6 py-3">
+                Sciper
+              </th>
+              <th scope="col" className="px-6 py-3">
+                {t('role')}
+              </th>
+              <th scope="col" className="px-6 py-3">
+                <span className="sr-only">{t('edit')}</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {scipersToDisplay !== undefined &&
+              scipersToDisplay.map((user) => (
+                <tr key={user.id} className="bg-white border-b hover:bg-gray-50">
+                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                    {user.sciper}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{user.role}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                    <div
+                      className="cursor-pointer text-indigo-600 hover:text-indigo-900"
+                      onClick={() => handleDelete(user.sciper)}>
+                      {t('delete')}
+                    </div>
+                  </td>
+                </tr>
+              ))}
+          </tbody>
+        </table>
+
+        <nav
+          className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
+          aria-label="Pagination">
+          <div className="hidden sm:block text-sm text-gray-700">
+            {t('showingNOverMOfXResults', {
+              n: pageIndex + 1,
+              m: partitionArray(users, SCIPERS_PER_PAGE).length,
+              x: users.length,
+            })}
+          </div>
+          <div className="flex-1 flex justify-between sm:justify-end">
+            <button
+              disabled={pageIndex === 0}
+              onClick={handlePrevious}
+              className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+              {t('previous')}
+            </button>
+            <button
+              disabled={partitionArray(users, SCIPERS_PER_PAGE).length <= pageIndex + 1}
+              onClick={handleNext}
+              className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+              {t('next')}
+            </button>
+          </div>
+        </nav>
+      </div>
+    </div>
+  );
+};
+export default AdminTable;
diff --git a/web/frontend/src/pages/admin/DKGTable.tsx b/web/frontend/src/pages/admin/DKGTable.tsx
index b13143abf..7dd1640c8 100644
--- a/web/frontend/src/pages/admin/DKGTable.tsx
+++ b/web/frontend/src/pages/admin/DKGTable.tsx
@@ -1,80 +1,173 @@
-import React, { FC, useContext, useEffect, useState } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import AddProxyModal from './components/AddProxyModal';
+import EditProxyModal from './components/EditProxyModal';
+import RemoveProxyModal from './components/RemoveProxyModal';
 import ProxyRow from './ProxyRow';
-import * as endpoints from 'components/utils/Endpoints';
-import useFetchCall from 'components/utils/useFetchCall';
-import { FlashContext, FlashLevel } from 'index';
-import Loading from 'pages/Loading';
 
-const DKGTable: FC = () => {
-  const { t } = useTranslation();
-  const fcxt = useContext(FlashContext);
+export const NODE_PROXY_PER_PAGE = 5;
+
+type DKGTableProps = {
+  nodeProxyAddresses: Map<string, string>;
+  setNodeProxyAddresses: (nodeProxyAddress: Map<string, string>) => void;
+};
 
-  const abortController = new AbortController();
-  const signal = abortController.signal;
+const DKGTable: FC<DKGTableProps> = ({ nodeProxyAddresses, setNodeProxyAddresses }) => {
+  const { t } = useTranslation();
+  const [nodeProxyToDisplay, setNodeProxyToDisplay] = useState<Array<[string, string]>>([]);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [showAddProxy, setShowAddProxy] = useState(false);
+  const [showEditProxy, setShowEditProxy] = useState(false);
+  const [showDeleteProxy, setShowDeleteProxy] = useState(false);
+  const [nodeToEdit, setNodeToEdit] = useState(null);
 
-  const request = {
-    method: 'GET',
-    signal: signal,
+  const partitionMap = (nodeProxy: Map<string, string>, size: number): [string, string][][] => {
+    const array: [string, string][] = Array.from(nodeProxy);
+    return array
+      .map((_value, index) => (index % size === 0 ? array.slice(index, index + size) : null))
+      .filter((v) => v);
   };
 
-  const [nodeProxyObject, nodeProxyLoading, nodeProxyError] = useFetchCall(
-    endpoints.getProxiesAddresses,
-    request
-  );
+  useEffect(() => {
+    if (nodeProxyAddresses.size) {
+      setNodeProxyToDisplay(partitionMap(nodeProxyAddresses, NODE_PROXY_PER_PAGE)[pageIndex]);
+    }
+  }, [nodeProxyAddresses, pageIndex]);
 
-  const [nodeProxyAddresses, setNodeProxyAddresses] = useState(null);
+  const handlePrevious = (): void => {
+    if (pageIndex > 0) {
+      setPageIndex(pageIndex - 1);
+    }
+  };
 
-  useEffect(() => {
-    if (nodeProxyError !== null) {
-      fcxt.addMessage(nodeProxyError.message, FlashLevel.Error);
+  const handleNext = (): void => {
+    if (partitionMap(nodeProxyAddresses, NODE_PROXY_PER_PAGE).length > pageIndex + 1) {
+      setPageIndex(pageIndex + 1);
     }
+  };
 
-    if (nodeProxyObject !== null) {
-      const newNodeProxyAddresses = new Map();
+  const handleAddProxy = (node: string, proxy: string) => {
+    const newNodeProxy = new Map(nodeProxyAddresses);
+    newNodeProxy.set(node, proxy);
+    setNodeProxyAddresses(newNodeProxy);
 
-      nodeProxyObject.Proxies.forEach((value) => {
-        Object.entries(value).forEach(([node, proxy]) => {
-          newNodeProxyAddresses.set(node, proxy);
-        });
-      });
+    setPageIndex(partitionMap(newNodeProxy, NODE_PROXY_PER_PAGE).length - 1);
+  };
+
+  const handleDeleteProxy = () => {
+    const newNodeProxy = new Map(nodeProxyAddresses);
+    newNodeProxy.delete(nodeToEdit);
+    setNodeProxyAddresses(newNodeProxy);
 
-      setNodeProxyAddresses(newNodeProxyAddresses);
+    if (newNodeProxy.size % NODE_PROXY_PER_PAGE === 0) {
+      setPageIndex(pageIndex - 1);
     }
+  };
+
+  return (
+    <div>
+      <AddProxyModal
+        open={showAddProxy}
+        setOpen={setShowAddProxy}
+        handleAddProxy={handleAddProxy}
+      />
+
+      <EditProxyModal
+        open={showEditProxy}
+        setOpen={setShowEditProxy}
+        nodeProxy={nodeProxyAddresses}
+        setNodeProxy={setNodeProxyAddresses}
+        node={nodeToEdit}
+      />
 
-    return () => {
-      abortController.abort();
-    };
-  }, [nodeProxyObject, nodeProxyError]);
-
-  return !nodeProxyLoading ? (
-    <div className="relative divide-y overflow-x-auto shadow-md sm:rounded-lg mt-2">
-      <table className="w-full text-sm text-left text-gray-500">
-        <thead className="text-xs text-gray-700 uppercase bg-gray-50">
-          <tr>
-            <th scope="col" className="px-6 py-3">
-              {t('nodes')}
-            </th>
-            <th scope="col" className="px-6 py-3">
-              {t('proxies')}
-            </th>
-            <th scope="col" className="px-6 py-3">
-              <span className="sr-only">{t('edit')}</span>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <>
-            {nodeProxyAddresses !== null &&
-              Array.from(nodeProxyAddresses).map(([node, proxy], index) => (
-                <ProxyRow node={node} proxy={proxy} index={index} />
+      <RemoveProxyModal
+        open={showDeleteProxy}
+        setOpen={setShowDeleteProxy}
+        node={nodeToEdit}
+        handleDeleteProxy={handleDeleteProxy}
+      />
+
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between mb-4 py-6 pl-2">
+        <div>
+          <div className="font-bold uppercase text-lg text-gray-700">{t('nodes')}</div>
+
+          <div className="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6">
+            <div className="mt-2 flex items-center text-sm text-gray-500">{t('nodeDetails')}</div>
+          </div>
+        </div>
+
+        <div className="mt-5 flex lg:mt-0 lg:ml-4">
+          <span className="sm:ml-3">
+            <button
+              type="button"
+              onClick={() => setShowAddProxy(true)}
+              className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
+              {t('addProxy')}
+            </button>
+          </span>
+        </div>
+      </div>
+
+      <div className="relative divide-y overflow-x-auto shadow-md sm:rounded-lg mt-2">
+        <table className="w-full text-sm text-left text-gray-500">
+          <thead className="text-xs text-gray-700 uppercase bg-gray-50">
+            <tr>
+              <th scope="col" className="px-6 py-3">
+                {t('node')}
+              </th>
+              <th scope="col" className="px-6 py-3">
+                {t('proxy')}
+              </th>
+              <th scope="col" className="px-6 py-3">
+                <span className="sr-only">{t('edit')}</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {nodeProxyToDisplay !== undefined &&
+              nodeProxyToDisplay.map(([node, proxy], index) => (
+                <ProxyRow
+                  node={node}
+                  proxy={proxy}
+                  index={index + pageIndex * NODE_PROXY_PER_PAGE}
+                  setShowEditProxy={setShowEditProxy}
+                  setShowDeleteProxy={setShowDeleteProxy}
+                  setNodeToEdit={setNodeToEdit}
+                  key={node}
+                />
               ))}
-          </>
-        </tbody>
-      </table>
+          </tbody>
+        </table>
+
+        <nav
+          className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
+          aria-label="Pagination">
+          <div className="hidden sm:block text-sm text-gray-700">
+            {t('showingNOverMOfXResults', {
+              n: pageIndex + 1,
+              m: partitionMap(nodeProxyAddresses, NODE_PROXY_PER_PAGE).length,
+              x: `${nodeProxyAddresses !== null ? nodeProxyAddresses.size : 0}`,
+            })}
+          </div>
+          <div className="flex-1 flex justify-between sm:justify-end">
+            <button
+              disabled={pageIndex === 0}
+              onClick={handlePrevious}
+              className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+              {t('previous')}
+            </button>
+            <button
+              disabled={
+                partitionMap(nodeProxyAddresses, NODE_PROXY_PER_PAGE).length <= pageIndex + 1
+              }
+              onClick={handleNext}
+              className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+              {t('next')}
+            </button>
+          </div>
+        </nav>
+      </div>
     </div>
-  ) : (
-    <Loading />
   );
 };
 
diff --git a/web/frontend/src/pages/admin/ProxyRow.tsx b/web/frontend/src/pages/admin/ProxyRow.tsx
index 523507eda..0565fe5b9 100644
--- a/web/frontend/src/pages/admin/ProxyRow.tsx
+++ b/web/frontend/src/pages/admin/ProxyRow.tsx
@@ -1,132 +1,47 @@
-import { AuthContext, FlashContext, FlashLevel } from 'index';
-import React, { FC, useContext, useEffect, useState } from 'react';
+import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import * as endpoints from 'components/utils/Endpoints';
-import { UserRole } from 'types/userRole';
-import usePostCall from 'components/utils/usePostCall';
 
 type ProxyRowProps = {
   node: string;
   proxy: string;
   index: number;
+  setShowEditProxy: (show: boolean) => void;
+  setShowDeleteProxy: (show: boolean) => void;
+  setNodeToEdit: (node: string) => void;
 };
 
-const ProxyRow: FC<ProxyRowProps> = ({ node, proxy, index }) => {
+const ProxyRow: FC<ProxyRowProps> = ({
+  node,
+  proxy,
+  setShowEditProxy,
+  setShowDeleteProxy,
+  setNodeToEdit,
+}) => {
   const { t } = useTranslation();
-  const fctx = useContext(FlashContext);
-  const authCtx = useContext(AuthContext);
-
-  const isAuthorized =
-    authCtx.isLogged && (authCtx.role === UserRole.Admin || authCtx.role === UserRole.Operator);
-
-  const [currentProxy, setCurrentProxy] = useState(null);
-  const [previousProxy, setPreviousProxy] = useState(null);
-  const [isEditMode, setIsEditMode] = useState(false);
-  const [error, setError] = useState(null);
-  const [isPosting, setIsPosting] = useState(false);
-  const [postError, setPostError] = useState(null);
-
-  const sendFetchRequest = usePostCall(setPostError);
-
-  useEffect(() => {
-    if (postError !== null) {
-      fctx.addMessage(postError, FlashLevel.Error);
-      setPostError(null);
-    }
-  }, [postError]);
-
-  useEffect(() => {
-    if (proxy !== null) {
-      setCurrentProxy(proxy);
-      setPreviousProxy(proxy);
-    }
-  }, [proxy]);
-
-  const proxyAddressUpdate = async () => {
-    const req = {
-      method: 'PUT',
-      body: JSON.stringify({
-        Proxy: currentProxy,
-      }),
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    };
-    return sendFetchRequest(endpoints.editProxyAddress(node), req, setIsPosting);
-  };
-
-  const handleTextInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setCurrentProxy(e.target.value);
-    setError(null);
-  };
 
   const handleEdit = () => {
-    setIsEditMode(true);
+    setShowEditProxy(true);
+    setNodeToEdit(node);
   };
 
-  const handleSave = () => {
-    if (proxy !== '') {
-      setIsEditMode(false);
-      setError(null);
-      setPreviousProxy(currentProxy);
-      proxyAddressUpdate();
-    } else {
-      setError(t('inputProxyAddressError'));
-    }
-  };
-
-  const handleCancel = () => {
-    setCurrentProxy(previousProxy);
-    setIsEditMode(false);
-    setError(null);
+  const handleDelete = () => {
+    setShowDeleteProxy(true);
+    setNodeToEdit(node);
   };
 
   return (
-    <tr key={node} className="bg-white border-b">
-      <td scope="row" className="px-6 py-4 font-medium text-gray-600 whitespace-nowrap">
-        {t('node')} {index} ({node})
-      </td>
-      <td className="px-6 py-4">
-        {isEditMode ? (
-          <>
-            <input
-              type="text"
-              className="flex-auto sm:text-md border rounded-md text-gray-600"
-              onChange={(e) => handleTextInput(e)}
-              placeholder={currentProxy === '' ? 'https:// ...' : ''}
-              value={currentProxy}
-            />
-            <>{error !== null && <div className="text-red-600 text-sm py-2">{error}</div>}</>
-          </>
-        ) : (
-          <>{currentProxy}</>
-        )}
+    <tr className="bg-white border-b hover:bg-gray-50">
+      <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
+        {node}
       </td>
+      <td className="px-6 py-4">{proxy}</td>
       <td className="px-6 py-4 text-right">
-        {isAuthorized && (
-          <>
-            {isEditMode ? (
-              <div>
-                <button
-                  onClick={() => handleSave()}
-                  className="font-medium text-indigo-600 hover:underline mx-2">
-                  {t('save')}
-                </button>
-                <button
-                  onClick={() => handleCancel()}
-                  className="font-medium text-indigo-600 hover:underline">
-                  {t('cancel')}
-                </button>
-              </div>
-            ) : (
-              <button
-                onClick={() => handleEdit()}
-                className="font-medium text-indigo-600 hover:underline">
-                {t('edit')}
-              </button>
-            )}
-          </>
-        )}
+        <button onClick={handleEdit} className="font-medium text-indigo-600 hover:underline mr-6">
+          {t('edit')}
+        </button>
+        <button onClick={handleDelete} className="font-medium text-red-600 hover:underline">
+          {t('delete')}
+        </button>
       </td>
     </tr>
   );
diff --git a/web/frontend/src/pages/admin/components/AddAdminUserModal.tsx b/web/frontend/src/pages/admin/components/AddAdminUserModal.tsx
new file mode 100644
index 000000000..031c3853f
--- /dev/null
+++ b/web/frontend/src/pages/admin/components/AddAdminUserModal.tsx
@@ -0,0 +1,157 @@
+import React, { FC, Fragment, useContext, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Dialog, Listbox, Transition } from '@headlessui/react';
+import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';
+
+import { useTranslation } from 'react-i18next';
+import SpinnerIcon from 'components/utils/SpinnerIcon';
+import { UserAddIcon } from '@heroicons/react/outline';
+import ShortUniqueId from 'short-unique-id';
+import { FlashContext, FlashLevel } from 'index';
+import { UserRole } from 'types/userRole';
+import { ENDPOINT_ADD_ROLE } from 'components/utils/Endpoints';
+import AdminModal from './AdminModal';
+
+const uid = new ShortUniqueId({ length: 8 });
+
+type AddAdminUserModalProps = {
+  open: boolean;
+  setOpen(opened: boolean): void;
+  handleAddRoleUser(user: object): void;
+};
+
+const roles = [UserRole.Admin, UserRole.Operator];
+
+const AddAdminUserModal: FC<AddAdminUserModalProps> = ({ open, setOpen, handleAddRoleUser }) => {
+  const { t } = useTranslation();
+  const fctx = useContext(FlashContext);
+
+  const [loading, setLoading] = useState(false);
+  const [sciperValue, setSciperValue] = useState('');
+  const [selectedRole, setSelectedRole] = useState(roles[0]);
+
+  const handleCancel = () => setOpen(false);
+
+  const handleUserInput = (e: any) => {
+    setSciperValue(e.target.value);
+  };
+
+  const handleAddUser = async () => {
+    const userToAdd = { id: uid(), sciper: sciperValue, role: selectedRole };
+    const requestOptions = {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(userToAdd),
+    };
+
+    try {
+      setLoading(true);
+      const res = await fetch(ENDPOINT_ADD_ROLE, requestOptions);
+      if (res.status !== 200) {
+        const response = await res.text();
+        fctx.addMessage(
+          `Error HTTP ${res.status} (${res.statusText}) : ${response}`,
+          FlashLevel.Error
+        );
+      } else {
+        setSciperValue('');
+        setSelectedRole(roles[0]);
+        handleAddRoleUser(userToAdd);
+        fctx.addMessage(`${t('successAddUser')}`, FlashLevel.Info);
+      }
+    } catch (error) {
+      fctx.addMessage(`${t('errorAddUser')}: ${error.message}`, FlashLevel.Error);
+    }
+    setLoading(false);
+    setOpen(false);
+  };
+
+  const modalBody = (
+    <>
+      <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900">
+        {t('enterSciper')}
+      </Dialog.Title>
+      <input
+        onChange={handleUserInput}
+        value={sciperValue}
+        placeholder="Sciper"
+        className="mt-8 mb-4 border pl-2 w-1/2 py-1 flex rounded-lg"
+      />
+      <div className="mt-2 pb-4">
+        <Listbox value={selectedRole} onChange={setSelectedRole}>
+          <div className="relative mt-1">
+            <Listbox.Button className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left border focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
+              <span className="block truncate">{selectedRole}</span>
+              <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                <SelectorIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+              </span>
+            </Listbox.Button>
+            <Transition
+              as={Fragment}
+              leave="transition ease-in duration-100"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0">
+              <Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                {roles.map((role, personIdx) => (
+                  <Listbox.Option
+                    key={personIdx}
+                    className={({ active }) =>
+                      `relative cursor-default select-none py-2 pl-10 pr-4 ${
+                        active ? 'bg-indigo-100 text-indigo-900' : 'text-gray-900'
+                      }`
+                    }
+                    value={role}>
+                    {({ selected }) => (
+                      <>
+                        <span
+                          className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
+                          {role}
+                        </span>
+                        {selected ? (
+                          <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-indigo-600">
+                            <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                          </span>
+                        ) : null}
+                      </>
+                    )}
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
+            </Transition>
+          </div>
+        </Listbox>
+      </div>
+    </>
+  );
+
+  const actionButton = (
+    <button
+      type="button"
+      className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm"
+      onClick={handleAddUser}>
+      {loading ? (
+        <SpinnerIcon />
+      ) : (
+        <UserAddIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
+      )}
+      {t('addUser')}
+    </button>
+  );
+
+  return (
+    <AdminModal
+      open={open}
+      setOpen={setOpen}
+      modalBody={modalBody}
+      actionButton={actionButton}
+      handleCancel={handleCancel}
+    />
+  );
+};
+
+AddAdminUserModal.propTypes = {
+  open: PropTypes.bool.isRequired,
+  setOpen: PropTypes.func.isRequired,
+};
+
+export default AddAdminUserModal;
diff --git a/web/frontend/src/pages/admin/components/AddProxyModal.tsx b/web/frontend/src/pages/admin/components/AddProxyModal.tsx
new file mode 100644
index 000000000..c54217ae3
--- /dev/null
+++ b/web/frontend/src/pages/admin/components/AddProxyModal.tsx
@@ -0,0 +1,147 @@
+import React, { FC, useContext, useEffect, useState } from 'react';
+import { Dialog } from '@headlessui/react';
+import { PlusIcon } from '@heroicons/react/outline';
+import SpinnerIcon from 'components/utils/SpinnerIcon';
+import { FlashContext, FlashLevel } from 'index';
+import { useTranslation } from 'react-i18next';
+import * as endpoints from 'components/utils/Endpoints';
+import usePostCall from 'components/utils/usePostCall';
+import AdminModal from './AdminModal';
+
+type AddProxyModalProps = {
+  open: boolean;
+  setOpen(opened: boolean): void;
+  handleAddProxy(node: string, proxy: string): void;
+};
+
+const AddProxyModal: FC<AddProxyModalProps> = ({ open, setOpen, handleAddProxy }) => {
+  const { t } = useTranslation();
+  const fctx = useContext(FlashContext);
+  const [error, setError] = useState(null);
+  const [postError, setPostError] = useState(null);
+  const [, setIsPosting] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [node, setNode] = useState('');
+  const [proxy, setProxy] = useState('');
+
+  const sendFetchRequest = usePostCall(setPostError);
+
+  useEffect(() => {
+    if (postError !== null) {
+      fctx.addMessage(t('addNodeProxyError') + postError, FlashLevel.Error);
+      setPostError(null);
+    }
+  }, [postError]);
+
+  const handleNodeInput = (e: any) => {
+    setNode(e.target.value);
+    setError(null);
+  };
+
+  const handleProxyInput = (e: any) => {
+    setProxy(e.target.value);
+    setError(null);
+  };
+
+  const saveMapping = async () => {
+    const request = {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        NodeAddr: node,
+        Proxy: proxy,
+      }),
+    };
+    return sendFetchRequest(endpoints.newProxyAddress, request, setIsPosting);
+  };
+
+  const handleAdd = async () => {
+    setLoading(true);
+    if (node !== '' && proxy !== '') {
+      try {
+        new URL(proxy);
+        setError(null);
+
+        const response = await saveMapping();
+
+        if (response) {
+          handleAddProxy(node, proxy);
+          fctx.addMessage(t('nodeProxySuccessfullyAdded'), FlashLevel.Info);
+          setNode('');
+          setProxy('');
+        }
+
+        setOpen(false);
+      } catch {
+        setError(t('invalidProxyError'));
+      }
+    } else {
+      setError(t('inputNodeProxyError'));
+    }
+    setLoading(false);
+  };
+
+  const handleCancel = () => {
+    setError(null);
+    setOpen(false);
+  };
+
+  const modalBody = (
+    <>
+      <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900">
+        {t('enterNodeProxy')}
+      </Dialog.Title>
+      <div className="mt-10 mb-4 flex items-center">
+        <label htmlFor="node" className="mr-2">
+          {t('node')}:{' '}
+        </label>
+        <input
+          onChange={handleNodeInput}
+          value={node}
+          placeholder="123.123..."
+          className="border pl-2 w-1/2 py-1 flex rounded-lg"
+          id="node"
+        />
+      </div>
+
+      <div className="mt-2 mb-10 flex items-center">
+        <label htmlFor="proxy" className="mr-2">
+          {t('proxy')}:{' '}
+        </label>
+        <input
+          onChange={handleProxyInput}
+          value={proxy}
+          placeholder="https://..."
+          className="border pl-2 w-1/2 py-1 flex rounded-lg"
+          id="proxy"
+        />
+      </div>
+
+      {error !== null && <div className="text-left text-red-600 text-sm my-2">{error}</div>}
+    </>
+  );
+
+  const actionButton = (
+    <>
+      <button
+        type="button"
+        className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm"
+        onClick={handleAdd}>
+        {loading ? <SpinnerIcon /> : <PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />}
+        {t('add')}
+      </button>
+    </>
+  );
+
+  return (
+    <AdminModal
+      open={open}
+      setOpen={setOpen}
+      modalBody={modalBody}
+      actionButton={actionButton}
+      handleCancel={handleCancel}
+    />
+  );
+};
+
+export default AddProxyModal;
diff --git a/web/frontend/src/pages/admin/components/AdminModal.tsx b/web/frontend/src/pages/admin/components/AdminModal.tsx
new file mode 100644
index 000000000..c35fb7252
--- /dev/null
+++ b/web/frontend/src/pages/admin/components/AdminModal.tsx
@@ -0,0 +1,76 @@
+import React, { FC, Fragment, useRef } from 'react';
+import { Dialog, Transition } from '@headlessui/react';
+import { useTranslation } from 'react-i18next';
+
+type AdminModalProps = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  modalBody: JSX.Element;
+  actionButton: JSX.Element;
+  handleCancel(): void;
+};
+
+const AdminModal: FC<AdminModalProps> = ({
+  open,
+  setOpen,
+  modalBody,
+  actionButton,
+  handleCancel,
+}) => {
+  const { t } = useTranslation();
+  const cancelButtonRef = useRef(null);
+
+  return (
+    <Transition.Root show={open} as={Fragment}>
+      <Dialog
+        as="div"
+        className="fixed z-10 inset-0 px-4 sm:px-0 overflow-y-auto"
+        initialFocus={cancelButtonRef}
+        onClose={setOpen}>
+        <div className="block items-end justify-center min-h-screen text-center">
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0">
+            <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          </Transition.Child>
+
+          {/* This element is to trick the browser into centering the modal contents. */}
+          <span className="inline-block align-middle h-screen" aria-hidden="true">
+            &#8203;
+          </span>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enterTo="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+            <div className="inline-block bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all my-8 align-middle max-w-lg w-full p-6">
+              <div>
+                <div className="text-center">{modalBody}</div>
+              </div>
+              <div className="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
+                {actionButton}
+                <button
+                  type="button"
+                  className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm"
+                  onClick={handleCancel}
+                  ref={cancelButtonRef}>
+                  {t('cancel')}
+                </button>
+              </div>
+            </div>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
+
+export default AdminModal;
diff --git a/web/frontend/src/pages/admin/components/EditProxyModal.tsx b/web/frontend/src/pages/admin/components/EditProxyModal.tsx
new file mode 100644
index 000000000..e3b0cef49
--- /dev/null
+++ b/web/frontend/src/pages/admin/components/EditProxyModal.tsx
@@ -0,0 +1,149 @@
+import React, { FC, useContext, useEffect, useState } from 'react';
+import { Dialog } from '@headlessui/react';
+import SpinnerIcon from 'components/utils/SpinnerIcon';
+import { CubeTransparentIcon } from '@heroicons/react/outline';
+import { useTranslation } from 'react-i18next';
+import usePostCall from 'components/utils/usePostCall';
+import * as endpoints from 'components/utils/Endpoints';
+import { FlashContext, FlashLevel } from 'index';
+import AdminModal from './AdminModal';
+
+type EditProxyModalProps = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  nodeProxy: Map<string, string>;
+  setNodeProxy: (nodeProxy: Map<string, string>) => void;
+  node: string;
+};
+
+const EditProxyModal: FC<EditProxyModalProps> = ({
+  open,
+  setOpen,
+  nodeProxy,
+  setNodeProxy,
+  node,
+}) => {
+  const { t } = useTranslation();
+  const fctx = useContext(FlashContext);
+  const [currentProxy, setCurrentProxy] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [, setIsPosting] = useState(false);
+  const [postError, setPostError] = useState(null);
+
+  const sendFetchRequest = usePostCall(setPostError);
+
+  useEffect(() => {
+    if (postError !== null) {
+      fctx.addMessage(t('editProxyError') + postError, FlashLevel.Error);
+      setPostError(null);
+    }
+  }, [postError]);
+
+  useEffect(() => {
+    if (nodeProxy !== null) {
+      setCurrentProxy(nodeProxy.get(node));
+    }
+  }, [nodeProxy, node]);
+
+  const proxyAddressUpdate = async () => {
+    const req = {
+      method: 'PUT',
+      body: JSON.stringify({
+        Proxy: currentProxy,
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    };
+
+    return sendFetchRequest(endpoints.editProxyAddress(node), req, setIsPosting);
+  };
+
+  const handleTextInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCurrentProxy(e.target.value);
+    setError(null);
+  };
+
+  const handleSave = async () => {
+    setLoading(true);
+
+    if (currentProxy !== '') {
+      try {
+        new URL(currentProxy);
+        setError(null);
+        const response = await proxyAddressUpdate();
+
+        if (response) {
+          const newNodeProxy = new Map(nodeProxy);
+          newNodeProxy.set(node, currentProxy);
+          setNodeProxy(newNodeProxy);
+          fctx.addMessage(t('proxySuccessfullyEdited'), FlashLevel.Info);
+        }
+
+        setOpen(false);
+      } catch {
+        setError(t('invalidProxyError'));
+      }
+    } else {
+      setError(t('inputProxyAddressError'));
+    }
+    setLoading(false);
+  };
+
+  const handleCancel = () => {
+    setError(null);
+    setOpen(false);
+  };
+
+  const modalBody = (
+    <>
+      <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900">
+        {t('editProxy')}
+      </Dialog.Title>
+      <div className="mt-10 text-left">
+        <p className="mb-4">
+          {t('node')}: {node}
+        </p>
+        <label htmlFor={currentProxy} className="mr-2">
+          {t('proxy')}:{' '}
+        </label>
+        <input
+          id={currentProxy}
+          type="text"
+          className="mb-6 flex-auto sm:text-md border rounded-md text-gray-900 w-[60%]"
+          onChange={(e) => handleTextInput(e)}
+          placeholder="https:// ..."
+          value={currentProxy}
+        />
+        {error !== null && <div className="text-red-600 text-sm my-2">{error}</div>}
+      </div>
+    </>
+  );
+
+  const actionButton = (
+    <button
+      type="button"
+      className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm"
+      onClick={() => handleSave()}>
+      {loading ? (
+        <SpinnerIcon />
+      ) : (
+        <CubeTransparentIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
+      )}
+      {t('save')}
+    </button>
+  );
+
+  return (
+    <AdminModal
+      open={open}
+      setOpen={setOpen}
+      modalBody={modalBody}
+      actionButton={actionButton}
+      handleCancel={handleCancel}
+    />
+  );
+};
+
+export default EditProxyModal;
diff --git a/web/frontend/src/pages/admin/components/RemoveAdminUserModal.tsx b/web/frontend/src/pages/admin/components/RemoveAdminUserModal.tsx
new file mode 100644
index 000000000..870c7ee3d
--- /dev/null
+++ b/web/frontend/src/pages/admin/components/RemoveAdminUserModal.tsx
@@ -0,0 +1,95 @@
+import React, { FC, useContext, useState } from 'react';
+import { ENDPOINT_REMOVE_ROLE } from 'components/utils/Endpoints';
+import PropTypes from 'prop-types';
+import { Dialog } from '@headlessui/react';
+import { UserRemoveIcon } from '@heroicons/react/outline';
+import SpinnerIcon from 'components/utils/SpinnerIcon';
+import { useTranslation } from 'react-i18next';
+import { FlashContext, FlashLevel } from 'index';
+import AdminModal from './AdminModal';
+
+type RemoveAdminUserModalProps = {
+  open: boolean;
+  setOpen(opened: boolean): void;
+  sciper: number;
+  handleRemoveRoleUser(): void;
+};
+
+const RemoveAdminUserModal: FC<RemoveAdminUserModalProps> = ({
+  open,
+  setOpen,
+  sciper,
+  handleRemoveRoleUser,
+}) => {
+  const { t } = useTranslation();
+  const fctx = useContext(FlashContext);
+
+  const [loading, setLoading] = useState(false);
+
+  const handleCancel = () => setOpen(false);
+
+  const handleDelete = async () => {
+    const requestOptions = {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ sciper: sciper }),
+    };
+
+    try {
+      setLoading(true);
+      const res = await fetch(ENDPOINT_REMOVE_ROLE, requestOptions);
+      if (res.status !== 200) {
+        const response = await res.text();
+        fctx.addMessage(
+          `Error HTTP ${res.status} (${res.statusText}) : ${response}`,
+          FlashLevel.Error
+        );
+      } else {
+        handleRemoveRoleUser();
+        fctx.addMessage(t('successRemoveUser'), FlashLevel.Info);
+      }
+    } catch (error) {
+      fctx.addMessage(`${t('errorRemoveUser')}: ${error.message}`, FlashLevel.Error);
+    }
+    setLoading(false);
+    setOpen(false);
+  };
+
+  const modalBody = (
+    <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900">
+      {t('confirmDeleteUserSciper')} {sciper}
+    </Dialog.Title>
+  );
+
+  const actionButton = (
+    <button
+      type="button"
+      className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm"
+      onClick={handleDelete}>
+      {loading ? (
+        <SpinnerIcon />
+      ) : (
+        <UserRemoveIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
+      )}
+      {t('delete')}
+    </button>
+  );
+
+  return (
+    <AdminModal
+      open={open}
+      setOpen={setOpen}
+      modalBody={modalBody}
+      actionButton={actionButton}
+      handleCancel={handleCancel}
+    />
+  );
+};
+
+RemoveAdminUserModal.propTypes = {
+  open: PropTypes.bool.isRequired,
+  setOpen: PropTypes.func.isRequired,
+  sciper: PropTypes.number.isRequired,
+};
+
+export default RemoveAdminUserModal;
diff --git a/web/frontend/src/pages/admin/components/RemoveProxyModal.tsx b/web/frontend/src/pages/admin/components/RemoveProxyModal.tsx
new file mode 100644
index 000000000..8fd019ba9
--- /dev/null
+++ b/web/frontend/src/pages/admin/components/RemoveProxyModal.tsx
@@ -0,0 +1,96 @@
+import React, { FC, useContext, useEffect, useState } from 'react';
+import { MinusCircleIcon } from '@heroicons/react/outline';
+import { Dialog } from '@headlessui/react';
+import SpinnerIcon from 'components/utils/SpinnerIcon';
+import { FlashContext, FlashLevel } from 'index';
+import { useTranslation } from 'react-i18next';
+import usePostCall from 'components/utils/usePostCall';
+import * as endpoints from 'components/utils/Endpoints';
+import AdminModal from './AdminModal';
+
+type RemoveProxyModalProps = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  node: string;
+  handleDeleteProxy(): void;
+};
+
+const RemoveProxyModal: FC<RemoveProxyModalProps> = ({
+  open,
+  setOpen,
+  node,
+  handleDeleteProxy,
+}) => {
+  const { t } = useTranslation();
+  const fctx = useContext(FlashContext);
+
+  const [loading, setLoading] = useState(false);
+  const [postError, setPostError] = useState(null);
+  const [, setIsPosting] = useState(false);
+
+  const sendFetchRequest = usePostCall(setPostError);
+
+  useEffect(() => {
+    if (postError !== null) {
+      fctx.addMessage(t('removeProxyError') + postError, FlashLevel.Error);
+      setPostError(null);
+    }
+  }, [postError]);
+
+  const handleDelete = async () => {
+    setLoading(true);
+
+    const req = {
+      method: 'DELETE',
+    };
+
+    const response = await sendFetchRequest(endpoints.editProxyAddress(node), req, setIsPosting);
+
+    if (response) {
+      handleDeleteProxy();
+      fctx.addMessage(t('proxySuccessfullyDeleted'), FlashLevel.Info);
+    }
+
+    setOpen(false);
+    setLoading(false);
+  };
+
+  const handleCancel = () => setOpen(false);
+
+  const modalBody = (
+    <>
+      <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900">
+        {t('confirmDeleteProxy')}
+      </Dialog.Title>
+      <div className="my-4">
+        {t('node')}: {node}
+      </div>
+    </>
+  );
+
+  const actionButton = (
+    <button
+      type="button"
+      className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm"
+      onClick={handleDelete}>
+      {loading ? (
+        <SpinnerIcon />
+      ) : (
+        <MinusCircleIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
+      )}
+      {t('delete')}
+    </button>
+  );
+
+  return (
+    <AdminModal
+      open={open}
+      setOpen={setOpen}
+      modalBody={modalBody}
+      actionButton={actionButton}
+      handleCancel={handleCancel}
+    />
+  );
+};
+
+export default RemoveProxyModal;
diff --git a/web/frontend/src/pages/election/Result.tsx b/web/frontend/src/pages/election/Result.tsx
index bc11a773f..738115976 100644
--- a/web/frontend/src/pages/election/Result.tsx
+++ b/web/frontend/src/pages/election/Result.tsx
@@ -42,7 +42,6 @@ const ElectionResult: FC = () => {
   const [rankResult, setRankResult] = useState<RankResults>(null);
   const [selectResult, setSelectResult] = useState<SelectResults>(null);
   const [textResult, setTextResult] = useState<TextResults>(null);
-  const [downloadedResults, setDownloadedResults] = useState(null);
 
   // Group the different results by the ID of the question,
   const groupByID = (
@@ -135,28 +134,22 @@ const ElectionResult: FC = () => {
     });
   };
 
-  useEffect(() => {
-    if (result !== null) {
-      const dataToDownload: DownloadedResults[] = [];
-
-      configuration.Scaffold.forEach((subject: Subject) => {
-        getResultData(subject, dataToDownload);
-      });
+  const exportJSONData = () => {
+    const fileName = 'result.json';
 
-      const data = {
-        Title: configuration.MainTitle,
-        NumberOfVotes: result.length,
-        Results: dataToDownload,
-      };
+    const dataToDownload: DownloadedResults[] = [];
 
-      setDownloadedResults(data);
-    }
-  }, [result]);
+    configuration.Scaffold.forEach((subject: Subject) => {
+      getResultData(subject, dataToDownload);
+    });
 
-  const exportJSONData = () => {
-    const fileName = 'result.json';
+    const data = {
+      Title: configuration.MainTitle,
+      NumberOfVotes: result.length,
+      Results: dataToDownload,
+    };
 
-    const fileToSave = new Blob([JSON.stringify(downloadedResults, null, 2)], {
+    const fileToSave = new Blob([JSON.stringify(data, null, 2)], {
       type: 'application/json',
     });
 
diff --git a/web/frontend/src/types/userRole.ts b/web/frontend/src/types/userRole.ts
index 61fdef421..3017c378d 100644
--- a/web/frontend/src/types/userRole.ts
+++ b/web/frontend/src/types/userRole.ts
@@ -1,5 +1,13 @@
+interface User {
+  id: string;
+  sciper: string;
+  role: UserRole;
+}
+
 export const enum UserRole {
   Admin = 'admin',
   Operator = 'operator',
   Voter = 'voter',
 }
+
+export type { User };