From adad97e9174d14a3f474d06afbfe5b5d46646ebf Mon Sep 17 00:00:00 2001
From: rfnx <zenith777777@protonmail.com>
Date: Sat, 1 Feb 2025 01:09:06 -0500
Subject: [PATCH] Add additional interfaces to AddInterfacePage

---
 meshchat.py                                   |  204 +-
 .../interfaces/AddInterfacePage.vue           | 1841 ++++++++++++++---
 .../components/interfaces/Interface.vue       |   12 +
 .../components/interfaces/InterfacesPage.vue  |    2 +-
 .../nomadnetwork/NomadNetworkPage.vue         |    2 +-
 src/frontend/js/Utils.js                      |    4 +
 6 files changed, 1731 insertions(+), 334 deletions(-)

diff --git a/meshchat.py b/meshchat.py
index 3ed2e6a..5987477 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -329,8 +329,30 @@ class ReticulumMeshChat:
             if "interfaces" in self.reticulum.config:
                 interfaces = self.reticulum.config["interfaces"]
 
+            processed_interfaces = {}
+            for interface_name, interface in interfaces.items():
+                interface_data = interface.copy()
+
+                # handle sub-interfaces for RNodeMultiInterface
+                if interface_data.get("type") == "RNodeMultiInterface":
+                    sub_interfaces = []
+                    for sub_name, sub_config in interface_data.items():
+                        if sub_name not in {"type", "port", "interface_enabled", "selected_interface_mode",
+                                            "configured_bitrate"}:
+                            if isinstance(sub_config, dict):
+                                sub_config["name"] = sub_name
+                                sub_interfaces.append(sub_config)
+
+                    # add sub-interfaces to the main interface data
+                    interface_data["sub_interfaces"] = sub_interfaces
+
+                    for sub in sub_interfaces:
+                        del interface_data[sub["name"]]
+
+                processed_interfaces[interface_name] = interface_data
+
             return web.json_response({
-                "interfaces": interfaces,
+                "interfaces": processed_interfaces,
             })
 
         # enable reticulum interface
@@ -443,11 +465,32 @@ class ReticulumMeshChat:
             if "enabled" not in interface_details and "interface_enabled" not in interface_details:
                 interface_details["interface_enabled"] = "true"
 
+            # additional AutoInterface options
+            if interface_type == "AutoInterface":
+                if data.get("group_id"):
+                    interface_details["group_id"] = data.get("group_id")
+                if data.get("multicast_address_type"):
+                    interface_details["multicast_address_type"] = data.get("multicast_address_type")
+                if data.get("devices"):
+                    interface_details["devices"] = data.get("devices")
+                if data.get("ignored_devices"):
+                    interface_details["ignored_devices"] = data.get("ignored_devices")
+                if data.get("discovery_scope"):
+                    interface_details["discovery_scope"] = data.get("discovery_scope")
+                if data.get("discovery_port"):
+                    interface_details["discovery_port"] = data.get("discovery_port")
+                if data.get("data_port"):
+                    interface_details["data_port"] = data.get("data_port")
+
+
             # handle tcp client interface
             if interface_type == "TCPClientInterface":
 
                 interface_target_host = data.get('target_host')
                 interface_target_port = data.get('target_port')
+                # optional parameters for kiss_framing and i2p tunnelling
+                interface_kiss_framing = data.get('kiss_framing')
+                interface_i2p_tunneled = data.get('i2p_tunneled')
 
                 # ensure target host provided
                 if interface_target_host is None or interface_target_host == "":
@@ -463,6 +506,13 @@ class ReticulumMeshChat:
 
                 interface_details["target_host"] = data.get('target_host')
                 interface_details["target_port"] = data.get('target_port')
+                interface_details["kiss_framing"] = interface_kiss_framing
+                interface_details["i2p_tunneled"] = interface_i2p_tunneled
+
+                # handle I2P interface
+            if interface_type == "I2PInterface":
+                interface_details['connectable'] = "True"
+                interface_details["peers"] = data.get('peers')
 
             # handle tcp server interface
             if interface_type == "TCPServerInterface":
@@ -470,6 +520,9 @@ class ReticulumMeshChat:
                 interface_listen_ip = data.get('listen_ip')
                 interface_listen_port = data.get('listen_port')
 
+                interface_network_device = data.get('device')
+                interface_prefer_ipv6 = data.get('prefer_ipv6')
+
                 # ensure listen ip provided
                 if interface_listen_ip is None or interface_listen_ip == "":
                     return web.json_response({
@@ -485,6 +538,11 @@ class ReticulumMeshChat:
                 interface_details["listen_ip"] = data.get('listen_ip')
                 interface_details["listen_port"] = data.get('listen_port')
 
+                if interface_network_device is not None and interface_network_device != "":
+                    interface_details["device"] = interface_network_device
+                if interface_prefer_ipv6 is not None and interface_prefer_ipv6 != "" and interface_prefer_ipv6 != False:
+                    interface_details["prefer_ipv6"] = True
+
             # handle udp interface
             if interface_type == "UDPInterface":
 
@@ -492,6 +550,7 @@ class ReticulumMeshChat:
                 interface_listen_port = data.get('listen_port')
                 interface_forward_ip = data.get('forward_ip')
                 interface_forward_port = data.get('forward_port')
+                interface_network_device = data.get('device')
 
                 # ensure listen ip provided
                 if interface_listen_ip is None or interface_listen_ip == "":
@@ -522,6 +581,9 @@ class ReticulumMeshChat:
                 interface_details["forward_ip"] = data.get('forward_ip')
                 interface_details["forward_port"] = data.get('forward_port')
 
+                if interface_network_device is not None and interface_network_device != "":
+                    interface_details["network_device"] = interface_network_device
+
             # handle rnode interface
             if interface_type == "RNodeInterface":
 
@@ -575,6 +637,132 @@ class ReticulumMeshChat:
                 interface_details["spreadingfactor"] = interface_spreadingfactor
                 interface_details["codingrate"] = interface_codingrate
 
+            # Handle RNode Multi Interface
+            if interface_type == "RNodeMultiInterface":
+                interface_port = data.get("port")
+                sub_interfaces = data.get("sub_interfaces", [])
+
+                if not interface_port:
+                    return web.json_response({"message": "Port is required"}, status=422)
+
+                if not isinstance(sub_interfaces, list) or not sub_interfaces:
+                    return web.json_response({"message": "At least one sub-interface is required"}, status=422)
+
+                interface_details["type"] = interface_type
+                interface_details["interface_enabled"] = True
+                interface_details["port"] = interface_port
+
+                for idx, sub in enumerate(sub_interfaces):
+                    # validate required fields for each sub-interface
+                    required_subinterface_fields = ["name", "frequency", "bandwidth", "txpower", "spreadingfactor",
+                                                    "codingrate",
+                                                    "vport"]
+                    missing_fields = [field for field in required_subinterface_fields if not sub.get(field)]
+                    if missing_fields:
+                        return web.json_response({
+                            "message": f"Sub-interface {idx + 1} is missing required field(s): {', '.join(missing_fields)}"
+                        }, status=422)
+
+                    sub_interface_name = sub.get("name")
+                    interface_details[sub_interface_name] = {
+                        "interface_enabled": "true",
+                        "frequency": int(sub["frequency"]),
+                        "bandwidth": int(sub["bandwidth"]),
+                        "txpower": int(sub["txpower"]),
+                        "spreadingfactor": int(sub["spreadingfactor"]),
+                        "codingrate": int(sub["codingrate"]),
+                        "vport": int(sub["vport"]),
+                    }
+
+                interfaces[interface_name] = interface_details
+
+            # Handle Serial, KISS, and AX25KISS
+            if interface_type == "SerialInterface" or interface_type == "KISSInterface" or interface_type == "AX25KISSInterface":
+                interface_port = data.get('port')
+                interface_speed = data.get('speed')
+
+                required_fields = {
+                    interface_port: "Port is required",
+                    interface_speed: "Serial speed is required",
+                }
+
+                for field, error_message in required_fields.items():
+                    if field is None or field == "":
+                        return web.json_response({
+                            "message": error_message,
+                        }, status=422)
+
+                interface_details["port"] = interface_port
+                interface_details['connectable'] = "True"
+                interface_details["type"] = interface_type
+                interface_details["interface_enabled"] = True
+
+                interface_details["speed"] = interface_speed
+                interface_details["databits"] = data.get('databits')
+                interface_details['parity'] = data.get('parity')
+                interface_details['stopbits'] = data.get('stopbits')
+
+                # Handle KISS and AX25KISS specific options
+                if (interface_type == "KISSInterface" or interface_type == "AX25KISSInterface"):
+                    interface_details["preamble"] = data.get('preamble')
+                    interface_details["txtail"] = data.get('txtail')
+                    interface_details['persistence'] = data.get('persistence')
+                    interface_details['slottime'] = data.get('slottime')
+                    interface_details['callsign'] = data.get('callsign')
+                    interface_details['ssid'] = data.get('ssid')
+
+            # RNode Airtime limits and station ID
+            callsign = data.get('callsign')
+            id_interval = data.get('id_interval')
+            airtime_limit_long = data.get('airtime_limit_long')
+            airtime_limit_short = data.get('airtime_limit_short')
+
+            if callsign is not None and callsign != "":
+                interface_details["callsign"] = callsign
+            if id_interval is not None and id_interval != "":
+                interface_details["id_interval"] = id_interval
+            if airtime_limit_long is not None and airtime_limit_long != "":
+                interface_details["airtime_limit_long"] = airtime_limit_long
+            if airtime_limit_short is not None and airtime_limit_short != "":
+                interface_details["airtime_limit_short"] = airtime_limit_short
+
+            # Handle Pipe Interface
+            if interface_type == "PipeInterface":
+                interface_command = data.get('command')
+                interface_respawn_delay = data.get('respawn_delay')
+
+                required_fields = {
+                    interface_command: "Command is required",
+                    interface_respawn_delay: "Respawn delay is required",
+                }
+
+                for field, error_message in required_fields.items():
+                    if field is None or field == "":
+                        return web.json_response({
+                            "message": error_message,
+                        }, status=422)
+
+                interface_details["command"] = interface_command
+                interface_details["respawn_delay"] = interface_respawn_delay
+
+            # Common interface options
+            inferred_bitrate = data.get('bitrate')
+            transport_mode = data.get('mode')
+            network_name = data.get('network_name')
+            ifac_passphrase = data.get('passphrase')
+            ifac_size = data.get('ifac_size')
+
+            if inferred_bitrate is not None and inferred_bitrate != "":
+                interface_details["bitrate"] = inferred_bitrate
+            if transport_mode is not None and transport_mode != "":
+                interface_details["mode"] = transport_mode
+            if network_name is not None and network_name != "":
+                interface_details["network_name"] = network_name
+            if ifac_passphrase is not None and ifac_passphrase != "":
+                interface_details["passphrase"] = ifac_passphrase
+            if ifac_size is not None and ifac_size != "":
+                interface_details["ifac_size"] = ifac_size
+
             # merge new interface into existing interfaces
             interfaces[interface_name] = interface_details
             self.reticulum.config["interfaces"] = interfaces
@@ -619,7 +807,19 @@ class ReticulumMeshChat:
                     for key, value in interface.items():
                         output.append(f"    {key} = {value}")
                     output.append("")
-                
+
+                    # Handle sub-interfaces for RNodeMultiInterface
+                    if interface.get("type") == "RNodeMultiInterface":
+                        for sub_name, sub_config in interface.items():
+                            if sub_name in {"type", "port", "interface_enabled"}:
+                                continue
+                            if isinstance(sub_config, dict):
+                                output.append(f"  [[[ {sub_name} ]]]")
+                                for sub_key, sub_value in sub_config.items():
+                                    output.append(f"      {sub_key} = {sub_value}")
+                                output.append("")
+
+
                 return web.Response(
                     text="\n".join(output),
                     content_type="text/plain",
diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 1ffafc2..f54580c 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -1,174 +1,1023 @@
 <template>
-    <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px] dark:bg-zinc-950">
-        <div class="overflow-y-auto p-2 space-y-2">
+  <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px] dark:bg-zinc-950">
+    <div class="overflow-y-auto p-2 space-y-2">
 
-            <!-- community interfaces -->
-            <div v-if="!isEditingInterface && config != null && config.show_suggested_community_interfaces" class="bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-900">
-                <div class="flex p-2">
-                    <div class="my-auto mr-auto">
-                        <div class="font-bold dark:text-white">Community Interfaces</div>
-                        <div class="text-sm  dark:text-gray-100">These TCP interfaces serve as a quick way to test Reticulum. We suggest running your own as these may not always be available.</div>
-                    </div>
-                    <div class="my-auto ml-2">
-                        <button @click="updateConfig({'show_suggested_community_interfaces': false})" type="button" class="text-gray-700 bg-gray-100 hover:bg-gray-200 p-2 rounded-full dark:bg-zinc-600 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
-                                <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="divide-y divide-gray-200 dark:text-white">
-
-                    <div class="flex px-2 py-1">
-                        <div class="my-auto mr-auto">
-                            <div>RNS Testnet Amsterdam</div>
-                            <div class="text-xs">amsterdam.connect.reticulum.network:4965</div>
-                        </div>
-                        <div class="ml-2 my-auto">
-                            <button @click="newInterfaceName='RNS Testnet Amsterdam';newInterfaceType='TCPClientInterface';newInterfaceTargetHost='amsterdam.connect.reticulum.network';newInterfaceTargetPort='4965'" type="button" class="inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
-                                <span>Use Interface</span>
-                            </button>
-                        </div>
-                    </div>
-
-                    <div class="flex px-2 py-1">
-                        <div class="my-auto mr-auto">
-                            <div>RNS Testnet BetweenTheBorders</div>
-                            <div class="text-xs">reticulum.betweentheborders.com:4242</div>
-                        </div>
-                        <div class="ml-2 my-auto">
-                            <button @click="newInterfaceName='RNS Testnet BetweenTheBorders';newInterfaceType='TCPClientInterface';newInterfaceTargetHost='reticulum.betweentheborders.com';newInterfaceTargetPort='4242'" type="button" class="inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
-                                <span>Use Interface</span>
-                            </button>
-                        </div>
-                    </div>
-
-                </div>
+      <!-- community interfaces -->
+      <div v-if="!isEditingInterface && config != null && config.show_suggested_community_interfaces"
+           class="bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-900">
+        <div class="flex p-2">
+          <div class="my-auto mr-auto">
+            <div class="font-bold dark:text-white">Community Interfaces</div>
+            <div class="text-sm  dark:text-gray-100">These TCP interfaces serve as a quick way to test Reticulum. We
+              suggest running your own as these may not always be available.
             </div>
+          </div>
+          <div class="my-auto ml-2">
+            <button @click="updateConfig({'show_suggested_community_interfaces': false})" type="button"
+                    class="text-gray-700 bg-gray-100 hover:bg-gray-200 p-2 rounded-full dark:bg-zinc-600 dark:text-white dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-500">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                <path
+                    d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div class="divide-y divide-gray-200 dark:text-white">
 
-            <!-- add interface form -->
-            <div class="bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-950">
-                <div class="p-2 font-bold dark:text-white">
-                    <span v-if="isEditingInterface">Edit Interface</span>
-                    <span v-else>Add Interface</span>
-                </div>
-                <div class="p-2 space-y-3">
-
-                    <!-- interface name -->
-                    <div>
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Name</label>
-                        <input type="text" :disabled="isEditingInterface" placeholder="New Interface Name" v-model="newInterfaceName" class="border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white" :class="[ isEditingInterface ? 'cursor-not-allowed bg-gray-200' : 'bg-gray-50' ]">
-                        <div class="text-xs text-gray-600">Interface names must be unique.</div>
-                    </div>
-
-                    <!-- interface type -->
-                    <div class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Type</label>
-                        <select v-model="newInterfaceType" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
-                            <option disabled selected>--</option>
-                            <option value="AutoInterface">AutoInterface</option>
-                            <option value="RNodeInterface">RNodeInterface</option>
-                            <option value="TCPClientInterface">TCPClientInterface</option>
-                            <option value="TCPServerInterface">TCPServerInterface</option>
-                            <option value="UDPInterface">UDPInterface</option>
-                        </select>
-                        <div class="text-xs text-gray-600">
-                            Need help? <a class="text-blue-500 underline" href="https://reticulum.network/manual/interfaces.html" target="_blank">Reticulum Docs: Configuring Interfaces</a>
-                        </div>
-                    </div>
-
-                    <!-- interface target host -->
-                    <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Target Host</label>
-                        <input type="text" placeholder="example.com" v-model="newInterfaceTargetHost" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                    </div>
-
-                    <!-- interface target port -->
-                    <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Target Port</label>
-                        <input type="text" placeholder="1234" v-model="newInterfaceTargetPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                    </div>
-
-                    <!-- interface listen ip -->
-                    <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Listen IP</label>
-                        <input type="text" placeholder="0.0.0.0" v-model="newInterfaceListenIp" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                    </div>
-
-                    <!-- interface listen port -->
-                    <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Listen Port</label>
-                        <input type="text" placeholder="1234" v-model="newInterfaceListenPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                    </div>
-
-                    <!-- interface forward ip -->
-                    <div v-if="newInterfaceType === 'UDPInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Forward IP</label>
-                        <input type="text" placeholder="255.255.255.255" v-model="newInterfaceForwardIp" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                    </div>
-
-                    <!-- interface listen port -->
-                    <div v-if="newInterfaceType === 'UDPInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Forward Port</label>
-                        <input type="text" placeholder="1234" v-model="newInterfaceForwardPort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                    </div>
-
-                    <!-- interface port -->
-                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
-                        <select v-model="newInterfacePort" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                            <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product: {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})</option>
-                        </select>
-                    </div>
-
-                    <!-- interface frequency -->
-                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Frequency (Hz)</label>
-                        <input type="number" v-model="newInterfaceFrequency" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                        <div class="text-xs text-gray-600">{{ formatFrequency(newInterfaceFrequency) }}</div>
-                    </div>
-
-                    <!-- interface bandwidth -->
-                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Bandwidth</label>
-                        <select v-model="newInterfaceBandwidth" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                            <option v-for="bandwidth in RNodeInterfaceDefaults.bandwidths" :value="bandwidth">{{ bandwidth / 1000 }} KHz</option>
-                        </select>
-                    </div>
-
-                    <!-- interface txpower -->
-                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Transmit Power (dBm)</label>
-                        <input v-model="newInterfaceTxpower" type="number" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
-                    </div>
-
-                    <!-- interface spreading factor -->
-                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Spreading Factor</label>
-                        <select v-model="newInterfaceSpreadingFactor" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5  dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                            <option v-for="spreadingfactor in RNodeInterfaceDefaults.spreadingfactors" :value="spreadingfactor">{{ spreadingfactor }}</option>
-                        </select>
-                    </div>
-
-                    <!-- interface coding rate -->
-                    <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
-                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Coding Rate</label>
-                        <select v-model="newInterfaceCodingRate" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                            <option v-for="codingrate in RNodeInterfaceDefaults.codingrates" :value="codingrate">{{ codingrate }}</option>
-                        </select>
-                    </div>
-
-                    <!-- add button -->
-                    <button @click="addInterface" type="button" class="bg-green-500 hover:bg-green-400 focus-visible:outline-green-500 my-auto inline-flex items-center gap-x-1 rounded-md p-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
-                        <span v-if="isEditingInterface">Save Interface</span>
-                        <span v-else>Add Interface</span>
-                    </button>
-
-                </div>
+          <div class="flex px-2 py-1">
+            <div class="my-auto mr-auto">
+              <div>RNS Testnet Amsterdam</div>
+              <div class="text-xs">amsterdam.connect.reticulum.network:4965</div>
             </div>
+            <div class="ml-2 my-auto">
+              <button
+                  @click="newInterfaceName='RNS Testnet Amsterdam';newInterfaceType='TCPClientInterface';newInterfaceTargetHost='amsterdam.connect.reticulum.network';newInterfaceTargetPort='4965'"
+                  type="button"
+                  class="inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
+                <span>Use Interface</span>
+              </button>
+            </div>
+          </div>
+
+          <div class="flex px-2 py-1">
+            <div class="my-auto mr-auto">
+              <div>RNS Testnet BetweenTheBorders</div>
+              <div class="text-xs">reticulum.betweentheborders.com:4242</div>
+            </div>
+            <div class="ml-2 my-auto">
+              <button
+                  @click="newInterfaceName='RNS Testnet BetweenTheBorders';newInterfaceType='TCPClientInterface';newInterfaceTargetHost='reticulum.betweentheborders.com';newInterfaceTargetPort='4242'"
+                  type="button"
+                  class="inline-flex items-center gap-x-1 rounded-md bg-gray-500 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
+                <span>Use Interface</span>
+              </button>
+            </div>
+          </div>
 
         </div>
+      </div>
+
+      <!-- add interface form -->
+      <div class="bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-900">
+        <div class="p-2 font-bold dark:text-white">
+          <span v-if="isEditingInterface">Edit Interface</span>
+          <span v-else>Add Interface</span>
+        </div>
+        <div class="p-2 space-y-3">
+          <!-- iGeneric interface settings -->
+          <!-- interface name -->
+          <div>
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Name</label>
+            <input type="text" :disabled="isEditingInterface" placeholder="New Interface Name"
+                   v-model="newInterfaceName"
+                   class="border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                   :class="[ isEditingInterface ? 'cursor-not-allowed bg-gray-200' : 'bg-gray-50' ]">
+            <div class="text-xs text-gray-600 dark:text-zinc-300">Interface names must be unique.</div>
+          </div>
+
+          <!-- interface type -->
+          <div class="mb-2">
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Type</label>
+            <select v-model="newInterfaceType"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+              <option disabled selected>--</option>
+              <option value="AutoInterface">Auto Interface</option>
+              <option disabled selected>RNodes</option>
+              <option value="RNodeInterface">RNode Interface</option>
+              <option value="RNodeMultiInterface">RNode Multi Interface</option>
+              <option disabled selected>IP Networks</option>
+              <option value="TCPClientInterface">TCP Client Interface</option>
+              <option value="TCPServerInterface">TCP Server Interface</option>
+              <option value="UDPInterface">UDP Interface</option>
+              <option value="I2PInterface">I2P Interface</option>
+              <option disabled selected>Hardware</option>
+              <option value="SerialInterface">Serial Interface</option>
+              <option value="KISSInterface">KISS Interface</option>
+              <option hidden value="AX25KISSInterface">AX.25 KISS Interface</option>
+              <option disabled selected>Other</option>
+              <option value="PipeInterface">Pipe Interface</option>
+            </select>
+            <div class="text-xs text-gray-600 dark:text-zinc-300">
+              Need help? <a class="text-blue-500 underline" href="https://reticulum.network/manual/interfaces.html"
+                            target="_blank">Reticulum Docs: Configuring Interfaces</a>
+            </div>
+          </div>
+
+
+              <div v-if="newInterfaceType === 'AutoInterface'" class="mb-4">
+
+            <div
+                @click="toggleAllSettings"
+                class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
+            >
+              <span
+                  class="font-semibold text-gray-900 dark:text-gray-100">Additional AutoInterface Settings</span>
+              <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200 "
+                    :class="{ 'rotate-180': showAllSettings }"
+              >
+                            ▲
+                          </span>
+            </div>
+
+            <div
+                v-show="showAllSettings"
+                class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700"
+            >
+               <p class="text-sm text-gray-600 dark:text-gray-400">ⓘ These settings are optional</p>
+                <div class="flex-1">
+                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Group ID</label>
+                    <input
+                        type="text"
+                        v-model="newInterfaceGroupID"
+                        placeholder="reticulum"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                    />
+                </div>
+
+                 <div class="flex-1">
+                      <label class="text-sm dark:text-zinc-100">Multicast Address Type</label>
+                      <select
+                          v-model="newInterfaceMulticastAddressType"
+                          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                      >
+                        <option value="permanent">
+                            Permanent
+                        </option>
+                         <option value="temporary">
+                            Temporary
+                        </option>
+                      </select>
+                 </div>
+
+
+                <div class="flex items-center space-x-4 mt-4">
+                  <div class="flex-1">
+                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Network devices</label>
+                    <input
+                        type="text"
+                        v-model="newInterfaceDevices"
+                        placeholder="wlan0,eth1"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                    />
+                  </div>
+                  <div class="flex-1">
+                    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Ignored Devices</label>
+                    <input
+                        type="text"
+                        v-model="newInterfaceIgnoredDevices"
+                        placeholder="tun0,eth0"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                    />
+                  </div>
+              </div>
+
+             <div class="flex items-center space-x-4 mt-4">
+              <div class="flex-1">
+                <label class="text-sm dark:text-zinc-100">Discovery Scope</label>
+                      <select
+                          v-model="newInterfaceDiscoveryScope"
+                          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                      >
+                        <option value="global">
+                            Global
+                        </option>
+                        <option value="admin">
+                            Admin
+                        </option>
+                        <option value="organisation">
+                            Organisation
+                        </option>
+                        <option value="site">
+                            Site
+                        </option>
+                        <option value="link">
+                            Link
+                        </option>
+
+                      </select>
+              </div>
+              <div class="flex-1">
+                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Discovery Port</label>
+                <input
+                    type="number"
+                    v-model="newInterfaceDiscoveryPort"
+                    placeholder="48555"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                />
+              </div>
+              <div class="flex-1">
+                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Data Port</label>
+                <input
+                    type="number"
+                    v-model="newInterfaceDataPort"
+                    placeholder="49555"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                />
+              </div>
+             </div>
+           </div>
+          </div>
+
+          <!-- TCPClientInterface -->
+          <!-- interface target host -->
+          <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-2">
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Target Host</label>
+            <input type="text" placeholder="example.com" v-model="newInterfaceTargetHost"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+          </div>
+
+          <!-- interface target port -->
+          <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-2">
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Target Port</label>
+            <input type="text" placeholder="1234" v-model="newInterfaceTargetPort"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+          </div>
+
+          <div v-if="newInterfaceType === 'TCPClientInterface'" class="mb-4">
+
+            <div
+                @click="toggleAllSettings"
+                class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
+            >
+              <span
+                  class="font-semibold text-gray-900 dark:text-gray-100">Additional TCP Client Interface settings</span>
+              <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200 "
+                    :class="{ 'rotate-180': showAllSettings }"
+              >
+                            ▲
+                          </span>
+            </div>
+
+            <div
+                v-show="showAllSettings"
+                class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700"
+            >
+              <div class="flex items-start">
+                <div class="flex flex-col">
+                  <label for="kiss-framing" class="text-sm font-medium text-gray-900 dark:text-zinc-100">
+                    Enable KISS Framing
+                  </label>
+                  <span class="text-sm text-gray-500 dark:text-zinc-300">
+                                  ⓘ Enabled when connecting to software that uses KISS framing such as packet radio sound modems.
+                                     For KISS connections through serial hardware select "KISS Interface" as the interface type.
+                                </span>
+                </div>
+                <input
+                    id="kiss-framing"
+                    type="checkbox"
+                    v-model="newInterfaceKISSFramingEnabled"
+                    class="ml-auto h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"
+                />
+              </div>
+              <div class="flex items-start">
+                <div class="flex flex-col">
+                  <label for="i2p-tunneled" class="text-sm font-medium text-gray-900 dark:text-zinc-100">
+                    Enable I2P tunneling
+                  </label>
+                  <span class="text-sm text-gray-500 dark:text-zinc-300">
+                                  ⓘ Enables tunnelling through an I2P Connection using the TCPClientInterface
+                                </span>
+                </div>
+                <input
+                    id="i2p-tunneled"
+                    type="checkbox"
+                    v-model="newInterfaceI2PTunnelingEnabled"
+                    class="ml-auto h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"
+                />
+              </div>
+
+            </div>
+          </div>
+
+          <!-- TCPServerInterface -->
+          <!-- interface listen ip -->
+          <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-2">
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Listen IP</label>
+            <input type="text" placeholder="0.0.0.0" v-model="newInterfaceListenIp"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+          </div>
+
+          <!-- interface listen port -->
+          <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-2">
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Listen Port</label>
+            <input type="text" placeholder="1234" v-model="newInterfaceListenPort"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+          </div>
+
+
+          <div v-if="newInterfaceType === 'TCPServerInterface' || newInterfaceType === 'UDPInterface'" class="mb-4">
+
+            <div
+                @click="toggleAllSettings"
+                class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
+            >
+              <span
+                  class="font-semibold text-gray-900 dark:text-gray-100">Additional Server Interface settings</span>
+              <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200 "
+                    :class="{ 'rotate-180': showAllSettings }"
+              >
+                            ▲
+                          </span>
+            </div>
+
+            <div
+                v-show="showAllSettings"
+                class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
+
+              <div class="mb-2">
+                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Network device</label>
+                <span class="text-sm text-gray-500 dark:text-zinc-300">
+                                  ⓘ Binds the interface to a specific network interface
+                </span>
+                <input type="text" placeholder="eth0" v-model="newInterfaceNetworkDevice"
+                       class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+              </div>
+              <div class="flex items-start">
+                <div class="flex flex-col">
+                  <label for="prefer-ipv6" class="text-sm font-medium text-gray-900 dark:text-zinc-100">
+                    Prefer IPv6
+                  </label>
+                  <span class="text-sm text-gray-500 dark:text-zinc-300">
+                                  ⓘ Binds the TCP Server Interface to an IPv6 address
+                                </span>
+                </div>
+                <input
+                    id="prefer-ipv6"
+                    type="checkbox"
+                    value="1"
+                    v-model="newInterfacePreferIPV6"
+                    class="ml-auto h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"
+                />
+              </div>
+            </div>
+
+          </div>
+
+          <!-- UDPInterface -->
+          <!-- interface forward ip -->
+          <div v-if="newInterfaceType === 'UDPInterface'" class="mb-2">
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Forward IP</label>
+            <input type="text" placeholder="255.255.255.255" v-model="newInterfaceForwardIp"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+          </div>
+
+          <!-- interface listen port -->
+          <div v-if="newInterfaceType === 'UDPInterface'" class="mb-2">
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Forward Port</label>
+            <input type="text" placeholder="1234" v-model="newInterfaceForwardPort"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+          </div>
+
+          <!-- I2PInterface -->
+          <div v-if="newInterfaceType === 'I2PInterface'" class="mb-4">
+                    <span class="text-sm text-gray-500 dark:text-zinc-300">
+                        ⓘ To use the I2P interface, you must have an I2P router running on your system. When the I2P Interface is added for the first time Reticulum will generate a new I2P address for the interface and begin listening for inbound traffic.
+                    </span>
+
+            <div class="mt-4">
+              <div
+                  @click="toggleI2PPeerAccordion"
+                  class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
+              >
+                <span class="font-semibold text-gray-900 dark:text-gray-100">Manage Peers</span>
+                <span
+                    class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200"
+                    :class="{ 'rotate-180': I2PSettings.showPeerAccordion }"
+                >
+                                ▲
+                            </span>
+              </div>
+
+              <div
+                  v-show="I2PSettings.showPeerAccordion"
+                  class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700"
+              >
+                <div v-for="(peer, index) in I2PSettings.newInterfacePeers" :key="index"
+                     class="flex items-center space-x-2">
+                  <input
+                      type="text"
+                      v-model="I2PSettings.newInterfacePeers[index]"
+                      placeholder="Enter peer address (ex: 5urvjicpzi7q3ybztsef4i5ow2aq4soktfj7zedz53s47r54jnqq.b32.i2p)"
+                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                  />
+                  <button
+                      @click="removeI2PPeer(index)"
+                      type="button"
+                      class="bg-red-500 hover:bg-red-400 text-white text-sm p-2 rounded-lg"
+                  >
+                    Remove
+                  </button>
+                </div>
+                <button
+                    @click="addI2PPeer('')"
+                    type="button"
+                    class="bg-green-500 hover:bg-green-400 text-white text-sm px-4 py-2 rounded-lg"
+                >
+                  Add Peer
+                </button>
+              </div>
+            </div>
+          </div>
+
+
+          <!-- RNode interface -->
+          <!-- interface port -->
+          <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
+            <select v-model="newInterfacePort"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+              <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product:
+                {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})
+              </option>
+            </select>
+          </div>
+          <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2 flex flex-wrap items-start gap-4">
+            <!-- interface Frequency -->
+            <div class="flex-1">
+              <div class="mb-2">
+                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Frequency</label>
+                <div class="flex items-center gap-2">
+                  <div class="flex flex-col">
+                    <input
+                        type="number"
+                        v-model.number="RNodeGHzValue"
+                        min="0"
+                        placeholder="GHz"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                    />
+                    <label class="text-xs text-gray-500 dark:text-zinc-400 mt-1 text-center">GHz</label>
+                  </div>
+                  <div class="flex flex-col">
+                    <input
+                        type="number"
+                        v-model.number="RNodeMHzValue"
+                        min="0"
+                        placeholder="MHz"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                    />
+                    <label class="text-xs text-gray-500 dark:text-zinc-400 mt-1 text-center">MHz</label>
+                  </div>
+                  <div class="flex flex-col">
+                    <input
+                        type="number"
+                        v-model.number="RNodekHzValue"
+                        min="0"
+                        placeholder="kHz"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                    />
+                    <label class="text-xs text-gray-500 dark:text-zinc-400 mt-1 text-center">kHz</label>
+                  </div>
+                </div>
+                <div class="text-sm text-gray-600 dark:text-zinc-100 mt-2 font-bold">
+                  Selected Frequency: {{ formattedFrequency }}
+                </div>
+              </div>
+            </div>
+
+            <!-- interface Bandwidth -->
+            <div class="flex-1">
+              <div class="mb-2">
+                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Bandwidth</label>
+                <select
+                    v-model="newInterfaceBandwidth"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                >
+                  <option v-for="bandwidth in RNodeInterfaceDefaults.bandwidths" :value="bandwidth">
+                    {{ bandwidth / 1000 }} KHz
+                  </option>
+                </select>
+              </div>
+            </div>
+          </div>
+
+
+          <!-- interface txpower -->
+          <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2">
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Transmit Power (dBm)</label>
+            <input v-model="newInterfaceTxpower" type="number"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+          </div>
+
+          <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-2 flex flex-wrap items-start gap-4">
+            <!-- interface spreading factor -->
+            <div class="flex-1">
+              <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Spreading Factor</label>
+              <select v-model="newInterfaceSpreadingFactor"
+                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                <option v-for="spreadingfactor in RNodeInterfaceDefaults.spreadingfactors" :value="spreadingfactor">
+                  {{ spreadingfactor }}
+                </option>
+              </select>
+            </div>
+
+            <!-- interface coding rate -->
+            <div class="flex-1">
+              <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Coding Rate</label>
+              <select v-model="newInterfaceCodingRate"
+                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+                <option v-for="codingrate in RNodeInterfaceDefaults.codingrates" :value="codingrate">{{
+                    codingrate
+                  }}
+                </option>
+              </select>
+            </div>
+          </div>
+          <!--          RNode LoRa parameters-->
+          <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-4">
+
+            <div
+                @click="toggleRNodeLoRaParameters"
+                class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
+            >
+              <span
+                  class="font-semibold text-gray-900 dark:text-gray-100">Show on-air RNode bitrate & link budget</span>
+              <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200 "
+                    :class="{ 'rotate-180': showRNodeLoRaParameters }"
+              >
+                            ▲
+                          </span>
+            </div>
+
+            <div
+                v-show="showRNodeLoRaParameters"
+                class="mt-3 space-y-6 p-6 border border-gray-300 rounded-lg bg-gray-50 dark:bg-zinc-900 dark:border-zinc-700"
+            >
+              <div class="space-y-2">
+                <div class="flex items-start space-x-2">
+                  <div class="w-1/4">
+                    <label class="block text-sm font-medium text-gray-800 dark:text-white">
+                      Antenna Gain (dBi)
+                    </label>
+                    <input
+                        type="number"
+                        v-model.number="RNodeInterfaceLoRaParameters.antennaGain"
+                        placeholder="Enter gain"
+                        class="w-1/2 bg-gray-100 border border-gray-300 rounded-lg py-1 px-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-800 dark:border-zinc-600 dark:text-white"
+                    />
+                    <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">ⓘ A stub or PCB antenna might have around 1
+                      dBi of
+                      gain, where a directional Yagi might have 5 dBi of gain.</p>
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white text-center">
+                  On-Air Calculations
+                </h3>
+                <div class="grid grid-cols-3 gap-4 text-center mt-2">
+                  <div class="bg-gray-100 p-4 rounded-lg shadow dark:bg-zinc-800">
+                    <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Sensitivity</div>
+                    <div class="text-xl font-bold text-gray-900 dark:text-white">
+                      {{ RNodeInterfaceLoRaParameters.sensitivity }}
+                    </div>
+                  </div>
+                  <div class="bg-gray-100 p-4 rounded-lg shadow dark:bg-zinc-800">
+                    <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Data Rate</div>
+                    <div class="text-xl font-bold text-gray-900 dark:text-white">
+                      {{ RNodeInterfaceLoRaParameters.dataRate }}
+                    </div>
+                  </div>
+                  <div class="bg-gray-100 p-4 rounded-lg shadow dark:bg-zinc-800">
+                    <div class="text-sm font-medium text-gray-700 dark:text-gray-300">Link Budget</div>
+                    <div class="text-xl font-bold text-gray-900 dark:text-white">
+                      {{ RNodeInterfaceLoRaParameters.linkBudget }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+          </div>
+          <div v-if="newInterfaceType === 'RNodeInterface'" class="mb-4">
+
+            <div
+                @click="toggleAllSettings"
+                class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
+            >
+              <span
+                  class="font-semibold text-gray-900 dark:text-gray-100">Additional RNode Interface Settings</span>
+              <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200 "
+                    :class="{ 'rotate-180': showAllSettings }"
+              >
+                            ▲
+                          </span>
+            </div>
+
+            <div
+                v-show="showAllSettings"
+                class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
+
+              <div class="flex items-center space-x-4">
+                <div class="flex-1">
+                  <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign</label>
+                  <input
+                      type="text"
+                      v-model="newInterfaceCallsign"
+                      placeholder="Enter callsign"
+                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                  />
+                </div>
+                <div class="flex-1">
+                  <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign ID Interval</label>
+                  <input
+                      type="number"
+                      v-model="newInterfaceIDInterval"
+                      placeholder="Enter interval (seconds)"
+                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                  />
+                </div>
+              </div>
+
+              <div class="flex items-center space-x-4">
+                <div class="flex-1">
+                  <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Airtime Limit
+                    (Short)</label>
+                  <input
+                      type="number"
+                      v-model="newInterfaceAirtimeLimitShort"
+                      placeholder="Enter short airtime limit (seconds)"
+                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                  />
+                </div>
+                <div class="flex-1">
+                  <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Airtime Limit (Long)</label>
+                  <input
+                      type="number"
+                      v-model="newInterfaceAirtimeLimitLong"
+                      placeholder="Enter long airtime limit (seconds)"
+                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                  />
+                </div>
+              </div>
+
+            </div>
+          </div>
+
+          <!--    RNodeMultiInterface      -->
+          <div v-if="newInterfaceType === 'RNodeMultiInterface'" class="mb-2">
+            <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">ⓘ The RNode Multi Interface is used for custom
+              devices
+              with multiple LoRa transceivers such as the openCom XL. </p>
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
+            <select v-model="newInterfacePort"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+              <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product:
+                {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})
+              </option>
+            </select>
+          </div>
+          <div v-if="newInterfaceType === 'RNodeMultiInterface'" class="mb-4">
+            <div
+                @click="toggleRNodeSubInterfaces"
+                class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700">
+              <span class="font-semibold text-gray-900 dark:text-gray-100">Manage RNode Subinterfaces</span>
+              <span
+                  class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200"
+                  :class="{ 'rotate-180': showRNodeSubInterfaces }">
+            ▲
+          </span>
+            </div>
+            <div
+                v-show="showRNodeSubInterfaces"
+                class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700">
+              <div
+                  v-for="(sub, idx) in RNodeMultiInterface.subInterfaces"
+                  :key="idx"
+                  class="space-y-2 border-b border-gray-200 dark:border-zinc-700 pb-4 mb-4">
+                <input
+                    v-model="sub.name"
+                    type="text"
+                    placeholder="Subinterface Name"
+                    class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                <div class="flex gap-2">
+                  <div class="flex-1">
+                    <label class="text-sm dark:text-zinc-100">Frequency (Hz)</label>
+                    <input
+                        v-model.number="sub.frequency"
+                        type="number"
+                        class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                  </div>
+                  <div class="flex-1">
+                    <label class="text-sm dark:text-zinc-100">Bandwidth</label>
+                    <select
+                        v-model="sub.bandwidth"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600"
+                    >
+                      <option v-for="bandwidth in RNodeInterfaceDefaults.bandwidths" :value="bandwidth">
+                        {{ bandwidth / 1000 }} KHz
+                      </option>
+                    </select>
+                  </div>
+                </div>
+                <div class="flex gap-2">
+                  <div class="flex-1">
+                    <label class="text-sm dark:text-zinc-100">Spreading Factor</label>
+                    <select
+                        v-model.number="sub.spreadingfactor"
+                        class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                      <option
+                          v-for="sf in RNodeInterfaceDefaults.spreadingfactors"
+                          :key="sf"
+                          :value="sf">
+                        {{ sf }}
+                      </option>
+                    </select>
+                  </div>
+                  <div class="flex-1">
+                    <label class="text-sm dark:text-zinc-100">Coding Rate</label>
+                    <select
+                        v-model.number="sub.codingrate"
+                        class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                      <option
+                          v-for="cr in RNodeInterfaceDefaults.codingrates"
+                          :key="cr"
+                          :value="cr">
+                        {{ cr }}
+                      </option>
+                    </select>
+                  </div>
+                </div>
+                <div class="flex gap-2 items-center">
+                  <div class="flex-1">
+                    <label class="text-sm dark:text-zinc-100">TX Power (dBm)</label>
+                    <input
+                        v-model.number="sub.txpower"
+                        type="number"
+                        class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                  </div>
+                  <div class="flex-1">
+                    <label class="text-sm dark:text-zinc-100">Virtual Port</label>
+                    <input
+                        v-model.number="sub.vport"
+                        type="number"
+                        class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+                  </div>
+                </div>
+                <button
+                    @click="removeSubInterface(idx)"
+                    type="button"
+                    class="bg-red-500 hover:bg-red-400 text-white text-sm p-2 rounded-lg">
+                  Remove Subinterface
+                </button>
+              </div>
+              <button
+                  @click="addSubInterface"
+                  type="button"
+                  class="bg-green-500 hover:bg-green-400 text-white text-sm px-4 py-2 rounded-lg">
+                Add Subinterface
+              </button>
+            </div>
+          </div>
+
+          <!--   Serial, KISS, and AX25Kiss         -->
+          <div v-if="['SerialInterface', 'KISSInterface', 'AX25KISSInterface'].includes(newInterfaceType)" class="mb-4">
+
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Port</label>
+            <select v-model="newInterfacePort"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+              <option v-for="comport of comports" :value="comport.device">{{ comport.device }} (Product:
+                {{ comport.product ?? '?' }}, Serial: {{ comport.serial ?? '?' }})
+              </option>
+            </select>
+
+            <div class="mb-2">
+              <label class="block mt-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Serial connection baud
+                rate (bps)</label>
+              <input v-model="newInterfaceSpeed" placeholder="115200" type="number"
+                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+            </div>
+
+            <div class="mt-2">
+              <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Databits</label>
+              <input v-model="newInterfaceDatabits" type="number" placeholder="8"
+                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+            </div>
+
+            <div class="mt-2">
+              <label class="block mt-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Parity </label>
+              <input v-model="newInterfaceParity" type="number" placeholder=""
+                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+            </div>
+
+            <div class="mt-2">
+              <label class="block mt-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Stopbits</label>
+              <input v-model="newInterfaceStopbits" type="number" placeholder="1"
+                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white">
+            </div>
+
+          </div>
+          <!--          KISS and AX.25 KISS-->
+          <div v-if="['KISSInterface', 'AX25KISSInterface'].includes(newInterfaceType)" class="mb-4">
+
+            <div class="flex items-center">
+              <input
+                  id="use-ax25"
+                  type="checkbox"
+                  :checked="newInterfaceType === 'AX25KISSInterface'"
+                  @click="useKISSAX25"
+                  class="h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:focus:ring-blue-600"
+              />
+              <label for="use-ax25" class="ml-2 text-sm font-medium text-gray-900 dark:text-zinc-100">
+                Use AX.25
+              </label>
+            </div>
+            <span class="text-sm text-gray-500 dark:text-zinc-300 mb-3">
+              ⓘ Enables AX.25 Framing
+            </span>
+
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">
+                  Preamble (milliseconds)
+                </label>
+                <input
+                    v-model="this.newInterfacePreamble"
+                    type="number"
+                    placeholder="150"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">
+                  TX Tail (milliseconds)
+                </label>
+                <input
+                    v-model="this.newInterfaceTXTail"
+                    type="number"
+                    placeholder="10"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">
+                  CDMA Persistence (milliseconds)
+                </label>
+                <input
+                    v-model="this.newInterfacePersistence"
+                    type="number"
+                    placeholder="200"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">
+                  CDMA Slot Time (milliseconds)
+                </label>
+                <input
+                    v-model="this.newInterfaceSlotTime"
+                    type="number"
+                    placeholder="20"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                />
+              </div>
+            </div>
+            <div class="flex items-center space-x-4 mt-4">
+              <div class="flex-1">
+                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">SSID</label>
+                <input
+                    type="text"
+                    value="0"
+                    v-model="newInterfaceSSID"
+                    placeholder="Enter SSID"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                />
+              </div>
+              <div class="flex-1">
+                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign</label>
+                <input
+                    type="text"
+                    v-model="newInterfaceCallsign"
+                    placeholder="Enter callsign"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                />
+              </div>
+              <div class="flex-1">
+                <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Callsign ID Interval</label>
+                <input
+                    type="number"
+                    v-model="newInterfaceIDInterval"
+                    placeholder="Enter interval (seconds)"
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                />
+              </div>
+            </div>
+          </div>
+
+          <!--          Pipe Interface-->
+          <div v-if="newInterfaceType === 'PipeInterface'" class="mb-2">
+              <span class="text-sm text-gray-500 dark:text-zinc-300 mb-3">
+              ⓘ             Using this interface, Reticulum can use any program as an interface via stdin and stdout. This can be used
+            to easily create virtual interfaces, or to interface with custom hardware or other systems.
+            </span>
+            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Command</label>
+            <input type="text" placeholder="netcat -l 5757" v-model="newInterfaceCommand"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+
+            <label class="block mt-2 text-sm font-medium text-gray-900 dark:text-zinc-100">Respawn Delay
+              (seconds)</label>
+            <input type="number" placeholder="5" v-model="newInterfaceRespawnDelay"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+
+          </div>
+
+          <!-- Shared interface setings -->
+          <div v-if="newInterfaceType"
+               @click="toggleSharedInterfaceSettings"
+               class="flex items-center justify-between cursor-pointer p-2 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700"
+          >
+            <span class="font-semibold text-gray-900 dark:text-gray-100">Shared Interface Settings</span>
+            <span class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200 "
+                  :class="{ 'rotate-180': showSharedInterfaceSettings }"
+            >
+                            ▲
+                          </span>
+          </div>
+
+          <div
+              v-show="showSharedInterfaceSettings"
+              class="mt-3 space-y-4 p-4 border border-gray-200 rounded-lg bg-white dark:bg-zinc-900 dark:border-zinc-700"
+          >
+            <p class="text-sm text-gray-600 dark:text-gray-400">ⓘ These settings are optional.</p>
+            <div v-show="transportEnabled" class="mb-4">
+              <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Interface Mode</label>
+              <select
+                  v-model="sharedInterfaceSettings.mode"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+              >
+                <option value="full">Full</option>
+                <option value="gateway">Gateway</option>
+                <option value="access_point">Access Point</option>
+                <option value="roaming">Roaming</option>
+                <option value="boundary">Boundary</option>
+              </select>
+            </div>
+
+            <div class="mb-4">
+              <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Inferred Interface
+                Bitrate</label>
+              <input
+                  v-model="sharedInterfaceSettings.bitrate"
+                  type="number"
+                  placeholder="Enter inferred bitrate"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+              />
+            </div>
+
+            <div class="mb-4">
+              <h3 class="text-lg font-semibold text-gray-900 dark:text-zinc-100 mb-2">IFAC Settings</h3>
+              <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">ⓘ IFAC (Interface Access Code) settings are used
+                for creating
+                private
+                networks and can be configured on the interface level. </p>
+              <div class="grid grid-cols-3 gap-4">
+                <div>
+                  <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Network Name</label>
+                  <input
+                      v-model="sharedInterfaceSettings.network_name"
+                      type="text"
+                      placeholder="Enter network name"
+                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                  />
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">Passphrase</label>
+                  <input
+                      v-model="sharedInterfaceSettings.passphrase"
+                      type="text"
+                      placeholder="Enter passphrase"
+                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                  />
+                </div>
+                <div>
+                  <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">IFAC Size</label>
+                  <input
+                      v-model="sharedInterfaceSettings.ifac_size"
+                      type="number"
+                      min="8"
+                      max="512"
+                      placeholder="Enter size (8-512)"
+                      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
+                  />
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+
+
+        <!-- add button -->
+        <button @click="addInterface" type="button"
+                class="mb-4 bg-green-500 hover:bg-green-400 focus-visible:outline-green-500 my-auto inline-flex items-center gap-x-1 rounded-md p-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2  dark:text-white dark:focus:ring-blue-600 dark:focus:border-blue-600">
+          <span v-if="isEditingInterface">Save Interface</span>
+          <span v-else>Add Interface</span>
+        </button>
+      </div>
+
     </div>
+  </div>
 </template>
 
 <script>
@@ -176,202 +1025,534 @@ import Utils from "../../js/Utils";
 import DialogUtils from "../../js/DialogUtils";
 
 export default {
-    name: 'AddInterfacePage',
-    data() {
-        return {
+  name: 'AddInterfacePage',
+  data() {
+    return {
 
-            isEditingInterface: false,
-            config: null,
+      isEditingInterface: false,
+      showAllSettings: false, // more interface settings, used for TCPInterface and RNodeInterface
+      showSharedInterfaceSettings: false, // shared interface settings like IFAC, bitrate
+      showRNodeLoRaParameters: false, // accordion for displaying RNode physical LoRa parameters
+      showRNodeSubInterfaces: false, // accordion for adding multiple RNode interfaces
 
-            comports: [],
+      appInfo: null,
+      transportEnabled: false,
 
-            newInterfaceName: null,
-            newInterfaceType: null,
+      config: null,
 
-            newInterfaceTargetHost: null,
-            newInterfaceTargetPort: null,
+      comports: [],
 
-            newInterfaceListenIp: null,
-            newInterfaceListenPort: null,
+      newInterfaceName: null,
+      newInterfaceType: null,
 
-            newInterfaceForwardIp: null,
-            newInterfaceForwardPort: null,
+      newInterfaceGroupID: null,
+      newInterfaceMulticastAddressType: null,
+      newInterfaceDevices: null,
+      newInterfaceIgnoredDevices: null,
+      newInterfaceDiscoveryScope: null,
+      newInterfaceDiscoveryPort: null,
+      newInterfaceDataPort: null,
 
-            newInterfacePort: null,
-            newInterfaceFrequency: null,
-            newInterfaceBandwidth: null,
-            newInterfaceTxpower: null,
-            newInterfaceSpreadingFactor: null,
-            newInterfaceCodingRate: null,
+      newInterfaceTargetHost: null,
+      newInterfaceTargetPort: null,
 
-            RNodeInterfaceDefaults: {
-                // bandwidth in hz
-                bandwidths: [
-                    7800, // 7.8 kHz
-                    10400, // 10.4 kHz
-                    15600, // 15.6 kHz
-                    20800, // 20.8 kHz
-                    31250, // 31.25 kHz
-                    41700, // 41.7 kHz
-                    62500, // 62.5 kHz
-                    125000, // 125 kHz
-                    250000, // 250 kHz
-                    500000, // 500 kHz
-                    1625000, // 1625 kHz (for 2.4 GHz SX1280)
-                ],
-                codingrates: [
-                    5, // 4:5
-                    6, // 4:6
-                    7, // 4:7
-                    8, // 4:8
-                ],
-                spreadingfactors: [
-                    5,
-                    6,
-                    7,
-                    8,
-                    9,
-                    10,
-                    11,
-                    12,
-                ],
-            },
+      newInterfaceListenIp: null,
+      newInterfaceListenPort: null,
+      newInterfaceNetworkDevice: null,
+      newInterfacePreferIPV6: null,
+      newInterfaceKISSFramingEnabled: null,
+      newInterfaceI2PTunnelingEnabled: null,
 
-        };
+      sharedInterfaceSettings: {
+        "mode": null,
+        "network_name": null,
+        "passphrase": null,
+        "ifac_size": null,
+      },
+
+      newInterfaceForwardIp: null,
+      newInterfaceForwardPort: null,
+
+      I2PSettings: {
+        showPeerAccordion: false,
+        newInterfacePeers: [],
+      },
+
+      RNodeMultiInterface: {
+        port: null,
+        subInterfaces: [],
+      },
+
+      newInterfacePort: null,
+      RNodeGHzValue: 0,
+      RNodeMHzValue: 0,
+      RNodekHzValue: 0,
+      newInterfaceFrequency: null,
+      newInterfaceBandwidth: null,
+      newInterfaceTxpower: null,
+      newInterfaceSpreadingFactor: null,
+      newInterfaceCodingRate: null,
+
+      // Serial, KISS, and AX25KISS options
+      newInterfaceSpeed: null,
+      newInterfaceDatabits: null,
+      newInterfaceParity: null,
+      newInterfaceStopbits: null,
+
+      // KISS and AX25KISS
+      newInterfacePreamble: null,
+      newInterfaceTXTail: null,
+      newInterfacePersistence: null,
+      newInterfaceSlotTime: null,
+
+      // RNode and KISS
+      newInterfaceCallsign: null,
+      newInterfaceIDInterval: null,
+      newInterfaceFlowControl: null,
+      newInterfaceAirtimeLimitLong: null,
+      newInterfaceAirtimeLimitShort: null,
+
+      // Pipe interface
+      newInterfaceCommand: null,
+      newInterfaceRespawnDelay: null,
+
+      RNodeInterfaceDefaults: {
+        // bandwidth in hz
+        bandwidths: [
+          7800, // 7.8 kHz
+          10400, // 10.4 kHz
+          15600, // 15.6 kHz
+          20800, // 20.8 kHz
+          31250, // 31.25 kHz
+          41700, // 41.7 kHz
+          62500, // 62.5 kHz
+          125000, // 125 kHz
+          250000, // 250 kHz
+          500000, // 500 kHz
+          1625000, // 1625 kHz (for 2.4 GHz SX1280)
+        ],
+        codingrates: [
+          5, // 4:5
+          6, // 4:6
+          7, // 4:7
+          8, // 4:8
+        ],
+        spreadingfactors: [
+          5,
+          6,
+          7,
+          8,
+          9,
+          10,
+          11,
+          12,
+        ],
+      },
+      RNodeInterfaceLoRaParameters: {
+        antennaGain: 0,
+        noiseFloor: 5,
+        sensitivity: null,
+        dataRate: null,
+        linkBudget: null,
+      },
+    };
+  },
+  computed: {
+    formattedFrequency() {
+      const totalHz = this.calculateFrequencyInHz();
+      if (totalHz >= 1e9) {
+        return `${(totalHz / 1e9).toFixed(3)} GHz`;
+      } else if (totalHz >= 1e6) {
+        return `${(totalHz / 1e6).toFixed(3)} MHz`;
+      } else if (totalHz >= 1e3) {
+        return `${(totalHz / 1e3).toFixed(3)} kHz`;
+      }
+      return `${totalHz} Hz`;
     },
-    mounted() {
+  },
+  watch: {
+    newInterfaceBandwidth: "updateRNodeCalculations",
+    newInterfaceSpreadingFactor: "updateRNodeCalculations",
+    newInterfaceCodingRate: "updateRNodeCalculations",
+    newInterfaceTxpower: "updateRNodeCalculations",
+    'RNodeInterfaceLoRaParameters.antennaGain': "updateRNodeCalculations",
+  },
+  mounted() {
+    this.getAppInfo();
+    this.getConfig();
+    this.loadComports();
 
-        this.getConfig();
-        this.loadComports();
+    // check if we are editing an interface
+    const interfaceName = this.$route.query.interface_name;
+    if (interfaceName != null) {
+      this.isEditingInterface = true;
+      this.loadInterfaceToEdit(interfaceName);
+    }
 
-        // check if we are editing an interface
-        const interfaceName = this.$route.query.interface_name;
-        if(interfaceName != null){
-            this.isEditingInterface = true;
-            this.loadInterfaceToEdit(interfaceName);
+  },
+  methods: {
+    async getConfig() {
+      try {
+        const response = await window.axios.get(`/api/v1/config`);
+        this.config = response.data.config;
+      } catch (e) {
+        // do nothing if failed to load config
+        console.log(e);
+      }
+    },
+    async updateConfig(config) {
+      try {
+        const response = await window.axios.patch("/api/v1/config", config);
+        this.config = response.data.config;
+      } catch (e) {
+        alert("Failed to save config!");
+        console.log(e);
+      }
+    },
+    async loadComports() {
+      try {
+        const response = await window.axios.get(`/api/v1/comports`);
+        this.comports = response.data.comports;
+      } catch (e) {
+        // do nothing if failed to load interfaces
+      }
+    },
+    async loadInterfaceToEdit(interfaceName) {
+      try {
+
+        // fetch interfaces
+        const response = await window.axios.get(`/api/v1/reticulum/interfaces`);
+        const interfaces = response.data.interfaces;
+
+        // find interface, else show error and redirect to interfaces
+        const iface = interfaces[interfaceName];
+        if (!iface) {
+          DialogUtils.alert("The selected interface for editing could not be found.");
+          this.$router.push({
+            "name": "interfaces",
+          });
+          return;
         }
 
+        // set form values
+        this.newInterfaceName = interfaceName;
+        this.newInterfaceType = iface.type;
+
+        // AutoInterface additional settings
+        this.newInterfaceGroupID = iface.group_id;
+        this.newInterfaceMulticastAddressType = iface.multicast_address_type;
+        this.newInterfaceDevices = iface.devices;
+        this.newInterfaceIgnoredDevices = iface.ignored_devices;
+        this.newInterfaceDiscoveryScope = iface.discovery_scope;
+        this.newInterfaceDiscoveryPort = iface.discovery_port;
+        this.newInterfaceDataPort = iface.data_port;
+
+        // tcp client interface
+        this.newInterfaceTargetHost = iface.target_host;
+        this.newInterfaceTargetPort = iface.target_port;
+
+        if (iface.kiss_framing) {
+          this.newInterfaceKISSFramingEnabled = true;
+        }
+        if (iface.i2p_tunneled) {
+          this.newInterfaceI2PTunnelingEnabled = true;
+        }
+        if (iface.prefer_ipv6) {
+          this.newInterfacePreferIPV6 = true;
+        }
+
+
+        // tcp server interface & udp interface
+        this.newInterfaceNetworkDevice = iface.device;
+        this.newInterfaceListenIp = iface.listen_ip;
+        this.newInterfaceListenPort = iface.listen_port;
+
+        // I2P Interface
+        if (iface.peers) {
+          const peerstoAdd = iface.peers.split(',');
+          for (const address of peerstoAdd) {
+            this.addI2PPeer(address);
+          }
+        }
+
+
+        // udp interface
+        this.newInterfaceForwardIp = iface.forward_ip;
+        this.newInterfaceForwardPort = iface.forward_port;
+
+        // Port (For RNode, Serial, and KISS)
+        this.newInterfacePort = iface.port;
+
+        // RNode Interface
+        this.newInterfaceFrequency = iface.frequency;
+        this.RNodeGHzValue = Math.floor(iface.frequency / 1e9);
+        this.RNodeMHzValue = Math.floor((iface.frequency % 1e9) / 1e6);
+        this.RNodekHzValue = Math.floor((iface.frequency % 1e6) / 1e3);
+        this.newInterfaceBandwidth = iface.bandwidth;
+        this.newInterfaceTxpower = iface.txpower;
+        this.newInterfaceSpreadingFactor = iface.spreadingfactor;
+        this.newInterfaceCodingRate = iface.codingrate;
+
+        // RNode Multi Interface
+        this.RNodeMultiInterface.subInterfaces = iface.sub_interfaces;
+
+        // Serial, KISS, and AX25KISS
+        this.newInterfaceSpeed = iface.speed;
+        this.newInterfaceDatabits = iface.databits;
+        this.newInterfaceParity = iface.parity;
+        this.newInterfaceStopbits = iface.stopbits;
+
+        this.newInterfacePreamble = iface.preamble;
+        this.newInterfaceTXTail = iface.txtail;
+        this.newInterfacePersistence = iface.persistence;
+        this.newInterfaceSlotTime = iface.slottime;
+
+        this.newInterfaceCallsign = iface.callsign;
+        this.newInterfaceIDInterval = iface.id_interval;
+        this.newInterfaceSSID = iface.ssid;
+
+        // Airtime limit
+        this.newInterfaceAirtimeLimitLong = iface.airtime_limit_long;
+        this.newInterfaceAirtimeLimitShort = iface.airtime_limit_short;
+
+        // Pipe Interface
+        this.newInterfaceCommand = iface.command;
+        this.newInterfaceRespawnDelay = iface.respawn_delay;
+
+        // Shared interface settings
+        this.sharedInterfaceSettings.mode = iface.mode;
+        this.sharedInterfaceSettings.bitrate = iface.bitrate;
+        this.sharedInterfaceSettings.network_name = iface.network_name;
+        this.sharedInterfaceSettings.passphrase = iface.passphrase;
+        this.sharedInterfaceSettings.ifac_size = iface.ifac_size;
+
+      } catch (e) {
+        // do nothing if failed to load interfaces
+      }
     },
-    methods: {
-        async getConfig() {
-            try {
-                const response = await window.axios.get(`/api/v1/config`);
-                this.config = response.data.config;
-            } catch(e) {
-                // do nothing if failed to load config
-                console.log(e);
-            }
-        },
-        async updateConfig(config) {
-            try {
-                const response = await window.axios.patch("/api/v1/config", config);
-                this.config = response.data.config;
-            } catch(e) {
-                alert("Failed to save config!");
-                console.log(e);
-            }
-        },
-        async loadComports() {
-            try {
-                const response = await window.axios.get(`/api/v1/comports`);
-                this.comports = response.data.comports;
-            } catch(e) {
-                // do nothing if failed to load interfaces
-            }
-        },
-        async loadInterfaceToEdit(interfaceName) {
-            try {
+    async addInterface() {
+      try {
+        let subInterfacesData = null;
+        if (this.newInterfaceType === 'RNodeMultiInterface') {
+          subInterfacesData = this.RNodeMultiInterface.subInterfaces.map(s => ({
+            name: s.name,
+            frequency: s.frequency,
+            bandwidth: s.bandwidth,
+            txpower: s.txpower,
+            spreadingfactor: s.spreadingfactor,
+            codingrate: s.codingrate,
+            vport: s.vport
+          }));
+        }
+        // add interface
+        const response = await window.axios.post(`/api/v1/reticulum/interfaces/add`, {
+          allow_overwriting_interface: this.isEditingInterface,
+          // required values
+          name: this.newInterfaceName,
+          type: this.newInterfaceType,
 
-                // fetch interfaces
-                const response = await window.axios.get(`/api/v1/reticulum/interfaces`);
-                const interfaces = response.data.interfaces;
+          // AutoInterface
+          group_id: this.newInterfaceGroupID,
+          multicast_address_type: this.newInterfaceMulticastAddressType,
+          devices: this.newInterfaceDevices,
+          ignored_devices: this.newInterfaceIgnoredDevices,
+          discovery_scope: this.newInterfaceDiscoveryScope,
+          discovery_port:  this.newInterfaceDiscoveryPort,
+          data_port:       this.newInterfaceDataPort,
 
-                // find interface, else show error and redirect to interfaces
-                const iface = interfaces[interfaceName];
-                if(!iface){
-                    DialogUtils.alert("The selected interface for editing could not be found.");
-                    this.$router.push({
-                        "name": "interfaces",
-                    });
-                    return;
-                }
+          // tcp client interface
+          target_host: this.newInterfaceTargetHost,
+          target_port: this.newInterfaceTargetPort,
 
-                // set form values
-                this.newInterfaceName = interfaceName;
-                this.newInterfaceType = iface.type;
+          // TCP Client & Server interface
+          kiss_framing: this.newInterfaceKISSFramingEnabled,
+          i2p_tunneled: this.newInterfaceI2PTunnelingEnabled,
 
-                // tcp client interface
-                this.newInterfaceTargetHost = iface.target_host;
-                this.newInterfaceTargetPort = iface.target_port;
+          // tcp server interface & udp interface
+          listen_ip: this.newInterfaceListenIp,
+          listen_port: this.newInterfaceListenPort,
+          device: this.newInterfaceNetworkDevice,
+          prefer_ipv6: this.newInterfacePreferIPV6,
 
-                // tcp server interface & udp interface
-                this.newInterfaceListenIp = iface.listen_ip;
-                this.newInterfaceListenPort = iface.listen_port;
 
-                // udp interface
-                this.newInterfaceForwardIp = iface.forward_ip;
-                this.newInterfaceForwardPort = iface.forward_port;
+          // udp interface
+          forward_ip: this.newInterfaceForwardIp,
+          forward_port: this.newInterfaceForwardPort,
+          //  I2P Interface
+          peers: this.I2PSettings.newInterfacePeers.join(','),
+          // rnode interface
+          port: this.newInterfacePort,
+          frequency: this.calculateFrequencyInHz(),
+          bandwidth: this.newInterfaceBandwidth,
+          txpower: this.newInterfaceTxpower,
+          spreadingfactor: this.newInterfaceSpreadingFactor,
+          codingrate: this.newInterfaceCodingRate,
 
-                // rnode interface
-                this.newInterfacePort = iface.port;
-                this.newInterfaceFrequency = iface.frequency;
-                this.newInterfaceBandwidth = iface.bandwidth;
-                this.newInterfaceTxpower = iface.txpower;
-                this.newInterfaceSpreadingFactor = iface.spreadingfactor;
-                this.newInterfaceCodingRate = iface.codingrate;
+          // RNode Multi Interface
+          sub_interfaces: subInterfacesData,
 
-            } catch(e) {
-                // do nothing if failed to load interfaces
-            }
-        },
-        async addInterface() {
+          // Seiral, KISS, and AX25KISS
+          speed: this.newInterfaceSpeed,
+          databits: this.newInterfaceDatabits,
+          parity: this.newInterfaceParity,
+          stopbits: this.newInterfaceStopbits,
 
-            try {
+          // KISS and AX25KISS
+          preamble: this.newInterfacePreamble,
+          txtail: this.newInterfaceTXTail,
+          persistence: this.newInterfacePersistence,
+          slottime: this.newInterfaceSlotTime,
 
-                // add interface
-                const response = await window.axios.post(`/api/v1/reticulum/interfaces/add`, {
-                    allow_overwriting_interface: this.isEditingInterface,
-                    // required values
-                    name: this.newInterfaceName,
-                    type: this.newInterfaceType,
-                    // tcp client interface
-                    target_host: this.newInterfaceTargetHost,
-                    target_port: this.newInterfaceTargetPort,
-                    // tcp server interface & udp interface
-                    listen_ip: this.newInterfaceListenIp,
-                    listen_port: this.newInterfaceListenPort,
-                    // udp interface
-                    forward_ip: this.newInterfaceForwardIp,
-                    forward_port: this.newInterfaceForwardPort,
-                    // rnode interface
-                    port: this.newInterfacePort,
-                    frequency: this.newInterfaceFrequency,
-                    bandwidth: this.newInterfaceBandwidth,
-                    txpower: this.newInterfaceTxpower,
-                    spreadingfactor: this.newInterfaceSpreadingFactor,
-                    codingrate: this.newInterfaceCodingRate,
-                });
+          callsign: this.newInterfaceCallsign,
+          id_interval: this.newInterfaceIDInterval,
+          ssid: this.newInterfaceSSID,
 
-                // show success message
-                if(response.data.message){
-                    DialogUtils.alert(response.data.message);
-                }
+          // Pipe interface
+          command: this.newInterfaceCommand,
+          respawn_delay: this.newInterfaceRespawnDelay,
 
-                // go to interfaces page
-                this.$router.push({
-                    name: "interfaces",
-                });
+          // Airtime limit
+          airtime_limit_long: this.newInterfaceAirtimeLimitLong,
+          airtime_limit_short: this.newInterfaceAirtimeLimitShort,
 
-            } catch(e) {
-                const message = e.response?.data?.message ?? "failed to add interface";
-                DialogUtils.alert(message);
-                console.log(e);
-            }
+          // Shared interface settings
+          mode: this.sharedInterfaceSettings.mode,
+          bitrate: this.sharedInterfaceSettings.bitrate,
+          network_name: this.sharedInterfaceSettings.network_name,
+          passphrase: this.sharedInterfaceSettings.passphrase,
+          ifac_size: this.sharedInterfaceSettings.ifac_size,
+
+
+        });
+
+        // show success message
+        if (response.data.message) {
+          DialogUtils.alert(response.data.message);
+        }
+
+        // go to interfaces page
+        this.$router.push({
+          name: "interfaces",
+        });
+
+      } catch (e) {
+        const message = e.response?.data?.message ?? "failed to add interface";
+        DialogUtils.alert(message);
+        console.log(e);
+      }
 
-        },
-        formatFrequency(hz) {
-            return Utils.formatFrequency(hz);
-        },
     },
+    formatFrequency(hz) {
+      return Utils.formatFrequency(hz);
+    },
+    calculateFrequencyInHz() {
+      const ghzToHz = this.RNodeGHzValue * 1e9;
+      const mhzToHz = this.RNodeMHzValue * 1e6;
+      const khzToHz = this.RNodekHzValue * 1e3;
+      return ghzToHz + mhzToHz + khzToHz;
+    },
+    updateRNodeCalculations() {
+      this.calculateRNodeParameters(
+          this.newInterfaceBandwidth,
+          this.newInterfaceSpreadingFactor,
+          this.newInterfaceCodingRate,
+          this.RNodeInterfaceLoRaParameters.noiseFloor,
+          this.RNodeInterfaceLoRaParameters.antennaGain,
+          this.newInterfaceTxpower
+      );
+    },
+    calculateRNodeParameters(bandwidth, spreadingFactor, codingRate, noiseFloor, antennaGain, transmitPower) {
+      // https://unsigned.io/understanding-lora-parameters/
+      // "SX1272/3/6/7/8 LoRa Modem Design Guide" https://www.openhacks.com/uploadsproductos/loradesignguide_std.pdf
+      // 4:5 - 4:8
+      const crn = {
+        5: 1,
+        6: 2,
+        7: 3,
+        8: 4,
+      };
+
+      codingRate = crn[codingRate];
+
+      const sfn = {
+        5: -2.5,
+        6: -5,
+        7: -7.5,
+        8: -10,
+        9: -12.5,
+        10: -15,
+        11: -17.5,
+        12: -20
+      };
+
+      let dataRate = spreadingFactor * ((4 / (4 + codingRate)) / (Math.pow(2, spreadingFactor) / (bandwidth / 1000))) * 1000
+
+      let sensitivity = -174 + 10 * Math.log10(bandwidth) + noiseFloor + (sfn[spreadingFactor] || 0);
+
+      if (bandwidth === 203125 || bandwidth === 406250 || bandwidth > 500000) {
+        sensitivity = -165.6 + 10 * Math.log10(bandwidth) + noiseFloor + (sfn[spreadingFactor] || 0);
+      }
+
+      let linkBudget = (transmitPower - sensitivity) + antennaGain;
+      this.RNodeInterfaceLoRaParameters.dataRate = dataRate < 1000
+          ? `${dataRate.toFixed(0)} bps`
+          : `${(dataRate / 1000).toFixed(2)} kbps`;
+      this.RNodeInterfaceLoRaParameters.linkBudget = `${linkBudget.toFixed(1)} dB`;
+      this.RNodeInterfaceLoRaParameters.sensitivity = `${sensitivity.toFixed(1)} dBm`;
+    },
+
+
+    toggleI2PPeerAccordion() {
+      this.I2PSettings.showPeerAccordion = !this.I2PSettings.showPeerAccordion;
+    },
+    addI2PPeer(address = "") {
+      this.I2PSettings.newInterfacePeers.push(address);
+    },
+    removeI2PPeer(index) {
+      this.I2PSettings.newInterfacePeers.splice(index, 1);
+    },
+    toggleAllSettings() {
+      this.showAllSettings = !this.showAllSettings;
+    },
+    toggleSharedInterfaceSettings() {
+      this.showSharedInterfaceSettings = !this.showSharedInterfaceSettings;
+    },
+    toggleRNodeLoRaParameters() {
+      this.showRNodeLoRaParameters = !this.showRNodeLoRaParameters;
+    },
+    toggleRNodeSubInterfaces() {
+      this.showRNodeSubInterfaces = !this.showRNodeSubInterfaces;
+    },
+    addSubInterface() {
+      this.RNodeMultiInterface.subInterfaces.push({
+        name: '',
+        frequency: null,
+        bandwidth: null,
+        txpower: null,
+        spreadingfactor: null,
+        codingrate: null,
+        vport: null
+      });
+    },
+    useKISSAX25() {
+      if (this.newInterfaceType === 'AX25KISSInterface') {
+        this.newInterfaceType = "KISSInterface";
+      } else {
+        this.newInterfaceType = 'AX25KISSInterface';
+      }
+    },
+    removeSubInterface(idx) {
+      this.RNodeMultiInterface.subInterfaces.splice(idx, 1);
+    },
+    async getAppInfo() {
+      try {
+        const response = await window.axios.get("/api/v1/app/info");
+        this.appInfo = response.data.app_info;
+        this.transportEnabled = this.appInfo.is_transport_enabled;
+      } catch (e) {
+        console.log(e);
+      }
+    },
+  },
 }
 </script>
diff --git a/src/frontend/components/interfaces/Interface.vue b/src/frontend/components/interfaces/Interface.vue
index 5aff14a..5eafded 100644
--- a/src/frontend/components/interfaces/Interface.vue
+++ b/src/frontend/components/interfaces/Interface.vue
@@ -36,6 +36,14 @@
                     <path d="M252.44,121.34l-48-32A8,8,0,0,0,192,96v24H72V72h33a32,32,0,1,0,0-16H72A16,16,0,0,0,56,72v48H8a8,8,0,0,0,0,16H56v48a16,16,0,0,0,16,16h32v8a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16V176a16,16,0,0,0-16-16H120a16,16,0,0,0-16,16v8H72V136H192v24a8,8,0,0,0,12.44,6.66l48-32a8,8,0,0,0,0-13.32ZM136,48a16,16,0,1,1-16,16A16,16,0,0,1,136,48ZM120,176h32v32H120Zm88-30.95V111l25.58,17Z"></path>
                 </svg>
 
+                <svg v-else-if="iface.type === 'RNodeMultiInterface'" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="size-6 dark:text-white"><path d="M128,88a40,40,0,1,0,40,40A40,40,0,0,0,128,88Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,152Zm73.71,7.14a80,80,0,0,1-14.08,22.2,8,8,0,0,1-11.92-10.67,63.95,63.95,0,0,0,0-85.33,8,8,0,1,1,11.92-10.67,80.08,80.08,0,0,1,14.08,84.47ZM69,103.09a64,64,0,0,0,11.26,67.58,8,8,0,0,1-11.92,10.67,79.93,79.93,0,0,1,0-106.67A8,8,0,1,1,80.29,85.34,63.77,63.77,0,0,0,69,103.09ZM248,128a119.58,119.58,0,0,1-34.29,84,8,8,0,1,1-11.42-11.2,103.9,103.9,0,0,0,0-145.56A8,8,0,1,1,213.71,44,119.58,119.58,0,0,1,248,128ZM53.71,200.78A8,8,0,1,1,42.29,212a119.87,119.87,0,0,1,0-168,8,8,0,1,1,11.42,11.2,103.9,103.9,0,0,0,0,145.56Z"></path></svg>
+
+                <svg v-else-if="iface.type === 'I2PInterface'" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="size-6 dark:text-white"><path d="M72,92A12,12,0,1,1,60,80,12,12,0,0,1,72,92Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,128,80Zm68,24a12,12,0,1,0-12-12A12,12,0,0,0,196,104ZM60,152a12,12,0,1,0,12,12A12,12,0,0,0,60,152Zm68,0a12,12,0,1,0,12,12A12,12,0,0,0,128,152Zm68,0a12,12,0,1,0,12,12A12,12,0,0,0,196,152Z"></path></svg>
+
+                <svg v-else-if="iface.type === 'KISSInterface' || iface.type === 'AX25KISSInterface'" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="size-6 dark:text-white"><path d="M104,168a8,8,0,0,1-8,8H64a8,8,0,0,1,0-16H96A8,8,0,0,1,104,168Zm-8-40H64a8,8,0,0,0,0,16H96a8,8,0,0,0,0-16Zm0-32H64a8,8,0,0,0,0,16H96a8,8,0,0,0,0-16ZM232,80V192a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V72a8,8,0,0,1,5.7-7.66l160-48a8,8,0,0,1,4.6,15.33L86.51,64H216A16,16,0,0,1,232,80ZM216,192V80H40V192H216Zm-16-56a40,40,0,1,1-40-40A40,40,0,0,1,200,136Zm-16,0a24,24,0,1,0-24,24A24,24,0,0,0,184,136Z"></path></svg>
+
+                <svg v-else-if="iface.type === 'PipeInterface'" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="size-6 dark:text-white"><path d="M128,128a8,8,0,0,1-3,6.25l-40,32a8,8,0,1,1-10-12.5L107.19,128,75,102.25a8,8,0,1,1,10-12.5l40,32A8,8,0,0,1,128,128Zm48,24H136a8,8,0,0,0,0,16h40a8,8,0,0,0,0-16Zm56-96V200a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56ZM216,200V56H40V200H216Z"></path></svg>
+
                 <svg v-else xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256" class="size-6 dark:text-white">
                     <path d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path>
                 </svg>
@@ -186,6 +194,10 @@
             <div>• Bitrate: {{ formatBitsPerSecond(iface._stats?.bitrate ?? 0) }}</div>
             <div>• TX: {{ formatBytes(iface._stats?.txb ?? 0) }}</div>
             <div>• RX: {{ formatBytes(iface._stats?.rxb ?? 0) }}</div>
+            <div v-if="iface.type === 'RNodeInterface'">• Noise Floor: {{
+                iface._stats?.noise_floor
+              }} dBm
+            </div>
             <div v-if="iface._stats?.clients">• Clients: {{ iface._stats?.clients }}</div>
 
         </div>
diff --git a/src/frontend/components/interfaces/InterfacesPage.vue b/src/frontend/components/interfaces/InterfacesPage.vue
index c25c890..52d3f8f 100644
--- a/src/frontend/components/interfaces/InterfacesPage.vue
+++ b/src/frontend/components/interfaces/InterfacesPage.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px] dark:bg-zinc-950">
-        <div class="overflow-y-auto p-2 space-y-2">
+        <div class="h-full  p-2 space-y-2">
 
             <!-- warning - keeping orange-500 for warning visibility in both modes -->
             <div class="flex bg-orange-500 p-2 text-sm font-semibold leading-6 text-white rounded shadow">
diff --git a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
index c806642..9f4feeb 100644
--- a/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
+++ b/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
@@ -69,7 +69,7 @@
                 </div>
                 <div class="my-auto">Loading {{ nodePageProgress }}%</div>
             </div>
-            <pre v-else v-html="nodePageContent" class="h-full text-wrap"></pre>
+            <pre v-else v-html="nodePageContent" class="h-full break-words whitespace-pre-wrap"></pre>
         </div>
 
         <!-- file download bottom bar -->
diff --git a/src/frontend/js/Utils.js b/src/frontend/js/Utils.js
index f63c9f3..4c8ca37 100644
--- a/src/frontend/js/Utils.js
+++ b/src/frontend/js/Utils.js
@@ -143,6 +143,10 @@ class Utils {
 
     static isInterfaceEnabled(iface) {
         const rawValue = iface.enabled ?? iface.interface_enabled;
+        if (rawValue === true) {
+            // when enabled or interface_enabled is True it needs to return true.
+            return true;
+        }
         const value = rawValue?.toLowerCase();
         return value === "on" || value === "yes" || value === "true";
     }