diff --git a/src/webui/requirements.in b/src/webui/requirements.in
index 9facefbbae3c20b90304803e9ccfa4ebf4011fbb..2c638a223c6b45eecaf7479bdf249954e6bc8543 100644
--- a/src/webui/requirements.in
+++ b/src/webui/requirements.in
@@ -17,4 +17,4 @@ Flask-WTF==1.0.0
 flask-healthz==0.0.3
 flask-unittest==0.1.2
 lorem-text==2.1
-werkzeug==2.3.7
\ No newline at end of file
+werkzeug==2.3.7
diff --git a/src/webui/service/__init__.py b/src/webui/service/__init__.py
index 3c64f45c90457e1b6a9553e60634879a28910a31..05b2eeaf0b7277b960259950ec099b9517124c17 100644
--- a/src/webui/service/__init__.py
+++ b/src/webui/service/__init__.py
@@ -16,6 +16,7 @@ import json
 from typing import List, Tuple, Union
 from flask import Flask, request, session
 from flask_healthz import healthz, HealthError
+from common.tools.grpc.Tools import grpc_message_to_json
 from context.client.ContextClient import ContextClient
 from device.client.DeviceClient import DeviceClient
 
@@ -100,6 +101,7 @@ def create_app(use_config=None, web_app_root=None):
 
     app.jinja_env.globals.update({              # pylint: disable=no-member
         'enumerate'           : enumerate,
+        'grpc_message_to_json': grpc_message_to_json,
         'json_to_list'        : json_to_list,
         'round'               : round,
         'get_working_context' : get_working_context,
diff --git a/src/webui/service/service/forms.py b/src/webui/service/service/forms.py
new file mode 100644
index 0000000000000000000000000000000000000000..b3fffcc89a6256e367690032c66530e188e00a8d
--- /dev/null
+++ b/src/webui/service/service/forms.py
@@ -0,0 +1,261 @@
+# Copyright 2022-2023 ETSI TeraFlowSDN - TFS OSG (https://tfs.etsi.org/)
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+import ipaddress, re
+from flask_wtf import FlaskForm
+from wtforms import StringField, SelectField, IntegerField, DecimalField
+from wtforms.validators import InputRequired, Optional, NumberRange, ValidationError, StopValidation
+
+# Custom IPv4 address validator
+def validate_ipv4_address(form, field):
+    try:
+        ipaddress.IPv4Address(field.data)
+    except ipaddress.AddressValueError:
+        raise ValidationError('Invalid IPv4 address format')
+
+# Custom IPv6 address validator
+def validate_ipv6_address(form, field):
+    try:
+        ipaddress.IPv6Address(field.data)
+    except ipaddress.AddressValueError:
+        raise ValidationError('Invalid IPv6 address format')
+    
+# Custom Mac address validator
+def validate_mac_address(form, field):             
+    if not re.match(r'^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$', field.data):
+        raise ValidationError('Invalid MAC address format')
+
+# Custom route distinguisher validator
+def validate_route_distinguisher(form,field):
+    pattern = r'^([0-9]|[1-9][0-9]{1,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5]):([0-9]|[1-9][0-9]{1,8}|[1-3][0-9]{9}|4[01][0-9]{8}|42[0-8][0-9]{7}|429[0-3][0-9]{6}|4294[0-8][0-9]{5}|42949[0-5][0-9]{4}|429496[0-6][0-9]{3}|4294967[01][0-9]{2}|42949672[0-8][0-9]|429496729[0-5])$'
+    if not re.match(pattern, field.data):
+        raise ValidationError('Invalid Route Distinguisher')
+
+# Custom integer validator
+def validate_uint32(form, field):
+    if not 0 <= field.data <= 2**32-1:
+        raise ValidationError('Value must be a positive integer within the range of uint32')
+
+# Custom  BGP AS validator
+def validate_NI_as(form, field):
+    if form.NI_protocol.data == 'BGP' and field.data == None:
+        raise StopValidation('AS field is required if the BGP protocol is selected.')
+        
+class CustomInputRequired():
+    def __init__(self, message=None):
+        self.message = message or "This field is required." 
+    def __call__(self, form, field):
+        if field.data is None or field.data == '':
+            raise StopValidation(self.message)
+        
+class AddServiceForm_1(FlaskForm):
+    service_type = SelectField('Type of service', choices=[('', 'Select a type of service to add'), ('ACL_L2', 'ACL_L2'), ('ACL_IPV4', 'ACL_IPV4'), ('ACL_IPV6', 'ACL_IPV6'), ('L2VPN', 'L2VPN'), ('L3VPN', 'L3VPN')], validators=[InputRequired()])
+
+class AddServiceForm_ACL_L2(FlaskForm):
+    #GENERIC SERVICE PARAMETERS (COMMON & MANDATORY)
+    service_name       = StringField('Service Name', validators=[CustomInputRequired()])
+    service_type       = SelectField('Service Type', choices=[(2, '2 (L2NM)')], validators=[CustomInputRequired()])
+    service_device_1   = SelectField('Device_1', choices=[('', 'Select a device (Mandatory)')], validators=[CustomInputRequired()])
+    service_device_2   = SelectField('Device_2', choices=[('', 'Select a device (Mandatory)')], validators=[CustomInputRequired()])
+    service_endpoint_1 = StringField('Device_1 Endpoint', validators=[CustomInputRequired()])
+    service_endpoint_2 = StringField('Device_2 Endpoint', validators=[CustomInputRequired()])
+    
+    #GENERIC SERVICE CONSTRAINT PARAMETERS (ALL OPTIONAL)
+    service_capacity    = DecimalField('Service Capacity', places=2, default=10.00, validators=[Optional(), NumberRange(min=0)])
+    service_latency     = DecimalField('Service Latency', places=2, default=15.20, validators=[Optional(), NumberRange(min=0)])
+    service_availability= DecimalField('Service Availability', places=2, validators=[Optional(), NumberRange(min=0)])
+    service_isolation   = SelectField('Service Isolation', choices=[('', 'Select (Optional)'), ('NO_ISOLATION', 'NO_ISOLATION'), ('PHYSICAL_ISOLATION', 'PHYSICAL_ISOLATION'), 
+                                                                    ('LOGICAL_ISOLATION', 'LOGICAL_ISOLATION'), ('PROCESS_ISOLATION', 'PROCESS_ISOLATION'), ('PHYSICAL_MEMORY_ISOLATION', 'PHYSICAL_MEMORY_ISOLATION'), 
+                                                                    ('PHYSICAL_NETWORK_ISOLATION', 'PHYSICAL_NETWORK_ISOLATION'), ('VIRTUAL_RESOURCE_ISOLATION', 'VIRTUAL_RESOURCE_ISOLATION'), 
+                                                                    ('NETWORK_FUNCTIONS_ISOLATION', 'NETWORK_FUNCTIONS_ISOLATION'), ('SERVICE_ISOLATION', 'SERVICE_ISOLATION')], validators=[Optional()])
+    
+    #MANDATORY_PARAMETERS
+    name                = StringField('ACL Name', validators=[CustomInputRequired("The name of the ACL is a mandatory parameter")])
+    type                = SelectField('ACL Type', choices=[('ACL_L2', 'ACL_L2')], validators=[CustomInputRequired("The type of the ACL is a mandatory parameter")])
+    sequence_id         = IntegerField('ACL Sequence ID', validators=[CustomInputRequired("The name of the Sequence ID of the ACL is a mandatory parameter"), validate_uint32])
+    forwarding_action   = SelectField('ACL Fowarding Action', choices=[('', 'Select an action (Mandatory)'), ('ACCEPT', 'Accept'), ('DROP','Drop'),('REJECT','Reject')], validators=[CustomInputRequired("The Forwarding Action of the ACL is a mandatory parameter")])  
+    log_action          = SelectField('ACL Log Action', choices=[(None, 'Select a log action (Optional)'), ('LOG_SYSLOG', 'Syslog'), ('LOG_NONE','None')], validators=[Optional()]) 
+
+    #PARAMETERS FOR Associating ACL to IF 
+    interface           = StringField('Interface Name', validators=[CustomInputRequired("The name of the Interface is a mandatory parameter")])
+    subinterface        = StringField('Subinterface Index', validators=[Optional()])
+    traffic_flow        = SelectField('ACL Traffic Flow Direction', choices=[('', 'Select a direction (Mandatory)'), ('Ingress', 'Ingress'), ('Egress','Egress')], validators=[CustomInputRequired("The direction of the traffic flow is a mandatory parameter")])
+
+    #SPECIFIC PARAMETERS - Creating ACL Entry [ACL_L2]
+    source_mac          = StringField('Source MAC Address', validators=[Optional(), validate_mac_address])  
+    destination_mac     = StringField('Destination MAC Address', validators=[Optional(), validate_mac_address]) 
+
+class AddServiceForm_ACL_IPV4(FlaskForm):
+    #GENERIC SERVICE PARAMETERS (COMMON & MANDATORY)
+    service_name        = StringField('Service Name', validators=[CustomInputRequired()])
+    service_type        = SelectField('Service Type', choices=[(1, '1 (L3NM)')], validators=[CustomInputRequired()])
+    service_device_1    = SelectField('Device_1', choices=[('', 'Select a device (Mandatory)')], validators=[CustomInputRequired()])
+    service_device_2    = SelectField('Device_2', choices=[('', 'Select a device (Mandatory)')], validators=[CustomInputRequired()])
+    service_endpoint_1  = StringField('Device_1 Endpoint', validators=[CustomInputRequired()])
+    service_endpoint_2  = StringField('Device_2 Endpoint', validators=[CustomInputRequired()])
+    
+    #GENERIC SERVICE CONSTRAINT PARAMETERS (ALL OPTIONAL)
+    service_capacity    = DecimalField('Service Capacity', places=2, default=10.00, validators=[Optional(), NumberRange(min=0)])
+    service_latency     = DecimalField('Service Latency', places=2, default=15.20, validators=[Optional(), NumberRange(min=0)])
+    service_availability= DecimalField('Service Availability', places=2, validators=[Optional(), NumberRange(min=0)])
+    service_isolation   = SelectField('Service Isolation', choices=[('', 'Select (Optional)'), ('NO_ISOLATION', 'NO_ISOLATION'), ('PHYSICAL_ISOLATION', 'PHYSICAL_ISOLATION'), 
+                                                                    ('LOGICAL_ISOLATION', 'LOGICAL_ISOLATION'), ('PROCESS_ISOLATION', 'PROCESS_ISOLATION'), ('PHYSICAL_MEMORY_ISOLATION', 'PHYSICAL_MEMORY_ISOLATION'), 
+                                                                    ('PHYSICAL_NETWORK_ISOLATION', 'PHYSICAL_NETWORK_ISOLATION'), ('VIRTUAL_RESOURCE_ISOLATION', 'VIRTUAL_RESOURCE_ISOLATION'), 
+                                                                    ('NETWORK_FUNCTIONS_ISOLATION', 'NETWORK_FUNCTIONS_ISOLATION'), ('SERVICE_ISOLATION', 'SERVICE_ISOLATION')], validators=[Optional()])
+    
+    #MANDATORY_PARAMETERS
+    name                = StringField('ACL Name', validators=[CustomInputRequired("The name of the ACL is a mandatory parameter")])
+    type                = SelectField('ACL Type', choices=[('ACL_IPV4', 'ACL_IPV4')], validators=[CustomInputRequired("The type of the ACL is a mandatory parameter")])
+    sequence_id         = IntegerField('ACL Sequence ID', validators=[InputRequired(), NumberRange(min=1, message="Sequence ID must be greater than 0")])
+    forwarding_action   = SelectField('ACL Fowarding Action', choices=[(None, 'Select an action (Mandatory)'), ('ACCEPT', 'Accept'), ('DROP','Drop'),('REJECT','Reject')], validators=[InputRequired()])  
+    log_action          = SelectField('ACL Log Action', choices=[(None, 'Select a log action (Optional)'), ('LOG_SYSLOG', 'Syslog'), ('LOG_NONE','None')], validators=[Optional()]) 
+
+    #PARAMETERS FOR Associating ACL to IF 
+    interface           = StringField('Interface Name', validators=[InputRequired()])
+    subinterface        = StringField('Subinterface Index', validators=[Optional()])
+    traffic_flow        = SelectField('ACL Traffic Flow Direction', choices=[('', 'Select a direction (Mandatory)'), ('Ingress', 'Ingress'), ('Egress','Egress')], validators=[InputRequired()])
+
+    #OPTIONAL_PARAMETERS - Creating ACL Entry [ACL_IPV4]
+    source_address      = StringField('Source Address', validators=[Optional(), validate_ipv4_address])
+    destination_address = StringField('Destination Address', validators=[Optional(), validate_ipv4_address]) 
+    protocol            = IntegerField('Protocol',  validators=[Optional(),NumberRange(min=1, max=255, message="Protocol number is between 1 and 255 as defined by IANA")])
+    hop_limit           = IntegerField('Hop Limit', validators=[Optional(),NumberRange(min=1, max=255, message="The Hop limit value has to be between 0 and 255")])
+    dscp                = IntegerField('DSCP', validators=[Optional(),NumberRange(min=1, max=255, message="The DSCP value has to be between 0 and 63")])
+    source_port         = IntegerField('Source Port', validators=[Optional(),NumberRange(min=0, max=65535, message="The Port value has to be between 0 and 655535")])
+    destination_port    = IntegerField('Destination Port', validators=[Optional(),NumberRange(min=0, max=65535, message="The Port value has to be between 0 and 655535")])
+    tcp_flags           = SelectField('TCP Flags', choices=[(None, 'Select a TCP Flag (Optional)'),('TCP_SYN', 'TCP_SYN'),('TCP_ACK', 'TCP_ACK'),('TCP_RST', 'TCP_RST'),('TCP_FIN', 'TCP_FIN'),
+                                                            ('TCP_PSH', 'TCP_PSH'),('TCP_URG', 'TCP_URG') ,('TCP_ECE', 'TCP_ECE'),('TCP_CWR', 'TCP_CWR')], validators=[Optional()]) 
+
+class AddServiceForm_ACL_IPV6(FlaskForm):
+    #GENERIC SERVICE PARAMETERS (COMMON & MANDATORY)
+    service_name       = StringField('Service Name', validators=[CustomInputRequired()])
+    service_type       = SelectField('Service Type', choices=[(1, '1 (L3NM)')], validators=[CustomInputRequired()])
+    service_device_1   = SelectField('Device_1', choices=[('', 'Select a device (Mandatory)')], validators=[CustomInputRequired()])
+    service_device_2   = SelectField('Device_2', choices=[('', 'Select a device (Mandatory)')], validators=[CustomInputRequired()])
+    service_endpoint_1 = StringField('Device_1 Endpoint', validators=[CustomInputRequired()])
+    service_endpoint_2 = StringField('Device_2 Endpoint', validators=[CustomInputRequired()])
+    
+    #GENERIC SERVICE CONSTRAINT PARAMETERS (ALL OPTIONAL)
+    service_capacity    = DecimalField('Service Capacity', places=2, default=10.00, validators=[Optional(), NumberRange(min=0)])
+    service_latency     = DecimalField('Service Latency', places=2, default=15.20, validators=[Optional(), NumberRange(min=0)])
+    service_availability= DecimalField('Service Availability', places=2, validators=[Optional(), NumberRange(min=0)])
+    service_isolation   = SelectField('Service Isolation', choices=[('', 'Select (Optional)'), ('NO_ISOLATION', 'NO_ISOLATION'), ('PHYSICAL_ISOLATION', 'PHYSICAL_ISOLATION'), 
+                                                                    ('LOGICAL_ISOLATION', 'LOGICAL_ISOLATION'), ('PROCESS_ISOLATION', 'PROCESS_ISOLATION'), ('PHYSICAL_MEMORY_ISOLATION', 'PHYSICAL_MEMORY_ISOLATION'), 
+                                                                    ('PHYSICAL_NETWORK_ISOLATION', 'PHYSICAL_NETWORK_ISOLATION'), ('VIRTUAL_RESOURCE_ISOLATION', 'VIRTUAL_RESOURCE_ISOLATION'), 
+                                                                    ('NETWORK_FUNCTIONS_ISOLATION', 'NETWORK_FUNCTIONS_ISOLATION'), ('SERVICE_ISOLATION', 'SERVICE_ISOLATION')], validators=[Optional()])
+    
+    #MANDATORY_PARAMETERS
+    name                = StringField('ACL Name', validators=[InputRequired()])
+    type                = SelectField('ACL Type', choices=[('ACL_IPV6', 'ACL_IPV6')], validators=[InputRequired()])
+    sequence_id         = IntegerField('ACL Sequence ID', validators=[InputRequired(), NumberRange(min=1, message="Sequence ID must be greater than 0")])
+    forwarding_action   = SelectField('ACL Fowarding Action', choices=[(None, 'Select an action (Mandatory)'), ('ACCEPT', 'Accept'), ('DROP','Drop'),('REJECT','Reject')], validators=[InputRequired()])  
+    log_action          = SelectField('ACL Log Action', choices=[(None, 'Select a log action (Optional)'), ('LOG_SYSLOG', 'Syslog'), ('LOG_NONE','None')], validators=[Optional()]) 
+
+    #PARAMETERS FOR Associating ACL to IF 
+    interface           = StringField('Interface Name', validators=[InputRequired()])
+    subinterface        = StringField('Subinterface Index', validators=[Optional()])
+    traffic_flow        = SelectField('ACL Traffic Flow Direction', choices=[('', 'Select a direction (Mandatory)'), ('Ingress', 'Ingress'), ('Egress','Egress')], validators=[InputRequired()])
+
+    #SPECIFIC PARAMETERS - Creating ACL Entry [ACL_IPV6]
+    source_address      = StringField('Source Address', validators=[Optional(), validate_ipv6_address])
+    destination_address = StringField('Destination Address', validators=[Optional(), validate_ipv6_address])
+    protocol            = IntegerField('Protocol',  validators=[Optional(),NumberRange(min=1, max=255, message="Protocol number is between 1 and 255 as defined by IANA")])
+    hop_limit           = IntegerField('Hop Limit', validators=[Optional(),NumberRange(min=1, max=255, message="The Hop limit value has to be between 0 and 255")])
+    dscp                = IntegerField('DSCP', validators=[Optional(),NumberRange(min=1, max=255, message="The DSCP value has to be between 0 and 63")])
+
+class AddServiceForm_L2VPN(FlaskForm):
+    #GENERIC SERVICE PARAMETERS (COMMON & MANDATORY)
+    service_name       = StringField('Service Name', validators=[CustomInputRequired()])
+    service_type       = SelectField('Service Type', choices=[(2, '2 (L2NM)')], validators=[CustomInputRequired()])
+    service_device_1   = SelectField('Device_1', choices=[('', 'Select a device (Mandatory)')], validators=[CustomInputRequired()])
+    service_device_2   = SelectField('Device_2', choices=[('', 'Select a device (Mandatory)')], validators=[CustomInputRequired()])
+    service_endpoint_1 = StringField('Device_1 Endpoint', validators=[CustomInputRequired()])
+    service_endpoint_2 = StringField('Device_2 Endpoint', validators=[CustomInputRequired()])
+    
+    #GENERIC SERVICE CONSTRAINT PARAMETERS (ALL OPTIONAL)
+    service_capacity    = DecimalField('Service Capacity', places=2, default=10.00, validators=[Optional(), NumberRange(min=0)])
+    service_latency     = DecimalField('Service Latency', places=2, default=15.20, validators=[Optional(), NumberRange(min=0)])
+    service_availability= DecimalField('Service Availability', places=2, validators=[Optional(), NumberRange(min=0)])
+    service_isolation   = SelectField('Service Isolation', choices=[('', 'Select (Optional)'), ('NO_ISOLATION', 'NO_ISOLATION'), ('PHYSICAL_ISOLATION', 'PHYSICAL_ISOLATION'), 
+                                                                    ('LOGICAL_ISOLATION', 'LOGICAL_ISOLATION'), ('PROCESS_ISOLATION', 'PROCESS_ISOLATION'), ('PHYSICAL_MEMORY_ISOLATION', 'PHYSICAL_MEMORY_ISOLATION'), 
+                                                                    ('PHYSICAL_NETWORK_ISOLATION', 'PHYSICAL_NETWORK_ISOLATION'), ('VIRTUAL_RESOURCE_ISOLATION', 'VIRTUAL_RESOURCE_ISOLATION'), 
+                                                                    ('NETWORK_FUNCTIONS_ISOLATION', 'NETWORK_FUNCTIONS_ISOLATION'), ('SERVICE_ISOLATION', 'SERVICE_ISOLATION')], validators=[Optional()])
+    
+    
+    NI_name                      = StringField('NI Name', validators=[CustomInputRequired()])
+    NI_mtu                       = IntegerField('NI MTU', default=1500, validators=[CustomInputRequired(), NumberRange(min=0, message="MTU value can't be negative")])
+    NI_description               = StringField('NI Description', validators=[Optional()])
+    #Device_1 specific
+    Device_1_NI_remote_system    = StringField('Device_1 NI Remote System', validators=[CustomInputRequired(),validate_ipv4_address])
+    Device_1_NI_VC_ID            = IntegerField('Device_1 NI VC ID', validators=[CustomInputRequired(), NumberRange(min=0, message="VC can't be negative")])
+    Device_1_NI_connection_point = StringField('Device_1 NI Conection Point', validators=[CustomInputRequired()])
+    #Device_2 specific
+    Device_2_NI_remote_system    = StringField ('Device_2 NI Remote System', validators=[CustomInputRequired(),validate_ipv4_address])
+    Device_2_NI_VC_ID            = IntegerField('Device_2 NI VC ID', validators=[CustomInputRequired(), NumberRange(min=0, message="VC can't be negative")])
+    Device_2_NI_connection_point = StringField ('Device_2 NI Conection Point', validators=[CustomInputRequired()])
+     
+    #Interface parameters (DEVICE SPECIFIC)
+    Device_1_IF_index       = IntegerField('Device_1 SubIF Index', validators=[CustomInputRequired(), NumberRange(min=0, message="SubIf index can't be negative")])
+    Device_1_IF_vlan_id     = IntegerField('Device_1 VLAN ID', validators=[CustomInputRequired(), NumberRange(min=0, message="VlanID can't be negative")])
+    Device_1_IF_mtu         = IntegerField('Device_1 Interface MTU', validators=[Optional(), NumberRange(min=0, message="MTU value can't be negative")])
+    Device_1_IF_description = StringField ('Device_1 SubIF Description', validators=[Optional()])
+    
+    Device_2_IF_index       = IntegerField('Device_2 SubIF Index', validators=[CustomInputRequired(), NumberRange(min=0, message="SubIf index can't be negative")])
+    Device_2_IF_vlan_id     = IntegerField('Device_2 VLAN ID', validators=[CustomInputRequired(), NumberRange(min=0, message="VlanID can't be negative")])
+    Device_2_IF_mtu         = IntegerField('Device_2 Interface MTU', validators=[Optional(), NumberRange(min=0, message="MTU value can't be negative")])
+    Device_2_IF_description = StringField ('Device_2 SubIF Description', validators=[Optional()])
+
+class AddServiceForm_L3VPN(FlaskForm):
+    #GENERIC SERVICE PARAMETERS (COMMON & MANDATORY)
+    service_name     = StringField('Service Name', validators=[CustomInputRequired()])
+    service_type     = SelectField('Service Type', choices=[(1, '1 (L3NM)')], validators=[CustomInputRequired()])
+    service_device_1   = SelectField('Device_1', choices=[('', 'Select a device (Mandatory)')], validators=[CustomInputRequired()])
+    service_device_2   = SelectField('Device_2', choices=[('', 'Select a device (Mandatory)')], validators=[CustomInputRequired()])
+    service_endpoint_1 = StringField('Device_1 Endpoint', validators=[CustomInputRequired()])
+    service_endpoint_2 = StringField('Device_2 Endpoint', validators=[CustomInputRequired()])
+    
+    #GENERIC SERVICE CONSTRAINT PARAMETERS (ALL OPTIONAL)
+    service_capacity    = DecimalField('Service Capacity', places=2, default=10.00, validators=[Optional(), NumberRange(min=0)])
+    service_latency     = DecimalField('Service Latency', places=2, default=15.20, validators=[Optional(), NumberRange(min=0)])
+    service_availability= DecimalField('Service Availability', places=2, validators=[Optional(), NumberRange(min=0)])
+    service_isolation   = SelectField('Service Isolation', choices=[('', 'Select (Optional)'), ('NO_ISOLATION', 'NO_ISOLATION'), ('PHYSICAL_ISOLATION', 'PHYSICAL_ISOLATION'), 
+                                                                    ('LOGICAL_ISOLATION', 'LOGICAL_ISOLATION'), ('PROCESS_ISOLATION', 'PROCESS_ISOLATION'), ('PHYSICAL_MEMORY_ISOLATION', 'PHYSICAL_MEMORY_ISOLATION'), 
+                                                                    ('PHYSICAL_NETWORK_ISOLATION', 'PHYSICAL_NETWORK_ISOLATION'), ('VIRTUAL_RESOURCE_ISOLATION', 'VIRTUAL_RESOURCE_ISOLATION'), 
+                                                                    ('NETWORK_FUNCTIONS_ISOLATION', 'NETWORK_FUNCTIONS_ISOLATION'), ('SERVICE_ISOLATION', 'SERVICE_ISOLATION')], validators=[Optional()])
+     
+    NI_name           = StringField('Name', validators=[InputRequired()])
+    NI_route_distinguisher = StringField('Route Distinguisher', validators=[InputRequired(),validate_route_distinguisher])
+    NI_router_id      = StringField('Router ID', validators=[Optional(), validate_ipv4_address])
+    NI_description    = StringField('Description', validators=[Optional()])
+    NI_protocol       = SelectField('Protocol', choices=[('', 'Select a type (Mandatory)'),('STATIC', 'STATIC'),('DIRECTLY_CONNECTED', 'DIRECTLY_CONNECTED'),('BGP', 'BGP')], validators=[InputRequired()])  
+    NI_as             = IntegerField('AS', default=None, validators=[validate_NI_as, Optional(), validate_uint32])                      
+    NI_address_family = SelectField('Protocol Address Family', choices=[('', 'Select a type (Mandatory)'),('IPV4', 'IPV4'),('IPV6', 'IPV6')], validators=[InputRequired()])        
+    NI_default_import_policy = SelectField('Default Network Instance Import Policy', choices=[('', 'Select a policy (Mandatory)'),('ACCEPT_ROUTE', 'ACCEPT_ROUTE'),('REJECT_ROUTE', 'REJECT_ROUTE')], validators=[Optional()])                                 
+    NI_import_policy  = StringField('Name of the Network Instance Import Policy', validators=[Optional()])
+    NI_export_policy  = StringField('Name of the Network Instance Export Policy', validators=[Optional()])
+
+    ## Interface (IF) PARAMS
+    Device_1_IF_index       = IntegerField('Device_1 SubIF Index', validators=[CustomInputRequired(), NumberRange(min=0, message="SubIf index can't be negative")])
+    Device_1_IF_vlan_id     = IntegerField('Device_1 VLAN ID', validators=[CustomInputRequired(), NumberRange(min=0, message="VlanID can't be negative")])
+    Device_1_IF_mtu         = IntegerField('Device_1 Interface MTU', validators=[Optional(), NumberRange(min=0, message="MTU value can't be negative")])
+    Device_1_IF_address_ip  = StringField('Device_1 IP Address', validators=[CustomInputRequired(), validate_ipv4_address])
+    Device_1_IF_address_prefix = IntegerField('Device_1 IP Prefix length', validators=[CustomInputRequired(), validate_uint32])
+    Device_1_IF_description = StringField ('Device_1 SubIF Description', validators=[Optional()])
+    
+    Device_2_IF_index       = IntegerField('Device_2 SubIF Index', validators=[CustomInputRequired(), NumberRange(min=0, message="SubIf index can't be negative")])
+    Device_2_IF_vlan_id     = IntegerField('Device_2 VLAN ID', validators=[CustomInputRequired(), NumberRange(min=0, message="VlanID can't be negative")])
+    Device_2_IF_mtu         = IntegerField('Device_2 Interface MTU', validators=[Optional(), NumberRange(min=0, message="MTU value can't be negative")])
+    Device_2_IF_address_ip  = StringField('Device_2 IP Address', validators=[CustomInputRequired(), validate_ipv4_address])
+    Device_2_IF_address_prefix = IntegerField('Device_2 IP Prefix length', validators=[CustomInputRequired(), validate_uint32])
+    Device_2_IF_description = StringField ('Device_2 SubIF Description', validators=[Optional()])
diff --git a/src/webui/service/service/routes.py b/src/webui/service/service/routes.py
index 08312e5257d13c4b55b83733ded689c7565c4790..1d3e254905ef3fec9f78b06eb843a112c1c8edff 100644
--- a/src/webui/service/service/routes.py
+++ b/src/webui/service/service/routes.py
@@ -12,30 +12,50 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-from contextlib import contextmanager
+ 
+import json, logging #, re
 import json
 import grpc
 from collections import defaultdict
 from flask import current_app, redirect, render_template, Blueprint, flash, session, url_for, request
 from common.proto.context_pb2 import (
-    IsolationLevelEnum, Service, ServiceId, ServiceTypeEnum, ServiceStatusEnum, Connection, Empty, DeviceDriverEnum,
+    ContextId, IsolationLevelEnum, Service, ServiceId, ServiceTypeEnum, ServiceStatusEnum, Connection, Empty, DeviceDriverEnum,
     ConfigActionEnum, Device, DeviceList)
 from common.tools.context_queries.Context import get_context
 from common.tools.context_queries.Topology import get_topology
 from common.tools.context_queries.EndPoint import get_endpoint_names
-from common.tools.context_queries.Service import get_service_by_uuid
+from wtforms.validators import ValidationError
+from context.client.ContextClient import ContextClient
+from service.client.ServiceClient import ServiceClient
+from device.client.DeviceClient import DeviceClient
+from common.tools.object_factory.Service import (
+    json_service_l2nm_planned, json_service_l3nm_planned)
+from common.tools.object_factory.Constraint import (
+    json_constraint_sla_availability, json_constraint_sla_capacity, json_constraint_sla_isolation,
+    json_constraint_sla_latency)
+from common.tools.descriptor.Loader import DescriptorLoader, compose_notifications
 from common.tools.object_factory.ConfigRule import json_config_rule_set
+from common.tools.object_factory.Device import json_device_id
+from common.tools.object_factory.EndPoint import json_endpoint_id
+from webui.service.service.forms import AddServiceForm_1, AddServiceForm_ACL_L2, AddServiceForm_ACL_IPV4, AddServiceForm_ACL_IPV6, AddServiceForm_L2VPN, AddServiceForm_L3VPN
+from common.tools.context_queries.Service import get_service_by_uuid
 from common.tools.object_factory.Context import json_context_id
 from common.tools.object_factory.Topology import json_topology_id
-from context.client.ContextClient import ContextClient
-from service.client.ServiceClient import ServiceClient
 from typing import Optional, Set
 
+LOGGER = logging.getLogger(__name__)
 service = Blueprint('service', __name__, url_prefix='/service')
 
 context_client = ContextClient()
 service_client = ServiceClient()
+device_client = DeviceClient()
+
+type     = ["ACL_UNDEFINED", "ACL_IPV4","ACL_IPV6","ACL_L2","ACL_MPLS","ACL_MIXED"]
+f_action = ["UNDEFINED", "DROP","ACCEPT","REJECT"]
+l_action = ["UNDEFINED", "LOG_NONE","LOG_SYSLOG"]
 
+'''
+@service.get('/')                                                                   #Route for the homepage of the created "service" blueprint 
 @contextmanager
 def connected_client(c):
     try:
@@ -43,8 +63,8 @@ def connected_client(c):
         yield c
     finally:
         c.close()
+'''
 
-# Context client must be in connected state when calling this function
 def get_device_drivers_in_use(topology_uuid: str, context_uuid: str) -> Set[str]:
     active_drivers = set()
     grpc_topology = get_topology(context_client, topology_uuid, context_uuid=context_uuid, rw_copy=False)
@@ -91,13 +111,10 @@ def home():
         'service/home.html', services=services, device_names=device_names, endpoints_data=endpoints_data,
         ste=ServiceTypeEnum, sse=ServiceStatusEnum, active_drivers=active_drivers)
 
-
 @service.route('add', methods=['GET', 'POST'])
 def add():
     flash('Add service route called', 'danger')
     raise NotImplementedError()
-    #return render_template('service/home.html')
-
 
 def get_hub_module_name(dev: Device) -> Optional[str]:
     for cr in dev.device_config.config_rules:
@@ -154,8 +171,6 @@ def add_xr():
                 hub_interfaces_by_device[d.name].sort()
                 leaf_interfaces_by_device[d.name].sort()
 
-        # Find out what endpoints are already used so that they can be disabled
-        # in the create screen
         context_obj = get_context(context_client, context_uuid, rw_copy=False)
         if context_obj is None:
             flash('Context({:s}) not found'.format(str(context_uuid)), 'danger')
@@ -253,7 +268,6 @@ def detail(service_uuid: str):
 
     try:
         context_client.connect()
-
         endpoint_ids = list()
         service_obj = get_service_by_uuid(context_client, service_uuid, rw_copy=False)
         if service_obj is None:
@@ -271,16 +285,14 @@ def detail(service_uuid: str):
             device_names, endpoints_data = dict(), dict()
 
         context_client.close()
-
         return render_template(
             'service/detail.html', service=service_obj, connections=connections, device_names=device_names,
-            endpoints_data=endpoints_data, ste=ServiceTypeEnum, sse=ServiceStatusEnum, ile=IsolationLevelEnum)
+            endpoints_data=endpoints_data, ste=ServiceTypeEnum, sse=ServiceStatusEnum, ile=IsolationLevelEnum, type = type, f_action = f_action, l_action = l_action)
     except Exception as e:
         flash('The system encountered an error and cannot show the details of this service.', 'warning')
         current_app.logger.exception(e)
         return redirect(url_for('service.home'))
 
-
 @service.get('<path:service_uuid>/delete')
 def delete(service_uuid: str):
     if 'context_uuid' not in session or 'topology_uuid' not in session:
@@ -301,3 +313,360 @@ def delete(service_uuid: str):
         flash('Problem deleting service "{:s}": {:s}'.format(service_uuid, str(e.details())), 'danger')
         current_app.logger.exception(e)
     return redirect(url_for('service.home'))
+
+@service.route('add/configure', methods=['GET', 'POST'])
+def add_configure():
+    form_1 = AddServiceForm_1()
+    if form_1.validate_on_submit():
+        if form_1.service_type.data == 'ACL_L2':
+            return redirect(url_for('service.add_configure_ACL_L2'))
+        elif form_1.service_type.data == 'ACL_IPV4':
+            return redirect(url_for('service.add_configure_ACL_IPV4'))      
+        elif form_1.service_type.data == 'ACL_IPV6':
+            return redirect(url_for('service.add_configure_ACL_IPV6'))      
+        elif form_1.service_type.data == 'L2VPN':
+            return redirect(url_for('service.add_configure_L2VPN'))      
+        elif form_1.service_type.data == 'L3VPN':
+            return redirect(url_for('service.add_configure_L3VPN'))
+    return render_template('service/add.html', form_1=form_1, submit_text='Continue to configuraton')
+
+@service.route('add/configure/ACL_L2', methods=['GET', 'POST'])
+def add_configure_ACL_L2():
+    form_acl = AddServiceForm_ACL_L2()
+    service_obj = Service()   
+
+    context_uuid, topology_uuid = get_context_and_topology_uuids()
+    if context_uuid and topology_uuid:
+        context_client.connect()
+        grpc_topology = get_topology(context_client, topology_uuid, context_uuid=context_uuid, rw_copy=False)
+        if grpc_topology:
+            topo_device_uuids = {device_id.device_uuid.uuid for device_id in grpc_topology.device_ids}          
+            context_obj = get_context(context_client, context_uuid, rw_copy=False)
+            if context_obj is None:
+                flash('Context({:s}) not found'.format(str(context_uuid)), 'danger')
+                return redirect(request.url)
+            services = context_client.ListServices(context_obj.context_id)
+            devices = []
+            for service in services.services:
+                devices_services = []
+                if  service.service_type == ServiceTypeEnum.SERVICETYPE_L2NM:
+                    LOGGER.warning('L2NM service')  
+                    for ep in service.service_endpoint_ids:
+                        device_uuid = ep.device_id.device_uuid.uuid
+                        devices_services.append(device_uuid, service.service_name)
+                        LOGGER.warning('device_uuid')  
+                        LOGGER.warning(device_uuid)  
+                    
+                    grpc_devices = context_client.ListDevices(Empty())                                          
+                    for device in grpc_devices.devices:
+                        if device.device_id.device_uuid.uuid in devices_services:
+                            devices.append(device)
+           
+            choices = get_device_choices(devices)
+            add_device_choices_to_form(choices, form_acl.service_device_1)
+            add_device_choices_to_form(choices, form_acl.service_device_2)
+        else:
+            flash('Context({:s})/Topology({:s}) not found'.format(str(context_uuid), str(topology_uuid)), 'danger')
+    else:
+        flash('Missing context or topology UUID', 'danger')
+    if form_acl.validate_on_submit():    
+        flash(f'New configuration was created', 'success')
+        return redirect(url_for('service.home'))
+    
+    return render_template('service/configure_ACL_L2.html', form_acl=form_acl, submit_text='Add New Service')
+
+@service.route('add/configure/ACL_IPV4', methods=['GET', 'POST'])
+def add_configure_ACL_IPV4():
+    form_acl = AddServiceForm_ACL_IPV4()
+    if form_acl.validate_on_submit():
+        flash(f'New configuration was created', 'success')
+        return redirect(url_for('service.home'))
+    print(form_acl.errors)
+    return render_template('service/configure_ACL_IPV4.html', form_acl=form_acl, submit_text='Add New Service')
+
+@service.route('add/configure/ACL_IPV6', methods=['GET', 'POST'])
+def add_configure_ACL_IPV6():
+    form_acl = AddServiceForm_ACL_IPV6()
+    if form_acl.validate_on_submit():
+        flash(f'New configuration was created', 'success')
+        return redirect(url_for('service.home'))
+    print(form_acl.errors)
+    return render_template('service/configure_ACL_IPV6.html', form_acl=form_acl, submit_text='Add New Service')
+ 
+@service.route('add/configure/L2VPN', methods=['GET', 'POST'])
+def add_configure_L2VPN():
+    form_l2vpn = AddServiceForm_L2VPN()
+    service_obj = Service()
+
+    context_uuid, topology_uuid = get_context_and_topology_uuids()
+    if context_uuid and topology_uuid:
+        context_client.connect()
+        grpc_topology = get_topology(context_client, topology_uuid, context_uuid=context_uuid, rw_copy=False)
+        if grpc_topology:
+            topo_device_uuids = {device_id.device_uuid.uuid for device_id in grpc_topology.device_ids}          
+            devices = get_filtered_devices(context_client, topo_device_uuids)
+            choices = get_device_choices(devices)
+            add_device_choices_to_form(choices, form_l2vpn.service_device_1)
+            add_device_choices_to_form(choices, form_l2vpn.service_device_2)
+        else:
+            flash('Context({:s})/Topology({:s}) not found'.format(str(context_uuid), str(topology_uuid)), 'danger')
+    else:
+        flash('Missing context or topology UUID', 'danger')
+
+    if form_l2vpn.validate_on_submit():
+        try:
+            [selected_device_1, selected_device_2, selected_endpoint_1, selected_endpoint_2] = validate_selected_devices_and_endpoints(form_l2vpn, devices)
+        except Exception as e:
+            flash('{:s}'.format(str(e.args[0])), 'danger')
+            current_app.logger.exception(e)
+            return render_template('service/configure_L2VPN.html', form_l2vpn=form_l2vpn, submit_text='Add New Service')
+
+        [vendor_1, vendor_2] = get_device_vendor(form_l2vpn, devices)
+        try:
+            validate_params_vendor(form_l2vpn, vendor_1, 1)
+            validate_params_vendor(form_l2vpn, vendor_2, 2)
+        except Exception as e:       
+            flash('{:s}'.format(str(e.args[0])), 'danger')
+            current_app.logger.exception(e)
+            return render_template('service/configure_L2VPN.html', form_l2vpn=form_l2vpn, submit_text='Add New Service')
+
+        service_uuid, service_type, endpoint_ids = set_service_parameters(service_obj, form_l2vpn, selected_device_1, selected_device_2, selected_endpoint_1, selected_endpoint_2)
+        constraints = add_constraints(form_l2vpn)
+        params_device_1_with_data = get_device_params(form_l2vpn, 1, service_type)
+        params_device_2_with_data = get_device_params(form_l2vpn, 2, service_type)
+        print(params_device_1_with_data)
+        print(params_device_2_with_data)
+        params_settings = {}
+        config_rules = [
+            json_config_rule_set(
+                    '/settings', params_settings
+                ),
+            json_config_rule_set(
+                '/device[{:s}]/endpoint[{:s}]/settings'.format(str(selected_device_1.name), str(selected_endpoint_1)), params_device_1_with_data
+            ),
+            json_config_rule_set(
+                '/device[{:s}]/endpoint[{:s}]/settings'.format(str(selected_device_2.name), str(selected_endpoint_2)), params_device_2_with_data
+            )
+        ]
+        service_client.connect()
+        context_client.connect()
+        device_client.connect()
+        descriptor_json = json_service_l2nm_planned(service_uuid = service_uuid, endpoint_ids = endpoint_ids, constraints = constraints, config_rules = config_rules, context_uuid= context_uuid)
+        descriptor_json = {"services": [descriptor_json]}
+        try:
+            process_descriptors(descriptor_json)
+            flash('Service "{:s}" added successfully!'.format(service_obj.service_id.service_uuid.uuid), 'success')
+            return redirect(url_for('service.home', service_uuid=service_obj.service_id.service_uuid.uuid))
+        except Exception as e:
+            flash('Problem adding service: {:s}'.format((str(e.args[0]))), 'danger')
+            current_app.logger.exception(e)
+        finally:
+            context_client.close()                                                                                      
+            device_client.close()
+            service_client.close()
+    return render_template('service/configure_L2VPN.html', form_l2vpn=form_l2vpn, submit_text='Add New Service')
+
+@service.route('add/configure/L3VPN', methods=['GET', 'POST'])
+def add_configure_L3VPN():
+    form_l3vpn = AddServiceForm_L3VPN()
+    service_obj = Service()
+
+    context_uuid, topology_uuid = get_context_and_topology_uuids()
+    if context_uuid and topology_uuid:
+        context_client.connect()
+        grpc_topology = get_topology(context_client, topology_uuid, context_uuid=context_uuid, rw_copy=False)
+        if grpc_topology:
+            topo_device_uuids = {device_id.device_uuid.uuid for device_id in grpc_topology.device_ids}          
+            devices = get_filtered_devices(context_client, topo_device_uuids)
+            choices = get_device_choices(devices)
+            add_device_choices_to_form(choices, form_l3vpn.service_device_1)
+            add_device_choices_to_form(choices, form_l3vpn.service_device_2)
+        else:
+            flash('Context({:s})/Topology({:s}) not found'.format(str(context_uuid), str(topology_uuid)), 'danger')
+    else:
+        flash('Missing context or topology UUID', 'danger')
+
+    if form_l3vpn.validate_on_submit():
+        try:
+            [selected_device_1, selected_device_2, selected_endpoint_1, selected_endpoint_2] = validate_selected_devices_and_endpoints(form_l3vpn, devices)
+        except Exception as e:
+            flash('{:s}'.format(str(e.args[0])), 'danger')
+            current_app.logger.exception(e)
+            return render_template('service/configure_L3VPN.html', form_l3vpn=form_l3vpn, submit_text='Add New Service')
+        
+        service_uuid, service_type, endpoint_ids = set_service_parameters(service_obj, form_l3vpn, selected_device_1, selected_device_2, selected_endpoint_1, selected_endpoint_2)
+        constraints = add_constraints(form_l3vpn)
+        params_device_1_with_data = get_device_params(form_l3vpn, 1, service_type)
+        params_device_2_with_data = get_device_params(form_l3vpn, 2, service_type)
+        params_settings = {}
+        config_rules = [
+            json_config_rule_set(
+                    '/settings', params_settings
+                ),
+            json_config_rule_set(
+                '/device[{:s}]/endpoint[{:s}]/settings'.format(str(selected_device_1.name), str(selected_endpoint_1)), params_device_1_with_data
+            ),
+            json_config_rule_set(
+                '/device[{:s}]/endpoint[{:s}]/settings'.format(str(selected_device_2.name), str(selected_endpoint_2)), params_device_2_with_data
+            )
+        ]
+        service_client.connect()
+        context_client.connect()
+        device_client.connect()
+        descriptor_json = json_service_l3nm_planned(service_uuid = service_uuid, endpoint_ids = endpoint_ids, constraints = constraints, config_rules = config_rules, context_uuid= context_uuid)
+        descriptor_json = {"services": [descriptor_json]}
+        try:
+            process_descriptors(descriptor_json)
+            flash('Service "{:s}" added successfully!'.format(service_obj.service_id.service_uuid.uuid), 'success')
+            return redirect(url_for('service.home', service_uuid=service_obj.service_id.service_uuid.uuid))
+        except Exception as e:
+            flash('Problem adding service: {:s}'.format((str(e.args[0]))), 'danger')
+            current_app.logger.exception(e)
+        finally:
+            context_client.close()                                                                                        
+            device_client.close()
+            service_client.close()
+    return render_template('service/configure_L3VPN.html', form_l3vpn=form_l3vpn, submit_text='Add New Service')
+
+
+DESCRIPTOR_LOADER_NUM_WORKERS = 10
+
+def process_descriptors(descriptors):
+    descriptor_loader = DescriptorLoader(descriptors, num_workers=DESCRIPTOR_LOADER_NUM_WORKERS)
+    results = descriptor_loader.process()
+    for message,level in compose_notifications(results):
+        if level == 'error':                                                                                
+            LOGGER.warning('ERROR message={:s}'.format(str(message)))
+        flash(message, level)
+
+
+def get_context_and_topology_uuids():
+    context_uuid = session.get('context_uuid')
+    topology_uuid = session.get('topology_uuid')
+    return context_uuid, topology_uuid
+
+def get_filtered_devices(context_client, topo_device_uuids):
+    grpc_devices = context_client.ListDevices(Empty())                                          
+    return [device for device in grpc_devices.devices if device.device_id.device_uuid.uuid in topo_device_uuids]
+
+def get_device_choices(devices):
+    return [(i, str(device.name)) for i, device in enumerate(devices)]
+
+def add_device_choices_to_form(choices, form):
+    form.choices += choices
+
+def validate_selected_devices_and_endpoints(form, devices):
+    selected_device_1 = devices[int(form.service_device_1.data)]
+    selected_device_2 = devices[int(form.service_device_2.data)]
+    if selected_device_1 == selected_device_2:
+        raise ValidationError('The devices must be different!. Please select two valid and different devices')
+    elif form.service_endpoint_1.data not in [endpoint.name for endpoint in selected_device_1.device_endpoints]:
+        raise ValidationError('The selected endpoint: ' + form.service_endpoint_1.data + ' is not a valid endpoint for: '+ selected_device_1.name + '. Please select an endpoint that is available for this device')
+    elif form.service_endpoint_2.data not in [endpoint.name for endpoint in selected_device_2.device_endpoints]:
+        raise ValidationError('The selected endpoint: ' + form.service_endpoint_2.data + ' is not a valid endpoint for: '+ selected_device_2.name + '. Please select an endpoint that is available for this device')
+    else:
+        selected_endpoint_1 = form.service_endpoint_1.data
+        selected_endpoint_2 = form.service_endpoint_2.data
+    return selected_device_1, selected_device_2, selected_endpoint_1, selected_endpoint_2
+
+def get_device_vendor(form, devices):
+    selected_device_1 = devices[int(form.service_device_1.data)]
+    selected_device_2 = devices[int(form.service_device_2.data)]
+    
+    vendor_value_1 = None
+    vendor_value_2 = None
+
+    for config_rule in selected_device_1.device_config.config_rules:
+        if "vendor" in config_rule.custom.resource_value:
+            vendor_config_rule_1 = config_rule.custom.resource_value
+            config_rule_dict_1 = json.loads(vendor_config_rule_1)
+            if "vendor" in config_rule_dict_1:
+                vendor_value_1 = config_rule_dict_1["vendor"]
+            break
+
+    for config_rule in selected_device_2.device_config.config_rules:
+        if "vendor" in config_rule.custom.resource_value:
+            vendor_config_rule_2 = config_rule.custom.resource_value
+            config_rule_dict_2 = json.loads(vendor_config_rule_2)
+            if "vendor" in config_rule_dict_2:
+                vendor_value_2 = config_rule_dict_2["vendor"]
+            break
+
+    return vendor_value_1, vendor_value_2
+
+def validate_params_vendor(form, vendor, device_num):
+    if vendor == "ADVA":
+        if form.NI_name.data != f"ELAN-AC:{getattr(form, f'Device_{device_num}_IF_vlan_id').data}":
+            raise ValidationError('For an ADVA device, the name of the Network Instance should have this name: "ELAN-AC:vlanID"')
+
+        elif getattr(form, f'Device_{device_num}_NI_VC_ID').data != getattr(form, f'Device_{device_num}_IF_vlan_id').data:
+            raise ValidationError('For an ADVA device, the value of the VlanID and the value of the VC_ID must be the same')
+    else:
+        None
+    return None
+
+def set_service_parameters(service_obj, form, selected_device_1, selected_device_2, selected_endpoint_1, selected_endpoint_2):
+    service_obj.service_id.service_uuid.uuid = str(form.service_name.data)
+    service_uuid = service_obj.service_id.service_uuid.uuid
+    service_obj.service_type = int(form.service_type.data)
+    service_type = service_obj.service_type
+
+    endpoint_ids = [
+        json_endpoint_id(json_device_id(selected_device_1.name), str(selected_endpoint_1)),
+        json_endpoint_id(json_device_id(selected_device_2.name), str(selected_endpoint_2))
+    ]
+    return service_uuid, service_type, endpoint_ids
+
+def add_constraints(form):
+    constraints = []
+    if form.service_capacity.data:
+        constraints.append(json_constraint_sla_capacity(float(form.service_capacity.data)))
+    if form.service_latency.data:
+        constraints.append(json_constraint_sla_latency(float(form.service_latency.data)))
+    if form.service_availability.data:
+        constraints.append(json_constraint_sla_availability(1, True, float(form.service_availability.data)))
+    if form.service_isolation.data is not None and form.service_isolation.data != '':
+        constraints.append(json_constraint_sla_isolation([getattr(IsolationLevelEnum, str(form.service_isolation.data))]))
+
+    return constraints
+
+def get_device_params(form, device_num, form_type):
+    if form_type == 2:
+        device_params = {
+            'ni_name': str(getattr(form, 'NI_name').data),
+            'sub_interface_index': str(getattr(form, f'Device_{device_num}_IF_index').data),
+            'vlan_id': str(getattr(form, f'Device_{device_num}_IF_vlan_id').data),
+            'remote_router': str(getattr(form, f'Device_{device_num}_NI_remote_system').data),
+            'vc_id': str(getattr(form, f'Device_{device_num}_NI_VC_ID').data),
+            'conn_point': str(getattr(form, f'Device_{device_num}_NI_connection_point').data),
+            'mtu': str(getattr(form, f'Device_{device_num}_IF_mtu').data),
+            'ni_description': str(getattr(form, 'NI_description').data),
+            'subif_description': str(getattr(form, f'Device_{device_num}_IF_description').data),
+        }
+    elif form_type == 1:
+        if device_num == 1:
+            policy_az_field = 'NI_import_policy'
+            policy_za_field = 'NI_export_policy'
+        elif device_num == 2:
+            policy_az_field = 'NI_export_policy'
+            policy_za_field = 'NI_import_policy'
+        device_params = {
+            'ni_name': str(getattr(form, 'NI_name').data),
+            'bgp_as':str(getattr(form, 'NI_as').data),
+            'route_distinguisher': str(getattr(form, 'NI_route_distinguisher').data),
+            'sub_interface_index': str(getattr(form, f'Device_{device_num}_IF_index').data),
+            'router_id': str(getattr(form, 'NI_router_id').data),
+            'vlan_id': str(getattr(form, f'Device_{device_num}_IF_vlan_id').data),
+            'address_ip': str(getattr(form, f'Device_{device_num}_IF_address_ip').data),
+            'address_prefix': str(getattr(form, f'Device_{device_num}_IF_address_prefix').data),
+            'policy_AZ': str(getattr(form, policy_az_field).data),
+            'policy_ZA': str(getattr(form, policy_za_field).data),
+            'mtu': str(getattr(form, f'Device_{device_num}_IF_mtu').data),
+            'ni_description': str(getattr(form, 'NI_description').data),
+            'subif_description': str(getattr(form, f'Device_{device_num}_IF_description').data),
+        }
+    else:
+        raise ValueError(f'Unsupported form type: {form_type}')
+
+    params_with_data = {k: v for k, v in device_params.items() if v is not None and str(v) != 'None' and v != ''}
+    return params_with_data
diff --git a/src/webui/service/templates/service/add.html b/src/webui/service/templates/service/add.html
new file mode 100644
index 0000000000000000000000000000000000000000..2b03ebcbf05a759606861a675b1a9e76e12df47b
--- /dev/null
+++ b/src/webui/service/templates/service/add.html
@@ -0,0 +1,53 @@
+<!--
+ Copyright 2022-2023 ETSI TeraFlowSDN - TFS OSG (https://tfs.etsi.org/)
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+{% extends 'base.html' %}
+
+{% block content %}
+<h1>Add New Service</h1>
+<form method="POST" action="{{ url_for('service.add_configure') }}">
+    <fieldset>
+        
+        <div class="row mb-3">
+            {{ form_1.hidden_tag() }}
+        </div> 
+        <div class="row mb-3">
+            {{ form_1.service_type.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_1.service_type.errors %}
+                {{ form_1.service_type(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_1.service_type.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_1.service_type(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <button type="submit" class="btn btn-primary">
+            <i class="bi bi-plus-circle-fill"></i>
+            {{ submit_text }}
+        </button>
+        <button type="button" class="btn btn-block btn-secondary" onclick="javascript: history.back()">
+            <i class="bi bi-box-arrow-in-left"></i>
+            Cancel
+        </button>
+    </div>
+    </fieldset>
+</form>
+{% endblock %}
+
diff --git a/src/webui/service/templates/service/configure_ACL_IPV4.html b/src/webui/service/templates/service/configure_ACL_IPV4.html
new file mode 100644
index 0000000000000000000000000000000000000000..43262ebee8798c1fa7bb658acd68d5a5a4386293
--- /dev/null
+++ b/src/webui/service/templates/service/configure_ACL_IPV4.html
@@ -0,0 +1,433 @@
+<!--
+ Copyright 2022-2023 ETSI TeraFlowSDN - TFS OSG (https://tfs.etsi.org/)
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+
+{% extends 'base.html' %}
+
+{% block content %}
+<h1>Add New Service [ACL-IPV4]</h1>
+<form method="POST" action="{{ url_for('service.add_configure_ACL_IPV4') }}">
+    <fieldset>
+        <div class="row mb-3">
+            {{ form_acl.hidden_tag() }}
+        </div> 
+        <h3>Generic Service Parameters</h3>
+        {% if form_acl.acl_params is not none %}
+        <div class="row mb-3">
+            {{ form_acl.service_name.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.service_name.errors %}
+                {{ form_acl.service_name(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_name.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_name(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.service_type.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.service_type.errors %}
+                {{ form_acl.service_type(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_type.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_type(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.service_device_1.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_acl.service_device_1.errors %}
+                {{ form_acl.service_device_1(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_device_1.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_device_1(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+            {{ form_acl.service_device_2.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_acl.service_device_2.errors %}
+                {{ form_acl.service_device_2(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_device_2.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_device_2(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.service_endpoint_1.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_acl.service_endpoint_1.errors %}
+                {{ form_acl.service_endpoint_1(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_endpoint_1.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_endpoint_1(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+            {{ form_acl.service_endpoint_2.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_acl.service_endpoint_2.errors %}
+                {{ form_acl.service_endpoint_2(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_endpoint_2.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_endpoint_2(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        </br>
+        <h3>Generic Service Constraints</h3>
+        <div class="row mb-3">
+            {{ form_acl.service_capacity.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.service_capacity.errors %}
+                {{ form_acl.service_capacity(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_capacity.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_capacity(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.service_latency.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.service_latency.errors %}
+                {{ form_acl.service_latency(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_latency.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_latency(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.service_availability.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.service_availability.errors %}
+                {{ form_acl.service_availability(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_availability.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_availability(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.service_isolation.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.service_isolation.errors %}
+                {{ form_acl.service_isolation(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_isolation.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_isolation(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        </br>       
+        <h3>Specific Service Parameters</h3>
+        </br>
+        <h4>Generic ACL Parameters</h4>
+        <div class="row mb-3">
+            {{ form_acl.name.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.name.errors %}
+                {{ form_acl.name(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.name.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.name(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.type.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.type.errors %}
+                {{ form_acl.type(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.type.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.type(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.sequence_id.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.sequence_id.errors %}
+                {{ form_acl.sequence_id(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.sequence_id.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.sequence_id(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.forwarding_action.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.forwarding_action.errors %}
+                {{ form_acl.forwarding_action(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.forwarding_action.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.forwarding_action(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.log_action.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.log_action.errors %}
+                {{ form_acl.log_action(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.log_action.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.log_action(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.traffic_flow.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.traffic_flow.errors %}
+                {{ form_acl.traffic_flow(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.traffic_flow.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.traffic_flow(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.interface.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.interface.errors %}
+                {{ form_acl.interface(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.interface.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.interface(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.subinterface.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.subinterface.errors %}
+                {{ form_acl.subinterface(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.subinterface.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.subinterface(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        </br>
+        <h4>Specific ACL_IPV4 Parameters</h4>
+        <div class="row mb-3">
+            {{ form_acl.source_address.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.source_address.errors %}
+                {{ form_acl.source_address(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.source_address.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.source_address(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.destination_address.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.destination_address.errors %}
+                {{ form_acl.destination_address(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.destination_address.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.destination_address(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.protocol.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.protocol.errors %}
+                {{ form_acl.protocol(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.protocol.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.protocol(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.hop_limit.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.hop_limit.errors %}
+                {{ form_acl.hop_limit(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.hop_limit.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.hop_limit(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.dscp.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.dscp.errors %}
+                {{ form_acl.dscp(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.dscp.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.dscp(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.source_port.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.source_port.errors %}
+                {{ form_acl.source_port(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.source_port.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.source_port(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.destination_port.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.destination_port.errors %}
+                {{ form_acl.destination_port(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.destination_port.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.destination_port(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.tcp_flags.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.tcp_flags.errors %}
+                {{ form_acl.tcp_flags(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.tcp_flags.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.tcp_flags(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        {% endif %}
+        <button type="submit" class="btn btn-primary">
+            <i class="bi bi-plus-circle-fill"></i>
+            {{ submit_text }}
+        </button>
+        <button type="button" class="btn btn-block btn-secondary" onclick="javascript: history.back()">
+            <i class="bi bi-box-arrow-in-left"></i>
+            Cancel
+        </button>
+    </fieldset>
+    </form>
+    {% endblock %}
diff --git a/src/webui/service/templates/service/configure_ACL_IPV6.html b/src/webui/service/templates/service/configure_ACL_IPV6.html
new file mode 100644
index 0000000000000000000000000000000000000000..2fb2efbc6b4e6e57cde27315e779e2321a510eac
--- /dev/null
+++ b/src/webui/service/templates/service/configure_ACL_IPV6.html
@@ -0,0 +1,388 @@
+<!--
+ Copyright 2022-2023 ETSI TeraFlowSDN - TFS OSG (https://tfs.etsi.org/)
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+
+{% extends 'base.html' %}
+
+{% block content %}
+<h1>Add New Service [ACL-IPV6]</h1>
+<form method="POST" action="{{ url_for('service.add_configure_ACL_IPV6') }}">
+    <fieldset>
+        <div class="row mb-3">
+            {{ form_acl.hidden_tag() }}
+        </div> 
+        <h3>Generic Service Parameters</h3>
+        {% if form_acl.acl_params is not none %}
+        <div class="row mb-3">
+            {{ form_acl.service_name.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.service_name.errors %}
+                {{ form_acl.service_name(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_name.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_name(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.service_type.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.service_type.errors %}
+                {{ form_acl.service_type(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_type.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_type(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.service_device_1.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_acl.service_device_1.errors %}
+                {{ form_acl.service_device_1(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_device_1.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_device_1(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+            {{ form_acl.service_device_2.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_acl.service_device_2.errors %}
+                {{ form_acl.service_device_2(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_device_2.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_device_2(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.service_endpoint_1.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_acl.service_endpoint_1.errors %}
+                {{ form_acl.service_endpoint_1(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_endpoint_1.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_endpoint_1(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+            {{ form_acl.service_endpoint_2.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_acl.service_endpoint_2.errors %}
+                {{ form_acl.service_endpoint_2(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_endpoint_2.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_endpoint_2(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        </br>
+        <h3>Generic Service Constraints</h3>
+        <div class="row mb-3">
+            {{ form_acl.service_capacity.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.service_capacity.errors %}
+                {{ form_acl.service_capacity(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_capacity.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_capacity(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.service_latency.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.service_latency.errors %}
+                {{ form_acl.service_latency(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_latency.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_latency(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.service_availability.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.service_availability.errors %}
+                {{ form_acl.service_availability(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_availability.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_availability(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.service_isolation.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.service_isolation.errors %}
+                {{ form_acl.service_isolation(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_isolation.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_isolation(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        </br>
+        <h3>Specific Service Parameters</h3>
+        </br>
+        <h4>Generic ACL Parameters</h4>
+        <div class="row mb-3">
+            {{ form_acl.name.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.name.errors %}
+                {{ form_acl.name(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.name.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.name(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.type.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.type.errors %}
+                {{ form_acl.type(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.type.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.type(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.sequence_id.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.sequence_id.errors %}
+                {{ form_acl.sequence_id(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.sequence_id.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.sequence_id(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.forwarding_action.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.forwarding_action.errors %}
+                {{ form_acl.forwarding_action(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.forwarding_action.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.forwarding_action(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.log_action.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.log_action.errors %}
+                {{ form_acl.log_action(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.log_action.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.log_action(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.traffic_flow.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.traffic_flow.errors %}
+                {{ form_acl.traffic_flow(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.traffic_flow.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.traffic_flow(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.interface.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.interface.errors %}
+                {{ form_acl.interface(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.interface.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.interface(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.subinterface.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.subinterface.errors %}
+                {{ form_acl.subinterface(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.subinterface.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.subinterface(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        </br>
+        <h4>Specific ACL_IPV6 Parameters</h4>
+        <div class="row mb-3">
+            {{ form_acl.source_address.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.source_address.errors %}
+                {{ form_acl.source_address(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.source_address.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.source_address(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.destination_address.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.destination_address.errors %}
+                {{ form_acl.destination_address(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.destination_address.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.destination_address(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.protocol.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.protocol.errors %}
+                {{ form_acl.protocol(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.protocol.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.protocol(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.hop_limit.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.hop_limit.errors %}
+                {{ form_acl.hop_limit(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.hop_limit.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.hop_limit(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.dscp.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.dscp.errors %}
+                {{ form_acl.dscp(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.dscp.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.dscp(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        {% endif %}
+        <button type="submit" class="btn btn-primary">
+            <i class="bi bi-plus-circle-fill"></i>
+            {{ submit_text }}
+        </button>
+        <button type="button" class="btn btn-block btn-secondary" onclick="javascript: history.back()">
+            <i class="bi bi-box-arrow-in-left"></i>
+            Cancel
+        </button>
+    </fieldset>
+    </form>
+    {% endblock %}
diff --git a/src/webui/service/templates/service/configure_ACL_L2.html b/src/webui/service/templates/service/configure_ACL_L2.html
new file mode 100644
index 0000000000000000000000000000000000000000..41cd705478c9fba0c8b1445f2c8b1ce97696876c
--- /dev/null
+++ b/src/webui/service/templates/service/configure_ACL_L2.html
@@ -0,0 +1,343 @@
+<!--
+ Copyright 2022-2023 ETSI TeraFlowSDN - TFS OSG (https://tfs.etsi.org/)
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+
+{% extends 'base.html' %}
+
+{% block content %}
+<h1>Add New Service [ACL-L2]</h1>
+<form method="POST" action="{{ url_for('service.add_configure_ACL_L2') }}">
+    <fieldset>
+        <div class="row mb-3">
+            {{ form_acl.hidden_tag() }}
+        </div> 
+        <h3>Generic Service Parameters</h3>
+        {% if form_acl.acl_params is not none %}
+        <div class="row mb-3">
+            {{ form_acl.service_name.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.service_name.errors %}
+                {{ form_acl.service_name(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_name.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_name(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.service_type.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.service_type.errors %}
+                {{ form_acl.service_type(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_type.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_type(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.service_device_1.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_acl.service_device_1.errors %}
+                {{ form_acl.service_device_1(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_device_1.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_device_1(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+            {{ form_acl.service_device_2.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_acl.service_device_2.errors %}
+                {{ form_acl.service_device_2(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_device_2.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_device_2(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.service_endpoint_1.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_acl.service_endpoint_1.errors %}
+                {{ form_acl.service_endpoint_1(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_endpoint_1.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_endpoint_1(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+            {{ form_acl.service_endpoint_2.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_acl.service_endpoint_2.errors %}
+                {{ form_acl.service_endpoint_2(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_endpoint_2.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_endpoint_2(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        </br>
+        <h3>Generic Service Constraints</h3>
+        <div class="row mb-3">
+            {{ form_acl.service_capacity.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.service_capacity.errors %}
+                {{ form_acl.service_capacity(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_capacity.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_capacity(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.service_latency.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.service_latency.errors %}
+                {{ form_acl.service_latency(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_latency.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_latency(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.service_availability.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.service_availability.errors %}
+                {{ form_acl.service_availability(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_availability.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_availability(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.service_isolation.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.service_isolation.errors %}
+                {{ form_acl.service_isolation(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.service_isolation.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.service_isolation(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        </br>
+        <h3>Specific Service Parameters</h3>
+        </br>
+        <h4>Generic ACL Parameters</h4>
+        <div class="row mb-3">
+            {{ form_acl.name.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.name.errors %}
+                {{ form_acl.name(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.name.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.name(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.type.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.type.errors %}
+                {{ form_acl.type(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.type.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.type(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.sequence_id.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.sequence_id.errors %}
+                {{ form_acl.sequence_id(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.sequence_id.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.sequence_id(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.forwarding_action.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.forwarding_action.errors %}
+                {{ form_acl.forwarding_action(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.forwarding_action.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.forwarding_action(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.log_action.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.log_action.errors %}
+                {{ form_acl.log_action(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.log_action.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.log_action(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.traffic_flow.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.traffic_flow.errors %}
+                {{ form_acl.traffic_flow(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.traffic_flow.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.traffic_flow(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.interface.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.interface.errors %}
+                {{ form_acl.interface(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.interface.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.interface(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.subinterface.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.subinterface.errors %}
+                {{ form_acl.subinterface(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.subinterface.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.subinterface(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        </br>
+        <h4>Specific ACL_L2 Parameters</h4>
+        <div class="row mb-3">
+            {{ form_acl.source_mac.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.source_mac.errors %}
+                {{ form_acl.source_mac(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.source_mac.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.source_mac(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_acl.destination_mac.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_acl.destination_mac.errors %}
+                {{ form_acl.destination_mac(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_acl.destination_mac.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_acl.destination_mac(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>   
+        {% endif %}
+        <button type="submit" class="btn btn-primary">
+            <i class="bi bi-plus-circle-fill"></i>
+            {{ submit_text }}
+        </button>
+        <button type="button" class="btn btn-block btn-secondary" onclick="javascript: history.back()">
+            <i class="bi bi-box-arrow-in-left"></i>
+            Cancel
+        </button>
+    </fieldset>
+    </form>
+    {% endblock %}
diff --git a/src/webui/service/templates/service/configure_L2VPN.html b/src/webui/service/templates/service/configure_L2VPN.html
new file mode 100644
index 0000000000000000000000000000000000000000..c443a024d3f00d70c29b70e394a67c595b27cc69
--- /dev/null
+++ b/src/webui/service/templates/service/configure_L2VPN.html
@@ -0,0 +1,434 @@
+<!--
+ Copyright 2022-2023 ETSI TeraFlowSDN - TFS OSG (https://tfs.etsi.org/)
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+
+{% extends 'base.html' %}
+
+{% block content %}
+<h1>Add New Service [L2VPN]</h1>
+<form method="POST" action="{{ url_for('service.add_configure_L2VPN') }}">
+    <fieldset>
+        <div class="row mb-3">
+            {{ form_l2vpn.hidden_tag() }}
+        </div> 
+        {% if form_l2vpn.l2vpn_params is not none %}
+        <h3>Generic Service Parameters</h3>
+        <div class="row mb-3">
+            {{ form_l2vpn.service_name.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l2vpn.service_name.errors %}
+                {{ form_l2vpn.service_name(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.service_name.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.service_name(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l2vpn.service_type.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l2vpn.service_type.errors %}
+                {{ form_l2vpn.service_type(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.service_type.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.service_type(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l2vpn.service_device_1.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l2vpn.service_device_1.errors %}
+                {{ form_l2vpn.service_device_1(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.service_device_1.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.service_device_1(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+            {{ form_l2vpn.service_device_2.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l2vpn.service_device_2.errors %}
+                {{ form_l2vpn.service_device_2(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.service_device_2.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.service_device_2(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l2vpn.service_endpoint_1.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l2vpn.service_endpoint_1.errors %}
+                {{ form_l2vpn.service_endpoint_1(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.service_endpoint_1.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.service_endpoint_1(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+            {{ form_l2vpn.service_endpoint_2.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l2vpn.service_endpoint_2.errors %}
+                {{ form_l2vpn.service_endpoint_2(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.service_endpoint_2.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.service_endpoint_2(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <h3>Generic Service Constraints</h3>
+        <div class="row mb-3">
+            {{ form_l2vpn.service_capacity.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l2vpn.service_capacity.errors %}
+                {{ form_l2vpn.service_capacity(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.service_capacity.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.service_capacity(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l2vpn.service_latency.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l2vpn.service_latency.errors %}
+                {{ form_l2vpn.service_latency(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.service_latency.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.service_latency(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l2vpn.service_availability.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l2vpn.service_availability.errors %}
+                {{ form_l2vpn.service_availability(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.service_availability.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.service_availability(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l2vpn.service_isolation.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l2vpn.service_isolation.errors %}
+                {{ form_l2vpn.service_isolation(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.service_isolation.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.service_isolation(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        </br>
+        <h3>Specific Service Parameters</h3>
+        </br>
+        <h4>Network Instance (NI) Parameters</h4>
+        <div class="row mb-3">
+            {{ form_l2vpn.NI_name.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l2vpn.NI_name.errors %}
+                {{ form_l2vpn.NI_name(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.NI_name.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.NI_name(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l2vpn.NI_mtu.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l2vpn.NI_mtu.errors %}
+                {{ form_l2vpn.NI_mtu(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.NI_mtu.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.NI_mtu(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l2vpn.NI_description.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l2vpn.NI_description.errors %}
+                {{ form_l2vpn.NI_description(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.NI_description.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.NI_description(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l2vpn.Device_1_NI_remote_system.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l2vpn.Device_1_NI_remote_system.errors %}
+                {{ form_l2vpn.Device_1_NI_remote_system(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.Device_1_NI_remote_system.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.Device_1_NI_remote_system(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+            {{ form_l2vpn.Device_2_NI_remote_system.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l2vpn.Device_2_NI_remote_system.errors %}
+                {{ form_l2vpn.Device_2_NI_remote_system(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.Device_2_NI_remote_system.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.Device_2_NI_remote_system(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l2vpn.Device_1_NI_VC_ID.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l2vpn.Device_1_NI_VC_ID.errors %}
+                {{ form_l2vpn.Device_1_NI_VC_ID(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.Device_1_NI_VC_ID.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.Device_1_NI_VC_ID(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+            {{ form_l2vpn.Device_2_NI_VC_ID.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l2vpn.Device_2_NI_VC_ID.errors %}
+                {{ form_l2vpn.Device_2_NI_VC_ID(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.Device_2_NI_VC_ID.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.Device_2_NI_VC_ID(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l2vpn.Device_1_NI_connection_point.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l2vpn.Device_1_NI_connection_point.errors %}
+                {{ form_l2vpn.Device_1_NI_connection_point(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.Device_1_NI_connection_point.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.Device_1_NI_connection_point(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+            {{ form_l2vpn.Device_2_NI_connection_point.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l2vpn.Device_2_NI_connection_point.errors %}
+                {{ form_l2vpn.Device_2_NI_connection_point(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.Device_2_NI_connection_point.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.Device_2_NI_connection_point(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        
+        <h4>Interface Parameters</h4>
+        <div class="row mb-3">
+            {{ form_l2vpn.Device_1_IF_index.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l2vpn.Device_1_IF_index.errors %}
+                {{ form_l2vpn.Device_1_IF_index(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.Device_1_IF_index.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.Device_1_IF_index(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+            {{ form_l2vpn.Device_2_IF_index.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l2vpn.Device_2_IF_index.errors %}
+                {{ form_l2vpn.Device_2_IF_index(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.Device_2_IF_index.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.Device_2_IF_index(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l2vpn.Device_1_IF_vlan_id.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l2vpn.Device_1_IF_vlan_id.errors %}
+                {{ form_l2vpn.Device_1_IF_vlan_id(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.Device_1_IF_vlan_id.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.Device_1_IF_vlan_id(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+            {{ form_l2vpn.Device_2_IF_vlan_id.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l2vpn.Device_2_IF_vlan_id.errors %}
+                {{ form_l2vpn.Device_2_IF_vlan_id(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.Device_2_IF_vlan_id.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.Device_2_IF_vlan_id(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l2vpn.Device_1_IF_mtu.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l2vpn.Device_1_IF_mtu.errors %}
+                {{ form_l2vpn.Device_1_IF_mtu(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.Device_1_IF_mtu.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.Device_1_IF_mtu(class="form-control") }}
+                {% endif %}
+            </div>
+            {{ form_l2vpn.Device_2_IF_mtu.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l2vpn.Device_2_IF_mtu.errors %}
+                {{ form_l2vpn.Device_2_IF_mtu(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.Device_2_IF_mtu.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.Device_2_IF_mtu(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l2vpn.Device_1_IF_description.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l2vpn.Device_1_IF_description.errors %}
+                {{ form_l2vpn.Device_1_IF_description(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.Device_1_IF_description.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.Device_1_IF_description(class="form-control") }}
+                {% endif %}
+            </div>
+            {{ form_l2vpn.Device_2_IF_description.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l2vpn.Device_2_IF_description.errors %}
+                {{ form_l2vpn.Device_2_IF_description(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l2vpn.Device_2_IF_description.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l2vpn.Device_2_IF_description(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        {% endif %}
+        <button type="submit" class="btn btn-primary">
+            <i class="bi bi-plus-circle-fill"></i>
+            {{ submit_text }}
+        </button>
+        <button type="button" class="btn btn-block btn-secondary" onclick="javascript: history.back()">
+            <i class="bi bi-box-arrow-in-left"></i>
+            Cancel
+        </button>
+    </div>
+    </fieldset>
+</form>
+{% endblock %}
\ No newline at end of file
diff --git a/src/webui/service/templates/service/configure_L3VPN.html b/src/webui/service/templates/service/configure_L3VPN.html
new file mode 100644
index 0000000000000000000000000000000000000000..575eec10ad3042ea1ed154a5f21fb6811f4d4ed0
--- /dev/null
+++ b/src/webui/service/templates/service/configure_L3VPN.html
@@ -0,0 +1,510 @@
+<!--
+ Copyright 2022-2023 ETSI TeraFlowSDN - TFS OSG (https://tfs.etsi.org/)
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+
+{% extends 'base.html' %}
+
+{% block content %}
+<h1>Add New Service [L3VPN]</h1>
+<form method="POST" action="{{ url_for('service.add_configure_L3VPN') }}">
+    <fieldset>
+        <div class="row mb-3">
+            {{ form_l3vpn.hidden_tag() }}
+        </div> 
+        {% if form_l3vpn.l3vpn_params is not none %}
+        <h3>Generic Service Parameters</h3>
+        <div class="row mb-3">
+            {{ form_l3vpn.service_name.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l3vpn.service_name.errors %}
+                {{ form_l3vpn.service_name(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.service_name.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.service_name(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l3vpn.service_type.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l3vpn.service_type.errors %}
+                {{ form_l3vpn.service_type(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.service_type.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.service_type(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l3vpn.service_device_1.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l3vpn.service_device_1.errors %}
+                {{ form_l3vpn.service_device_1(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.service_device_1.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.service_device_1(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+            {{ form_l3vpn.service_device_2.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l3vpn.service_device_2.errors %}
+                {{ form_l3vpn.service_device_2(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.service_device_2.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.service_device_2(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l3vpn.service_endpoint_1.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l3vpn.service_endpoint_1.errors %}
+                {{ form_l3vpn.service_endpoint_1(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.service_endpoint_1.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.service_endpoint_1(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+            {{ form_l3vpn.service_endpoint_2.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l3vpn.service_endpoint_2.errors %}
+                {{ form_l3vpn.service_endpoint_2(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.service_endpoint_2.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.service_endpoint_2(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <h3>Generic Service Constraints</h3>
+        <div class="row mb-3">
+            {{ form_l3vpn.service_capacity.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l3vpn.service_capacity.errors %}
+                {{ form_l3vpn.service_capacity(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.service_capacity.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.service_capacity(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l3vpn.service_latency.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l3vpn.service_latency.errors %}
+                {{ form_l3vpn.service_latency(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.service_latency.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.service_latency(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l3vpn.service_availability.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l3vpn.service_availability.errors %}
+                {{ form_l3vpn.service_availability(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.service_availability.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.service_availability(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l3vpn.service_isolation.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l3vpn.service_isolation.errors %}
+                {{ form_l3vpn.service_isolation(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.service_isolation.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.service_isolation(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        </br>
+        <h3>Specific Service Parameters</h3>
+        </br>
+        <h4>Network Instance Parameters</h4>
+        <div class="row mb-3">
+            {{ form_l3vpn.NI_name.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l3vpn.NI_name.errors %}
+                {{ form_l3vpn.NI_name(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.NI_name.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.NI_name(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l3vpn.NI_route_distinguisher.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l3vpn.NI_route_distinguisher.errors %}
+                {{ form_l3vpn.NI_route_distinguisher(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.NI_route_distinguisher.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.NI_route_distinguisher(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l3vpn.NI_protocol.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l3vpn.NI_protocol.errors %}
+                {{ form_l3vpn.NI_protocol(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.NI_protocol.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.NI_protocol(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l3vpn.NI_as.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l3vpn.NI_as.errors %}
+                {{ form_l3vpn.NI_as(class="form-control is-invalid", placeholder="Mandatory if BGP protocol is selected") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.NI_as.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.NI_as(class="form-control", placeholder="Mandatory if BGP protocol is selected") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l3vpn.NI_address_family.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l3vpn.NI_address_family.errors %}
+                {{ form_l3vpn.NI_address_family(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.NI_address_family.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.NI_address_family(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l3vpn.NI_default_import_policy.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l3vpn.NI_default_import_policy.errors %}
+                {{ form_l3vpn.NI_default_import_policy(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.NI_default_import_policy.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.NI_default_import_policy(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l3vpn.NI_import_policy.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l3vpn.NI_import_policy.errors %}
+                {{ form_l3vpn.NI_import_policy(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.NI_import_policy.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.NI_import_policy(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l3vpn.NI_export_policy.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l3vpn.NI_export_policy.errors %}
+                {{ form_l3vpn.NI_export_policy(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.NI_export_policy.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.NI_export_policy(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l3vpn.NI_router_id.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l3vpn.NI_router_id.errors %}
+                {{ form_l3vpn.NI_router_id(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.NI_router_id.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.NI_router_id(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l3vpn.NI_description.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-10">
+                {% if form_l3vpn.NI_description.errors %}
+                {{ form_l3vpn.NI_description(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.NI_description.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.NI_description(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <h4>Interface Parameters</h4>
+        <div class="row mb-3">
+            {{ form_l3vpn.Device_1_IF_index.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l3vpn.Device_1_IF_index.errors %}
+                {{ form_l3vpn.Device_1_IF_index(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.Device_1_IF_index.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.Device_1_IF_index(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+            {{ form_l3vpn.Device_2_IF_index.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l3vpn.Device_2_IF_index.errors %}
+                {{ form_l3vpn.Device_2_IF_index(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.Device_2_IF_index.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.Device_2_IF_index(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l3vpn.Device_1_IF_vlan_id.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l3vpn.Device_1_IF_vlan_id.errors %}
+                {{ form_l3vpn.Device_1_IF_vlan_id(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.Device_1_IF_vlan_id.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.Device_1_IF_vlan_id(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+            {{ form_l3vpn.Device_2_IF_vlan_id.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l3vpn.Device_2_IF_vlan_id.errors %}
+                {{ form_l3vpn.Device_2_IF_vlan_id(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.Device_2_IF_vlan_id.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.Device_2_IF_vlan_id(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l3vpn.Device_1_IF_address_ip.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l3vpn.Device_1_IF_address_ip.errors %}
+                {{ form_l3vpn.Device_1_IF_address_ip(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.Device_1_IF_address_ip.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.Device_1_IF_address_ip(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+            {{ form_l3vpn.Device_2_IF_address_ip.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l3vpn.Device_2_IF_address_ip.errors %}
+                {{ form_l3vpn.Device_2_IF_address_ip(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.Device_2_IF_address_ip.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.Device_2_IF_address_ip(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l3vpn.Device_1_IF_address_prefix.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l3vpn.Device_1_IF_address_prefix.errors %}
+                {{ form_l3vpn.Device_1_IF_address_prefix(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.Device_1_IF_address_prefix.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.Device_1_IF_address_prefix(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+            {{ form_l3vpn.Device_2_IF_address_prefix.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l3vpn.Device_2_IF_address_prefix.errors %}
+                {{ form_l3vpn.Device_2_IF_address_prefix(class="form-control is-invalid", placeholder="Mandatory") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.Device_2_IF_address_prefix.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.Device_2_IF_address_prefix(class="form-control", placeholder="Mandatory") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l3vpn.Device_1_IF_mtu.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l3vpn.Device_1_IF_mtu.errors %}
+                {{ form_l3vpn.Device_1_IF_mtu(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.Device_1_IF_mtu.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.Device_1_IF_mtu(class="form-control") }}
+                {% endif %}
+            </div>
+            {{ form_l3vpn.Device_2_IF_mtu.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l3vpn.Device_2_IF_mtu.errors %}
+                {{ form_l3vpn.Device_2_IF_mtu(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.Device_2_IF_mtu.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.Device_2_IF_mtu(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        <div class="row mb-3">
+            {{ form_l3vpn.Device_1_IF_description.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l3vpn.Device_1_IF_description.errors %}
+                {{ form_l3vpn.Device_1_IF_description(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.Device_1_IF_description.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.Device_1_IF_description(class="form-control") }}
+                {% endif %}
+            </div>
+            {{ form_l3vpn.Device_2_IF_description.label(class="col-sm-2 col-form-label") }}
+            <div class="col-sm-4">
+                {% if form_l3vpn.Device_2_IF_description.errors %}
+                {{ form_l3vpn.Device_2_IF_description(class="form-control is-invalid") }}
+                <div class="invalid-feedback">
+                    {% for error in form_l3vpn.Device_2_IF_description.errors %}
+                    <span>{{ error }}</span>
+                    {% endfor %}
+                </div>
+                {% else %}
+                {{ form_l3vpn.Device_2_IF_description(class="form-control") }}
+                {% endif %}
+            </div>
+        </div>
+        {% endif %}
+        <button type="submit" class="btn btn-primary">
+            <i class="bi bi-plus-circle-fill"></i>
+            {{ submit_text }}
+        </button>
+        <button type="button" class="btn btn-block btn-secondary" onclick="javascript: history.back()">
+            <i class="bi bi-box-arrow-in-left"></i>
+            Cancel
+        </button>
+    </div>
+    </fieldset>
+</form>
+{% endblock %}
\ No newline at end of file
diff --git a/src/webui/service/templates/service/detail.html b/src/webui/service/templates/service/detail.html
index 9c27bc99a106c96c352b4623d4c5bd91839c6726..ff2de8a3c60d8732d9bfdfe0cb361fdddee172f6 100644
--- a/src/webui/service/templates/service/detail.html
+++ b/src/webui/service/templates/service/detail.html
@@ -26,15 +26,8 @@
             Back to service list
         </button>
     </div>
-    <!--
+    
     <div class="col-sm-3">
-        <a id="update" class="btn btn-secondary" href="#">
-            <i class="bi bi-pencil-square"></i>
-            Update
-        </a>
-    </div>-->
-    <div class="col-sm-3">
-        <!-- <button type="button" class="btn btn-danger"><i class="bi bi-x-square"></i>Delete service</button> -->
         <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
             <i class="bi bi-x-square"></i>
             Delete service
@@ -224,6 +217,69 @@
             </td>
         </tr>
         {% endif %}
+        {% if config.WhichOneof('config_rule') == 'acl' %}
+        <tr>
+            <td>
+                {% if config.acl %}
+                    {% set endpoint_id = config.acl.endpoint_id %}
+                    {% set rule_set_name = config.acl.rule_set.name %}
+                    /device[{{ endpoint_id.device_id.device_uuid.uuid }}]/endpoint[{{ endpoint_id.endpoint_uuid.uuid }}]/acl_ruleset[{{ rule_set_name }}]
+                {% endif %}
+            </td>
+            <td>
+                <ul>
+                    {% if config.acl.rule_set.name %}
+                        <li><b>name: </b>{{ config.acl.rule_set.name }}</li>
+                    {% endif %}
+                    {% if config.acl.rule_set.type %}
+                        <li><b>type: </b>{{ type[config.acl.rule_set.type] }}</li>
+                    {% endif %}
+                    {% if config.acl.rule_set.description %}
+                        <li><b>description: </b>{{ config.acl.rule_set.description }}</li>
+                    {% endif %}
+                    {% if config.acl.rule_set.user_id %}
+                        <li><b>user_id: </b>{{ config.acl.rule_set.user_id }}</li>
+                    {% endif %}  
+                    {% for entry in config.acl.rule_set.entries %}
+                    {% if entry.description %}
+                        <li><b>entry {{ entry.sequence_id }} description: </b>{{ entry.description }}</li>
+                    {% endif %}
+                    {% if entry.match.protocol %}
+                        <li><b>entry {{ entry.sequence_id }} protocol: </b>{{ entry.match.protocol }}</li>
+                    {% endif %}
+                    {% if entry.match.dscp %}
+                        <li><b>entry {{ entry.sequence_id }} dscp:</b>{{ entry.match.dscp }}</li>
+                    {% endif %}
+                    {% if entry.match.src_address %}
+                        <li><b>entry {{ entry.sequence_id }} src_address: </b>{{ entry.match.src_address }}</li>
+                    {% endif %}
+                    {% if entry.match.dst_address %}
+                        <li><b>entry {{ entry.sequence_id }} dst_address: </b>{{ entry.match.dst_address }}</li>
+                    {% endif %}
+                    {% if entry.match.src_port %}
+                        <li><b>entry {{ entry.sequence_id }} src_port: </b>{{ entry.match.src_port }}</li>
+                    {% endif %}
+                    {% if entry.match.dst_port %}
+                        <li><b>entry {{ entry.sequence_id }} dst_port: </b>{{ entry.match.dst_port }}</li>
+                    {% endif %}
+                    {% if entry.match.start_mpls_label %}
+                        <li><b>entry {{ entry.sequence_id }} start mpls label: </b>{{ entry.match.start_mpls_label }}</li>
+                    {% endif %}
+                    {% if entry.match.end_mpls_label %}
+                        <li><b>entry {{ entry.sequence_id }} end mpls label: </b> {{ entry.match.end_mpls_label }}</li>
+                    {% endif %}
+                    {% if entry.action.forward_action %}
+                        <li><b>entry {{ entry.sequence_id }} forward_action: </b>{{ f_action[entry.action.forward_action] }}</li>
+                    {% endif %}
+                    {% if entry.action.log_action %}
+                        <li><b>entry {{ entry.sequence_id }} log_action: </b>{{l_action[entry.action.log_action] }}</li>
+                    {% endif %}
+                {% endfor %}
+
+                </ul>
+            </td>
+        </tr>
+        {% endif %}
         {% endfor %}
     </tbody>
 </table>
diff --git a/src/webui/service/templates/service/home.html b/src/webui/service/templates/service/home.html
index 00feaff59128dd026ab2bdb369229a9d0aaae805..14226b7dcde572e196465b1e59e3ddf44c4193d9 100644
--- a/src/webui/service/templates/service/home.html
+++ b/src/webui/service/templates/service/home.html
@@ -20,15 +20,13 @@
     <h1>Services</h1>
 
     <div class="row">
-        <!-- <div class="col">
-            <a href="{{ url_for('service.add') }}" class="btn btn-primary" style="margin-bottom: 10px;">
+        <div class="col">
+            <a href="{{ url_for('service.add_configure') }}" class="btn btn-primary" style="margin-bottom: 10px;"> 
                 <i class="bi bi-plus"></i>
                 Add New Service
             </a>
-        </div> -->
+        </div> 
 
-        <!-- Only display XR service addition button if there are XR constellations. Otherwise it might confuse
-             user, as other service types do not have GUI to add service yet. -->
         {% if "DEVICEDRIVER_XR" in active_drivers %}
             <div class="col">
                 <a href="{{ url_for('service.add_xr') }}" class="btn btn-primary" style="margin-bottom: 10px;">
@@ -41,17 +39,8 @@
         <div class="col">
             {{ services | length }} services found in context <i>{{ session['context_uuid'] }}</i>
         </div>
-        <!-- <div class="col">
-            <form>
-                <div class="input-group">
-                    <input type="text" aria-label="Search" placeholder="Search..." class="form-control"/>
-                    <button type="submit" class="btn btn-primary">Search</button>
-                  </div>
-            </form>
-        </div> -->
     </div>
     
-
     <table class="table table-striped table-hover">
         <thead>
           <tr>
@@ -68,9 +57,7 @@
                 {% for service in services %}
                 <tr>
                     <td>
-                        <!-- <a href="{{ url_for('service.detail', service_uuid=service.service_id.service_uuid.uuid) }}"> -->
                             {{ service.service_id.service_uuid.uuid }}
-                        <!-- </a> -->
                     </td>
                     <td>
                         {{ service.name }}