3 files changed, 15 insertions, 12 deletions
diff --git a/frontend/src/views/Filters.js b/frontend/src/views/Filters.js
index 78f0342..b62e7eb 100644
--- a/frontend/src/views/Filters.js
+++ b/frontend/src/views/Filters.js
@@ -1,7 +1,8 @@
 import React, {Component} from 'react';
 import './Services.scss';
-import {Button, Col, Container, Modal, Row, Table} from "react-bootstrap";
+import {Col, Container, Modal, Row, Table} from "react-bootstrap";
 import {filtersDefinitions, filtersNames} from "../components/filters/FiltersDefinitions";
+import ButtonField from "../components/fields/ButtonField";
 
 class Filters extends Component {
 
@@ -89,7 +90,7 @@ class Filters extends Component {
                     </Container>
                 </Modal.Body>
                 <Modal.Footer className="dialog-footer">
-                    <Button variant="red" onClick={this.props.onHide}>close</Button>
+                    <ButtonField variant="red" bordered onClick={this.props.onHide} name="close" />
                 </Modal.Footer>
             </Modal>
         );
diff --git a/frontend/src/views/Header.js b/frontend/src/views/Header.js
index a022636..0b82011 100644
--- a/frontend/src/views/Header.js
+++ b/frontend/src/views/Header.js
@@ -4,6 +4,7 @@ import './Header.scss';
 import {Button} from "react-bootstrap";
 import {filtersDefinitions, filtersNames} from "../components/filters/FiltersDefinitions";
 import {Link} from "react-router-dom";
+import ButtonField from "../components/fields/ButtonField";
 
 class Header extends Component {
 
@@ -68,16 +69,16 @@ class Header extends Component {
 
                     <div className="col">
                         <div className="header-buttons">
-                            <Button variant="pink" onClick={this.props.onOpenFilters}>filters</Button>
+                            <ButtonField variant="pink" onClick={this.props.onOpenFilters} name="filters" bordered />
                             <Link to="/pcaps">
-                                <Button variant="purple">pcaps</Button>
+                                <ButtonField variant="purple" name="pcaps" bordered />
                             </Link>
                             <Link to="/rules">
-                                <Button variant="deep-purple">rules</Button>
+                                <ButtonField variant="deep-purple" name="rules" bordered />
                             </Link>
-                            <Button variant="indigo" onClick={this.props.onOpenServices}>services</Button>
-                            <Button variant="blue" onClick={this.props.onOpenConfig}
-								disabled={false}>config</Button>
+                            <ButtonField variant="indigo" onClick={this.props.onOpenServices} name="services" bordered />
+                            <ButtonField variant="blue" onClick={this.props.onOpenConfig}
+								disabled={false} name="config" bordered />
                         </div>
                     </div>
                 </div>
diff --git a/frontend/src/views/Header.scss b/frontend/src/views/Header.scss
index 71d49e3..15d1375 100644
--- a/frontend/src/views/Header.scss
+++ b/frontend/src/views/Header.scss
@@ -14,11 +14,12 @@
   }
 
   .header-buttons {
-    margin: 5px 0;
-    text-align: right;
+    margin: 7px 0;
+    display: flex;
+    justify-content: flex-end;
 
-    button {
-      margin-left: 10px;
+    .button-field {
+      margin-left: 7px;
     }
   }