diff --git a/src/assets/images/read-only.svg b/src/assets/images/read-only.svg
new file mode 100644
index 000000000..bd2b8206a
--- /dev/null
+++ b/src/assets/images/read-only.svg
@@ -0,0 +1 @@
+<svg fill="none" height="25" viewBox="0 0 25 25" width="25" xmlns="http://www.w3.org/2000/svg"><path d="m15 7 3 3m-8 2-3 3-1 4 4-1 3-3m-1-5 5-5 3 3-5 5m4 6-14-14" stroke="red" stroke-width="1.2"/></svg>
diff --git a/src/models/backingImage.js b/src/models/backingImage.js
index ec592d474..0bc64fdb4 100644
--- a/src/models/backingImage.js
+++ b/src/models/backingImage.js
@@ -1,4 +1,4 @@
-import { create, deleteBackingImage, query, deleteDisksOnBackingImage, uploadChunk, download, bulkDownload } from '../services/backingImage'
+import { create, deleteBackingImage, query, execAction, deleteDisksOnBackingImage, uploadChunk, download, bulkDownload } from '../services/backingImage'
 import { message, notification } from 'antd'
 import { delay } from 'dva/saga'
 import { wsChanges, updateState } from '../utils/websocket'
@@ -89,6 +89,16 @@ export default {
         payload.sourceType === 'upload' && notification.destroy()
       }
     },
+    *createBackingImageBackup({
+      url,
+      payload,
+    }, { call, put }) {
+      const resp = yield call(execAction, url, payload)
+      if (resp && resp.status === 200) {
+        message.success(`Successfully backup backing image ${payload.backingImageName}`, 5)
+      }
+      yield put({ type: 'query' })
+    },
     *delete({
       payload,
     }, { call, put }) {
diff --git a/src/routes/backingImage/BackingImageActions.js b/src/routes/backingImage/BackingImageActions.js
index ef5194205..73a99c8d4 100644
--- a/src/routes/backingImage/BackingImageActions.js
+++ b/src/routes/backingImage/BackingImageActions.js
@@ -3,9 +3,10 @@ import PropTypes from 'prop-types'
 import { Modal } from 'antd'
 import { DropOption } from '../../components'
 import { hasReadyBackingDisk } from '../../utils/status'
+
 const confirm = Modal.confirm
 
-function actions({ selected, deleteBackingImage, downloadBackingImage }) {
+function actions({ selected, deleteBackingImage, downloadBackingImage, openBackupBackingImageModal }) {
   const handleMenuClick = (event, record) => {
     event.domEvent?.stopPropagation?.()
     switch (event.key) {
@@ -20,6 +21,17 @@ function actions({ selected, deleteBackingImage, downloadBackingImage }) {
       case 'download':
         downloadBackingImage(record)
         break
+      case 'backup': {
+        openBackupBackingImageModal(record)
+        // const data = {
+        //   ...record,
+        //   // backupTargetName: 'default',
+        //   // backupTargetURL: 'nfs://longhorn-test-nfs-svc.default:/opt/backupstore',
+        //   // backingImageName: record.name,
+        // }
+        // backupBackingImage(data)
+        break
+      }
       default:
     }
   }
@@ -27,8 +39,9 @@ function actions({ selected, deleteBackingImage, downloadBackingImage }) {
   const disableDownloadAction = !hasReadyBackingDisk(selected)
 
   const availableActions = [
-    { key: 'delete', name: 'Delete' },
     { key: 'download', name: 'Download', disabled: disableDownloadAction, tooltip: disableDownloadAction ? 'Missing disk with ready state' : '' },
+    { key: 'backup', name: 'Backup' },
+    { key: 'delete', name: 'Delete' },
   ]
 
   return (
@@ -42,6 +55,7 @@ actions.propTypes = {
   selected: PropTypes.object,
   deleteBackingImage: PropTypes.func,
   downloadBackingImage: PropTypes.func,
+  openBackupBackingImageModal: PropTypes.func,
 }
 
 export default actions
diff --git a/src/routes/backingImage/BackingImageList.js b/src/routes/backingImage/BackingImageList.js
index e2801307e..355f17672 100644
--- a/src/routes/backingImage/BackingImageList.js
+++ b/src/routes/backingImage/BackingImageList.js
@@ -5,10 +5,11 @@ import BackingImageActions from './BackingImageActions'
 import { pagination } from '../../utils/page'
 import { formatMib } from '../../utils/formatter'
 
-function list({ loading, dataSource, deleteBackingImage, showDiskStateMapDetail, rowSelection, downloadBackingImage, height }) {
+function list({ loading, dataSource, openBackupBackingImageModal, deleteBackingImage, showDiskStateMapDetail, rowSelection, downloadBackingImage, height }) {
   const backingImageActionsProps = {
     deleteBackingImage,
     downloadBackingImage,
+    openBackupBackingImageModal,
   }
   const state = (record) => {
     if (record.deletionTimestamp) {
@@ -107,6 +108,7 @@ list.propTypes = {
   dataSource: PropTypes.array,
   deleteBackingImage: PropTypes.func,
   showDiskStateMapDetail: PropTypes.func,
+  openBackupBackingImageModal: PropTypes.func,
   rowSelection: PropTypes.object,
   height: PropTypes.number,
 }
diff --git a/src/routes/backingImage/CreateBackupBackingImageModal.js b/src/routes/backingImage/CreateBackupBackingImageModal.js
new file mode 100644
index 000000000..f83327e57
--- /dev/null
+++ b/src/routes/backingImage/CreateBackupBackingImageModal.js
@@ -0,0 +1,80 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Form, Select, Icon } from 'antd'
+import { ModalBlur } from '../../components'
+
+const FormItem = Form.Item
+const Option = Select.Option
+
+const formItemLayout = {
+  labelCol: {
+    span: 6,
+  },
+  wrapperCol: {
+    span: 15,
+  },
+}
+
+const modal = ({
+  backingImage,
+  availBackupTargets,
+  visible,
+  onCancel,
+  onOk,
+  form: {
+    getFieldDecorator,
+    getFieldValue,
+  },
+}) => {
+  function handleOk() {
+    const backupTarget = availBackupTargets.find(bkTarget => bkTarget.name === getFieldValue('backupTargetName'))
+    if (backupTarget) {
+      const url = backingImage.actions?.backupBackingImageCreate
+      const payload = {
+        ...backingImage,
+        backingImageName: backingImage.name,
+        backupTargetName: backupTarget.name,
+        backupTargetURL: backupTarget.backupTargetURL,
+      }
+      onOk(url, payload)
+    }
+  }
+
+  const modalOpts = {
+    title: 'Create Backup Backing Image',
+    visible,
+    onCancel,
+    onOk: handleOk,
+  }
+
+  return (
+    <ModalBlur {...modalOpts}>
+      <p type="warning">
+        <Icon style={{ marginRight: '10px' }} type="exclamation-circle" />Choose a backup target to backup <strong>{backingImage.name}</strong> backing image
+      </p>
+      <div style={{ display: 'flex' }}>
+        <FormItem label="Backup Target" style={{ width: '100%' }} {...formItemLayout}>
+          {getFieldDecorator('backupTargetName', {
+            initialValue: availBackupTargets.length > 0 ? availBackupTargets[0].name : '',
+          })(
+          <Select style={{ width: '100%' }}>
+            {availBackupTargets.map(bkTarget => <Option key={bkTarget.name} value={bkTarget.name}>{bkTarget.name}</Option>)}
+          </Select>
+          )}
+        </FormItem>
+      </div>
+    </ModalBlur>
+  )
+}
+
+modal.propTypes = {
+  backingImage: PropTypes.object,
+  availBackupTargets: PropTypes.array,
+  form: PropTypes.object.isRequired,
+  visible: PropTypes.bool,
+  onCancel: PropTypes.func,
+  item: PropTypes.object,
+  onOk: PropTypes.func,
+}
+
+export default Form.create()(modal)
diff --git a/src/routes/backingImage/index.js b/src/routes/backingImage/index.js
index d26fcd4e4..50544e6e6 100644
--- a/src/routes/backingImage/index.js
+++ b/src/routes/backingImage/index.js
@@ -6,9 +6,11 @@ import { Row, Col, Button, Progress, notification } from 'antd'
 import CreateBackingImage from './CreateBackingImage'
 import BackingImageList from './BackingImageList'
 import DiskStateMapDetail from './DiskStateMapDetail'
+import CreateBackupBackingImageModal from './CreateBackupBackingImageModal'
 import { Filter } from '../../components/index'
 import BackingImageBulkActions from './BackingImageBulkActions'
 import queryString from 'query-string'
+import { getAvailBackupTargets } from '../../utils/backupTarget'
 import style from './BackingImage.less'
 import C from '../../utils/constants'
 
@@ -18,6 +20,8 @@ class BackingImage extends React.Component {
     this.state = {
       height: 300,
       message: null,
+      backupBackingImageModalVisible: false,
+      selectedBackingImage: {},
     }
   }
 
@@ -37,6 +41,22 @@ class BackingImage extends React.Component {
     })
   }
 
+  handleBackupBackingImageModalOpen = (record) => {
+    this.setState({
+      ...this.state,
+      backupBackingImageModalVisible: true,
+      selectedBackingImage: record,
+    })
+  }
+
+  handleBackupBackingImageModalClose = () => {
+    this.setState({
+      ...this.state,
+      backupBackingImageModalVisible: false,
+      selectedBackingImage: {},
+    })
+  }
+
   uploadFile = (file, record) => {
     let totalSize = file.size
     this.props.dispatch({
@@ -65,8 +85,9 @@ class BackingImage extends React.Component {
   }
 
   render() {
-    const { dispatch, loading, location } = this.props
-    const { uploadFile } = this
+    const { dispatch, loading, location, backupTarget } = this.props
+    const { uploadFile, handleBackupBackingImageModalOpen, handleBackupBackingImageModalClose } = this
+    const { backupBackingImageModalVisible, selectedBackingImage } = this.state
     const { data: volumeData } = this.props.volume
     const { data, selected, createBackingImageModalVisible, createBackingImageModalKey, diskStateMapDetailModalVisible, diskStateMapDetailModalKey, diskStateMapDeleteDisabled, diskStateMapDeleteLoading, selectedDiskStateMapRows, selectedDiskStateMapRowKeys, selectedRows } = this.props.backingImage
     const { backingImageUploadPercent, backingImageUploadStarted } = this.props.app
@@ -103,6 +124,9 @@ class BackingImage extends React.Component {
           payload: record,
         })
       },
+      openBackupBackingImageModal: (record) => {
+        handleBackupBackingImageModalOpen(record)
+      },
       downloadBackingImage(record) {
         dispatch({
           type: 'backingImage/downloadBackingImage',
@@ -128,6 +152,23 @@ class BackingImage extends React.Component {
       },
     }
 
+    const createBackupBackingImageModalProps = {
+      backingImage: selectedBackingImage,
+      availBackupTargets: getAvailBackupTargets(backupTarget),
+      visible: backupBackingImageModalVisible,
+      onOk(url, payload) {
+        dispatch({
+          type: 'backingImage/createBackingImageBackup',
+          url,
+          payload,
+        })
+        handleBackupBackingImageModalClose()
+      },
+      onCancel() {
+        handleBackupBackingImageModalClose()
+      },
+    }
+
     const addBackingImage = () => {
       dispatch({
         type: 'backingImage/showCreateBackingImageModal',
@@ -315,6 +356,7 @@ class BackingImage extends React.Component {
         <BackingImageList {...backingImageListProps} />
         { createBackingImageModalVisible ? <CreateBackingImage key={createBackingImageModalKey} {...createBackingImageModalProps} /> : ''}
         { diskStateMapDetailModalVisible ? <DiskStateMapDetail key={diskStateMapDetailModalKey} {...diskStateMapDetailModalProps} /> : ''}
+        <CreateBackupBackingImageModal {...createBackupBackingImageModalProps} />
       </div>
     )
   }
@@ -323,10 +365,11 @@ class BackingImage extends React.Component {
 BackingImage.propTypes = {
   app: PropTypes.object,
   backingImage: PropTypes.object,
+  backupTarget: PropTypes.object,
   loading: PropTypes.bool,
   location: PropTypes.object,
   volume: PropTypes.object,
   dispatch: PropTypes.func,
 }
 
-export default connect(({ app, volume, backingImage, loading }) => ({ app, volume, backingImage, loading: loading.models.backingImage }))(BackingImage)
+export default connect(({ app, volume, backupTarget, backingImage, loading }) => ({ app, volume, backupTarget, backingImage, loading: loading.models.backingImage }))(BackingImage)
diff --git a/src/routes/backupTarget/BackupTargetList.js b/src/routes/backupTarget/BackupTargetList.js
index 2463a7aa0..da16ca540 100644
--- a/src/routes/backupTarget/BackupTargetList.js
+++ b/src/routes/backupTarget/BackupTargetList.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { Table, Icon, Tooltip } from 'antd'
 import BackupTargetActions from './BackupTargetActions'
 import { pagination } from '../../utils/page'
+import readOnly from '../../assets/images/read-only.svg'
 
 function list({ loading, dataSource, deleteBackupTarget, editBackupTarget, rowSelection, height }) {
   const columns = [
@@ -58,7 +59,17 @@ function list({ loading, dataSource, deleteBackupTarget, editBackupTarget, rowSe
       sorter: (a, b) => a.readOnly - b.readOnly,
       render: (text) => {
         return (
-          <div>{text.toString().firstUpperCase()}</div>
+          <>
+            {text === false ? (
+              <Tooltip title="This backup target is writable">
+                <Icon type="edit" theme="outlined" style={{ color: 'green', alignSelf: 'center' }} />
+              </Tooltip>
+            ) : (
+              <Tooltip title="This backup target is read-only, so it does not allow any backups to synchronize to it.">
+                <img style={{ width: 20, height: 20 }} src={readOnly} alt="readOnlyIcon" />
+              </Tooltip>)
+            }
+          </>
         )
       },
     }, {
@@ -69,7 +80,7 @@ function list({ loading, dataSource, deleteBackupTarget, editBackupTarget, rowSe
       sorter: (a, b) => a.default - b.default,
       render: (text) => {
         return (
-          <div>{text.toString().firstUpperCase()}</div>
+          <>{text === true ? (<Icon type="pushpin" theme="twoTone" style={{ alignSelf: 'center' }} />) : ''}</>
         )
       },
     }, {
@@ -81,10 +92,13 @@ function list({ loading, dataSource, deleteBackupTarget, editBackupTarget, rowSe
       render: (text) => {
         return (
           <div style={{ display: 'flex', justifyContent: 'center' }}>
-            <div>{text.toString().firstUpperCase()}</div>
-            {text === false && (
+            {text === true ? (
+               <Tooltip title="This backup target is available to sync backup to it">
+                <Icon type="check-square" style={{ color: 'green', alignSelf: 'center' }} />
+              </Tooltip>
+            ) : (
               <Tooltip title="This backup target is unavailable, please check the URL and credential secret are all correct.">
-                <Icon type="exclamation-circle" style={{ color: 'red', marginLeft: 4, alignSelf: 'center' }} />
+                <Icon type="exclamation-circle" style={{ color: 'red', alignSelf: 'center' }} />
               </Tooltip>
             )}
           </div>
diff --git a/src/routes/backupTarget/index.js b/src/routes/backupTarget/index.js
index 9ba1b2e80..dc72b2331 100644
--- a/src/routes/backupTarget/index.js
+++ b/src/routes/backupTarget/index.js
@@ -216,7 +216,7 @@ class BackupTarget extends React.Component {
         <Button className="out-container-button" size="large" type="primary" disabled={loading} onClick={() => this.handleCreateModalOpen()}>
           Create Backup Target
         </Button>
-        <BackupTargetList {...backupTargetListProps} />
+        <BackupTargetList key={Math.random()} {...backupTargetListProps} />
         {createBackupTargetModalVisible && <CreateBackupTargetModal {...createBackupTargetModalProps} />}
         {editBackupTargetModalVisible && <EditBackupTargetModal {...editBackupTargetModalProps} />}
       </div>
diff --git a/src/routes/recurringJob/CreateRecurringJob.js b/src/routes/recurringJob/CreateRecurringJob.js
index a9e16e172..dd2e40dc4 100644
--- a/src/routes/recurringJob/CreateRecurringJob.js
+++ b/src/routes/recurringJob/CreateRecurringJob.js
@@ -131,9 +131,9 @@ const modal = ({
   }
   const add = () => {
     const currentKeys = getFieldValue('keys')
-    const nextkeys = currentKeys.concat({ index: id++, initialValue: '' })
+    const nextKeys = currentKeys.concat({ index: id++, initialValue: '' })
     setFieldsValue({
-      keys: nextkeys,
+      keys: nextKeys,
     })
   }
   const addDefaultGroup = () => {
@@ -141,9 +141,9 @@ const modal = ({
     let currentId = groups ? groups.length - 1 : 0
     if (getFieldValue('groups')[currentId]) {
       const currentKeys = getFieldValue('keys')
-      const nextkeys = currentKeys.concat({ index: id++, initialValue: 'default' })
+      const nextKeys = currentKeys.concat({ index: id++, initialValue: 'default' })
       setFieldsValue({
-        keys: nextkeys,
+        keys: nextKeys,
       })
     } else {
       groups[currentId] = 'default'
@@ -175,7 +175,7 @@ const modal = ({
   }
 
   const showBackupTargetDropdown = () => {
-    return getFieldValue('task') === 'backup'
+    return getFieldValue('task') === 'backup' || getFieldValue('task') === 'backup-force-create'
   }
 
   // init params
@@ -220,9 +220,9 @@ const modal = ({
   }
   const addLabel = () => {
     const currentKeys = getFieldValue('keysForlabels')
-    const nextkeys = currentKeys.concat(id++)
+    const nextKeys = currentKeys.concat(id++)
     setFieldsValue({
-      keysForlabels: nextkeys,
+      keysForlabels: nextKeys,
     })
   }
   const keysForlabels = getFieldValue('keysForlabels')
@@ -319,7 +319,12 @@ const modal = ({
           && <FormItem label="Backup Target" {...formItemLayout}>
               {getFieldDecorator('backupTargetName', {
                 // eslint-disable-next-line no-nested-ternary
-                initialValue: isEdit ? item.backupTarget : availBackupTargets.length > 0 ? availBackupTargets[0].name : '',
+                initialValue: isEdit ? item.backupTargetName : availBackupTargets.length > 0 ? availBackupTargets[0].name : '',
+                rules: [
+                  {
+                    required: true,
+                  },
+                ],
               })(
               <Select disabled={isEdit} style={{ width: '80%' }}>
                 {availBackupTargets.map(bkTarget => <Option key={bkTarget.name} value={bkTarget.name}>{bkTarget.name}</Option>)}
diff --git a/src/routes/recurringJob/RecurringJobActions.js b/src/routes/recurringJob/RecurringJobActions.js
index 2c88405a1..b0f4205a7 100644
--- a/src/routes/recurringJob/RecurringJobActions.js
+++ b/src/routes/recurringJob/RecurringJobActions.js
@@ -29,8 +29,8 @@ function actions({ selected, deleteRecurringJob, editRecurringJob }) {
   }
 
   const availableActions = [
-    { key: 'delete', name: 'Delete' },
     { key: 'edit', name: 'Edit' },
+    { key: 'delete', name: 'Delete' },
   ]
 
   return (
diff --git a/src/routes/recurringJob/RecurringJobList.js b/src/routes/recurringJob/RecurringJobList.js
index 960fc39a0..e17f1ef55 100644
--- a/src/routes/recurringJob/RecurringJobList.js
+++ b/src/routes/recurringJob/RecurringJobList.js
@@ -36,7 +36,7 @@ function list({ loading, dataSource, rowSelection, height, deleteRecurringJob, e
       title: 'Type',
       dataIndex: 'task',
       key: 'task',
-      width: 100,
+      width: 150,
       render: (text, record) => {
         return (
           <div>{record.task}</div>
@@ -69,7 +69,7 @@ function list({ loading, dataSource, rowSelection, height, deleteRecurringJob, e
     }, {
       title: 'Retain',
       key: 'retain',
-      width: 120,
+      width: 80,
       render: (record) => {
         return (
           <div>{record.retain}</div>
@@ -78,7 +78,7 @@ function list({ loading, dataSource, rowSelection, height, deleteRecurringJob, e
     }, {
       title: 'Concurrency',
       key: 'concurrency',
-      width: 120,
+      width: 80,
       render: (record) => {
         return (
           <div>{record.concurrency}</div>
diff --git a/src/services/backingImage.js b/src/services/backingImage.js
index 057a74ea0..b664cc605 100644
--- a/src/services/backingImage.js
+++ b/src/services/backingImage.js
@@ -19,6 +19,14 @@ export async function create(params) {
   })
 }
 
+export async function execAction(url, params) {
+  return request({
+    url,
+    method: 'post',
+    data: params,
+  })
+}
+
 export async function deleteBackingImage(params) {
   if (params.actions && params.actions.backingImageCleanup) {
     return request({
diff --git a/src/utils/backupTarget.js b/src/utils/backupTarget.js
new file mode 100644
index 000000000..0a40837d8
--- /dev/null
+++ b/src/utils/backupTarget.js
@@ -0,0 +1,6 @@
+export function getAvailBackupTargets(backupTarget) {
+  if (!backupTarget || !backupTarget.data || !backupTarget.data.length) {
+    return []
+  }
+  return backupTarget.data.filter((item) => item.available && !item.readOnly)
+}
diff --git a/src/utils/dataDependency.js b/src/utils/dataDependency.js
index 5ca5875bb..95bb068ff 100644
--- a/src/utils/dataDependency.js
+++ b/src/utils/dataDependency.js
@@ -82,6 +82,9 @@ const dependency = {
     }, {
       ns: 'backingImage',
       key: 'backingimages',
+    }, {
+      ns: 'backupTarget',
+      key: 'backuptargets',
     }],
   },
   settings: {
@@ -173,7 +176,7 @@ const httpDataDependency = {
   '/volume': ['volume', 'host', 'setting', 'backupTarget', 'backingImage', 'engineimage', 'recurringJob', 'backup'],
   '/engineimage': ['engineimage'],
   '/recurringJob': ['recurringJob', 'backupTarget'],
-  '/backingImage': ['volume', 'backingImage'],
+  '/backingImage': ['volume', 'backingImage', 'backupTarget'],
   '/backupTarget': ['backupTarget'],
   '/setting': ['setting'],
   '/backup': ['host', 'setting', 'backingImage', 'backup'],