diff --git a/ui/src/views/compute/AssignInstance.vue b/ui/src/views/compute/AssignInstance.vue
index 3d83f3ff756d..5b0be80dc337 100644
--- a/ui/src/views/compute/AssignInstance.vue
+++ b/ui/src/views/compute/AssignInstance.vue
@@ -77,9 +77,14 @@
         </a-select>
       </div>
 
-      <a-button type="primary" class="submit-btn" @click="submitData">
-        {{ $t('label.submit') }}
-      </a-button>
+      <div class="submit-btn">
+        <a-button @click="closeAction">
+          {{ $t('label.cancel') }}
+        </a-button>
+        <a-button type="primary" @click="submitData">
+          {{ $t('label.submit') }}
+        </a-button>
+      </div>
 
     </div>
 
@@ -183,6 +188,9 @@ export default {
       this.selectedAccount = null
       this.fetchNetworks()
     },
+    closeAction () {
+      this.$emit('close-action')
+    },
     submitData () {
       let variableKey = ''
       let variableValue = ''
@@ -255,6 +263,10 @@ export default {
   .submit-btn {
     margin-top: 10px;
     align-self: flex-end;
+
+    button {
+      margin-left: 10px;
+    }
   }
 
   .required {