diff --git a/scripts/js/interfaces.js b/scripts/js/interfaces.js
index 86f3be43..18e0ae32 100644
--- a/scripts/js/interfaces.js
+++ b/scripts/js/interfaces.js
@@ -28,7 +28,8 @@ $(function () {
       gateways.add(inet6.gateway);
     }
 
-    var json = [];
+    var interfaces = {};
+    var masterInterfaces = {};
 
     // For each interface in data.interface, create a new object and push it to json
     data.interfaces.forEach(function (interface) {
@@ -46,21 +47,32 @@ $(function () {
 
       const status = `<span class="${carrierColor}">${stateText}</span>`;
 
+      let master = null;
+      if (interface.master !== undefined) {
+        // Find interface.master in data.interfaces
+        master = data.interfaces.find(obj => obj.index === interface.master).name;
+      }
+
+      // Show an icon for indenting slave interfaces
+      const indentIcon = master === null ? "" : "<i class='fa fa-diagram-project fa-fw'></i> ";
+
       var obj = {
-        text: interface.name + " - " + status,
+        text: indentIcon + interface.name + " - " + status,
         class: gateways.has(interface.name) ? "text-bold" : null,
         icon: "fa fa-network-wired fa-fw",
         nodes: [],
       };
 
-      if (interface.master !== undefined) {
-        // Find interface.master in data.interfaces
-        const master = data.interfaces.find(obj => obj.index === interface.master);
-        if (master !== undefined) {
-          obj.nodes.push({
-            text: "Master interface: <code>" + utils.escapeHtml(master.name) + "</code>",
-            icon: "fa fa-network-wired fa-fw",
-          });
+      if (master !== null) {
+        obj.nodes.push({
+          text: "Master interface: <code>" + utils.escapeHtml(master) + "</code>",
+          icon: "fa fa-network-wired fa-fw",
+        });
+
+        if (master in masterInterfaces) {
+          masterInterfaces[master].push(interface.name);
+        } else {
+          masterInterfaces[master] = [interface.name];
         }
       }
 
@@ -403,9 +415,37 @@ $(function () {
         obj.nodes.push(furtherDetails);
       }
 
-      json.push(obj);
+      interfaces[interface.name] = obj;
     });
 
+    // Sort interfaces based on masterInterfaces. If an item is found in
+    // masterInterfaces, it should be placed after the master interface
+    const ifaces = Object.keys(interfaces);
+    const interfaceList = Object.keys(masterInterfaces);
+
+    // Add slave interfaces next to master interfaces
+    for (const master of interfaceList) {
+      if (master in masterInterfaces) {
+        for (const slave of masterInterfaces[master]) {
+          ifaces.splice(ifaces.indexOf(slave), 1);
+          interfaceList.splice(interfaceList.indexOf(master) + 1, 0, slave);
+        }
+      }
+    }
+
+    // Add interfaces that are not slaves at the top of the list (in reverse order)
+    for (const iface of ifaces.reverse()) {
+      if (!interfaceList.includes(iface)) {
+        interfaceList.unshift(iface);
+      }
+    }
+
+    // Build the tree view
+    const json = [];
+    for (const iface of interfaceList) {
+      json.push(interfaces[iface]);
+    }
+
     $("#tree").bstreeview({
       data: json,
       expandIcon: "fa fa-angle-down fa-fw",