diff --git a/templates/base.html b/templates/base.html
index a62e511..7eed684 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -616,7 +616,7 @@
                 $("#client_preshared_key").val("");
                 $("#client_allocated_ips").importTags('');
                 $("#client_extra_allowed_ips").importTags('');
-                updateSubnetRangesList();
+                updateSubnetRangesList("#subnet_ranges");
                 updateIPAllocationSuggestion(true);
             });
         });
diff --git a/templates/clients.html b/templates/clients.html
index b174098..fcc6de0 100644
--- a/templates/clients.html
+++ b/templates/clients.html
@@ -100,6 +100,12 @@ Wireguard Clients
                         <label for="_client_email" class="control-label">Email</label>
                         <input type="text" class="form-control" id="_client_email" name="client_email">
                     </div>
+                    <div class="form-group">
+                        <label for="_subnet_ranges" class="control-label">Subnet range</label>
+                        <select id="_subnet_ranges" class="select2"
+                            data-placeholder="Select a subnet range" style="width: 100%;">
+                        </select>
+                    </div>
                     <div class="form-group">
                         <label for="_client_allocated_ips" class="control-label">IP Allocation</label>
                         <input type="text" data-role="tagsinput" class="form-control" id="_client_allocated_ips">
@@ -263,21 +269,59 @@ Wireguard Clients
             updateApplyConfigVisibility()
         }
 
-        function updateSubnetRangesList() {
+        // updateIPAllocationSuggestion function for automatically fill
+        // the IP Allocation input with suggested ip addresses
+        // FOR CHANGING A SUBNET OF AN EXISTING CLIENT
+        function updateIPAllocationSuggestionExisting() {
+            let subnetRange = $("#_subnet_ranges").select2('val');
+
+            if (!subnetRange || subnetRange.length === 0) {
+                subnetRange = '__default_any__'
+            }
+            $.ajax({
+                cache: false,
+                method: 'GET',
+                url: `{{.basePath}}/api/suggest-client-ips?sr=${subnetRange}`,
+                dataType: 'json',
+                contentType: "application/json",
+                success: function(data) {
+                    const allocated_ips = $("#_client_allocated_ips").val().split(",");
+                    allocated_ips.forEach(function (item, index) {
+                        $('#_client_allocated_ips').removeTag(escape(item));
+                    })
+                    data.forEach(function (item, index) {
+                        $('#_client_allocated_ips').addTag(item);
+                    })
+                },
+                error: function(jqXHR, exception) {
+                    const allocated_ips = $("#_client_allocated_ips").val().split(",");
+                    allocated_ips.forEach(function (item, index) {
+                        $('#_client_allocated_ips').removeTag(escape(item));
+                    })
+                    const responseJson = jQuery.parseJSON(jqXHR.responseText);
+                    toastr.error(responseJson['message']);
+                }
+            });
+        }
+
+        function updateSubnetRangesList(elementID, preselectedVal) {
             $.getJSON("{{.basePath}}/api/subnet-ranges", null, function(data) {
-                console.log(data);
-                $("#subnet_ranges option").remove();
-                $("#subnet_ranges").append(
+                $(`${elementID} option`).remove();
+                $(elementID).append(
                     $("<option></option>")
                         .text("Any")
                         .val("__default_any__")
                 );
                 $.each(data, function(index, item) {
-                    $("#subnet_ranges").append(
+                    $(elementID).append(
                         $("<option></option>")
                             .text(item)
                             .val(item)
                     );
+                    if (item === preselectedVal) {
+                        console.log(preselectedVal);
+                        $(elementID).val(preselectedVal).trigger('change')
+                    }
                 });
             });
         }
@@ -532,6 +576,13 @@ Wireguard Clients
                         modal.find("#_client_name").val(client.name);
                         modal.find("#_client_email").val(client.email);
 
+                        let preselectedEl
+                        if (client.subnet_ranges && client.subnet_ranges.length > 0) {
+                            preselectedEl = client.subnet_ranges[0]
+                        }
+
+                        updateSubnetRangesList("#_subnet_ranges", preselectedEl);
+
                         modal.find("#_client_allocated_ips").importTags('');
                         client.allocated_ips.forEach(function (obj) {
                             modal.find("#_client_allocated_ips").addTag(obj);
@@ -554,6 +605,11 @@ Wireguard Clients
 
                         modal.find("#_client_public_key").val(client.public_key);
                         modal.find("#_client_preshared_key").val(client.preshared_key);
+
+                        // handle subnet range select
+                        $('#_subnet_ranges').on('select2:select', function (e) {
+                            updateIPAllocationSuggestionExisting();
+                        });
                     },
                     error: function (jqXHR, exception) {
                         const responseJson = jQuery.parseJSON(jqXHR.responseText);