diff --git a/server/src/main/java/com/cloud/api/query/QueryManagerImpl.java b/server/src/main/java/com/cloud/api/query/QueryManagerImpl.java
index 0a0f528fc52..d12da631a31 100644
--- a/server/src/main/java/com/cloud/api/query/QueryManagerImpl.java
+++ b/server/src/main/java/com/cloud/api/query/QueryManagerImpl.java
@@ -2565,13 +2565,21 @@ public class QueryManagerImpl extends MutualExclusiveIdsManagerBase implements Q
             sc.setParameters("dataCenterId", zoneId);
         }
         if (pod != null) {
-            sc.setParameters("podId", pod);
+            SearchCriteria<StoragePoolJoinVO> ssc = _poolJoinDao.createSearchCriteria();
+            ssc.addOr("podId", Op.EQ, pod);
+            ssc.addOr("podId", Op.NULL);
+
+            sc.addAnd("podId", SearchCriteria.Op.SC, ssc);
         }
         if (address != null) {
             sc.setParameters("hostAddress", address);
         }
         if (cluster != null) {
-            sc.setParameters("clusterId", cluster);
+            SearchCriteria<StoragePoolJoinVO> ssc = _poolJoinDao.createSearchCriteria();
+            ssc.addOr("clusterId", Op.EQ, cluster);
+            ssc.addOr("clusterId", Op.NULL);
+
+            sc.addAnd("clusterId", SearchCriteria.Op.SC, ssc);
         }
         if (scopeType != null) {
             sc.setParameters("scope", scopeType.toString());
diff --git a/ui/public/locales/en.json b/ui/public/locales/en.json
index 372cd3166d6..4111e0a7414 100644
--- a/ui/public/locales/en.json
+++ b/ui/public/locales/en.json
@@ -470,6 +470,7 @@
 "label.asyncbackup": "Async Backup",
 "label.author.email": "Author e-mail",
 "label.author.name": "Author name",
+"label.auto.assign": "Automatically assign",
 "label.auto.assign.diskoffering.disk.size": "Automatically assign offering matching the disk size",
 "label.auto.assign.random.ip": "Automatically assign a random IP address",
 "label.autoscale": "AutoScale",
@@ -550,6 +551,7 @@
 "label.certificate.upload.failed": "Certificate Upload Failed",
 "label.certificate.upload.failed.description": "Failed to update SSL Certificate. Failed to pass certificate validation check",
 "label.certificateid": "Certificate ID",
+"label.change": "Change",
 "label.change.affinity": "Change Affinity",
 "label.change.ip.addess": "Change IP Address",
 "label.change.ipaddress": "Change IP address for NIC",
@@ -818,6 +820,7 @@
 "label.disksize": "Disk Size (in GB)",
 "label.disksizeallocated": "Disk Allocated",
 "label.disksizeallocatedgb": "Allocated",
+"label.disksizefree": "Disk Free",
 "label.disksizetotal": "Disk Total",
 "label.disksizetotalgb": "Total",
 "label.disksizeunallocatedgb": "Unallocated",
@@ -1425,6 +1428,8 @@
 "label.migrate.instance.to": "Migrate instance to",
 "label.migrate.instance.to.host": "Migrate instance to another host",
 "label.migrate.instance.to.ps": "Migrate instance to another primary storage",
+"label.migrate.instance.single.storage": "Migrate all volume(s) of the instance to a single primary storage",
+"label.migrate.instance.specific.storages": "Migrate volume(s) of the instance to specific primary storages",
 "label.migrate.lb.vm": "Migrate LB VM",
 "label.migrate.lb.vm.to.ps": "Migrate LB VM to another primary storage",
 "label.migrate.router.to": "Migrate Router to",
@@ -1434,6 +1439,7 @@
 "label.migrate.volume": "Migrate Volume",
 "label.migrate.volume.newdiskoffering.desc": "This option allows administrators to replace the old disk offering, using one that better suits the new placement of the volume.",
 "label.migrate.volume.to.primary.storage": "Migrate volume to another primary storage",
+"label.migrate.with.storage": "Migrate with storage",
 "label.migrating": "Migrating",
 "label.migrating.data": "Migrating Data",
 "label.min.balance": "Min Balance",
@@ -1977,6 +1983,7 @@
 "label.select.offering": "Select offering",
 "label.select.project": "Select Project",
 "label.select.projects": "Select Projects",
+"label.select.ps": "Select Primary Storage",
 "label.select.region": "Select region",
 "label.select.tier": "Select Tier",
 "label.select.vm.for.static.nat": "Select VM for static NAT",
@@ -3068,17 +3075,20 @@
 "message.lock.account": "Please confirm that you want to lock this account.  By locking the account, all users for this account will no longer be able to manage their cloud resources.  Existing resources can still be accessed.",
 "message.login.failed": "Login Failed",
 "message.migrate.instance.confirm": "Please confirm the host you wish to migrate the virtual instance to.",
+"message.migrate.instance.host.auto.assign": "Host for the instance will be automatically chosen based on the suitability within the same cluster",
 "message.migrate.instance.select.host": "Please select a host for migration",
-"message.migrate.instance.to.host": "Please confirm that you want to migrate instance to another host.",
-"message.migrate.instance.to.ps": "Please confirm that you want to migrate instance to another primary storage.",
+"message.migrate.instance.to.host": "Please confirm that you want to migrate this instance to another host. When migration is between hosts of different clusters volume(s) of the instance may get migrated to suitable storage pools.",
+"message.migrate.instance.to.ps": "Please confirm that you want to migrate this instance to another primary storage.",
 "message.migrate.lb.vm.to.ps": "Please confirm that you want to migrate LB VM to another primary storage.",
 "message.migrate.router.confirm": "Please confirm the host you wish to migrate the router to:",
 "message.migrate.router.to.ps": "Please confirm that you want to migrate router to another primary storage.",
 "message.migrate.system.vm.to.ps": "Please confirm that you want to migrate system VM to another primary storage.",
 "message.migrate.systemvm.confirm": "Please confirm the host you wish to migrate the system VM to:",
-"message.migrate.volume": "Please confirm that you want to migrate volume to another primary storage.",
+"message.migrate.volume": "Please confirm that you want to migrate this volume to another primary storage.",
 "message.migrate.volume.failed": "Migrating volume failed",
+"message.migrate.volume.pool.auto.assign": "Primary storage for the volume will be automatically chosen based on the suitability and VM destination",
 "message.migrate.volume.processing": "Migrating volume...",
+"message.migrate.with.storage": "Specify storage pool for volumes of the instance.",
 "message.migrating.failed": "Migration failed",
 "message.migrating.processing": "Migration in progress for",
 "message.migrating.vm.to.host.failed": "Failed to migrate VM to host",
@@ -3144,6 +3154,7 @@
 "message.pod.dedicated": "Pod Dedicated",
 "message.pod.dedication.released": "Pod dedication released",
 "message.portable.ip.delete.confirm": "Please confirm you want to delete Portable IP Range",
+"message.primary.storage.invalid.state": "Primary storage is not in Up state",
 "message.processing.complete": "Processing complete!",
 "message.project.invite.sent": "Invite sent to user; they will be added to the project once they accept the invitation",
 "message.protocol.description": "For XenServer, choose NFS, iSCSI, or PreSetup. For KVM, choose NFS, SharedMountPoint, RDB, CLVM or Gluster. For vSphere, choose NFS, PreSetup (VMFS or iSCSI or FiberChannel or vSAN or vVols) or DatastoreCluster. For Hyper-V, choose SMB/CIFS. For LXC, choose NFS or SharedMountPoint. For OVM, choose NFS or ocfs2.",
@@ -3419,6 +3430,7 @@
 "message.volume.state.uploaderror": "Volume upload encountered some error",
 "message.volume.state.uploadinprogress": "Volume upload is in progress",
 "message.volume.state.uploadop": "The volume upload operation is in progress or in short the volume is on secondary storage",
+"message.volume.state.primary.storage.suitability": "The suitability of a primary storage for a volume depends on the disk offering of the volume and on the virtual machine allocations if the volume is attached to a virtual machine.",
 "message.waiting.for.builtin.templates.to.load": "Waiting for builtin templates to load...",
 "message.warn.filetype": "jpg, jpeg, png, bmp and svg are the only supported image formats",
 "message.xstools61plus.update.failed": "Failed to update Original XS Version is 6.1+ field. Error:",
diff --git a/ui/src/components/view/InstanceVolumesStoragePoolSelectListView.vue b/ui/src/components/view/InstanceVolumesStoragePoolSelectListView.vue
new file mode 100644
index 00000000000..a0d482c8a17
--- /dev/null
+++ b/ui/src/components/view/InstanceVolumesStoragePoolSelectListView.vue
@@ -0,0 +1,248 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div>
+    <a-table
+      class="top-spaced"
+      size="small"
+      style="max-height: 250px; overflow-y: auto"
+      :loading="volumesLoading"
+      :columns="volumeColumns"
+      :dataSource="volumes"
+      :pagination="false"
+      :rowKey="record => record.id">
+      <div slot="size" slot-scope="record">
+        <span v-if="record.size">
+          {{ $bytesToHumanReadableSize(record.size) }}
+        </span>
+      </div>
+      <template slot="selectedstorage" slot-scope="record">
+        <span>{{ record.selectedstoragename || '' }}</span>
+      </template>
+      <template slot="select" slot-scope="record">
+        <div style="display: flex; justify-content: flex-end;"><a-button @click="openVolumeStoragePoolSelector(record)">{{ record.selectedstorageid ? $t('label.change') : $t('label.select') }}</a-button></div>
+      </template>
+    </a-table>
+
+    <a-modal
+      :visible="!(!selectedVolumeForStoragePoolSelection.id)"
+      :title="$t('label.select.ps')"
+      :closable="true"
+      :maskClosable="false"
+      :footer="null"
+      :cancelText="$t('label.cancel')"
+      @cancel="closeVolumeStoragePoolSelector()"
+      centered
+      width="auto">
+      <volume-storage-pool-select-form
+        :resource="selectedVolumeForStoragePoolSelection"
+        :clusterId="storagePoolsClusterId"
+        :autoAssignAllowed="storagePoolsClusterId != null"
+        :isOpen="!(!selectedVolumeForStoragePoolSelection.id)"
+        @close-action="closeVolumeStoragePoolSelector()"
+        @select="handleVolumeStoragePoolSelection" />
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { api } from '@/api'
+import VolumeStoragePoolSelectForm from '@/components/view/VolumeStoragePoolSelectForm'
+
+export default {
+  name: 'InstanceVolumesStoragePoolSelectListView',
+  components: {
+    VolumeStoragePoolSelectForm
+  },
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    },
+    clusterId: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  data () {
+    return {
+      volumes: [],
+      volumesLoading: false,
+      volumeColumns: [
+        {
+          title: this.$t('label.volumeid'),
+          dataIndex: 'name'
+        },
+        {
+          title: this.$t('label.type'),
+          dataIndex: 'type'
+        },
+        {
+          title: this.$t('label.size'),
+          scopedSlots: { customRender: 'size' }
+        },
+        {
+          title: this.$t('label.storage'),
+          scopedSlots: { customRender: 'selectedstorage' }
+        },
+        {
+          title: '',
+          scopedSlots: { customRender: 'select' }
+        }
+      ],
+      selectedVolumeForStoragePoolSelection: {},
+      selectedClusterId: null,
+      volumesWithClusterStoragePool: []
+    }
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+    this.apiParams = {}
+    if (this.$route.meta.name === 'vm') {
+      this.apiConfig = this.$store.getters.apis.migrateVirtualMachineWithVolume || {}
+      this.apiConfig.params.forEach(param => {
+        this.apiParams[param.name] = param
+      })
+      this.apiConfig = this.$store.getters.apis.migrateVirtualMachine || {}
+      this.apiConfig.params.forEach(param => {
+        if (!(param.name in this.apiParams)) {
+          this.apiParams[param.name] = param
+        }
+      })
+    } else {
+      this.apiConfig = this.$store.getters.apis.migrateSystemVm || {}
+      this.apiConfig.params.forEach(param => {
+        if (!(param.name in this.apiParams)) {
+          this.apiParams[param.name] = param
+        }
+      })
+    }
+  },
+  created () {
+    this.fetchVolumes()
+  },
+  computed: {
+    isSelectedVolumeOnlyClusterStoragePoolVolume () {
+      if (this.volumesWithClusterStoragePool.length !== 1) {
+        return false
+      }
+      for (const volume of this.volumesWithClusterStoragePool) {
+        if (volume.id === this.selectedVolumeForStoragePoolSelection.id) {
+          return true
+        }
+      }
+      return false
+    },
+    storagePoolsClusterId () {
+      if (this.clusterId) {
+        return this.clusterId
+      }
+      return this.isSelectedVolumeOnlyClusterStoragePoolVolume ? null : this.selectedClusterId
+    }
+  },
+  methods: {
+    fetchVolumes () {
+      this.volumesLoading = true
+      this.volumes = []
+      api('listVolumes', {
+        listAll: true,
+        virtualmachineid: this.resource.id
+      }).then(response => {
+        var volumes = response.listvolumesresponse.volume
+        if (volumes && volumes.length > 0) {
+          volumes.sort((a, b) => {
+            return b.type.localeCompare(a.type)
+          })
+          this.volumes = volumes
+        }
+      }).finally(() => {
+        this.resetSelection()
+        this.volumesLoading = false
+      })
+    },
+    resetSelection () {
+      var volumes = this.volumes
+      this.volumes = []
+      for (var volume of volumes) {
+        if (this.clusterId) {
+          volume.selectedstorageid = -1
+          volume.selectedstoragename = this.$t('label.auto.assign')
+        } else {
+          volume.selectedstorageid = null
+          volume.selectedstoragename = ''
+        }
+        delete volume.selectedstorageclusterid
+      }
+      this.volumes = volumes
+      this.updateVolumeToStoragePoolSelection()
+    },
+    openVolumeStoragePoolSelector (volume) {
+      this.selectedVolumeForStoragePoolSelection = volume
+    },
+    closeVolumeStoragePoolSelector () {
+      this.selectedVolumeForStoragePoolSelection = {}
+    },
+    handleVolumeStoragePoolSelection (volumeId, storagePool) {
+      for (const volume of this.volumes) {
+        if (volume.id === volumeId) {
+          volume.selectedstorageid = storagePool.id
+          volume.selectedstoragename = storagePool.name
+          volume.selectedstorageclusterid = storagePool.clusterid
+          break
+        }
+      }
+      this.updateVolumeToStoragePoolSelection()
+    },
+    updateVolumeToStoragePoolSelection () {
+      var clusterId = null
+      this.volumeToPoolSelection = []
+      this.volumesWithClusterStoragePool = []
+      for (const volume of this.volumes) {
+        if (volume.selectedstorageid && volume.selectedstorageid !== -1) {
+          this.volumeToPoolSelection.push({ volume: volume.id, pool: volume.selectedstorageid })
+        }
+        if (!this.clusterId && volume.selectedstorageclusterid) {
+          clusterId = volume.selectedstorageclusterid
+          this.volumesWithClusterStoragePool.push(volume)
+        }
+      }
+      if (!this.clusterId) {
+        this.selectedClusterId = clusterId
+        for (const volume of this.volumes) {
+          if (this.selectedClusterId == null && volume.selectedstorageid === -1) {
+            volume.selectedstorageid = null
+            volume.selectedstoragename = ''
+          }
+          if (this.selectedClusterId && volume.selectedstorageid == null) {
+            volume.selectedstorageid = -1
+            volume.selectedstoragename = this.$t('label.auto.assign')
+          }
+        }
+      }
+      this.$emit('select', this.volumeToPoolSelection)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .top-spaced {
+    margin-top: 20px;
+  }
+</style>
diff --git a/ui/src/components/view/StoragePoolSelectView.vue b/ui/src/components/view/StoragePoolSelectView.vue
new file mode 100644
index 00000000000..d0dcf257a4b
--- /dev/null
+++ b/ui/src/components/view/StoragePoolSelectView.vue
@@ -0,0 +1,274 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div>
+    <a-input-search
+      class="top-spaced"
+      :placeholder="$t('label.search')"
+      v-model="searchQuery"
+      style="margin-bottom: 10px;"
+      @search="fetchStoragePools"
+      autoFocus />
+    <a-table
+      size="small"
+      style="overflow-y: auto"
+      :loading="loading"
+      :columns="columns"
+      :dataSource="storagePools"
+      :pagination="false"
+      :rowKey="record => record.id">
+      <span slot="suitabilityCustomTitle">
+        {{ $t('label.suitability') }}
+        <a-tooltip :title="$t('message.volume.state.primary.storage.suitability')" placement="top">
+          <a-icon type="info-circle" class="table-tooltip-icon" />
+        </a-tooltip>
+      </span>
+      <div slot="name" slot-scope="record">
+        {{ record.name }}
+        <a-tooltip v-if="record.name === $t('label.auto.assign')" :title="$t('message.migrate.volume.pool.auto.assign')" placement="top">
+          <a-icon type="info-circle" class="table-tooltip-icon" />
+        </a-tooltip>
+      </div>
+      <div slot="suitability" slot-scope="record">
+        <a-icon
+          class="host-item__suitability-icon"
+          type="check-circle"
+          theme="twoTone"
+          twoToneColor="#52c41a"
+          v-if="record.suitableformigration" />
+        <a-icon
+          class="host-item__suitability-icon"
+          type="close-circle"
+          theme="twoTone"
+          twoToneColor="#f5222d"
+          v-else />
+      </div>
+      <div slot="disksizetotal" slot-scope="record">
+        <span v-if="record.disksizetotal">{{ $bytesToHumanReadableSize(record.disksizetotal) }}</span>
+      </div>
+      <div slot="disksizeused" slot-scope="record">
+        <span v-if="record.disksizeused">{{ $bytesToHumanReadableSize(record.disksizeused) }}</span>
+      </div>
+      <div slot="disksizefree" slot-scope="record">
+        <span v-if="record.disksizetotal && record.disksizeused">{{ $bytesToHumanReadableSize(record.disksizetotal * 1 - record.disksizeused * 1) }}</span>
+      </div>
+      <template slot="select" slot-scope="record">
+        <a-tooltip placement="top" :title="record.state !== 'Up' ? $t('message.primary.storage.invalid.state') : ''">
+          <a-radio
+            :disabled="record.id !== -1 && record.state !== 'Up'"
+            @click="updateSelection(record)"
+            :checked="selectedStoragePool != null && record.id === selectedStoragePool.id">
+          </a-radio>
+        </a-tooltip>
+      </template>
+    </a-table>
+    <a-pagination
+      class="top-spaced"
+      size="small"
+      :current="page"
+      :pageSize="pageSize"
+      :total="totalCount"
+      :showTotal="total => `${$t('label.total')} ${total} ${$t('label.items')}`"
+      :pageSizeOptions="['10', '20', '40', '80', '100']"
+      @change="handleChangePage"
+      @showSizeChange="handleChangePageSize"
+      showSizeChanger>
+      <template slot="buildOptionText" slot-scope="props">
+        <span>{{ props.value }} / {{ $t('label.page') }}</span>
+      </template>
+    </a-pagination>
+  </div>
+</template>
+
+<script>
+import { api } from '@/api'
+
+export default {
+  name: 'VolumeStoragePoolSelector',
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    },
+    clusterId: {
+      type: String,
+      required: false,
+      default: null
+    },
+    suitabilityEnabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    autoAssignAllowed: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isOpen: {
+      type: Boolean,
+      required: false
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      storagePools: [],
+      searchQuery: '',
+      totalCount: 0,
+      page: 1,
+      pageSize: 10,
+      selectedStoragePool: null,
+      columns: [
+        {
+          title: this.$t('label.storageid'),
+          scopedSlots: { customRender: 'name' }
+        },
+        {
+          title: this.$t('label.clusterid'),
+          dataIndex: 'clustername'
+        },
+        {
+          title: this.$t('label.podid'),
+          dataIndex: 'podname'
+        },
+        {
+          title: this.$t('label.disksizetotal'),
+          scopedSlots: { customRender: 'disksizetotal' }
+        },
+        {
+          title: this.$t('label.disksizeused'),
+          scopedSlots: { customRender: 'disksizeused' }
+        },
+        {
+          title: this.$t('label.disksizefree'),
+          scopedSlots: { customRender: 'disksizefree' }
+        },
+        {
+          title: this.$t('label.select'),
+          scopedSlots: { customRender: 'select' }
+        }
+      ]
+    }
+  },
+  created () {
+    if (this.suitabilityEnabled) {
+      this.columns.splice(1, 0, { slots: { title: 'suitabilityCustomTitle' }, scopedSlots: { customRender: 'suitability' } }
+      )
+    }
+    this.preselectStoragePool()
+    this.fetchStoragePools()
+  },
+  watch: {
+    searchQuery (newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.page = 1
+      }
+    }
+  },
+  methods: {
+    fetchStoragePools () {
+      this.loading = true
+      if (this.suitabilityEnabled) {
+        api('findStoragePoolsForMigration', {
+          id: this.resource.id,
+          keyword: this.searchQuery,
+          page: this.page,
+          pagesize: this.pageSize
+        }).then(response => {
+          this.storagePools = response.findstoragepoolsformigrationresponse.storagepool || []
+          this.totalCount = response.findstoragepoolsformigrationresponse.count
+        }).catch(error => {
+          this.$notifyError(error)
+        }).finally(() => {
+          this.handleStoragePoolsFetchComplete()
+        })
+      } else {
+        var params = {
+          zoneid: this.resource.zoneid,
+          keyword: this.searchQuery,
+          page: this.page,
+          pagesize: this.pageSize
+        }
+        if (this.clusterId) {
+          params.clusterid = this.clusterId
+        }
+        api('listStoragePools', params).then(response => {
+          this.storagePools = response.liststoragepoolsresponse.storagepool || []
+          this.totalCount = response.liststoragepoolsresponse.count
+        }).catch(error => {
+          this.$notifyError(error)
+        }).finally(() => {
+          this.handleStoragePoolsFetchComplete()
+        })
+      }
+    },
+    handleStoragePoolsFetchComplete () {
+      this.$emit('storagePoolsUpdated', this.storagePools)
+      this.addAutoAssignOption()
+      this.loading = false
+    },
+    addAutoAssignOption () {
+      if (this.autoAssignAllowed && this.page === 1) {
+        this.storagePools.unshift({ id: -1, name: this.$t('label.auto.assign'), clustername: '', podname: '' })
+      }
+    },
+    handleChangePage (page, pageSize) {
+      this.page = page
+      this.pageSize = pageSize
+      this.fetchStoragePools()
+    },
+    handleChangePageSize (currentPage, pageSize) {
+      this.page = currentPage
+      this.pageSize = pageSize
+      this.fetchStoragePools()
+    },
+    preselectStoragePool () {
+      if (this.resource && 'selectedstorageid' in this.resource) {
+        this.selectedStoragePool = { id: this.resource.selectedstorageid }
+      }
+    },
+    clearView () {
+      this.storagePools = []
+      this.searchQuery = ''
+      this.totalCount = 0
+      this.page = 1
+      this.pageSize = 10
+      this.selectedStoragePool = null
+    },
+    reset () {
+      this.clearView()
+      this.preselectStoragePool()
+      this.fetchStoragePools()
+    },
+    updateSelection (storagePool) {
+      this.selectedStoragePool = storagePool
+      this.$emit('select', this.selectedStoragePool)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .top-spaced {
+    margin-top: 20px;
+  }
+  .table-tooltip-icon {
+    color: rgba(0,0,0,.45);
+  }
+</style>
diff --git a/ui/src/components/view/VolumeStoragePoolSelectForm.vue b/ui/src/components/view/VolumeStoragePoolSelectForm.vue
new file mode 100644
index 00000000000..eea416faa1a
--- /dev/null
+++ b/ui/src/components/view/VolumeStoragePoolSelectForm.vue
@@ -0,0 +1,129 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div class="form" v-ctrl-enter="handleKeyboardSubmit">
+    <storage-pool-select-view
+      ref="selectionView"
+      :resource="resource"
+      :clusterId="clusterId"
+      :suitabilityEnabled="suitabilityEnabled"
+      :autoAssignAllowed="autoAssignAllowed"
+      @select="handleSelect" />
+
+    <a-divider />
+
+    <div class="actions">
+      <a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
+      <a-button type="primary" ref="submit" :disabled="!selectedStoragePool" @click="submitForm">{{ $t('label.ok') }}</a-button>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import StoragePoolSelectView from '@/components/view/StoragePoolSelectView'
+
+export default {
+  name: 'VolumeStoragePoolSelectionForm',
+  components: {
+    StoragePoolSelectView
+  },
+  props: {
+    resource: {
+      type: Object,
+      required: true
+    },
+    clusterId: {
+      type: String,
+      required: false,
+      default: null
+    },
+    suitabilityEnabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    autoAssignAllowed: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isOpen: {
+      type: Boolean,
+      required: false
+    }
+  },
+  data () {
+    return {
+      selectedStoragePool: null
+    }
+  },
+  watch: {
+    isOpen (newValue) {
+      if (newValue) {
+        setTimeout(() => {
+          this.$refs.selectionView.reset()
+        }, 50)
+      }
+    }
+  },
+  methods: {
+    handleSelect (storagePool) {
+      this.selectedStoragePool = storagePool
+    },
+    closeModal () {
+      this.$emit('close-action')
+    },
+    handleKeyboardSubmit () {
+      if (this.selectedStoragePool != null) {
+        this.submitForm()
+      }
+    },
+    submitForm () {
+      this.$emit('select', this.resource.id, this.selectedStoragePool)
+      this.closeModal()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .form {
+    width: 80vw;
+
+    @media (min-width: 900px) {
+      width: 850px;
+    }
+  }
+
+  .top-spaced {
+    margin-top: 20px;
+  }
+
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+
+    button {
+      &:not(:last-child) {
+        margin-right: 10px;
+      }
+    }
+  }
+</style>
diff --git a/ui/src/main.js b/ui/src/main.js
index 0635b99765e..7cd5d21c9d9 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -26,7 +26,7 @@ import './core/lazy_use'
 import './core/ext'
 import './permission' // permission control
 import './utils/filter' // global filter
-import { pollJobPlugin, notifierPlugin, toLocaleDatePlugin, configUtilPlugin, apiMetaUtilPlugin, showIconPlugin, resourceTypePlugin } from './utils/plugins'
+import { pollJobPlugin, notifierPlugin, toLocaleDatePlugin, configUtilPlugin, apiMetaUtilPlugin, showIconPlugin, resourceTypePlugin, fileSizeUtilPlugin } from './utils/plugins'
 import { VueAxios } from './utils/request'
 import './utils/directives'
 
@@ -60,3 +60,4 @@ fetch('config.json').then(response => response.json()).then(config => {
 
 Vue.use(configUtilPlugin)
 Vue.use(apiMetaUtilPlugin)
+Vue.use(fileSizeUtilPlugin)
diff --git a/ui/src/utils/plugins.js b/ui/src/utils/plugins.js
index 99db8f7eb6e..6cf48ad2663 100644
--- a/ui/src/utils/plugins.js
+++ b/ui/src/utils/plugins.js
@@ -299,3 +299,30 @@ export const apiMetaUtilPlugin = {
     }
   }
 }
+
+const KB = 1024
+const MB = 1024 * KB
+const GB = 1024 * MB
+const TB = 1024 * GB
+
+export const fileSizeUtilPlugin = {
+  install (Vue) {
+    Vue.prototype.$bytesToHumanReadableSize = function (bytes) {
+      if (bytes == null) {
+        return ''
+      }
+      if (bytes < KB && bytes >= 0) {
+        return bytes + ' bytes'
+      }
+      if (bytes < MB) {
+        return (bytes / KB).toFixed(2) + ' KB'
+      } else if (bytes < GB) {
+        return (bytes / MB).toFixed(2) + ' MB'
+      } else if (bytes < TB) {
+        return (bytes / GB).toFixed(2) + ' GB'
+      } else {
+        return (bytes / TB).toFixed(2) + ' TB'
+      }
+    }
+  }
+}
diff --git a/ui/src/views/compute/MigrateVMStorage.vue b/ui/src/views/compute/MigrateVMStorage.vue
index c994b56d629..4acc7d61dff 100644
--- a/ui/src/views/compute/MigrateVMStorage.vue
+++ b/ui/src/views/compute/MigrateVMStorage.vue
@@ -16,47 +16,53 @@
 // under the License.
 
 <template>
-  <div class="form-layout">
-    <a-spin :spinning="loading">
-      <a-form
-        :form="form"
-        @submit="handleSubmit"
-        layout="vertical">
-        <a-form-item>
-          <tooltip-label slot="label" :title="$t('label.storageid')" :tooltip="apiParams.storageid ? apiParams.storageid.description : ''"/>
-          <a-select
-            :loading="loading"
-            v-decorator="['storageid', {
-              rules: [{ required: true, message: `${this.$t('message.error.required.input')}` }]
-            }]"
-            showSearch
-            optionFilterProp="children"
-            :filterOption="(input, option) => {
-              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }" >
-            <a-select-option v-for="storagePool in storagePools" :key="storagePool.id">
-              {{ storagePool.name || storagePool.id }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
+  <div class="form-layout" v-ctrl-enter="handleKeyboardSubmit">
+    <a-alert type="warning">
+      <span slot="message" v-html="$t('message.migrate.instance.to.ps')" />
+    </a-alert>
+    <a-radio-group
+      v-if="migrateVmWithVolumeAllowed"
+      :defaultValue="migrateMode"
+      @change="e => { handleMigrateModeChange(e.target.value) }">
+      <a-radio class="radio-style" :value="1">
+        {{ $t('label.migrate.instance.single.storage') }}
+      </a-radio>
+      <a-radio class="radio-style" :value="2">
+        {{ $t('label.migrate.instance.specific.storages') }}
+      </a-radio>
+    </a-radio-group>
+    <div v-if="migrateMode == 1">
+      <storage-pool-select-view
+        ref="storagePoolSelection"
+        :resource="resource"
+        @select="handleStoragePoolChange" />
+    </div>
+    <instance-volumes-storage-pool-select-list-view
+      v-else
+      :resource="resource"
+      @select="handleVolumeToPoolChange" />
 
-        <div :span="24" class="action-button">
-          <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-          <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
-        </div>
-      </a-form>
-    </a-spin>
+    <a-divider />
+
+    <div class="actions">
+      <a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
+      <a-button type="primary" :disabled="!formSubmitAllowed" @click="submitForm">{{ $t('label.ok') }}</a-button>
+    </div>
   </div>
 </template>
 
 <script>
 import { api } from '@/api'
 import TooltipLabel from '@/components/widgets/TooltipLabel'
+import StoragePoolSelectView from '@/components/view/StoragePoolSelectView'
+import InstanceVolumesStoragePoolSelectListView from '@/components/view/InstanceVolumesStoragePoolSelectListView'
 
 export default {
   name: 'MigrateVMStorage',
   components: {
-    TooltipLabel
+    TooltipLabel,
+    StoragePoolSelectView,
+    InstanceVolumesStoragePoolSelectListView
   },
   props: {
     resource: {
@@ -66,50 +72,44 @@ export default {
   },
   data () {
     return {
-      loading: false,
-      storagePools: []
+      migrateMode: 1,
+      selectedPool: {},
+      volumeToPoolSelection: []
     }
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
-    this.apiParams = {}
-    if (this.$route.meta.name === 'vm') {
-      this.apiConfig = this.$store.getters.apis.migrateVirtualMachineWithVolume || {}
-      this.apiConfig.params.forEach(param => {
-        this.apiParams[param.name] = param
-      })
-      this.apiConfig = this.$store.getters.apis.migrateVirtualMachine || {}
-      this.apiConfig.params.forEach(param => {
-        if (!(param.name in this.apiParams)) {
-          this.apiParams[param.name] = param
+    this.migrateVmWithVolumeApiParams = this.$getApiParams('migrateVirtualMachineWithVolume')
+  },
+  computed: {
+    migrateVmWithVolumeAllowed () {
+      return this.$route.meta.name === 'vm' && this.migrateVmWithVolumeApiParams.hostid && this.migrateVmWithVolumeApiParams.hostid.required === false
+    },
+    formSubmitAllowed () {
+      return this.migrateMode === 2 ? this.volumeToPoolSelection.length > 0 : this.selectedPool.id
+    },
+    isSelectedVolumeOnlyClusterStoragePoolVolume () {
+      if (this.volumesWithClusterStoragePool.length !== 1) {
+        return false
+      }
+      for (const volume of this.volumesWithClusterStoragePool) {
+        if (volume.id === this.selectedVolumeForStoragePoolSelection.id) {
+          return true
         }
-      })
-    } else {
-      this.apiConfig = this.$store.getters.apis.migrateSystemVm || {}
-      this.apiConfig.params.forEach(param => {
-        if (!(param.name in this.apiParams)) {
-          this.apiParams[param.name] = param
-        }
-      })
+      }
+      return false
     }
   },
-  created () {
-  },
-  mounted () {
-    this.fetchData()
-  },
   methods: {
     fetchData () {
-      this.loading = true
-      api('listStoragePools', {
-        zoneid: this.resource.zoneid
-      }).then(response => {
-        if (this.arrayHasItems(response.liststoragepoolsresponse.storagepool)) {
-          this.storagePools = response.liststoragepoolsresponse.storagepool
-        }
-      }).finally(() => {
-        this.loading = false
-      })
+      if (this.migrateMode === 2) {
+        this.fetchVolumes()
+      }
+    },
+    handleMigrateModeChange (value) {
+      this.migrateMode = value
+      this.selectedPool = {}
+      this.volumeToPoolSelection = []
     },
     isValidValueForKey (obj, key) {
       return key in obj && obj[key] != null
@@ -120,89 +120,70 @@ export default {
     isObjectEmpty (obj) {
       return !(obj !== null && obj !== undefined && Object.keys(obj).length > 0 && obj.constructor === Object)
     },
-    handleSubmit (e) {
-      e.preventDefault()
-      this.form.validateFieldsAndScroll((err, values) => {
-        if (err) {
-          return
-        }
-        this.loading = true
-        var isUserVm = true
-        if (this.$route.meta.name !== 'vm') {
-          isUserVm = false
-        }
-        var migrateApi = isUserVm ? 'migrateVirtualMachine' : 'migrateSystemVm'
-        if (isUserVm && this.apiParams.hostid && this.apiParams.hostid.required === false) {
-          migrateApi = 'migrateVirtualMachineWithVolume'
-          var rootVolume = null
-          api('listVolumes', {
-            listAll: true,
-            virtualmachineid: this.resource.id
-          }).then(response => {
-            var volumes = response.listvolumesresponse.volume
-            if (volumes && volumes.length > 0) {
-              volumes = volumes.filter(item => item.type === 'ROOT')
-              if (volumes && volumes.length > 0) {
-                rootVolume = volumes[0]
-              }
-              if (rootVolume == null) {
-                this.$message.error('Failed to find ROOT volume for the VM ' + this.resource.id)
-                this.closeAction()
-              }
-              this.migrateVm(migrateApi, values.storageid, rootVolume.id)
-            }
-          })
-          return
-        }
-        this.migrateVm(migrateApi, values.storageid, null)
-      })
+    handleStoragePoolChange (storagePool) {
+      this.selectedPool = storagePool
     },
-    migrateVm (migrateApi, storageId, rootVolumeId) {
-      var params = {
-        virtualmachineid: this.resource.id,
-        storageid: storageId
+    handleVolumeToPoolChange (volumeToPool) {
+      this.volumeToPoolSelection = volumeToPool
+    },
+    handleKeyboardSubmit () {
+      if (this.formSubmitAllowed) {
+        this.submitForm()
       }
-      if (rootVolumeId !== null) {
-        params = {
-          virtualmachineid: this.resource.id,
-          'migrateto[0].volume': rootVolumeId,
-          'migrateto[0].pool': storageId
+    },
+    submitForm () {
+      var isUserVm = true
+      if (this.$route.meta.name !== 'vm') {
+        isUserVm = false
+      }
+      var migrateApi = isUserVm ? 'migrateVirtualMachine' : 'migrateSystemVm'
+      if (isUserVm && this.migrateMode === 2) {
+        migrateApi = 'migrateVirtualMachineWithVolume'
+        this.migrateVm(migrateApi, null, this.volumeToPoolSelection)
+        return
+      }
+      this.migrateVm(migrateApi, this.selectedPool.id, null)
+    },
+    migrateVm (migrateApi, storageId, volumeToPool) {
+      var params = {
+        virtualmachineid: this.resource.id
+      }
+      if (this.migrateMode === 2) {
+        for (var i = 0; i < volumeToPool.length; i++) {
+          const mapping = volumeToPool[i]
+          params['migrateto[' + i + '].volume'] = mapping.volume
+          params['migrateto[' + i + '].pool'] = mapping.pool
         }
+      } else {
+        params.storageid = storageId
       }
       api(migrateApi, params).then(response => {
-        var jobId = ''
-        if (migrateApi === 'migrateVirtualMachineWithVolume') {
-          jobId = response.migratevirtualmachinewithvolumeresponse.jobid
-        } else if (migrateApi === 'migrateSystemVm') {
-          jobId = response.migratesystemvmresponse.jobid
-        } else {
-          jobId = response.migratevirtualmachineresponse.jobid
-        }
+        const jobId = response[migrateApi.toLowerCase() + 'response'].jobid
         this.$pollJob({
           title: `${this.$t('label.migrating')} ${this.resource.name}`,
           description: this.resource.name,
           jobId: jobId,
           successMessage: `${this.$t('message.success.migrating')} ${this.resource.name}`,
           successMethod: () => {
-            this.$parent.$parent.close()
+            this.closeModal()
           },
           errorMessage: this.$t('message.migrating.failed'),
           errorMethod: () => {
-            this.$parent.$parent.close()
+            this.closeModal()
           },
           loadingMessage: `${this.$t('message.migrating.processing')} ${this.resource.name}`,
           catchMessage: this.$t('error.fetching.async.job.result'),
           catchMethod: () => {
-            this.$parent.$parent.close()
+            this.closeModal()
           }
         })
-        this.$parent.$parent.close()
+        this.closeModal()
       }).catch(error => {
         console.error(error)
         this.$message.error(`${this.$t('message.migrating.vm.to.storage.failed')} ${storageId}`)
       })
     },
-    closeAction () {
+    closeModal () {
       this.$emit('close-action')
     }
   }
@@ -211,18 +192,33 @@ export default {
 
 <style scoped lang="less">
   .form-layout {
-    width: 60vw;
+    width: 80vw;
 
-    @media (min-width: 500px) {
-      width: 450px;
+    @media (min-width: 900px) {
+      width: 850px;
     }
   }
 
-  .action-button {
-    text-align: right;
+  .top-spaced {
+    margin-top: 20px;
+  }
+
+  .radio-style {
+    display: block;
+    margin-left: 10px;
+    height: 40px;
+    line-height: 40px;
+  }
+
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
 
     button {
-      margin-right: 5px;
+      &:not(:last-child) {
+        margin-right: 10px;
+      }
     }
   }
 </style>
diff --git a/ui/src/views/compute/MigrateWizard.vue b/ui/src/views/compute/MigrateWizard.vue
index 310799859ba..45eff22e142 100644
--- a/ui/src/views/compute/MigrateWizard.vue
+++ b/ui/src/views/compute/MigrateWizard.vue
@@ -16,14 +16,18 @@
 // under the License.
 
 <template>
-  <div class="form" v-ctrl-enter="submitForm">
+  <div class="form" v-ctrl-enter="handleKeyboardSubmit">
+    <a-alert type="warning">
+      <span slot="message" v-html="$t('message.migrate.instance.to.host')" />
+    </a-alert>
     <a-input-search
+      class="top-spaced"
       :placeholder="$t('label.search')"
       v-model="searchQuery"
-      style="margin-bottom: 10px;"
       @search="fetchData"
       autoFocus />
     <a-table
+      class="top-spaced"
       size="small"
       style="overflow-y: auto"
       :loading="loading"
@@ -31,6 +35,12 @@
       :dataSource="hosts"
       :pagination="false"
       :rowKey="record => record.id">
+      <div slot="name" slot-scope="record">
+        {{ record.name }}
+        <a-tooltip v-if="record.name === $t('label.auto.assign')" :title="$t('message.migrate.instance.host.auto.assign')" placement="top">
+          <a-icon type="info-circle" class="table-tooltip-icon" />
+        </a-tooltip>
+      </div>
       <div slot="suitability" slot-scope="record">
         <a-icon
           class="host-item__suitability-icon"
@@ -47,7 +57,7 @@
       </div>
       <div slot="memused" slot-scope="record">
         <span v-if="record.memoryused">
-          {{ record.memoryused | byteToGigabyte }} GB
+          {{ $bytesToHumanReadableSize(record.memoryused) }}
         </span>
       </div>
       <div slot="memoryallocatedpercentage" slot-scope="record">
@@ -65,7 +75,7 @@
       <template slot="select" slot-scope="record">
         <a-radio
           class="host-item__radio"
-          @click="selectedHost = record"
+          @click="handleSelectedHostChange(record)"
           :checked="record.id === selectedHost.id"
           :disabled="!record.suitableformigration"></a-radio>
       </template>
@@ -86,10 +96,27 @@
       </template>
     </a-pagination>
 
-    <div style="margin-top: 20px; display: flex; justify-content:flex-end;">
-      <a-button type="primary" ref="submit" :disabled="!selectedHost.id" @click="submitForm">
-        {{ $t('label.ok') }}
-      </a-button>
+    <a-form-item
+      v-if="isUserVm"
+      class="top-spaced">
+      <tooltip-label slot="label" :title="$t('label.migrate.with.storage')" :tooltip="$t('message.migrate.with.storage')"/>
+      <a-switch
+        v-model="migrateWithStorage"
+        :disabled="!selectedHost || !selectedHost.id || selectedHost.id === -1" />
+    </a-form-item>
+    <instance-volumes-storage-pool-select-list-view
+      ref="volumeToPoolSelect"
+      v-if="migrateWithStorage"
+      class="top-spaced"
+      :resource="resource"
+      :clusterId="selectedHost.id ? selectedHost.clusterid : null"
+      @select="handleVolumeToPoolChange" />
+
+    <a-divider />
+
+    <div class="actions">
+      <a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
+      <a-button type="primary" ref="submit" :disabled="!selectedHost.id" @click="submitForm">{{ $t('label.ok') }}</a-button>
     </div>
   </div>
 
@@ -97,9 +124,15 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
+import InstanceVolumesStoragePoolSelectListView from '@/components/view/InstanceVolumesStoragePoolSelectListView'
 
 export default {
   name: 'VMMigrateWizard',
+  components: {
+    TooltipLabel,
+    InstanceVolumesStoragePoolSelectListView
+  },
   props: {
     resource: {
       type: Object,
@@ -117,8 +150,8 @@ export default {
       pageSize: 10,
       columns: [
         {
-          title: this.$t('label.name'),
-          dataIndex: 'name'
+          title: this.$t('label.hostid'),
+          scopedSlots: { customRender: 'name' }
         },
         {
           title: this.$t('label.suitability'),
@@ -152,13 +185,30 @@ export default {
           title: this.$t('label.select'),
           scopedSlots: { customRender: 'select' }
         }
-      ]
+      ],
+      migrateWithStorage: false,
+      volumeToPoolSelection: []
     }
   },
   created () {
     this.fetchData()
   },
+  computed: {
+    isUserVm () {
+      return this.$route.meta.name === 'vm'
+    }
+  },
+  watch: {
+    searchQuery (newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.page = 1
+      }
+    }
+  },
   methods: {
+    arrayHasItems (array) {
+      return array !== null && array !== undefined && Array.isArray(array) && array.length > 0
+    },
     fetchData () {
       this.loading = true
       api('findHostsForMigration', {
@@ -173,7 +223,7 @@ export default {
         })
         for (const key in this.hosts) {
           if (this.hosts[key].suitableformigration && !this.hosts[key].requiresstoragemigration) {
-            this.hosts.unshift({ id: -1, name: this.$t('label.migrate.auto.select'), suitableformigration: true, requiresstoragemigration: false })
+            this.hosts.unshift({ id: -1, name: this.$t('label.auto.assign'), suitableformigration: true, requiresstoragemigration: false })
             break
           }
         }
@@ -184,51 +234,6 @@ export default {
         this.loading = false
       })
     },
-    submitForm () {
-      if (this.loading) return
-      this.loading = true
-      var isUserVm = true
-      if (this.$route.meta.name !== 'vm') {
-        isUserVm = false
-      }
-      var migrateApi = isUserVm
-        ? this.selectedHost.requiresStorageMotion ? 'migrateVirtualMachineWithVolume' : 'migrateVirtualMachine'
-        : 'migrateSystemVm'
-      var migrateParams = this.selectedHost.id === -1 ? { autoselect: true, virtualmachineid: this.resource.id }
-        : { hostid: this.selectedHost.id, virtualmachineid: this.resource.id }
-      api(migrateApi, migrateParams).then(response => {
-        const jobid = isUserVm
-          ? this.selectedHost.requiresStorageMotion ? response.migratevirtualmachinewithvolumeresponse.jobid : response.migratevirtualmachineresponse.jobid
-          : response.migratesystemvmresponse.jobid
-        this.$pollJob({
-          jobId: jobid,
-          title: `${this.$t('label.migrating')} ${this.resource.name}`,
-          description: this.resource.name,
-          successMessage: `${this.$t('message.success.migrating')} ${this.resource.name}`,
-          successMethod: () => {
-            this.$emit('close-action')
-          },
-          errorMessage: this.$t('message.migrating.failed'),
-          errorMethod: () => {
-            this.$emit('close-action')
-          },
-          loadingMessage: `${this.$t('message.migrating.processing')} ${this.resource.name}`,
-          catchMessage: this.$t('error.fetching.async.job.result'),
-          catchMethod: () => {
-            this.$emit('close-action')
-          }
-        })
-        this.$emit('close-action')
-      }).catch(error => {
-        this.$notification.error({
-          message: this.$t('message.request.failed'),
-          description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message,
-          duration: 0
-        })
-      }).finally(() => {
-        this.loading = false
-      })
-    },
     handleChangePage (page, pageSize) {
       this.page = page
       this.pageSize = pageSize
@@ -238,11 +243,77 @@ export default {
       this.page = currentPage
       this.pageSize = pageSize
       this.fetchData()
-    }
-  },
-  filters: {
-    byteToGigabyte: value => {
-      return (value / Math.pow(10, 9)).toFixed(2)
+    },
+    handleSelectedHostChange (host) {
+      if (host.id === -1) {
+        this.migrateWithStorage = false
+      }
+      this.selectedHost = host
+      this.selectedVolumeForStoragePoolSelection = {}
+      this.volumeToPoolSelection = []
+      if (this.migrateWithStorage) {
+        this.$refs.volumeToPoolSelect.resetSelection()
+      }
+    },
+    handleVolumeToPoolChange (volumeToPool) {
+      this.volumeToPoolSelection = volumeToPool
+    },
+    handleKeyboardSubmit () {
+      if (this.selectedHost.id) {
+        this.submitForm()
+      }
+    },
+    closeModal () {
+      this.$emit('close-action')
+    },
+    submitForm () {
+      if (this.loading) return
+      this.loading = true
+      const migrateApi = this.isUserVm
+        ? (this.selectedHost.requiresStorageMotion || this.volumeToPoolSelection.length > 0)
+          ? 'migrateVirtualMachineWithVolume'
+          : 'migrateVirtualMachine'
+        : 'migrateSystemVm'
+      var params = this.selectedHost.id === -1
+        ? { autoselect: true, virtualmachineid: this.resource.id }
+        : { hostid: this.selectedHost.id, virtualmachineid: this.resource.id }
+      if (this.migrateWithStorage) {
+        for (var i = 0; i < this.volumeToPoolSelection.length; i++) {
+          const mapping = this.volumeToPoolSelection[i]
+          params['migrateto[' + i + '].volume'] = mapping.volume
+          params['migrateto[' + i + '].pool'] = mapping.pool
+        }
+      }
+      api(migrateApi, params).then(response => {
+        const jobId = response[migrateApi.toLowerCase() + 'response'].jobid
+        this.$pollJob({
+          jobId: jobId,
+          title: `${this.$t('label.migrating')} ${this.resource.name}`,
+          description: this.resource.name,
+          successMessage: `${this.$t('message.success.migrating')} ${this.resource.name}`,
+          successMethod: () => {
+            this.closeModal()
+          },
+          errorMessage: this.$t('message.migrating.failed'),
+          errorMethod: () => {
+            this.closeModal()
+          },
+          loadingMessage: `${this.$t('message.migrating.processing')} ${this.resource.name}`,
+          catchMessage: this.$t('error.fetching.async.job.result'),
+          catchMethod: () => {
+            this.closeModal()
+          }
+        })
+        this.closeModal()
+      }).catch(error => {
+        this.$notification.error({
+          message: this.$t('message.request.failed'),
+          description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message,
+          duration: 0
+        })
+      }).finally(() => {
+        this.loading = false
+      })
     }
   }
 }
@@ -308,7 +379,26 @@ export default {
 
   }
 
+  .top-spaced {
+    margin-top: 20px;
+  }
+
   .pagination {
     margin-top: 20px;
   }
+
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+
+    button {
+      &:not(:last-child) {
+        margin-right: 10px;
+      }
+    }
+  }
+  .table-tooltip-icon {
+    color: rgba(0,0,0,.45);
+  }
 </style>
diff --git a/ui/src/views/storage/MigrateVolume.vue b/ui/src/views/storage/MigrateVolume.vue
index b584aca6fc6..15665bba748 100644
--- a/ui/src/views/storage/MigrateVolume.vue
+++ b/ui/src/views/storage/MigrateVolume.vue
@@ -16,63 +16,47 @@
 // under the License.
 
 <template>
-  <div class="migrate-volume-container" v-ctrl-enter="submitMigrateVolume">
-    <div class="modal-form">
-      <div v-if="storagePools.length > 0">
-        <a-alert type="warning">
-          <span slot="message" v-html="$t('message.migrate.volume')" />
-        </a-alert>
-        <p class="modal-form__label">{{ $t('label.storagepool') }}</p>
-        <a-select
-          v-model="selectedStoragePool"
-          style="width: 100%;"
-          :autoFocus="storagePools.length > 0"
-          showSearch
-          optionFilterProp="children"
-          :filterOption="(input, option) => {
-            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-          }" >
-          <a-select-option v-for="(storagePool, index) in storagePools" :value="storagePool.id" :key="index">
-            {{ storagePool.name }} <span v-if="resource.virtualmachineid">{{ storagePool.suitableformigration ? `(${$t('label.suitable')})` : `(${$t('label.not.suitable')})` }}</span>
-          </a-select-option>
-        </a-select>
-        <template v-if="this.resource.virtualmachineid">
-          <p class="modal-form__label" @click="replaceDiskOffering = !replaceDiskOffering" style="cursor:pointer;">
-            {{ $t('label.usenewdiskoffering') }}
-          </p>
-          <a-checkbox v-model="replaceDiskOffering" />
+  <div class="form" v-ctrl-enter="handleKeyboardSubmit">
+    <a-alert class="top-spaced" type="warning">
+      <span slot="message" v-html="$t('message.migrate.volume')" />
+    </a-alert>
+    <storage-pool-select-view
+      ref="storagePoolSelection"
+      :resource="resource"
+      :suitabilityEnabled="true"
+      @storagePoolsUpdated="handleStoragePoolsChange"
+      @select="handleStoragePoolSelect" />
+    <div class="top-spaced" v-if="storagePools.length > 0">
+      <template v-if="this.resource.virtualmachineid">
+        <p class="modal-form__label" @click="replaceDiskOffering = !replaceDiskOffering" style="cursor:pointer;">
+          {{ $t('label.usenewdiskoffering') }}
+        </p>
+        <a-checkbox v-model="replaceDiskOffering" />
 
-          <template v-if="replaceDiskOffering">
-            <p class="modal-form__label">{{ $t('label.newdiskoffering') }}</p>
-            <a-select
-              v-model="selectedDiskOffering"
-              style="width: 100%;"
-              showSearch
-              optionFilterProp="children"
-              :filterOption="(input, option) => {
-                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-              }" >
-              <a-select-option v-for="(diskOffering, index) in diskOfferings" :value="diskOffering.id" :key="index">
-                {{ diskOffering.displaytext }}
-              </a-select-option>
-            </a-select>
-          </template>
+        <template v-if="replaceDiskOffering">
+          <p class="modal-form__label">{{ $t('label.newdiskoffering') }}</p>
+          <a-select
+            :loading="diskOfferingLoading"
+            v-model="selectedDiskOffering"
+            style="width: 100%;"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
+            <a-select-option v-for="(diskOffering, index) in diskOfferings" :value="diskOffering.id" :key="index">
+              {{ diskOffering.displaytext }}
+            </a-select-option>
+          </a-select>
         </template>
-      </div>
-      <a-alert style="margin-top: 15px" type="warning" v-else>
-        <span slot="message" v-html="$t('message.no.primary.stores')" />
-      </a-alert>
+      </template>
     </div>
 
     <a-divider />
 
     <div class="actions">
-      <a-button @click="closeModal">
-        {{ $t('label.cancel') }}
-      </a-button>
-      <a-button type="primary" ref="submit" @click="submitMigrateVolume">
-        {{ $t('label.ok') }}
-      </a-button>
+      <a-button @click="closeModal">{{ $t('label.cancel') }}</a-button>
+      <a-button type="primary" ref="submit" :disabled="!selectedStoragePool" @click="submitForm">{{ $t('label.ok') }}</a-button>
     </div>
 
   </div>
@@ -80,9 +64,13 @@
 
 <script>
 import { api } from '@/api'
+import StoragePoolSelectView from '@/components/view/StoragePoolSelectView'
 
 export default {
   name: 'MigrateVolume',
+  components: {
+    StoragePoolSelectView
+  },
   props: {
     resource: {
       type: Object,
@@ -95,71 +83,67 @@ export default {
       storagePools: [],
       selectedStoragePool: null,
       diskOfferings: [],
+      diskOfferingLoading: false,
       replaceDiskOffering: false,
       selectedDiskOffering: null,
       isSubmitted: false
     }
   },
-  created () {
-    this.fetchStoragePools()
-    this.resource.virtualmachineid && this.fetchDiskOfferings()
+  watch: {
+    replaceDiskOffering (newValue) {
+      if (newValue) {
+        this.fetchDiskOfferings()
+      }
+    }
   },
   methods: {
-    fetchStoragePools () {
-      if (this.resource.virtualmachineid) {
-        api('findStoragePoolsForMigration', {
-          id: this.resource.id
-        }).then(response => {
-          this.storagePools = response.findstoragepoolsformigrationresponse.storagepool || []
-          if (Array.isArray(this.storagePools) && this.storagePools.length) {
-            this.selectedStoragePool = this.storagePools[0].id || ''
-          }
-        }).catch(error => {
-          this.$notifyError(error)
-          this.closeModal()
-        })
-      } else {
-        api('listStoragePools', {
-          zoneid: this.resource.zoneid
-        }).then(response => {
-          this.storagePools = response.liststoragepoolsresponse.storagepool || []
-          this.storagePools = this.storagePools.filter(pool => { return pool.id !== this.resource.storageid })
-          if (Array.isArray(this.storagePools) && this.storagePools.length) {
-            this.selectedStoragePool = this.storagePools[0].id || ''
-          }
-        }).catch(error => {
-          this.$notifyError(error)
-          this.closeModal()
-        })
-      }
-    },
     fetchDiskOfferings () {
+      this.diskOfferingLoading = true
       api('listDiskOfferings', {
         listall: true
       }).then(response => {
         this.diskOfferings = response.listdiskofferingsresponse.diskoffering
-        this.selectedDiskOffering = this.diskOfferings[0].id
       }).catch(error => {
         this.$notifyError(error)
         this.closeModal()
+      }).finally(() => {
+        this.diskOfferingLoading = false
+        if (this.diskOfferings.length > 0) {
+          this.selectedDiskOffering = this.diskOfferings[0].id
+        }
       })
     },
-    closeModal () {
-      this.$parent.$parent.close()
+    handleStoragePoolsChange (storagePools) {
+      this.storagePools = storagePools
     },
-    submitMigrateVolume () {
+    handleStoragePoolSelect (storagePool) {
+      this.selectedStoragePool = storagePool
+    },
+    handleKeyboardSubmit () {
+      if (!this.selectedStoragePool) {
+        return
+      }
+      this.submitForm()
+    },
+    closeModal () {
+      this.$emit('close-action')
+    },
+    submitForm () {
       if (this.isSubmitted) return
       if (this.storagePools.length === 0) {
         this.closeModal()
         return
       }
       this.isSubmitted = true
-      api('migrateVolume', {
+      var params = {
         livemigrate: this.resource.vmstate === 'Running',
-        storageid: this.selectedStoragePool,
-        volumeid: this.resource.id,
-        newdiskofferingid: this.replaceDiskOffering ? this.selectedDiskOffering : null
-      }).then(response => {
+        storageid: this.selectedStoragePool.id,
+        volumeid: this.resource.id
+      }
+      if (this.replaceDiskOffering) {
+        params.newdiskofferingid = this.selectedDiskOffering
+      }
+      api('migrateVolume', params).then(response => {
         this.$pollJob({
           jobId: response.migratevolumeresponse.jobid,
           successMessage: this.$t('message.success.migrate.volume'),
@@ -185,14 +169,18 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  .migrate-volume-container {
-    width: 85vw;
+  .form {
+    width: 80vw;
 
-    @media (min-width: 760px) {
-      width: 500px;
+    @media (min-width: 900px) {
+      width: 850px;
     }
   }
 
+  .top-spaced {
+    margin-top: 20px;
+  }
+
   .actions {
     display: flex;
     justify-content: flex-end;
@@ -204,14 +192,4 @@ export default {
       }
     }
   }
-
-  .modal-form {
-    margin-top: -20px;
-
-    &__label {
-      margin-top: 10px;
-      margin-bottom: 5px;
-    }
-
-  }
 </style>
diff --git a/ui/tests/common/index.js b/ui/tests/common/index.js
index e152c7152bc..bd1d6d6bff8 100644
--- a/ui/tests/common/index.js
+++ b/ui/tests/common/index.js
@@ -21,7 +21,7 @@ import mockRouter from '../mock/mockRouter'
 
 import localVue from '../setup'
 import { mount } from '@vue/test-utils'
-import { pollJobPlugin, notifierPlugin, configUtilPlugin, apiMetaUtilPlugin, toLocaleDatePlugin, showIconPlugin, resourceTypePlugin } from '@/utils/plugins'
+import { pollJobPlugin, notifierPlugin, configUtilPlugin, apiMetaUtilPlugin, toLocaleDatePlugin, showIconPlugin, resourceTypePlugin, fileSizeUtilPlugin } from '@/utils/plugins'
 
 localVue.use(pollJobPlugin)
 localVue.use(notifierPlugin)
@@ -30,6 +30,7 @@ localVue.use(apiMetaUtilPlugin)
 localVue.use(toLocaleDatePlugin)
 localVue.use(showIconPlugin)
 localVue.use(resourceTypePlugin)
+localVue.use(fileSizeUtilPlugin)
 
 function createMockRouter (newRoutes = []) {
   let routes = []