diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 805ea1adae94..07f11cf8f8c5 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -2048,6 +2048,7 @@
 "label.release.dedicated.pod": "Release dedicated Pod",
 "label.release.dedicated.zone": "Release dedicated Zone",
 "label.releasing.ip": "Releasing IP",
+"label.remote.access.vpn.specify.iprange": "Specify IP Range of remote VPN",
 "label.remote.instances": "Remote Instances",
 "label.remove": "Remove",
 "label.remove.annotation": "Remove comment",
@@ -3693,6 +3694,7 @@
 "message.releasing.dedicated.host": "Releasing dedicated host...",
 "message.releasing.dedicated.pod": "Releasing dedicated Pod...",
 "message.releasing.dedicated.zone": "Releasing dedicated Zone...",
+"message.remote.access.vpn.iprange.description": "The range of IP addresses to allocate to VPN clients. The first IP in the range will be taken by the VPN server. (Optional)",
 "message.remove.annotation": "Are you sure you want to delete the comment?",
 "message.remove.egress.rule.failed": "Removing egress rule failed",
 "message.remove.egress.rule.processing": "Deleting egress rule...",
diff --git a/ui/src/views/network/VpnDetails.vue b/ui/src/views/network/VpnDetails.vue
index c0cc4c6c2f1b..31ee9d73aecd 100644
--- a/ui/src/views/network/VpnDetails.vue
+++ b/ui/src/views/network/VpnDetails.vue
@@ -16,131 +16,153 @@
 // under the License.
 
 <template>
-  <div v-if="remoteAccessVpn">
-    <div>
-      <p>{{ $t('message.enabled.vpn') }} <strong>{{ remoteAccessVpn.publicip }}</strong></p>
-      <p>{{ $t('message.enabled.vpn.ip.sec') }} <strong>{{ remoteAccessVpn.presharedkey }}</strong></p>
-      <a-divider/>
-      <a-button
-        style="margin-left: 10px"
-        type="primary"
-        danger
-        @click="disableVpn = true"
-        :disabled="!('deleteRemoteAccessVpn' in $store.getters.apis)">
-        {{ $t('label.disable.vpn') }}
-      </a-button>
-      <a-button><router-link :to="{ path: '/vpnuser'}">{{ $t('label.manage.vpn.user') }}</router-link></a-button>
-    </div>
+  <div class="vpn-details">
 
-    <a-modal
-      :visible="disableVpn"
-      :footer="null"
-      :title="$t('label.disable.vpn')"
-      :closable="true"
-      :maskClosable="false"
-      @cancel="disableVpn = false">
-      <div v-ctrl-enter="handleDisableVpn">
-        <p>{{ $t('message.disable.vpn') }}</p>
-
-        <a-divider />
-
-        <div class="actions">
-          <a-button @click="() => disableVpn = false">{{ $t('label.cancel') }}</a-button>
-          <a-button type="primary" @click="handleDisableVpn">{{ $t('label.yes') }}</a-button>
-        </div>
+    <div v-if="remoteAccessVpn">
+      <div>
+        <p>{{ $t('message.enabled.vpn') }} <strong>{{ remoteAccessVpn.publicip }}</strong></p>
+        <p>{{ $t('message.enabled.vpn.ip.sec') }} <strong>{{ remoteAccessVpn.presharedkey }}</strong></p>
+        <a-divider/>
+        <a-button
+          style="margin-left: 10px"
+          type="primary"
+          danger
+          @click="disableVpn = true"
+          :disabled="!('deleteRemoteAccessVpn' in $store.getters.apis)">
+          {{ $t('label.disable.vpn') }}
+        </a-button>
+        <a-button><router-link :to="{ path: '/vpnuser'}">{{ $t('label.manage.vpn.user') }}</router-link></a-button>
       </div>
-    </a-modal>
-
-  </div>
-  <div v-else>
-    <a-button
-      :disabled="!('createRemoteAccessVpn' in $store.getters.apis)"
-      type="primary"
-      style="margin-left: 10px"
-      @click="enableVpn = true">
-      {{ $t('label.enable.vpn') }}
-    </a-button>
 
-    <a-modal
-      :visible="enableVpn"
-      :footer="null"
-      :title="$t('label.enable.vpn')"
-      :maskClosable="false"
-      :closable="true"
-      @cancel="enableVpn = false">
-      <div v-ctrl-enter="handleCreateVpn">
-        <p>{{ $t('message.enable.vpn') }}</p>
+      <a-modal
+        :visible="disableVpn"
+        :footer="null"
+        :title="$t('label.disable.vpn')"
+        :closable="true"
+        :maskClosable="false"
+        @cancel="disableVpn = false">
+        <div v-ctrl-enter="handleDisableVpn">
+          <p>{{ $t('message.disable.vpn') }}</p>
 
-        <a-divider />
+          <a-divider />
 
-        <div class="actions">
-          <a-button @click="() => enableVpn = false">{{ $t('label.cancel') }}</a-button>
-          <a-button type="primary" ref="submit" @click="handleCreateVpn">{{ $t('label.yes') }}</a-button>
+          <div class="actions">
+            <a-button @click="() => disableVpn = false">{{ $t('label.cancel') }}</a-button>
+            <a-button type="primary" @click="handleDisableVpn">{{ $t('label.yes') }}</a-button>
+          </div>
         </div>
-      </div>
-    </a-modal>
-
-  </div>
+      </a-modal>
 
-  <br>
-  <div v-if="vpnGateway">
-    <div>
-      <a-button
-        :disabled="!('deleteVpnGateway' in $store.getters.apis)"
-        style="margin-left: 10px"
-        danger
-        type="primary"
-        @click="deleteVpnGateway = true">
-        {{ $t('label.delete.vpn.gateway') }}
-      </a-button>
     </div>
-    <a-modal
-      :visible="deleteVpnGateway"
-      :footer="null"
-      :title="$t('label.enable.vpn')"
-      :maskClosable="false"
-      :closable="true"
-      @cancel="deleteVpnGateway = false">
-      <div v-ctrl-enter="handleDeleteVpnGateway">
-        <p>{{ $t('message.delete.vpn.gateway') }}</p>
-        <div :span="24" class="action-button">
-          <a-button @click="deleteVpnGateway = false">{{ $t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleDeleteVpnGateway" ref="submit">{{ $t('label.ok') }}</a-button>
-        </div>
-      </div>
-    </a-modal>
-  </div>
-  <div v-else-if="vpnGatewayEnabled">
-    <div>
+    <div v-else>
       <a-button
-        :disabled="!('createVpnGateway' in $store.getters.apis)"
-        style="margin-left: 10px"
+        :disabled="!('createRemoteAccessVpn' in $store.getters.apis)"
         type="primary"
-        @click="createVpnGateway = true">
-        {{ $t('label.add.vpn.gateway') }}
+        style="margin-left: 10px"
+        @click="enableVpn = true">
+        {{ $t('label.enable.vpn') }}
       </a-button>
+
+      <a-modal
+        :visible="enableVpn"
+        :footer="null"
+        :title="$t('label.enable.vpn')"
+        :maskClosable="false"
+        :closable="true"
+        @cancel="enableVpn = false">
+        <div v-ctrl-enter="handleCreateVpn">
+          <p>{{ $t('message.enable.vpn') }}</p>
+
+          <a-form-item>
+            <a-checkbox v-model:checked="specifyIpRange">
+              {{ $t('label.remote.access.vpn.specify.iprange') }}
+            </a-checkbox>
+          </a-form-item>
+          <a-form-item
+            v-if="specifyIpRange"
+            name="iprange"
+            :colon="false"
+            ref="iprange">
+            <template #label>
+              <tooltip-label :title="$t('label.ip.range')" :tooltip="$t('message.remote.access.vpn.iprange.description')"/>
+            </template>
+            <a-input
+              v-model:value="vpnIpRange"
+              :placeholder="'10.1.2.1-10.1.2.8'"
+            />
+          </a-form-item>
+
+          <a-divider />
+
+          <div class="actions">
+            <a-button @click="() => enableVpn = false">{{ $t('label.cancel') }}</a-button>
+            <a-button type="primary" ref="submit" @click="handleCreateVpn">{{ $t('label.yes') }}</a-button>
+          </div>
+        </div>
+      </a-modal>
+
     </div>
-    <a-modal
-      :visible="createVpnGateway"
-      :footer="null"
-      :title="$t('label.add.vpn.gateway')"
-      :maskClosable="false"
-      :closable="true"
-      @cancel="createVpnGateway = false">
-      <div v-ctrl-enter="handleCreateVpnGateway">
-        <p>{{ $t('message.add.vpn.gateway') }}</p>
-        <div :span="24" class="action-button">
-          <a-button @click="createVpnGateway = false">{{ $t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleCreateVpnGateway" ref="submit">{{ $t('label.ok') }}</a-button>
+
+    <br/>
+    <div v-if="vpnGateway">
+      <div>
+        <a-button
+          :disabled="!('deleteVpnGateway' in $store.getters.apis)"
+          style="margin-left: 10px"
+          danger
+          type="primary"
+          @click="deleteVpnGateway = true">
+          {{ $t('label.delete.vpn.gateway') }}
+        </a-button>
+      </div>
+      <a-modal
+        :visible="deleteVpnGateway"
+        :footer="null"
+        :title="$t('label.enable.vpn')"
+        :maskClosable="false"
+        :closable="true"
+        @cancel="deleteVpnGateway = false">
+        <div v-ctrl-enter="handleDeleteVpnGateway">
+          <p>{{ $t('message.delete.vpn.gateway') }}</p>
+          <div :span="24" class="action-button">
+            <a-button @click="deleteVpnGateway = false">{{ $t('label.cancel') }}</a-button>
+            <a-button :loading="loading" type="primary" @click="handleDeleteVpnGateway" ref="submit">{{ $t('label.ok') }}</a-button>
+          </div>
         </div>
+      </a-modal>
+    </div>
+    <div v-else-if="vpnGatewayEnabled">
+      <div>
+        <a-button
+          :disabled="!('createVpnGateway' in $store.getters.apis)"
+          style="margin-left: 10px"
+          type="primary"
+          @click="createVpnGateway = true">
+          {{ $t('label.add.vpn.gateway') }}
+        </a-button>
       </div>
-    </a-modal>
+      <a-modal
+        :visible="createVpnGateway"
+        :footer="null"
+        :title="$t('label.add.vpn.gateway')"
+        :maskClosable="false"
+        :closable="true"
+        @cancel="createVpnGateway = false">
+        <div v-ctrl-enter="handleCreateVpnGateway">
+          <p>{{ $t('message.add.vpn.gateway') }}</p>
+          <div :span="24" class="action-button">
+            <a-button @click="createVpnGateway = false">{{ $t('label.cancel') }}</a-button>
+            <a-button :loading="loading" type="primary" @click="handleCreateVpnGateway" ref="submit">{{ $t('label.ok') }}</a-button>
+          </div>
+        </div>
+      </a-modal>
+    </div>
   </div>
-
 </template>
 
 <script>
 import { getAPI, postAPI } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   props: {
@@ -149,6 +171,9 @@ export default {
       required: true
     }
   },
+  components: {
+    TooltipLabel
+  },
   data () {
     return {
       remoteAccessVpn: null,
@@ -158,7 +183,9 @@ export default {
       vpnGatewayEnabled: false,
       createVpnGateway: false,
       deleteVpnGateway: false,
-      isSubmitted: false
+      isSubmitted: false,
+      specifyIpRange: false,
+      vpnIpRange: ''
     }
   },
   inject: ['parentFetchData', 'parentToggleLoading'],
@@ -211,11 +238,15 @@ export default {
       this.isSubmitted = true
       this.parentToggleLoading()
       this.enableVpn = false
-      postAPI('createRemoteAccessVpn', {
+      const params = {
         publicipid: this.resource.id,
         domainid: this.resource.domainid,
         account: this.resource.account
-      }).then(response => {
+      }
+      if (this.specifyIpRange && this.vpnIpRange?.trim()) {
+        params.iprange = this.vpnIpRange.trim()
+      }
+      postAPI('createRemoteAccessVpn', params).then(response => {
         this.$pollJob({
           jobId: response.createremoteaccessvpnresponse.jobid,
           successMethod: result => {
@@ -387,4 +418,7 @@ export default {
       }
     }
   }
+  .vpn-details {
+    padding: 8px 0;
+  }
 </style>