diff --git a/frontend/src/components/RegexProxy/AddNewRegex.tsx b/frontend/src/components/AddNewRegex.tsx
similarity index 93%
rename from frontend/src/components/RegexProxy/AddNewRegex.tsx
rename to frontend/src/components/AddNewRegex.tsx
index c1eb9d4..2201f53 100755
--- a/frontend/src/components/RegexProxy/AddNewRegex.tsx
+++ b/frontend/src/components/AddNewRegex.tsx
@@ -2,11 +2,10 @@ import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, Mo
 import { useForm } from '@mantine/hooks';
 import React, { useState } from 'react';
 import { RegexAddForm } from '../js/models';
-import { addregex, b64decode, b64encode, fireUpdateRequest, okNotify } from '../js/utils';
+import { b64decode, b64encode, getapiobject, okNotify } from '../js/utils';
 import { ImCross } from "react-icons/im"
 import FilterTypeSelector from './FilterTypeSelector';
 
-
 type RegexAddInfo = {
     regex:string,
     type:string,
@@ -54,11 +53,10 @@ function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>
             active: !values.deactive
         }
         setSubmitLoading(false)
-        addregex(request).then( res => {
+        getapiobject().regexesadd(request).then( res => {
             if (!res){
                 setSubmitLoading(false)
                 close();
-                fireUpdateRequest();
                 okNotify(`Regex ${b64decode(request.regex)} has been added`, `Successfully added  ${request.is_case_sensitive?"case sensitive":"case insensitive"} ${request.is_blacklist?"blacklist":"whitelist"} regex to ${request.service_id} service`)
             }else if (res.toLowerCase() === "invalid regex"){
                 setSubmitLoading(false)
diff --git a/frontend/src/components/FilterTypeSelector.tsx b/frontend/src/components/FilterTypeSelector.tsx
index 0c858ae..ab7999a 100755
--- a/frontend/src/components/FilterTypeSelector.tsx
+++ b/frontend/src/components/FilterTypeSelector.tsx
@@ -3,8 +3,6 @@ import React from "react";
 import { FaListAlt } from "react-icons/fa";
 import { TiCancel } from "react-icons/ti";
 
-
-
 export default function FilterTypeSelector(props:any){
     return <SegmentedControl
         data={[
diff --git a/frontend/src/components/NFRegex/AddNewRegex.tsx b/frontend/src/components/NFRegex/AddNewRegex.tsx
deleted file mode 100755
index 01fbda9..0000000
--- a/frontend/src/components/NFRegex/AddNewRegex.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, Modal } from '@mantine/core';
-import { useForm } from '@mantine/hooks';
-import React, { useState } from 'react';
-import { RegexAddForm } from '../../js/models';
-import { b64decode, b64encode, nfregex, okNotify } from '../../js/utils';
-import { ImCross } from "react-icons/im"
-import FilterTypeSelector from '../FilterTypeSelector';
-
-
-type RegexAddInfo = {
-    regex:string,
-    type:string,
-    mode:string,
-    is_case_insensitive:boolean,
-    deactive:boolean
-}
-
-function AddNewRegex({ opened, onClose, service }:{ opened:boolean, onClose:()=>void, service:string }) { 
-
-    const form = useForm({
-        initialValues: {
-            regex:"",
-            type:"blacklist",
-            mode:"C -> S",
-            is_case_insensitive:false,
-            deactive:false
-        },
-        validationRules:{
-            regex: (value) => value !== "",
-            type: (value) => ["blacklist","whitelist"].includes(value),
-            mode: (value) => ['C -> S', 'S -> C', 'C <-> S'].includes(value)
-        }
-    })
-
-    const close = () =>{
-        onClose()
-        form.reset()
-        setError(null)
-    }
-
-    const [submitLoading, setSubmitLoading] = useState(false)
-    const [error, setError] = useState<string|null>(null)
-
-    const submitRequest = (values:RegexAddInfo) => {
-        setSubmitLoading(true)
-        const filter_mode = ({'C -> S':'C', 'S -> C':'S', 'C <-> S':'B'}[values.mode])
-
-        const request:RegexAddForm = {
-            is_blacklist:values.type !== "whitelist",
-            is_case_sensitive: !values.is_case_insensitive,
-            service_id: service,
-            mode: filter_mode?filter_mode:"B",
-            regex: b64encode(values.regex),
-            active: !values.deactive
-        }
-        setSubmitLoading(false)
-        nfregex.regexesadd(request).then( res => {
-            if (!res){
-                setSubmitLoading(false)
-                close();
-                okNotify(`Regex ${b64decode(request.regex)} has been added`, `Successfully added  ${request.is_case_sensitive?"case sensitive":"case insensitive"} ${request.is_blacklist?"blacklist":"whitelist"} regex to ${request.service_id} service`)
-            }else if (res.toLowerCase() === "invalid regex"){
-                setSubmitLoading(false)
-                form.setFieldError("regex", "Invalid Regex")
-            }else{
-                setSubmitLoading(false)
-                setError("Error: [ "+res+" ]")
-            }
-        }).catch( err => {
-            setSubmitLoading(false)
-            setError("Request Failed! [ "+err+" ]")
-        })
-        
-    }    
-
-
-  return <Modal size="xl" title="Add a new regex filter" opened={opened} onClose={close} closeOnClickOutside={false} centered>
-    <form onSubmit={form.onSubmit(submitRequest)}>
-            <TextInput
-                label="Regex"
-                placeholder="[A-Z0-9]{31}="
-                {...form.getInputProps('regex')}
-            />
-            <Space h="md" />
-            <Switch
-                label="Case insensitive"
-                {...form.getInputProps('is_case_insensitive', { type: 'checkbox' })}
-            />
-            <Space h="md" />
-            <Switch
-                label="Deactivate"
-                {...form.getInputProps('deactive', { type: 'checkbox' })}
-            />
-            <Space h="md" />
-            <NativeSelect
-                data={['C -> S', 'S -> C', 'C <-> S']}
-                label="Choose the source of the packets to filter"
-                variant="filled"
-                {...form.getInputProps('mode')}
-            />
-            <Space h="md" />
-            <FilterTypeSelector
-                size="md"
-                color="gray"
-                {...form.getInputProps('type')}
-            />
-            <Group position="right" mt="md">
-                <Button loading={submitLoading} type="submit">Add Filter</Button>
-            </Group>
-
-            <Space h="md" />
-            
-            {error?<>
-            <Notification icon={<ImCross size={14} />} color="red" onClose={()=>{setError(null)}}>
-                Error: {error}
-            </Notification><Space h="md" /></>:null}
-            
-        </form>
-    </Modal>
-
-}
-
-export default AddNewRegex;
diff --git a/frontend/src/components/NFRegex/AddNewService.tsx b/frontend/src/components/NFRegex/AddNewService.tsx
index 3bbb76f..a102789 100755
--- a/frontend/src/components/NFRegex/AddNewService.tsx
+++ b/frontend/src/components/NFRegex/AddNewService.tsx
@@ -1,8 +1,9 @@
 import { Button, Group, NumberInput, Space, TextInput, Notification, Modal, Switch, SegmentedControl, Autocomplete, AutocompleteItem } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
 import React, { useEffect, useState } from 'react';
-import { okNotify, regex_ipv4, regex_ipv6, getipinterfaces, nfregex } from '../../js/utils';
+import { okNotify, regex_ipv4, regex_ipv6, getipinterfaces } from '../../js/utils';
 import { ImCross } from "react-icons/im"
+import { nfregex } from './utils';
 
 type ServiceAddForm = {
     name:string,
diff --git a/frontend/src/components/NFRegex/ServiceRow/RenameForm.tsx b/frontend/src/components/NFRegex/ServiceRow/RenameForm.tsx
index e6f9dc5..aabf61d 100644
--- a/frontend/src/components/NFRegex/ServiceRow/RenameForm.tsx
+++ b/frontend/src/components/NFRegex/ServiceRow/RenameForm.tsx
@@ -1,9 +1,9 @@
 import { Button, Group, Space, TextInput, Notification, Modal } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
 import React, { useEffect, useState } from 'react';
-import { nfregex, okNotify } from '../../../js/utils';
+import { okNotify } from '../../../js/utils';
 import { ImCross } from "react-icons/im"
-import { Service } from '../../../js/models';
+import { nfregex, Service } from '../utils';
 
 function RenameForm({ opened, onClose, service }:{ opened:boolean, onClose:()=>void, service:Service }) { 
 
diff --git a/frontend/src/components/NFRegex/ServiceRow/index.tsx b/frontend/src/components/NFRegex/ServiceRow/index.tsx
index 41cf0e2..3948fdd 100755
--- a/frontend/src/components/NFRegex/ServiceRow/index.tsx
+++ b/frontend/src/components/NFRegex/ServiceRow/index.tsx
@@ -1,11 +1,11 @@
 import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Tooltip } from '@mantine/core';
 import React, { useState } from 'react';
 import { FaPlay, FaStop } from 'react-icons/fa';
-import { Service } from '../../../js/models';
+import { nfregex, Service } from '../utils';
 import { MdOutlineArrowForwardIos } from "react-icons/md"
 import style from "./index.module.scss";
 import YesNoModal from '../../YesNoModal';
-import { errorNotify, nfregex, okNotify, regex_ipv4 } from '../../../js/utils';
+import { errorNotify, okNotify, regex_ipv4 } from '../../../js/utils';
 import { BsTrashFill } from 'react-icons/bs';
 import { BiRename } from 'react-icons/bi'
 import RenameForm from './RenameForm';
diff --git a/frontend/src/components/NFRegex/utils.ts b/frontend/src/components/NFRegex/utils.ts
index 5438e4f..4d6c309 100755
--- a/frontend/src/components/NFRegex/utils.ts
+++ b/frontend/src/components/NFRegex/utils.ts
@@ -1,5 +1,6 @@
-import { ServerResponse } from "../../js/models"
+import { RegexFilter, ServerResponse } from "../../js/models"
 import { getapi, postapi } from "../../js/utils"
+import { RegexAddForm } from "../../js/models"
 
 export type GeneralStats = {
     services:number,
@@ -30,25 +31,7 @@ export type ServiceAddResponse = {
     service_id?: string,
 }
 
-export type RegexFilter = {
-    id:number,
-    service_id:string,
-    regex:string
-    is_blacklist:boolean,
-    is_case_sensitive:boolean,
-    mode:string //C S B => C->S S->C BOTH
-    n_packets:number,
-    active:boolean
-}
 
-export type RegexAddForm = {
-    service_id:string,
-    regex:string,
-    is_case_sensitive:boolean,
-    is_blacklist:boolean,
-    mode:string, // C->S S->C BOTH,
-    active: boolean
-}
 
 export const nfregex = {
     stats: async () => {
diff --git a/frontend/src/components/RegexProxy/AddNewService.tsx b/frontend/src/components/RegexProxy/AddNewService.tsx
index 5f1feb1..24adeab 100755
--- a/frontend/src/components/RegexProxy/AddNewService.tsx
+++ b/frontend/src/components/RegexProxy/AddNewService.tsx
@@ -1,8 +1,9 @@
 import { Button, Group, NumberInput, Space, TextInput, Notification, Modal, Switch } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
 import React, { useState } from 'react';
-import { addservice, fireUpdateRequest, okNotify, startservice } from '../js/utils';
+import { fireUpdateRequest, okNotify } from '../../js/utils';
 import { ImCross } from "react-icons/im"
+import { regexproxy } from './utils';
 
 type ServiceAddForm = {
     name:string,
@@ -40,12 +41,12 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
  
     const submitRequest = ({ name, port, autostart, chosenInternalPort, internalPort }:ServiceAddForm) =>{
         setSubmitLoading(true)
-        addservice(chosenInternalPort?{ internalPort, name, port }:{ name, port }).then( res => {
+        regexproxy.servicesadd(chosenInternalPort?{ internalPort, name, port }:{ name, port }).then( res => {
             if (res.status === "ok"){
                 setSubmitLoading(false)
                 close();
                 fireUpdateRequest();
-                if (autostart) startservice(res.id)
+                if (autostart) regexproxy.servicestart(res.id)
                 okNotify(`Service ${name} has been added`, `Successfully added ${res.id} with port ${port}`)
             }else{
                 setSubmitLoading(false)
diff --git a/frontend/src/components/RegexProxy/RegexView/RegexView.module.scss b/frontend/src/components/RegexProxy/RegexView/RegexView.module.scss
deleted file mode 100755
index 6dd71be..0000000
--- a/frontend/src/components/RegexProxy/RegexView/RegexView.module.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-
-@use "../../vars" as *;
-
-.box{
-    padding:30px;
-    margin:5px;
-}
-
-.regex_text{
-    padding: 10px;
-    background-color: $third_color;
-    border-radius: 15px;
-}
\ No newline at end of file
diff --git a/frontend/src/components/RegexProxy/RegexView/index.tsx b/frontend/src/components/RegexProxy/RegexView/index.tsx
deleted file mode 100755
index 2cda903..0000000
--- a/frontend/src/components/RegexProxy/RegexView/index.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { Grid, Text, Title, Badge, Space, ActionIcon, Tooltip } from '@mantine/core';
-import React, { useState } from 'react';
-import { RegexFilter } from '../../js/models';
-import { activateregex, b64decode, deactivateregex, deleteregex, errorNotify, fireUpdateRequest, okNotify } from '../../js/utils';
-import style from "./RegexView.module.scss";
-import { BsTrashFill } from "react-icons/bs"
-import YesNoModal from '../YesNoModal';
-import FilterTypeSelector from '../FilterTypeSelector';
-import { FaPause, FaPlay } from 'react-icons/fa';
-
-
-function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
-
-  const mode_string = regexInfo.mode === "C"? "C -> S":
-                      regexInfo.mode === "S"? "S -> C":
-                      regexInfo.mode === "B"? "S <-> C": "🤔"
-
-  let regex_expr = b64decode(regexInfo.regex);
-
-  const [deleteModal, setDeleteModal] = useState(false);
-  const [deleteTooltipOpened, setDeleteTooltipOpened] = useState(false);
-  const [statusTooltipOpened, setStatusTooltipOpened] = useState(false);
-
-  const deleteRegex = () => {
-    deleteregex(regexInfo.id).then(res => {
-      if(!res){
-        okNotify(`Regex ${regex_expr} deleted successfully!`,`Regex '${regex_expr}' ID:${regexInfo.id} has been deleted!`)
-        fireUpdateRequest()
-      }else{
-        errorNotify(`Regex ${regex_expr} deleation failed!`,`Error: ${res}`)
-      }
-    }).catch( err => errorNotify(`Regex ${regex_expr} deleation failed!`,`Error: ${err}`))
-  }
-
-  const changeRegexStatus = () => {
-    
-    (regexInfo.active?deactivateregex:activateregex)(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"}!`)
-        fireUpdateRequest()
-      }else{
-        errorNotify(`Regex ${regex_expr} ${regexInfo.active?"deactivation":"activation"} failed!`,`Error: ${res}`)
-      }
-    }).catch( err => errorNotify(`Regex ${regex_expr} ${regexInfo.active?"deactivation":"activation"} failed!`,`Error: ${err}`))
-    
-  }
-
-  return <div className={style.box}>
-        <Grid>
-          <Grid.Col span={2}>
-            <Title order={2} style={{color:"#FFF"}}>Regex:</Title> 
-          </Grid.Col>
-          <Grid.Col span={8}>
-            <Text className={style.regex_text}> {regex_expr}</Text>
-          </Grid.Col>
-          <Grid.Col span={2} className='center-flex'>
-            <Space w="xs" />
-            <Tooltip label={regexInfo.active?"Deactivate":"Activate"} zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color={regexInfo.active?"orange":"teal"} opened={statusTooltipOpened}>
-              <ActionIcon color={regexInfo.active?"orange":"teal"} onClick={changeRegexStatus} size="xl" radius="md" variant="filled"
-               onFocus={() => setStatusTooltipOpened(false)} onBlur={() => setStatusTooltipOpened(false)}
-               onMouseEnter={() => setStatusTooltipOpened(true)} onMouseLeave={() => setStatusTooltipOpened(false)}
-              >{regexInfo.active?<FaPause size="20px" />:<FaPlay size="20px" />}</ActionIcon>
-            </Tooltip>
-            <Space w="xs" />
-            <Tooltip label="Delete regex" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="red" opened={deleteTooltipOpened} >
-              <ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"
-               onFocus={() => setDeleteTooltipOpened(false)} onBlur={() => setDeleteTooltipOpened(false)}
-               onMouseEnter={() => setDeleteTooltipOpened(true)} onMouseLeave={() => setDeleteTooltipOpened(false)}
-              ><BsTrashFill size={22} /></ActionIcon>
-            </Tooltip>
-
-            </Grid.Col>
-          <Grid.Col span={2} />
-          <Grid.Col className='center-flex-row' span={4}>
-            <Space h="xs" />
-            <FilterTypeSelector 
-                size="md"
-                color="gray"
-                disabled
-                value={regexInfo.is_blacklist?"blacklist":"whitelist"}
-            />
-            <Space h="md" />
-            <div className='center-flex'>
-              <Badge size="md" color="cyan" variant="filled">Service: {regexInfo.service_id}</Badge>
-              <Space w="xs" />
-              <Badge size="md" color={regexInfo.active?"lime":"red"} variant="filled">{regexInfo.active?"ACTIVE":"DISABLED"}</Badge>
-              <Space w="xs" />
-              <Badge size="md" color="gray" variant="filled">ID: {regexInfo.id}</Badge>
-              
-            </div>
-          </Grid.Col>
-          <Grid.Col style={{width:"100%"}} span={6}>
-            <Space h="xs" />
-            <div className='center-flex-row'>
-              <Badge size="md" color={regexInfo.is_case_sensitive?"grape":"pink"} variant="filled">Case: {regexInfo.is_case_sensitive?"SENSIIVE":"INSENSITIVE"}</Badge>
-              <Space h="xs" />
-              <Badge size="md" color="yellow" variant="filled">Packets filtered: {regexInfo.n_packets}</Badge>
-              <Space h="xs" />
-              <Badge size="md" color="blue" variant="filled">Mode: {mode_string}</Badge>
-            </div>
-          </Grid.Col>
-        </Grid>
-        <YesNoModal
-            title='Are you sure to delete this regex?'
-            description={`You are going to delete the regex '${regex_expr}'.`}
-            onClose={()=>setDeleteModal(false)}
-            action={deleteRegex}
-            opened={deleteModal}
-        />
-        
-  </div>
-}
-
-export default RegexView;
diff --git a/frontend/src/components/RegexProxy/ServiceRow/ChangePortModal.tsx b/frontend/src/components/RegexProxy/ServiceRow/ChangePortModal.tsx
index 0852467..fde4830 100755
--- a/frontend/src/components/RegexProxy/ServiceRow/ChangePortModal.tsx
+++ b/frontend/src/components/RegexProxy/ServiceRow/ChangePortModal.tsx
@@ -1,10 +1,10 @@
 import { Button, Group, NumberInput, Space, Notification, Modal, Center, Title } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
 import React, { useEffect, useState } from 'react';
-import { changeports, fireUpdateRequest, okNotify } from '../../js/utils';
 import { ImCross } from "react-icons/im"
-import { Service } from '../../js/models';
 import { FaLongArrowAltDown } from 'react-icons/fa';
+import { regexproxy, Service } from '../utils';
+import { fireUpdateRequest, okNotify } from '../../../js/utils';
 
 type InputForm = {
     internalPort:number,
@@ -39,7 +39,7 @@ function ChangePortModal({ service, opened, onClose }:{ service:Service, opened:
  
     const submitRequest = (data:InputForm) =>{
         setSubmitLoading(true)
-        changeports(service.id, data).then( res => {
+        regexproxy.servicechangeport(service.id, data).then( res => {
             if (!res){
                 setSubmitLoading(false)
                 close();
diff --git a/frontend/src/components/RegexProxy/ServiceRow/RenameForm.tsx b/frontend/src/components/RegexProxy/ServiceRow/RenameForm.tsx
index b1cff7c..f2e463a 100644
--- a/frontend/src/components/RegexProxy/ServiceRow/RenameForm.tsx
+++ b/frontend/src/components/RegexProxy/ServiceRow/RenameForm.tsx
@@ -1,9 +1,9 @@
 import { Button, Group, Space, TextInput, Notification, Modal } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
 import React, { useEffect, useState } from 'react';
-import { fireUpdateRequest, okNotify, renameservice } from '../../js/utils';
+import { fireUpdateRequest, okNotify } from '../../../js/utils';
 import { ImCross } from "react-icons/im"
-import { Service } from '../../js/models';
+import { regexproxy, Service } from '../utils';
 
 function RenameForm({ opened, onClose, service }:{ opened:boolean, onClose:()=>void, service:Service }) { 
 
@@ -25,7 +25,7 @@ function RenameForm({ opened, onClose, service }:{ opened:boolean, onClose:()=>v
 
     const submitRequest = ({ name }:{ name:string }) => {
         setSubmitLoading(true)
-        renameservice(service.id, name).then( res => {
+        regexproxy.servicerename(service.id, name).then( res => {
             if (!res){
                 setSubmitLoading(false)
                 close();
diff --git a/frontend/src/components/RegexProxy/ServiceRow/index.tsx b/frontend/src/components/RegexProxy/ServiceRow/index.tsx
index 0dc0292..1e5c690 100755
--- a/frontend/src/components/RegexProxy/ServiceRow/index.tsx
+++ b/frontend/src/components/RegexProxy/ServiceRow/index.tsx
@@ -1,16 +1,16 @@
 import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Tooltip } from '@mantine/core';
 import React, { useState } from 'react';
 import { FaPause, FaPlay, FaStop } from 'react-icons/fa';
-import { Service } from '../../js/models';
 import { MdOutlineArrowForwardIos } from "react-icons/md"
 import style from "./ServiceRow.module.scss";
-import YesNoModal from '../YesNoModal';
-import { deleteservice, errorNotify, fireUpdateRequest, okNotify, pauseservice, regenport, startservice, stopservice } from '../../js/utils';
+import YesNoModal from '../../YesNoModal';
+import { errorNotify, fireUpdateRequest, okNotify } from '../../../js/utils';
 import { BsArrowRepeat, BsTrashFill } from 'react-icons/bs';
 import { TbNumbers } from 'react-icons/tb';
 import { BiRename } from 'react-icons/bi'
 import ChangePortModal from './ChangePortModal';
 import RenameForm from './RenameForm';
+import { regexproxy, Service } from '../utils';
 
 //"status":"stop"/"wait"/"active"/"pause",
 function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) {
@@ -33,7 +33,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
 
     const stopService = async () => {
         setButtonLoading(true)
-        await stopservice(service.id).then(res => {
+        await regexproxy.servicestop(service.id).then(res => {
             if(!res){
                 okNotify(`Service ${service.id} stopped successfully!`,`The service ${service.name} has been stopped!`)
                 fireUpdateRequest();
@@ -48,7 +48,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
 
     const startService = async () => {
         setButtonLoading(true)
-        await startservice(service.id).then(res => {
+        await regexproxy.servicestart(service.id).then(res => {
             if(!res){
                 okNotify(`Service ${service.id} started successfully!`,`The service ${service.name} has been started!`)
                 fireUpdateRequest();
@@ -63,7 +63,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
 
     const pauseService = async () => {
         setButtonLoading(true)
-        await pauseservice(service.id).then(res => {
+        await regexproxy.servicepause(service.id).then(res => {
             if(!res){
                 okNotify(`Service ${service.id} paused successfully!`,`The service ${service.name} has been paused (Transparent mode)!`)
                 fireUpdateRequest();
@@ -78,7 +78,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
     }
 
     const deleteService = () => {
-        deleteservice(service.id).then(res => {
+        regexproxy.servicedelete(service.id).then(res => {
             if (!res){
                 okNotify("Service delete complete!",`The service ${service.id} has been deleted!`)
                 fireUpdateRequest();
@@ -91,7 +91,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
     }
 
     const changePort = () => {
-        regenport(service.id).then(res => {
+        regexproxy.serviceregenport(service.id).then(res => {
             if (!res){
                 okNotify("Service port regeneration completed!",`The service ${service.id} has changed the internal port!`)
                 fireUpdateRequest();
diff --git a/frontend/src/components/RegexProxy/utils.ts b/frontend/src/components/RegexProxy/utils.ts
index d9fe3f6..b8b5e69 100644
--- a/frontend/src/components/RegexProxy/utils.ts
+++ b/frontend/src/components/RegexProxy/utils.ts
@@ -1,4 +1,4 @@
-import { ServerResponse } from "../../js/models"
+import { RegexAddForm, RegexFilter, ServerResponse } from "../../js/models"
 import { getapi, postapi } from "../../js/utils"
 
 export type GeneralStats = {
@@ -33,26 +33,6 @@ export type ChangePort = {
     internalPort?: number
 }
 
-export type RegexFilter = {
-    id:number,
-    service_id:string,
-    regex:string
-    is_blacklist:boolean,
-    is_case_sensitive:boolean,
-    mode:string //C S B => C->S S->C BOTH
-    n_packets:number,
-    active:boolean
-}
-
-export type RegexAddForm = {
-    service_id:string,
-    regex:string,
-    is_case_sensitive:boolean,
-    is_blacklist:boolean,
-    mode:string, // C->S S->C BOTH,
-    active: boolean
-}
-
 export const regexproxy = {
     stats: async () => {
         return await getapi("regexproxy/stats") as GeneralStats;
diff --git a/frontend/src/components/NFRegex/RegexView/index.module.scss b/frontend/src/components/RegexView/index.module.scss
similarity index 79%
rename from frontend/src/components/NFRegex/RegexView/index.module.scss
rename to frontend/src/components/RegexView/index.module.scss
index 9fa1391..3d86dac 100755
--- a/frontend/src/components/NFRegex/RegexView/index.module.scss
+++ b/frontend/src/components/RegexView/index.module.scss
@@ -1,5 +1,5 @@
 
-@use "../../../vars" as *;
+@use "../../vars" as *;
 
 .box{
     padding:30px;
diff --git a/frontend/src/components/NFRegex/RegexView/index.tsx b/frontend/src/components/RegexView/index.tsx
similarity index 91%
rename from frontend/src/components/NFRegex/RegexView/index.tsx
rename to frontend/src/components/RegexView/index.tsx
index f5a200f..d17022f 100755
--- a/frontend/src/components/NFRegex/RegexView/index.tsx
+++ b/frontend/src/components/RegexView/index.tsx
@@ -1,11 +1,11 @@
 import { Grid, Text, Title, Badge, Space, ActionIcon, Tooltip } from '@mantine/core';
 import React, { useState } from 'react';
-import { RegexFilter } from '../../../js/models';
-import { b64decode, errorNotify, nfregex, okNotify } from '../../../js/utils';
+import { RegexFilter } from '../../js/models';
+import { b64decode, errorNotify, getapiobject, okNotify } from '../../js/utils';
 import style from "./index.module.scss";
 import { BsTrashFill } from "react-icons/bs"
-import YesNoModal from '../../YesNoModal';
-import FilterTypeSelector from '../../FilterTypeSelector';
+import YesNoModal from '../YesNoModal';
+import FilterTypeSelector from '../FilterTypeSelector';
 import { FaPause, FaPlay } from 'react-icons/fa';
 
 
@@ -22,7 +22,7 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
   const [statusTooltipOpened, setStatusTooltipOpened] = useState(false);
 
   const deleteRegex = () => {
-    nfregex.regexdelete(regexInfo.id).then(res => {
+    getapiobject().regexdelete(regexInfo.id).then(res => {
       if(!res){
         okNotify(`Regex ${regex_expr} deleted successfully!`,`Regex '${regex_expr}' ID:${regexInfo.id} has been deleted!`)
       }else{
@@ -32,15 +32,13 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
   }
 
   const changeRegexStatus = () => {
-    
-    (regexInfo.active?nfregex.regexdisable:nfregex.regexenable)(regexInfo.id).then(res => {
+    (regexInfo.active?getapiobject().regexdisable:getapiobject().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"}!`)
       }else{
         errorNotify(`Regex ${regex_expr} ${regexInfo.active?"deactivation":"activation"} failed!`,`Error: ${res}`)
       }
     }).catch( err => errorNotify(`Regex ${regex_expr} ${regexInfo.active?"deactivation":"activation"} failed!`,`Error: ${err}`))
-    
   }
 
   return <div className={style.box}>
diff --git a/frontend/src/js/models.ts b/frontend/src/js/models.ts
index f5bc1dc..43fff7a 100644
--- a/frontend/src/js/models.ts
+++ b/frontend/src/js/models.ts
@@ -31,3 +31,23 @@ export type IpInterface = {
     name:string,
     addr:string
 }
+
+export type RegexFilter = {
+    id:number,
+    service_id:string,
+    regex:string
+    is_blacklist:boolean,
+    is_case_sensitive:boolean,
+    mode:string //C S B => C->S S->C BOTH
+    n_packets:number,
+    active:boolean
+}
+
+export type RegexAddForm = {
+    service_id:string,
+    regex:string,
+    is_case_sensitive:boolean,
+    is_blacklist:boolean,
+    mode:string, // C->S S->C BOTH,
+    active: boolean
+}
\ No newline at end of file
diff --git a/frontend/src/js/utils.tsx b/frontend/src/js/utils.tsx
index 331a740..db83d77 100755
--- a/frontend/src/js/utils.tsx
+++ b/frontend/src/js/utils.tsx
@@ -2,6 +2,7 @@ import { showNotification } from "@mantine/notifications";
 import { ImCross } from "react-icons/im";
 import { TiTick } from "react-icons/ti"
 import { nfregex } from "../components/NFRegex/utils";
+import { regexproxy } from "../components/RegexProxy/utils";
 import { ChangePassword, IpInterface, LoginResponse, PasswordSend, ServerResponse, ServerResponseToken, ServerStatusResponse } from "./models";
 var Buffer = require('buffer').Buffer 
 
@@ -57,6 +58,16 @@ export function gatmainpath(){
     return ""
 }
 
+export function getapiobject(){
+    switch(gatmainpath()){
+        case "nfregex":
+            return nfregex
+        case "regexproxy":
+            return regexproxy
+      }
+      throw 'No api for this tool!';
+}
+
 export function fireUpdateRequest(){
     window.dispatchEvent(new Event(eventUpdateName))
 }
diff --git a/frontend/src/pages/NFRegex.tsx/ServiceDetails.tsx b/frontend/src/pages/NFRegex.tsx/ServiceDetails.tsx
index 90e76ff..5211bde 100755
--- a/frontend/src/pages/NFRegex.tsx/ServiceDetails.tsx
+++ b/frontend/src/pages/NFRegex.tsx/ServiceDetails.tsx
@@ -1,13 +1,14 @@
 import { ActionIcon, Grid, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
 import React, { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import RegexView from '../../components/NFRegex/RegexView';
+import RegexView from '../../components/RegexView';
 import ServiceRow from '../../components/NFRegex/ServiceRow';
-import AddNewRegex from '../../components/NFRegex/AddNewRegex';
+import AddNewRegex from '../../components/AddNewRegex';
 import { BsPlusLg } from "react-icons/bs";
-import { nfregex, RegexFilter, Service } from '../../components/NFRegex/utils';
+import { nfregex, Service } from '../../components/NFRegex/utils';
 import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
 import { useWindowEvent } from '@mantine/hooks';
+import { RegexFilter } from '../../js/models';
 
 function ServiceDetails() {
     const {srv} = useParams()
diff --git a/frontend/src/pages/NFRegex.tsx/index.tsx b/frontend/src/pages/NFRegex.tsx/index.tsx
index 2b09380..79c13c0 100755
--- a/frontend/src/pages/NFRegex.tsx/index.tsx
+++ b/frontend/src/pages/NFRegex.tsx/index.tsx
@@ -7,7 +7,7 @@ import { GeneralStats, nfregex, Service } from '../../components/NFRegex/utils';
 import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
 import AddNewService from '../../components/NFRegex/AddNewService';
 import { useWindowEvent } from '@mantine/hooks';
-import AddNewRegex from '../../components/NFRegex/AddNewRegex';
+import AddNewRegex from '../../components/AddNewRegex';
 
 
 function NFRegex({ children }: { children: any }) {
diff --git a/frontend/src/pages/RegexProxy/HomePage.tsx b/frontend/src/pages/RegexProxy/HomePage.tsx
deleted file mode 100755
index f7950c5..0000000
--- a/frontend/src/pages/RegexProxy/HomePage.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { ActionIcon, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
-import React, { useEffect, useState } from 'react';
-import { BsPlusLg } from "react-icons/bs";
-import { useNavigate } from 'react-router-dom';
-import ServiceRow from '../components/ServiceRow';
-import { Service } from '../js/models';
-import { errorNotify, eventUpdateName, fireUpdateRequest, servicelist } from '../js/utils';
-import AddNewService from '../components/AddNewService';
-import { useWindowEvent } from '@mantine/hooks';
-
-
-function HomePage() {
-
-    const [services, setServices] = useState<Service[]>([]);
-    const [loader, setLoader] = useState(true);
-    const navigator = useNavigate()
-    const [open, setOpen] = useState(false);
-    const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false);
-    
-    const updateInfo = async () => {
-        await servicelist().then(res => {
-            setServices(res)    
-        }).catch(err => {
-            errorNotify("Home Page Auto-Update failed!", err.toString())
-        })
-        setLoader(false)
-    }
-
-    useWindowEvent(eventUpdateName, updateInfo)
-    useEffect(fireUpdateRequest,[])
-
-    const closeModal = () => {setOpen(false);}
-
-    return <div id="service-list" className="center-flex-row">
-        <LoadingOverlay visible={loader} />
-        {services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
-            navigator("/"+srv.id)
-        }} />):<><Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" buttons</Title>
-            <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> 
-            <div className='center-flex'>
-                <Tooltip label="Add a new service" transition="pop" transitionDuration={200} /*openDelay={500}*/ zIndex={0} transitionTimingFunction="ease" color="blue" opened={tooltipAddServOpened} tooltipId="tooltip-addServ-id">
-                    <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"
-                        aria-describedby="tooltip-addSrv-id"
-                        onFocus={() => setTooltipAddServOpened(false)} onBlur={() => setTooltipAddServOpened(false)}
-                        onMouseEnter={() => setTooltipAddServOpened(true)} onMouseLeave={() => setTooltipAddServOpened(false)}><BsPlusLg size="20px" /></ActionIcon>
-                </Tooltip>
-            </div>
-        </>}
-        <AddNewService opened={open} onClose={closeModal} />
-    </div>
-}
-
-export default HomePage;
diff --git a/frontend/src/pages/RegexProxy/ServiceDetails.tsx b/frontend/src/pages/RegexProxy/ServiceDetails.tsx
index 5e1081d..50d5709 100755
--- a/frontend/src/pages/RegexProxy/ServiceDetails.tsx
+++ b/frontend/src/pages/RegexProxy/ServiceDetails.tsx
@@ -1,13 +1,14 @@
 import { ActionIcon, Grid, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
 import React, { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import RegexView from '../components/RegexView';
-import ServiceRow from '../components/ServiceRow';
-import AddNewRegex from '../components/AddNewRegex';
 import { BsPlusLg } from "react-icons/bs";
-import { RegexFilter, Service } from '../js/models';
-import { errorNotify, eventUpdateName, fireUpdateRequest, serviceinfo, serviceregexlist } from '../js/utils';
 import { useWindowEvent } from '@mantine/hooks';
+import { regexproxy, Service } from '../../components/RegexProxy/utils';
+import { RegexFilter } from '../../js/models';
+import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
+import ServiceRow from '../../components/RegexProxy/ServiceRow';
+import AddNewRegex from '../../components/AddNewRegex';
+import RegexView from '../../components/RegexView';
 
 function ServiceDetails() {
     const {srv_id} = useParams()
@@ -30,7 +31,7 @@ function ServiceDetails() {
     const updateInfo = async () => {
         if (!srv_id) return
         let error = false;
-        await serviceinfo(srv_id).then(res => {
+        await regexproxy.serviceinfo(srv_id).then(res => {
             setServiceInfo(res)
         }).catch(
           err =>{
@@ -38,7 +39,7 @@ function ServiceDetails() {
             navigator("/")
         })
         if (error) return
-        await serviceregexlist(srv_id).then(res => {
+        await regexproxy.serviceregexes(srv_id).then(res => {
             setRegexesList(res)
         }).catch(
           err => errorNotify(`Updater for ${srv_id} service failed [Regex list]!`, err.toString())
diff --git a/frontend/src/pages/RegexProxy/index.tsx b/frontend/src/pages/RegexProxy/index.tsx
new file mode 100755
index 0000000..58ce95b
--- /dev/null
+++ b/frontend/src/pages/RegexProxy/index.tsx
@@ -0,0 +1,97 @@
+import { ActionIcon, Badge, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
+import React, { useEffect, useState } from 'react';
+import { BsPlusLg } from "react-icons/bs";
+import { useNavigate, useParams } from 'react-router-dom';
+import ServiceRow from '../../components/RegexProxy/ServiceRow';
+import { GeneralStats, regexproxy, Service } from '../../components/RegexProxy/utils';
+import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
+import AddNewService from '../../components/RegexProxy/AddNewService';
+import { useWindowEvent } from '@mantine/hooks';
+import AddNewRegex from '../../components/AddNewRegex';
+
+
+function RegexProxy({ children }: { children: any }) {
+
+    const [services, setServices] = useState<Service[]>([]);
+    const [loader, setLoader] = useState(true);
+    const navigator = useNavigate()
+    const [open, setOpen] = useState(false);
+    const {srv} = useParams()
+    const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false);
+    const [tooltipAddOpened, setTooltipAddOpened] = useState(false);
+    
+    const [generalStats, setGeneralStats] = useState<GeneralStats>({closed:0, regexes:0, services:0});
+
+    const updateInfo = async () => {
+        
+        await Promise.all([
+            regexproxy.stats().then(res => {
+                setGeneralStats(res)
+            }).catch(
+                err => errorNotify("General Info Auto-Update failed!", err.toString())
+            ),
+            regexproxy.services().then(res => {
+                setServices(res)    
+            }).catch(err => {
+                errorNotify("Home Page Auto-Update failed!", err.toString())
+            })
+        ])
+        setLoader(false)
+    }
+
+    useWindowEvent(eventUpdateName, updateInfo)
+    useEffect(fireUpdateRequest,[])
+
+    const closeModal = () => {setOpen(false);}
+
+    return <>
+    <Space h="sm" />
+    <div className='center-flex'>
+        <Title order={4}>Netfilter Regex</Title>
+        <div className='flex-spacer' />
+        <Badge size="sm" color="green" variant="filled">Services: {generalStats.services}</Badge>
+        <Space w="xs" />
+        <Badge size="sm" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
+        <Space w="xs" />
+        <Badge size="sm" color="violet" variant="filled">Regexes: {generalStats.regexes}</Badge>
+        <Space w="xs" />
+        { srv?
+          <Tooltip label="Add a new regex" position='bottom' transition="pop" transitionDuration={200} transitionTimingFunction="ease" 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>
+        : <Tooltip label="Add a new service" position='bottom' transition="pop" transitionDuration={200} transitionTimingFunction="ease" 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>
+      }
+    </div>
+    <div id="service-list" className="center-flex-row">
+        {srv?null:<>
+            <LoadingOverlay visible={loader} />
+            {services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
+                navigator("/regexproxy/"+srv.id)
+            }} />):<><Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" buttons</Title>
+                <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> 
+                <div className='center-flex'>
+                    <Tooltip label="Add a new service" transition="pop" transitionDuration={200} transitionTimingFunction="ease" 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>
+                </div>
+            </>}
+            <AddNewService opened={open} onClose={closeModal} />
+        </>}
+    </div>
+    {srv?children:null}
+    {srv?
+        <AddNewRegex opened={open} onClose={closeModal} service={srv} />:
+        <AddNewService opened={open} onClose={closeModal} />
+    }
+    </>
+}
+
+export default RegexProxy;