nfproxy module writing: written part of the firegex lib, frontend refactored and improved, c++ improves

2025-02-20 19:51:28 +01:00
parent d6e7cab353
commit 8652f40235
51 changed files with 1864 additions and 343 deletions
--- a/frontend/bun.lock
+++ b/frontend/bun.lock
@@ -5,17 +5,19 @@
      "name": "firegex-frontend",
      "dependencies": {
        "@hello-pangea/dnd": "^16.6.0",
-        "@mantine/core": "^7.16.2",
-        "@mantine/form": "^7.16.2",
-        "@mantine/hooks": "^7.16.2",
-        "@mantine/modals": "^7.16.2",
-        "@mantine/notifications": "^7.16.2",
+        "@mantine/code-highlight": "^7.17.0",
+        "@mantine/core": "^7.16.3",
+        "@mantine/form": "^7.16.3",
+        "@mantine/hooks": "^7.16.3",
+        "@mantine/modals": "^7.16.3",
+        "@mantine/notifications": "^7.16.3",
        "@tanstack/react-query": "^4.36.1",
        "@types/jest": "^27.5.2",
-        "@types/node": "^20.17.16",
+        "@types/node": "^20.17.17",
        "@types/react": "^18.3.18",
        "@types/react-dom": "^18.3.5",
        "buffer": "^6.0.3",
+        "install": "^0.13.0",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
        "react-icons": "^5.4.0",
@@ -141,17 +143,19 @@

    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.25", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ=="],

-    "@mantine/core": ["@mantine/core@7.16.3", "", { "dependencies": { "@floating-ui/react": "^0.26.28", "clsx": "^2.1.1", "react-number-format": "^5.4.3", "react-remove-scroll": "^2.6.2", "react-textarea-autosize": "8.5.6", "type-fest": "^4.27.0" }, "peerDependencies": { "@mantine/hooks": "7.16.3", "react": "^18.x || ^19.x", "react-dom": "^18.x || ^19.x" } }, "sha512-cxhIpfd2i0Zmk9TKdejYAoIvWouMGhzK3OOX+VRViZ5HEjnTQCGl2h3db56ThqB6NfVPCno6BPbt5lwekTtmuQ=="],
+    "@mantine/code-highlight": ["@mantine/code-highlight@7.17.0", "", { "dependencies": { "clsx": "^2.1.1", "highlight.js": "^11.10.0" }, "peerDependencies": { "@mantine/core": "7.17.0", "@mantine/hooks": "7.17.0", "react": "^18.x || ^19.x", "react-dom": "^18.x || ^19.x" } }, "sha512-i6MvxW+PtdRNYHCm8Qa/aiMkLr47EYS0+12rf5XhDVdYZy+0+XiRkwBsxnvzQfKqv0QtH2dchBJDEBMmPB/nVw=="],

-    "@mantine/form": ["@mantine/form@7.16.3", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "klona": "^2.0.6" }, "peerDependencies": { "react": "^18.x || ^19.x" } }, "sha512-GqomUG2Ri5adxYsTU1S5IhKRPcqTG5JkPvMERns8PQAcUz/lvzsnk3wY1v4K5CEbCAdpimle4bSsZTM9g697vg=="],
+    "@mantine/core": ["@mantine/core@7.17.0", "", { "dependencies": { "@floating-ui/react": "^0.26.28", "clsx": "^2.1.1", "react-number-format": "^5.4.3", "react-remove-scroll": "^2.6.2", "react-textarea-autosize": "8.5.6", "type-fest": "^4.27.0" }, "peerDependencies": { "@mantine/hooks": "7.17.0", "react": "^18.x || ^19.x", "react-dom": "^18.x || ^19.x" } }, "sha512-AU5UFewUNzBCUXIq5Jk6q402TEri7atZW61qHW6P0GufJ2W/JxGHRvgmHOVHTVIcuWQRCt9SBSqZoZ/vHs9LhA=="],

-    "@mantine/hooks": ["@mantine/hooks@7.16.3", "", { "peerDependencies": { "react": "^18.x || ^19.x" } }, "sha512-B94FBWk5Sc81tAjV+B3dGh/gKzfqzpzVC/KHyBRWOOyJRqeeRbI/FAaJo4zwppyQo1POSl5ArdyjtDRrRIj2SQ=="],
+    "@mantine/form": ["@mantine/form@7.17.0", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "klona": "^2.0.6" }, "peerDependencies": { "react": "^18.x || ^19.x" } }, "sha512-LONdeb+wL8h9fvyQ339ZFLxqrvYff+b+H+kginZhnr45OBTZDLXNVAt/YoKVFEkynF9WDJjdBVrXKcOZvPgmrA=="],

-    "@mantine/modals": ["@mantine/modals@7.16.3", "", { "peerDependencies": { "@mantine/core": "7.16.3", "@mantine/hooks": "7.16.3", "react": "^18.x || ^19.x", "react-dom": "^18.x || ^19.x" } }, "sha512-BJuDzRugK6xLbuFTTo8NLJumVvVmSYsNVcEtmlXOWTE3NkDGktBXGKo8V1B0XfJ9/d/rZw7HCE0p4i76MtA+bQ=="],
+    "@mantine/hooks": ["@mantine/hooks@7.17.0", "", { "peerDependencies": { "react": "^18.x || ^19.x" } }, "sha512-vo3K49mLy1nJ8LQNb5KDbJgnX0xwt3Y8JOF3ythjB5LEFMptdLSSgulu64zj+QHtzvffFCsMb05DbTLLpVP/JQ=="],

-    "@mantine/notifications": ["@mantine/notifications@7.16.3", "", { "dependencies": { "@mantine/store": "7.16.3", "react-transition-group": "4.4.5" }, "peerDependencies": { "@mantine/core": "7.16.3", "@mantine/hooks": "7.16.3", "react": "^18.x || ^19.x", "react-dom": "^18.x || ^19.x" } }, "sha512-wtEME9kSYfXWYmAmQUZ8c+rwNmhdWRBaW1mlPdQsPkzMqkv4q6yy0IpgwcnuHStSG9EHaQBXazmVxMZJdEAWBQ=="],
+    "@mantine/modals": ["@mantine/modals@7.17.0", "", { "peerDependencies": { "@mantine/core": "7.17.0", "@mantine/hooks": "7.17.0", "react": "^18.x || ^19.x", "react-dom": "^18.x || ^19.x" } }, "sha512-4sfiFxIxMxfm2RH4jXMN+cr8tFS5AexXG4TY7TRN/ySdkiWtFVvDe5l2/KRWWeWwDUb7wQhht8Ompj5KtexlEA=="],

-    "@mantine/store": ["@mantine/store@7.16.3", "", { "peerDependencies": { "react": "^18.x || ^19.x" } }, "sha512-6M2M5+0BrRtnVv+PUmr04tY1RjPqyapaHplo90uK1NMhP/1EIqrwTL9KoEtCNCJ5pog1AQtu0bj0QPbqUvxwLg=="],
+    "@mantine/notifications": ["@mantine/notifications@7.17.0", "", { "dependencies": { "@mantine/store": "7.17.0", "react-transition-group": "4.4.5" }, "peerDependencies": { "@mantine/core": "7.17.0", "@mantine/hooks": "7.17.0", "react": "^18.x || ^19.x", "react-dom": "^18.x || ^19.x" } }, "sha512-xejr1WW02NrrrE4HPDoownILJubcjLLwCDeTk907ZeeHKBEPut7RukEq6gLzOZBhNhKdPM+vCM7GcbXdaLZq/Q=="],
+
+    "@mantine/store": ["@mantine/store@7.17.0", "", { "peerDependencies": { "react": "^18.x || ^19.x" } }, "sha512-nhWRYRLqvAjrD/ApKCXxuHyTWg2b5dC06Z5gmO8udj4pBgndNf9nmCl+Of90H6bgOa56moJA7UQyXoF1SfxqVg=="],

    "@rollup/pluginutils": ["@rollup/pluginutils@5.1.4", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-walker": "^2.0.2", "picomatch": "^4.0.2" }, "peerDependencies": { "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" }, "optionalPeers": ["rollup"] }, "sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ=="],

@@ -205,7 +209,7 @@

    "@types/jest": ["@types/jest@27.5.2", "", { "dependencies": { "jest-matcher-utils": "^27.0.0", "pretty-format": "^27.0.0" } }, "sha512-mpT8LJJ4CMeeahobofYWIjFo0xonRS/HfxnVEPMPFSQdGUt1uHCnoPT7Zhb+sjDU2wz0oKV0OLUR0WzrHNgfeA=="],

-    "@types/node": ["@types/node@20.17.17", "", { "dependencies": { "undici-types": "~6.19.2" } }, "sha512-/WndGO4kIfMicEQLTi/mDANUu/iVUhT7KboZPdEqqHQ4aTS+3qT3U5gIqWDFV+XouorjfgGqvKILJeHhuQgFYg=="],
+    "@types/node": ["@types/node@20.17.19", "", { "dependencies": { "undici-types": "~6.19.2" } }, "sha512-LEwC7o1ifqg/6r2gn9Dns0f1rhK+fPFDoMiceTJ6kWmVk6bgXBI/9IOWfVan4WiAavK9pIVWdX0/e3J+eEUh5A=="],

    "@types/prop-types": ["@types/prop-types@15.7.14", "", {}, "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ=="],

@@ -295,12 +299,16 @@

    "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="],

+    "highlight.js": ["highlight.js@11.11.1", "", {}, "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w=="],
+
    "hoist-non-react-statics": ["hoist-non-react-statics@3.3.2", "", { "dependencies": { "react-is": "^16.7.0" } }, "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw=="],

    "ieee754": ["ieee754@1.2.1", "", {}, "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="],

    "import-fresh": ["import-fresh@3.3.1", "", { "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" } }, "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ=="],

+    "install": ["install@0.13.0", "", {}, "sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA=="],
+
    "is-arrayish": ["is-arrayish@0.2.1", "", {}, "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="],

    "is-what": ["is-what@4.1.16", "", {}, "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A=="],
@@ -365,7 +373,7 @@

    "react-dom": ["react-dom@19.0.0", "", { "dependencies": { "scheduler": "^0.25.0" }, "peerDependencies": { "react": "^19.0.0" } }, "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ=="],

-    "react-icons": ["react-icons@5.4.0", "", { "peerDependencies": { "react": "*" } }, "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ=="],
+    "react-icons": ["react-icons@5.5.0", "", { "peerDependencies": { "react": "*" } }, "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw=="],

    "react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],

@@ -379,9 +387,9 @@

    "react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],

-    "react-router": ["react-router@7.1.5", "", { "dependencies": { "@types/cookie": "^0.6.0", "cookie": "^1.0.1", "set-cookie-parser": "^2.6.0", "turbo-stream": "2.4.0" }, "peerDependencies": { "react": ">=18", "react-dom": ">=18" }, "optionalPeers": ["react-dom"] }, "sha512-8BUF+hZEU4/z/JD201yK6S+UYhsf58bzYIDq2NS1iGpwxSXDu7F+DeGSkIXMFBuHZB21FSiCzEcUb18cQNdRkA=="],
+    "react-router": ["react-router@7.2.0", "", { "dependencies": { "@types/cookie": "^0.6.0", "cookie": "^1.0.1", "set-cookie-parser": "^2.6.0", "turbo-stream": "2.4.0" }, "peerDependencies": { "react": ">=18", "react-dom": ">=18" }, "optionalPeers": ["react-dom"] }, "sha512-fXyqzPgCPZbqhrk7k3hPcCpYIlQ2ugIXDboHUzhJISFVy2DEPsmHgN588MyGmkIOv3jDgNfUE3kJi83L28s/LQ=="],

-    "react-router-dom": ["react-router-dom@7.1.5", "", { "dependencies": { "react-router": "7.1.5" }, "peerDependencies": { "react": ">=18", "react-dom": ">=18" } }, "sha512-/4f9+up0Qv92D3bB8iN5P1s3oHAepSGa9h5k6tpTFlixTTskJZwKGhJ6vRJ277tLD1zuaZTt95hyGWV1Z37csQ=="],
+    "react-router-dom": ["react-router-dom@7.2.0", "", { "dependencies": { "react-router": "7.2.0" }, "peerDependencies": { "react": ">=18", "react-dom": ">=18" } }, "sha512-cU7lTxETGtQRQbafJubvZKHEn5izNABxZhBY0Jlzdv0gqQhCPQt2J8aN5ZPjS6mQOXn5NnirWNh+FpE8TTYN0Q=="],

    "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],

--- a/frontend/package.json
+++ b/frontend/package.json
@@ -5,21 +5,23 @@
  "private": true,
  "dependencies": {
    "@hello-pangea/dnd": "^16.6.0",
-    "@mantine/core": "^7.16.3",
-    "@mantine/form": "^7.16.3",
-    "@mantine/hooks": "^7.16.3",
-    "@mantine/modals": "^7.16.3",
-    "@mantine/notifications": "^7.16.3",
+    "@mantine/code-highlight": "^7.17.0",
+    "@mantine/core": "^7.17.0",
+    "@mantine/form": "^7.17.0",
+    "@mantine/hooks": "^7.17.0",
+    "@mantine/modals": "^7.17.0",
+    "@mantine/notifications": "^7.17.0",
    "@tanstack/react-query": "^4.36.1",
    "@types/jest": "^27.5.2",
-    "@types/node": "^20.17.17",
+    "@types/node": "^20.17.19",
    "@types/react": "^18.3.18",
    "@types/react-dom": "^18.3.5",
    "buffer": "^6.0.3",
+    "install": "^0.13.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
-    "react-icons": "^5.4.0",
-    "react-router-dom": "^7.1.5",
+    "react-icons": "^5.5.0",
+    "react-router-dom": "^7.2.0",
    "socket.io-client": "^4.8.1",
    "typescript": "^5.7.3",
    "web-vitals": "^2.1.4",
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -12,6 +12,8 @@ import ServiceDetailsNFRegex from './pages/NFRegex/ServiceDetails';
 import PortHijack from './pages/PortHijack';
 import { Firewall } from './pages/Firewall';
 import { useQueryClient } from '@tanstack/react-query';
+import NFProxy from './pages/NFProxy';
+import ServiceDetailsNFProxy from './pages/NFProxy/ServiceDetails';


 const socket = IS_DEV?io("ws://"+DEV_IP_BACKEND, {transports: ["websocket"], path:"/sock/socket.io" }):io({transports: ["websocket"], path:"/sock/socket.io"});
@@ -148,6 +150,9 @@ function App() {
                  <Route path="nfregex" element={<NFRegex><Outlet /></NFRegex>} >
                    <Route path=":srv" element={<ServiceDetailsNFRegex />} />
                  </Route>
+                  <Route path="nfproxy" element={<NFProxy><Outlet /></NFProxy>} >
+                    <Route path=":srv" element={<ServiceDetailsNFProxy />} />
+                  </Route>
                  <Route path="firewall" element={<Firewall />} />
                  <Route path="porthijack" element={<PortHijack />} />
                <Route path="*" element={<HomeRedirector />} />
--- a/frontend/src/components/AddNewRegex.tsx
+++ b/frontend/src/components/AddNewRegex.tsx
@@ -2,8 +2,9 @@ import { Button, Group, Space, TextInput, Notification, Switch, Modal, Select }
 import { useForm } from '@mantine/form';
 import { useState } from 'react';
 import { RegexAddForm } from '../js/models';
-import { b64decode, b64encode, getapiobject, okNotify } from '../js/utils';
+import { b64decode, b64encode, okNotify } from '../js/utils';
 import { ImCross } from "react-icons/im"
+import { nfregex } from './NFRegex/utils';

 type RegexAddInfo = {
    regex:string,
@@ -47,7 +48,7 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
            active: !values.deactive
        }
        setSubmitLoading(false)
-        getapiobject().regexesadd(request).then( res => {
+        nfregex.regexesadd(request).then( res => {
            if (!res){
                setSubmitLoading(false)
                close();
--- a/frontend/src/components/NFProxy/AddEditService.tsx
+++ b/frontend/src/components/NFProxy/AddEditService.tsx
@@ -0,0 +1,139 @@
+import { Button, Group, Space, TextInput, Notification, Modal, Switch, SegmentedControl, Box, Tooltip } from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { useEffect, useState } from 'react';
+import { okNotify, regex_ipv4, regex_ipv6 } from '../../js/utils';
+import { ImCross } from "react-icons/im"
+import { nfproxy, Service } from './utils';
+import PortAndInterface from '../PortAndInterface';
+import { IoMdInformationCircleOutline } from "react-icons/io";
+import { ServiceAddForm as ServiceAddFormOriginal } from './utils';
+
+type ServiceAddForm = ServiceAddFormOriginal & {autostart: boolean}
+
+function AddEditService({ opened, onClose, edit }:{ opened:boolean, onClose:()=>void, edit?:Service }) {
+
+    const initialValues = {
+        name: "",
+        port:edit?.port??8080,
+        ip_int:edit?.ip_int??"",
+        proto:edit?.proto??"tcp",
+        fail_open: edit?.fail_open??false,
+        autostart: true
+    }
+    
+    const form = useForm({
+        initialValues: initialValues,
+        validate:{
+            name: (value) => edit? null : value !== "" ? null : "Service name is required",
+            port: (value) => (value>0 && value<65536) ? null : "Invalid port",
+            proto: (value) => ["tcp","udp"].includes(value) ? null : "Invalid protocol",
+            ip_int: (value) => (value.match(regex_ipv6) || value.match(regex_ipv4)) ? null : "Invalid IP address",
+        }
+    })
+
+    useEffect(() => {
+        if (opened){
+            form.setInitialValues(initialValues)
+            form.reset()
+        }
+    }, [opened])
+
+    const close = () =>{
+        onClose()
+        form.reset()
+        setError(null)
+    }
+
+    const [submitLoading, setSubmitLoading] = useState(false)
+    const [error, setError] = useState<string|null>(null)
+ 
+    const submitRequest = ({ name, port, autostart, proto, ip_int, fail_open }:ServiceAddForm) =>{
+        setSubmitLoading(true)
+        if (edit){
+            nfproxy.settings(edit.service_id, { port, proto, ip_int, fail_open }).then( res => {
+                if (!res){
+                    setSubmitLoading(false)
+                    close();
+                    okNotify(`Service ${name} settings updated`, `Successfully updated settings for service ${name}`)
+                }
+            }).catch( err => {
+                setSubmitLoading(false)
+                setError("Request Failed! [ "+err+" ]")
+            })
+        }else{
+            nfproxy.servicesadd({ name, port, proto, ip_int, fail_open }).then( res => {
+                if (res.status === "ok" && res.service_id){
+                    setSubmitLoading(false)
+                    close();
+                    if (autostart) nfproxy.servicestart(res.service_id)
+                    okNotify(`Service ${name} has been added`, `Successfully added service with port ${port}`)
+                }else{
+                    setSubmitLoading(false)
+                    setError("Invalid request! [ "+res.status+" ]")
+                }
+            }).catch( err => {
+                setSubmitLoading(false)
+                setError("Request Failed! [ "+err+" ]")
+            })
+        }
+    }
+
+
+  return <Modal size="xl" title={edit?`Editing ${edit.name} service`:"Add a new service"} opened={opened} onClose={close} closeOnClickOutside={false} centered>
+    <form onSubmit={form.onSubmit(submitRequest)}>
+            {!edit?<TextInput
+                label="Service name"
+                placeholder="Challenge 01"
+                {...form.getInputProps('name')}
+            />:null}
+            <Space h="md" />
+            <PortAndInterface form={form} int_name="ip_int" port_name="port" label={"Public IP Interface and port (ipv4/ipv6 + CIDR allowed)"} />            
+            <Space h="md" />
+
+            <Box className='center-flex'>
+                <Box>
+                    {!edit?<Switch
+                        label="Auto-Start Service"
+                        {...form.getInputProps('autostart', { type: 'checkbox' })}
+                    />:null}
+                    <Space h="sm" />
+                    <Switch
+                        label={<Box className='center-flex'>
+                            Enable fail-open nfqueue
+                            <Space w="xs" />
+                            <Tooltip label={<>
+                                Firegex use internally nfqueue to handle packets<br />enabling this option will allow packets to pass through the firewall <br /> in case the filtering is too slow or too many traffic is coming<br />
+                            </>}>
+                                <IoMdInformationCircleOutline size={15} />
+                            </Tooltip>
+                        </Box>}
+                        {...form.getInputProps('fail_open', { type: 'checkbox' })}
+                    />
+                </Box>
+                <Box className="flex-spacer"></Box>
+                <SegmentedControl
+                    data={[
+                        { label: 'TCP', value: 'tcp' },
+                        { label: 'UDP', value: 'udp' },
+                    ]}
+                    {...form.getInputProps('proto')}
+                />
+            </Box>      
+
+            <Group justify='flex-end' mt="md" mb="sm">
+                <Button loading={submitLoading} type="submit" disabled={edit?!form.isDirty():false}>{edit?"Edit Service":"Add Service"}</Button>
+            </Group>
+
+            {error?<>
+                <Space h="md" />
+                <Notification icon={<ImCross size={14} />} color="red" onClose={()=>{setError(null)}}>
+                    Error: {error}
+                </Notification><Space h="md" />
+            </>:null}
+            
+        </form>
+    </Modal>
+
+}
+
+export default AddEditService;
--- a/frontend/src/components/NFProxy/ServiceRow/RenameForm.tsx
+++ b/frontend/src/components/NFProxy/ServiceRow/RenameForm.tsx
@@ -0,0 +1,68 @@
+import { Button, Group, Space, TextInput, Notification, Modal } from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { useEffect, useState } from 'react';
+import { okNotify } from '../../../js/utils';
+import { ImCross } from "react-icons/im"
+import { nfproxy, Service } from '../utils';
+
+function RenameForm({ opened, onClose, service }:{ opened:boolean, onClose:()=>void, service:Service }) { 
+
+    const form = useForm({
+        initialValues: { name:service.name },
+        validate:{ name: (value) => value !== ""? null : "Service name is required" }
+    })
+
+    const close = () =>{
+        onClose()
+        form.reset()
+        setError(null)
+    }
+
+    useEffect(()=> form.setFieldValue("name", service.name),[opened])
+
+    const [submitLoading, setSubmitLoading] = useState(false)
+    const [error, setError] = useState<string|null>(null)
+
+    const submitRequest = ({ name }:{ name:string }) => {
+        setSubmitLoading(true)
+        nfproxy.servicerename(service.service_id, name).then( res => {
+            if (!res){
+                setSubmitLoading(false)
+                close();
+                okNotify(`Service ${service.name} has been renamed in ${ name }`, `Successfully renamed service on port ${service.port}`)
+            }else{
+                setSubmitLoading(false)
+                setError("Error: [ "+res+" ]")
+            }
+        }).catch( err => {
+            setSubmitLoading(false)
+            setError("Request Failed! [ "+err+" ]")
+        })
+        
+    }    
+
+
+  return <Modal size="xl" title={`Rename '${service.name}' service on port ${service.port}`} opened={opened} onClose={close} closeOnClickOutside={false} centered>
+    <form onSubmit={form.onSubmit(submitRequest)}>
+            <TextInput
+                label="Service Name"
+                placeholder="Awesome Service Name!"
+                {...form.getInputProps('name')}
+            />
+            <Group mt="md" justify="flex-end" mb="sm">
+                <Button loading={submitLoading} type="submit">Rename</Button>
+            </Group>
+            
+            {error?<>
+                <Space h="md" />
+                <Notification icon={<ImCross size={14} />} color="red" onClose={()=>{setError(null)}}>
+                    Error: {error}
+                </Notification><Space h="md" />
+            </>:null}
+            
+        </form>
+    </Modal>
+
+}
+
+export default RenameForm;
--- a/frontend/src/components/NFProxy/ServiceRow/index.tsx
+++ b/frontend/src/components/NFProxy/ServiceRow/index.tsx
@@ -0,0 +1,164 @@
+import { ActionIcon, Badge, Box, Divider, Menu, Space, Title, Tooltip } from '@mantine/core';
+import { useState } from 'react';
+import { FaPlay, FaStop } from 'react-icons/fa';
+import { nfproxy, Service, serviceQueryKey } from '../utils';
+import { MdDoubleArrow, MdOutlineArrowForwardIos } from "react-icons/md"
+import YesNoModal from '../../YesNoModal';
+import { errorNotify, isMediumScreen, okNotify, regex_ipv4 } from '../../../js/utils';
+import { BsTrashFill } from 'react-icons/bs';
+import { BiRename } from 'react-icons/bi'
+import RenameForm from './RenameForm';
+import { MenuDropDownWithButton } from '../../MainLayout';
+import { useQueryClient } from '@tanstack/react-query';
+import { TbPlugConnected } from "react-icons/tb";
+import { FaFilter } from "react-icons/fa";
+import { IoSettingsSharp } from 'react-icons/io5';
+import AddEditService from '../AddEditService';
+import { FaPencilAlt } from "react-icons/fa";
+
+export default function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) {
+
+    let status_color = "gray";
+    switch(service.status){
+        case "stop": status_color = "red"; break;
+        case "active": status_color = "teal"; break;
+    }
+
+    const queryClient = useQueryClient()
+    const [buttonLoading, setButtonLoading] = useState(false)
+    const [tooltipStopOpened, setTooltipStopOpened] = useState(false);
+    const [deleteModal, setDeleteModal] = useState(false)
+    const [renameModal, setRenameModal] = useState(false)
+    const [editModal, setEditModal] = useState(false)
+    const isMedium = isMediumScreen()
+
+    const stopService = async () => {
+        setButtonLoading(true)
+        
+        await nfproxy.servicestop(service.service_id).then(res => {
+            if(!res){
+                okNotify(`Service ${service.name} stopped successfully!`,`The service on ${service.port} has been stopped!`)
+                queryClient.invalidateQueries(serviceQueryKey)
+            }else{
+                errorNotify(`An error as occurred during the stopping of the service ${service.port}`,`Error: ${res}`)
+            }
+        }).catch(err => {
+            errorNotify(`An error as occurred during the stopping of the service ${service.port}`,`Error: ${err}`)
+        })
+        setButtonLoading(false);
+    }
+
+    const startService = async () => {
+        setButtonLoading(true)
+        await nfproxy.servicestart(service.service_id).then(res => {
+            if(!res){
+                okNotify(`Service ${service.name} started successfully!`,`The service on ${service.port} has been started!`)
+                queryClient.invalidateQueries(serviceQueryKey)
+            }else{
+                errorNotify(`An error as occurred during the starting of the service ${service.port}`,`Error: ${res}`)
+            }
+        }).catch(err => {
+            errorNotify(`An error as occurred during the starting of the service ${service.port}`,`Error: ${err}`)
+        })
+        setButtonLoading(false)
+    }
+
+    const deleteService = () => {
+        nfproxy.servicedelete(service.service_id).then(res => {
+            if (!res){
+                okNotify("Service delete complete!",`The service ${service.name} has been deleted!`)
+                queryClient.invalidateQueries(serviceQueryKey)
+            }else
+                errorNotify("An error occurred while deleting a service",`Error: ${res}`)
+        }).catch(err => {
+            errorNotify("An error occurred while deleting a service",`Error: ${err}`)
+        })
+        
+    }
+
+    return <>
+        <Box className='firegex__nfregex__rowbox'>
+            <Box className="firegex__nfregex__row" style={{width:"100%", flexDirection: isMedium?"row":"column"}}>
+                <Box>
+                    <Box className="center-flex" style={{ justifyContent: "flex-start" }}>
+                        <MdDoubleArrow size={30} style={{color: "white"}}/>
+                        <Title className="firegex__nfregex__name" ml="xs">
+                            {service.name}
+                        </Title>
+                    </Box>
+                    <Box className="center-flex" style={{ gap: 8, marginTop: 15, justifyContent: "flex-start" }}>
+                        <Badge color={status_color} radius="md" size="lg" variant="filled">{service.status}</Badge>
+                        <Badge size="lg" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient" radius="md" style={{ fontSize: "110%" }}>
+                            :{service.port}
+                        </Badge>
+                    </Box>
+                    {isMedium?null:<Space w="xl" />}
+                </Box>
+                
+                <Box className={isMedium?"center-flex":"center-flex-row"}>
+                    <Box className="center-flex-row">
+                        <Badge color={service.ip_int.match(regex_ipv4)?"cyan":"pink"} radius="sm" size="md" variant="filled">{service.ip_int} on {service.proto}</Badge>
+                        <Space h="xs" />
+                        <Box className='center-flex'>
+                            <Badge color="yellow" radius="sm" size="md" variant="filled"><FaFilter style={{ marginBottom: -2}} /> {service.blocked_packets}</Badge>
+                            <Space w="xs" />
+                            <Badge color="orange" radius="sm" size="md" variant="filled"><FaPencilAlt style={{ marginBottom: -2}} /> {service.edited_packets}</Badge>
+                            <Space w="xs" />
+                            <Badge color="violet" radius="sm" size="md" variant="filled"><TbPlugConnected style={{ marginBottom: -2}} size={13} /> {service.n_filters}</Badge>
+                        </Box>
+                    </Box>
+                    {isMedium?<Space w="xl" />:<Space h="lg" />}
+                    <Box className="center-flex">
+                        <MenuDropDownWithButton>
+                            <Menu.Item><b>Edit service</b></Menu.Item>
+                            <Menu.Item leftSection={<IoSettingsSharp size={18} />} onClick={()=>setEditModal(true)}>Service Settings</Menu.Item>
+                            <Menu.Item leftSection={<BiRename size={18} />} onClick={()=>setRenameModal(true)}>Change service name</Menu.Item>
+                            <Divider />
+                            <Menu.Label><b>Danger zone</b></Menu.Label>
+                            <Menu.Item color="red" leftSection={<BsTrashFill size={18} />} onClick={()=>setDeleteModal(true)}>Delete Service</Menu.Item>
+                        </MenuDropDownWithButton> 
+                        <Space w="md"/>                        
+                        <Tooltip label="Stop service" zIndex={0} color="red" opened={tooltipStopOpened}>
+                            <ActionIcon color="red" loading={buttonLoading}
+                            onClick={stopService} size="xl" radius="md" variant="filled"
+                            disabled={service.status === "stop"}
+                            aria-describedby="tooltip-stop-id"
+                            onFocus={() => setTooltipStopOpened(false)} onBlur={() => setTooltipStopOpened(false)}
+                            onMouseEnter={() => setTooltipStopOpened(true)} onMouseLeave={() => setTooltipStopOpened(false)}>
+                                <FaStop size="20px" />
+                            </ActionIcon>
+                        </Tooltip>
+                        <Space w="md"/>
+                        <Tooltip label="Start service" zIndex={0} color="teal">
+                            <ActionIcon color="teal" size="xl" radius="md" onClick={startService} loading={buttonLoading}
+                                        variant="filled" disabled={!["stop","pause"].includes(service.status)?true:false}>
+                                <FaPlay size="20px" />
+                            </ActionIcon>
+                        </Tooltip>
+                        {isMedium?<Space w="xl" />:<Space w="md" />} 
+                        {onClick?<Box className='firegex__service_forward_btn'>
+                            <MdOutlineArrowForwardIos onClick={onClick} style={{cursor:"pointer"}} size={25} />
+                        </Box>:null}
+                    </Box>
+                </Box>
+            </Box>
+        </Box>
+        <YesNoModal
+            title='Are you sure to delete this service?'
+            description={`You are going to delete the service '${service.port}', causing the stopping of the firewall and deleting all the filters associated. This will cause the shutdown of your service! ⚠️`}
+            onClose={()=>setDeleteModal(false) }
+            action={deleteService}
+            opened={deleteModal}
+        />
+        <RenameForm
+            onClose={()=>setRenameModal(false)}
+            opened={renameModal}
+            service={service}
+        />
+        <AddEditService
+            opened={editModal}
+            onClose={()=>setEditModal(false)}
+            edit={service}
+        />
+    </>
+}
--- a/frontend/src/components/NFProxy/utils.ts
+++ b/frontend/src/components/NFProxy/utils.ts
@@ -0,0 +1,99 @@
+import { PyFilter, ServerResponse } from "../../js/models"
+import { deleteapi, getapi, postapi, putapi } from "../../js/utils"
+import { useQuery } from "@tanstack/react-query"
+
+export type Service = {
+    service_id:string,
+    name:string,
+    status:string,
+    port:number,
+    proto: string,
+    ip_int: string,
+    n_filters:number,
+    edited_packets:number,
+    blocked_packets:number,
+    fail_open:boolean,
+}
+
+export type ServiceAddForm = {
+    name:string,
+    port:number,
+    proto:string,
+    ip_int:string,
+    fail_open: boolean,
+}
+
+export type ServiceSettings = {
+    port?:number,
+    proto?:string,
+    ip_int?:string,
+    fail_open?: boolean,
+}
+
+export type ServiceAddResponse = {
+    status: string,
+    service_id?: string,
+}
+
+export const serviceQueryKey = ["nfproxy","services"]
+
+export const nfproxyServiceQuery = () => useQuery({queryKey:serviceQueryKey, queryFn:nfproxy.services})
+export const nfproxyServicePyfiltersQuery = (service_id:string) => useQuery({
+    queryKey:[...serviceQueryKey,service_id,"pyfilters"],
+    queryFn:() => nfproxy.servicepyfilters(service_id)
+})
+
+export const nfproxyServiceFilterCodeQuery = (service_id:string) => useQuery({
+    queryKey:[...serviceQueryKey,service_id,"pyfilters","code"],
+    queryFn:() => nfproxy.getpyfilterscode(service_id)
+})
+
+export const nfproxy = {
+    services: async () => {
+        return await getapi("nfproxy/services") as Service[];
+    },
+    serviceinfo: async (service_id:string) => {
+        return await getapi(`nfproxy/services/${service_id}`) as Service;
+    },
+    pyfilterenable: async (regex_id:number) => {
+        const { status } = await postapi(`nfproxy/pyfilters/${regex_id}/enable`) as ServerResponse;
+        return status === "ok"?undefined:status
+    },
+    pyfilterdisable: async (regex_id:number) => {
+        const { status } = await postapi(`nfproxy/pyfilters/${regex_id}/disable`) as ServerResponse;
+        return status === "ok"?undefined:status
+    },
+    servicestart: async (service_id:string) => {
+        const { status } = await postapi(`nfproxy/services/${service_id}/start`) as ServerResponse;
+        return status === "ok"?undefined:status
+    },
+    servicerename: async (service_id:string, name: string) => {
+        const { status } = await putapi(`nfproxy/services/${service_id}/rename`,{ name }) as ServerResponse;
+        return status === "ok"?undefined:status
+    },
+    servicestop: async (service_id:string) => {
+        const { status } = await postapi(`nfproxy/services/${service_id}/stop`) as ServerResponse;
+        return status === "ok"?undefined:status
+    },
+    servicesadd: async (data:ServiceAddForm) => {
+        return await postapi("nfproxy/services",data) as ServiceAddResponse;
+    },
+    servicedelete: async (service_id:string) => {
+        const { status } = await deleteapi(`nfproxy/services/${service_id}`) as ServerResponse;
+        return status === "ok"?undefined:status
+    },
+    servicepyfilters: async (service_id:string) => {
+        return await getapi(`nfproxy/services/${service_id}/pyfilters`) as PyFilter[];
+    },
+    settings: async (service_id:string, data:ServiceSettings) => {
+        const { status } = await putapi(`nfproxy/services/${service_id}/settings`,data) as ServerResponse;
+        return status === "ok"?undefined:status
+    },
+    getpyfilterscode: async (service_id:string) => {
+        return await getapi(`nfproxy/services/${service_id}/pyfilters/code`) as string;
+    },
+    setpyfilterscode: async (service_id:string, code:string) => {
+        const { status } = await putapi(`nfproxy/services/${service_id}/pyfilters/code`,{ code }) as ServerResponse;
+        return status === "ok"?undefined:status
+    }
+}
--- a/frontend/src/components/NFRegex/utils.ts
+++ b/frontend/src/components/NFRegex/utils.ts
@@ -36,7 +36,6 @@ export type ServiceAddResponse = {
 }

 export const serviceQueryKey = ["nfregex","services"]
-export const statsQueryKey = ["nfregex","stats"]

 export const nfregexServiceQuery = () => useQuery({queryKey:serviceQueryKey, queryFn:nfregex.services})
 export const nfregexServiceRegexesQuery = (service_id:string) => useQuery({
--- a/frontend/src/components/NavBar/index.tsx
+++ b/frontend/src/components/NavBar/index.tsx
@@ -1,12 +1,12 @@
-import { Collapse, Divider, Group, MantineColor, ScrollArea, Text, ThemeIcon, Title, UnstyledButton, Box, AppShell } from "@mantine/core";
+import { Divider, Group, MantineColor, ScrollArea, Text, ThemeIcon, Title, UnstyledButton, Box, AppShell } from "@mantine/core";
 import { useState } from "react";
-import { IoMdGitNetwork } from "react-icons/io";
-import { MdOutlineExpandLess, MdOutlineExpandMore, MdTransform } from "react-icons/md";
+import { TbPlugConnected } from "react-icons/tb";
 import { useNavigate } from "react-router-dom";
 import { GrDirections } from "react-icons/gr";
 import { PiWallLight } from "react-icons/pi";
 import { useNavbarStore } from "../../js/store";
 import { getMainPath } from "../../js/utils";
+import { BsRegex } from "react-icons/bs";

 function NavBarButton({ navigate, closeNav, name, icon, color, disabled, onClick }:
    { navigate?: string, closeNav: () => void, name:string, icon:any, color:MantineColor, disabled?:boolean, onClick?:CallableFunction }) {
@@ -36,9 +36,10 @@ export default function NavBar() {
        </Box>
        <Divider my="xs" />
        <Box style={{flexGrow: 1}} component={ScrollArea} px="xs" mt="xs">
-            <NavBarButton navigate="nfregex" closeNav={closeNav} name="Netfilter Regex" color="lime" icon={<IoMdGitNetwork />} />
-            <NavBarButton navigate="firewall" closeNav={closeNav} name="Firewall Rules" color="red" icon={<PiWallLight />} />
-            <NavBarButton navigate="porthijack" closeNav={closeNav} name="Hijack Port to Proxy" color="blue" icon={<GrDirections />} />
+            <NavBarButton navigate="nfregex" closeNav={closeNav} name="Netfilter Regex" color="grape" icon={<BsRegex size={19} />} />
+            <NavBarButton navigate="nfproxy" closeNav={closeNav} name="Netfilter Proxy" color="lime" icon={<TbPlugConnected size={19} />} />
+            <NavBarButton navigate="firewall" closeNav={closeNav} name="Firewall Rules" color="red" icon={<PiWallLight size={19} />} />
+            <NavBarButton navigate="porthijack" closeNav={closeNav} name="Hijack Port to Proxy" color="blue" icon={<GrDirections size={19} />} />
        </Box>
        
    </AppShell.Navbar>
--- a/frontend/src/components/PortHijack/ServiceRow/index.tsx
+++ b/frontend/src/components/PortHijack/ServiceRow/index.tsx
@@ -1,4 +1,4 @@
-import { ActionIcon, Badge, Box, Divider, Grid, Menu, Space, Title, Tooltip } from '@mantine/core';
+import { ActionIcon, Badge, Box, Divider, Menu, Space, Title, Tooltip } from '@mantine/core';
 import React, { useState } from 'react';
 import { FaPlay, FaStop } from 'react-icons/fa';
 import { porthijack, Service } from '../utils';
--- a/frontend/src/components/PyFilterView/index.tsx
+++ b/frontend/src/components/PyFilterView/index.tsx
@@ -0,0 +1,50 @@
+import { Text, Badge, Space, ActionIcon, Tooltip, Box } from '@mantine/core';
+import { useState } from 'react';
+import { PyFilter } from '../../js/models';
+import { errorNotify, okNotify } from '../../js/utils';
+import { FaPause, FaPlay } from 'react-icons/fa';
+import { FaFilter } from "react-icons/fa";
+import { nfproxy } from '../NFProxy/utils';
+import { FaPencilAlt } from 'react-icons/fa';
+
+export default function PyFilterView({ filterInfo }:{ filterInfo:PyFilter }) {
+
+  const [deleteTooltipOpened, setDeleteTooltipOpened] = useState(false);
+  const [statusTooltipOpened, setStatusTooltipOpened] = useState(false);
+
+  const changeRegexStatus = () => {
+    (filterInfo.active?nfproxy.pyfilterdisable:nfproxy.pyfilterenable)(filterInfo.filter_id).then(res => {
+      if(!res){
+        okNotify(`Filter ${filterInfo.name} ${filterInfo.active?"deactivated":"activated"} successfully!`,`Filter with id '${filterInfo.filter_id}' has been ${filterInfo.active?"deactivated":"activated"}!`)
+      }else{
+        errorNotify(`Filter ${filterInfo.name} ${filterInfo.active?"deactivation":"activation"} failed!`,`Error: ${res}`)
+      }
+    }).catch( err => errorNotify(`Filter ${filterInfo.name} ${filterInfo.active?"deactivation":"activation"} failed!`,`Error: ${err}`))
+  }
+
+  return <Box className="firegex__regexview__box">
+        <Box>
+          <Box className='center-flex' style={{width: "100%"}}>
+            <Box className="firegex__regexview__outer_regex_text">
+              <Text className="firegex__regexview__regex_text">{filterInfo.name}</Text>
+            </Box>
+            <Space w="xs" />
+            <Tooltip label={filterInfo.active?"Deactivate":"Activate"} zIndex={0} color={filterInfo.active?"orange":"teal"} opened={statusTooltipOpened}>
+              <ActionIcon color={filterInfo.active?"orange":"teal"} onClick={changeRegexStatus} size="xl" radius="md" variant="filled"
+              onFocus={() => setStatusTooltipOpened(false)} onBlur={() => setStatusTooltipOpened(false)}
+              onMouseEnter={() => setStatusTooltipOpened(true)} onMouseLeave={() => setStatusTooltipOpened(false)}
+              >{filterInfo.active?<FaPause size="20px" />:<FaPlay size="20px" />}</ActionIcon>
+            </Tooltip>
+          </Box>
+          <Box display="flex" mt="sm" ml="xs">
+            <Badge size="md" color="yellow" variant="filled"><FaFilter style={{ marginBottom: -2}} /> {filterInfo.blocked_packets}</Badge>
+            <Space w="xs" />
+            <Badge size="md" color="orange" variant="filled"><FaPencilAlt size={18} /> {filterInfo.edited_packets}</Badge>
+            <Space w="xs" />
+            <Badge size="md" color={filterInfo.active?"lime":"red"} variant="filled">{filterInfo.active?"ACTIVE":"DISABLED"}</Badge>
+            
+          </Box>
+        </Box>
+        
+  </Box>
+}
--- a/frontend/src/components/RegexView/index.tsx
+++ b/frontend/src/components/RegexView/index.tsx
@@ -1,13 +1,14 @@
 import { Text, Title, Badge, Space, ActionIcon, Tooltip, Box } from '@mantine/core';
 import { useState } from 'react';
 import { RegexFilter } from '../../js/models';
-import { b64decode, errorNotify, getapiobject, isMediumScreen, okNotify } from '../../js/utils';
+import { b64decode, errorNotify, isMediumScreen, okNotify } from '../../js/utils';
 import { BsTrashFill } from "react-icons/bs"
 import YesNoModal from '../YesNoModal';
 import { FaPause, FaPlay } from 'react-icons/fa';
 import { useClipboard } from '@mantine/hooks';
 import { FaFilter } from "react-icons/fa";
-import { VscRegex } from "react-icons/vsc";
+
+import { nfregex } from '../NFRegex/utils';

 function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {

@@ -24,7 +25,7 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
  const isMedium = isMediumScreen();

  const deleteRegex = () => {
-    getapiobject().regexdelete(regexInfo.id).then(res => {
+    nfregex.regexdelete(regexInfo.id).then(res => {
      if(!res){
        okNotify(`Regex ${regex_expr} deleted successfully!`,`Regex '${regex_expr}' ID:${regexInfo.id} has been deleted!`)
      }else{
@@ -34,9 +35,9 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
  }

  const changeRegexStatus = () => {
-    (regexInfo.active?getapiobject().regexdisable:getapiobject().regexenable)(regexInfo.id).then(res => {
+    (regexInfo.active?nfregex.regexdisable:nfregex.regexenable)(regexInfo.id).then(res => {
      if(!res){
-        okNotify(`Regex ${regex_expr} ${regexInfo.active?"deactivated":"activated"} successfully!`,`Regex '${regex_expr}' ID:${regexInfo.id} has been ${regexInfo.active?"deactivated":"activated"}!`)
+        okNotify(`Regex ${regex_expr} ${regexInfo.active?"deactivated":"activated"} successfully!`,`Regex with id '${regexInfo.id}' has been ${regexInfo.active?"deactivated":"activated"}!`)
      }else{
        errorNotify(`Regex ${regex_expr} ${regexInfo.active?"deactivation":"activation"} failed!`,`Error: ${res}`)
      }
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -9,6 +9,7 @@ import {
 import { queryClient } from './js/utils';
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
+import '@mantine/code-highlight/styles.css';
 import './index.css';

 const root = ReactDOM.createRoot(
--- a/frontend/src/js/models.ts
+++ b/frontend/src/js/models.ts
@@ -48,4 +48,12 @@ export type RegexAddForm = {
    is_case_sensitive:boolean,
    mode:string, // C->S S->C BOTH,
    active: boolean
+}
+
+export type PyFilter = {
+    filter_id:number,
+    name:string,
+    blocked_packets:number,
+    edited_packets:number,
+    active:boolean
 }
--- a/frontend/src/js/utils.tsx
+++ b/frontend/src/js/utils.tsx
@@ -7,6 +7,7 @@ import { ChangePassword, IpInterface, LoginResponse, PasswordSend, ServerRespons
 import { Buffer } from "buffer"
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import { useMediaQuery } from "@mantine/hooks";
+import { nfproxy } from "../components/NFProxy/utils";

 export const IS_DEV = import.meta.env.DEV

@@ -101,14 +102,6 @@ export function getMainPath(){
    return ""
 }

-export function getapiobject(){
-    switch(getMainPath()){
-        case "nfregex":
-            return nfregex
-      }
-      throw new Error('No api for this tool!');
-}
-
 export function HomeRedirector(){
    const section = sessionStorage.getItem("home_section")
    const path = section?`/${section}`:`/nfregex`
--- a/frontend/src/pages/Firewall/index.tsx
+++ b/frontend/src/pages/Firewall/index.tsx
@@ -1,4 +1,4 @@
-import { ActionIcon, Badge, Box, Divider, FloatingIndicator, LoadingOverlay, Space, Switch, Table, Tabs, TextInput, Title, Tooltip, useMantineTheme } from "@mantine/core"
+import { ActionIcon, Badge, Box, Divider, FloatingIndicator, LoadingOverlay, Space, Switch, Table, Tabs, TextInput, ThemeIcon, Title, Tooltip, useMantineTheme } from "@mantine/core"
 import { useEffect, useState } from "react";
 import { BsPlusLg, BsTrashFill } from "react-icons/bs"
 import { rem } from '@mantine/core';
@@ -20,7 +20,8 @@ import { LuArrowBigRightDash } from "react-icons/lu"
 import { ImCheckmark, ImCross } from "react-icons/im";
 import { IoSettingsSharp } from "react-icons/io5";
 import { SettingsModal } from "./SettingsModal";
-
+import { FaDirections } from "react-icons/fa";
+import { PiWallLight } from "react-icons/pi";

 export const Firewall = () => {

@@ -346,7 +347,7 @@ export const Firewall = () => {
        <Space h="sm" />
        <LoadingOverlay visible={rules.isLoading} />
        <Box className={isMedium?'center-flex':'center-flex-row'}>
-            <Title order={3}>Firewall Rules</Title>
+            <Title order={5} className="center-flex"><ThemeIcon radius="md" size="md" variant='filled' color='red' ><PiWallLight size={20} /></ThemeIcon><Space w="xs" />Firewall Rules</Title>
            {isMedium?<Box className='flex-spacer' />:<Space h="sm" />}
            <Box className='center-flex'>
              Enabled: <Space w="sm" /> <Switch checked={fwEnabled} onChange={switchState} />
@@ -361,8 +362,8 @@ export const Firewall = () => {
            {isMedium?<Box className='flex-spacer' />:<Space h="sm" />}
            <Box className='center-flex'>
              <Space w="xs" />
-              <Badge size="sm" color="green" variant="filled">Rules: {rules.isLoading?0:rules.data?.rules.length}</Badge>
-              <Space w="xs" />
+              <Badge size="md" radius="sm" color="green" variant="filled"><FaDirections style={{ marginBottom: -1, marginRight: 4}}/>Rules: {rules.isLoading?0:rules.data?.rules.length}</Badge>
+              <Space w="md" />
              <Tooltip label="Add a new rule" position='bottom' color="blue" opened={tooltipAddOpened}>
                  <ActionIcon color="blue" onClick={emptyRuleAdd} size="lg" radius="md" variant="filled"
                  onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)}
--- a/frontend/src/pages/NFProxy/ServiceDetails.tsx
+++ b/frontend/src/pages/NFProxy/ServiceDetails.tsx
@@ -0,0 +1,200 @@
+import { ActionIcon, Box, Code, Grid, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
+import { Navigate, useNavigate, useParams } from 'react-router-dom';
+import { Badge, Divider, Menu } from '@mantine/core';
+import { useState } from 'react';
+import { FaFilter, FaPencilAlt, FaPlay, FaStop } from 'react-icons/fa';
+import { nfproxy, nfproxyServiceFilterCodeQuery, nfproxyServicePyfiltersQuery, nfproxyServiceQuery, serviceQueryKey } from '../../components/NFProxy/utils';
+import { MdDoubleArrow } from "react-icons/md"
+import YesNoModal from '../../components/YesNoModal';
+import { errorNotify, isMediumScreen, okNotify, regex_ipv4 } from '../../js/utils';
+import { BsTrashFill } from 'react-icons/bs';
+import { BiRename } from 'react-icons/bi'
+import RenameForm from '../../components/NFProxy/ServiceRow/RenameForm';
+import { MenuDropDownWithButton } from '../../components/MainLayout';
+import { useQueryClient } from '@tanstack/react-query';
+import { FaArrowLeft } from "react-icons/fa";
+import { IoSettingsSharp } from 'react-icons/io5';
+import AddEditService from '../../components/NFProxy/AddEditService';
+import PyFilterView from '../../components/PyFilterView';
+import { TbPlugConnected } from 'react-icons/tb';
+import { CodeHighlight } from '@mantine/code-highlight';
+import { FaPython } from "react-icons/fa";
+
+export default function ServiceDetailsNFProxy() {
+
+    const {srv} = useParams()
+    const services = nfproxyServiceQuery()
+    const serviceInfo = services.data?.find(s => s.service_id == srv)
+    const filtersList = nfproxyServicePyfiltersQuery(srv??"")
+    const [deleteModal, setDeleteModal] = useState(false)
+    const [renameModal, setRenameModal] = useState(false)
+    const [editModal, setEditModal] = useState(false)
+    const [buttonLoading, setButtonLoading] = useState(false)
+    const queryClient = useQueryClient()
+    const [tooltipStopOpened, setTooltipStopOpened] = useState(false);
+    const [tooltipBackOpened, setTooltipBackOpened] = useState(false);
+    const filterCode = nfproxyServiceFilterCodeQuery(srv??"")
+    const navigate = useNavigate()
+    const isMedium = isMediumScreen()
+
+    if (services.isLoading) return <LoadingOverlay visible={true} />
+    if (!srv || !serviceInfo || filtersList.isError) return <Navigate to="/" replace />
+
+    let status_color = "gray";
+    switch(serviceInfo.status){
+        case "stop": status_color = "red"; break;
+        case "active": status_color = "teal"; break;
+    }
+
+    const startService = async () => {
+        setButtonLoading(true)
+        await nfproxy.servicestart(serviceInfo.service_id).then(res => {
+            if(!res){
+                okNotify(`Service ${serviceInfo.name} started successfully!`,`The service on ${serviceInfo.port} has been started!`)
+                queryClient.invalidateQueries(serviceQueryKey)
+            }else{
+                errorNotify(`An error as occurred during the starting of the service ${serviceInfo.port}`,`Error: ${res}`)
+            }
+        }).catch(err => {
+            errorNotify(`An error as occurred during the starting of the service ${serviceInfo.port}`,`Error: ${err}`)
+        })
+        setButtonLoading(false)
+    }
+
+    const deleteService = () => {
+        nfproxy.servicedelete(serviceInfo.service_id).then(res => {
+            if (!res){
+                okNotify("Service delete complete!",`The service ${serviceInfo.name} has been deleted!`)
+                queryClient.invalidateQueries(serviceQueryKey)
+            }else
+                errorNotify("An error occurred while deleting a service",`Error: ${res}`)
+        }).catch(err => {
+            errorNotify("An error occurred while deleting a service",`Error: ${err}`)
+        })
+    }
+
+    const stopService = async () => {
+        setButtonLoading(true)
+        
+        await nfproxy.servicestop(serviceInfo.service_id).then(res => {
+            if(!res){
+                okNotify(`Service ${serviceInfo.name} stopped successfully!`,`The service on ${serviceInfo.port} has been stopped!`)
+                queryClient.invalidateQueries(serviceQueryKey)
+            }else{
+                errorNotify(`An error as occurred during the stopping of the service ${serviceInfo.port}`,`Error: ${res}`)
+            }
+        }).catch(err => {
+            errorNotify(`An error as occurred during the stopping of the service ${serviceInfo.port}`,`Error: ${err}`)
+        })
+        setButtonLoading(false);
+    }
+
+    return <>
+        <LoadingOverlay visible={filtersList.isLoading} />
+        <Box className={isMedium?'center-flex':'center-flex-row'} style={{ justifyContent: "space-between"}} px="md" mt="lg">
+            <Box>
+                <Title order={1}>
+                    <Box className="center-flex">
+                        <MdDoubleArrow /><Space w="sm" />{serviceInfo.name}
+                    </Box>   
+                </Title>
+            </Box>
+            {isMedium?null:<Space h="md" />}
+            <Box className='center-flex'>
+                <Badge color={status_color} radius="md" size="xl" variant="filled" mr="sm">
+                    {serviceInfo.status}
+                </Badge>
+                <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient" radius="md" mr="sm">
+                    :{serviceInfo.port}
+                </Badge>
+
+                <MenuDropDownWithButton>
+                    <Menu.Item><b>Edit service</b></Menu.Item>
+                    <Menu.Item leftSection={<IoSettingsSharp size={18} />} onClick={()=>setEditModal(true)}>Service Settings</Menu.Item>
+                    <Menu.Item leftSection={<BiRename size={18} />} onClick={()=>setRenameModal(true)}>Change service name</Menu.Item>
+                    <Divider />
+                    <Menu.Label><b>Danger zone</b></Menu.Label>
+                    <Menu.Item color="red" leftSection={<BsTrashFill size={18} />} onClick={()=>setDeleteModal(true)}>Delete Service</Menu.Item>
+                </MenuDropDownWithButton>   
+            </Box>
+        </Box>
+        {isMedium?null:<Space h="md" />}
+        <Box className={isMedium?'center-flex':'center-flex-row'} style={{ justifyContent: "space-between"}} px="md" mt="lg">
+            <Box className={isMedium?'center-flex':'center-flex-row'}>
+                <Box className='center-flex'>
+                    <Badge color="orange" radius="sm" size="md" variant="filled"><FaPencilAlt style={{ marginBottom: -2}} /> {serviceInfo.edited_packets}</Badge>
+                    <Space w="xs" />
+                    <Badge color="yellow" radius="sm" size="md" variant="filled"><FaFilter style={{ marginBottom: -2}} /> {serviceInfo.blocked_packets}</Badge>
+                    <Space w="xs" />
+                    <Badge color="violet" radius="sm" size="md" variant="filled"><TbPlugConnected style={{ marginBottom: -2}} size={13} /> {serviceInfo.n_filters}</Badge>
+                </Box>
+                {isMedium?<Space w="xs" />:<Space h="xs" />}
+                <Badge color={serviceInfo.ip_int.match(regex_ipv4)?"cyan":"pink"} radius="sm" size="md" variant="filled" mr="xs">{serviceInfo.ip_int} on {serviceInfo.proto}</Badge>
+            </Box>
+            {isMedium?null:<Space h="xl" />}
+            <Box className='center-flex'>
+                <Tooltip label="Go back" zIndex={0} color="cyan" opened={tooltipBackOpened}>
+                    <ActionIcon color="cyan"
+                    onClick={() => navigate("/")} size="xl" radius="md" variant="filled"
+                    aria-describedby="tooltip-back-id"
+                    onFocus={() => setTooltipBackOpened(false)} onBlur={() => setTooltipBackOpened(false)}
+                    onMouseEnter={() => setTooltipBackOpened(true)} onMouseLeave={() => setTooltipBackOpened(false)}>
+                        <FaArrowLeft size="25px" />
+                    </ActionIcon>
+                </Tooltip>
+                <Space w="md"/>
+                <Tooltip label="Stop service" zIndex={0} color="red" opened={tooltipStopOpened}>
+                    <ActionIcon color="red" loading={buttonLoading}
+                    onClick={stopService} size="xl" radius="md" variant="filled"
+                    disabled={serviceInfo.status === "stop"}
+                    aria-describedby="tooltip-stop-id"
+                    onFocus={() => setTooltipStopOpened(false)} onBlur={() => setTooltipStopOpened(false)}
+                    onMouseEnter={() => setTooltipStopOpened(true)} onMouseLeave={() => setTooltipStopOpened(false)}>
+                        <FaStop size="20px" />
+                    </ActionIcon>
+                </Tooltip>
+                <Space w="md"/>
+                <Tooltip label="Start service" zIndex={0} color="teal">
+                    <ActionIcon color="teal" size="xl" radius="md" onClick={startService} loading={buttonLoading}
+                                variant="filled" disabled={!["stop","pause"].includes(serviceInfo.status)?true:false}>
+                        <FaPlay size="20px" />
+                    </ActionIcon>
+                </Tooltip>
+            </Box>
+        </Box>
+        <Divider my="xl" />
+        {filterCode.data?<>
+            <Title order={3} style={{textAlign:"center"}} className="center-flex"><FaPython style={{ marginBottom: -3 }} size={30} /><Space w="xs" />Filter code</Title>
+            <CodeHighlight code={filterCode.data} language="python" mt="lg" />
+        </>: null}
+        <Space h="xl" />
+        {(!filtersList.data || filtersList.data.length == 0)?<>
+                <Title className='center-flex' style={{textAlign:"center"}} order={3}>No filters found! Edit the proxy file</Title>
+                <Space h="xs" />
+                <Title className='center-flex' style={{textAlign:"center"}} order={3}>Install the firegex client:<Space w="xs" /><Code mb={-4} >pip install fgex</Code></Title>
+                <Space h="xs" />
+                <Title className='center-flex' style={{textAlign:"center"}} order={3}>Then run the command:<Space w="xs" /><Code mb={-4} >fgex nfproxy</Code></Title>
+            </>:
+            <Grid>
+                {filtersList.data?.map( (filterInfo) => <Grid.Col key={filterInfo.filter_id} span={{ lg:6, xs: 12 }}><PyFilterView filterInfo={filterInfo} /></Grid.Col>)}
+            </Grid>
+        }
+        <YesNoModal
+            title='Are you sure to delete this service?'
+            description={`You are going to delete the service '${serviceInfo.port}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`}
+            onClose={()=>setDeleteModal(false) }
+            action={deleteService}
+            opened={deleteModal}
+        />
+        <RenameForm
+            onClose={()=>setRenameModal(false)}
+            opened={renameModal}
+            service={serviceInfo}
+        />
+        <AddEditService
+            opened={editModal}
+            onClose={()=>setEditModal(false)}
+            edit={serviceInfo}
+        />
+    </>
+}
--- a/frontend/src/pages/NFProxy/index.tsx
+++ b/frontend/src/pages/NFProxy/index.tsx
@@ -0,0 +1,91 @@
+import { ActionIcon, Badge, Box, LoadingOverlay, Space, ThemeIcon, Title, Tooltip } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import { BsPlusLg } from "react-icons/bs";
+import { useNavigate, useParams } from 'react-router-dom';
+import ServiceRow from '../../components/NFProxy/ServiceRow';
+import { errorNotify, getErrorMessage, isMediumScreen } from '../../js/utils';
+import AddEditService from '../../components/NFProxy/AddEditService';
+import { useQueryClient } from '@tanstack/react-query';
+import { TbPlugConnected, TbReload } from 'react-icons/tb';
+import { nfproxyServiceQuery } from '../../components/NFProxy/utils';
+import { FaFilter, FaPencilAlt, FaServer } from 'react-icons/fa';
+import { VscRegex } from 'react-icons/vsc';
+
+
+export default function NFProxy({ children }: { children: any }) {
+
+    const navigator = useNavigate()
+    const [open, setOpen] = useState(false);
+    const {srv} = useParams()
+    const queryClient = useQueryClient()
+    const [tooltipRefreshOpened, setTooltipRefreshOpened] = useState(false);
+    const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false);
+    const [tooltipAddOpened, setTooltipAddOpened] = useState(false);
+    const isMedium = isMediumScreen()
+    const services = nfproxyServiceQuery()
+
+    useEffect(()=> {
+        if(services.isError)
+            errorNotify("NFProxy Update failed!", getErrorMessage(services.error))
+    },[services.isError])
+
+    const closeModal = () => {setOpen(false);}
+
+    return <>
+    <Space h="sm" />
+    <Box className={isMedium?'center-flex':'center-flex-row'}>
+        <Title order={5} className="center-flex"><ThemeIcon radius="md" size="md" variant='filled' color='lime' ><TbPlugConnected size={20} /></ThemeIcon><Space w="xs" />Netfilter Proxy</Title>
+        {isMedium?<Box className='flex-spacer' />:<Space h="sm" />}
+        <Box className='center-flex' >
+            General stats:
+            <Space w="xs" />
+            <Badge size="md" radius="sm" color="green" variant="filled"><FaServer style={{ marginBottom: -1, marginRight: 4}} />Services: {services.isLoading?0:services.data?.length}</Badge>
+            <Space w="xs" />
+            <Badge color="yellow" radius="sm" size="md" variant="filled"><FaFilter style={{ marginBottom: -2, marginRight: 4}} />{services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.blocked_packets, 0)}</Badge>
+            <Space w="xs" />
+            <Badge color="orange" radius="sm" size="md" variant="filled"><FaPencilAlt style={{ marginBottom: -2, marginRight: 4}} />{services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.edited_packets, 0)}</Badge>
+            <Space w="xs" />
+            <Badge size="md" radius="sm" color="violet" variant="filled"><TbPlugConnected style={{ marginBottom: -2, marginRight: 4}} size={13} />{services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.n_filters, 0)}</Badge>
+            <Space w="xs" />
+        </Box>
+        {isMedium?null:<Space h="md" />}
+        <Box className='center-flex' >
+            {/* Will become the null a button to edit the source code? TODO  */}
+            { srv?null
+            : <Tooltip label="Add a new service" position='bottom' color="blue" opened={tooltipAddOpened}>
+                <ActionIcon color="blue" onClick={()=>setOpen(true)} size="lg" radius="md" variant="filled"
+                onFocus={() => setTooltipAddOpened(false)} onBlur={() => setTooltipAddOpened(false)}
+                onMouseEnter={() => setTooltipAddOpened(true)} onMouseLeave={() => setTooltipAddOpened(false)}><BsPlusLg size={18} /></ActionIcon>
+            </Tooltip>
+        }
+        <Space w="xs" />
+            <Tooltip label="Refresh" position='bottom' color="indigo" opened={tooltipRefreshOpened}>
+                <ActionIcon color="indigo" onClick={()=>queryClient.invalidateQueries(["nfproxy"])} size="lg" radius="md" variant="filled"
+                loading={services.isFetching}
+                onFocus={() => setTooltipRefreshOpened(false)} onBlur={() => setTooltipRefreshOpened(false)}
+                onMouseEnter={() => setTooltipRefreshOpened(true)} onMouseLeave={() => setTooltipRefreshOpened(false)}><TbReload size={18} /></ActionIcon>
+            </Tooltip>
+        </Box>
+    </Box>
+    <Space h="md" />
+    <Box className="center-flex-row" style={{gap: 20}}>
+        {srv?null:<>
+            <LoadingOverlay visible={services.isLoading} />
+            {(services.data && services.data?.length > 0)?services.data.map( srv => <ServiceRow service={srv} key={srv.service_id} onClick={()=>{
+                navigator("/nfproxy/"+srv.service_id)
+            }} />):<><Space h="xl"/> <Title className='center-flex' style={{textAlign:"center"}} order={3}>No services found! Add one clicking the "+" buttons</Title>
+                <Box className='center-flex'>
+                    <Tooltip label="Add a new service" color="blue" opened={tooltipAddServOpened}>
+                        <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
+                            onFocus={() => setTooltipAddServOpened(false)} onBlur={() => setTooltipAddServOpened(false)}
+                            onMouseEnter={() => setTooltipAddServOpened(true)} onMouseLeave={() => setTooltipAddServOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
+                    </Tooltip>
+                </Box>
+            </>}
+        </>}
+    </Box>
+    {srv?children:null}
+    {!srv?<AddEditService opened={open} onClose={closeModal} />:null}
+    </>
+}
+
--- a/frontend/src/pages/NFRegex/index.tsx
+++ b/frontend/src/pages/NFRegex/index.tsx
@@ -1,6 +1,6 @@
-import { ActionIcon, Badge, Box, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
+import { ActionIcon, Badge, Box, LoadingOverlay, Space, ThemeIcon, Title, Tooltip } from '@mantine/core';
 import { useEffect, useState } from 'react';
-import { BsPlusLg } from "react-icons/bs";
+import { BsPlusLg, BsRegex } from "react-icons/bs";
 import { useNavigate, useParams } from 'react-router-dom';
 import ServiceRow from '../../components/NFRegex/ServiceRow';
 import { nfregexServiceQuery } from '../../components/NFRegex/utils';
@@ -9,7 +9,9 @@ import AddEditService from '../../components/NFRegex/AddEditService';
 import AddNewRegex from '../../components/AddNewRegex';
 import { useQueryClient } from '@tanstack/react-query';
 import { TbReload } from 'react-icons/tb';
-
+import { FaFilter } from 'react-icons/fa';
+import { FaServer } from "react-icons/fa6";
+import { VscRegex } from "react-icons/vsc";

 function NFRegex({ children }: { children: any }) {

@@ -33,14 +35,16 @@ function NFRegex({ children }: { children: any }) {
    return <>
    <Space h="sm" />
    <Box className={isMedium?'center-flex':'center-flex-row'}>
-        <Title order={4}>Netfilter Regex</Title>
+        <Title order={5} className="center-flex"><ThemeIcon radius="md" size="md" variant='filled' color='grape' ><BsRegex size={20} /></ThemeIcon><Space w="xs" />Netfilter Regex</Title>
        {isMedium?<Box className='flex-spacer' />:<Space h="sm" />}
        <Box className='center-flex' >
-            <Badge size="sm" color="green" variant="filled">Services: {services.isLoading?0:services.data?.length}</Badge>
+            General stats:
            <Space w="xs" />
-            <Badge size="sm" color="yellow" variant="filled">Filtered Connections: {services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.n_packets, 0)}</Badge>
+            <Badge size="md" radius="sm" color="green" variant="filled"><FaServer style={{ marginBottom: -1, marginRight: 4}} />Services: {services.isLoading?0:services.data?.length}</Badge>
            <Space w="xs" />
-            <Badge size="sm" color="violet" variant="filled">Regexes: {services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.n_regex, 0)}</Badge>
+            <Badge color="yellow" radius="sm" size="md" variant="filled"><FaFilter style={{ marginBottom: -2, marginRight: 4}} />{services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.n_packets, 0)}</Badge>
+            <Space w="xs" />
+            <Badge size="md" radius="sm" color="violet" variant="filled"><VscRegex style={{ marginBottom: -2, marginRight: 4}} />{services.isLoading?0:services.data?.reduce((acc, s)=> acc+=s.n_regex, 0)}</Badge>
            <Space w="xs" />
        </Box>
        {isMedium?null:<Space h="md" />}
--- a/frontend/src/pages/PortHijack/index.tsx
+++ b/frontend/src/pages/PortHijack/index.tsx
@@ -1,4 +1,4 @@
-import { ActionIcon, Badge, Box, Divider, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
+import { ActionIcon, Badge, Box, Divider, LoadingOverlay, Space, ThemeIcon, Title, Tooltip } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { BsPlusLg } from "react-icons/bs";
 import ServiceRow from '../../components/PortHijack/ServiceRow';
@@ -7,6 +7,8 @@ import { errorNotify, getErrorMessage, isMediumScreen } from '../../js/utils';
 import AddNewService from '../../components/PortHijack/AddNewService';
 import { useQueryClient } from '@tanstack/react-query';
 import { TbReload } from 'react-icons/tb';
+import { FaServer } from 'react-icons/fa';
+import { GrDirections } from 'react-icons/gr';


 function PortHijack() {
@@ -30,10 +32,10 @@ function PortHijack() {
    return <>
        <Space h="sm" />
        <Box className={isMedium?'center-flex':'center-flex-row'}>
-            <Title order={4}>Hijack port to proxy</Title>
+            <Title order={5} className="center-flex"><ThemeIcon radius="md" size="md" variant='filled' color='blue' ><GrDirections size={20} /></ThemeIcon><Space w="xs" />Hijack port to proxy</Title>
            {isMedium?<Box className='flex-spacer' />:<Space h="sm" />}
            <Box className='center-flex'>
-                <Badge size="sm" color="yellow" variant="filled">Services: {services.isLoading?0:services.data?.length}</Badge>
+                <Badge size="md" radius="sm" color="yellow" variant="filled"><FaServer style={{ marginBottom: -1, marginRight: 4}} />Services: {services.isLoading?0:services.data?.length}</Badge>
                <Space w="xs" />
                <Tooltip label="Add a new service" position='bottom' color="blue" opened={tooltipAddOpened}>
                    <ActionIcon color="blue" onClick={()=>setOpen(true)} size="lg" radius="md" variant="filled"