Index: phonelux-frontend/src/components/SuperAdminComponent/SuperAdminComponent.css
===================================================================
--- phonelux-frontend/src/components/SuperAdminComponent/SuperAdminComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/SuperAdminComponent/SuperAdminComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -0,0 +1,56 @@
+.superadmin-section-header{
+    background-color: #B6E2C8;
+    justify-content: center;
+    align-content: center;
+    margin-top: -30px;
+    width: 100%;
+    display: flex;
+    font-size: 18px;
+}
+.superadmin-section-header-text{
+    width: fit-content;
+}
+
+.superadmin-section-table-row:nth-of-type(even){
+    background-color: #eef2f0;
+}
+
+.superadmin-section-table{
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+}
+
+.superadmin-section-table-row{
+    border: 1px solid gainsboro;
+    padding: 20px ;
+    font-size: 18px;
+}
+
+.superadmin-section-table td{
+    text-align: center;
+    word-wrap: break-word;
+}
+
+.superadmin-section-table-head{
+    background-color: #a6c9ab;
+    font-size: 22px;
+}
+
+.superadmin-section-table-head th{
+    word-wrap: break-word;
+    width: 100%;
+}
+.search-user-field{
+    /* display: flex;
+    height: fit-content;
+    border-radius: 20px; */
+    border: 1px solid rgb(131, 125, 125);
+    width: 100%;
+}
+
+.search-user-input{
+margin:5px;
+width: 100%;
+}
+
Index: phonelux-frontend/src/components/SuperAdminComponent/SuperAdminComponent.js
===================================================================
--- phonelux-frontend/src/components/SuperAdminComponent/SuperAdminComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/SuperAdminComponent/SuperAdminComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -0,0 +1,201 @@
+import { Pagination } from '@mui/material'
+import { styled, alpha } from '@mui/material/styles';
+import axios from 'axios'
+import React, { Component } from 'react'
+import HeaderComponent from '../HeaderComponent/HeaderComponent'
+import UserComponent from '../UserComponent/UserComponent'
+import "./SuperAdminComponent.css"
+import SearchIcon from '@mui/icons-material/Search';
+import InputBase from '@mui/material/InputBase';
+
+
+const Search = styled('div')(({ theme }) => ({
+  position: 'relative',
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: alpha(theme.palette.common.white, 0.15),
+  '&:hover': {
+    backgroundColor: alpha(theme.palette.common.white, 0.25),
+  },
+  marginRight: theme.spacing(2),
+  marginLeft: 0,
+  width: '100%',
+  [theme.breakpoints.up('sm')]: {
+    marginLeft: theme.spacing(3),
+    width: 'auto',
+  },
+}));
+
+const SearchIconWrapper = styled('div')(({ theme }) => ({
+  padding: theme.spacing(0, 2),
+  height: '100%',
+  position: 'absolute',
+  pointerEvents: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+  color: 'inherit',
+  '& .MuiInputBase-input': {
+    padding: theme.spacing(1, 1, 1, 0),
+    // vertical padding + font size from searchIcon
+    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+    transition: theme.transitions.create('width'),
+    width: '100%',
+    [theme.breakpoints.up('md')]: {
+      width: '20ch',
+    },
+  },
+}));
+
+
+export class SuperAdminComponent extends Component {
+
+    constructor(props) {
+      super(props)
+    
+      this.state = {
+         users: [],
+         currentUsers: [],
+         usersPerPage:10,
+         numberOfPages: 0,
+         currentPage: 1,
+        //  numberOfUsers: 0,
+        //  numberOfAdmins: 0
+      }
+    }
+
+    componentDidMount(){
+      this.getUsers()
+    }
+
+    addAdmin = (id) => {
+      var config = {
+        method: 'put',
+        url: '/management/addadmin/'+id,
+        headers: { 
+          'Authorization': 'Bearer '+localStorage.getItem('token')
+        }
+      };
+      
+      axios(config)
+      .then(response => {
+        this.getUsers()
+      })
+      .catch(error => {
+        console.log(error);
+      });
+
+    }
+
+    removeAdmin = (id) => {
+      var config = {
+        method: 'put',
+        url: '/management/removeadmin/'+id,
+        headers: { 
+          'Authorization': 'Bearer '+localStorage.getItem('token')
+        }
+      };
+      
+      axios(config)
+      .then(response => {
+        this.getUsers()
+      })
+      .catch(error => {
+        console.log(error);
+      });
+    }
+
+    getUsers = (filter) =>{
+      let queryParams = '?'
+      if(filter)
+      {
+        queryParams+='searchValue='+filter
+      }
+      var config = {
+        method: 'get',
+        url: '/management/users'+queryParams,
+        headers: { 
+          'Authorization': 'Bearer '+localStorage.getItem('token')
+        }
+      };
+      
+      axios(config)
+      .then(response => {
+        this.setState({
+          users: response.data,
+          // numberOfUsers: response.data.filter(user => user.userRole == 'USER').length,
+          // numberOfAdmins: response.data.filter(user => user.userRole == 'ADMIN').length,
+          numberOfPages: Math.ceil(response.data.length / this.state.usersPerPage)
+        },(e) => this.setNewPage(e,this.state.currentPage))
+      })
+      .catch(error => {
+        console.log(error);
+      });
+    }
+
+    setNewPage = (event,page) => {
+
+      const indexOfLastUser = parseInt(page) * this.state.usersPerPage;
+      const indexOfFirstUser = indexOfLastUser - this.state.usersPerPage;
+  
+      const currUsers = this.state.users.slice(indexOfFirstUser, indexOfLastUser)
+  
+      this.setState({
+        currentPage: parseInt(page),
+        currentUsers: currUsers
+      })
+  
+    }
+    
+  render() {
+    return (
+      <div className='superadmin-section-main'>
+        <HeaderComponent/>
+        <div className='superadmin-section-header'>
+          <h1 className='superadmin-section-header-text'>
+            Менаџмент со корисници
+          </h1>
+        </div>
+        <div className='superadmin-users-section'>
+
+          <table cellPadding={20} className='superadmin-section-table'>
+            <thead className='superadmin-section-table-head'>
+              <tr>
+              <th>Име</th>
+              <th>Презиме</th>
+              <th>Е-маил адреса</th>
+              <th>Привилегии</th>
+              <th>
+              <Search onChange={(event) => this.getUsers(event.target.value)} className="search-user-field">
+                <SearchIconWrapper id="search-user-iconwrapper">
+                  <SearchIcon />
+                </SearchIconWrapper>
+                <StyledInputBase
+                  className="search-user-input"
+                  placeholder="Пребарувај…"
+                  inputProps={{ 'aria-label': 'search' }}/>  
+              </Search>
+              </th>
+              </tr>
+            </thead>
+            <tbody>
+              {
+                this.state.currentUsers.map((user,idx) => <UserComponent key={idx} id={user.id} firstname={user.firstName} 
+                lastname={user.lastName} email={user.email} role={user.userRole} addAdmin={this.addAdmin} removeAdmin={this.removeAdmin}/>) 
+              }
+            </tbody>
+          </table>
+
+        </div>
+        <div className='pagination-wrapper'>
+         <Pagination className='superadmin-users-pagination' onChange={this.setNewPage} page={this.state.currentPage}
+          count={this.state.numberOfPages} color="primary" />
+      </div>
+      </div>
+    )
+  }
+}
+
+export default SuperAdminComponent
