diff --git a/tools/otagui/src/components/ChainOTAOptions.vue b/tools/otagui/src/components/ChainOTAOptions.vue
new file mode 100644
index 000000000..d4e394436
--- /dev/null
+++ b/tools/otagui/src/components/ChainOTAOptions.vue
@@ -0,0 +1,80 @@
+<template>
+  <form @submit.prevent="sendForm">
+    <FileList
+      v-model="targetBuilds"
+      label="Target files"
+      :movable="true"
+    />
+    <v-divider />
+    <OTAOptions
+      :targetDetails="targetDetails"
+      :targetBuilds="targetBuilds"
+      @update:otaConfig="otaConfig=$event"
+    />
+    <v-divider class="my-5" />
+    <v-btn
+      block
+      type="submit"
+    >
+      Submit
+    </v-btn>
+  </form>
+</template>
+
+<script>
+import OTAOptions from '@/components/OTAOptions.vue'
+import FileList from '@/components/FileList.vue'
+import { OTAConfiguration } from '@/services/JobSubmission.js'
+
+export default {
+  components: {
+    OTAOptions,
+    FileList,
+  },
+  props: {
+    targetDetails: {
+      type: Array,
+      default: () => [],
+    }
+  },
+  data() {
+    return {
+      targetBuilds: [],
+      otaConfig: new OTAConfiguration(),
+    }
+  },
+  created() {
+    this.$emit('update:isIncremental', false)
+    this.$emit('update:handler', this.addIncrementalSources, this.addTargetBuilds)
+  },
+  methods: {
+    /**
+     * Send the configuration to the backend.
+     */
+    async sendForm() {
+      if (this.targetBuilds.length<2) {
+        alert(
+          'At least two OTA packeges has to be given!'
+        )
+        return
+      }
+      try {
+        let response_messages = await this.otaConfig
+          .sendChainForms(this.targetBuilds)
+        alert(response_messages.join('\n'))
+        this.otaConfig.reset()
+      } catch (err) {
+        alert(
+          'Job cannot be started properly for the following reasons: ' + err
+        )
+      }
+    },
+    addIncrementalSources (build) {},
+    addTargetBuilds (build) {
+      if (!this.targetBuilds.includes(build)) {
+        this.targetBuilds.push(build)
+      }
+    }
+  },
+}
+</script>
\ No newline at end of file
diff --git a/tools/otagui/src/components/FileList.vue b/tools/otagui/src/components/FileList.vue
index 5b0248fec..8dfb876d1 100644
--- a/tools/otagui/src/components/FileList.vue
+++ b/tools/otagui/src/components/FileList.vue
@@ -14,13 +14,48 @@
       {{ build }}
     </option>
   </select>
-  <v-btn
+  <v-row
     class="my-2"
-    :disabled="!selected"
-    @click="deleteSelected"
   >
-    Remove selected item
-  </v-btn>
+    <v-col
+      cols="12"
+      md="4"
+    >
+      <v-btn
+        :disabled="!selected"
+        block
+        @click="deleteSelected"
+      >
+        Remove selected item
+      </v-btn>
+    </v-col>
+    <v-col
+      cols="12"
+      md="4"
+    >
+      <v-btn
+        v-if="movable"
+        :disabled="!selected"
+        block
+        @click="moveSelected(-1)"
+      >
+        &#128316;
+      </v-btn>
+    </v-col>
+    <v-col
+      cols="12"
+      md="4"
+    >
+      <v-btn
+        v-if="movable"
+        :disabled="!selected"
+        block
+        @click="moveSelected(1)"
+      >
+        &#128317;
+      </v-btn>
+    </v-col>
+  </v-row>
 </template>
 
 <script>
@@ -33,6 +68,10 @@ export default {
     modelValue: {
       type: Array,
       required: true
+    },
+    movable: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -61,6 +100,18 @@ export default {
         )
       }
       this.selected = null
+    },
+    moveSelected(direction) {
+      let selectedIndex = this.modelValue.indexOf(this.selected)
+      if (selectedIndex + direction > this.modelValue.length ||
+        selectedIndex + direction < 0) {
+        return
+      }
+      let tempArray = Array.from(this.modelValue)
+      let temp = this.modelValue[selectedIndex]
+      tempArray[selectedIndex] = tempArray[selectedIndex + direction]
+      tempArray[selectedIndex + direction] = temp
+      this.$emit("update:modelValue", tempArray)
     }
   }
 }
diff --git a/tools/otagui/src/services/JobSubmission.js b/tools/otagui/src/services/JobSubmission.js
index b14a81261..ff817e441 100644
--- a/tools/otagui/src/services/JobSubmission.js
+++ b/tools/otagui/src/services/JobSubmission.js
@@ -59,6 +59,28 @@ export class OTAConfiguration {
     return responses
   }
 
+  /**
+   * Take in an ordered list of target builds and generate OTA packages between
+   * them in order. For example, if there are n target builds, there will be
+   * n-1 OTA packages.
+   * @param {Array<String>} targetBuilds
+   * @return Array<String>
+   */
+  async sendChainForms(targetBuilds) {
+    const responses = []
+    this.isIncremental = true
+    for (let i = 0; i < targetBuilds.length-1; i++) {
+      try {
+        let response =
+          await this.sendForm(targetBuilds[i+1], targetBuilds[i])
+        responses.push(response)
+      } catch (err) {
+        throw err
+      }
+    }
+    return responses
+  }
+
   /**
    * Start an OTA package generation from target build to incremental source.
    * Throw an error if not succeed, otherwise will return the message from
diff --git a/tools/otagui/src/views/JobConfigure.vue b/tools/otagui/src/views/JobConfigure.vue
index dffddd047..ba30433fe 100644
--- a/tools/otagui/src/views/JobConfigure.vue
+++ b/tools/otagui/src/views/JobConfigure.vue
@@ -42,12 +42,14 @@
 <script>
 import SingleOTAOptions from '@/components/SingleOTAOptions.vue'
 import BatchOTAOptions from '@/components/BatchOTAOptions.vue'
+import ChainOTAOptions from '@/components/ChainOTAOptions.vue'
 import BuildLibrary from '@/components/BuildLibrary.vue'
 
 export default {
   components: {
     SingleOTAOptions,
     BatchOTAOptions,
+    ChainOTAOptions,
     BuildLibrary,
   },
   data() {
@@ -58,7 +60,8 @@ export default {
       refresh: false,
       tabs: [
         {label: 'Single OTA', component: 'SingleOTAOptions'},
-        {label: 'Batch OTA', component: 'BatchOTAOptions'}
+        {label: 'Batch OTA', component: 'BatchOTAOptions'},
+        {label: 'Chain OTA', component: 'ChainOTAOptions'}
       ],
     }
   },