diff --git a/src/views/Configuration/Firmware/Firmware.vue b/src/views/Configuration/Firmware/Firmware.vue
index 5001702..e27c8a2 100644
--- a/src/views/Configuration/Firmware/Firmware.vue
+++ b/src/views/Configuration/Firmware/Firmware.vue
@@ -1,378 +1,93 @@
 <template>
   <b-container fluid="xl">
-    <page-title :description="$t('pageFirmware.pageDescription')" />
-    <b-row class="mb-4">
-      <b-col md="10" lg="12" xl="8" class="pr-xl-4">
-        <!-- Firmware on BMC -->
-        <page-section :section-title="$t('pageFirmware.firmwareOnBmc')">
-          <b-card-group deck>
-            <!-- Current FW -->
-            <b-card header-bg-variant="success">
-              <template #header>
-                <dl class="mb-0">
-                  <dt>{{ $t('pageFirmware.current') }}</dt>
-                  <dd class="mb-0">{{ bmcFirmwareCurrentVersion }}</dd>
-                </dl>
-              </template>
-              <dl class="my-0">
-                <dt>{{ $t('pageFirmware.state') }}:</dt>
-                <dd>{{ bmcFirmwareCurrentState }}</dd>
-              </dl>
-              <template #footer></template>
-            </b-card>
+    <page-title />
+    <alerts-server-power
+      v-if="isServerPowerOffRequired"
+      :is-host-off="isHostOff"
+    />
 
-            <!-- Backup FW -->
-            <b-card footer-class="p-0">
-              <template #header>
-                <dl class="mb-0">
-                  <dt>{{ $t('pageFirmware.backup') }}</dt>
-                  <dd class="mb-0">{{ bmcFirmwareBackupVersion }}</dd>
-                </dl>
-              </template>
-              <dl class="my-0">
-                <dt>{{ $t('pageFirmware.state') }}:</dt>
-                <dd>{{ bmcFirmwareBackupState }}</dd>
-              </dl>
-              <template #footer>
-                <b-btn
-                  v-b-modal.modal-reboot-backup-bmc
-                  :disabled="!bmcFirmwareBackupVersion"
-                  variant="link"
-                  size="sm"
-                >
-                  <icon-switch class="d-none d-sm-inline-block" />
-                  {{ $t('pageFirmware.makeCurrentVersion') }}</b-btn
-                >
-              </template>
-            </b-card>
-          </b-card-group>
-        </page-section>
+    <!-- Firmware cards -->
+    <b-row>
+      <b-col xl="10">
+        <!-- BMC Firmware -->
+        <bmc-cards :is-page-disabled="isPageDisabled" />
 
-        <!-- Firmware on Host -->
-        <page-section :section-title="$t('pageFirmware.firmwareOnHost')">
-          <b-card-group deck>
-            <!-- Current FW -->
-            <b-card header-bg-variant="success">
-              <template #header>
-                <dl class="mb-0">
-                  <dt>{{ $t('pageFirmware.current') }}</dt>
-                  <dd class="mb-0">{{ hostFirmwareCurrentVersion }}</dd>
-                </dl>
-              </template>
-              <!-- State -->
-              <dl class="my-0">
-                <dt>{{ $t('pageFirmware.state') }}:</dt>
-                <dd>{{ hostFirmwareCurrentState }}</dd>
-              </dl>
-            </b-card>
-
-            <!-- Backup FW -->
-            <b-card>
-              <template #header>
-                <dl class="mb-0">
-                  <dt>{{ $t('pageFirmware.backup') }}</dt>
-                  <dd class="mb-0">{{ hostFirmwareBackupVersion }}</dd>
-                </dl>
-              </template>
-              <!-- State -->
-              <dl class="my-0">
-                <dt>{{ $t('pageFirmware.state') }}:</dt>
-                <dd>{{ hostFirmwareBackupState }}</dd>
-              </dl>
-            </b-card>
-          </b-card-group>
-        </page-section>
-      </b-col>
-
-      <!-- Update code -->
-      <b-col sm="8" xl="4" class="update-code pl-xl-4">
-        <page-section :section-title="$t('pageFirmware.updateCode')">
-          <b-form @submit.prevent="onSubmitUpload">
-            <b-form-group :label="$t('pageFirmware.form.uploadLocation')">
-              <b-form-radio v-model="isWorkstationSelected" :value="true">
-                {{ $t('pageFirmware.form.workstation') }}
-              </b-form-radio>
-              <b-form-radio v-model="isWorkstationSelected" :value="false">
-                {{ $t('pageFirmware.form.tftpServer') }}
-              </b-form-radio>
-            </b-form-group>
-
-            <!-- Workstation Upload -->
-            <template v-if="isWorkstationSelected">
-              <b-form-group :label="$t('pageFirmware.form.imageFile')">
-                <b-form-text id="image-file-help-block">
-                  {{ $t('pageFirmware.form.onlyTarFilesAccepted') }}
-                </b-form-text>
-                <form-file
-                  id="image-file"
-                  accept=".tar"
-                  :state="getValidationState($v.file)"
-                  aria-describedby="image-file-help-block"
-                  @input="onFileUpload($event)"
-                >
-                  <template #invalid>
-                    <b-form-invalid-feedback role="alert">
-                      {{ $t('global.form.required') }}
-                    </b-form-invalid-feedback>
-                  </template>
-                </form-file>
-              </b-form-group>
-            </template>
-
-            <!-- TFTP Server Upload -->
-            <template v-else>
-              <b-form-group
-                :label="$t('pageFirmware.form.tftpServerAddress')"
-                label-for="tftp-ip"
-              >
-                <b-form-text id="server-address-help-block">
-                  {{ $t('pageFirmware.form.tftpServerAddressHelper') }}
-                </b-form-text>
-                <b-form-input
-                  id="tftp-id"
-                  v-model="tftpIpAddress"
-                  type="text"
-                  :state="getValidationState($v.tftpIpAddress)"
-                  aria-describedby="server-address-help-block"
-                  @input="$v.tftpIpAddress.$touch()"
-                />
-                <b-form-invalid-feedback role="alert">
-                  {{ $t('global.form.fieldRequired') }}
-                </b-form-invalid-feedback>
-              </b-form-group>
-              <b-form-group
-                :label="$t('pageFirmware.form.imageFileName')"
-                label-for="tftp-file-name"
-              >
-                <b-form-input
-                  id="tftp-file-name"
-                  v-model="tftpFileName"
-                  type="text"
-                  :state="getValidationState($v.tftpFileName)"
-                  @input="$v.tftpFileName.$touch()"
-                />
-                <b-form-invalid-feedback role="alert">
-                  {{ $t('global.form.fieldRequired') }}
-                </b-form-invalid-feedback>
-              </b-form-group>
-            </template>
-
-            <!-- Info alert -->
-            <alert variant="info" class="mt-4 mb-5">
-              <p class="font-weight-bold mb-1">
-                {{ $t('pageFirmware.alert.updateProcess') }}
-              </p>
-              <p>{{ $t('pageFirmware.alert.updateProcessInfo') }}</p>
-            </alert>
-
-            <b-btn type="submit" variant="primary">
-              {{ $t('pageFirmware.form.uploadAndRebootBmcOrHost') }}
-            </b-btn>
-          </b-form>
-        </page-section>
+        <!-- Host Firmware -->
+        <host-cards v-if="!isSingleFileUploadEnabled" />
       </b-col>
     </b-row>
 
-    <!-- Modals -->
-    <modal-upload @ok="uploadFirmware" />
-    <modal-reboot-backup-bmc
-      :current="bmcFirmwareCurrentVersion || '--'"
-      :backup="bmcFirmwareBackupVersion || '--'"
-      @ok="switchBmcFirmware"
-    />
+    <!-- Update firmware-->
+    <page-section
+      :section-title="$t('pageFirmware.sectionTitleUpdateFirmware')"
+    >
+      <b-row>
+        <b-col sm="8" md="6" xl="4">
+          <!-- Update form -->
+          <form-update
+            :is-host-off="isHostOff"
+            :is-page-disabled="isPageDisabled"
+          />
+        </b-col>
+      </b-row>
+    </page-section>
   </b-container>
 </template>
 
 <script>
-import { requiredIf } from 'vuelidate/lib/validators';
-import { mapGetters } from 'vuex';
-import IconSwitch from '@carbon/icons-vue/es/arrows--horizontal/20';
-
+import AlertsServerPower from './FirmwareAlertServerPower';
+import BmcCards from './FirmwareCardsBmc';
+import FormUpdate from './FirmwareFormUpdate';
+import HostCards from './FirmwareCardsHost';
 import PageSection from '@/components/Global/PageSection';
 import PageTitle from '@/components/Global/PageTitle';
-import Alert from '@/components/Global/Alert';
-import ModalUpload from './FirmwareModalUpload';
-import ModalRebootBackupBmc from './FirmwareModalRebootBackupBmc';
-import FormFile from '@/components/Global/FormFile';
 
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
 import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
 
 export default {
-  name: 'Firmware',
+  name: 'FirmwareSingleImage',
   components: {
-    Alert,
-    IconSwitch,
-    ModalRebootBackupBmc,
-    ModalUpload,
+    AlertsServerPower,
+    BmcCards,
+    FormUpdate,
+    HostCards,
     PageSection,
     PageTitle,
-    FormFile,
   },
-  mixins: [BVToastMixin, LoadingBarMixin, VuelidateMixin],
+  mixins: [LoadingBarMixin],
   beforeRouteLeave(to, from, next) {
     this.hideLoader();
-    this.clearRebootTimeout();
     next();
   },
   data() {
     return {
-      isWorkstationSelected: true,
-      file: null,
-      tftpIpAddress: null,
-      tftpFileName: null,
-      timeoutId: null,
-      loading: loading,
+      loading,
+      isServerPowerOffRequired:
+        process.env.VUE_APP_SERVER_OFF_REQUIRED === 'true',
     };
   },
   computed: {
-    ...mapGetters('firmware', [
-      'bmcFirmwareCurrentVersion',
-      'bmcFirmwareCurrentState',
-      'bmcFirmwareBackupVersion',
-      'bmcFirmwareBackupState',
-      'hostFirmwareCurrentVersion',
-      'hostFirmwareCurrentState',
-      'hostFirmwareBackupVersion',
-      'hostFirmwareBackupState',
-    ]),
-  },
-  watch: {
-    isWorkstationSelected: function () {
-      this.$v.$reset();
-      this.file = null;
-      this.tftpIpAddress = null;
-      this.tftpFileName = null;
+    hostStatus() {
+      return this.$store.getters['global/hostStatus'];
+    },
+    isHostOff() {
+      return this.hostStatus === 'off' ? true : false;
+    },
+    isSingleFileUploadEnabled() {
+      return this.$store.getters['firmware/isSingleFileUploadEnabled'];
+    },
+    isPageDisabled() {
+      if (this.isServerPowerOffRequired) {
+        return !this.isHostOff || this.loading || this.isOperationInProgress;
+      }
+      return this.loading || this.isOperationInProgress;
     },
   },
   created() {
     this.startLoader();
-    this.$store.dispatch('firmware/getUpdateServiceApplyTime');
     this.$store
       .dispatch('firmware/getFirmwareInformation')
       .finally(() => this.endLoader());
   },
-  validations() {
-    return {
-      file: {
-        required: requiredIf(function () {
-          return this.isWorkstationSelected;
-        }),
-      },
-      tftpIpAddress: {
-        required: requiredIf(function () {
-          return !this.isWorkstationSelected;
-        }),
-      },
-      tftpFileName: {
-        required: requiredIf(function () {
-          return !this.isWorkstationSelected;
-        }),
-      },
-    };
-  },
-  methods: {
-    onFileUpload(file) {
-      this.file = file;
-      this.$v.file.$touch();
-    },
-    uploadFirmware() {
-      const startTime = this.$options.filters.formatTime(new Date());
-      this.setRebootTimeout(360000); //6 minute timeout
-      this.infoToast(
-        this.$t('pageFirmware.toast.infoUploadStartTimeMessage', { startTime }),
-        { title: this.$t('pageFirmware.toast.infoUploadStartTimeTitle') }
-      );
-      if (this.isWorkstationSelected) {
-        this.dispatchWorkstationUpload();
-      } else {
-        this.dispatchTftpUpload();
-      }
-    },
-    dispatchWorkstationUpload() {
-      this.$store
-        .dispatch('firmware/uploadFirmware', this.file)
-        .then((success) =>
-          this.infoToast(success, {
-            title: this.$t('pageFirmware.toast.successUploadTitle'),
-          })
-        )
-        .catch(({ message }) => {
-          this.errorToast(message);
-          this.clearRebootTimeout();
-        });
-    },
-    dispatchTftpUpload() {
-      const data = {
-        address: this.tftpIpAddress,
-        filename: this.tftpFileName,
-      };
-      this.$store
-        .dispatch('firmware/uploadFirmwareTFTP', data)
-        .then((success) =>
-          this.infoToast(success, {
-            title: this.$t('pageFirmware.toast.successUploadTitle'),
-          })
-        )
-        .catch(({ message }) => {
-          this.errorToast(message);
-          this.clearRebootTimeout();
-        });
-    },
-    switchBmcFirmware() {
-      this.setRebootTimeout();
-      this.$store
-        .dispatch('firmware/switchBmcFirmware')
-        .then((success) =>
-          this.infoToast(success, { title: this.$t('global.status.success') })
-        )
-        .catch(({ message }) => {
-          this.errorToast(message);
-          this.clearRebootTimeout();
-        });
-    },
-    setRebootTimeout(timeoutMs = 60000) {
-      // Set a timeout to disable page interactions while
-      // an upload or BMC reboot is in progress
-      this.startLoader();
-      this.timeoutId = setTimeout(() => {
-        this.endLoader();
-        this.infoToast(
-          this.$t('pageFirmware.toast.infoRefreshApplicationMessage'),
-          {
-            title: this.$t('pageFirmware.toast.infoRefreshApplicationTitle'),
-            refreshAction: true,
-          }
-        );
-      }, timeoutMs);
-    },
-    clearRebootTimeout() {
-      if (this.timeoutId) {
-        clearTimeout(this.timeoutId);
-        this.endLoader();
-      }
-    },
-    onSubmitUpload() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      this.$bvModal.show('modal-upload');
-    },
-  },
 };
 </script>
-
-<style lang="scss" scoped>
-.update-code {
-  border-left: none;
-  @include media-breakpoint-up(xl) {
-    border-left: 1px solid gray('300');
-  }
-}
-.card-footer {
-  height: 40px;
-}
-.card-body {
-  padding: 0.75rem 1.25rem;
-}
-</style>