diff --git a/src/components/App.js b/src/components/App.js
index 2d0d023..4f9eecf 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 
-import firebase from "firebase/app";
-import "firebase/auth";
+import firebase from 'firebase/app';
+import 'firebase/auth';
 
 import axios from 'axios';
 import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
@@ -13,132 +13,197 @@ import Modules from './modules/Modules';
 import styled from 'styled-components';
 import ProcessProtocols from './process_protocols/ProcessProtocols';
 
-import { apiKey, authDomain, databaseURL, projectId } from "../../config/keys";
+import { apiKey, authDomain, databaseURL, projectId } from '../../config/keys';
 
 const AppStyle = styled.div`
-    font-family: Montserrat, sans-serif;
+  font-family: Montserrat, sans-serif;
 `;
 
 export const AuthContext = React.createContext();
 
-export default props => {
-
-    const [state, setState] = useState({user: null, loading: true, token: '', parties: [], countries: [], organizations: []});
-
-    useEffect(() => {
-        firebase.initializeApp({ apiKey, authDomain, databaseURL, projectId });
-
-        firebase.app().auth().onAuthStateChanged(async user => {
-            if (user) {
-                const idToken = await user.getIdToken();
-
-                setState({...state, loading: true});
-                const res = await axios.get(`${apiHost()}/me`, { 
-                    headers: { 'Authorization': `Bearer ${idToken}` }
-                });
-
-                const res2 = await axios.get(`${apiHost()}/parties`, { 
-                    headers: { 'Authorization': `Bearer ${idToken}` }
-                });
-
-                const res3 = await axios.get(`${apiHost()}/countries`, { 
-                    headers: { 'Authorization': `Bearer ${idToken}` }
-                });
-
-                const res4 = await axios.get(`${apiHost()}/organizations`, { 
-                    headers: { 'Authorization': `Bearer ${idToken}` }
-                })
-
-
-                setState({user: res.data, loading: false, token: idToken, parties: res2.data, countries: res3.data, organizations: res4.data});
-            } else {
-                setState({user: null, loading: false, token: '', parties: [], countries: [], organizations: []});
-            }
-        });
-    }, []);
-
-    const logIn = ({ email, password }) => {
-        return firebase.auth().signInWithEmailAndPassword(email, password);
-    };
-
-    const logOut = () => {
-        firebase.app().auth().signOut();
-    };
-
-    const apiHost = () => {
-        if(!process.env.API_HOST) {
-            return 'https://d1tapi.dabulgaria.bg';
+export default (props) => {
+  const [state, setState] = useState({
+    user: null,
+    loading: true,
+    token: '',
+    parties: [],
+    countries: [],
+    organizations: [],
+    roles: [],
+  });
+
+  useEffect(() => {
+    firebase.initializeApp({ apiKey, authDomain, databaseURL, projectId });
+
+    firebase
+      .app()
+      .auth()
+      .onAuthStateChanged(async (user) => {
+        if (user) {
+          const idToken = await user.getIdToken();
+
+          setState({ ...state, loading: true });
+          const res = await axios.get(`${apiHost()}/me`, {
+            headers: { Authorization: `Bearer ${idToken}` },
+          });
+
+          const res2 = await axios.get(`${apiHost()}/parties`, {
+            headers: { Authorization: `Bearer ${idToken}` },
+          });
+
+          const res3 = await axios.get(`${apiHost()}/countries`, {
+            headers: { Authorization: `Bearer ${idToken}` },
+          });
+
+          const res4 = await axios.get(`${apiHost()}/organizations`, {
+            headers: { Authorization: `Bearer ${idToken}` },
+          });
+
+          const res5 = await axios.get(`${apiHost()}/users/roles`, {
+            headers: { Authorization: `Bearer ${idToken}` },
+          });
+
+          setState({
+            user: res.data,
+            loading: false,
+            token: idToken,
+            parties: res2.data,
+            countries: res3.data,
+            organizations: res4.data,
+            roles: res5.data,
+          });
         } else {
-            return process.env.API_HOST;
-        }
-    };
-
-    const authGet = async (path) => {
-        const res = await axios.get(`${apiHost()}${path}`, { headers: { 'Authorization': `Bearer ${state.token}` }});
-        return res;
-    };
-
-    const authPost = async (path, body) => {
-        let res;
-        try {
-            res = await axios.post(`${apiHost()}${path}`, body? body : {}, { headers: { 'Authorization': `Bearer ${state.token}` }});
-        } catch(err) {
-            alert(`Error ${err.response.status}: ${err.response.statusText}\n${err.response.data.message.map((m, i) => `\n${i+1}. ${m}`)}`);
-            throw err;
-        }
-        return res;
-    };
-
-    const authDelete = async (path) => {
-        const res = await axios.delete(`${apiHost()}${path}`, { headers: { 'Authorization': `Bearer ${state.token}` }});
-        return res;
-    };
-
-    const authPut = async (path, body) => {
-        let res;
-        try {
-            res = await axios.put(`${apiHost()}${path}`, body? body : {}, { headers: { 'Authorization': `Bearer ${state.token}` }});
-        } catch(err) {
-            alert(`Error ${err.response.status}: ${err.response.statusText}\n${err.response.data.message.map((m, i) => `\n${i+1}. ${m}`)}`);
-            throw err;
-        }
-        return res;
-    };
-
-    const authPatch = async (path, body) => {
-        let res;
-        try {
-            res = await axios.patch(`${apiHost()}${path}`, body? body : {}, { headers: { 'Authorization': `Bearer ${state.token}` }});
-        } catch(err) {
-            alert(`Error ${err.response.status}: ${err.response.statusText}\n${err.response.data.message.map((m, i) => `\n${i+1}. ${m}`)}`);
-            throw err;
+          setState({
+            user: null,
+            loading: false,
+            token: '',
+            parties: [],
+            countries: [],
+            organizations: [],
+            roles: [],
+          });
         }
-        return res;
-    };
-   
-    return(
-        <AppStyle>
-        <BrowserRouter>
-            <AuthContext.Provider value={{
-                user: state.user, token: state.token, parties: state.parties, countries: state.countries, organizations: state.organizations,
-                logIn, logOut, authGet, authPost, authDelete, authPut, authPatch}}>
-            {
-                state.loading
-                ? <Loading fullScreen/>
-                :    <Switch>
-                        <Route path='/login'>
-                            {state.user? <Redirect to='/'/> : <Login/>}
-                        </Route>
-                        <Route exact path='/protocols/process'>
-                            {!state.user? <Redirect to='/login'/> : <ProcessProtocols/>}
-                        </Route>
-                        <Route path='/'>
-                            {!state.user? <Redirect to='/login'/> : <Modules/>}
-                        </Route>
-                    </Switch>
-            }
-            </AuthContext.Provider>
-        </BrowserRouter>
-        </AppStyle>
-    );
+      });
+  }, []);
+
+  const logIn = ({ email, password }) => {
+    return firebase.auth().signInWithEmailAndPassword(email, password);
+  };
+
+  const logOut = () => {
+    firebase.app().auth().signOut();
+  };
+
+  const apiHost = () => {
+    if (!process.env.API_HOST) {
+      return 'https://d1tapi.dabulgaria.bg';
+    } else {
+      return process.env.API_HOST;
+    }
+  };
+
+  const authGet = async (path) => {
+    const res = await axios.get(`${apiHost()}${path}`, {
+      headers: { Authorization: `Bearer ${state.token}` },
+    });
+    return res;
+  };
+
+  const authPost = async (path, body) => {
+    let res;
+    try {
+      res = await axios.post(`${apiHost()}${path}`, body ? body : {}, {
+        headers: { Authorization: `Bearer ${state.token}` },
+      });
+    } catch (err) {
+      alert(
+        `Error ${err.response.status}: ${
+          err.response.statusText
+        }\n${err.response.data.message.map((m, i) => `\n${i + 1}. ${m}`)}`
+      );
+      throw err;
+    }
+    return res;
+  };
+
+  const authDelete = async (path) => {
+    const res = await axios.delete(`${apiHost()}${path}`, {
+      headers: { Authorization: `Bearer ${state.token}` },
+    });
+    return res;
+  };
+
+  const authPut = async (path, body) => {
+    let res;
+    try {
+      res = await axios.put(`${apiHost()}${path}`, body ? body : {}, {
+        headers: { Authorization: `Bearer ${state.token}` },
+      });
+    } catch (err) {
+      alert(
+        `Error ${err.response.status}: ${
+          err.response.statusText
+        }\n${err.response.data.message.map((m, i) => `\n${i + 1}. ${m}`)}`
+      );
+      throw err;
+    }
+    return res;
+  };
+
+  const authPatch = async (path, body) => {
+    let res;
+    try {
+      res = await axios.patch(`${apiHost()}${path}`, body ? body : {}, {
+        headers: { Authorization: `Bearer ${state.token}` },
+      });
+    } catch (err) {
+      alert(
+        `Error ${err.response.status}: ${
+          err.response.statusText
+        }\n${err.response.data.message.map((m, i) => `\n${i + 1}. ${m}`)}`
+      );
+      throw err;
+    }
+    return res;
+  };
+
+  return (
+    <AppStyle>
+      <BrowserRouter>
+        <AuthContext.Provider
+          value={{
+            user: state.user,
+            token: state.token,
+            parties: state.parties,
+            countries: state.countries,
+            organizations: state.organizations,
+            roles: state.roles,
+            logIn,
+            logOut,
+            authGet,
+            authPost,
+            authDelete,
+            authPut,
+            authPatch,
+          }}
+        >
+          {state.loading ? (
+            <Loading fullScreen />
+          ) : (
+            <Switch>
+              <Route path="/login">
+                {state.user ? <Redirect to="/" /> : <Login />}
+              </Route>
+              <Route exact path="/protocols/process">
+                {!state.user ? <Redirect to="/login" /> : <ProcessProtocols />}
+              </Route>
+              <Route path="/">
+                {!state.user ? <Redirect to="/login" /> : <Modules />}
+              </Route>
+            </Switch>
+          )}
+        </AuthContext.Provider>
+      </BrowserRouter>
+    </AppStyle>
+  );
 };
diff --git a/src/components/Util.js b/src/components/Util.js
deleted file mode 100644
index eb96b35..0000000
--- a/src/components/Util.js
+++ /dev/null
@@ -1,103 +0,0 @@
-const format = function(number, n, x, s, c) {
-    var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\D' : '$') + ')',
-        num = parseFloat(number).toFixed(Math.max(0, ~~n));
-
-    return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ','));
-};
-
-const formatLv = function(number) {
-    return format(number, 2, 3, ' ', ',');
-};
-
-const formatPop = function(number) {
-    return format(Math.floor(number), 0, 3, ' ', ',');
-}
-
-const pad = num => {
-    var s = String(num);
-    while (s.length < 2) {s = "0" + s;}
-    return s;
-};
-
-const month = monthStr => {
-    switch(monthStr) {
-        case 0: return 'януари'; break;
-        case 1: return 'февруари'; break;
-        case 2: return 'март'; break;
-        case 3: return 'април'; break;
-        case 4: return 'май'; break;
-        case 5: return 'юни'; break;
-        case 6: return 'юли'; break;
-        case 7: return 'август'; break;
-        case 8: return 'септември'; break;
-        case 9: return 'октомври'; break;
-        case 10: return 'ноември'; break;
-        case 11: return 'декември'; break;
-    }
-};
-
-const formatDay = d => {
-    if(d >= 10 && d <= 20) 
-        return d + '-ти';
-
-    switch(d%10) {
-        case 1: return d + '-ви'; break;
-        case 2: return d + '-ри'; break;
-        case 7: case 8: return d + '-ми'; break;
-        default: return d + '-ти'; break;
-    }
-};
-
-const formatDate = dateTime => {
-    const date = new Date(dateTime);
-
-    return formatDay(date.getDate()) + ' ' +
-            month(date.getMonth()) + ' '+
-            date.getFullYear();
-};
-
-const formatTime = dateTime => {
-    const date = new Date(dateTime);
-    return pad(date.getHours()) + ':' +
-            pad(date.getMinutes());
-};
-
-const formatDateTime = dateTime => {
-    return formatTime(dateTime) + ' ' + formatDateShort(dateTime);
-
-};
-
-const formatSecs = secs => {
-    return pad(Math.floor(secs / 60)) + ':' + pad(secs % 60);
-};
-
-const formatDateShort = dateTime => {
-    const date = new Date(dateTime);
-
-    return pad(date.getDate()) + '.' +
-            pad(date.getMonth()+1) + '.' +
-            pad(date.getFullYear());
-}
-
-const checkPaths = (path1, path2) => {
-    if(!path1 || !path2) return false;
-    
-    if(path1[path1.length - 1] !== '/')
-        path1 = path1 + '/';
-    if(path2[path2.length - 1] !== '/')
-        path2 = path2 + '/';
-    
-    return path1 === path2;
-}
-
-module.exports = {
-    formatLv,
-    formatPop,
-    formatDate,
-    formatDateShort,
-    formatDateTime,
-    formatTime,
-    formatSecs,
-    format,
-    checkPaths,
-};
\ No newline at end of file
diff --git a/src/components/modules/Admin.js b/src/components/modules/Admin.js
deleted file mode 100644
index 00d0c2c..0000000
--- a/src/components/modules/Admin.js
+++ /dev/null
@@ -1,174 +0,0 @@
-import React, { useEffect, useContext, useState } from 'react';
-import { Link, useLocation, useHistory } from 'react-router-dom';
-
-import { AuthContext } from '../App';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronLeft, faChevronRight, faFastForward, faFastBackward } from '@fortawesome/free-solid-svg-icons';
-
-import styled from 'styled-components';
-
-import Loading from '../layout/Loading';
-
-const TableViewContainer = styled.div`
-    padding: 40px;
-
-    hr {
-        border: 1px solid #ccc;
-        border-bottom: none;
-    }
-`;
-
-const PaginationLinks = styled.div`
-    padding: 20px;
-    text-align: center;
-
-    a {
-        color: #444;
-        margin: 0 10px;
-        text-decoration: none;
-
-        &:hover {
-            color: #777;
-        }
-
-        &.disabled {
-            color: #999;
-            pointer-events: none;
-        }
-    }
-`;
-
-const UserTable = styled.table`
-    background-color: white;
-    width: 100%;
-    border-collapse: collapse;
-    box-shadow: 0 0 10px #aaa;
-
-    thead {
-        background-color: #f5f5f5;
-        text-align: left;
-        border-bottom: 2px solid #eee;
-
-        th { padding: 10px; }
-    }
-
-    td {
-        padding: 8px 15px;
-        border: none;
-    }
-
-    tr {
-        cursor: pointer;
-        border-bottom: 1px solid #eaeaea;
-
-        &:hover {
-            background-color: rgb(202, 255, 249);
-        }
-    }
-`;
-
-const useQuery = () => {
-    return new URLSearchParams(useLocation().search);
-}
-
-export default props => {
-    const { authGet } = useContext(AuthContext);
-    const [data, setData] = useState(null);
-    const [loading, setLoading] = useState(false);
-    const query = useQuery();
-    const history = useHistory();
-
-    useEffect(() => {
-        let url = '/users';
-        const page = query.get("page");
-        const limit = query.get("limit");
-
-        if(page || limit) url += '?';
-
-        if(page) url += `page=${page}`;
-        if(limit) url += `limit=${limit}`;
-
-        setLoading(true);
-        authGet(url).then(res => {
-            setLoading(false);
-            setData(res.data);
-        });
-    }, [query.get("page")]);
-
-    const renderLinks = () => {
-        const firstAvail = data.meta.currentPage !== 1;
-        const lastAvail = data.meta.currentPage !== data.meta.totalPages;
-        const nextAvail = data.links.next;
-        const prevAvail = data.links.previous;
-
-        return (
-            <PaginationLinks>
-                <Link className={firstAvail? '' : 'disabled'} to={data.links.first}>
-                    <FontAwesomeIcon icon={faFastBackward}/> Първа
-                </Link>
-                <Link className={prevAvail? '' : 'disabled'} to={data.links.previous}>
-                    <FontAwesomeIcon icon={faChevronLeft}/> Предишна
-                </Link>
-                <div style={{margin: '0 5px', display: 'inline-block', color: '#444', width: '60px'}}>
-                    {data.meta.currentPage} / {data.meta.totalPages}
-                </div>
-                <Link className={nextAvail? '' : 'disabled'} to={data.links.next}>
-                    Следваща <FontAwesomeIcon icon={faChevronRight}/>
-                </Link>
-                <Link className={lastAvail? '' : 'disabled'} to={data.links.last}>
-                    Последна <FontAwesomeIcon icon={faFastForward}/>
-                </Link>
-            </PaginationLinks>
-        );
-    };
-
-    return(
-        <TableViewContainer>
-            <h1>Административна секция</h1>
-            <hr/>
-            {
-                !data? <Loading/> : [
-                    renderLinks(),
-                    <UserTable>
-                    <thead>
-                        <th>Име</th>
-                        <th>Фамилия</th>
-                        <th>Ел. поща</th>
-                        <th>Телефон</th>
-                        <th>ПИН</th>
-                        <th>Съгласие за данни</th>
-                        <th>Регистриран на</th>
-                        <th>Роли</th>
-                    </thead>
-                    <tbody>
-                    {
-                        loading
-                        ?   <tr><td colspan="8"><Loading/></td></tr>
-                        :   data.items.map((user, i) => 
-                                <tr key={i}>
-                                    <td>{user.firstName}</td>
-                                    <td>{user.lastName}</td>
-                                    <td>{user.email}</td>
-                                    <td>{user.phone}</td>
-                                    <td>{user.pin}</td>
-                                    <td>{user.hasAgreedToKeepData? 'Да' : 'Не'}</td>
-                                    <td>{user.registeredAt}</td>
-                                    <td>{JSON.stringify(user.roles)}</td>
-                                </tr>
-                            )
-                    }
-                    </tbody>
-                    </UserTable>,
-                    renderLinks(),
-                    <div>
-                        Потребители на страница: {query.get("limit")}
-                        <Link to="/">10</Link>
-                        <Link to="/">20</Link>
-                        <Link to="/">50</Link>
-                        <Link to="/">100</Link>
-                    </div>
-                ]
-            }
-        </TableViewContainer>
-    );
-};
\ No newline at end of file
diff --git a/src/components/modules/Modules.js b/src/components/modules/Modules.js
index 8e6186a..39979bb 100644
--- a/src/components/modules/Modules.js
+++ b/src/components/modules/Modules.js
@@ -3,7 +3,10 @@ import React from 'react';
 import Navigation from './layout/Navigation';
 
 import { Switch, Route, Redirect } from 'react-router-dom';
-import Admin from './Admin';
+
+import Admin from './admin/Admin';
+import AdminDetails from './admin/AdminDetails';
+
 import Posts from './Posts';
 import Profile from './Profile';
 
@@ -18,57 +21,63 @@ import styled from 'styled-components';
 import Sections from './Sections';
 
 const NavigationHalf = styled.div`
-    width: 220px;
-    height: 100vh;
-    position: absolute;
-    top: 0;
-    left: 0;
+  width: 220px;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
 `;
 
 const ContentHalf = styled.div`
-    width: calc(100% - 220px);
-    height: 100vh;
-    overflow-y: auto;
-    position: absolute;
-    top: 0;
-    right: 0;
-    background-color: #eee;
+  width: calc(100% - 220px);
+  height: 100vh;
+  overflow-y: auto;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: #eee;
 `;
 
 export const ContentPanel = styled.div`
-    background-color: white;
-    margin: 30px auto;
-    max-width: 800px;
-    border-radius: 15px;
-    //box-shadow: 0px 0px 5px #aaa;
-    border: 1px solid #eee;
-    padding: 20px 50px;
+  background-color: white;
+  margin: 30px auto;
+  max-width: 840px;
+  border-radius: 15px;
+  //box-shadow: 0px 0px 5px #aaa;
+  border: 1px solid #eee;
+  padding: 20px 50px;
 
-    hr {
-        margin: 20px 0;
-        border: 1px solid #ddd;
-        border-top: 0;
-    }
+  hr {
+    margin: 20px 0;
+    border: 1px solid #ddd;
+    border-top: 0;
+  }
 `;
 
-export default props => {
-    return([
-        <NavigationHalf>
-            <Navigation/>
-        </NavigationHalf>,
-        <ContentHalf>
-            <Switch>
-                <Route path='/profile' component={Profile}/>
-                <Route path='/sections' component={Sections}/>
-                <Route path='/protocol/:protocol' component={ProtocolDetails}/>
-                <Route path='/protocols' component={ProtocolsHome}/>
-                <Route path='/violation/:violation/comments' component={AllComments}/>
-                <Route path='/violation/:violation' component={ViolationDetails}/>
-                <Route path='/violations' component={ViolationList}/>
-                {/* <Route path='/users' component={Admin}/> */}
-                <Route path='/posts' component={Posts}/>
-                <Redirect to='/profile'/>
-            </Switch>
-        </ContentHalf>
-    ]);
+export default (props) => {
+  return (
+    <>
+      <NavigationHalf>
+        <Navigation />
+      </NavigationHalf>
+      <ContentHalf>
+        <Switch>
+          <Route path="/profile" component={Profile} />
+          <Route path="/sections" component={Sections} />
+          <Route path="/protocol/:protocol" component={ProtocolDetails} />
+          <Route path="/protocols" component={ProtocolsHome} />
+          <Route
+            path="/violation/:violation/comments"
+            component={AllComments}
+          />
+          <Route path="/violation/:violation" component={ViolationDetails} />
+          <Route path="/violations" component={ViolationList} />
+          <Route path="/user/:userId" component={AdminDetails} />
+          <Route path="/users" component={Admin} />
+          <Route path="/posts" component={Posts} />
+          <Redirect to="/profile" />
+        </Switch>
+      </ContentHalf>
+    </>
+  );
 };
diff --git a/src/components/modules/admin/Admin.js b/src/components/modules/admin/Admin.js
new file mode 100644
index 0000000..1934b2e
--- /dev/null
+++ b/src/components/modules/admin/Admin.js
@@ -0,0 +1,289 @@
+import React, { useEffect, useContext, useState } from 'react';
+import { Link, useLocation, useHistory } from 'react-router-dom';
+
+import { AuthContext } from '../../App';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faChevronLeft,
+  faChevronRight,
+  faFastForward,
+  faFastBackward,
+} from '@fortawesome/free-solid-svg-icons';
+
+import styled from 'styled-components';
+
+import AdminFilter from './AdminFilter';
+
+import Loading from '../../layout/Loading';
+
+import Tooltip from '../../utils/Tooltip';
+
+import { mapRoleLocalization } from '../../utils/Util';
+
+const TableViewContainer = styled.div`
+  padding: 40px;
+
+  hr {
+    border: 1px solid #ccc;
+    border-bottom: none;
+  }
+`;
+
+const PaginationLinks = styled.div`
+  padding: 20px;
+  text-align: center;
+
+  a {
+    color: #444;
+    margin: 0 10px;
+    text-decoration: none;
+
+    &:hover {
+      color: #777;
+    }
+
+    &.disabled {
+      color: #999;
+      pointer-events: none;
+    }
+  }
+`;
+
+const UserTable = styled.table`
+  background-color: white;
+  width: 100%;
+  border-collapse: collapse;
+  box-shadow: 0 0 10px #aaa;
+
+  thead {
+    background-color: #f5f5f5;
+    text-align: left;
+    border-bottom: 2px solid #eee;
+
+    th {
+      padding: 10px;
+    }
+  }
+
+  td {
+    padding: 8px 15px;
+    border: none;
+  }
+
+  tr {
+    cursor: pointer;
+    border-bottom: 1px solid #eaeaea;
+
+    &:hover {
+      background-color: rgb(202, 255, 249);
+    }
+  }
+`;
+
+const RoleIcon = styled.span`
+  background-color: #4aa2ff;
+  border-radius: 50%;
+  color: white;
+  font-weight: bold;
+  height: 34px;
+  display: block;
+  width: 34px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  &:hover {
+    background-color: #5da2ec;
+  }
+`;
+
+const RolesContainer = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  row-gap: 5px;
+`;
+const useQuery = () => {
+  return new URLSearchParams(useLocation().search);
+};
+
+export default (props) => {
+  const { authGet } = useContext(AuthContext);
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const query = useQuery();
+  const history = useHistory();
+  const rolesState = useContext(AuthContext).roles;
+
+  useEffect(() => {
+    let url = '/users';
+    const page = query.get('page');
+    const firstName = query.get('firstName');
+    const lastName = query.get('lastName');
+    const email = query.get('email');
+    const role = query.get('role');
+    const organization = query.get('organization');
+    // const limit = query.get('limit');
+
+    if (page || firstName || lastName || email || role || organization)
+      url += '?';
+
+    if (page) url += `page=${page}`;
+    if (firstName) url += `firstName=${firstName}`;
+    if (lastName) url += `lastName=${lastName}`;
+    if (email) url += `email=${email}`;
+    if (role) url += `role=${role}`;
+    if (organization) url += `organization=${organization}`;
+
+    // if (limit) url += `limit=${limit}`;
+
+    setLoading(true);
+    authGet(url).then((res) => {
+      setLoading(false);
+      setData(res.data);
+    });
+  }, [
+    query.get('firstName'),
+    query.get('lastName'),
+    query.get('email'),
+    query.get('page'),
+    query.get('role'),
+    query.get('organization'),
+  ]);
+
+  const renderLinks = () => {
+    const firstAvail = data.meta.currentPage !== 1;
+    const lastAvail = data.meta.currentPage !== data.meta.totalPages;
+    const nextAvail = data.links.next;
+    const prevAvail = data.links.previous;
+
+    return (
+      <PaginationLinks>
+        <Link className={firstAvail ? '' : 'disabled'} to={data.links.first}>
+          <FontAwesomeIcon icon={faFastBackward} /> Първа
+        </Link>
+        <Link className={prevAvail ? '' : 'disabled'} to={data.links.previous}>
+          <FontAwesomeIcon icon={faChevronLeft} /> Предишна
+        </Link>
+        <div
+          style={{
+            margin: '0 5px',
+            display: 'inline-block',
+            color: '#444',
+            width: '60px',
+          }}
+        >
+          {data.meta.currentPage} / {data.meta.totalPages}
+        </div>
+        <Link className={nextAvail ? '' : 'disabled'} to={data.links.next}>
+          Следваща <FontAwesomeIcon icon={faChevronRight} />
+        </Link>
+        <Link className={lastAvail ? '' : 'disabled'} to={data.links.last}>
+          Последна <FontAwesomeIcon icon={faFastForward} />
+        </Link>
+      </PaginationLinks>
+    );
+  };
+
+  const openUser = (id) => {
+    history.push(`/user/${id}`);
+  };
+
+  const roles = (roles) => {
+    return roles.length === 0 ? (
+      <i>Без Роля</i>
+    ) : (
+      roles.map((role, idx) => {
+        return createRoleItem(role, idx);
+      })
+    );
+  };
+
+  const createRoleItem = (role, idx) => {
+    let roleName = mapRoleLocalization(rolesState, role) ?? role[0];
+    let color = '#9e9e9e';
+    switch (role) {
+      case 'user':
+        color = '#4caf50';
+        break;
+      case 'validator':
+        color = '#6c6cff';
+        break;
+      case 'lawyer':
+        color = '#00bcd4';
+        break;
+      case 'streamer':
+        color = '#ff9800';
+        break;
+      case 'admin':
+        color = '#ff3a39';
+        break;
+      default:
+        break;
+    }
+    return roleCircle(roleName, idx, color);
+  };
+
+  const roleCircle = (roleName, idx, color) => {
+    return (
+      <Tooltip key={idx} text={roleName}>
+        <RoleIcon style={{ backgroundColor: color }}>{roleName[0]}</RoleIcon>
+      </Tooltip>
+    );
+  };
+
+  return (
+    <>
+      <TableViewContainer>
+        <h1>Административна секция</h1>
+        <AdminFilter />
+        <hr />
+        {!data ? (
+          <Loading />
+        ) : (
+          <>
+            {renderLinks()}
+            <UserTable>
+              <thead>
+                <tr>
+                  <th>Име</th>
+                  <th>Фамилия</th>
+                  <th>Ел. поща</th>
+                  <th>Телефон</th>
+                  <th>ПИН</th>
+                  <th>Съгласие за данни</th>
+                  {/* <th>Регистриран на</th> */}
+                  <th>Роли</th>
+                </tr>
+              </thead>
+              <tbody>
+                {loading ? (
+                  <tr>
+                    <td colSpan="8">
+                      <Loading />
+                    </td>
+                  </tr>
+                ) : (
+                  data.items.map((user, i) => (
+                    <tr key={user.id} onClick={() => openUser(user.id)}>
+                      <td>{user.firstName}</td>
+                      <td>{user.lastName}</td>
+                      <td>{user.email}</td>
+                      <td>{user.phone}</td>
+                      <td>{user.pin}</td>
+                      <td>{user.hasAgreedToKeepData ? 'Да' : 'Не'}</td>
+                      {/* <td>{user.registeredAt}</td> */}
+                      <td>
+                        <RolesContainer>{roles(user.roles)}</RolesContainer>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </UserTable>
+            {renderLinks()}
+          </>
+        )}
+      </TableViewContainer>
+    </>
+  );
+};
diff --git a/src/components/modules/admin/AdminDetails.js b/src/components/modules/admin/AdminDetails.js
new file mode 100644
index 0000000..92b4a68
--- /dev/null
+++ b/src/components/modules/admin/AdminDetails.js
@@ -0,0 +1,206 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { ContentPanel } from '../Modules';
+import { useHistory, useParams } from 'react-router-dom';
+import { AuthContext } from '../../App';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
+import { TableStyle } from '../Profile';
+import { BackButton } from '../violations/ViolationDetails';
+
+import Loading from '../../layout/Loading';
+
+import styled from 'styled-components';
+
+const CheckboxList = styled.div`
+  list-style: none;
+  padding: 0;
+
+  li {
+    margin-bottom: 0.5rem;
+  }
+
+  .checkbox-list-item {
+    display: flex;
+    justify-content: space-between;
+
+    label {
+      vertical-align: text-bottom;
+      margin-left: 0.5rem;
+    }
+  }
+`;
+
+const ButtonStyle = styled.button`
+  background-color: #4892e1;
+  color: white;
+  border: none;
+  padding: 7px 13px;
+  font-size: 20px;
+  cursor: pointer;
+  font-weight: bold;
+  border-radius: 5px;
+  border-bottom: 3px solid #2a68aa;
+  margin-top: 0px;
+  width: 10rem;
+
+  &:hover {
+    background-color: #5da2ec;
+  }
+
+  &:active {
+    background-color: #1d5a9b;
+    border-bottom: none;
+    margin-top: 3px;
+  }
+`;
+
+export default (props) => {
+  const { authGet, authPatch } = useContext(AuthContext);
+  const { userId } = useParams();
+  const history = useHistory();
+  const [userData, setUserData] = useState(null);
+  const [roles, setRoles] = useState(null);
+  const [rolesUpdateSuccessful, setRolesUpdateSuccessful] = useState(undefined);
+  const rolesState = useContext(AuthContext).roles;
+  useEffect(async () => {
+    const resUser = await authGet(`/users/${userId}`);
+    setUserData(resUser.data);
+
+    let allRoles = rolesState;
+    if (resUser.data && allRoles) {
+      allRoles = allRoles.map((role) => ({
+        ...role,
+        isChecked: resUser.data.roles.includes(role.role),
+      }));
+    }
+    setRoles(allRoles);
+  }, []);
+
+  const goBack = () => {
+    history.goBack();
+  };
+
+  const saveRoles = () => {
+    setRolesUpdateSuccessful(undefined);
+
+    if (roles) {
+      const rolesToSave = roles
+        .filter((role) => role.isChecked)
+        .map((role) => role.role);
+
+      authPatch(`/users/${userData.id}`, {
+        roles: rolesToSave,
+      }).then((res) => {
+        setRolesUpdateSuccessful(res.status === 200);
+      });
+    }
+  };
+
+  const handleOnChange = (role) => {
+    const updatedCheckedState = roles.map((item) =>
+      item.role === role.role ? { ...item, isChecked: !item.isChecked } : item
+    );
+    setRoles(updatedCheckedState);
+  };
+
+  return (
+    <ContentPanel>
+      <h1>
+        <BackButton onClick={goBack}>
+          <FontAwesomeIcon icon={faChevronLeft} />
+        </BackButton>
+        <span
+          style={{
+            verticalAlign: 'top',
+            paddingTop: '9px',
+            display: 'inline-block',
+          }}
+        >
+          Лична информация
+        </span>
+      </h1>
+      <hr />
+
+      {!userData ? (
+        <Loading />
+      ) : (
+        <>
+          <h2>Профил</h2>
+          <TableStyle>
+            <tbody>
+              <tr>
+                <td>Имена</td>
+                <td>
+                  {userData.firstName} {userData.lastName}
+                </td>
+              </tr>
+              <tr>
+                <td>Организация</td>
+                <td>
+                  {userData.organization ? userData.organization.name : null}
+                </td>
+              </tr>
+              <tr>
+                <td>Ел. поща</td>
+                <td>{userData.email}</td>
+              </tr>
+              <tr>
+                <td>Телефон</td>
+                <td>{userData.phone}</td>
+              </tr>
+              <tr>
+                <td>Съгласие за съхранение на данни</td>
+                <td>{userData.hasAgreedToKeepData ? 'Да' : 'Не'}</td>
+              </tr>
+            </tbody>
+          </TableStyle>
+        </>
+      )}
+      <hr />
+      <h2>Роли</h2>
+      {!roles ? (
+        <Loading />
+      ) : (
+        <>
+          <ul style={{ padding: 0 }}>
+            <CheckboxList>
+              {roles.map((role, index) => {
+                return (
+                  <li key={index}>
+                    <div className="checkbox-list-item">
+                      <div>
+                        <input
+                          type="checkbox"
+                          id={`custom-checkbox-${index}`}
+                          name={role.roleLocalized}
+                          value={role.roleLocalized}
+                          checked={role.isChecked}
+                          onChange={() => handleOnChange(role)}
+                        />
+                        <label htmlFor={`custom-checkbox-${index}`}>
+                          {role.roleLocalized}
+                        </label>
+                      </div>
+                    </div>
+                  </li>
+                );
+              })}
+            </CheckboxList>
+          </ul>
+
+          <ButtonStyle onClick={saveRoles}>Запис</ButtonStyle>
+          {rolesUpdateSuccessful ===
+          undefined ? null : rolesUpdateSuccessful ? (
+            <p style={{ fontSize: '12px', color: 'green' }}>
+              Ролите бяха актуализирани успешно
+            </p>
+          ) : (
+            <p style={{ fontSize: '12px', color: 'red' }}>
+              Грешка при актуализацията на ролите (Опитайте отново)
+            </p>
+          )}
+        </>
+      )}
+    </ContentPanel>
+  );
+};
diff --git a/src/components/modules/admin/AdminFilter.js b/src/components/modules/admin/AdminFilter.js
new file mode 100644
index 0000000..c2f8d7f
--- /dev/null
+++ b/src/components/modules/admin/AdminFilter.js
@@ -0,0 +1,116 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { Link } from 'react-router-dom';
+
+import { AuthContext } from '../../App';
+
+import SendBy from '../filter_components/SendBy';
+import Roles from '../filter_components/Roles';
+import TextInput from '../filter_components/TextInput';
+
+import styled from 'styled-components';
+
+const FilterTable = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  row-gap: 24px;
+`;
+
+const ButtonStyle = styled.button`
+  background-color: #4892e1;
+  color: white;
+  border: none;
+  padding: 7px 13px;
+  font-size: 20px;
+  cursor: pointer;
+  font-weight: bold;
+  border-radius: 5px;
+  border-bottom: 3px solid #2a68aa;
+  margin-top: 0px;
+  width: 10rem;
+
+  &:hover {
+    background-color: #5da2ec;
+  }
+
+  &:active {
+    background-color: #1d5a9b;
+    border-bottom: none;
+    margin-top: 3px;
+  }
+`;
+
+export default (props) => {
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [email, setEmail] = useState('');
+  const [organization, setOrganization] = useState('');
+  const [role, setRole] = useState('');
+
+  let url = '';
+
+  let params = {
+    firstName: firstName,
+    lastName: lastName,
+    email: email,
+    organization: organization,
+    role: role,
+  };
+
+  for (const [key, value] of Object.entries(params)) {
+    if (value !== '00' && value !== '' && value) {
+      url += `&${key}=${value}`;
+    } else {
+      url.replace(`&${key}=${value}`, '');
+    }
+  }
+
+  useEffect(() => {}, [firstName, lastName, email, organization, role]);
+
+  const clearAll = () => {
+    setOrganization('');
+    setRole('');
+    setFirstName('');
+    setLastName('');
+    setEmail('');
+  };
+
+  return (
+    <>
+      <FilterTable>
+        <div>
+          Име: <br></br>
+          <TextInput textInput={firstName} setTextInput={setFirstName} />
+        </div>
+        <div>
+          Фамилия:<br></br>
+          <TextInput textInput={lastName} setTextInput={setLastName} />
+        </div>
+        <div>
+          Емейл: <br></br>
+          <TextInput textInput={email} setTextInput={setEmail} />
+        </div>
+
+        <div>
+          Организация: <br></br>
+          <SendBy
+            organization={organization}
+            setOrganization={setOrganization}
+          />
+        </div>
+        <div>
+          Роля: <br></br>
+          <Roles role={role} setRole={setRole} />
+        </div>
+        <div></div>
+        <Link to={`/users`}>
+          <ButtonStyle onClick={clearAll}>Изчисти</ButtonStyle>
+        </Link>
+        <div></div>
+
+        <Link to={`/users?${url}`}>
+          <ButtonStyle>Търси</ButtonStyle>
+        </Link>
+      </FilterTable>
+    </>
+  );
+};
diff --git a/src/components/modules/filter_components/Countries.js b/src/components/modules/filter_components/Countries.js
index 37473a5..74e1c07 100644
--- a/src/components/modules/filter_components/Countries.js
+++ b/src/components/modules/filter_components/Countries.js
@@ -1,26 +1,25 @@
-import React, { useContext } from "react";
-import { AuthContext } from "../../App";
+import React, { useContext } from 'react';
+import { AuthContext } from '../../App';
 
 export default (props) => {
-
   const countries = useContext(AuthContext).countries;
 
   //things to do when country is selected
   const optionHandler = (event) => {
-    var selectCountry = document.getElementById("selectCountry");
+    var selectCountry = document.getElementById('selectCountry');
     var selectedValue =
       selectCountry.options[selectCountry.selectedIndex].value;
 
     //sets the country code for the get request in the filter component
-    props.setCountry(selectedValue.split(",")[2]);
-    props.setSelectedCountry(event.target.value)
+    props.setCountry(selectedValue.split(',')[2]);
+    props.setSelectedCountry(event.target.value);
 
     //if isAbroad === 'true'
-    if (selectedValue.split(",")[1] === "true") {
-      props.setIsAbroad(true);  //disables MIR dropdown
+    if (selectedValue.split(',')[1] === 'true') {
+      props.setIsAbroad(true); //disables MIR dropdown
       props.setDisabled(false); //enables the town field
-      props.setMunicipalities([{name: 'Всички'}]); //sets the visible municipality in the dropdown
-      props.setRegions([{name: 'Всички'}]) //sets the visible region in the dropdown
+      props.setMunicipalities([{ name: 'Всички' }]); //sets the visible municipality in the dropdown
+      props.setRegions([{ name: 'Всички' }]); //sets the visible region in the dropdown
       props.setTown('00');
       props.setMunicipality('00');
       props.setCityRegion('00');
@@ -28,7 +27,7 @@ export default (props) => {
     } else {
       props.setElectionRegion('00');
       props.setIsAbroad(false); //enables the MIR dropdown
-      props.setDisabled(true);  //disables the town dropdown because it should be enabled when MIR is chosen
+      props.setDisabled(true); //disables the town dropdown because it should be enabled when MIR is chosen
       props.setMunicipality('00');
     }
   };
@@ -36,17 +35,25 @@ export default (props) => {
   const filters = countries
     .sort((a, b) => (a.code > b.code ? 1 : -1))
     .map(({ name, code, isAbroad }) => {
-      {/* to test if the removal of name from the array has any effect??? and If I can make that with key:value pairs */}
-      {/* e.g. value={[isAbroad: isAbroad, code: code]} */}
+      {
+        /* to test if the removal of name from the array has any effect??? and If I can make that with key:value pairs */
+      }
+      {
+        /* e.g. value={[isAbroad: isAbroad, code: code]} */
+      }
       return (
-        <option key={code} value={[name, isAbroad, code]}> 
+        <option key={code} value={[name, isAbroad, code]}>
           {name}
         </option>
       );
     });
 
   return (
-    <select value={props.selectedCountry} id="selectCountry" onChange={optionHandler}>
+    <select
+      value={props.selectedCountry}
+      id="selectCountry"
+      onChange={optionHandler}
+    >
       {filters}
     </select>
   );
diff --git a/src/components/modules/filter_components/MainFilter.js b/src/components/modules/filter_components/MainFilter.js
index 0533211..1835fb1 100644
--- a/src/components/modules/filter_components/MainFilter.js
+++ b/src/components/modules/filter_components/MainFilter.js
@@ -1,19 +1,19 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect } from 'react';
 
-import firebase from "firebase/app";
-import "firebase/auth";
+import firebase from 'firebase/app';
+import 'firebase/auth';
 
-import axios from "axios";
+import axios from 'axios';
 
-import SectionNumber from "../filters/SectionNumber";
+import TextInput from '../filters/TextInput';
 
-import Countries from "../filters/Countries";
-import MIRs from "../filters/MIRs";
-import Municipalities from "../filters/Municipalities";
-import Towns from "../filters/Towns";
-import Regions from "../filters/Regions";
+import Countries from '../filters/Countries';
+import MIRs from '../filters/MIRs';
+import Municipalities from '../filters/Municipalities';
+import Towns from '../filters/Towns';
+import Regions from '../filters/Regions';
 
-import styled from "styled-components";
+import styled from 'styled-components';
 
 const FilterlTable = styled.table`
   width: 100%;
@@ -52,22 +52,21 @@ const ButtonStyle = styled.button`
 `;
 
 export default (props) => {
-
   const [disabled, setDisabled] = useState(true); //sets callback function for disabling field
 
-  const [country, setCountry] = useState("00");
+  const [country, setCountry] = useState('00');
 
-  const [mirs, setMirs] = useState([]); //sets all MIRs in Bulgaria 
-  const [chosenMir, setChosenMir] = useState("00"); //gets the chosen MIR
+  const [mirs, setMirs] = useState([]); //sets all MIRs in Bulgaria
+  const [chosenMir, setChosenMir] = useState('00'); //gets the chosen MIR
 
   const [municipalities, setMunicipalities] = useState([]); //sets the municipalities in one MIR
-  const [chosenMunicipality, setChosenMunicipality] = useState("00"); //gets the chosen municipality
+  const [chosenMunicipality, setChosenMunicipality] = useState('00'); //gets the chosen municipality
 
   const [towns, setTowns] = useState([]); //sets all towns in one municipality
 
   const [regions, setRegions] = useState([]); //sets the election regions in one town
 
-  const [status, setStatus] = useState(""); 
+  const [status, setStatus] = useState('');
   const [isAbroad, setIsAbroad] = useState(false); //sets if country is Bulgaria or not
 
   const submitHandler = () => {
@@ -76,7 +75,7 @@ export default (props) => {
 
   const apiHost = () => {
     if (!process.env.API_HOST) {
-      return "https://d1tapi.dabulgaria.bg";
+      return 'https://d1tapi.dabulgaria.bg';
     } else {
       return process.env.API_HOST;
     }
@@ -95,8 +94,8 @@ export default (props) => {
             headers: { Authorization: `Bearer ${idToken}` },
           });
 
-          //if country is NOT Bulgaria: gets all the cities in the foreign country 
-          if (country !== "00") {
+          //if country is NOT Bulgaria: gets all the cities in the foreign country
+          if (country !== '00') {
             const res2 = await axios.get(
               `${apiHost()}/towns?country=${country}`,
               {
@@ -127,7 +126,7 @@ export default (props) => {
       <tbody>
         <tr>
           <td>
-            N на секция:<br></br> <SectionNumber />
+            N на секция:<br></br> <TextInput />
           </td>
           <td>
             Произход:<br></br> <Origins />
diff --git a/src/components/modules/filter_components/Municipalities.js b/src/components/modules/filter_components/Municipalities.js
index 6de3015..dea87fb 100644
--- a/src/components/modules/filter_components/Municipalities.js
+++ b/src/components/modules/filter_components/Municipalities.js
@@ -1,11 +1,11 @@
-import React from "react";
+import React from 'react';
 
 export default (props) => {
   let municipalities = [];
 
   if (!props.isAbroad) {
     municipalities = [
-      { code: "00", name: "Всички", isAbroad: false },
+      { code: '00', name: 'Всички', isAbroad: false },
       ...props.municipalities,
     ];
   } else {
@@ -13,13 +13,11 @@ export default (props) => {
   }
 
   const municipalityHandler = (event) => {
+    props.setSelectedMunicipality(event.target.value);
 
-    props.setSelectedMunicipality(event.target.value)
-    
-    var selectMunicipality = document.getElementById("selectMunicipality");
+    var selectMunicipality = document.getElementById('selectMunicipality');
     var selectedValue =
       selectMunicipality.options[selectMunicipality.selectedIndex].value;
-
     municipalities.map(({ code, name }) => {
       if (selectedValue === name) {
         props.setMunicipality(code);
@@ -28,9 +26,9 @@ export default (props) => {
   };
   const filters = municipalities
     .sort((a, b) => (a.code > b.code ? 1 : -1))
-    .map(({ code, name }) => {
+    .map(({ code, name }, idx) => {
       return (
-        <option key={code} value={name}>
+        <option key={idx} value={name}>
           {name}
         </option>
       );
diff --git a/src/components/modules/filter_components/Regions.js b/src/components/modules/filter_components/Regions.js
index e016523..ba55fd6 100644
--- a/src/components/modules/filter_components/Regions.js
+++ b/src/components/modules/filter_components/Regions.js
@@ -1,11 +1,13 @@
-import React from "react";
+import React from 'react';
 
 export default (props) => {
-
   let regions = [];
 
   if (!props.isAbroad) {
-    regions = [{ code: "00", name: "Всички", isAbroad: false }, ...props.regions];
+    regions = [
+      { code: '00', name: 'Всички', isAbroad: false },
+      ...props.regions,
+    ];
   } else {
     regions = props.regions;
   }
@@ -14,13 +16,21 @@ export default (props) => {
     props.setCityRegion(event.target.value);
   };
 
-  const filters = regions.map(({ name, code }) => {
+  const filters = regions.map(({ name, code }, idx) => {
     return (
-      <option key={code} value={code}>
+      <option key={idx} value={code}>
         {name}
       </option>
     );
   });
 
-  return <select value={props.cityRegion} disabled={props.isAbroad || props.disabled} onChange={changeHandler}>{filters}</select>;
+  return (
+    <select
+      value={props.cityRegion}
+      disabled={props.isAbroad || props.disabled}
+      onChange={changeHandler}
+    >
+      {filters}
+    </select>
+  );
 };
diff --git a/src/components/modules/filter_components/Roles.js b/src/components/modules/filter_components/Roles.js
new file mode 100644
index 0000000..0afb00f
--- /dev/null
+++ b/src/components/modules/filter_components/Roles.js
@@ -0,0 +1,28 @@
+import React, { useContext } from 'react';
+import { AuthContext } from '../../App';
+
+export default (props) => {
+  const roles = useContext(AuthContext).roles;
+
+  const { setRole, role } = props;
+
+  const allRoles = [{ role: '00', roleLocalized: 'Всички' }, ...roles];
+
+  const changeHandler = (event) => {
+    setRole(event.target.value);
+  };
+
+  const filters = allRoles.map((role, idx) => {
+    return (
+      <option key={idx} value={role.role}>
+        {role.roleLocalized}
+      </option>
+    );
+  });
+
+  return (
+    <select value={role} onChange={changeHandler}>
+      {filters}
+    </select>
+  );
+};
diff --git a/src/components/modules/filter_components/SectionNumber.js b/src/components/modules/filter_components/TextInput.js
similarity index 55%
rename from src/components/modules/filter_components/SectionNumber.js
rename to src/components/modules/filter_components/TextInput.js
index 4d3dc23..179bb78 100644
--- a/src/components/modules/filter_components/SectionNumber.js
+++ b/src/components/modules/filter_components/TextInput.js
@@ -1,6 +1,6 @@
-import React from "react";
+import React from 'react';
 
-import styled from "styled-components";
+import styled from 'styled-components';
 
 const InputField = styled.input`
   background: white;
@@ -12,14 +12,12 @@ const InputField = styled.input`
 `;
 
 export default (props) => {
+  const { setTextInput } = props;
 
-  const { setSection } = props;
-  
   const changeHandler = (event) => {
     event.preventDefault();
-    setSection(event.target.value);
+    setTextInput(event.target.value);
   };
-  
 
-  return <InputField value={props.section} onChange={changeHandler}/>;
+  return <InputField value={props.textInput} onChange={changeHandler} />;
 };
diff --git a/src/components/modules/filter_components/Towns.js b/src/components/modules/filter_components/Towns.js
index 98dd0dd..3e78b30 100644
--- a/src/components/modules/filter_components/Towns.js
+++ b/src/components/modules/filter_components/Towns.js
@@ -1,21 +1,21 @@
-import React from "react";
+import React from 'react';
 
 export default (props) => {
   let towns = [];
 
   if (!props.isAbroad) {
-    towns = [{ id: "00", name: "Всички", isAbroad: false }, ...props.towns];
+    towns = [{ id: '00', name: 'Всички', isAbroad: false }, ...props.towns];
   } else {
-    towns = [{ id: "00", name: "Всички", isAbroad: true }, ...props.towns];
+    towns = [{ id: '00', name: 'Всички', isAbroad: true }, ...props.towns];
   }
 
   const townHandler = (event) => {
     props.setSelectedTown(event.target.value);
 
-    var selectTown = document.getElementById("selectTown");
+    var selectTown = document.getElementById('selectTown');
     var selectedValue = selectTown.options[selectTown.selectedIndex].value;
     if (!props.isAbroad) {
-      if (selectedValue !== "Всички") {
+      if (selectedValue !== 'Всички') {
         towns.map(({ name, cityRegions, id }) => {
           if (selectedValue === name) {
             props.setRegions(cityRegions);
@@ -23,10 +23,10 @@ export default (props) => {
           }
         });
       } else {
-        props.setTown("");
+        props.setTown('');
       }
     } else {
-      props.setRegions([{ name: "Всички", code: "00" }]);
+      props.setRegions([{ name: 'Всички', code: '00' }]);
       towns
         .sort((a, b) => (a.id > b.id ? 1 : -1))
         .map(({ name, id }) => {
@@ -49,7 +49,6 @@ export default (props) => {
 
   return (
     <select
-      defaultValue={"Всички"}
       value={props.selectedTown}
       id="selectTown"
       onChange={townHandler}
diff --git a/src/components/modules/layout/Navigation.js b/src/components/modules/layout/Navigation.js
index 50a7d5f..89b8388 100644
--- a/src/components/modules/layout/Navigation.js
+++ b/src/components/modules/layout/Navigation.js
@@ -2,113 +2,118 @@ import React, { useContext } from 'react';
 
 import { Link } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { 
-    faFileInvoice, faIdBadge, faUsersCog, 
-    faNewspaper, faSatelliteDish, faSignOutAlt,
-    faCheckSquare,
-    faPersonBooth
+import {
+  faFileInvoice,
+  faIdBadge,
+  faUsersCog,
+  faNewspaper,
+  faSatelliteDish,
+  faSignOutAlt,
+  faCheckSquare,
+  faPersonBooth,
 } from '@fortawesome/free-solid-svg-icons';
 
 import styled from 'styled-components';
 import { AuthContext } from '../../App';
 
 const NavigationStyle = styled.nav`
-    height: 100%;
-    width: 100%;
-    background-color: rgb(56, 222, 203);
-    overflow: hidden;
-    color: white;
+  height: 100%;
+  width: 100%;
+  background-color: rgb(56, 222, 203);
+  overflow: hidden;
+  color: white;
 `;
 
 const NavTitle = styled.div`
-    padding: 10px;
-    width: 100%;
-    box-sizing: border-box;
+  padding: 10px;
+  width: 100%;
+  box-sizing: border-box;
 
-    img { width: 100%; }
-    h1 { margin: 0; }
+  img {
+    width: 100%;
+  }
+  h1 {
+    margin: 0;
+  }
 `;
 
 const NavLinks = styled.div`
-    background-color: rgb(40, 174, 159);
-    padding: 50px 0;
+  background-color: rgb(40, 174, 159);
+  padding: 50px 0;
 `;
 
 const NavLink = styled(Link)`
-    color: white;
-    text-decoration: none;
-    font-size: 18px;
-    width: 100%;
-    display: block;
-    padding: 5px 10px;
-    box-sizing: border-box;
+  color: white;
+  text-decoration: none;
+  font-size: 18px;
+  width: 100%;
+  display: block;
+  padding: 5px 10px;
+  box-sizing: border-box;
 
-    &:hover {
-        background-color: rgb(61, 191, 176);
-    }
+  &:hover {
+    background-color: rgb(61, 191, 176);
+  }
 `;
 
 const NavFooter = styled.div`
-    width: 100%;
-    position: absolute;
-    bottom: 0;
-    font-weight: bold;
-    text-align: center;
-    padding: 15px 5px;
-    box-sizing: border-box;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  font-weight: bold;
+  text-align: center;
+  padding: 15px 5px;
+  box-sizing: border-box;
 `;
 
-export default props => {
-    const { logOut, user } = useContext(AuthContext);
+export default (props) => {
+  const { logOut, user } = useContext(AuthContext);
 
-    const requireRoles = roles => {
-        for(const role of roles) {
-            if(user.roles.includes(role))
-                return true;
-        }
-        return false;
-    };
+  const requireRoles = (roles) => {
+    for (const role of roles) {
+      if (user.roles.includes(role)) return true;
+    }
+    return false;
+  };
 
-    return(
-        <NavigationStyle>
-            <NavTitle>
-                <img src='/logo_horizontal_white.png'/>
-            </NavTitle>
-            <NavLinks>
-                <NavLink to='/profile'>
-                    <FontAwesomeIcon icon={faIdBadge}/> Профил
-                </NavLink>
-                { !requireRoles(['validator', 'external-validator', 'admin'])? null :
-                    <NavLink to='/protocols/process'>    
-                        <FontAwesomeIcon icon={faCheckSquare}/> Проверявай
-                    </NavLink>
-                }
-                { !requireRoles(['admin'])? null :
-                    <NavLink to='/protocols'>    
-                        <FontAwesomeIcon icon={faFileInvoice}/> Протоколи
-                    </NavLink>
-                }
-                { !requireRoles(['lawyer', 'admin'])? null :
-                    <NavLink to='/violations'>
-                        <FontAwesomeIcon icon={faSatelliteDish}/> Сигнали
-                    </NavLink>
-                }
-                {/* { !requireRoles(['admin'])? null :
-                    <NavLink to='/users'>
-                        <FontAwesomeIcon icon={faUsersCog}/> Администрация
-                    </NavLink>
-                } */}
-                {/*
+  return (
+    <NavigationStyle>
+      <NavTitle>
+        <img src="/logo_horizontal_white.png" />
+      </NavTitle>
+      <NavLinks>
+        <NavLink to="/profile">
+          <FontAwesomeIcon icon={faIdBadge} /> Профил
+        </NavLink>
+        {!requireRoles(['validator', 'external-validator', 'admin']) ? null : (
+          <NavLink to="/protocols/process">
+            <FontAwesomeIcon icon={faCheckSquare} /> Проверявай
+          </NavLink>
+        )}
+        {!requireRoles(['admin']) ? null : (
+          <NavLink to="/protocols">
+            <FontAwesomeIcon icon={faFileInvoice} /> Протоколи
+          </NavLink>
+        )}
+        {!requireRoles(['lawyer', 'admin']) ? null : (
+          <NavLink to="/violations">
+            <FontAwesomeIcon icon={faSatelliteDish} /> Сигнали
+          </NavLink>
+        )}
+        {!requireRoles(['admin']) ? null : (
+          <NavLink to="/users">
+            <FontAwesomeIcon icon={faUsersCog} /> Администрация
+          </NavLink>
+        )}
+        {/*
                 <NavLink to='/posts'>
                     <FontAwesomeIcon icon={faNewspaper}/> Статии
                 </NavLink>*/}
-                <NavLink to='' onClick={logOut}>
-                    <FontAwesomeIcon icon={faSignOutAlt}/> Изход
-                </NavLink>
-            </NavLinks>
-            <NavFooter>
-                „Демократична България - обединение“ © 2021
-            </NavFooter>
-        </NavigationStyle>
-    )
+        <NavLink to="/" onClick={logOut}>
+          <FontAwesomeIcon icon={faSignOutAlt} /> Изход
+        </NavLink>
+      </NavLinks>
+      <NavFooter>„Демократична България - обединение“ © 2021</NavFooter>
+    </NavigationStyle>
+  );
 };
diff --git a/src/components/modules/protocols/ProtocolDetails.js b/src/components/modules/protocols/ProtocolDetails.js
index 038dd0c..d22e3c2 100644
--- a/src/components/modules/protocols/ProtocolDetails.js
+++ b/src/components/modules/protocols/ProtocolDetails.js
@@ -5,103 +5,118 @@ import { ContentPanel } from '../Modules';
 import { useHistory, useParams } from 'react-router-dom';
 
 import { AuthContext } from '../../App';
-import ImageGallery from '../../ImageGallery';
+import ImageGallery from '../../utils/ImageGallery';
 import Loading from '../../layout/Loading';
 import { TableStyle } from '../Profile';
 
-export default props => {
-    const { authGet } = useContext(AuthContext);
-    const { protocol } = useParams();
-    const history = useHistory();
-    const [data, setData] = useState(null);
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
+import { BackButton } from '../violations/ViolationDetails';
 
-    useEffect(() => {
-        authGet(`/protocols/${protocol}`).then(res => {
-            setData(res.data);
-        });
-    }, []);
+export default (props) => {
+  const { authGet } = useContext(AuthContext);
+  const { protocol } = useParams();
+  const history = useHistory();
+  const [data, setData] = useState(null);
 
-    const goBack = () => {
-        history.goBack()
-    }
+  useEffect(() => {
+    authGet(`/protocols/${protocol}`).then((res) => {
+      setData(res.data);
+    });
+  }, []);
 
-    return(
-        <ContentPanel>
-            <button onClick={goBack}>Назад</button>
-            <h1>Протокол {protocol}</h1>
-            <hr/>
-            {
-                !data? <Loading/> :
-                    <div>
-                        <h1>Секция</h1>
-                        <TableStyle>
-                            <tbody>
-                                <tr>
-                                    <td>Номер</td>
-                                    <td>{data.section.id}</td>
-                                </tr>
-                                <tr>
-                                    <td>Адрес</td>
-                                    <td>{data.section.place}</td>
-                                </tr>
-                            </tbody>
-                        </TableStyle>
-                        <hr/>
-                        <h1>Протокол</h1>
-                        <TableStyle>
-                            <tbody>
-                                <tr>
-                                    <td>Изпратен от (организация)</td>
-                                    <td>{data.author.organization.name}</td>
-                                </tr>
-                                {
-                                    data.assignees.map(assignee => 
-                                        <tr>
-                                            <td>Проверява се от</td>
-                                            <td>{assignee.firstName} {assignee.lastName}</td>
-                                        </tr>
-                                    )
-                                }
-                                <tr>
-                                    <td>Действителни гласове</td>
-                                    <td>{data.results.validVotesCount}</td>
-                                </tr>
-                                <tr>
-                                    <td>Недействителни гласове</td>
-                                    <td>{data.results.invalidVotesCount}</td>
-                                </tr>
-                                <tr>
-                                    <td>Машинни гласове</td>
-                                    <td>{data.results.machineVotesCount}</td>
-                                </tr>
-                            </tbody>
-                        </TableStyle>
-                        <hr/>
-                        <h1>Резултати</h1>
-                        <TableStyle>
-                            <tbody>
-                                {
-                                    data.results.results.map(result => 
-                                        <tr>
-                                            <td>{result.party.name}</td>
-                                            <td>{result.validVotesCount}</td>
-                                            <td>{result.invalidVotesCount}</td>
-                                            <td>{result.machineVotesCount}</td>
-                                            <td>{result.nonMachineVotesCount}</td>
-                                        </tr>
-                                    )
-                                }
-                            </tbody>
-                        </TableStyle>
-                        <hr/>
-                        <h1>Снимки</h1>
-                        <ImageGallery 
-                            items={data.pictures.map(picture => ({
-                                original: picture.url
-                            }))}
-                        />
-                    </div>
-            }
-        </ContentPanel>
-    );
+  const goBack = () => {
+    history.goBack();
+  };
+
+  return (
+    <ContentPanel>
+      <h1>
+        <BackButton onClick={goBack}>
+          <FontAwesomeIcon icon={faChevronLeft} />
+        </BackButton>
+        <span
+          style={{
+            verticalAlign: 'top',
+            paddingTop: '9px',
+            display: 'inline-block',
+          }}
+        >
+          Протокол {protocol}
+        </span>
+      </h1>
+      <hr />
+      {!data ? (
+        <Loading />
+      ) : (
+        <div>
+          <h2>Секция</h2>
+          <TableStyle>
+            <tbody>
+              <tr>
+                <td>Номер</td>
+                <td>{data.section.id}</td>
+              </tr>
+              <tr>
+                <td>Адрес</td>
+                <td>{data.section.place}</td>
+              </tr>
+            </tbody>
+          </TableStyle>
+          <hr />
+          <h2>Протокол</h2>
+          <TableStyle>
+            <tbody>
+              <tr>
+                <td>Изпратен от (организация)</td>
+                <td>{data.author.organization.name}</td>
+              </tr>
+              {data.assignees.map((assignee, idx) => (
+                <tr key={idx}>
+                  <td>Проверява се от</td>
+                  <td>
+                    {assignee.firstName} {assignee.lastName}
+                  </td>
+                </tr>
+              ))}
+              <tr>
+                <td>Действителни гласове</td>
+                <td>{data.results.validVotesCount}</td>
+              </tr>
+              <tr>
+                <td>Недействителни гласове</td>
+                <td>{data.results.invalidVotesCount}</td>
+              </tr>
+              <tr>
+                <td>Машинни гласове</td>
+                <td>{data.results.machineVotesCount}</td>
+              </tr>
+            </tbody>
+          </TableStyle>
+          <hr />
+          <h2>Резултати</h2>
+          <TableStyle>
+            <tbody>
+              {data.results.results.map((result, idx) => (
+                <tr key={idx}>
+                  <td>{result.party.name}</td>
+                  <td>{result.validVotesCount}</td>
+                  <td>{result.invalidVotesCount}</td>
+                  <td>{result.machineVotesCount}</td>
+                  <td>{result.nonMachineVotesCount}</td>
+                </tr>
+              ))}
+            </tbody>
+          </TableStyle>
+          <hr />
+          <h2>Снимки</h2>
+          <ImageGallery
+            items={data.pictures.map((picture) => ({
+              original: picture.url,
+            }))}
+          />
+        </div>
+      )}
+    </ContentPanel>
+  );
 };
diff --git a/src/components/modules/protocols/ProtocolFilter.js b/src/components/modules/protocols/ProtocolFilter.js
index eb1469d..1a10ff1 100644
--- a/src/components/modules/protocols/ProtocolFilter.js
+++ b/src/components/modules/protocols/ProtocolFilter.js
@@ -1,22 +1,22 @@
-import React, { useState, useEffect, useContext } from "react";
-import { Link } from "react-router-dom";
+import React, { useState, useEffect, useContext } from 'react';
+import { Link } from 'react-router-dom';
 
-import { AuthContext } from "../../App";
+import { AuthContext } from '../../App';
 
-import Statuses from "../filter_components/Statuses";
-import SectionNumber from "../filter_components/SectionNumber";
-import Origins from "../filter_components/Origins";
-import SendBy from "../filter_components/SendBy";
+import Statuses from '../filter_components/Statuses';
+import TextInput from '../filter_components/TextInput';
+import Origins from '../filter_components/Origins';
+import SendBy from '../filter_components/SendBy';
 
-import Countries from "../filter_components/Countries";
-import MIRs from "../filter_components/MIRs";
-import Municipalities from "../filter_components/Municipalities";
-import Towns from "../filter_components/Towns";
-import Regions from "../filter_components/Regions";
+import Countries from '../filter_components/Countries';
+import MIRs from '../filter_components/MIRs';
+import Municipalities from '../filter_components/Municipalities';
+import Towns from '../filter_components/Towns';
+import Regions from '../filter_components/Regions';
 
-import styled from "styled-components";
+import styled from 'styled-components';
 
-const FilterlTable = styled.table`
+const FilterTable = styled.table`
   width: 100%;
   border-collapse: collapse;
 
@@ -55,39 +55,39 @@ const ButtonStyle = styled.button`
 export default (props) => {
   const { authGet } = useContext(AuthContext);
 
-  const [section, setSection] = useState("");
+  const [section, setSection] = useState('');
 
-  const [organization, setOrganization] = useState("");
+  const [organization, setOrganization] = useState('');
 
-  const [country, setCountry] = useState("00");
-  const [selectedCountry, setSelectedCountry] = useState("");
+  const [country, setCountry] = useState('00');
+  const [selectedCountry, setSelectedCountry] = useState('');
 
   const [disabled, setDisabled] = useState(true); //sets callback function for disabling field
 
   const [mirs, setMirs] = useState([]); //sets all MIRs in Bulgaria
-  const [electionRegion, setElectionRegion] = useState("00");
-  const [selectedElectionRegion, setSelectedElectionRegion] = useState("");
+  const [electionRegion, setElectionRegion] = useState('00');
+  const [selectedElectionRegion, setSelectedElectionRegion] = useState('');
 
   const [municipalities, setMunicipalities] = useState([]); //sets the municipalities in one MIR
-  const [municipality, setMunicipality] = useState("00"); //gets the chosen municipality
-  const [selectedMunicipality, setSelectedMunicipality] = useState("");
+  const [municipality, setMunicipality] = useState('00'); //gets the chosen municipality
+  const [selectedMunicipality, setSelectedMunicipality] = useState('');
 
   const [towns, setTowns] = useState([]); //sets all towns in one municipality
-  const [town, setTown] = useState("00");
-  const [selectedTown, setSelectedTown] = useState("");
+  const [town, setTown] = useState('00');
+  const [selectedTown, setSelectedTown] = useState('');
 
   const [regions, setRegions] = useState([]); //sets the election regions in one town
-  const [cityRegion, setCityRegion] = useState("00");
+  const [cityRegion, setCityRegion] = useState('00');
 
   const [statuses, setStatuses] = useState([]);
-  const [status, setStatus] = useState("");
+  const [status, setStatus] = useState('');
 
   const [origins, setOrigins] = useState([]);
-  const [origin, setOrigin] = useState("");
+  const [origin, setOrigin] = useState('');
 
   const [isAbroad, setIsAbroad] = useState(false); //sets if country is Bulgaria or not
 
-  let url = "";
+  let url = '';
 
   let params = {
     country: country,
@@ -102,26 +102,26 @@ export default (props) => {
   };
 
   for (const [key, value] of Object.entries(params)) {
-    if (value !== "00" && value !== "" && value) {
+    if (value !== '00' && value !== '' && value) {
       url += `&${key}=${value}`;
     } else {
-      url.replace(`&${key}=${value}`, "");
+      url.replace(`&${key}=${value}`, '');
     }
   }
 
   useEffect(async () => {
     //gets all the MIRs
-    const resElectionRegions = await authGet("/election_regions");
+    const resElectionRegions = await authGet('/election_regions');
 
-    const resStatuses = await authGet("/protocols/statuses");
+    const resStatuses = await authGet('/protocols/statuses');
     setStatuses(resStatuses.data);
 
-    const resOrigins = await authGet("/protocols/origins");
+    const resOrigins = await authGet('/protocols/origins');
     setOrigins(resOrigins.data);
 
     //if country is NOT Bulgaria: gets all the cities in the foreign country
-    if (country !== "00") {
-      setElectionRegion("32");
+    if (country !== '00') {
+      setElectionRegion('32');
 
       const resForeignTowns = await authGet(`/towns?country=${country}`);
       //sets the cities in the foreign country and sets MIR to the last one which is "Abroad"
@@ -139,37 +139,37 @@ export default (props) => {
   }, [country, municipality, electionRegion, town]);
 
   const clearAll = () => {
-    setOrganization("");
-    setOrigin("");
-    setStatus("");
-    setSelectedCountry("");
-    setCountry("00");
-    setSelectedElectionRegion("");
+    setOrganization('');
+    setOrigin('');
+    setStatus('');
+    setSelectedCountry('');
+    setCountry('00');
+    setSelectedElectionRegion('');
     setIsAbroad(false);
     setDisabled(true);
-    setSelectedMunicipality("Всички");
-    setSelectedTown("Всички");
-    setCityRegion("");
-    setMunicipality("00");
-    setElectionRegion("00");
-    setTown("");
-    setSection("");
+    setSelectedMunicipality('Всички');
+    setSelectedTown('Всички');
+    setCityRegion('');
+    setMunicipality('00');
+    setElectionRegion('00');
+    setTown('');
+    setSection('');
   };
 
   return (
-    <FilterlTable>
+    <FilterTable>
       <tbody>
         <tr>
           <td>
-            N на секция:<br></br>{" "}
-            <SectionNumber section={section} setSection={setSection} />
+            N на секция:<br></br>{' '}
+            <TextInput textInput={section} setTextInput={setSection} />
           </td>
           <td>
-            Произход:<br></br>{" "}
+            Произход:<br></br>{' '}
             <Origins origin={origin} origins={origins} setOrigin={setOrigin} />
           </td>
           <td>
-            Подаден от:<br></br>{" "}
+            Подаден от:<br></br>{' '}
             <SendBy
               organization={organization}
               setOrganization={setOrganization}
@@ -270,6 +270,6 @@ export default (props) => {
           </td>
         </tr>
       </tbody>
-    </FilterlTable>
+    </FilterTable>
   );
 };
diff --git a/src/components/modules/protocols/ProtocolsHome.js b/src/components/modules/protocols/ProtocolsHome.js
index 274b97a..0f28985 100644
--- a/src/components/modules/protocols/ProtocolsHome.js
+++ b/src/components/modules/protocols/ProtocolsHome.js
@@ -1,25 +1,25 @@
-import React, { useEffect, useContext, useState } from "react";
+import React, { useEffect, useContext, useState } from 'react';
 
-import { Link, useLocation, useHistory } from "react-router-dom";
+import { Link, useLocation, useHistory } from 'react-router-dom';
 
-import { AuthContext } from "../../App";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AuthContext } from '../../App';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faChevronLeft,
   faChevronRight,
   faFastForward,
   faFastBackward,
-} from "@fortawesome/free-solid-svg-icons";
+} from '@fortawesome/free-solid-svg-icons';
 
-import styled from "styled-components";
-import Loading from "../../layout/Loading";
+import styled from 'styled-components';
+import Loading from '../../layout/Loading';
 
-import ProtocolFilter from "./ProtocolFilter";
+import ProtocolFilter from './ProtocolFilter';
 
-import firebase from "firebase/app";
-import "firebase/auth";
+import firebase from 'firebase/app';
+import 'firebase/auth';
 
-import axios from "axios";
+import axios from 'axios';
 
 const TableViewContainer = styled.div`
   padding: 40px;
@@ -97,24 +97,23 @@ export default (props) => {
   const history = useHistory();
 
   useEffect(() => {
-    let url = "/protocols";
-
-    const page = query.get("page");
-    const limit = query.get("limit");
-    const country = query.get("country");
-    const electionRegion = query.get("electionRegion");
-    const assignee = query.get("assignee");
-    const section = query.get("section");
-    const municipality = query.get("municipality");
-    const town = query.get("town");
-    const cityRegion = query.get("cityRegion");
-    const status = query.get("status");
-    const organization = query.get("organization");
-    const origin = query.get("origin");
+    let url = '/protocols';
+
+    const page = query.get('page');
+    // const limit = query.get('limit');
+    const country = query.get('country');
+    const electionRegion = query.get('electionRegion');
+    const assignee = query.get('assignee');
+    const section = query.get('section');
+    const municipality = query.get('municipality');
+    const town = query.get('town');
+    const cityRegion = query.get('cityRegion');
+    const status = query.get('status');
+    const organization = query.get('organization');
+    const origin = query.get('origin');
 
     if (
       page ||
-      limit ||
       country ||
       electionRegion ||
       assignee ||
@@ -125,8 +124,9 @@ export default (props) => {
       status ||
       organization ||
       origin
-    ) url += "?";
-    
+    )
+      url += '?';
+
     if (country) url += `country=${country}`;
     if (electionRegion) url += `&electionRegion=${electionRegion}`;
     if (municipality) url += `&municipality=${municipality}`;
@@ -138,7 +138,7 @@ export default (props) => {
     if (organization) url += `&organization=${organization}`;
     if (origin) url += `&origin=${origin}`;
     if (page) url += `page=${page}`;
-    if (limit) url += `limit=${limit}`;
+    // if (limit) url += `limit=${limit}`;
 
     setLoading(true);
     authGet(url).then((res) => {
@@ -146,50 +146,60 @@ export default (props) => {
       setData(res.data);
     });
   }, [
-    query.get("page"),
-    query.get("country"),
-    query.get("electionRegion"),
-    query.get("assignee"),
-    query.get("section"),
-    query.get("municipality"),
-    query.get("town"),
-    query.get("cityRegion"),
-    query.get("status"),
-    query.get("organization"),
-    query.get("origin"),
+    query.get('page'),
+    query.get('country'),
+    query.get('electionRegion'),
+    query.get('assignee'),
+    query.get('section'),
+    query.get('municipality'),
+    query.get('town'),
+    query.get('cityRegion'),
+    query.get('status'),
+    query.get('organization'),
+    query.get('origin'),
   ]);
 
   const origin = (apiOrigin) => {
     switch (apiOrigin) {
-      case "ti-broish":
-        return "Ти Броиш";
+      case 'ti-broish':
+        return 'Ти Броиш';
       default:
         return apiOrigin;
     }
   };
-  
+
   const status = (apiStatus) => {
     switch (apiStatus) {
-      case "received":
+      case 'received':
         return (
-          <ProtocolStatus style={{ color: "#6c6cff" }}>Получен</ProtocolStatus>
+          <ProtocolStatus style={{ color: '#6c6cff' }}>Получен</ProtocolStatus>
         );
-      case "rejected":
+      case 'rejected':
         return (
-          <ProtocolStatus style={{ color: "#ff3939" }}>
+          <ProtocolStatus style={{ color: '#ff3939' }}>
             Отхвърлен
           </ProtocolStatus>
         );
-      case "approved":
+      case 'approved':
         return (
-          <ProtocolStatus style={{ color: "#46df00" }}>Одобрен</ProtocolStatus>
+          <ProtocolStatus style={{ color: '#46df00' }}>Одобрен</ProtocolStatus>
         );
-      case "replaced":
+      case 'replaced':
         return (
-          <ProtocolStatus style={{ color: "#ecd40e" }}>
+          <ProtocolStatus style={{ color: '#ecd40e' }}>
             Редактиран
           </ProtocolStatus>
         );
+      case 'published':
+        return (
+          <ProtocolStatus style={{ color: '#00bcd4' }}>
+            Публикуван
+          </ProtocolStatus>
+        );
+      case 'ready':
+        return (
+          <ProtocolStatus style={{ color: '#009688' }}>Готов</ProtocolStatus>
+        );
       default:
         return apiStatus;
     }
@@ -203,26 +213,26 @@ export default (props) => {
 
     return (
       <PaginationLinks>
-        <Link className={firstAvail ? "" : "disabled"} to={data.links.first}>
+        <Link className={firstAvail ? '' : 'disabled'} to={data.links.first}>
           <FontAwesomeIcon icon={faFastBackward} /> Първа
         </Link>
-        <Link className={prevAvail ? "" : "disabled"} to={data.links.previous}>
+        <Link className={prevAvail ? '' : 'disabled'} to={data.links.previous}>
           <FontAwesomeIcon icon={faChevronLeft} /> Предишна
         </Link>
         <div
           style={{
-            margin: "0 5px",
-            display: "inline-block",
-            color: "#444",
-            width: "60px",
+            margin: '0 5px',
+            display: 'inline-block',
+            color: '#444',
+            width: '60px',
           }}
         >
           {data.meta.currentPage} / {data.meta.totalPages}
         </div>
-        <Link className={nextAvail ? "" : "disabled"} to={data.links.next}>
+        <Link className={nextAvail ? '' : 'disabled'} to={data.links.next}>
           Следваща <FontAwesomeIcon icon={faChevronRight} />
         </Link>
-        <Link className={lastAvail ? "" : "disabled"} to={data.links.last}>
+        <Link className={lastAvail ? '' : 'disabled'} to={data.links.last}>
           Последна <FontAwesomeIcon icon={faFastForward} />
         </Link>
       </PaginationLinks>
@@ -234,50 +244,48 @@ export default (props) => {
   };
 
   return (
-    <>
-      <TableViewContainer>
-        <h1>Протоколи</h1>
-        <ProtocolFilter/>
-        <hr />
-        {!data ? (
-          <Loading />
-        ) : (
-          [
-            renderLinks(),
-            <ProtocolTable>
-              <thead>
-                <tr key={'header'}>
-                  <th>№ на секция</th>
-                  <th>Произход</th>
-                  <th>Адрес</th>
-                  <th>Статус</th>
+    <TableViewContainer>
+      <h1>Протоколи</h1>
+      <ProtocolFilter />
+      <hr />
+      {!data ? (
+        <Loading />
+      ) : (
+        <>
+          {renderLinks()}
+          <ProtocolTable>
+            <thead>
+              <tr>
+                <th>№ на секция</th>
+                <th>Произход</th>
+                <th>Адрес</th>
+                <th>Статут</th>
+              </tr>
+            </thead>
+            <tbody>
+              {loading ? (
+                <tr>
+                  <td colSpan="4">
+                    <Loading />
+                  </td>
                 </tr>
-              </thead>
-              <tbody>
-                {loading ? (
-                  <tr key={'loading'}>
-                    <td colSpan="4">
-                      <Loading />
+              ) : (
+                data.items.map((protocol, i) => (
+                  <tr key={i} onClick={() => openProtocol(protocol.id)}>
+                    <td style={{ textAlign: 'right' }}>
+                      {protocol.section.id}
                     </td>
+                    <td>{origin(protocol.origin)}</td>
+                    <td>{protocol.section.place}</td>
+                    <td>{status(protocol.status)}</td>
                   </tr>
-                ) : (
-                  data.items.map((protocol, i) => (
-                    <tr key={i} onClick={() => openProtocol(protocol.id)}>
-                      <td style={{ textAlign: "right" }}>
-                        {protocol.section.id}
-                      </td>
-                      <td>{origin(protocol.origin)}</td>
-                      <td>{protocol.section.place}</td>
-                      <td>{status(protocol.status)}</td>
-                    </tr>
-                  ))
-                )}
-              </tbody>
-            </ProtocolTable>,
-            renderLinks(),
-          ]
-        )}
-      </TableViewContainer>
-    </>
+                ))
+              )}
+            </tbody>
+          </ProtocolTable>
+          {renderLinks()}
+        </>
+      )}
+    </TableViewContainer>
   );
 };
diff --git a/src/components/modules/violations/Comment.js b/src/components/modules/violations/Comment.js
index 37d3b30..6c3bf84 100644
--- a/src/components/modules/violations/Comment.js
+++ b/src/components/modules/violations/Comment.js
@@ -2,59 +2,66 @@ import React from 'react';
 
 import styled from 'styled-components';
 
-import { formatTime, formatDateShort } from '../../Util';
+import { formatTime, formatDateShort } from '../../utils/Util';
 
 export const CommentStyle = styled.div`
-    width: 100%;
+  width: 100%;
 
-    h1 {
-        font-weight: normal;
-        font-size: 22px;
-        margin: 5px 0;
-        color: #555;
-    }
+  h1 {
+    font-weight: normal;
+    font-size: 22px;
+    margin: 5px 0;
+    color: #555;
+  }
 
-    h2 {
-        font-weight: normal;
-        font-size: 16px;
-        margin: 5px 0;
-        color: #bbb;
-    }
+  h2 {
+    font-weight: normal;
+    font-size: 16px;
+    margin: 5px 0;
+    color: #bbb;
+  }
 
-    p {
-        color: #333;
-    }
+  p {
+    color: #333;
+  }
 
-    .comment-type {
-        color: #888;
-        border: 3px solid #888;
-        border-radius: 10px;
-        font-size: 12px;
-        padding: 5px;
-        font-weight: bold;
-        vertical-align: top;
-        display: inline-block;
-        margin-left: 10px;
-        margin-top: -2px;
-    }
+  .comment-type {
+    color: #888;
+    border: 3px solid #888;
+    border-radius: 10px;
+    font-size: 12px;
+    padding: 5px;
+    font-weight: bold;
+    vertical-align: top;
+    display: inline-block;
+    margin-left: 10px;
+    margin-top: -2px;
+  }
 `;
 
-export default props => {
-    const formatCommentType = commentType => {
-        switch(commentType) {
-            case 'internal': return 'Вътрешен'; break;
-            default: return 'Вътрешен'; break;
-        }
-    };
-
-    return (
-        <CommentStyle>
-            <h1>
-                {props.comment.author.firstName} {props.comment.author.lastName}
-                <span className='comment-type'>{formatCommentType(props.comment.type)}</span>
-            </h1>
-            <h2>{formatTime(props.comment.createdAt)} – {formatDateShort(props.comment.createdAt)}</h2>
-            <p>{props.comment.text}</p>
-        </CommentStyle>
-    );
-};
\ No newline at end of file
+export default (props) => {
+  const formatCommentType = (commentType) => {
+    switch (commentType) {
+      case 'internal':
+        return 'Вътрешен';
+      default:
+        return 'Вътрешен';
+    }
+  };
+
+  return (
+    <CommentStyle>
+      <h1>
+        {props.comment.author.firstName} {props.comment.author.lastName}
+        <span className="comment-type">
+          {formatCommentType(props.comment.type)}
+        </span>
+      </h1>
+      <h2>
+        {formatTime(props.comment.createdAt)} –{' '}
+        {formatDateShort(props.comment.createdAt)}
+      </h2>
+      <p>{props.comment.text}</p>
+    </CommentStyle>
+  );
+};
diff --git a/src/components/modules/violations/CommentSection.js b/src/components/modules/violations/CommentSection.js
index 7048e82..44c460f 100644
--- a/src/components/modules/violations/CommentSection.js
+++ b/src/components/modules/violations/CommentSection.js
@@ -10,86 +10,97 @@ import styled from 'styled-components';
 import Comment from './Comment';
 
 export const PaginationLinks = styled.div`
-    padding: 20px;
-    text-align: center;
-
-    a {
-        color: #444;
-        margin: 0 10px;
-        text-decoration: none;
-
-        &:hover {
-            color: #777;
-        }
-
-        &.disabled {
-            color: #999;
-            pointer-events: none;
-        }
+  padding: 20px;
+  text-align: center;
+
+  a {
+    color: #444;
+    margin: 0 10px;
+    text-decoration: none;
+
+    &:hover {
+      color: #777;
+    }
+
+    &.disabled {
+      color: #999;
+      pointer-events: none;
     }
+  }
 `;
 
 import { AuthContext } from '../../App';
 
 const useQuery = () => {
-    return new URLSearchParams(useLocation().search);
-}
-
-export default props => {
-    const { violation } = useParams();
-    const [data, setData] = useState(null);
-    const { authGet } = useContext(AuthContext);
-    const query = useQuery();
-
-    useEffect(() => {
-        let url = `/violations/${violation}/comments`;
-        const page = query.get("page");
-        const limit = query.get("limit");
-
-        if(page || limit) url += '?';
-
-        if(page) url += `page=${page}`;
-        if(limit) url += `limit=${limit}`;
-
-        authGet(url).then(res => {
-            setData(res.data);
-        });
-    }, [query.get("page")]);
-
-    
-
-    const newComment = comment => {
-        setData({...data, meta: {...data.meta, totalItems: data.meta.totalItems + 1}, items: [comment, ...data.items]});
-    };
-
-    return ([
-        <h2>
-            Последни коментари
-            {
-                !data? null : data.items.length <= 5? null :
-                <Link to={`/violation/${violation}/comments`} style={{marginLeft: '10px'}}>
-                    Виж всички ({data.meta.totalItems})
-                </Link>
-            }
-        </h2>,
-        !data? <Loading/> :
-            <div>
-                {data.items.length === 0? <p>Все още няма коментари</p> : null}
-                <CommentForm newComment={newComment} section={props.section}/>
-                {data.items.length === 0? null : 
-                    data.items.slice(0, 5).map(comment => [
-                        <Comment key={comment.id} comment={comment}/>,
-                        <hr/>
-                    ])
-                }
-                {
-                    data.items.length <= 5? null :
-                    <h2 style={{textAlign: 'center'}}>
-                    <Link to={`/violation/${violation}/comments`}>
-                        Виж всички коментари ({data.meta.totalItems})
-                    </Link>
-                    </h2>
-                }
-            </div>
-    ]);
-};
\ No newline at end of file
+  return new URLSearchParams(useLocation().search);
+};
+
+export default (props) => {
+  const { violation } = useParams();
+  const [data, setData] = useState(null);
+  const { authGet } = useContext(AuthContext);
+  const query = useQuery();
+
+  useEffect(() => {
+    let url = `/violations/${violation}/comments`;
+    const page = query.get('page');
+    const limit = query.get('limit');
+
+    if (page || limit) url += '?';
+
+    if (page) url += `page=${page}`;
+    if (limit) url += `limit=${limit}`;
+
+    authGet(url).then((res) => {
+      setData(res.data);
+    });
+  }, [query.get('page')]);
+
+  const newComment = (comment) => {
+    setData({
+      ...data,
+      meta: { ...data.meta, totalItems: data.meta.totalItems + 1 },
+      items: [comment, ...data.items],
+    });
+  };
+
+  return (
+    <>
+      <h2>
+        Последни коментари
+        {!data ? null : data.items.length <= 5 ? null : (
+          <Link
+            to={`/violation/${violation}/comments`}
+            style={{ marginLeft: '10px' }}
+          >
+            Виж всички ({data.meta.totalItems})
+          </Link>
+        )}
+      </h2>
+
+      {!data ? (
+        <Loading />
+      ) : (
+        <div>
+          {data.items.length === 0 ? <p>Все още няма коментари</p> : null}
+          <CommentForm newComment={newComment} section={props.section} />
+          {data.items.length === 0
+            ? null
+            : data.items.slice(0, 5).map((comment) => (
+                <>
+                  <Comment key={comment.id} comment={comment} />
+                  <hr />
+                </>
+              ))}
+          {data.items.length <= 5 ? null : (
+            <h2 style={{ textAlign: 'center' }}>
+              <Link to={`/violation/${violation}/comments`}>
+                Виж всички коментари ({data.meta.totalItems})
+              </Link>
+            </h2>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/src/components/modules/violations/ViolationDetails.js b/src/components/modules/violations/ViolationDetails.js
index d76dfe3..8609aa8 100644
--- a/src/components/modules/violations/ViolationDetails.js
+++ b/src/components/modules/violations/ViolationDetails.js
@@ -3,11 +3,19 @@ import React, { useState, useEffect, useContext } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronLeft, faTimes, faCheck, faEdit, faUpload, faEyeSlash, faDove } from '@fortawesome/free-solid-svg-icons';
+import {
+  faChevronLeft,
+  faTimes,
+  faCheck,
+  faEdit,
+  faUpload,
+  faEyeSlash,
+  faDove,
+} from '@fortawesome/free-solid-svg-icons';
 
 import { ContentPanel } from '../Modules';
 import { AuthContext } from '../../App';
-import ImageGallery from '../../ImageGallery';
+import ImageGallery from '../../utils/ImageGallery';
 import Loading from '../../layout/Loading';
 
 import { TableStyle } from '../Profile';
@@ -15,346 +23,418 @@ import { TableStyle } from '../Profile';
 import styled from 'styled-components';
 import CommentSection from './CommentSection';
 
-import { formatDateShort, formatTime } from '../../Util';
+import { formatDateShort, formatTime } from '../../utils/Util';
 
 const UpdatesTable = styled(TableStyle)`
-    td, td:first-child {
-        color: #333;
-        font-weight: normal;
-        text-align: center;
-        font-size: 12px;
-    }
+  td,
+  td:first-child {
+    color: #333;
+    font-weight: normal;
+    text-align: center;
+    font-size: 12px;
+  }
 `;
 
-const BackButton = styled.button`
-    cursor: pointer;
-    border: none;
-    border-radius: 6px;
-    background: none;
-    margin-right: 5px;
-    font-size: 48px;
-
-    &:hover {
-        background-color: #eee;
-    }
+export const BackButton = styled.button`
+  cursor: pointer;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  margin-right: 5px;
+  font-size: 48px;
+
+  &:hover {
+    background-color: #eee;
+  }
 `;
 
 const ViolationStatus = styled.span`
-    font-weight: bold;
-    color: ${props => props.color};
-    border: 4px solid ${props => props.color};
-    border-radius: 5px;
-    padding: 6px;
-    vertical-align: top;
-    display: inline-block;
-    margin-left: 10px;
-    font-size: 20px;
-    margin-top: 5px;
+  font-weight: bold;
+  color: ${(props) => props.color};
+  border: 4px solid ${(props) => props.color};
+  border-radius: 5px;
+  padding: 6px;
+  vertical-align: top;
+  display: inline-block;
+  margin-left: 10px;
+  font-size: 20px;
+  margin-top: 5px;
 `;
 
 const FancyButton = styled.button`
-    border: none;
-    padding: 5px 0px;
-    font-size: 12px;
-    cursor: pointer;
-    border-radius: 5px;
-    box-sizing: border-box;
-    display: inline-block;
-    font-weight: bold;
-    margin: 0 2px;
-    min-width: 130px;
-    position: relative;
+  border: none;
+  padding: 5px 0px;
+  font-size: 12px;
+  cursor: pointer;
+  border-radius: 5px;
+  box-sizing: border-box;
+  display: inline-block;
+  font-weight: bold;
+  margin: 0 2px;
+  min-width: 130px;
+  position: relative;
+  color: white;
+
+  &:active:enabled {
+    top: 5px;
+    border-bottom: 0;
+  }
+
+  &:disabled {
+    cursor: auto;
     color: white;
+  }
 
-    &:active:enabled {
-        top: 5px;
-        border-bottom: 0;
-    }
-
-    &:disabled {
-        cursor: auto;
-        color: white;
-    }
-
-    &:first-of-type {
-        margin-left: 0;
-    }
+  &:first-of-type {
+    margin-left: 0;
+  }
 `;
 
 const FancyButtonGreen = styled(FancyButton)`
-    background-color: #44e644;
-    border-bottom: 5px solid #2eae1c;
+  background-color: #44e644;
+  border-bottom: 5px solid #2eae1c;
 
-    &:hover {
-        background-color: #2ece2e;
-    }
+  &:hover {
+    background-color: #2ece2e;
+  }
 
-    &:disabled {
-        background-color: #9efd9e;
-        border-bottom-color: #9aec8e;
-    }
+  &:disabled {
+    background-color: #9efd9e;
+    border-bottom-color: #9aec8e;
+  }
 `;
 
 export const FancyButtonBlue = styled(FancyButton)`
-    background-color: #36a2e3;
-    border-bottom: 5px solid #1e70b9;
+  background-color: #36a2e3;
+  border-bottom: 5px solid #1e70b9;
 
-    &:hover {
-        background-color: #48b4f4;
-    }
+  &:hover {
+    background-color: #48b4f4;
+  }
 
-    &:disabled {
-        background-color: #b6e4ff;
-        border-bottom-color: #b9d4ec;
-    }
+  &:disabled {
+    background-color: #b6e4ff;
+    border-bottom-color: #b9d4ec;
+  }
 `;
 
 const FancyButtonYellow = styled(FancyButton)`
-    background-color: #f9d71c;
-    border-bottom: 5px solid #c1b718;
+  background-color: #f9d71c;
+  border-bottom: 5px solid #c1b718;
 
-    &:hover {
-        background-color: #ffeb47;
-    }
+  &:hover {
+    background-color: #ffeb47;
+  }
 
-    &:disabled {
-        background-color: #fff6b0;
-        border-bottom-color: #ece793;
-    }
+  &:disabled {
+    background-color: #fff6b0;
+    border-bottom-color: #ece793;
+  }
 `;
 
 const FancyButtonRed = styled(FancyButton)`
-    background-color: #ff3e3e;
-    border-bottom: 5px solid #b92121;
+  background-color: #ff3e3e;
+  border-bottom: 5px solid #b92121;
 
-    &:hover { background-color: #ff5a5a; }
+  &:hover {
+    background-color: #ff5a5a;
+  }
 
-    &:disabled {
-        background-color: #f4d2d2;
-        border-bottom-color: #dfc1c1;
-    }
+  &:disabled {
+    background-color: #f4d2d2;
+    border-bottom-color: #dfc1c1;
+  }
 `;
 
-export default props => {
-    const { authGet, authPost, user, authPatch, authDelete } = useContext(AuthContext);
-    const { violation } = useParams();
-    const history = useHistory();
-    const [data, setData] = useState(null);
-    const [buttonLoading, setButtonLoading] = useState({
-        assign: false, process: false, reject: false
+export default (props) => {
+  const { authGet, authPost, user, authPatch, authDelete } =
+    useContext(AuthContext);
+  const { violation } = useParams();
+  const history = useHistory();
+  const [data, setData] = useState(null);
+  const [buttonLoading, setButtonLoading] = useState({
+    assign: false,
+    process: false,
+    reject: false,
+  });
+
+  useEffect(() => {
+    authGet(`/violations/${violation}`).then((res) => {
+      setData(res.data);
     });
-
-    console.log({ data })
-
-    useEffect(() => {
-        authGet(`/violations/${violation}`).then(res => {
-            setData(res.data);
-        });
-    }, []);
-
-    const assignYourself = () => {
-        if(iAmAssignee) {
-            setButtonLoading({...buttonLoading, assign: true});
-            authDelete(`/violations/${violation}/assignees/${user.id}`).then(res => {
-                setButtonLoading({...buttonLoading, assign: false});
-                if(res.data.status === 'Accepted') {
-                    setData({...data, assignees: []});
-                }
-            });
-        } else {
-            setButtonLoading({...buttonLoading, assign: true});
-            authPost(`/violations/${violation}/assignees`, {id: user.id}).then(res => {
-                setButtonLoading({...buttonLoading, assign: false});
-                if(res.data.status === 'Accepted') {
-                    setData({...data, assignees: [user], status: 'processing'});
-                }
-            });
+  }, []);
+
+  const assignYourself = () => {
+    if (iAmAssignee) {
+      setButtonLoading({ ...buttonLoading, assign: true });
+      authDelete(`/violations/${violation}/assignees/${user.id}`).then(
+        (res) => {
+          setButtonLoading({ ...buttonLoading, assign: false });
+          if (res.data.status === 'Accepted') {
+            setData({ ...data, assignees: [] });
+          }
         }
-    };
-
-    const goBack = () => {
-        history.goBack()
-    };
-
-    const processViolation = () => {
-        setButtonLoading({...buttonLoading, process: true});
-        authPost(`/violations/${violation}/process`).then(res => {
-            setButtonLoading({...buttonLoading, process: false});
-            setData(res.data);
-        });
-    };
-
-    const rejectViolation = () => {
-        setButtonLoading({...buttonLoading, reject: true});
-        authPost(`/violations/${violation}/reject`).then(res => {
-            setButtonLoading({...buttonLoading, reject: false});
-            setData(res.data);
-        });
-    };
-
-    const publishViolation = () => {
-        setButtonLoading({...buttonLoading, publish: true});
-        authPatch(`/violations/${violation}`, {isPublished: !data.isPublished}).then(res => {
-            setButtonLoading({...buttonLoading, publish: false});
-            setData(res.data);
-        });
-    };
-
-    const status = apiStatus => {
-        switch(apiStatus) {
-            case "received" : return <ViolationStatus color={'#6c6cff'}>Получен</ViolationStatus>;
-            case "rejected" : return <ViolationStatus color={'#ff3939'}>Отхвърлен</ViolationStatus>;
-            case "processed" : return <ViolationStatus color={'#46df00'}>Обработен</ViolationStatus>;
-            case "processing" : return <ViolationStatus color={'#ecd40e'}>Обработва се</ViolationStatus>;
-            default: return apiStatus;
+      );
+    } else {
+      setButtonLoading({ ...buttonLoading, assign: true });
+      authPost(`/violations/${violation}/assignees`, { id: user.id }).then(
+        (res) => {
+          setButtonLoading({ ...buttonLoading, assign: false });
+          if (res.data.status === 'Accepted') {
+            setData({ ...data, assignees: [user], status: 'processing' });
+          }
         }
-    };
-    
-    const iAmAssignee = data && data.assignees.length !== 0 && data.assignees[0].id === user.id;
-
-    const assignPossible = () => (data.assignees.length === 0  || iAmAssignee) && !buttonLoading.assign;
-    const processPossible = () => iAmAssignee && data.status === 'processing' && !buttonLoading.process;
-    const rejectPossible =  () => iAmAssignee && data.status === 'processing' && !buttonLoading.reject;
-    const publishPossible =  () => !buttonLoading.publish;
-    
-    return (
-        <ContentPanel>
-            <h1>
-                <BackButton onClick={goBack}><FontAwesomeIcon icon={faChevronLeft}/></BackButton>
-                <span style={{verticalAlign: 'top', paddingTop: '9px', display: 'inline-block'}}>Обработка на сигнал</span>
-                {!data? null : status(data.status)}
-            </h1>
-            {
-                !data? <Loading/> :
-                <div>
-                    <h2 style={{color: '#666'}}>
-                    {data.assignees.length === 0? 'Свободен за обработка' : [
-                        `Обработва се от ${data.assignees[0].firstName} ${data.assignees[0].lastName}`,
-                        !iAmAssignee? null : <span style={{color: 'red'}}> (Вие)</span>
-                    ]}
-                    </h2>
-                    <FancyButtonYellow onClick={assignYourself} disabled={!assignPossible()}>
-                        {buttonLoading.assign? 'Момент...' : 
-                            iAmAssignee? [
-                                <FontAwesomeIcon icon={faDove}/>,
-                                ' Освободи'
-                            ] : [
-                                <FontAwesomeIcon icon={faEdit}/>,
-                                ' Обработвай'
-                            ]
-                        }
-                    </FancyButtonYellow>
-                    <FancyButtonGreen onClick={processViolation} disabled={!processPossible()}>
-                        {buttonLoading.process? 'Момент...' : [
-                            <FontAwesomeIcon icon={faCheck}/>,
-                            ' Приключи'
-                        ]}
-                    </FancyButtonGreen>
-                    
-                    <FancyButtonBlue onClick={publishViolation} disabled={!publishPossible()}>
-                        {buttonLoading.publish? 'Момент...' :
-                            data.isPublished? [
-                                <FontAwesomeIcon icon={faEyeSlash}/>,
-                                ' Скрий'
-                            ] : [
-                                <FontAwesomeIcon icon={faUpload}/>,
-                                ' Публикувай'
-                        ]}
-                    </FancyButtonBlue>
-                    <FancyButtonRed onClick={rejectViolation} disabled={!rejectPossible()}>
-                        {buttonLoading.reject? 'Момент...' : [
-                            <FontAwesomeIcon icon={faTimes}/>,
-                            ' Отхвърли'
-                        ]}
-                    </FancyButtonRed>
-                    <hr/>
-                    <h2>Описание</h2>
-                    <p>{data.description}</p>
-                    <hr/>
-                    <h2>Изпратен от</h2>
-                    <TableStyle>
-                        <tbody>
-                            <tr>
-                                <td>Имена</td>
-                                <td>{data.author.firstName} {data.author.lastName}</td>
-                            </tr>
-                            <tr>
-                                <td>Организация</td>
-                                <td>{data.author.organization? data.author.organization.name : null}</td>
-                            </tr>
-                            <tr>
-                                <td>Ел. поща</td>
-                                <td>{data.author.email}</td>
-                            </tr>
-                            <tr>
-                                <td>Телефон</td>
-                                <td>{data.author.phone}</td>
-                            </tr>
-                        </tbody>
-                    </TableStyle>
-                    <hr/>
-                    {
-                        !data.section? null :
-                            <div>
-                                <h2>Информация за секция</h2>
-                                <TableStyle>
-                                <tbody>
-                                    <tr>
-                                        <td>Номер</td>
-                                        <td>{data.section.id}</td>
-                                    </tr>
-                                    <tr>
-                                        <td>Град</td>
-                                        <td>{data.town.name}</td>
-                                    </tr>
-                                    <tr>
-                                        <td>Локация</td>
-                                        <td>{data.section.place}</td>
-                                    </tr>
-                                </tbody>
-                                </TableStyle>
-                                <hr/>
-                            </div>
-                    }
-                    <h2>История</h2>
-                    <div style={{ height: '100px', overflowY: 'auto', border: '1px solid #bbb'}}>
-                    <UpdatesTable>
-                        <thead>
-                            <tr>
-                                <th>Дата</th>
-                                <th>Час</th>
-                                <th>Потребител</th>
-                                <th>Действие</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                        {
-                            data.updates.map(update =>
-                                <tr>
-                                    <td>{formatDateShort(update.timestamp)}</td>
-                                    <td>{formatTime(update.timestamp)}</td>
-                                    <td>{update.actor.firstName} {update.actor.lastName}</td>
-                                    <td>{update.type}</td>
-                                </tr>
-                            )
-                        }
-                        </tbody>
-                    </UpdatesTable>
-                    </div>
-                </div>
-            }
-            <hr/>
-            <CommentSection section={data && data.section}/>
-            {data && data.pictures && data.pictures.length > 0 && 
-                <>
-                    <h2>Снимки</h2>
-                    <ImageGallery 
-                        items={data.pictures.map(picture => ({
-                            original: picture.url
-                        }))}
-                    />
-                </>
-            }
-        </ContentPanel>
-    );
+      );
+    }
+  };
+
+  const goBack = () => {
+    history.goBack();
+  };
+
+  const processViolation = () => {
+    setButtonLoading({ ...buttonLoading, process: true });
+    authPost(`/violations/${violation}/process`).then((res) => {
+      setButtonLoading({ ...buttonLoading, process: false });
+      setData(res.data);
+    });
+  };
+
+  const rejectViolation = () => {
+    setButtonLoading({ ...buttonLoading, reject: true });
+    authPost(`/violations/${violation}/reject`).then((res) => {
+      setButtonLoading({ ...buttonLoading, reject: false });
+      setData(res.data);
+    });
+  };
+
+  const publishViolation = () => {
+    setButtonLoading({ ...buttonLoading, publish: true });
+    authPatch(`/violations/${violation}`, {
+      isPublished: !data.isPublished,
+    }).then((res) => {
+      setButtonLoading({ ...buttonLoading, publish: false });
+      setData(res.data);
+    });
+  };
+
+  const status = (apiStatus) => {
+    switch (apiStatus) {
+      case 'received':
+        return <ViolationStatus color={'#6c6cff'}>Получен</ViolationStatus>;
+      case 'rejected':
+        return <ViolationStatus color={'#ff3939'}>Отхвърлен</ViolationStatus>;
+      case 'processed':
+        return <ViolationStatus color={'#46df00'}>Обработен</ViolationStatus>;
+      case 'processing':
+        return (
+          <ViolationStatus color={'#ecd40e'}>Обработва се</ViolationStatus>
+        );
+      default:
+        return apiStatus;
+    }
+  };
+
+  const iAmAssignee =
+    data && data.assignees.length !== 0 && data.assignees[0].id === user.id;
+
+  const assignPossible = () =>
+    (data.assignees.length === 0 || iAmAssignee) && !buttonLoading.assign;
+  const processPossible = () =>
+    iAmAssignee && data.status === 'processing' && !buttonLoading.process;
+  const rejectPossible = () =>
+    iAmAssignee && data.status === 'processing' && !buttonLoading.reject;
+  const publishPossible = () => !buttonLoading.publish;
+
+  return (
+    <ContentPanel>
+      <h1>
+        <BackButton onClick={goBack}>
+          <FontAwesomeIcon icon={faChevronLeft} />
+        </BackButton>
+        <span
+          style={{
+            verticalAlign: 'top',
+            paddingTop: '9px',
+            display: 'inline-block',
+          }}
+        >
+          Обработка на сигнал
+        </span>
+        {!data ? null : status(data.status)}
+      </h1>
+      {!data ? (
+        <Loading />
+      ) : (
+        <div>
+          <h2 style={{ color: '#666' }}>
+            {data.assignees.length === 0 ? (
+              'Свободен за обработка'
+            ) : (
+              <>
+                `Обработва се от ${data.assignees[0].firstName} $
+                {data.assignees[0].lastName}`, !iAmAssignee ? null : (
+                <span style={{ color: 'red' }}> (Вие)</span>
+                ),
+              </>
+            )}
+          </h2>
+          <FancyButtonYellow
+            onClick={assignYourself}
+            disabled={!assignPossible()}
+          >
+            {buttonLoading.assign ? (
+              'Момент...'
+            ) : iAmAssignee ? (
+              <>
+                <FontAwesomeIcon icon={faDove} />, ' Освободи'{' '}
+              </>
+            ) : (
+              <>
+                <FontAwesomeIcon icon={faEdit} />, ' Обработвай'{' '}
+              </>
+            )}
+          </FancyButtonYellow>
+          <FancyButtonGreen
+            onClick={processViolation}
+            disabled={!processPossible()}
+          >
+            {buttonLoading.process ? (
+              'Момент...'
+            ) : (
+              <>
+                <FontAwesomeIcon icon={faCheck} />, ' Приключи'{' '}
+              </>
+            )}
+          </FancyButtonGreen>
+
+          <FancyButtonBlue
+            onClick={publishViolation}
+            disabled={!publishPossible()}
+          >
+            {buttonLoading.publish ? (
+              'Момент...'
+            ) : data.isPublished ? (
+              <>
+                <FontAwesomeIcon icon={faEyeSlash} />, ' Скрий'
+              </>
+            ) : (
+              <>
+                <FontAwesomeIcon icon={faUpload} />, ' Публикувай'
+              </>
+            )}
+          </FancyButtonBlue>
+          <FancyButtonRed
+            onClick={rejectViolation}
+            disabled={!rejectPossible()}
+          >
+            {buttonLoading.reject ? (
+              'Момент...'
+            ) : (
+              <>
+                <FontAwesomeIcon icon={faTimes} />, ' Отхвърли'{' '}
+              </>
+            )}
+          </FancyButtonRed>
+          <hr />
+          <h2>Описание</h2>
+          <p>{data.description}</p>
+          <hr />
+          <h2>Изпратен от</h2>
+          <TableStyle>
+            <tbody>
+              <tr>
+                <td>Имена</td>
+                <td>
+                  {data.author.firstName} {data.author.lastName}
+                </td>
+              </tr>
+              <tr>
+                <td>Организация</td>
+                <td>
+                  {data.author.organization
+                    ? data.author.organization.name
+                    : null}
+                </td>
+              </tr>
+              <tr>
+                <td>Ел. поща</td>
+                <td>{data.author.email}</td>
+              </tr>
+              <tr>
+                <td>Телефон</td>
+                <td>{data.author.phone}</td>
+              </tr>
+            </tbody>
+          </TableStyle>
+          <hr />
+          {!data.section ? null : (
+            <div>
+              <h2>Информация за секция</h2>
+              <TableStyle>
+                <tbody>
+                  <tr>
+                    <td>Номер</td>
+                    <td>{data.section.id}</td>
+                  </tr>
+                  <tr>
+                    <td>Град</td>
+                    <td>{data.town.name}</td>
+                  </tr>
+                  <tr>
+                    <td>Локация</td>
+                    <td>{data.section.place}</td>
+                  </tr>
+                </tbody>
+              </TableStyle>
+              <hr />
+            </div>
+          )}
+          <h2>История</h2>
+          <div
+            style={{
+              height: '100px',
+              overflowY: 'auto',
+              border: '1px solid #bbb',
+            }}
+          >
+            <UpdatesTable>
+              <thead>
+                <tr>
+                  <th>Дата</th>
+                  <th>Час</th>
+                  <th>Потребител</th>
+                  <th>Действие</th>
+                </tr>
+              </thead>
+              <tbody>
+                {data.updates.map((update) => (
+                  <tr key={update.id}>
+                    <td>{formatDateShort(update.timestamp)}</td>
+                    <td>{formatTime(update.timestamp)}</td>
+                    <td>
+                      {update.actor.firstName} {update.actor.lastName}
+                    </td>
+                    <td>{update.type}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </UpdatesTable>
+          </div>
+        </div>
+      )}
+      <hr />
+      <CommentSection section={data && data.section} />
+      {data && data.pictures && data.pictures.length > 0 && (
+        <>
+          <h2>Снимки</h2>
+          <ImageGallery
+            items={data.pictures.map((picture) => ({
+              original: picture.url,
+            }))}
+          />
+        </>
+      )}
+    </ContentPanel>
+  );
 };
diff --git a/src/components/modules/violations/ViolationFilter.js b/src/components/modules/violations/ViolationFilter.js
index 407079f..7c7fca3 100644
--- a/src/components/modules/violations/ViolationFilter.js
+++ b/src/components/modules/violations/ViolationFilter.js
@@ -1,22 +1,22 @@
-import React, { useState, useEffect, useContext } from "react";
+import React, { useState, useEffect, useContext } from 'react';
 
-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom';
 
-import { AuthContext } from "../../App";
+import { AuthContext } from '../../App';
 
-import Statuses from "../filter_components/Statuses";
-import SectionNumber from "../filter_components/SectionNumber";
-import Published from "../filter_components/Published";
+import Statuses from '../filter_components/Statuses';
+import TextInput from '../filter_components/TextInput';
+import Published from '../filter_components/Published';
 
-import Countries from "../filter_components/Countries";
-import MIRs from "../filter_components/MIRs";
-import Municipalities from "../filter_components/Municipalities";
-import Towns from "../filter_components/Towns";
-import Regions from "../filter_components/Regions";
+import Countries from '../filter_components/Countries';
+import MIRs from '../filter_components/MIRs';
+import Municipalities from '../filter_components/Municipalities';
+import Towns from '../filter_components/Towns';
+import Regions from '../filter_components/Regions';
 
-import styled from "styled-components";
+import styled from 'styled-components';
 
-const FilterlTable = styled.table`
+const FilterTable = styled.table`
   width: 100%;
   border-collapse: collapse;
 
@@ -55,33 +55,33 @@ const ButtonStyle = styled.button`
 export default function ViolationFilter(props) {
   const { authGet } = useContext(AuthContext);
 
-  const [section, setSection] = useState("");
+  const [section, setSection] = useState('');
 
   const [disabled, setDisabled] = useState(true); //sets callback function for disabling field
   const [published, setPublished] = useState('');
 
-  const [country, setCountry] = useState("00");
-  const [selectedCountry, setSelectedCountry] = useState("");
+  const [country, setCountry] = useState('00');
+  const [selectedCountry, setSelectedCountry] = useState('');
 
   const [mirs, setMirs] = useState([]); //sets all MIRs in Bulgaria
-  const [electionRegion, setElectionRegion] = useState("00"); //gets the chosen MIR
-  const [selectedElectionRegion, setSelectedElectionRegion] = useState("");
+  const [electionRegion, setElectionRegion] = useState('00'); //gets the chosen MIR
+  const [selectedElectionRegion, setSelectedElectionRegion] = useState('');
 
   const [municipalities, setMunicipalities] = useState([]); //sets the municipalities in one MIR
-  const [municipality, setMunicipality] = useState("00"); //gets the chosen municipality
-  const [selectedMunicipality, setSelectedMunicipality] = useState("");
+  const [municipality, setMunicipality] = useState('00'); //gets the chosen municipality
+  const [selectedMunicipality, setSelectedMunicipality] = useState('');
 
   const [towns, setTowns] = useState([]); //sets all towns in one municipality
-  const [town, setTown] = useState("00");
-  const [selectedTown, setSelectedTown] = useState("");
+  const [town, setTown] = useState('00');
+  const [selectedTown, setSelectedTown] = useState('');
 
   const [regions, setRegions] = useState([]); //sets the election regions in one town
-  const [cityRegion, setCityRegion] = useState("00");
+  const [cityRegion, setCityRegion] = useState('00');
 
   const [isAbroad, setIsAbroad] = useState(false); //sets if country is Bulgaria or not
 
   const [statuses, setStatuses] = useState([]);
-  const [status, setStatus] = useState("");
+  const [status, setStatus] = useState('');
 
   let url = '';
 
@@ -93,27 +93,27 @@ export default function ViolationFilter(props) {
     town: town,
     cityRegion: cityRegion,
     status: status,
-    published: published
+    published: published,
   };
 
   for (const [key, value] of Object.entries(params)) {
-    if (value !== "00" && value !== "") {
+    if (value !== '00' && value !== '') {
       url += `&${key}=${value}`;
     } else {
-      url.replace(`&${key}=${value}`, "");
+      url.replace(`&${key}=${value}`, '');
     }
   }
 
   useEffect(async () => {
     //gets all the MIRs
-    const resElectionRegions = await authGet("/election_regions");
+    const resElectionRegions = await authGet('/election_regions');
 
-    const resStatuses = await authGet("/violations/statuses");
+    const resStatuses = await authGet('/violations/statuses');
     setStatuses(resStatuses.data);
 
     //if country is NOT Bulgaria: gets all the cities in the foreign country
-    if (country !== "00") {
-      setElectionRegion("32");
+    if (country !== '00') {
+      setElectionRegion('32');
 
       const resForeignTowns = await authGet(`/towns?country=${country}`);
       //sets the cities in the foreign country and sets MIR to the last one which is "Abroad"
@@ -131,31 +131,33 @@ export default function ViolationFilter(props) {
   }, [country, municipality, electionRegion, town]);
 
   const clearHandler = () => {
-    setStatus("");
-    setSelectedCountry("");
-    setCountry("00");
-    setSelectedElectionRegion("");
+    setStatus('');
+    setSelectedCountry('');
+    setCountry('00');
+    setSelectedElectionRegion('');
     setIsAbroad(false);
     setDisabled(true);
-    setSelectedMunicipality("Всички");
-    setSelectedTown("Всички");
-    setCityRegion("");
-    setMunicipality("00");
-    setElectionRegion("00");
-    setTown("");
-    setSection("");
-    setPublished('')
+    setSelectedMunicipality('Всички');
+    setSelectedTown('Всички');
+    setCityRegion('');
+    setMunicipality('00');
+    setElectionRegion('00');
+    setTown('');
+    setSection('');
+    setPublished('');
   };
 
   return (
-    <FilterlTable>
+    <FilterTable>
       <tbody>
         <tr>
           <td>
-            N на секция:<br></br> <SectionNumber section={section} setSection={setSection}/>
+            N на секция:<br></br>{' '}
+            <TextInput textInput={section} setTextInput={setSection} />
           </td>
           <td>
-            Публикуван:<br></br> <Published published={published} setPublished={setPublished}/>
+            Публикуван:<br></br>{' '}
+            <Published published={published} setPublished={setPublished} />
           </td>
           <td>
             Статус:<br></br>
@@ -179,6 +181,10 @@ export default function ViolationFilter(props) {
               setElectionRegion={setElectionRegion}
               selectedCountry={selectedCountry}
               setSelectedCountry={setSelectedCountry}
+              setMunicipality={setMunicipality}
+              setTown={setTown}
+              setCityRegion={setCityRegion}
+              setSelectedElectionRegion={setSelectedElectionRegion}
             />
           </td>
           <td>
@@ -249,6 +255,6 @@ export default function ViolationFilter(props) {
           </td>
         </tr>
       </tbody>
-    </FilterlTable>
+    </FilterTable>
   );
 }
diff --git a/src/components/modules/violations/ViolationList.js b/src/components/modules/violations/ViolationList.js
index 8d38a19..2b8cba2 100644
--- a/src/components/modules/violations/ViolationList.js
+++ b/src/components/modules/violations/ViolationList.js
@@ -1,19 +1,19 @@
-import React, { useState, useEffect, useContext } from "react";
+import React, { useState, useEffect, useContext } from 'react';
 
-import { Link, useHistory, useLocation } from "react-router-dom";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Link, useHistory, useLocation } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faChevronLeft,
   faChevronRight,
   faFastForward,
   faFastBackward,
-} from "@fortawesome/free-solid-svg-icons";
+} from '@fortawesome/free-solid-svg-icons';
 
-import { AuthContext } from "../../App";
-import Loading from "../../layout/Loading";
+import { AuthContext } from '../../App';
+import Loading from '../../layout/Loading';
 
-import styled from "styled-components";
-import ViolationFilter from "./ViolationFilter";
+import styled from 'styled-components';
+import ViolationFilter from './ViolationFilter';
 
 const TableViewContainer = styled.div`
   padding: 40px;
@@ -104,22 +104,21 @@ export default (props) => {
   const history = useHistory();
 
   useEffect(() => {
-    let url = "/violations";
-    const page = query.get("page");
-    const limit = query.get("limit");
-    const country = query.get("country");
-    const electionRegion = query.get("electionRegion");
-    const assignee = query.get("assignee");
-    const section = query.get("section");
-    const municipality = query.get("municipality");
-    const town = query.get("town");
-    const cityRegion = query.get("cityRegion");
-    const status = query.get("status");
-    const published = query.get("published");
+    let url = '/violations';
+    const page = query.get('page');
+    // const limit = query.get('limit');
+    const country = query.get('country');
+    const electionRegion = query.get('electionRegion');
+    const assignee = query.get('assignee');
+    const section = query.get('section');
+    const municipality = query.get('municipality');
+    const town = query.get('town');
+    const cityRegion = query.get('cityRegion');
+    const status = query.get('status');
+    const published = query.get('published');
 
     if (
       page ||
-      limit ||
       country ||
       electionRegion ||
       assignee ||
@@ -130,7 +129,7 @@ export default (props) => {
       status ||
       published
     )
-      url += "?";
+      url += '?';
 
     if (country) url += `country=${country}`;
     if (electionRegion) url += `&electionRegion=${electionRegion}`;
@@ -142,7 +141,7 @@ export default (props) => {
     if (status) url += `&status=${status}`;
     if (published) url += `&published=${published}`;
     if (page) url += `page=${page}`;
-    if (limit) url += `limit=${limit}`;
+    // if (limit) url += `limit=${limit}`;
 
     setLoading(true);
     authGet(url).then((res) => {
@@ -150,41 +149,41 @@ export default (props) => {
       setData(res.data);
     });
   }, [
-    query.get("page"),
-    query.get("country"),
-    query.get("electionRegion"),
-    query.get("assignee"),
-    query.get("section"),
-    query.get("municipality"),
-    query.get("town"),
-    query.get("cityRegion"),
-    query.get("status"),
-    query.get("published"),
+    query.get('page'),
+    query.get('country'),
+    query.get('electionRegion'),
+    query.get('assignee'),
+    query.get('section'),
+    query.get('municipality'),
+    query.get('town'),
+    query.get('cityRegion'),
+    query.get('status'),
+    query.get('published'),
   ]);
 
   const status = (apiStatus) => {
     switch (apiStatus) {
-      case "received":
+      case 'received':
         return (
-          <ViolationStatus style={{ color: "#6c6cff" }}>
+          <ViolationStatus style={{ color: '#6c6cff' }}>
             Получен
           </ViolationStatus>
         );
-      case "rejected":
+      case 'rejected':
         return (
-          <ViolationStatus style={{ color: "#ff3939" }}>
+          <ViolationStatus style={{ color: '#ff3939' }}>
             Отхвърлен
           </ViolationStatus>
         );
-      case "processed":
+      case 'processed':
         return (
-          <ViolationStatus style={{ color: "#46df00" }}>
+          <ViolationStatus style={{ color: '#46df00' }}>
             Обработен
           </ViolationStatus>
         );
-      case "processing":
+      case 'processing':
         return (
-          <ViolationStatus style={{ color: "#ecd40e" }}>
+          <ViolationStatus style={{ color: '#ecd40e' }}>
             Обработва се
           </ViolationStatus>
         );
@@ -212,26 +211,26 @@ export default (props) => {
 
     return (
       <PaginationLinks>
-        <Link className={firstAvail ? "" : "disabled"} to={data.links.first}>
+        <Link className={firstAvail ? '' : 'disabled'} to={data.links.first}>
           <FontAwesomeIcon icon={faFastBackward} /> Първа
         </Link>
-        <Link className={prevAvail ? "" : "disabled"} to={data.links.previous}>
+        <Link className={prevAvail ? '' : 'disabled'} to={data.links.previous}>
           <FontAwesomeIcon icon={faChevronLeft} /> Предишна
         </Link>
         <div
           style={{
-            margin: "0 5px",
-            display: "inline-block",
-            color: "#444",
-            width: "60px",
+            margin: '0 5px',
+            display: 'inline-block',
+            color: '#444',
+            width: '60px',
           }}
         >
           {data.meta.currentPage} / {data.meta.totalPages}
         </div>
-        <Link className={nextAvail ? "" : "disabled"} to={data.links.next}>
+        <Link className={nextAvail ? '' : 'disabled'} to={data.links.next}>
           Следваща <FontAwesomeIcon icon={faChevronRight} />
         </Link>
-        <Link className={lastAvail ? "" : "disabled"} to={data.links.last}>
+        <Link className={lastAvail ? '' : 'disabled'} to={data.links.last}>
           Последна <FontAwesomeIcon icon={faFastForward} />
         </Link>
       </PaginationLinks>
@@ -246,36 +245,46 @@ export default (props) => {
     <TableViewContainer>
       <h1>Обработване на сигнали</h1>
       <ViolationFilter />
+
       <hr />
       {!data ? (
         <Loading />
       ) : (
-        [
-          renderLinks(),
+        <>
+          {renderLinks()}
           <ViolationTable>
             <thead>
-              <th>№ на секция</th>
-              <th>Град</th>
-              <th>Автор</th>
-              <th>Описание</th>
-              <th>Публикуван</th>
-              <th>Статус</th>
+              <tr>
+                {/* <th>Назначен</th> */}
+                <th>№ на секция</th>
+                <th>Град</th>
+                <th>Автор</th>
+                <th>Описание</th>
+                <th>Публикуван</th>
+                <th>Статут</th>
+              </tr>
             </thead>
             <tbody>
               {loading ? (
-                <tr>
-                  <td colspan="6">
+                <tr key="loading">
+                  <td colSpan="6">
                     <Loading />
                   </td>
                 </tr>
               ) : (
                 data.items.map((violation, i) => (
-                  <tr key={i} onClick={() => openViolation(violation.id)}>
-                    <td
+                  <tr
+                    key={violation.id}
+                    onClick={() => openViolation(violation.id)}
+                  >
+                    {/* <td
                       style={
                         violation.assignees.length === 0 ? {} : { padding: 0 }
                       }
                     >
+                      {assignees(violation.assignees)}
+                    </td> */}
+                    <td>
                       {!violation.section ? (
                         <i>Не е посочена секция</i>
                       ) : (
@@ -286,12 +295,12 @@ export default (props) => {
                     <td>
                       {violation.author.firstName} {violation.author.lastName}
                     </td>
-                    <td>{violation.description.slice(0, 40) + "..."}</td>
+                    <td>{violation.description.slice(0, 40) + '...'}</td>
                     <td>
                       {violation.isPublished ? (
-                        <span style={{ color: "green" }}>Да</span>
+                        <span style={{ color: 'green' }}>Да</span>
                       ) : (
-                        <span style={{ color: "red" }}>Не</span>
+                        <span style={{ color: 'red' }}>Не</span>
                       )}
                     </td>
                     <td>{status(violation.status)}</td>
@@ -299,9 +308,9 @@ export default (props) => {
                 ))
               )}
             </tbody>
-          </ViolationTable>,
-          renderLinks(),
-        ]
+          </ViolationTable>
+          {renderLinks()}
+        </>
       )}
     </TableViewContainer>
   );
diff --git a/src/components/process_protocols/ProcessProtocols.js b/src/components/process_protocols/ProcessProtocols.js
index bbfed78..44eb2a4 100644
--- a/src/components/process_protocols/ProcessProtocols.js
+++ b/src/components/process_protocols/ProcessProtocols.js
@@ -10,149 +10,158 @@ import { faFile, faChevronLeft } from '@fortawesome/free-solid-svg-icons';
 import Loading from '../layout/Loading';
 
 const ReadyScreen = styled.div`
-    max-width: 900px;
-    display: block;
-    margin: 0 auto;
-    padding: 50px;
-    //border: 1px solid #aaa;
-    border-radius: 50px;
-    //margin-top: 30px;
-
-    hr {
-        margin: 20px 0;
-        border: 1px solid #ddd;
-        border-top: 0;
-    }
+  max-width: 900px;
+  display: block;
+  margin: 0 auto;
+  padding: 50px;
+  //border: 1px solid #aaa;
+  border-radius: 50px;
+  //margin-top: 30px;
+
+  hr {
+    margin: 20px 0;
+    border: 1px solid #ddd;
+    border-top: 0;
+  }
 `;
 
 const NextProtocolButton = styled.button`
-    border: none;
-    background-color: #22c122;
-    color: white;
-    padding: 20px 50px;
-    font-size: 36px;
-    cursor: pointer;
-    margin: 0 auto;
-    border-radius: 20px;
-    border-bottom: 10px solid #118a00;
-    display: block;
-    margin-top: 60px;
-    box-sizing: border-box;
-    position: relative;
-    top: 0;
-
-    &:hover {
-        background-color: #2ece2e;
-    }
-
-    &:active {
-        top: 10px;
-        border-bottom: 0;
-        margin-bottom: 10px;
-    }
+  border: none;
+  background-color: #22c122;
+  color: white;
+  padding: 20px 50px;
+  font-size: 36px;
+  cursor: pointer;
+  margin: 0 auto;
+  border-radius: 20px;
+  border-bottom: 10px solid #118a00;
+  display: block;
+  margin-top: 60px;
+  box-sizing: border-box;
+  position: relative;
+  top: 0;
+
+  &:hover {
+    background-color: #2ece2e;
+  }
+
+  &:active {
+    top: 10px;
+    border-bottom: 0;
+    margin-bottom: 10px;
+  }
 `;
 
 const Message = styled.p`
-    color: green;
-    font-size: 20px;
-    border: 1px solid green;
-    padding: 10px;
-    background-color: #e0ffe0;
-    border-radius: 10px;
+  color: green;
+  font-size: 20px;
+  border: 1px solid green;
+  padding: 10px;
+  background-color: #e0ffe0;
+  border-radius: 10px;
 `;
 
 const BackButton = styled.button`
-    cursor: pointer;
-    background: none;
-    border: 1px solid #aaa;
-    border-radius: 10px;
-    margin-right: 10px;
+  cursor: pointer;
+  background: none;
+  border: 1px solid #aaa;
+  border-radius: 10px;
+  margin-right: 10px;
 `;
 
 import { AuthContext } from '../App';
 
-export default props => {
-    const [protocol, setProtocol] = useState(null);
-    const [loading, setLoading] = useState(true);
-    const [message, setMessage] = useState(null);
-
-    const history = useHistory()
-
-    const { token, user, authGet, authDelete, authPost } = useContext(AuthContext);
-
-    useEffect(() => { init(); }, []);
-
-    const init = async () => {
-        const res = await authGet(`/protocols?status=received&assignee=${user.id}`);
-
-        if(res.data.items.length > 0) {
-            const res2 = await authGet(`/protocols/${res.data.items[0].id}`);
-            setProtocol(res2.data);
-            setLoading(false);
-        } else {
-            setLoading(false);
-        }
-    };
-
-    const returnProtocol = async () => {
-        setLoading(true);
-        const res = await authDelete(`/protocols/${protocol.id}/assignees/${user.id}`);
-
-        setLoading(false);
-        setMessage(`Протокол ${protocol.id} ВЪРНАТ без взето решение.`);
-        setProtocol(null);
-    };
-
-    const nextProtocol = async () => {
-
-        setLoading(true);
-        
-        const res = await authPost('/protocols/assign');
-        
-        if(res.status === 204) {
-            setMessage(`Опашката за протоколи е празна`);
-        } else {
-            const res2 = await authGet(`/protocols/${res.data.id}`);
-            setProtocol(res2.data);
-        }
-
-        setLoading(false);
-    };
-
-    const processingDone = message => {
-        setMessage(message);
-        setProtocol(null);
-    };
-
-    const reorderPictures = newPictures => {
-        setProtocol({...protocol, pictures: newPictures})
-    };
-
-    return(
-        loading? <Loading fullScreen/> :
-        !protocol?
-            <ReadyScreen>
-                <h1 style={{textAlign: 'center', fontSize: '54px'}}>
-                    <BackButton onClick={history.goBack}>
-                        <FontAwesomeIcon icon={faChevronLeft}/>
-                    </BackButton>
-                    Валидация на протоколи
-                </h1>
-                <hr/>
-                {!message? 
-                    <p>Когато сте готови, натиснете бутона долу и ще ви бъде назначен протокол.</p> : 
-                    <Message>{message}</Message>
-                }
-                <NextProtocolButton onClick={nextProtocol}>
-                    <FontAwesomeIcon icon={faFile}/> Следващ протокол
-                </NextProtocolButton>
-            </ReadyScreen> :
-            <VerifyProtocolInfo 
-                protocol={protocol}
-                reorderPictures={reorderPictures}
-                returnProtocol={returnProtocol}
-                setLoading={setLoading}
-                processingDone={processingDone}
-            />
+export default (props) => {
+  const [protocol, setProtocol] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [message, setMessage] = useState(null);
+
+  const history = useHistory();
+
+  const { token, user, authGet, authDelete, authPost } =
+    useContext(AuthContext);
+
+  useEffect(() => {
+    init();
+  }, []);
+
+  const init = async () => {
+    const res = await authGet(`/protocols?status=received&assignee=${user.id}`);
+
+    if (res.data.items.length > 0) {
+      const res2 = await authGet(`/protocols/${res.data.items[0].id}`);
+      setProtocol(res2.data);
+      setLoading(false);
+    } else {
+      setLoading(false);
+    }
+  };
+
+  const returnProtocol = async () => {
+    setLoading(true);
+    const res = await authDelete(
+      `/protocols/${protocol.id}/assignees/${user.id}`
     );
-};
\ No newline at end of file
+
+    setLoading(false);
+    setMessage(`Протокол ${protocol.id} ВЪРНАТ без взето решение.`);
+    setProtocol(null);
+  };
+
+  const nextProtocol = async () => {
+    setLoading(true);
+
+    const res = await authPost('/protocols/assign');
+
+    if (res.status === 204) {
+      setMessage(`Опашката за протоколи е празна`);
+    } else {
+      const res2 = await authGet(`/protocols/${res.data.id}`);
+      setProtocol(res2.data);
+    }
+
+    setLoading(false);
+  };
+
+  const processingDone = (message) => {
+    setMessage(message);
+    setProtocol(null);
+  };
+
+  const reorderPictures = (newPictures) => {
+    setProtocol({ ...protocol, pictures: newPictures });
+  };
+
+  return loading ? (
+    <Loading fullScreen />
+  ) : !protocol ? (
+    <ReadyScreen>
+      <h1 style={{ textAlign: 'center', fontSize: '54px' }}>
+        <BackButton onClick={history.goBack}>
+          <FontAwesomeIcon icon={faChevronLeft} />
+        </BackButton>
+        Валидация на протоколи
+      </h1>
+      <hr />
+      {!message ? (
+        <p>
+          Когато сте готови, натиснете бутона долу и ще ви бъде назначен
+          протокол.
+        </p>
+      ) : (
+        <Message>{message}</Message>
+      )}
+      <NextProtocolButton onClick={nextProtocol}>
+        <FontAwesomeIcon icon={faFile} /> Следващ протокол
+      </NextProtocolButton>
+    </ReadyScreen>
+  ) : (
+    <VerifyProtocolInfo
+      protocol={protocol}
+      reorderPictures={reorderPictures}
+      returnProtocol={returnProtocol}
+      setLoading={setLoading}
+      processingDone={processingDone}
+    />
+  );
+};
diff --git a/src/components/process_protocols/VerifyProtocolInfo.js b/src/components/process_protocols/VerifyProtocolInfo.js
index b53bf14..c14894a 100644
--- a/src/components/process_protocols/VerifyProtocolInfo.js
+++ b/src/components/process_protocols/VerifyProtocolInfo.js
@@ -416,4 +416,4 @@ export default props => {
             </ProtocolInfoSection>
         </div>
     );
-};
+};
\ No newline at end of file
diff --git a/src/components/process_protocols/protocol_photos/ProtocolPage.js b/src/components/process_protocols/protocol_photos/ProtocolPage.js
index 2785205..71114e0 100644
--- a/src/components/process_protocols/protocol_photos/ProtocolPage.js
+++ b/src/components/process_protocols/protocol_photos/ProtocolPage.js
@@ -5,89 +5,94 @@ import styled from 'styled-components';
 import { SpinnerCircularFixed } from 'spinners-react';
 
 const ProtocolPageImage = styled.img`
-    ${props => {
-        const scale = props.zoom / 100;
-        const w = props.dims.width;
-        const h = props.dims.height;
-        const ratio = w / h;
+  ${(props) => {
+    const scale = props.zoom / 100;
+    const w = props.dims.width;
+    const h = props.dims.height;
+    const ratio = w / h;
 
-        if(props.rotation === 90 || props.rotation === 270) {
-            return `
+    if (props.rotation === 90 || props.rotation === 270) {
+      return `
                 width: ${w * ratio * scale}px !important; 
                 height: ${w * scale}px !important;
                 position: absolute;
                 //padding: 0 ${((w * (1 - ratio)) / 2) * scale}px;
             `;
-        } else {
-            return `
+    } else {
+      return `
                 width: ${w * scale}px !important; 
                 height: ${h * scale}px !important;
                 padding: 0;
             `;
-        }
-    }}
-    ${props => { 
-        const w = props.dims.width;
-        const h = props.dims.height;
+    }
+  }}
+  ${(props) => {
+    const w = props.dims.width;
+    const h = props.dims.height;
 
-        return props.rotation? `
+    return props.rotation
+      ? `
             transform-origin: 50% 50%;
             transform: rotate(${props.rotation}deg)
-                ${props.rotation === 90? `
+                ${
+                  props.rotation === 90
+                    ? `
                     translate(
                         ${0}px, 
-                        ${(w * ((w / h) - 1)) / 2}px
-                    );` :
-                props.rotation === 270? `
+                        ${(w * (w / h - 1)) / 2}px
+                    );`
+                    : props.rotation === 270
+                    ? `
                     translate(
                         ${0}px, 
-                        ${(w * (1 - (w / h))) / 2}px
-                    );` : 
-                `;`
-    }` : ''}}
-    ${props => !props.hide? '' : 'display: none;'}
+                        ${(w * (1 - w / h)) / 2}px
+                    );`
+                    : `;`
+                }`
+      : '';
+  }}
+    ${(props) => (!props.hide ? '' : 'display: none;')}
 `;
 
-export default props => {
-
-    const [loading, setLoading] = useState(true);
-    const [dims, setDims] = useState({width: 0, height: 0});
-    const ref = useRef();
-    
-    useEffect(() => {
-        window.addEventListener('resize', resizeHandler);
-        
-        return () => {
-            window.removeEventListener('resize', resizeHandler);
-        };
-    }, []);
+export default (props) => {
+  const [loading, setLoading] = useState(true);
+  const [dims, setDims] = useState({ width: 0, height: 0 });
+  const ref = useRef();
 
-    const resizeHandler = () => {
-        if(ref.current) {
-            const containerWidth = ref.current.parentElement.clientWidth;
-            const ratio = ref.current.naturalWidth / containerWidth;
-            setDims({
-                width: ref.current.naturalWidth / ratio,
-                height: ref.current.naturalHeight / ratio,
-            });
+  useEffect(() => {
+    window.addEventListener('resize', resizeHandler);
 
-            const aspectRatio = ref.current.naturalWidth / ref.current.naturalHeight;
-            props.imageLoaded(ref.current.naturalWidth / ratio * aspectRatio);
-        }
+    return () => {
+      window.removeEventListener('resize', resizeHandler);
     };
+  }, []);
 
-    const imageLoaded = ev => {
-        setLoading(false);
-        const containerWidth = ev.target.parentElement.clientWidth;
-        const ratio = ev.target.naturalWidth / containerWidth;
-        setDims({
-            width: ev.target.naturalWidth / ratio,
-            height: ev.target.naturalHeight / ratio,
-        });
+  const resizeHandler = () => {
+    if (ref.current) {
+      const containerWidth = ref.current.parentElement.clientWidth;
+      const ratio = ref.current.naturalWidth / containerWidth;
+      setDims({
+        width: ref.current.naturalWidth / ratio,
+        height: ref.current.naturalHeight / ratio,
+      });
 
-        const aspectRatio = ev.target.naturalWidth / ev.target.naturalHeight;
-        props.imageLoaded(ev.target.naturalWidth / ratio * aspectRatio);
-    };
+      const aspectRatio = ref.current.naturalWidth / ref.current.naturalHeight;
+      props.imageLoaded((ref.current.naturalWidth / ratio) * aspectRatio);
+    }
+  };
+
+  const imageLoaded = (ev) => {
+    setLoading(false);
+    const containerWidth = ev.target.parentElement.clientWidth;
+    const ratio = ev.target.naturalWidth / containerWidth;
+    setDims({
+      width: ev.target.naturalWidth / ratio,
+      height: ev.target.naturalHeight / ratio,
+    });
+
+    const aspectRatio = ev.target.naturalWidth / ev.target.naturalHeight;
+    props.imageLoaded((ev.target.naturalWidth / ratio) * aspectRatio);
+  };
 
     return(<>
         {!loading || !props.isCurrentPage? null : 
@@ -112,4 +117,4 @@ export default props => {
                 ref={ref}
             />
         }</>);
-};
\ No newline at end of file
+};
diff --git a/src/components/ImageGallery.js b/src/components/utils/ImageGallery.js
similarity index 100%
rename from src/components/ImageGallery.js
rename to src/components/utils/ImageGallery.js
diff --git a/src/components/utils/Tooltip.js b/src/components/utils/Tooltip.js
new file mode 100644
index 0000000..59e3cdf
--- /dev/null
+++ b/src/components/utils/Tooltip.js
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+
+const TooltipContainer = styled.div`
+  position: relative;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+
+  .tooltip-box {
+    position: absolute;
+    background: rgba(0, 0, 0, 0.7);
+    color: #fff;
+    padding: 5px;
+    border-radius: 5px;
+    top: calc(100% + 5px);
+    display: none;
+    z-index: 1;
+  }
+
+  .tooltip-box.visible {
+    display: block;
+  }
+`;
+
+export default ({ children, text }) => {
+  const [show, setShow] = useState(false);
+
+  return (
+    <TooltipContainer>
+      <div className={show ? 'tooltip-box visible' : 'tooltip-box'}>{text}</div>
+      <div
+        onMouseEnter={() => setShow(true)}
+        onMouseLeave={() => setShow(false)}
+      >
+        {children}
+      </div>
+    </TooltipContainer>
+  );
+};
diff --git a/src/components/utils/Util.js b/src/components/utils/Util.js
new file mode 100644
index 0000000..9464457
--- /dev/null
+++ b/src/components/utils/Util.js
@@ -0,0 +1,149 @@
+const format = function (number, n, x, s, c) {
+  var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\D' : '$') + ')',
+    num = parseFloat(number).toFixed(Math.max(0, ~~n));
+
+  return (c ? num.replace('.', c) : num).replace(
+    new RegExp(re, 'g'),
+    '$&' + (s || ',')
+  );
+};
+
+const formatLv = function (number) {
+  return format(number, 2, 3, ' ', ',');
+};
+
+const formatPop = function (number) {
+  return format(Math.floor(number), 0, 3, ' ', ',');
+};
+
+const pad = (num) => {
+  var s = String(num);
+  while (s.length < 2) {
+    s = '0' + s;
+  }
+  return s;
+};
+
+const month = (monthStr) => {
+  switch (monthStr) {
+    case 0:
+      return 'януари';
+      break;
+    case 1:
+      return 'февруари';
+      break;
+    case 2:
+      return 'март';
+      break;
+    case 3:
+      return 'април';
+      break;
+    case 4:
+      return 'май';
+      break;
+    case 5:
+      return 'юни';
+      break;
+    case 6:
+      return 'юли';
+      break;
+    case 7:
+      return 'август';
+      break;
+    case 8:
+      return 'септември';
+      break;
+    case 9:
+      return 'октомври';
+      break;
+    case 10:
+      return 'ноември';
+      break;
+    case 11:
+      return 'декември';
+      break;
+  }
+};
+
+const formatDay = (d) => {
+  if (d >= 10 && d <= 20) return d + '-ти';
+
+  switch (d % 10) {
+    case 1:
+      return d + '-ви';
+      break;
+    case 2:
+      return d + '-ри';
+      break;
+    case 7:
+    case 8:
+      return d + '-ми';
+      break;
+    default:
+      return d + '-ти';
+      break;
+  }
+};
+
+const formatDate = (dateTime) => {
+  const date = new Date(dateTime);
+
+  return (
+    formatDay(date.getDate()) +
+    ' ' +
+    month(date.getMonth()) +
+    ' ' +
+    date.getFullYear()
+  );
+};
+
+const formatTime = (dateTime) => {
+  const date = new Date(dateTime);
+  return pad(date.getHours()) + ':' + pad(date.getMinutes());
+};
+
+const formatDateTime = (dateTime) => {
+  return formatTime(dateTime) + ' ' + formatDateShort(dateTime);
+};
+
+const formatSecs = (secs) => {
+  return pad(Math.floor(secs / 60)) + ':' + pad(secs % 60);
+};
+
+const formatDateShort = (dateTime) => {
+  const date = new Date(dateTime);
+
+  return (
+    pad(date.getDate()) +
+    '.' +
+    pad(date.getMonth() + 1) +
+    '.' +
+    pad(date.getFullYear())
+  );
+};
+
+const mapRoleLocalization = (roles, roleValue) => {
+  return roles?.find((role) => role.role === roleValue).roleLocalized;
+};
+
+const checkPaths = (path1, path2) => {
+  if (!path1 || !path2) return false;
+
+  if (path1[path1.length - 1] !== '/') path1 = path1 + '/';
+  if (path2[path2.length - 1] !== '/') path2 = path2 + '/';
+
+  return path1 === path2;
+};
+
+module.exports = {
+  formatLv,
+  formatPop,
+  formatDate,
+  formatDateShort,
+  formatDateTime,
+  formatTime,
+  formatSecs,
+  format,
+  checkPaths,
+  mapRoleLocalization,
+};