diff --git a/tools/otagui/src/components/OTAOptions.vue b/tools/otagui/src/components/OTAOptions.vue
index b194b59b3..6aee09fe0 100644
--- a/tools/otagui/src/components/OTAOptions.vue
+++ b/tools/otagui/src/components/OTAOptions.vue
@@ -1,76 +1,55 @@
 <template>
-  <form @submit.prevent="sendForm">
-    <FileSelect
-      v-if="input.isIncremental"
-      v-model="input.incremental"
-      label="Select the source file"
-      :options="targetDetails"
-    />
-    <FileSelect
-      v-model="input.target"
-      label="Select a target file"
-      :options="targetDetails"
-    />
-    <v-row>
-      <v-col
-        v-for="flag in basicFlags"
-        :key="flag.key"
-        cols="12"
-        md="4"
-      >
-        <BaseCheckbox
-          v-model="input[flag.key]"
-          :label="flag.label"
-        />
-      </v-col>
-    </v-row>
-    <div v-if="input.isPartial">
-      <v-divider />
-      <h3>Select Partitions</h3>
-      <PartialCheckbox
-        v-model="input.partial"
-        :labels="updatablePartitions"
+  <v-row>
+    <v-col
+      v-for="flag in basicFlags"
+      :key="flag.key"
+      cols="12"
+      md="4"
+    >
+      <BaseCheckbox
+        v-model="otaConfig[flag.key]"
+        :label="flag.label"
       />
-      <v-divider />
-    </div>
-    <v-btn
-      block
-      @click="moreOptions = !moreOptions"
-    >
-      More Options
-    </v-btn>
-    <v-row v-if="moreOptions">
-      <v-col
-        v-for="flag in extraFlags"
-        :key="flag.key"
-        cols="12"
-        md="4"
-      >
-        <BaseCheckbox
-          v-model="input[flag.key]"
-          :label="flag.label"
-        />
-      </v-col>
-    </v-row>
-    <v-divider class="my-5" />
-    <BaseInput
-      v-model="input.extra"
-      :label="'Extra Configurations'"
+    </v-col>
+  </v-row>
+  <div v-if="otaConfig.isPartial">
+    <v-divider />
+    <h3>Select Partitions</h3>
+    <PartialCheckbox
+      v-model="otaConfig.partial"
+      :labels="updatablePartitions"
     />
-    <v-divider class="my-5" />
-    <v-btn
-      block
-      type="submit"
+    <v-divider />
+  </div>
+  <v-btn
+    block
+    @click="moreOptions = !moreOptions"
+  >
+    More Options
+  </v-btn>
+  <v-row v-if="moreOptions">
+    <v-col
+      v-for="flag in extraFlags"
+      :key="flag.key"
+      cols="12"
+      md="4"
     >
-      Submit
-    </v-btn>
-  </form>
+      <BaseCheckbox
+        v-model="otaConfig[flag.key]"
+        :label="flag.label"
+      />
+    </v-col>
+  </v-row>
+  <v-divider class="my-5" />
+  <BaseInput
+    v-model="otaConfig.extra"
+    :label="'Extra Configurations'"
+  />
 </template>
 
 <script>
 import BaseInput from '@/components/BaseInput.vue'
 import BaseCheckbox from '@/components/BaseCheckbox.vue'
-import FileSelect from '@/components/FileSelect.vue'
 import PartialCheckbox from '@/components/PartialCheckbox.vue'
 import { OTAConfiguration, OTABasicFlags, OTAExtraFlags } from '@/services/JobSubmission.js'
 
@@ -78,7 +57,6 @@ export default {
   components: {
     BaseInput,
     BaseCheckbox,
-    FileSelect,
     PartialCheckbox,
   },
   props: {
@@ -86,18 +64,14 @@ export default {
       type: Array,
       default: () => [],
     },
-    incrementalSource: {
-      type: String,
-      default: '',
-    },
-    targetBuild: {
-      type: String,
-      default: '',
-    },
+    targetBuilds: {
+      type: Array,
+      default: () => []
+    }
   },
-  data() {
+  data () {
     return {
-      input: new OTAConfiguration(),
+      otaConfig: new OTAConfiguration(),
       moreOptions: false,
       basicFlags: OTABasicFlags,
       extraFlags: OTAExtraFlags
@@ -109,49 +83,24 @@ export default {
      * @return Array<String>
      */
     updatablePartitions() {
-      if (!this.input.target) return []
+      // TODO(lishutong): currently only give the partition list of first
+      // build, should use the intersections of the partitions of
+      // all given builds.
+      if (!this.targetBuilds | this.targetBuilds.length===0) return []
+      if (this.targetBuilds[0] === '') return []
       let target = this.targetDetails.filter(
-        (d) => d.path === this.input.target
+        (d) => d.path === this.targetBuilds[0]
       )
       return target[0].partitions
     },
-    checkIncremental() {
-      return this.input.isIncremental
-    },
   },
   watch: {
-    incrementalSource: {
-      handler: function () {
-        this.input.isIncremental = true
-        this.input.incremental = this.incrementalSource
+    otaConfig: {
+      handler () {
+        this.$emit('update:otaConfig', this.otaConfig)
       },
-    },
-    targetBuild: {
-      handler: function () {
-        this.input.target = this.targetBuild
-      },
-    },
-    checkIncremental: {
-      handler: function () {
-        this.$emit('update:isIncremental', this.checkIncremental)
-      },
-    },
-  },
-  methods: {
-    /**
-     * Send the configuration to the backend.
-     */
-    async sendForm() {
-      try {
-        let response_message = await this.input.sendForm()
-        alert(response_message)
-      } catch (err) {
-        alert(
-          'Job cannot be started properly for the following reasons: ' + err
-        )
-      }
-      this.input = new OTAInput()
-    },
-  },
+      deep: true
+    }
+  }
 }
 </script>
\ No newline at end of file
diff --git a/tools/otagui/src/components/PartialCheckbox.vue b/tools/otagui/src/components/PartialCheckbox.vue
index d18d011fb..9e716c36a 100644
--- a/tools/otagui/src/components/PartialCheckbox.vue
+++ b/tools/otagui/src/components/PartialCheckbox.vue
@@ -38,7 +38,7 @@ export default {
       default: new Array(),
     },
     modelValue: {
-      type: String,
+      type: Array,
       required: true
     },
   },
diff --git a/tools/otagui/src/components/SingleOTAOptions.vue b/tools/otagui/src/components/SingleOTAOptions.vue
new file mode 100644
index 000000000..39addf8fc
--- /dev/null
+++ b/tools/otagui/src/components/SingleOTAOptions.vue
@@ -0,0 +1,92 @@
+<template>
+  <form @submit.prevent="sendForm">
+    <FileSelect
+      v-if="otaConfig.isIncremental"
+      v-model="incrementalSource"
+      label="Select the source file"
+      :options="targetDetails"
+    />
+    <FileSelect
+      v-model="targetBuild"
+      label="Select a target file"
+      :options="targetDetails"
+    />
+    <OTAOptions
+      :targetDetails="targetDetails"
+      :targetBuilds="[targetBuild]"
+      @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 FileSelect from '@/components/FileSelect.vue'
+import { OTAConfiguration } from '@/services/JobSubmission.js'
+
+export default {
+  components: {
+    OTAOptions,
+    FileSelect,
+  },
+  props: {
+    targetDetails: {
+      type: Array,
+      default: () => [],
+    }
+  },
+  data() {
+    return {
+      incrementalSource: '',
+      targetBuild: '',
+      otaConfig: new OTAConfiguration(),
+    }
+  },
+  computed: {
+    checkIncremental() {
+      return this.otaConfig.isIncremental
+    },
+  },
+  watch: {
+    checkIncremental: {
+      handler: function () {
+        this.$emit('update:isIncremental', this.checkIncremental)
+      },
+    },
+  },
+  created() {
+    this.$emit('update:isIncremental', this.checkIncremental)
+    this.$emit('update:handler', this.setIncrementalSource, this.setTargetBuild)
+  },
+  methods: {
+    /**
+     * Send the configuration to the backend.
+     */
+    async sendForm() {
+      try {
+        let response_message = await this.otaConfig.sendForm(
+          this.targetBuild, this.incrementalSource)
+        alert(response_message)
+        this.otaConfig.reset()
+      } catch (err) {
+        alert(
+          'Job cannot be started properly for the following reasons: ' + err
+        )
+      }
+    },
+    setIncrementalSource (build) {
+      this.incrementalSource = build
+    },
+    setTargetBuild (build) {
+      this.targetBuild = build
+    }
+  },
+}
+</script>
\ No newline at end of file
diff --git a/tools/otagui/src/services/JobSubmission.js b/tools/otagui/src/services/JobSubmission.js
index f6acfb54e..4c97486f1 100644
--- a/tools/otagui/src/services/JobSubmission.js
+++ b/tools/otagui/src/services/JobSubmission.js
@@ -21,32 +21,50 @@ export class OTAConfiguration {
      * disable checkboxes of which dependencies are not fulfilled.
      */
     this.verbose = false,
-    this.target = '',
-    this.incremental = '',
     this.isIncremental = false,
     this.partial = [],
     this.isPartial = false,
     this.extra_keys = [],
-    this.extra = '',
-    this.id = uuid.v1()
+    this.extra = ''
   }
 
   /**
-   * Start the generation process, will throw an error if not succeed
+   * Start an OTA package generation from target build to incremental source.
+   * Throw an error if not succeed, otherwise will return the message from
+   * the backend.
+   * @param {String} targetBuild
+   * @param {String} incrementalSource
+   * @return String
    */
-  async sendForm() {
+  async sendForm(targetBuild, incrementalSource='') {
+    let jsonOptions = Object.assign({}, this)
+    jsonOptions.target = targetBuild
+    jsonOptions.incremental = incrementalSource
+    jsonOptions.id = uuid.v1()
     for (let flag of OTAExtraFlags) {
-      if (this[flag.key]) {
-        this.extra_keys.push(flag.key)
+      if (jsonOptions[flag.key]) {
+        jsonOptions.extra_keys.push(flag.key)
       }
     }
     try {
-      let response = await ApiServices.postInput(JSON.stringify(this), this.id)
+      let response = await ApiServices.postInput(JSON.stringify(jsonOptions), jsonOptions.id)
       return response.data
     } catch (err) {
       throw err
     }
   }
+
+  /**
+   * Reset all the flags being set in this object.
+   */
+  reset() {
+    for (let flag of OTAExtraFlags) {
+      if (this[flag.key]) {
+        delete this[flag.key]
+      }
+    }
+    this.constructor()
+  }
 }
 
 export const OTABasicFlags = [
diff --git a/tools/otagui/src/views/JobConfigure.vue b/tools/otagui/src/views/JobConfigure.vue
index 40e55e056..afd7252ae 100644
--- a/tools/otagui/src/views/JobConfigure.vue
+++ b/tools/otagui/src/views/JobConfigure.vue
@@ -1,14 +1,24 @@
 <template>
   <v-row>
     <v-col
+      id="dynamic-component-demo"
       cols="12"
       md="6"
     >
-      <OTAOptions
+      <button
+        v-for="tab in tabs"
+        :key="tab.label"
+        :class="['tab-button', { active: currentTab === tab.component }]"
+        @click="currentTab = tab.component"
+      >
+        {{ tab.label }}
+      </button>
+      <component
+        :is="currentTab"
+        class="tab-component"
         :targetDetails="targetDetails"
-        :incrementalSource="incrementalSource"
-        :targetBuild="targetBuild"
         @update:isIncremental="isIncremental = $event"
+        @update:handler="setHandler"
       />
     </v-col>
     <v-divider vertical />
@@ -17,10 +27,12 @@
       md="6"
       class="library"
     >
+      <!-- the key-binding refresh has to be used to reload the methods-->
       <BuildLibrary
+        :refresh="refresh"
         :isIncremental="isIncremental"
-        @update:incrementalSource="incrementalSource = $event"
-        @update:targetBuild="targetBuild = $event"
+        @update:incrementalSource="addIncrementalSource"
+        @update:targetBuild="addTargetBuild"
         @update:targetDetails="targetDetails = $event"
       />
     </v-col>
@@ -28,28 +40,68 @@
 </template>
 
 <script>
-import OTAOptions from '@/components/OTAOptions.vue'
+import SingleOTAOptions from '@/components/SingleOTAOptions.vue'
 import BuildLibrary from '@/components/BuildLibrary.vue'
 
 export default {
   components: {
-    OTAOptions,
-    BuildLibrary
+    SingleOTAOptions,
+    BuildLibrary,
   },
   data() {
     return {
-      incrementalSource: '',
-      targetBuild: '',
       targetDetails: [],
-      isIncremental: false
+      isIncremental: false,
+      currentTab: 'SingleOTAOptions',
+      refresh: false,
+      tabs: [
+        {label: 'Single OTA', component: 'SingleOTAOptions'},
+      ],
     }
   },
+  methods: {
+    setHandler(addIncrementalSource, addTargetBuild) {
+      this.refresh = true,
+      this.addIncrementalSource = addIncrementalSource
+      this.addTargetBuild = addTargetBuild
+      this.refresh = false
+    },
+    addIncrementalSource: () => {},
+    addTargetBuild: () => {}
+  }
 }
 </script>
 
 <style scoped>
-  .library {
-    overflow: scroll;
-    height:calc(100vh - 80px);
-  }
+.library {
+  overflow: scroll;
+  height: calc(100vh - 80px);
+}
+
+.tab-component {
+  border: 3px solid #eee;
+  border-radius: 2px;
+  padding: 20px;
+}
+
+.tab-button {
+  padding: 6px 10px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  background: #f0f0f0;
+  margin-bottom: -1px;
+  margin-right: -1px;
+}
+.tab-button:hover {
+  background: #e0e0e0;
+}
+.tab-button.active {
+  background: #e0e0e0;
+}
+.demo-tab {
+  border: 1px solid #ccc;
+  padding: 10px;
+}
 </style>>
\ No newline at end of file