diff --git a/app/templates/dashboard/app_form.html b/app/templates/dashboard/app_form.html
index cabd50c..68f3e8b 100644
--- a/app/templates/dashboard/app_form.html
+++ b/app/templates/dashboard/app_form.html
@@ -187,4 +187,70 @@
     event.detail.headers['X-CSRFToken'] = "{{ csrf_token() }}";
   });
 </script>
+
+<script>
+  // Port management functions
+  function addPortRow(portNumber = '', protocol = 'TCP', description = '') {
+    const tbody = document.querySelector('#ports-table tbody');
+    const newRow = document.createElement('tr');
+    newRow.innerHTML = `
+      <td>
+        <input type="number" name="port_numbers[]" class="form-control" 
+               min="1" max="65535" value="${portNumber}" required>
+      </td>
+      <td>
+        <select name="protocols[]" class="form-select">
+          <option value="TCP" ${protocol === 'TCP' ? 'selected' : ''}>TCP</option>
+          <option value="UDP" ${protocol === 'UDP' ? 'selected' : ''}>UDP</option>
+          <option value="SCTP" ${protocol === 'SCTP' ? 'selected' : ''}>SCTP</option>
+          <option value="OTHER" ${protocol === 'OTHER' ? 'selected' : ''}>OTHER</option>
+        </select>
+      </td>
+      <td>
+        <input type="text" name="port_descriptions[]" class="form-control" 
+               value="${description}" placeholder="Description">
+      </td>
+      <td>
+        <button type="button" class="btn btn-sm btn-ghost-danger" onclick="removePortRow(this)">
+          <span class="ti ti-trash"></span>
+        </button>
+      </td>
+    `;
+    tbody.appendChild(newRow);
+  }
+
+  function removePortRow(button) {
+    button.closest('tr').remove();
+  }
+
+  async function generateRandomPort() {
+    try {
+      const serverId = document.querySelector('select[name="server_id"]').value;
+      if (!serverId) {
+        showNotification('Please select a server first', 'warning');
+        return;
+      }
+
+      const response = await fetch(`/api/servers/${serverId}/suggest_port`);
+      const data = await response.json();
+
+      if (data.port) {
+        addPortRow(data.port);
+      } else {
+        showNotification('No available ports found', 'warning');
+      }
+    } catch (error) {
+      console.error('Error generating random port:', error);
+      showNotification('Failed to generate random port', 'danger');
+    }
+  }
+
+  function setupPortHandlers() {
+    // Add port button
+    document.getElementById('add-port-btn')?.addEventListener('click', () => addPortRow());
+
+    // Random port button
+    document.getElementById('random-port-btn')?.addEventListener('click', generateRandomPort);
+  }
+</script>
 {% endblock %}
\ No newline at end of file