diff --git a/meshchat.py b/meshchat.py
index 3ed2e6a..f63d06a 100644
--- a/meshchat.py
+++ b/meshchat.py
@@ -26,6 +26,7 @@ from src.backend.announce_handler import AnnounceHandler
 from src.backend.async_utils import AsyncUtils
 from src.backend.colour_utils import ColourUtils
 from src.backend.interface_config_parser import InterfaceConfigParser
+from src.backend.interface_editor import InterfaceEditor
 from src.backend.lxmf_message_fields import LxmfImageField, LxmfFileAttachmentsField, LxmfFileAttachment, LxmfAudioField
 from src.backend.audio_call_manager import AudioCall, AudioCallManager
 from src.backend.sideband_commands import SidebandCommands
@@ -329,8 +330,29 @@ 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,94 +465,178 @@ class ReticulumMeshChat:
             if "enabled" not in interface_details and "interface_enabled" not in interface_details:
                 interface_details["interface_enabled"] = "true"
 
-            # handle tcp client interface
+            # handle AutoInterface
+            if interface_type == "AutoInterface":
+
+                # set optional AutoInterface options
+                InterfaceEditor.update_value(interface_details, data, "group_id")
+                InterfaceEditor.update_value(interface_details, data, "multicast_address_type")
+                InterfaceEditor.update_value(interface_details, data, "devices")
+                InterfaceEditor.update_value(interface_details, data, "ignored_devices")
+                InterfaceEditor.update_value(interface_details, data, "discovery_scope")
+                InterfaceEditor.update_value(interface_details, data, "discovery_port")
+                InterfaceEditor.update_value(interface_details, data, "data_port")
+
+            # handle TCPClientInterface
             if interface_type == "TCPClientInterface":
 
-                interface_target_host = data.get('target_host')
-                interface_target_port = data.get('target_port')
-
                 # ensure target host provided
+                interface_target_host = data.get('target_host')
                 if interface_target_host is None or interface_target_host == "":
                     return web.json_response({
                         "message": "Target Host is required",
                     }, status=422)
 
                 # ensure target port provided
+                interface_target_port = data.get('target_port')
                 if interface_target_port is None or interface_target_port == "":
                     return web.json_response({
                         "message": "Target Port is required",
                     }, status=422)
 
-                interface_details["target_host"] = data.get('target_host')
-                interface_details["target_port"] = data.get('target_port')
+                # set required TCPClientInterface options
+                interface_details["target_host"] = interface_target_host
+                interface_details["target_port"] = interface_target_port
+
+                # set optional TCPClientInterface options
+                InterfaceEditor.update_value(interface_details, data, "kiss_framing")
+                InterfaceEditor.update_value(interface_details, data, "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":
 
-                interface_listen_ip = data.get('listen_ip')
-                interface_listen_port = data.get('listen_port')
-
                 # ensure listen ip provided
+                interface_listen_ip = data.get('listen_ip')
                 if interface_listen_ip is None or interface_listen_ip == "":
                     return web.json_response({
                         "message": "Listen IP is required",
                     }, status=422)
 
                 # ensure listen port provided
+                interface_listen_port = data.get('listen_port')
                 if interface_listen_port is None or interface_listen_port == "":
                     return web.json_response({
                         "message": "Listen Port is required",
                     }, status=422)
 
-                interface_details["listen_ip"] = data.get('listen_ip')
-                interface_details["listen_port"] = data.get('listen_port')
+                # set required TCPServerInterface options
+                interface_details["listen_ip"] = interface_listen_ip
+                interface_details["listen_port"] = interface_listen_port
+
+                # set optional TCPServerInterface options
+                InterfaceEditor.update_value(interface_details, data, "device")
+                InterfaceEditor.update_value(interface_details, data, "prefer_ipv6")
 
             # handle udp interface
             if interface_type == "UDPInterface":
 
-                interface_listen_ip = data.get('listen_ip')
-                interface_listen_port = data.get('listen_port')
-                interface_forward_ip = data.get('forward_ip')
-                interface_forward_port = data.get('forward_port')
-
                 # ensure listen ip provided
+                interface_listen_ip = data.get('listen_ip')
                 if interface_listen_ip is None or interface_listen_ip == "":
                     return web.json_response({
                         "message": "Listen IP is required",
                     }, status=422)
 
                 # ensure listen port provided
+                interface_listen_port = data.get('listen_port')
                 if interface_listen_port is None or interface_listen_port == "":
                     return web.json_response({
                         "message": "Listen Port is required",
                     }, status=422)
 
                 # ensure forward ip provided
+                interface_forward_ip = data.get('forward_ip')
                 if interface_forward_ip is None or interface_forward_ip == "":
                     return web.json_response({
                         "message": "Forward IP is required",
                     }, status=422)
 
                 # ensure forward port provided
+                interface_forward_port = data.get('forward_port')
                 if interface_forward_port is None or interface_forward_port == "":
                     return web.json_response({
                         "message": "Forward Port is required",
                     }, status=422)
 
-                interface_details["listen_ip"] = data.get('listen_ip')
-                interface_details["listen_port"] = data.get('listen_port')
-                interface_details["forward_ip"] = data.get('forward_ip')
-                interface_details["forward_port"] = data.get('forward_port')
+                # set required UDPInterface options
+                interface_details["listen_ip"] = interface_listen_ip
+                interface_details["listen_port"] = interface_listen_port
+                interface_details["forward_ip"] = interface_forward_ip
+                interface_details["forward_port"] = interface_forward_port
 
-            # handle rnode interface
+                # set optional UDPInterface options
+                InterfaceEditor.update_value(interface_details, data, "device")
+
+            # handle RNodeInterface
             if interface_type == "RNodeInterface":
 
+                # ensure port provided
                 interface_port = data.get('port')
+                if interface_port is None or interface_port == "":
+                    return web.json_response({
+                        "message": "Port is required",
+                    }, status=422)
+
+                # ensure frequency provided
                 interface_frequency = data.get('frequency')
+                if interface_frequency is None or interface_frequency == "":
+                    return web.json_response({
+                        "message": "Frequency is required",
+                    }, status=422)
+
+                # ensure bandwidth provided
                 interface_bandwidth = data.get('bandwidth')
+                if interface_bandwidth is None or interface_bandwidth == "":
+                    return web.json_response({
+                        "message": "Bandwidth is required",
+                    }, status=422)
+
+                # ensure txpower provided
                 interface_txpower = data.get('txpower')
+                if interface_txpower is None or interface_txpower == "":
+                    return web.json_response({
+                        "message": "TX power is required",
+                    }, status=422)
+
+                # ensure spreading factor provided
                 interface_spreadingfactor = data.get('spreadingfactor')
+                if interface_spreadingfactor is None or interface_spreadingfactor == "":
+                    return web.json_response({
+                        "message": "Spreading Factor is required",
+                    }, status=422)
+
+                # ensure coding rate provided
                 interface_codingrate = data.get('codingrate')
+                if interface_codingrate is None or interface_codingrate == "":
+                    return web.json_response({
+                        "message": "Coding Rate is required",
+                    }, status=422)
+
+                # set required RNodeInterface options
+                interface_details["port"] = interface_port
+                interface_details["frequency"] = interface_frequency
+                interface_details["bandwidth"] = interface_bandwidth
+                interface_details["txpower"] = interface_txpower
+                interface_details["spreadingfactor"] = interface_spreadingfactor
+                interface_details["codingrate"] = interface_codingrate
+
+                # set optional RNodeInterface options
+                InterfaceEditor.update_value(interface_details, data, "callsign")
+                InterfaceEditor.update_value(interface_details, data, "id_interval")
+                InterfaceEditor.update_value(interface_details, data, "airtime_limit_long")
+                InterfaceEditor.update_value(interface_details, data, "airtime_limit_short")
+
+            # handle RNodeMultiInterface
+            if interface_type == "RNodeMultiInterface":
+
+                # required settings
+                interface_port = data.get("port")
+                sub_interfaces = data.get("sub_interfaces", [])
 
                 # ensure port provided
                 if interface_port is None or interface_port == "":
@@ -538,42 +644,114 @@ class ReticulumMeshChat:
                         "message": "Port is required",
                     }, status=422)
 
-                # ensure frequency provided
-                if interface_frequency is None or interface_frequency == "":
+                # ensure sub interfaces provided
+                if not isinstance(sub_interfaces, list) or not sub_interfaces:
                     return web.json_response({
-                        "message": "Frequency is required",
-                    }, status=422)
-
-                # ensure bandwidth provided
-                if interface_bandwidth is None or interface_bandwidth == "":
-                    return web.json_response({
-                        "message": "Bandwidth is required",
-                    }, status=422)
-
-                # ensure txpower provided
-                if interface_txpower is None or interface_txpower == "":
-                    return web.json_response({
-                        "message": "TX power is required",
-                    }, status=422)
-
-                # ensure spreading factor provided
-                if interface_spreadingfactor is None or interface_spreadingfactor == "":
-                    return web.json_response({
-                        "message": "Spreading Factor is required",
-                    }, status=422)
-
-                # ensure coding rate provided
-                if interface_codingrate is None or interface_codingrate == "":
-                    return web.json_response({
-                        "message": "Coding Rate is required",
+                        "message": "At least one sub-interface is required",
                     }, status=422)
 
+                # set required RNodeMultiInterface options
                 interface_details["port"] = interface_port
-                interface_details["frequency"] = interface_frequency
-                interface_details["bandwidth"] = interface_bandwidth
-                interface_details["txpower"] = interface_txpower
-                interface_details["spreadingfactor"] = interface_spreadingfactor
-                interface_details["codingrate"] = interface_codingrate
+
+                # remove any existing sub interfaces, which can be found by finding keys that contain a dict value
+                # this allows us to replace all sub interfaces with the ones we are about to add, while also ensuring
+                # that we do not remove any existing config values from the main interface config
+                for key in interface_details:
+                    value = interface_details[key]
+                    if isinstance(value, dict):
+                        del interface_details[key]
+
+                # process each provided sub interface
+                for idx, sub_interface in enumerate(sub_interfaces):
+
+                    # ensure required fields for sub-interface provided
+                    missing_fields = []
+                    required_subinterface_fields = ["name", "frequency", "bandwidth", "txpower", "spreadingfactor", "codingrate", "vport"]
+                    for field in required_subinterface_fields:
+                        if field not in sub_interface or sub_interface.get(field) is None or sub_interface.get(field) == "":
+                            missing_fields.append(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_interface.get("name")
+                    interface_details[sub_interface_name] = {
+                        "interface_enabled": "true",
+                        "frequency": int(sub_interface["frequency"]),
+                        "bandwidth": int(sub_interface["bandwidth"]),
+                        "txpower": int(sub_interface["txpower"]),
+                        "spreadingfactor": int(sub_interface["spreadingfactor"]),
+                        "codingrate": int(sub_interface["codingrate"]),
+                        "vport": int(sub_interface["vport"]),
+                    }
+
+                interfaces[interface_name] = interface_details
+
+            # handle SerialInterface, KISSInterface, and AX25KISSInterface
+            if interface_type == "SerialInterface" or interface_type == "KISSInterface" or interface_type == "AX25KISSInterface":
+
+                # ensure port provided
+                interface_port = data.get('port')
+                if interface_port is None or interface_port == "":
+                    return web.json_response({
+                        "message": "Port is required",
+                    }, status=422)
+
+                # set required options
+                interface_details["port"] = interface_port
+
+                # set optional options
+                InterfaceEditor.update_value(interface_details, data, "speed")
+                InterfaceEditor.update_value(interface_details, data, "databits")
+                InterfaceEditor.update_value(interface_details, data, "parity")
+                InterfaceEditor.update_value(interface_details, data, "stopbits")
+
+                # Handle KISS and AX25KISS specific options
+                if interface_type == "KISSInterface" or interface_type == "AX25KISSInterface":
+
+                    # set optional options
+                    InterfaceEditor.update_value(interface_details, data, "preamble")
+                    InterfaceEditor.update_value(interface_details, data, "txtail")
+                    InterfaceEditor.update_value(interface_details, data, "persistence")
+                    InterfaceEditor.update_value(interface_details, data, "slottime")
+                    InterfaceEditor.update_value(interface_details, data, "callsign")
+                    InterfaceEditor.update_value(interface_details, data, "ssid")
+
+            # FIXME: move to own sections
+            # RNode Airtime limits and station ID
+            InterfaceEditor.update_value(interface_details, data, "callsign")
+            InterfaceEditor.update_value(interface_details, data, "id_interval")
+            InterfaceEditor.update_value(interface_details, data, "airtime_limit_long")
+            InterfaceEditor.update_value(interface_details, data, "airtime_limit_short")
+
+            # handle Pipe Interface
+            if interface_type == "PipeInterface":
+
+                # ensure command provided
+                interface_command = data.get('command')
+                if interface_command is None or interface_command == "":
+                    return web.json_response({
+                        "message": "Command is required",
+                    }, status=422)
+
+                # ensure command provided
+                interface_respawn_delay = data.get('respawn_delay')
+                if interface_respawn_delay is None or interface_respawn_delay == "":
+                    return web.json_response({
+                        "message": "Respawn delay is required",
+                    }, status=422)
+
+                # set required options
+                interface_details["command"] = interface_command
+                interface_details["respawn_delay"] = interface_respawn_delay
+
+            # set common interface options
+            InterfaceEditor.update_value(interface_details, data, "bitrate")
+            InterfaceEditor.update_value(interface_details, data, "mode")
+            InterfaceEditor.update_value(interface_details, data, "network_name")
+            InterfaceEditor.update_value(interface_details, data, "passphrase")
+            InterfaceEditor.update_value(interface_details, data, "ifac_size")
 
             # merge new interface into existing interfaces
             interfaces[interface_name] = interface_details
@@ -617,9 +795,22 @@ class ReticulumMeshChat:
                     # add interface to output
                     output.append(f"[[{interface_name}]]")
                     for key, value in interface.items():
-                        output.append(f"    {key} = {value}")
+                        if not isinstance(value, dict):
+                            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/backend/interface_config_parser.py b/src/backend/interface_config_parser.py
index 75ab0b2..94bf823 100644
--- a/src/backend/interface_config_parser.py
+++ b/src/backend/interface_config_parser.py
@@ -1,50 +1,31 @@
+import RNS.vendor.configobj
+
+
 class InterfaceConfigParser:
 
     @staticmethod
     def parse(text):
 
-        # process config
+        # get lines from provided text
+        lines = text.splitlines()
+
+        # ensure [interfaces] section exists
+        if "[interfaces]" not in lines:
+            lines.insert(0, "[interfaces]")
+
+        # parse lines as rns config object
+        config = RNS.vendor.configobj.ConfigObj(lines)
+
+        # get interfaces from config
+        config_interfaces = config.get("interfaces")
+
+        # process interfaces
         interfaces = []
-        current_interface = None
-        for line in text.splitlines():
+        for interface_name in config_interfaces:
 
-            # strip whitespace from either side of string
-            line = line.strip()
-
-            # skip empty lines and commented out lines
-            if not line or line.startswith("#"):
-                continue
-
-            # check if we found a line containing an interface name
-            if line.startswith("[[") and line.endswith("]]"):
-
-                # we found a new interface, so add the previously parsed one to the interfaces list
-                if current_interface:
-                    interfaces.append(current_interface)
-
-                # get interface name by removing the "[[" and "]]"
-                interface_name = line[2:-2]
-                current_interface = {
-                    "name": interface_name,
-                }
-
-            # we found a key=value line, so we will set these values on the interface
-            elif current_interface is not None and "=" in line:
-
-                # parse key and value
-                line_parts = line.split("=", 1)
-                key = line_parts[0].strip()
-                value = line_parts[1].strip().strip('"').strip("'")
-
-                # skip empty values or values equal to "None"
-                if value is None or value == "None":
-                    continue
-
-                # set key/value on interface
-                current_interface[key] = value
-
-        # add the final interface to the list
-        if current_interface:
-            interfaces.append(current_interface)
+            # ensure interface has a name
+            interface_config = config_interfaces[interface_name]
+            interface_config["name"] = interface_name
+            interfaces.append(interface_config)
 
         return interfaces
diff --git a/src/backend/interface_editor.py b/src/backend/interface_editor.py
new file mode 100644
index 0000000..e836eb9
--- /dev/null
+++ b/src/backend/interface_editor.py
@@ -0,0 +1,14 @@
+class InterfaceEditor:
+
+    @staticmethod
+    def update_value(interface_details: dict, data: dict, key: str):
+
+        # update value if provided and not empty
+        value = data.get(key)
+        if value is not None and value != "":
+            interface_details[key] = value
+            return
+
+        # otherwise remove existing value
+        if key in interface_details:
+            del interface_details[key]
diff --git a/src/frontend/components/forms/FormLabel.vue b/src/frontend/components/forms/FormLabel.vue
new file mode 100644
index 0000000..367ece7
--- /dev/null
+++ b/src/frontend/components/forms/FormLabel.vue
@@ -0,0 +1,10 @@
+<template>
+    <label class="block text-sm font-medium text-gray-900 dark:text-zinc-100">
+        <slot/>
+    </label>
+</template>
+<script>
+export default {
+    name: 'FormLabel',
+}
+</script>
\ No newline at end of file
diff --git a/src/frontend/components/forms/FormSubLabel.vue b/src/frontend/components/forms/FormSubLabel.vue
new file mode 100644
index 0000000..84741e6
--- /dev/null
+++ b/src/frontend/components/forms/FormSubLabel.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class="text-xs text-gray-600 dark:text-zinc-300">
+        <slot/>
+    </div>
+</template>
+<script>
+export default {
+    name: 'FormSubLabel',
+}
+</script>
\ No newline at end of file
diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 1ffafc2..593e608 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -7,12 +7,12 @@
                 <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 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" />
+                                <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>
@@ -25,7 +25,10 @@
                             <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">
+                            <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>
@@ -37,7 +40,10 @@
                             <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">
+                            <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>
@@ -47,90 +53,162 @@
             </div>
 
             <!-- add interface form -->
-            <div class="bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-950">
+            <div class="bg-white rounded shadow divide-y divide-gray-300 dark:divide-zinc-700 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">Interface names must be unique.</div>
+                        <FormLabel class="mb-1">Name</FormLabel>
+                        <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' ]">
+                        <FormSubLabel>Interface names must be unique.</FormSubLabel>
                     </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>
+                        <FormLabel class="mb-1">Type</FormLabel>
                         <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>
+                            <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">
+                        <FormSubLabel>
                             Need help? <a class="text-blue-500 underline" href="https://reticulum.network/manual/interfaces.html" target="_blank">Reticulum Docs: Configuring Interfaces</a>
-                        </div>
+                        </FormSubLabel>
                     </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">
+                        <FormLabel class="mb-1">Target Host</FormLabel>
+                        <input type="text" placeholder="e.g: 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">
+                        <FormLabel class="mb-1">Target Port</FormLabel>
+                        <input type="text" placeholder="e.g: 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>
 
+                    <!-- 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">
+                        <FormLabel class="mb-1">Listen IP</FormLabel>
+                        <input type="text" placeholder="e.g: 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">
+                        <FormLabel class="mb-1">Listen Port</FormLabel>
+                        <input type="text" placeholder="e.g: 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>
 
+                    <!-- 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">
+                        <FormLabel class="mb-1">Forward IP</FormLabel>
+                        <input type="text" placeholder="e.g: 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">
+                        <FormLabel class="mb-1">Forward Port</FormLabel>
+                        <input type="text" placeholder="e.g: 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 -->
+                    <!-- peers -->
+                    <div v-if="newInterfaceType === 'I2PInterface'">
+                        <div class="mb-2 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.</div>
+                        <FormLabel class="mb-1">Peers</FormLabel>
+                        <div class="space-y-2">
+                            <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 (e.g: 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>
+
+                    <!-- 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>
+                        <FormLabel class="mb-1">Port</FormLabel>
                         <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>
+                        <FormSubLabel>
+                            <div @click="loadComports" class="text-blue-500 underline cursor-pointer">Reload Ports</div>
+                        </FormSubLabel>
                     </div>
 
-                    <!-- interface frequency -->
+                    <!-- 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>
+                        <FormLabel class="mb-1">
+                            <span>Frequency</span><span v-if="formattedFrequency">: {{ formattedFrequency }}</span>
+                        </FormLabel>
+                        <div class="flex items-center">
+                            <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-l-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"
+                                />
+                                <FormSubLabel class="text-center">GHz</FormSubLabel>
+                            </div>
+                            <div class="flex flex-col">
+                                <input
+                                    type="number"
+                                    v-model.number="RNodeMHzValue"
+                                    min="0"
+                                    placeholder="MHz"
+                                    class="bg-gray-50 border-y border-gray-300 text-gray-900 text-sm 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"
+                                />
+                                <FormSubLabel class="text-center">MHz</FormSubLabel>
+                            </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-r-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"
+                                />
+                                <FormSubLabel class="text-center">kHz</FormSubLabel>
+                            </div>
+                        </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>
+                        <FormLabel class="mb-1">Bandwidth</FormLabel>
                         <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>
@@ -138,35 +216,583 @@
 
                     <!-- 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>
+                        <FormLabel class="mb-1">Transmit Power (dBm)</FormLabel>
                         <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 v-if="newInterfaceType === 'RNodeInterface'" class="mb-2 flex flex-wrap items-start gap-4">
+
+                        <!-- interface spreading factor -->
+                        <div class="flex-1">
+                            <FormLabel class="mb-1">Spreading Factor</FormLabel>
+                            <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">
+                            <FormLabel class="mb-1">Coding Rate</FormLabel>
+                            <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>
 
-                    <!-- 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>
+                    <!-- 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>
+                        <FormLabel class="mb-1">Port</FormLabel>
+                        <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>
+                        <FormSubLabel>
+                            <div @click="loadComports" class="text-blue-500 underline cursor-pointer">Reload Ports</div>
+                        </FormSubLabel>
                     </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>
+                    <!-- RNodeMultiInterface: Sub Interfaces -->
+                    <div v-if="newInterfaceType === 'RNodeMultiInterface'" class="mb-2">
+                        <FormLabel class="mb-1">Sub-Interfaces</FormLabel>
+                        <div class="space-y-3">
+                            <div :key="idx" v-for="(sub, idx) in RNodeMultiInterface.subInterfaces" class="p-2 space-y-2 border border-gray-200 rounded-lg dark:border-zinc-700">
+
+                                <input
+                                    v-model="sub.name"
+                                    type="text"
+                                    placeholder="Sub-Interface 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">
+                                        <FormLabel class="mb-1">Frequency (Hz)</FormLabel>
+                                        <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">
+                                        <FormLabel class="mb-1">Bandwidth</FormLabel>
+                                        <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">
+                                        <FormLabel class="mb-1">Spreading Factor</FormLabel>
+                                        <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 :key="sf" v-for="sf in RNodeInterfaceDefaults.spreadingfactors" :value="sf">{{ sf }}</option>
+                                        </select>
+                                    </div>
+                                    <div class="flex-1">
+                                        <FormLabel class="mb-1">Coding Rate</FormLabel>
+                                        <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 :key="cr" v-for="cr in RNodeInterfaceDefaults.codingrates" :value="cr">{{ cr }}</option>
+                                        </select>
+                                    </div>
+                                </div>
+
+                                <div class="flex gap-2 items-center">
+                                    <div class="flex-1">
+                                        <FormLabel class="mb-1">TX Power (dBm)</FormLabel>
+                                        <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">
+                                        <FormLabel class="mb-1">Virtual Port</FormLabel>
+                                        <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 Sub-Interface</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 Sub-Interface</button>
+                        </div>
+                    </div>
+
+                    <!-- Serial, KISS, and AX25Kiss -->
+                    <div v-if="['SerialInterface', 'KISSInterface', 'AX25KISSInterface'].includes(newInterfaceType)" class="mb-4">
+
+                        <div class="mb-2">
+                            <FormLabel class="mb-1">Port</FormLabel>
+                            <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>
+                            <FormSubLabel>
+                                <div @click="loadComports" class="text-blue-500 underline cursor-pointer">Reload Ports</div>
+                            </FormSubLabel>
+                        </div>
+
+                        <div class="mb-2">
+                            <FormLabel class="mb-1">Serial connection baud rate (bps)</FormLabel>
+                            <input v-model="newInterfaceSpeed" placeholder="9600" 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="mb-2">
+                            <FormLabel class="mb-1">Databits</FormLabel>
+                            <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="mb-2">
+                            <FormLabel class="mb-1">Parity</FormLabel>
+                            <select v-model="newInterfaceParity" 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="undefined">None</option>
+                                <option value="even">Even</option>
+                                <option value="odd">Odd</option>
+                            </select>
+                        </div>
+
+                        <div>
+                            <FormLabel class="mb-1">Stopbits</FormLabel>
+                            <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 mb-2">
+                            <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"
+                            />
+                            <FormLabel for="use-ax25" class="ml-2">Enable AX.25 Framing</FormLabel>
+                        </div>
+
+                        <div class="grid grid-cols-2 gap-4">
+                            <div>
+                                <FormLabel class="mb-1">Preamble (milliseconds)</FormLabel>
+                                <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>
+                                <FormLabel class="mb-1">TX Tail (milliseconds)</FormLabel>
+                                <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>
+                                <FormLabel class="mb-1">CDMA Persistence (milliseconds)</FormLabel>
+                                <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>
+                                <FormLabel class="mb-1">CDMA Slot Time (milliseconds)</FormLabel>
+                                <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">
+                                <FormLabel class="mb-1">SSID</FormLabel>
+                                <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">
+                                <FormLabel class="mb-1">Callsign</FormLabel>
+                                <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">
+                                <FormLabel class="mb-1">Callsign ID Interval</FormLabel>
+                                <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">
+
+                        <div 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 usedto easily create virtual interfaces, or to interface with custom hardware or other systems.</div>
+
+                        <div class="mb-2">
+                            <FormLabel class="mb-1">Command</FormLabel>
+                            <input type="text" placeholder="e.g: 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">
+                        </div>
+
+                        <div>
+                            <FormLabel class="mb-1">Respawn Delay (seconds)</FormLabel>
+                            <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>
+
+                    </div>
 
                 </div>
             </div>
 
+            <!-- RNodeInterface bitrate & link budget -->
+            <ExpandingSection v-if="newInterfaceType === 'RNodeInterface'">
+                <template v-slot:title>Calculated RNode Bitrate & Link Budget</template>
+                <template v-slot:content>
+                    <div class="p-2 space-y-3">
+
+                        <div>
+                            <FormLabel class="mb-1">Antenna Gain (dBi)</FormLabel>
+                            <input
+                                type="number"
+                                v-model.number="RNodeInterfaceLoRaParameters.antennaGain"
+                                placeholder="Enter gain"
+                                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"
+                            />
+                            <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>
+                            <FormLabel class="mb-1">On-Air Calculations</FormLabel>
+                            <div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-center">
+                                <div class="bg-gray-100 p-3 rounded-lg border dark:bg-zinc-800 dark:border-zinc-600">
+                                    <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-3 rounded-lg border dark:bg-zinc-800 dark:border-zinc-600">
+                                    <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-3 rounded-lg border dark:bg-zinc-800 dark:border-zinc-600">
+                                    <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>
+                </template>
+            </ExpandingSection>
+
+            <!-- optional AutoInterface settings -->
+            <ExpandingSection v-if="newInterfaceType === 'AutoInterface'">
+                <template v-slot:title>Optional AutoInterface Settings</template>
+                <template v-slot:content>
+                    <div class="p-2 space-y-3">
+
+                        <div class="flex-1">
+                            <FormLabel class="mb-1">Group ID</FormLabel>
+                            <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">
+                            <FormLabel class="mb-1">Multicast Address Type</FormLabel>
+                            <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="undefined">(not set)</option>
+                                <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">
+                                <FormLabel class="mb-1">Network devices</FormLabel>
+                                <input
+                                    type="text"
+                                    v-model="newInterfaceDevices"
+                                    placeholder="e.g: 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">
+                                <FormLabel class="mb-1">Ignored Devices</FormLabel>
+                                <input
+                                    type="text"
+                                    v-model="newInterfaceIgnoredDevices"
+                                    placeholder="e.g: 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">
+                                <FormLabel class="mb-1">Discovery Scope</FormLabel>
+                                <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="undefined">(not set)</option>
+                                    <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">
+                                <FormLabel class="mb-1">Discovery Port</FormLabel>
+                                <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">
+                                <FormLabel class="mb-1">Data Port</FormLabel>
+                                <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>
+                </template>
+            </ExpandingSection>
+
+            <!-- optional TCPClientInterface settings -->
+            <ExpandingSection v-if="newInterfaceType === 'TCPClientInterface'">
+                <template v-slot:title>Optional TCPClientInterface Settings</template>
+                <template v-slot:content>
+                    <div class="p-2 space-y-3">
+
+                        <div class="flex">
+                            <div class="flex flex-col mr-auto">
+                                <FormLabel for="kiss-framing">Enable KISS Framing</FormLabel>
+                                <span class="text-sm text-gray-500 dark:text-zinc-300">Enable this 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="my-auto mx-2 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">
+                            <div class="flex flex-col mr-auto">
+                                <FormLabel for="i2p-tunneled">Enable I2P tunneling</FormLabel>
+                                <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="my-auto mx-2 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>
+                </template>
+            </ExpandingSection>
+
+            <!-- optional TCPClientInterface settings -->
+            <ExpandingSection v-if="newInterfaceType === 'TCPServerInterface'">
+                <template v-slot:title>Optional TCPServerInterface settings</template>
+                <template v-slot:content>
+                    <div class="p-2 space-y-3">
+
+                        <div>
+                            <FormLabel>Network device</FormLabel>
+                            <span class="text-sm text-gray-500 dark:text-zinc-300">Binds the interface to a specific network interface</span>
+                            <input type="text" placeholder="e.g: 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 mr-auto">
+                                <FormLabel for="prefer-ipv6">Prefer IPv6</FormLabel>
+                                <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="my-auto mx-2 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>
+                </template>
+            </ExpandingSection>
+
+            <!-- optional UDPInterface settings -->
+            <ExpandingSection v-if="newInterfaceType === 'UDPInterface'">
+                <template v-slot:title>Optional UDPInterface settings</template>
+                <template v-slot:content>
+                    <div class="p-2 space-y-3">
+
+                        <div>
+                            <FormLabel>Network device</FormLabel>
+                            <span class="text-sm text-gray-500 dark:text-zinc-300">Binds the interface to a specific network interface</span>
+                            <input type="text" placeholder="e.g: 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>
+                </template>
+            </ExpandingSection>
+
+            <!-- optional RNodeInterface settings -->
+            <ExpandingSection v-if="newInterfaceType === 'RNodeInterface'">
+                <template v-slot:title>Optional RNodeInterface Settings</template>
+                <template v-slot:content>
+                    <div class="p-2 space-y-3">
+
+                        <div class="flex items-center space-x-4">
+                            <div class="flex-1">
+                                <FormLabel class="mb-1">Callsign</FormLabel>
+                                <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">
+                                <FormLabel class="mb-1">Callsign ID Interval</FormLabel>
+                                <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">
+                                <FormLabel class="mb-1">Airtime Limit (Short)</FormLabel>
+                                <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">
+                                <FormLabel class="mb-1">Airtime Limit (Long)</FormLabel>
+                                <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>
+                </template>
+            </ExpandingSection>
+
+            <!-- optional interface settings -->
+            <ExpandingSection>
+                <template v-slot:title>Optional Interface Settings</template>
+                <template v-slot:content>
+                    <div class="p-2 space-y-3">
+
+                        <div>
+                            <FormLabel class="mb-1">Interface Mode</FormLabel>
+                            <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="undefined">(not set)</option>
+                                <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>
+                            <FormSubLabel>
+                                This setting requires Transport Mode to be enabled. <a class="text-blue-500 underline" href="https://reticulum.network/manual/interfaces.html#interface-modes" target="_blank">Reticulum Docs: Interface Modes</a>
+                            </FormSubLabel>
+                        </div>
+
+                        <div>
+                            <FormLabel class="mb-1">Inferred Interface Bitrate</FormLabel>
+                            <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>
+                </template>
+            </ExpandingSection>
+
+            <!-- ifac settings -->
+            <ExpandingSection>
+                <template v-slot:title>IFAC Settings</template>
+                <template v-slot:content>
+                    <div class="p-2">
+                        <div class="text-sm text-gray-500 dark:text-zinc-300 mb-2">ⓘ Interface Access Code settings are used for creating private networks and can be configured on the interface level.</div>
+                        <div class="grid grid-cols-1 lg:grid-cols-3 gap-y-2 lg:gap-x-2">
+                            <div>
+                                <FormLabel class="mb-1">Network Name</FormLabel>
+                                <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>
+                                <FormLabel class="mb-1">Passphrase</FormLabel>
+                                <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>
+                                <FormLabel class="mb-1">IFAC Size</FormLabel>
+                                <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>
+                </template>
+            </ExpandingSection>
+
+            <!-- add/save interface button -->
+            <div class="p-2 bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-900">
+                <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: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>
@@ -174,13 +800,22 @@
 <script>
 import Utils from "../../js/Utils";
 import DialogUtils from "../../js/DialogUtils";
+import ExpandingSection from "./ExpandingSection.vue";
+import FormLabel from "../forms/FormLabel.vue";
+import FormSubLabel from "../forms/FormSubLabel.vue";
 
 export default {
     name: 'AddInterfacePage',
+    components: {
+        FormSubLabel,
+        FormLabel,
+        ExpandingSection,
+    },
     data() {
         return {
 
             isEditingInterface: false,
+
             config: null,
 
             comports: [],
@@ -188,22 +823,76 @@ export default {
             newInterfaceName: null,
             newInterfaceType: null,
 
+            newInterfaceGroupID: null,
+            newInterfaceMulticastAddressType: null,
+            newInterfaceDevices: null,
+            newInterfaceIgnoredDevices: null,
+            newInterfaceDiscoveryScope: null,
+            newInterfaceDiscoveryPort: null,
+            newInterfaceDataPort: null,
+
             newInterfaceTargetHost: null,
             newInterfaceTargetPort: null,
 
             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: {
+                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: [
@@ -237,8 +926,36 @@ export default {
                 ],
             },
 
+            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`;
+        },
+    },
+    watch: {
+        newInterfaceBandwidth: "updateRNodeCalculations",
+        newInterfaceSpreadingFactor: "updateRNodeCalculations",
+        newInterfaceCodingRate: "updateRNodeCalculations",
+        newInterfaceTxpower: "updateRNodeCalculations",
+        'RNodeInterfaceLoRaParameters.antennaGain': "updateRNodeCalculations",
+    },
     mounted() {
 
         this.getConfig();
@@ -257,7 +974,7 @@ export default {
             try {
                 const response = await window.axios.get(`/api/v1/config`);
                 this.config = response.data.config;
-            } catch(e) {
+            } catch (e) {
                 // do nothing if failed to load config
                 console.log(e);
             }
@@ -266,7 +983,7 @@ export default {
             try {
                 const response = await window.axios.patch("/api/v1/config", config);
                 this.config = response.data.config;
-            } catch(e) {
+            } catch (e) {
                 alert("Failed to save config!");
                 console.log(e);
             }
@@ -275,7 +992,7 @@ export default {
             try {
                 const response = await window.axios.get(`/api/v1/comports`);
                 this.comports = response.data.comports;
-            } catch(e) {
+            } catch (e) {
                 // do nothing if failed to load interfaces
             }
         },
@@ -288,7 +1005,7 @@ export default {
 
                 // find interface, else show error and redirect to interfaces
                 const iface = interfaces[interfaceName];
-                if(!iface){
+                if (!iface) {
                     DialogUtils.alert("The selected interface for editing could not be found.");
                     this.$router.push({
                         "name": "interfaces",
@@ -300,56 +1017,197 @@ export default {
                 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;
 
-                // rnode interface
+                // 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;
 
-            } catch(e) {
+                // 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
             }
         },
         async addInterface() {
-
             try {
 
+                // process sub interfaces for RNodeMultiInterface
+                let subInterfacesData = null;
+                if(this.newInterfaceType === 'RNodeMultiInterface'){
+                    subInterfacesData = this.RNodeMultiInterface.subInterfaces.map((subInterface) => {
+                        return {
+                            name: subInterface.name,
+                            frequency: subInterface.frequency,
+                            bandwidth: subInterface.bandwidth,
+                            txpower: subInterface.txpower,
+                            spreadingfactor: subInterface.spreadingfactor,
+                            codingrate: subInterface.codingrate,
+                            vport: subInterface.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,
+
+                    // 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,
+
                     // tcp client interface
                     target_host: this.newInterfaceTargetHost,
                     target_port: this.newInterfaceTargetPort,
+
+                    // TCP Client & Server interface
+                    kiss_framing: this.newInterfaceKISSFramingEnabled,
+                    i2p_tunneled: this.newInterfaceI2PTunnelingEnabled,
+
                     // tcp server interface & udp interface
                     listen_ip: this.newInterfaceListenIp,
                     listen_port: this.newInterfaceListenPort,
+                    device: this.newInterfaceNetworkDevice,
+                    prefer_ipv6: this.newInterfacePreferIPV6,
+
                     // udp interface
                     forward_ip: this.newInterfaceForwardIp,
                     forward_port: this.newInterfaceForwardPort,
+
+                    //  I2P Interface
+                    peers: this.I2PSettings.newInterfacePeers.join(','),
+
                     // rnode interface
                     port: this.newInterfacePort,
-                    frequency: this.newInterfaceFrequency,
+                    frequency: this.calculateFrequencyInHz(),
                     bandwidth: this.newInterfaceBandwidth,
                     txpower: this.newInterfaceTxpower,
                     spreadingfactor: this.newInterfaceSpreadingFactor,
                     codingrate: this.newInterfaceCodingRate,
+
+                    // RNode Multi Interface
+                    sub_interfaces: subInterfacesData,
+
+                    // Seiral, KISS, and AX25KISS
+                    speed: this.newInterfaceSpeed,
+                    databits: this.newInterfaceDatabits,
+                    parity: this.newInterfaceParity,
+                    stopbits: this.newInterfaceStopbits,
+
+                    // KISS and AX25KISS
+                    preamble: this.newInterfacePreamble,
+                    txtail: this.newInterfaceTXTail,
+                    persistence: this.newInterfacePersistence,
+                    slottime: this.newInterfaceSlotTime,
+
+                    callsign: this.newInterfaceCallsign,
+                    id_interval: this.newInterfaceIDInterval,
+                    ssid: this.newInterfaceSSID,
+
+                    // Pipe interface
+                    command: this.newInterfaceCommand,
+                    respawn_delay: this.newInterfaceRespawnDelay,
+
+                    // Airtime limit
+                    airtime_limit_long: this.newInterfaceAirtimeLimitLong,
+                    airtime_limit_short: this.newInterfaceAirtimeLimitShort,
+
+                    // settings that can be added to any interface type
+                    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
@@ -362,7 +1220,7 @@ export default {
                     name: "interfaces",
                 });
 
-            } catch(e) {
+            } catch (e) {
                 const message = e.response?.data?.message ?? "failed to add interface";
                 DialogUtils.alert(message);
                 console.log(e);
@@ -372,6 +1230,90 @@ export default {
         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`;
+
+        },
+        addI2PPeer(address = "") {
+            this.I2PSettings.newInterfacePeers.push(address);
+        },
+        removeI2PPeer(index) {
+            this.I2PSettings.newInterfacePeers.splice(index, 1);
+        },
+        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);
+        },
     },
 }
 </script>
diff --git a/src/frontend/components/interfaces/ExpandingSection.vue b/src/frontend/components/interfaces/ExpandingSection.vue
new file mode 100644
index 0000000..9d23a17
--- /dev/null
+++ b/src/frontend/components/interfaces/ExpandingSection.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="bg-white rounded shadow divide-y divide-gray-300 dark:divide-zinc-700 dark:bg-zinc-900 overflow-hidden">
+        <div @click="isExpanded = !isExpanded" class="flex p-2 justify-between cursor-pointer hover:bg-gray-50 dark:hover:bg-zinc-800">
+            <div class="my-auto mr-auto">
+                <div class="font-bold dark:text-white">
+                    <slot name="title"/>
+                </div>
+                <div class="text-sm text-gray-600 dark:text-gray-300">
+                    <slot name="subtitle"/>
+                </div>
+            </div>
+            <div class="my-auto ml-2">
+                <div class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200" :class="{ 'rotate-90': isExpanded }">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="size-5">
+                        <rect width="256" height="256" fill="none"/>
+                        <path d="M181.66,122.34l-80-80A8,8,0,0,0,88,48V208a8,8,0,0,0,13.66,5.66l80-80A8,8,0,0,0,181.66,122.34Z" fill="currentColor"/>
+                    </svg>
+                </div>
+            </div>
+        </div>
+        <div v-if="isExpanded" class="divide-y divide-gray-200 dark:text-white">
+            <slot name="content"/>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'ExpandingSection',
+    data() {
+        return {
+            isExpanded: false,
+        };
+    },
+}
+</script>
\ No newline at end of file
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/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..9362eca 100644
--- a/src/frontend/js/Utils.js
+++ b/src/frontend/js/Utils.js
@@ -143,7 +143,7 @@ class Utils {
 
     static isInterfaceEnabled(iface) {
         const rawValue = iface.enabled ?? iface.interface_enabled;
-        const value = rawValue?.toLowerCase();
+        const value = rawValue?.toString()?.toLowerCase();
         return value === "on" || value === "yes" || value === "true";
     }