From 8047ae3d83ba0718fb7a42907036157e5c680b85 Mon Sep 17 00:00:00 2001
From: "Andrey V.Kosteltsev" <AKosteltsev@IBS.RU>
Date: Mon, 4 Jul 2022 23:59:32 +0300
Subject: IBS: _sila UI theme

---
 .env.sila                                          |  12 +
 src/assets/images/_sila/built-on-openbmc-logo.svg  |  13 +
 src/assets/images/_sila/login-company-logo.svg     |   1 +
 src/assets/images/_sila/logo-header.svg            |   1 +
 src/assets/styles/_obmc-sila.scss                  |   6 +
 src/assets/styles/bmc/_sila/_alert.scss            |  70 +++
 src/assets/styles/bmc/_sila/_badge.scss            |  21 +
 src/assets/styles/bmc/_sila/_base.scss             |  50 ++
 src/assets/styles/bmc/_sila/_bootstrap-grid.scss   |   8 +
 src/assets/styles/bmc/_sila/_buttons.scss          |  82 +++
 src/assets/styles/bmc/_sila/_calendar.scss         |  17 +
 src/assets/styles/bmc/_sila/_card.scss             |   5 +
 src/assets/styles/bmc/_sila/_dropdown.scss         |  31 ++
 src/assets/styles/bmc/_sila/_forms.scss            | 132 +++++
 src/assets/styles/bmc/_sila/_index.scss            |  18 +
 src/assets/styles/bmc/_sila/_kvm.scss              |  12 +
 src/assets/styles/bmc/_sila/_modal.scss            |  12 +
 src/assets/styles/bmc/_sila/_pagination.scss       |  24 +
 src/assets/styles/bmc/_sila/_section-divider.scss  |   3 +
 src/assets/styles/bmc/_sila/_sol.scss              |   3 +
 src/assets/styles/bmc/_sila/_tables.scss           | 171 ++++++
 src/assets/styles/bmc/_sila/_toasts.scss           |  61 +++
 src/components/_sila/AppHeader/AppHeader.vue       | 384 +++++++++++++
 src/components/_sila/AppHeader/index.js            |   2 +
 .../_sila/AppNavigation/AppNavigation.vue          | 255 +++++++++
 .../_sila/AppNavigation/AppNavigationMixin.js      | 182 +++++++
 src/components/_sila/AppNavigation/index.js        |   2 +
 src/components/_sila/Global/Alert.vue              |  47 ++
 src/components/_sila/Global/ButtonBackToTop.vue    |  68 +++
 src/components/_sila/Global/FormFile.vue           | 119 ++++
 src/components/_sila/Global/InfoTooltip.vue        |  35 ++
 .../_sila/Global/InputPasswordToggle.vue           |  54 ++
 src/components/_sila/Global/LoadingBar.vue         |  93 ++++
 src/components/_sila/Global/PageContainer.vue      |  37 ++
 src/components/_sila/Global/PageSection.vue        |  29 +
 src/components/_sila/Global/PageTitle.vue          |  32 ++
 src/components/_sila/Global/Search.vue             |  83 +++
 src/components/_sila/Global/StatusIcon.vue         |  61 +++
 src/components/_sila/Global/TableCellCount.vue     |  35 ++
 src/components/_sila/Global/TableDateFilter.vue    | 165 ++++++
 src/components/_sila/Global/TableFilter.vue        | 114 ++++
 src/components/_sila/Global/TableRowAction.vue     | 112 ++++
 src/components/_sila/Global/TableToolbar.vue       | 130 +++++
 src/components/_sila/Global/TableToolbarExport.vue |  36 ++
 src/components/_sila/Mixins/BVPaginationMixin.js   |  34 ++
 .../_sila/Mixins/BVTableSelectableMixin.js         |  41 ++
 src/components/_sila/Mixins/BVToastMixin.js        | 115 ++++
 src/components/_sila/Mixins/DataFormatterMixin.js  |  30 +
 src/components/_sila/Mixins/JumpLinkMixin.js       |  27 +
 src/components/_sila/Mixins/LoadingBarMixin.js     |  19 +
 .../_sila/Mixins/LocalTimezoneLabelMixin.js        |  14 +
 src/components/_sila/Mixins/SearchFilterMixin.js   |  14 +
 src/components/_sila/Mixins/TableFilterMixin.js    |  58 ++
 src/components/_sila/Mixins/TableRowExpandMixin.js |  15 +
 src/components/_sila/Mixins/TableSortMixin.js      |  11 +
 src/components/_sila/Mixins/VuelidateMixin.js      |  10 +
 src/env/assets/styles/_sila.scss                   |  92 ++++
 src/env/components/AppNavigation/sila.js           | 182 +++++++
 src/env/router/sila.js                             | 286 ++++++++++
 src/env/store/sila.js                              |  10 +
 src/layouts/_sila/AppLayout.vue                    |  91 ++++
 src/layouts/_sila/ConsoleLayout.vue                |   9 +
 src/layouts/_sila/LoginLayout.vue                  | 112 ++++
 src/views/_sila/ChangePassword/ChangePassword.vue  | 134 +++++
 src/views/_sila/ChangePassword/index.js            |   2 +
 .../_sila/HardwareStatus/Inventory/Inventory.vue   | 196 +++++++
 .../Inventory/InventoryServiceIndicator.vue        |  76 +++
 .../Inventory/InventoryTableAssembly.vue           | 153 ++++++
 .../Inventory/InventoryTableBmcManager.vue         | 245 +++++++++
 .../Inventory/InventoryTableChassis.vue            | 191 +++++++
 .../Inventory/InventoryTableDimmSlot.vue           | 255 +++++++++
 .../Inventory/InventoryTableFans.vue               | 190 +++++++
 .../Inventory/InventoryTablePowerSupplies.vue      | 208 +++++++
 .../Inventory/InventoryTableProcessors.vue         | 251 +++++++++
 .../Inventory/InventoryTableSystem.vue             | 224 ++++++++
 src/views/_sila/HardwareStatus/Inventory/index.js  |   2 +
 src/views/_sila/HardwareStatus/Sensors/Sensors.vue | 256 +++++++++
 src/views/_sila/HardwareStatus/Sensors/index.js    |   2 +
 src/views/_sila/Login/Login.vue                    | 146 +++++
 src/views/_sila/Login/index.js                     |   2 +
 src/views/_sila/Logs/Dumps/Dumps.vue               | 404 ++++++++++++++
 src/views/_sila/Logs/Dumps/DumpsForm.vue           |  97 ++++
 .../_sila/Logs/Dumps/DumpsModalConfirmation.vue    |  75 +++
 src/views/_sila/Logs/Dumps/index.js                |   2 +
 src/views/_sila/Logs/EventLogs/EventLogs.vue       | 604 +++++++++++++++++++++
 src/views/_sila/Logs/EventLogs/index.js            |   2 +
 src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue | 347 ++++++++++++
 src/views/_sila/Logs/PostCodeLogs/index.js         |   2 +
 .../_sila/Operations/FactoryReset/FactoryReset.vue | 117 ++++
 .../Operations/FactoryReset/FactoryResetModal.vue  | 113 ++++
 src/views/_sila/Operations/FactoryReset/index.js   |   2 +
 src/views/_sila/Operations/Firmware/Firmware.vue   |  93 ++++
 .../Firmware/FirmwareAlertServerPower.vue          |  50 ++
 .../_sila/Operations/Firmware/FirmwareCardsBmc.vue | 136 +++++
 .../Operations/Firmware/FirmwareCardsHost.vue      |  73 +++
 .../Operations/Firmware/FirmwareFormUpdate.vue     | 187 +++++++
 .../Firmware/FirmwareModalSwitchToRunning.vue      |  31 ++
 .../Firmware/FirmwareModalUpdateFirmware.vue       |  44 ++
 src/views/_sila/Operations/Firmware/index.js       |   2 +
 src/views/_sila/Operations/KeyClear/KeyClear.vue   | 106 ++++
 src/views/_sila/Operations/KeyClear/index.js       |   2 +
 src/views/_sila/Operations/Kvm/Kvm.vue             |  24 +
 src/views/_sila/Operations/Kvm/KvmConsole.vue      | 170 ++++++
 src/views/_sila/Operations/Kvm/index.js            |   2 +
 src/views/_sila/Operations/RebootBmc/RebootBmc.vue |  83 +++
 src/views/_sila/Operations/RebootBmc/index.js      |   2 +
 .../Operations/SerialOverLan/SerialOverLan.vue     |  24 +
 .../SerialOverLan/SerialOverLanConsole.vue         | 172 ++++++
 src/views/_sila/Operations/SerialOverLan/index.js  |   2 +
 .../ServerPowerOperations/BootSettings.vue         | 132 +++++
 .../ServerPowerOperations.vue                      | 260 +++++++++
 .../Operations/ServerPowerOperations/index.js      |   2 +
 .../VirtualMedia/ModalConfigureConnection.vue      | 145 +++++
 .../_sila/Operations/VirtualMedia/VirtualMedia.vue | 221 ++++++++
 src/views/_sila/Operations/VirtualMedia/index.js   |   2 +
 src/views/_sila/Overview/Overview.vue              | 100 ++++
 src/views/_sila/Overview/OverviewCard.vue          |  81 +++
 src/views/_sila/Overview/OverviewDumps.vue         |  54 ++
 src/views/_sila/Overview/OverviewEvents.vue        |  85 +++
 src/views/_sila/Overview/OverviewFirmware.vue      |  49 ++
 src/views/_sila/Overview/OverviewInventory.vue     |  57 ++
 src/views/_sila/Overview/OverviewNetwork.vue       |  71 +++
 src/views/_sila/Overview/OverviewPower.vue         |  48 ++
 src/views/_sila/Overview/OverviewQuickLinks.vue    |  56 ++
 src/views/_sila/Overview/OverviewServer.vue        |  47 ++
 src/views/_sila/Overview/index.js                  |   2 +
 src/views/_sila/PageNotFound/PageNotFound.vue      |  12 +
 src/views/_sila/PageNotFound/index.js              |   2 +
 .../_sila/ProfileSettings/ProfileSettings.vue      | 222 ++++++++
 src/views/_sila/ProfileSettings/index.js           |   2 +
 src/views/_sila/ResourceManagement/Power.vue       | 170 ++++++
 src/views/_sila/ResourceManagement/index.js        |   2 +
 .../Certificates/Certificates.vue                  | 322 +++++++++++
 .../Certificates/CsrCountryCodes.js                | 345 ++++++++++++
 .../Certificates/ModalGenerateCsr.vue              | 496 +++++++++++++++++
 .../Certificates/ModalUploadCertificate.vue        | 168 ++++++
 .../_sila/SecurityAndAccess/Certificates/index.js  |   2 +
 src/views/_sila/SecurityAndAccess/Ldap/Ldap.vue    | 435 +++++++++++++++
 .../SecurityAndAccess/Ldap/ModalAddRoleGroup.vue   | 164 ++++++
 .../SecurityAndAccess/Ldap/TableRoleGroups.vue     | 269 +++++++++
 src/views/_sila/SecurityAndAccess/Ldap/index.js    |   2 +
 .../_sila/SecurityAndAccess/Policies/Policies.vue  | 213 ++++++++
 .../_sila/SecurityAndAccess/Policies/index.js      |   2 +
 .../_sila/SecurityAndAccess/Sessions/Sessions.vue  | 294 ++++++++++
 .../_sila/SecurityAndAccess/Sessions/index.js      |   2 +
 .../UserManagement/ModalSettings.vue               | 215 ++++++++
 .../SecurityAndAccess/UserManagement/ModalUser.vue | 386 +++++++++++++
 .../UserManagement/TableRoles.vue                  |  92 ++++
 .../UserManagement/UserManagement.vue              | 391 +++++++++++++
 .../SecurityAndAccess/UserManagement/index.js      |   2 +
 src/views/_sila/Settings/DateTime/DateTime.vue     | 417 ++++++++++++++
 src/views/_sila/Settings/DateTime/index.js         |   2 +
 src/views/_sila/Settings/Network/ModalDns.vue      |  92 ++++
 src/views/_sila/Settings/Network/ModalHostname.vue | 110 ++++
 src/views/_sila/Settings/Network/ModalIpv4.vue     | 165 ++++++
 .../_sila/Settings/Network/ModalMacAddress.vue     | 109 ++++
 src/views/_sila/Settings/Network/Network.vue       | 167 ++++++
 .../Settings/Network/NetworkGlobalSettings.vue     | 161 ++++++
 .../Settings/Network/NetworkInterfaceSettings.vue  | 117 ++++
 src/views/_sila/Settings/Network/TableDns.vue      | 145 +++++
 src/views/_sila/Settings/Network/TableIpv4.vue     | 169 ++++++
 src/views/_sila/Settings/Network/index.js          |   2 +
 .../PowerRestorePolicy/PowerRestorePolicy.vue      |  91 ++++
 .../_sila/Settings/PowerRestorePolicy/index.js     |   2 +
 164 files changed, 16870 insertions(+)
 create mode 100644 .env.sila
 create mode 100644 src/assets/images/_sila/built-on-openbmc-logo.svg
 create mode 100644 src/assets/images/_sila/login-company-logo.svg
 create mode 100644 src/assets/images/_sila/logo-header.svg
 create mode 100644 src/assets/styles/_obmc-sila.scss
 create mode 100644 src/assets/styles/bmc/_sila/_alert.scss
 create mode 100644 src/assets/styles/bmc/_sila/_badge.scss
 create mode 100644 src/assets/styles/bmc/_sila/_base.scss
 create mode 100644 src/assets/styles/bmc/_sila/_bootstrap-grid.scss
 create mode 100644 src/assets/styles/bmc/_sila/_buttons.scss
 create mode 100644 src/assets/styles/bmc/_sila/_calendar.scss
 create mode 100644 src/assets/styles/bmc/_sila/_card.scss
 create mode 100644 src/assets/styles/bmc/_sila/_dropdown.scss
 create mode 100644 src/assets/styles/bmc/_sila/_forms.scss
 create mode 100644 src/assets/styles/bmc/_sila/_index.scss
 create mode 100644 src/assets/styles/bmc/_sila/_kvm.scss
 create mode 100644 src/assets/styles/bmc/_sila/_modal.scss
 create mode 100644 src/assets/styles/bmc/_sila/_pagination.scss
 create mode 100644 src/assets/styles/bmc/_sila/_section-divider.scss
 create mode 100644 src/assets/styles/bmc/_sila/_sol.scss
 create mode 100644 src/assets/styles/bmc/_sila/_tables.scss
 create mode 100644 src/assets/styles/bmc/_sila/_toasts.scss
 create mode 100644 src/components/_sila/AppHeader/AppHeader.vue
 create mode 100644 src/components/_sila/AppHeader/index.js
 create mode 100644 src/components/_sila/AppNavigation/AppNavigation.vue
 create mode 100644 src/components/_sila/AppNavigation/AppNavigationMixin.js
 create mode 100644 src/components/_sila/AppNavigation/index.js
 create mode 100644 src/components/_sila/Global/Alert.vue
 create mode 100644 src/components/_sila/Global/ButtonBackToTop.vue
 create mode 100644 src/components/_sila/Global/FormFile.vue
 create mode 100644 src/components/_sila/Global/InfoTooltip.vue
 create mode 100644 src/components/_sila/Global/InputPasswordToggle.vue
 create mode 100644 src/components/_sila/Global/LoadingBar.vue
 create mode 100644 src/components/_sila/Global/PageContainer.vue
 create mode 100644 src/components/_sila/Global/PageSection.vue
 create mode 100644 src/components/_sila/Global/PageTitle.vue
 create mode 100644 src/components/_sila/Global/Search.vue
 create mode 100644 src/components/_sila/Global/StatusIcon.vue
 create mode 100644 src/components/_sila/Global/TableCellCount.vue
 create mode 100644 src/components/_sila/Global/TableDateFilter.vue
 create mode 100644 src/components/_sila/Global/TableFilter.vue
 create mode 100644 src/components/_sila/Global/TableRowAction.vue
 create mode 100644 src/components/_sila/Global/TableToolbar.vue
 create mode 100644 src/components/_sila/Global/TableToolbarExport.vue
 create mode 100644 src/components/_sila/Mixins/BVPaginationMixin.js
 create mode 100644 src/components/_sila/Mixins/BVTableSelectableMixin.js
 create mode 100644 src/components/_sila/Mixins/BVToastMixin.js
 create mode 100644 src/components/_sila/Mixins/DataFormatterMixin.js
 create mode 100644 src/components/_sila/Mixins/JumpLinkMixin.js
 create mode 100644 src/components/_sila/Mixins/LoadingBarMixin.js
 create mode 100644 src/components/_sila/Mixins/LocalTimezoneLabelMixin.js
 create mode 100644 src/components/_sila/Mixins/SearchFilterMixin.js
 create mode 100644 src/components/_sila/Mixins/TableFilterMixin.js
 create mode 100644 src/components/_sila/Mixins/TableRowExpandMixin.js
 create mode 100644 src/components/_sila/Mixins/TableSortMixin.js
 create mode 100644 src/components/_sila/Mixins/VuelidateMixin.js
 create mode 100644 src/env/assets/styles/_sila.scss
 create mode 100644 src/env/components/AppNavigation/sila.js
 create mode 100644 src/env/router/sila.js
 create mode 100644 src/env/store/sila.js
 create mode 100644 src/layouts/_sila/AppLayout.vue
 create mode 100644 src/layouts/_sila/ConsoleLayout.vue
 create mode 100644 src/layouts/_sila/LoginLayout.vue
 create mode 100644 src/views/_sila/ChangePassword/ChangePassword.vue
 create mode 100644 src/views/_sila/ChangePassword/index.js
 create mode 100644 src/views/_sila/HardwareStatus/Inventory/Inventory.vue
 create mode 100644 src/views/_sila/HardwareStatus/Inventory/InventoryServiceIndicator.vue
 create mode 100644 src/views/_sila/HardwareStatus/Inventory/InventoryTableAssembly.vue
 create mode 100644 src/views/_sila/HardwareStatus/Inventory/InventoryTableBmcManager.vue
 create mode 100644 src/views/_sila/HardwareStatus/Inventory/InventoryTableChassis.vue
 create mode 100644 src/views/_sila/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
 create mode 100644 src/views/_sila/HardwareStatus/Inventory/InventoryTableFans.vue
 create mode 100644 src/views/_sila/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
 create mode 100644 src/views/_sila/HardwareStatus/Inventory/InventoryTableProcessors.vue
 create mode 100644 src/views/_sila/HardwareStatus/Inventory/InventoryTableSystem.vue
 create mode 100644 src/views/_sila/HardwareStatus/Inventory/index.js
 create mode 100644 src/views/_sila/HardwareStatus/Sensors/Sensors.vue
 create mode 100644 src/views/_sila/HardwareStatus/Sensors/index.js
 create mode 100644 src/views/_sila/Login/Login.vue
 create mode 100644 src/views/_sila/Login/index.js
 create mode 100644 src/views/_sila/Logs/Dumps/Dumps.vue
 create mode 100644 src/views/_sila/Logs/Dumps/DumpsForm.vue
 create mode 100644 src/views/_sila/Logs/Dumps/DumpsModalConfirmation.vue
 create mode 100644 src/views/_sila/Logs/Dumps/index.js
 create mode 100644 src/views/_sila/Logs/EventLogs/EventLogs.vue
 create mode 100644 src/views/_sila/Logs/EventLogs/index.js
 create mode 100644 src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue
 create mode 100644 src/views/_sila/Logs/PostCodeLogs/index.js
 create mode 100644 src/views/_sila/Operations/FactoryReset/FactoryReset.vue
 create mode 100644 src/views/_sila/Operations/FactoryReset/FactoryResetModal.vue
 create mode 100644 src/views/_sila/Operations/FactoryReset/index.js
 create mode 100644 src/views/_sila/Operations/Firmware/Firmware.vue
 create mode 100644 src/views/_sila/Operations/Firmware/FirmwareAlertServerPower.vue
 create mode 100644 src/views/_sila/Operations/Firmware/FirmwareCardsBmc.vue
 create mode 100644 src/views/_sila/Operations/Firmware/FirmwareCardsHost.vue
 create mode 100644 src/views/_sila/Operations/Firmware/FirmwareFormUpdate.vue
 create mode 100644 src/views/_sila/Operations/Firmware/FirmwareModalSwitchToRunning.vue
 create mode 100644 src/views/_sila/Operations/Firmware/FirmwareModalUpdateFirmware.vue
 create mode 100644 src/views/_sila/Operations/Firmware/index.js
 create mode 100644 src/views/_sila/Operations/KeyClear/KeyClear.vue
 create mode 100644 src/views/_sila/Operations/KeyClear/index.js
 create mode 100644 src/views/_sila/Operations/Kvm/Kvm.vue
 create mode 100644 src/views/_sila/Operations/Kvm/KvmConsole.vue
 create mode 100644 src/views/_sila/Operations/Kvm/index.js
 create mode 100644 src/views/_sila/Operations/RebootBmc/RebootBmc.vue
 create mode 100644 src/views/_sila/Operations/RebootBmc/index.js
 create mode 100644 src/views/_sila/Operations/SerialOverLan/SerialOverLan.vue
 create mode 100644 src/views/_sila/Operations/SerialOverLan/SerialOverLanConsole.vue
 create mode 100644 src/views/_sila/Operations/SerialOverLan/index.js
 create mode 100644 src/views/_sila/Operations/ServerPowerOperations/BootSettings.vue
 create mode 100644 src/views/_sila/Operations/ServerPowerOperations/ServerPowerOperations.vue
 create mode 100644 src/views/_sila/Operations/ServerPowerOperations/index.js
 create mode 100644 src/views/_sila/Operations/VirtualMedia/ModalConfigureConnection.vue
 create mode 100644 src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue
 create mode 100644 src/views/_sila/Operations/VirtualMedia/index.js
 create mode 100644 src/views/_sila/Overview/Overview.vue
 create mode 100644 src/views/_sila/Overview/OverviewCard.vue
 create mode 100644 src/views/_sila/Overview/OverviewDumps.vue
 create mode 100644 src/views/_sila/Overview/OverviewEvents.vue
 create mode 100644 src/views/_sila/Overview/OverviewFirmware.vue
 create mode 100644 src/views/_sila/Overview/OverviewInventory.vue
 create mode 100644 src/views/_sila/Overview/OverviewNetwork.vue
 create mode 100644 src/views/_sila/Overview/OverviewPower.vue
 create mode 100644 src/views/_sila/Overview/OverviewQuickLinks.vue
 create mode 100644 src/views/_sila/Overview/OverviewServer.vue
 create mode 100644 src/views/_sila/Overview/index.js
 create mode 100644 src/views/_sila/PageNotFound/PageNotFound.vue
 create mode 100644 src/views/_sila/PageNotFound/index.js
 create mode 100644 src/views/_sila/ProfileSettings/ProfileSettings.vue
 create mode 100644 src/views/_sila/ProfileSettings/index.js
 create mode 100644 src/views/_sila/ResourceManagement/Power.vue
 create mode 100644 src/views/_sila/ResourceManagement/index.js
 create mode 100644 src/views/_sila/SecurityAndAccess/Certificates/Certificates.vue
 create mode 100644 src/views/_sila/SecurityAndAccess/Certificates/CsrCountryCodes.js
 create mode 100644 src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
 create mode 100644 src/views/_sila/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
 create mode 100644 src/views/_sila/SecurityAndAccess/Certificates/index.js
 create mode 100644 src/views/_sila/SecurityAndAccess/Ldap/Ldap.vue
 create mode 100644 src/views/_sila/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
 create mode 100644 src/views/_sila/SecurityAndAccess/Ldap/TableRoleGroups.vue
 create mode 100644 src/views/_sila/SecurityAndAccess/Ldap/index.js
 create mode 100644 src/views/_sila/SecurityAndAccess/Policies/Policies.vue
 create mode 100644 src/views/_sila/SecurityAndAccess/Policies/index.js
 create mode 100644 src/views/_sila/SecurityAndAccess/Sessions/Sessions.vue
 create mode 100644 src/views/_sila/SecurityAndAccess/Sessions/index.js
 create mode 100644 src/views/_sila/SecurityAndAccess/UserManagement/ModalSettings.vue
 create mode 100644 src/views/_sila/SecurityAndAccess/UserManagement/ModalUser.vue
 create mode 100644 src/views/_sila/SecurityAndAccess/UserManagement/TableRoles.vue
 create mode 100644 src/views/_sila/SecurityAndAccess/UserManagement/UserManagement.vue
 create mode 100644 src/views/_sila/SecurityAndAccess/UserManagement/index.js
 create mode 100644 src/views/_sila/Settings/DateTime/DateTime.vue
 create mode 100644 src/views/_sila/Settings/DateTime/index.js
 create mode 100644 src/views/_sila/Settings/Network/ModalDns.vue
 create mode 100644 src/views/_sila/Settings/Network/ModalHostname.vue
 create mode 100644 src/views/_sila/Settings/Network/ModalIpv4.vue
 create mode 100644 src/views/_sila/Settings/Network/ModalMacAddress.vue
 create mode 100644 src/views/_sila/Settings/Network/Network.vue
 create mode 100644 src/views/_sila/Settings/Network/NetworkGlobalSettings.vue
 create mode 100644 src/views/_sila/Settings/Network/NetworkInterfaceSettings.vue
 create mode 100644 src/views/_sila/Settings/Network/TableDns.vue
 create mode 100644 src/views/_sila/Settings/Network/TableIpv4.vue
 create mode 100644 src/views/_sila/Settings/Network/index.js
 create mode 100644 src/views/_sila/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
 create mode 100644 src/views/_sila/Settings/PowerRestorePolicy/index.js

diff --git a/.env.sila b/.env.sila
new file mode 100644
index 00000000..f5000278
--- /dev/null
+++ b/.env.sila
@@ -0,0 +1,12 @@
+NODE_ENV=production
+VUE_APP_ENV_NAME="sila"
+VUE_APP_COMPANY_NAME="IBS"
+VUE_APP_GUI_NAME="BMC System Management"
+VUE_APP_SUBSCRIBE_SOCKET_DISABLED="true"
+VUE_APP_SWITCH_TO_BACKUP_IMAGE_DISABLED="true"
+VUE_APP_MODIFY_SSH_POLICY_DISABLED="true"
+VUE_APP_VIRTUAL_MEDIA_LIST_ENABLED="true"
+CUSTOM_STYLES="true"
+CUSTOM_APP_NAV="true"
+CUSTOM_STORE="true"
+CUSTOM_ROUTER="true"
diff --git a/src/assets/images/_sila/built-on-openbmc-logo.svg b/src/assets/images/_sila/built-on-openbmc-logo.svg
new file mode 100644
index 00000000..53e7fdc5
--- /dev/null
+++ b/src/assets/images/_sila/built-on-openbmc-logo.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="615.034" height="606.872" viewBox="88.47 5 615.034 606.872">
+  <path fill="#A7A8AB" d="M703.504 524.604c-10.908-23.902-39.128-34.437-63.03-23.528s-34.437 39.128-23.528 63.03 39.128 34.437 63.031 23.528a47.578 47.578 0 0022.916-22.239l-9.51-4.513c-9.083 18.301-31.281 25.773-49.582 16.69s-25.772-31.282-16.689-49.583c9.083-18.3 31.281-25.772 49.582-16.689a36.994 36.994 0 0117.225 17.816l9.585-4.512z"/>
+  <path fill="#579AC8" d="M256.378 213.7a136.858 136.858 0 0029.599 85.178c-.255.739-.382 1.529-.561 2.294a27.54 27.54 0 00-.867 6.553c0 15.487 12.556 28.044 28.044 28.044s28.044-12.557 28.044-28.044c0-15.489-12.556-28.045-28.044-28.045a27.219 27.219 0 00-3.06.179c-.79 0-1.555.204-2.32.331-36.755-47.793-27.808-116.333 19.986-153.088a109.135 109.135 0 0116.115-10.282V10.277l-1.963.536a204.136 204.136 0 00-18.152 5.609c-3.289 1.198-6.578 2.549-9.79 3.773v82.169l-.332.255A137.14 137.14 0 00256.378 213.7z"/>
+  <path fill="#579AC8" d="M395.146 251.228c-20.315.016-36.857-16.322-37.095-36.636H327.1c.124 31.721 22.467 59.011 53.539 65.394v115.619c-99.899-7.141-175.094-93.913-167.954-193.811a181.344 181.344 0 0138.721-99.659c.791.153 1.606.255 2.55.332.943.076 1.631 0 2.549 0 15.249.036 27.64-12.296 27.676-27.545.037-15.249-12.295-27.64-27.544-27.676-15.249-.037-27.64 12.295-27.677 27.544a27.607 27.607 0 001.413 8.785c-72.331 90.409-57.675 222.336 32.735 294.667a209.641 209.641 0 00130.89 45.941c3.595 0 7.165-.153 10.708-.356l4.156-.229V248.653a36.9 36.9 0 01-13.716 2.575z"/>
+  <path fill="#A3CE4D" d="M526.877 179.741a137.108 137.108 0 00-25.112-50.25c.337-1.088.609-2.194.815-3.314.391-1.819.596-3.672.612-5.532-.006-15.488-12.566-28.04-28.055-28.034-15.488.006-28.04 12.567-28.033 28.055.006 15.488 12.566 28.04 28.055 28.033 1.802 0 3.6-.175 5.368-.521 36.745 47.818 27.769 116.371-20.05 153.116a109.15 109.15 0 01-16.076 10.253v106.466a212.604 212.604 0 008.158-2.218 209.772 209.772 0 0021.747-7.648v-82.144c46.035-33.228 66.902-91.341 52.52-146.263h.051z"/>
+  <path fill="#A3CE4D" d="M559.204 343.442c71.162-91.297 54.84-222.996-36.457-294.157A209.588 209.588 0 00393.896 5c-4.181 0-8.311.153-12.416.408h-.28v174.358a37.046 37.046 0 0113.232-2.728h.688c20.5-.056 37.166 16.517 37.222 37.018V214.668h28.248c-.067-30.889-21.298-57.705-51.347-64.859v-116c99.813 8.435 173.888 96.185 165.453 195.997a181.375 181.375 0 01-37.495 95.994h-.179c-15.327-2.225-29.557 8.397-31.781 23.725a28.227 28.227 0 00-.291 4.014c0 15.488 12.557 28.044 28.045 28.044 15.488-.008 28.038-12.569 28.03-28.058a28.06 28.06 0 00-1.159-7.967 16.997 16.997 0 00-.662-2.116z"/>
+  <path fill="#A7A8AB" d="M601.5 589.998v-91.194h-11.957l-37.044 75.183-37.044-75.183h-12.109v91.194h10.631v-69.371l34.264 69.371h8.516l34.239-69.371v69.371z"/>
+  <path fill="#636567" d="M393.973 531.31a27.02 27.02 0 00-20.141-8.516 25.878 25.878 0 00-10.606 2.116 40.606 40.606 0 00-9.229 5.711v-6.884h-10.784v66.286h10.784v-37.706a19.726 19.726 0 015.303-14.022c7.39-7.505 19.463-7.599 26.968-.209l.209.209a19.783 19.783 0 015.303 13.971v37.682h10.478v-38.242a28.352 28.352 0 00-8.26-20.396M250.846 572.101a31.638 31.638 0 01-12.391 13.181 34.52 34.52 0 01-17.846 4.717h-16.011v21.874H194.4v-88.135h25.75a34.186 34.186 0 0124.398 9.586c10.573 10.042 13.149 25.905 6.298 38.777m-46.247 8.26h14.71a24.178 24.178 0 0017.184-6.73 21.899 21.899 0 007.036-16.674 21.362 21.362 0 00-6.883-16.342 24.037 24.037 0 00-17.03-6.399h-15.017v46.145zM334.367 560.246a11.65 11.65 0 00.357-3.468c0-18.814-15.985-34.061-35.693-34.061-19.707 0-35.692 15.297-35.692 34.061 0 18.765 15.985 34.062 35.692 34.062a35.695 35.695 0 0030.416-16.623l-8.286-6.246a25.215 25.215 0 01-22.129 12.747c-13.256.749-24.61-9.391-25.358-22.647s9.391-24.61 22.647-25.358a23.576 23.576 0 012.711 0 24.985 24.985 0 0123.838 16.673c0 .179.382 1.606.433 1.785H283.76v8.974l50.607.101zM173.113 544.388c0 20.459-16.585 37.044-37.044 37.044-20.458 0-37.044-16.585-37.044-37.044 0-20.458 16.585-37.043 37.044-37.043 20.459 0 37.044 16.585 37.044 37.043m10.504 0c0-26.273-21.299-47.572-47.573-47.572S88.47 518.114 88.47 544.388c0 26.274 21.299 47.573 47.573 47.573s47.574-21.299 47.574-47.573"/>
+  <path fill="#A7A8AB" d="M482.058 562.643c.028 9.532-7.677 17.282-17.209 17.311h-39.466v-34.622h39.491c9.526.042 17.223 7.784 17.209 17.312m-5.839-40.615c.001 7.123-5.752 12.909-12.874 12.951h-37.962v-25.928h37.859c7.129.027 12.889 5.822 12.875 12.951m2.397 17.082c9.51-8.376 10.429-22.875 2.053-32.384a22.952 22.952 0 00-16.56-7.771h-49.204v91.144H466.888c15.067-1.113 26.379-14.229 25.266-29.297a27.357 27.357 0 00-13.589-21.667"/>
+  <g fill="#99C248">
+    <path d="M101.054 479.658l8.647-50.502h14.193c3.789 0 6.487.241 8.095.724 2.503.735 4.432 2.102 5.788 4.1 1.354 1.998 2.032 4.467 2.032 7.406 0 2.963-.654 5.442-1.963 7.44s-3.273 3.515-5.891 4.548c2.044.688 3.68 1.929 4.909 3.721 1.229 1.791 1.843 3.881 1.843 6.27 0 3.261-.74 6.212-2.222 8.853-1.481 2.642-3.411 4.542-5.788 5.702-2.377 1.159-5.748 1.739-10.11 1.739h-19.533zm9.884-8.13h8.215c3.221 0 5.43-.229 6.626-.689 1.197-.459 2.198-1.303 3.003-2.531s1.208-2.612 1.208-4.151c0-1.813-.528-3.238-1.585-4.271s-2.722-1.551-4.996-1.551H113.21l-2.272 13.193zm3.786-21.978h6.513c2.849 0 4.894-.229 6.134-.688a5.744 5.744 0 002.929-2.377c.712-1.125 1.068-2.412 1.068-3.858 0-1.171-.265-2.164-.793-2.979s-1.195-1.361-2-1.637c-.805-.275-2.54-.413-5.207-.413h-6.586l-2.058 11.952zM148.174 443.073h8.144l-3.709 21.592c-.435 2.586-.652 4.206-.652 4.861 0 1.123.324 2.06.972 2.809.648.748 1.438 1.122 2.371 1.122 1.091 0 2.171-.39 3.24-1.171 1.5-1.079 2.694-2.485 3.581-4.22.887-1.734 1.645-4.255 2.273-7.562l3.245-17.432h8.143l-6.788 36.585h-7.618l.905-4.961c-3.299 3.858-6.859 5.788-10.681 5.788-2.411 0-4.328-.845-5.75-2.532-1.422-1.688-2.133-4.014-2.133-6.976 0-1.24.323-3.743.968-7.51l3.489-20.393zM184.179 443.073h8.096l-6.27 36.585h-8.096l6.27-36.585zm2.377-13.917h8.13l-1.55 8.957h-8.096l1.516-8.957zM194.1 479.658l8.647-50.502h8.13l-8.682 50.502H194.1zM211.703 450.411l1.316-7.338h4.193l1.019-5.855 9.445-6.914-2.32 12.77h5.122l-1.245 7.338h-5.202l-2.836 15.281c-.491 2.747-.736 4.343-.736 4.788 0 .82.218 1.43.655 1.828.437.398 1.188.598 2.256.598.339 0 1.273-.08 2.802-.241l-1.346 7.338a19.843 19.843 0 01-4.342.482c-2.824 0-4.936-.644-6.336-1.93s-2.1-3.169-2.1-5.649c0-1.148.369-3.743 1.106-7.785l2.694-14.71h-4.145zM246.634 464.467c0-5.994 1.354-11.093 4.065-15.296 3.008-4.616 7.36-6.924 13.056-6.924 4.271 0 7.676 1.446 10.214 4.341 2.537 2.894 3.807 6.924 3.807 12.091 0 6.063-1.58 11.213-4.737 15.45-3.158 4.237-7.286 6.356-12.384 6.356-4.157 0-7.533-1.436-10.128-4.307-2.596-2.869-3.893-6.774-3.893-11.711zm23.115-7.063c0-2.411-.57-4.306-1.709-5.684-1.139-1.378-2.583-2.067-4.333-2.067-1.473 0-2.854.506-4.144 1.516-1.289 1.011-2.417 2.768-3.383 5.271a21.43 21.43 0 00-1.45 7.786c0 2.732.593 4.856 1.778 6.373 1.186 1.516 2.653 2.273 4.402 2.273 2.21 0 4.085-1.172 5.628-3.514 2.141-3.215 3.211-7.2 3.211-11.954zM287.105 443.073h7.711l-.795 4.754c1.993-2.089 3.819-3.542 5.48-4.357 1.661-.814 3.373-1.223 5.137-1.223 2.405 0 4.329.838 5.771 2.514 1.443 1.676 2.165 3.972 2.165 6.887 0 1.263-.296 3.686-.887 7.269l-3.515 20.742h-8.143l3.56-20.738c.525-3.101.788-4.96.788-5.58 0-1.31-.315-2.313-.944-3.015-.629-.7-1.448-1.051-2.454-1.051-1.098 0-2.219.437-3.364 1.31-1.647 1.239-2.872 2.716-3.672 4.426-.801 1.712-1.604 4.921-2.412 9.629l-2.594 15.02h-8.095l6.263-36.587z"/>
+  </g>
+</svg>
diff --git a/src/assets/images/_sila/login-company-logo.svg b/src/assets/images/_sila/login-company-logo.svg
new file mode 100644
index 00000000..d0fa158c
--- /dev/null
+++ b/src/assets/images/_sila/login-company-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 241.23 240.05"><defs><style>.cls-1{fill:#a6a8ab;}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);}.cls-4{fill:url(#linear-gradient-3);}.cls-5{fill:url(#linear-gradient-4);}.cls-6{fill:#626366;}</style><linearGradient id="linear-gradient" x1="82.9" y1="11.55" x2="82.9" y2="154.54" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#00b0da"/><stop offset="1" stop-color="#008abf"/></linearGradient><linearGradient id="linear-gradient-2" x1="81.55" y1="27.55" x2="81.55" y2="158.66" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="156.66" y1="51.54" x2="156.66" y2="154.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a5d440"/><stop offset="1" stop-color="#8cce3f"/></linearGradient><linearGradient id="linear-gradient-4" x1="158.41" y1="51.54" x2="158.41" y2="154.8" xlink:href="#linear-gradient-3"/></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M241.23,205.77a18.66,18.66,0,1,0-.24,16L237.26,220a14.51,14.51,0,1,1,.21-12.46Z"/><path class="cls-2" d="M65.85,81.86a53.68,53.68,0,0,0,11.61,33.41c-.1.29-.15.6-.22.9a10.81,10.81,0,0,0-.34,2.57,11,11,0,1,0,11-11,10.75,10.75,0,0,0-1.2.07c-.31,0-.61.08-.91.13A42.82,42.82,0,0,1,99.95,43.86h0V2.07l-.77.21q-3.63.94-7.12,2.2c-1.29.47-2.58,1-3.84,1.48h0V38.19l-.13.1A53.79,53.79,0,0,0,65.85,81.86Z"/><path class="cls-3" d="M120.28,96.58a14.54,14.54,0,0,1-14.55-14.37H93.59v0a26.29,26.29,0,0,0,21,25.65v45.35A71.13,71.13,0,0,1,63.9,38.1c.31.06.63.1,1,.13s.64,0,1,0a10.83,10.83,0,1,0-10.25-7.41,82.23,82.23,0,0,0,64.18,133.6c1.41,0,2.81-.06,4.2-.14l1.63-.09h0V95.57A14.47,14.47,0,0,1,120.28,96.58Z"/><path class="cls-4" d="M171.95,68.54a53.78,53.78,0,0,0-9.85-19.71,11.31,11.31,0,0,0,.32-1.3,10.78,10.78,0,0,0,.24-2.17,11,11,0,1,0-8.89,10.8,42.83,42.83,0,0,1-14.17,64.08V162c1.08-.27,2.14-.56,3.2-.87a82.35,82.35,0,0,0,8.53-3V125.91a53.91,53.91,0,0,0,20.6-57.37Z"/><path class="cls-5" d="M184.63,132.75A82.21,82.21,0,0,0,119.79,0c-1.64,0-3.26.06-4.87.16h-.11V68.55h0A14.53,14.53,0,0,1,120,67.48h.27A14.56,14.56,0,0,1,134.87,82s0,.07,0,.11,0,.08,0,.13h11.08A26.21,26.21,0,0,0,125.81,56.8V11.3A71.14,71.14,0,0,1,176,125.83h-.07a11,11,0,0,0-12.58,10.88,11,11,0,0,0,11,11h0a11,11,0,0,0,10.54-14.13C184.82,133.3,184.73,133,184.63,132.75Z"/><polygon class="cls-1" points="201.22 231.42 201.22 195.65 196.53 195.65 182 225.14 167.47 195.65 162.72 195.65 162.72 231.42 166.89 231.42 166.89 204.21 180.33 231.42 183.67 231.42 197.1 204.21 197.1 231.42 201.22 231.42"/><path class="cls-6" d="M119.82,208.4a10.6,10.6,0,0,0-7.9-3.34,10.15,10.15,0,0,0-4.16.83,15.94,15.94,0,0,0-3.62,2.24v-2.7H99.91v26h4.23V216.64a7.74,7.74,0,0,1,2.08-5.5,7.48,7.48,0,0,1,10.66,0,7.76,7.76,0,0,1,2.08,5.48v14.78h4.11v-15a11.12,11.12,0,0,0-3.24-8"/><path class="cls-6" d="M63.68,224.4a12.41,12.41,0,0,1-4.86,5.17,13.54,13.54,0,0,1-7,1.85H45.54V240h-4V205.43H51.64a13.41,13.41,0,0,1,9.57,3.76,12.73,12.73,0,0,1,2.47,15.21m-18.14,3.24h5.77A9.48,9.48,0,0,0,58.05,225a8.59,8.59,0,0,0,2.76-6.54,8.38,8.38,0,0,0-2.7-6.41,9.43,9.43,0,0,0-6.68-2.51H45.54Z"/><path class="cls-6" d="M96.44,219.75a4.56,4.56,0,0,0,.14-1.36c0-7.38-6.27-13.36-14-13.36s-14,6-14,13.36,6.27,13.36,14,13.36a14,14,0,0,0,11.93-6.52l-3.25-2.45a9.89,9.89,0,0,1-8.68,5,9.43,9.43,0,1,1,0-18.83,9.8,9.8,0,0,1,9.35,6.54c0,.07.15.63.17.7H76.59v3.52Z"/><path class="cls-6" d="M33.19,213.53A14.53,14.53,0,1,1,18.66,199a14.53,14.53,0,0,1,14.53,14.53m4.12,0a18.66,18.66,0,1,0-18.66,18.66,18.66,18.66,0,0,0,18.66-18.66"/><path class="cls-1" d="M154.37,220.69a6.77,6.77,0,0,1-6.75,6.79H132.14V213.9h15.49a6.78,6.78,0,0,1,6.75,6.79m-2.29-15.93a5.08,5.08,0,0,1-5.05,5.08l-14.89,0V199.67H147a5.07,5.07,0,0,1,5.05,5.08m.94,6.7a9,9,0,0,0-5.69-15.75H128v35.75h20.14l.28,0v0A10.73,10.73,0,0,0,153,211.46"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/_sila/logo-header.svg b/src/assets/images/_sila/logo-header.svg
new file mode 100644
index 00000000..2dba9c4c
--- /dev/null
+++ b/src/assets/images/_sila/logo-header.svg
@@ -0,0 +1 @@
+<svg width="157" height="32" xmlns="http://www.w3.org/2000/svg"><g fill="#FFF" fill-rule="nonzero"><path d="M9.694 8.048c.016.761-.602 1.69-1.87 1.574-2.433 3.002-3.097 7.524-.99 11.37 1.078 1.966 2.637 3.435 4.661 4.409a10.04 10.04 0 003.743.981v-6.61c-1.17-.274-2.058-.918-2.626-1.978a3.713 3.713 0 01-.436-1.736h1.749c.046.723.343 1.313.954 1.72.607.405 1.264.455 1.96.227v9.957a11.43 11.43 0 01-4.16-.43c-2.385-.692-4.382-1.986-5.952-3.903C4.94 21.447 4.019 18.94 4 16.116c-.018-2.82.887-5.33 2.62-7.551-.34-1.039.44-1.988 1.329-2.06.97-.077 1.726.607 1.745 1.543zm12.485 2.994c-.017.08.01.191.06.257.897 1.191 1.45 2.524 1.562 4.006.217 2.864-.825 5.2-3.079 6.998-.044.035-.089.068-.132.103-.009.007-.015.016-.031.033v4.714l-1.692.561v-6.1c1.811-1.02 2.956-2.53 3.286-4.592.28-1.75-.154-3.342-1.212-4.774-.192 0-.383.019-.57-.003-.765-.088-1.374-.799-1.367-1.58.007-.802.62-1.493 1.398-1.577 1.144-.124 2.01.833 1.777 1.954zM16.372 4c.325.03.652.054.977.092 2.154.251 4.107 1.017 5.833 2.323 2.446 1.849 4.007 4.28 4.583 7.283.668 3.482-.094 6.666-2.202 9.527l-.103.141c.385 1.137-.411 2.074-1.344 2.18-.87.1-1.687-.57-1.76-1.472a1.61 1.61 0 011.834-1.707c2.157-2.655 3.036-6.877 1.246-10.714-1.976-4.235-5.944-5.847-8.593-5.997v6.625c1.82.567 2.806 1.787 2.95 3.7h-1.61c-.033-.74-.326-1.345-.947-1.766-.618-.417-1.286-.47-1.992-.226V4.04L15.61 4h.76zm-3.328.286v6.084c-1.916 1.087-3.064 2.704-3.309 4.902-.182 1.638.261 3.123 1.255 4.447a1.677 1.677 0 011.154.21c.597.355.888 1.099.7 1.796-.174.646-.806 1.137-1.479 1.15-1.09.02-1.842-.918-1.602-1.992a.244.244 0 00-.033-.18c-1.205-1.579-1.754-3.367-1.61-5.337.171-2.357 1.235-4.259 3.105-5.708l.14-.107V4.84l1.68-.553zM42.25 22c.476 0 .917-.049 1.323-.147a2.723 2.723 0 001.043-.483c.29-.224.516-.518.679-.882.163-.364.245-.807.245-1.33 0-.672-.17-1.232-.511-1.68-.34-.448-.861-.723-1.561-.826v-.028c.205-.037.404-.105.595-.203.191-.098.362-.233.511-.406.15-.173.27-.387.364-.644.093-.257.14-.562.14-.917 0-.373-.06-.716-.182-1.029a1.973 1.973 0 00-.581-.805c-.266-.224-.609-.397-1.029-.518-.42-.121-.924-.182-1.512-.182h-3.64V22h4.116zm-.756-5.628h-2.408v-3.64h2.198c.523 0 .964.03 1.323.091.36.06.651.159.875.294.224.135.387.313.49.532.103.22.154.488.154.805 0 .308-.044.581-.133.819a1.369 1.369 0 01-.441.602c-.205.163-.476.287-.812.371-.336.084-.751.126-1.246.126zm.014 4.816h-2.422v-4.004h2.534c.448 0 .854.026 1.218.077.364.051.677.147.938.287.261.14.462.338.602.595.14.257.21.595.21 1.015 0 .439-.063.791-.189 1.057a1.369 1.369 0 01-.567.616c-.252.145-.572.24-.959.287-.387.047-.842.07-1.365.07zm8.414 1.008c.317 0 .597-.04.84-.119a2.772 2.772 0 001.12-.679c.14-.14.266-.275.378-.406V22h.84v-7.252h-.84v3.948c0 .401-.051.77-.154 1.106a2.705 2.705 0 01-.434.868 1.946 1.946 0 01-.693.567 2.083 2.083 0 01-.931.203c-.663 0-1.139-.166-1.428-.497-.29-.331-.434-.81-.434-1.435v-4.76h-.84v4.774c0 .383.044.735.133 1.057.089.322.233.604.434.847.2.243.464.432.791.567.327.135.733.203 1.218.203zm6.216-9.03V11.92h-.924v1.246h.924zM56.096 22v-7.252h-.84V22h.84zm3.108 0V11.92h-.84V22h.84zm3.724.196c.205 0 .392-.023.56-.07.168-.047.303-.08.406-.098v-.686a4.055 4.055 0 01-.343.07 2.17 2.17 0 01-.343.028c-.177 0-.315-.019-.413-.056a.402.402 0 01-.217-.182.775.775 0 01-.084-.322 6.594 6.594 0 01-.014-.462v-4.97h1.358v-.7H62.48v-2.016h-.84v2.016h-1.022v.7h1.022v5.306c0 .541.11.917.329 1.127.22.21.539.315.959.315zm9.086 0a3.4 3.4 0 001.379-.273 2.99 2.99 0 001.064-.777 3.53 3.53 0 00.679-1.204c.159-.467.238-.99.238-1.568 0-.532-.068-1.031-.203-1.498a3.352 3.352 0 00-.623-1.211c-.28-.34-.63-.611-1.05-.812-.42-.2-.915-.301-1.484-.301-.56 0-1.05.1-1.47.301-.42.2-.77.474-1.05.819a3.52 3.52 0 00-.63 1.211c-.14.462-.21.959-.21 1.491 0 .635.089 1.19.266 1.666.177.476.418.873.721 1.19.303.317.658.555 1.064.714.406.159.842.243 1.309.252zm0-.756a2.41 2.41 0 01-1.064-.224 2.106 2.106 0 01-.77-.63 2.904 2.904 0 01-.469-.973 4.523 4.523 0 01-.161-1.239c0-.392.047-.772.14-1.141.093-.369.238-.695.434-.98.196-.285.45-.513.763-.686.313-.173.688-.259 1.127-.259.448 0 .826.08 1.134.238.308.159.56.376.756.651.196.275.34.6.434.973.093.373.14.775.14 1.204 0 .392-.047.77-.14 1.134-.093.364-.238.69-.434.98-.196.29-.45.52-.763.693-.313.173-.688.259-1.127.259zm5.74.56v-3.906c0-.252.01-.485.028-.7a2.67 2.67 0 01.154-.672 2.079 2.079 0 01.721-.98c.173-.13.366-.236.581-.315.215-.08.453-.119.714-.119.672 0 1.153.163 1.442.49.29.327.434.817.434 1.47V22h.84v-4.746c0-.299-.016-.586-.049-.861a1.806 1.806 0 00-.315-.805c-.261-.383-.583-.651-.966-.805a3.307 3.307 0 00-1.246-.231c-.504 0-.936.112-1.295.336-.36.224-.707.513-1.043.868v-1.008h-.84V22h.84zm15.199.294c1.654 0 2.928-.583 3.821-1.75.761-.994 1.142-2.24 1.142-3.74 0-1.385-.333-2.522-.998-3.41-.853-1.14-2.165-1.71-3.938-1.71-1.695 0-2.976.62-3.842 1.86-.674.966-1.011 2.128-1.011 3.486 0 1.504.394 2.748 1.182 3.733.884 1.02 2.099 1.53 3.644 1.53zm.164-1.217c-1.263 0-2.175-.382-2.738-1.145-.563-.763-.844-1.7-.844-2.813 0-1.39.328-2.441.984-3.155.656-.713 1.504-1.07 2.543-1.07 1.071 0 1.915.36 2.533 1.08.617.72.926 1.67.926 2.851 0 1.117-.268 2.105-.803 2.964-.536.859-1.403 1.288-2.601 1.288zm7.39 3.842v-3.74c.268.333.512.568.73.705.375.241.837.362 1.389.362.701 0 1.317-.216 1.845-.65.834-.683 1.251-1.822 1.251-3.417 0-1.18-.29-2.089-.868-2.724-.579-.636-1.283-.954-2.112-.954-.56 0-1.048.137-1.463.41-.292.182-.56.44-.807.773v-.971h-1.196v10.206h1.23zm1.954-3.746c-.847 0-1.43-.378-1.75-1.135-.168-.396-.252-.877-.252-1.442 0-.702.084-1.28.252-1.737.315-.852.898-1.278 1.75-1.278.848 0 1.431.403 1.75 1.21.17.42.253.92.253 1.504 0 .957-.19 1.676-.57 2.157-.38.48-.858.72-1.433.72zm7.554 1.087c.374 0 .709-.037 1.005-.11a2.867 2.867 0 001.388-.738c.223-.21.425-.48.605-.81.18-.33.286-.63.318-.899h-1.21a2.143 2.143 0 01-.465.855c-.383.423-.896.635-1.538.635-.688 0-1.197-.224-1.525-.673-.328-.449-.503-1.045-.526-1.788h5.366c0-.738-.036-1.276-.11-1.613a3.266 3.266 0 00-.491-1.292c-.256-.387-.627-.703-1.115-.947a3.34 3.34 0 00-1.51-.365c-1.03 0-1.864.367-2.502 1.1-.638.734-.957 1.689-.957 2.864 0 1.195.316 2.123.95 2.786.633.663 1.406.995 2.317.995zm2.154-4.505H108.1c.023-.629.226-1.147.609-1.555a1.872 1.872 0 011.421-.612c.789 0 1.352.296 1.689.889.182.319.298.745.349 1.278zM116.174 22v-3.835c0-.478.031-.846.093-1.104.061-.257.194-.507.4-.748.255-.301.551-.502.888-.602.187-.06.426-.089.718-.089.574 0 .97.228 1.19.684.132.273.198.633.198 1.08V22h1.25v-4.696c0-.739-.1-1.306-.3-1.702-.365-.725-1.067-1.087-2.106-1.087-.474 0-.904.093-1.292.28-.387.187-.754.494-1.1.923v-1.04h-1.17V22h1.231zm10.931 0c1.322 0 2.286-.392 2.892-1.176a2.8 2.8 0 00.608-1.757c0-.77-.226-1.374-.677-1.811-.255-.246-.64-.467-1.155-.663.35-.178.62-.374.807-.588.36-.406.54-.925.54-1.559 0-.542-.146-1.02-.438-1.435-.497-.702-1.333-1.053-2.509-1.053h-4.313V22h4.245zm-.437-5.797h-2.475v-3.11h2.427c.592 0 1.039.064 1.34.191.533.228.8.67.8 1.326 0 .652-.251 1.103-.753 1.354-.319.16-.765.24-1.34.24zm.458 4.635h-2.933v-3.534h2.7c.57 0 1.028.07 1.374.212.652.264.978.76.978 1.49 0 .433-.112.802-.335 1.107-.356.483-.95.725-1.784.725zm6.37 1.162v-6.036a64.19 64.19 0 00-.016-1.002 54.71 54.71 0 01-.018-1.124v-.308l2.885 8.47h1.347l2.864-8.47c0 .543-.004 1.05-.014 1.525-.009.474-.013.813-.013 1.018V22h1.292V11.958h-1.928l-2.864 8.49-2.885-8.49h-1.948V22h1.299zm14.452.26c1.353 0 2.429-.43 3.226-1.292.666-.716 1.058-1.602 1.176-2.66h-1.326c-.137.661-.344 1.195-.622 1.6-.524.77-1.288 1.155-2.29 1.155-1.09 0-1.908-.365-2.458-1.097-.549-.731-.823-1.685-.823-2.86 0-1.436.304-2.501.912-3.196.609-.695 1.407-1.043 2.396-1.043.811 0 1.441.19 1.89.568.45.378.749.89.9 1.538h1.325c-.077-.853-.467-1.614-1.168-2.284-.702-.67-1.689-1.004-2.96-1.004-1.49 0-2.66.515-3.507 1.544-.784.948-1.176 2.163-1.176 3.644 0 1.95.522 3.393 1.565 4.327.793.707 1.773 1.06 2.94 1.06z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/styles/_obmc-sila.scss b/src/assets/styles/_obmc-sila.scss
new file mode 100644
index 00000000..ea2507f0
--- /dev/null
+++ b/src/assets/styles/_obmc-sila.scss
@@ -0,0 +1,6 @@
+// Vendor styles
+@import "./bootstrap";
+@import "~bootstrap-vue/src/index";
+
+// IBS BMC styles
+@import "./bmc/_sila";
diff --git a/src/assets/styles/bmc/_sila/_alert.scss b/src/assets/styles/bmc/_sila/_alert.scss
new file mode 100644
index 00000000..0e78ba64
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/_alert.scss
@@ -0,0 +1,70 @@
+.alert {
+    display: flex;
+    padding: $spacer;
+    border-width: 0 0 0 3px;
+    color: gray("800");
+    margin-bottom: $spacer;
+
+    &.small {
+      padding: $spacer / 2;
+      font-size: 1rem;
+    }
+
+    .close {
+      font-weight: 300;
+      opacity: 1;
+    }
+
+    .alert-icon {
+      display: inline-flex;
+      align-items: flex-start;
+      margin-right: $spacer;
+      margin-bottom: $spacer;
+
+      @include media-breakpoint-up(sm) {
+        margin-bottom: 0;
+      }
+    }
+
+    .alert-content {
+      flex: 1 1 auto;
+    }
+
+    .alert-title {
+      margin-bottom: $spacer / 2;
+    }
+
+    .alert-msg {
+      p + p {
+        margin-bottom: $spacer;
+      }
+
+      p:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+
+    &.alert-info {
+      border-left-color: theme-color("info");
+      background-color: theme-color-light("info");
+      fill: theme-color("info");
+    }
+
+    &.alert-success {
+      border-left-color: theme-color("success");
+      background-color: theme-color-light("success");
+      fill: theme-color("success");
+    }
+
+    &.alert-danger {
+      border-left-color: theme-color("danger");
+      background-color: theme-color-light("danger");
+      fill: theme-color("danger");
+    }
+
+    &.alert-warning {
+      border-left-color: theme-color("warning");
+      background-color: theme-color-light("warning");
+      fill: theme-color("warning");
+    }
+  }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/_sila/_badge.scss b/src/assets/styles/bmc/_sila/_badge.scss
new file mode 100644
index 00000000..0b88b499
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/_badge.scss
@@ -0,0 +1,21 @@
+.badge-pill {
+  // Need to explicitly set border-radius
+  // for pill variant because global $enable-rounded
+  // Bootstrap setting removes rounded pill style
+  border-radius: 10rem;
+  fill: currentColor;
+  font-weight: 400;
+  line-height: 1.5;
+  display: inline-flex;
+  .close {
+    font-size: 1em;
+    margin-left: $spacer/2;
+    font-weight: inherit;
+    color: inherit;
+  }
+}
+
+.badge-primary {
+  background-color: theme-color-light("info");
+  color: theme-color("info");
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/_sila/_base.scss b/src/assets/styles/bmc/_sila/_base.scss
new file mode 100644
index 00000000..c11e046c
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/_base.scss
@@ -0,0 +1,50 @@
+dt,
+legend,
+label {
+  color: gray("800");
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.4285;
+}
+
+h1,
+.h1 {
+  font-size: 2.625rem;
+  font-weight: 300;
+  line-height: 1.238;
+}
+
+h2,
+.h2 {
+  font-size: 2.25rem;
+  font-weight: 300;
+  line-height: 1.3333;
+}
+
+h3,
+.h3 {
+  font-size: 1.75rem;
+  font-weight: 400;
+  line-height: 1.2857;
+}
+
+h4,
+.h4 {
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 1.3;
+}
+
+h5,
+.h5 {
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.375;
+}
+
+h6,
+.h6 {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.2857;
+}
diff --git a/src/assets/styles/bmc/_sila/_bootstrap-grid.scss b/src/assets/styles/bmc/_sila/_bootstrap-grid.scss
new file mode 100644
index 00000000..7ad7c81b
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/_bootstrap-grid.scss
@@ -0,0 +1,8 @@
+.container-xl {
+  // Fluid layout container class sets 100%
+  // width until xl breakpoint. Once a max-width
+  // is set, setting the left margin to 0 is needed
+  // so the content doesn't center align
+  // https://bootstrap-vue.org/docs/components/layout#fluid-width-container
+  margin-left: 0;
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/_sila/_buttons.scss b/src/assets/styles/bmc/_sila/_buttons.scss
new file mode 100644
index 00000000..2a7b8169
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/_buttons.scss
@@ -0,0 +1,82 @@
+.btn {
+  padding-top: $spacer / 2;
+  padding-right: $spacer;
+  padding-bottom: $spacer / 2;
+  padding-left: $spacer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-around;
+  svg {
+    margin-right: $spacer / 4;
+  }
+  &:disabled {
+    color: gray("600");
+    fill: currentColor;
+    box-shadow: none !important;
+    &:not(.btn-link) {
+      border-color: gray("400");
+      background-color: gray("400");
+    }
+  }
+}
+
+.btn-primary {
+  fill: currentColor;
+  &:focus,
+  &:not(:disabled):not(.disabled):active:focus {
+    border-color: $white;
+    box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white;
+  }
+}
+
+.btn-secondary {
+  fill: currentColor;
+  &:focus,
+  &:not(:disabled):not(.disabled):active:focus {
+    border-color: $white;
+    box-shadow: inset 0 0 0 3px theme-color('secondary'), inset 0 0 0 5px $white;
+  }
+}
+
+// Global style for all button link
+.btn-link {
+  font-weight: $headings-font-weight;
+  fill: theme-color("primary");
+  text-decoration: none !important;
+  &:hover {
+    background-color: gray("200");
+    color: theme-color("primary");
+  }
+  &:active {
+    background-color: gray("300");
+  }
+  &:focus {
+    box-shadow: inset 0 0 0 2px theme-color("primary");
+    color: theme-color("primary");
+    outline: none;
+  }
+  &:disabled {
+    box-shadow: $btn-focus-box-shadow;
+  }
+}
+
+// Icon only buttons
+.btn-icon-only svg {
+  margin-right: 0;
+}
+
+// Datepicker, clear search and Password toggle buttons
+.input-action-btn,
+.btn-datepicker {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: $zindex-dropdown + 1;
+}
+
+// Contain input buttons within input
+.btn-datepicker .dropdown-toggle,
+.input-action-btn {
+  padding: 7px;
+  margin: 1px;
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/_sila/_calendar.scss b/src/assets/styles/bmc/_sila/_calendar.scss
new file mode 100644
index 00000000..0307a6ce
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/_calendar.scss
@@ -0,0 +1,17 @@
+.b-calendar-nav {
+  .btn {
+    &:hover {
+      background: none;
+      color: theme-color("dark");
+    }
+  }
+}
+
+.b-calendar-grid .btn {
+  display: inline-block;
+}
+
+// Date picker focus
+.b-calendar .b-calendar-grid {
+  padding: 6px 12px;
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/_sila/_card.scss b/src/assets/styles/bmc/_sila/_card.scss
new file mode 100644
index 00000000..5f2a5962
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/_card.scss
@@ -0,0 +1,5 @@
+.card {
+  .bg-success {
+    background-color: theme-color-light('success')!important;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/_sila/_dropdown.scss b/src/assets/styles/bmc/_sila/_dropdown.scss
new file mode 100644
index 00000000..969c4c68
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/_dropdown.scss
@@ -0,0 +1,31 @@
+// Make calendar visible over the table
+.dropdown-menu {
+  z-index: $zindex-dropdown + 1;
+  padding: 0;
+}
+.dropdown-item {
+  padding-left: $spacer/4;
+  margin-top: -1 * $spacer/4;
+}
+.b-dropdown-form {
+  padding: $spacer/2;
+  .form-group {
+    margin-bottom: $spacer/2;
+  }
+}
+// Table filter dropdown clear button style
+.table-filter {
+  .dropdown-item {
+    &:hover {
+      background-color: gray("200");
+    }
+    &:active {
+      background-color: gray("300");
+    }
+    &:focus {
+      outline: none;
+      background-color: transparent;
+      box-shadow: inset 0 0 0 2px theme-color("primary");
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/_sila/_forms.scss b/src/assets/styles/bmc/_sila/_forms.scss
new file mode 100644
index 00000000..428a40c2
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/_forms.scss
@@ -0,0 +1,132 @@
+// Helper text
+.form-text {
+  font-size: $form-label-font-size;
+  line-height: $form-line-height;
+  margin-top: -$spacer / 4;
+  margin-bottom: $spacer / 2;
+  color: gray("700")!important;
+}
+
+// Legend label
+.col-form-label {
+  color: gray("800");
+  font-size: $form-label-font-size;
+  line-height: $form-line-height;
+}
+
+.form-group {
+  margin-bottom: $spacer * 2;
+}
+
+.custom-select,
+.form-control,
+.input-group-text {
+  border-color: gray("500") !important;
+  background-color: gray("100");
+}
+
+.custom-select,
+.form-control {
+  &:active {
+    border: 1px solid $primary!important;
+  }
+  &:focus {
+    color: theme-color("dark");
+    background-color: gray("100");
+    box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px $primary !important;
+  }
+  &:disabled {
+    background-color: gray("400");
+    color: gray("600");
+  }
+  &::placeholder {
+    color: gray("600");
+  }
+  &.is-invalid,
+  &:invalid {
+    border: 1px solid theme-color("danger") !important;
+  }
+}
+
+.custom-select,
+.custom-control-label,
+.form-control {
+  color: theme-color("dark") !important;
+  font-size: 1rem;
+}
+
+// Inverted form colors
+.form-background {
+  background-color: gray("100");
+  .custom-select,
+  .form-control {
+    background-color: $white;
+    &:focus {
+      background-color: $white;
+    }
+    &:disabled {
+      background-color: gray("400");
+      color: gray("600");
+    }
+  }
+}
+
+.invalid-feedback {
+  font-size: $form-label-font-size;
+  line-height: $form-line-height;
+}
+
+.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after,
+.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before,
+.custom-control-input:checked ~ .custom-control-label::before  {
+  background-color: $black;
+  border-color: $black;
+  cursor: pointer;
+}
+
+.custom-control {
+  .custom-control-input[disabled=disabled] {
+    & + .custom-control-label {
+      // Disabled label for checkbox, radio,
+      // switch bootstrap form components
+      color: gray("600")!important;
+    }
+  }
+}
+
+.custom-control-input:focus ~ .custom-control-label::before{
+  box-shadow: 0 0 0 2px  theme-color("primary");
+}
+
+.custom-control-label::after {
+  cursor: pointer;
+}
+
+.b-form-tag-remove {
+  // X button to remove tag
+  font-weight: normal;
+}
+
+.b-form-tags-button {
+  // Add button inside input field
+  white-space: nowrap;
+  margin-right: -$spacer;
+  &.btn-link-primary {
+    color: theme-color("primary");
+    fill: currentColor;
+  }
+}
+
+// Form validation icon
+  .form-control.is-invalid,
+  .form-control.is-valid {
+    background-position: right 1rem bottom 50%;
+  }
+
+// Form validation icon with datepicker or password toggle icon
+.form-control-with-button {
+  &.is-invalid,
+  &.is-valid {
+    background-position: right 3rem bottom 50%;
+  }
+}
diff --git a/src/assets/styles/bmc/_sila/_index.scss b/src/assets/styles/bmc/_sila/_index.scss
new file mode 100644
index 00000000..74594e35
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/_index.scss
@@ -0,0 +1,18 @@
+// OpenBMC Global Style Overrides of out of the box
+// Bootstrap styles
+@import "./alert";
+@import "./badge";
+@import "./base";
+@import "./bootstrap-grid";
+@import "./buttons";
+@import "./calendar";
+@import "./card";
+@import "./dropdown";
+@import "./forms";
+@import "./kvm";
+@import "./modal";
+@import "./pagination";
+@import "./section-divider";
+@import "./sol";
+@import "./tables";
+@import "./toasts";
\ No newline at end of file
diff --git a/src/assets/styles/bmc/_sila/_kvm.scss b/src/assets/styles/bmc/_sila/_kvm.scss
new file mode 100644
index 00000000..a7223844
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/_kvm.scss
@@ -0,0 +1,12 @@
+#terminal-kvm {
+  height: calc(100vh - 300px);
+  display: flex;
+  &.full-window {
+   height: calc(100vh - 80px); 
+  }
+  div:nth-child(1) {
+    background: transparent !important;
+    display: block !important;
+    overflow: hidden !important;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/_sila/_modal.scss b/src/assets/styles/bmc/_sila/_modal.scss
new file mode 100644
index 00000000..e2fa0cd8
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/_modal.scss
@@ -0,0 +1,12 @@
+.modal-header {
+  .close {
+    font-weight: normal;
+    color: theme-color("dark");
+    opacity: 1;
+  }
+  .modal-title {
+    font-size: 1.25rem;
+    font-weight: normal;
+    line-height: 1.3;
+  }
+}
diff --git a/src/assets/styles/bmc/_sila/_pagination.scss b/src/assets/styles/bmc/_sila/_pagination.scss
new file mode 100644
index 00000000..d38ce5d2
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/_pagination.scss
@@ -0,0 +1,24 @@
+.table-pagination-select {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+  select {
+    width: fit-content;
+  }
+  label {
+    margin-left: $spacer;
+    line-height: $spacer * 2;
+  }
+}
+
+.b-pagination {
+  @include media-breakpoint-up(sm) {
+    justify-content: flex-end;
+  }
+  .page-item.active button {
+    color: theme-color("dark");
+    background-color: color("white");
+    border-color: $border-color;
+    box-shadow: inset 0px -3px theme-color("primary");
+  }
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/_sila/_section-divider.scss b/src/assets/styles/bmc/_sila/_section-divider.scss
new file mode 100644
index 00000000..620c9e56
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/_section-divider.scss
@@ -0,0 +1,3 @@
+.section-divider {
+    border-bottom: 1px solid gray('400');
+  }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/_sila/_sol.scss b/src/assets/styles/bmc/_sila/_sol.scss
new file mode 100644
index 00000000..6987cf79
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/_sol.scss
@@ -0,0 +1,3 @@
+#terminal .xterm .xterm-viewport {
+  overflow: auto;
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/_sila/_tables.scss b/src/assets/styles/bmc/_sila/_tables.scss
new file mode 100644
index 00000000..e8b5a832
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/_tables.scss
@@ -0,0 +1,171 @@
+.table {
+  position: relative;
+  z-index: $zindex-dropdown;
+
+  td {
+    border-top: 1px solid gray("300");
+    border-bottom: 1px solid gray("300");
+    &:first-of-type {
+      border-left: 1px solid gray("300");
+    }
+    &:last-of-type {
+      border-right: 1px solid gray("300");
+    }
+    vertical-align: middle;
+
+    // Table action buttons
+    .btn-link {
+      width: 40px;
+      height: 40px;
+      padding: 5px !important;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  // thead-light added for specificity
+  .thead-light th {
+    vertical-align: middle;
+    border-top: 1px solid gray("300");
+    border-bottom: 1px solid gray("300");
+    &:first-of-type {
+      border-left: 1px solid gray("300");
+    }
+    &:last-of-type {
+      border-right: 1px solid gray("300");
+    }
+    color: theme-color("dark");
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .status-icon svg {
+    width: 1rem;
+    height: auto;
+  }
+
+  .b-table-has-details {
+    td {
+      border-bottom: none;
+    }
+    .table-row-expand svg {
+      transform: rotate(180deg);
+    }
+  }
+
+  .b-table-details {
+    background-color: theme-color("light");
+    td {
+      padding-left: calc(50px + (#{$table-cell-padding} * 2));
+      padding-right: calc(50px + (#{$table-cell-padding} * 2));
+    }
+    dl {
+      margin: 0;
+    }
+    dt {
+      float: left;
+      clear: left;
+      margin-right: $spacer / 2;
+    }
+    dd {
+      line-height: 1.2
+    }
+  }
+
+  .table-row-expand {
+    width: 50px;
+    .btn {
+      padding: 0;
+      width: 50px;
+    }
+    svg {
+      fill: theme-color("dark");
+    }
+  }
+  .b-table-sort-icon-left {
+    background-position: left calc(1.5rem / 2) center !important;
+    padding-left: calc(1.2rem + 0.65em) !important;
+    &:focus {
+      outline: none;
+      box-shadow: inset 0 0 0 2px theme-color('primary') !important;
+    }
+    &:hover {
+      background-color: theme-color-dark('light');
+    }
+  }
+}
+
+.b-table-sticky-header td {
+  border-top: none;
+}
+
+// Table stacked style for small screen only
+@include media-breakpoint-down(xs) {
+  .b-table-stacked-sm {
+    border: 1px solid gray("300");
+
+    tr {
+
+      &:not(:first-child) > td[aria-colindex='1'] {
+        border-top: 1px solid gray("300");
+        padding-top: 0.625rem;
+      }
+
+      &:not(.b-table-empty-row) {
+        position: relative; // Restrict background color to get zebra striping for the row
+
+        &::before,
+        &::after {
+          position: absolute;
+          top: 0;
+          height: 100%;
+          z-index: -1;
+        }
+
+        &:before {
+          content: '';
+          background-color: gray("200");
+          width: 40%;
+          border-right: 1px solid gray("300");
+        }
+
+        &:after {
+          content: '';
+          right: 0;
+          width: 60%;
+        }
+
+        &:nth-child(even)::after {
+          background-color: gray("100"); // Zebra striping for the row
+        }
+      }
+
+      td {
+        border: 0;
+        padding: 0.75rem;
+        text-align: left !important;
+
+        &:last-of-type {
+          border-right: 0;
+        }
+      }
+    }
+  }
+
+  .table.b-table.b-table-stacked-sm > tbody > tr > [data-label] {
+    &::before {
+      text-align: left;
+      padding-left: $spacer /2;
+    }
+
+    > div {
+      padding-left: 1rem;
+    }
+  }
+
+  .table.b-table.b-table-stacked-sm > tbody > tr > :first-child {
+    border-top-width: 1px;
+  }
+}
diff --git a/src/assets/styles/bmc/_sila/_toasts.scss b/src/assets/styles/bmc/_sila/_toasts.scss
new file mode 100644
index 00000000..4e2ad7fa
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/_toasts.scss
@@ -0,0 +1,61 @@
+.b-toaster {
+  top: 75px!important; // make sure toasts do not hide top header
+}
+
+// Toast component and status icon style
+.toast {
+  padding: $spacer/2 $spacer/2 $spacer/2 $spacer+2;
+  border-width: 0 0 0 3px;
+  box-shadow: $box-shadow;
+  .close {
+    font-weight: 300;
+    opacity: 1;
+  }
+}
+
+.toast-header {
+  display: flex;
+  align-items: flex-start;
+  background-color: inherit!important; //override specificity
+  border: none;
+  color: theme-color("dark")!important; //override specificity
+  padding-bottom: 0;
+}
+
+.toast-icon {
+  display: flex;
+  margin-right: 1rem;
+
+  svg {
+    margin-left: -2.5rem;
+  }
+
+  + .close {
+    line-height: .9;
+  }
+}
+
+.toast-body {
+  color: theme-color("dark");
+  padding-top: 0;
+}
+
+.b-toast-success .toast {
+  border-left-color: theme-color("success")!important;
+  background-color: theme-color-light("success")!important;
+}
+
+.b-toast-info .toast {
+  border-left-color: theme-color("info")!important;
+  background-color: theme-color-light("info")!important;
+}
+
+.b-toast-danger .toast {
+  border-left-color: theme-color("danger")!important;
+  background-color: theme-color-light("danger")!important;
+}
+
+.b-toast-warning .toast {
+  border-left-color: theme-color("warning")!important;
+  background-color: theme-color-light("warning")!important;
+}
\ No newline at end of file
diff --git a/src/components/_sila/AppHeader/AppHeader.vue b/src/components/_sila/AppHeader/AppHeader.vue
new file mode 100644
index 00000000..84e4588f
--- /dev/null
+++ b/src/components/_sila/AppHeader/AppHeader.vue
@@ -0,0 +1,384 @@
+<template>
+  <div>
+    <header id="page-header">
+      <a
+        class="link-skip-nav btn btn-light"
+        href="#main-content"
+        @click="setFocus"
+      >
+        {{ $t('appHeader.skipToContent') }}
+      </a>
+
+      <b-navbar type="dark" :aria-label="$t('appHeader.applicationHeader')">
+        <!-- Left aligned nav items -->
+        <b-button
+          id="app-header-trigger"
+          class="nav-trigger"
+          aria-hidden="true"
+          type="button"
+          variant="link"
+          :class="{ open: isNavigationOpen }"
+          @click="toggleNavigation"
+        >
+          <icon-close
+            v-if="isNavigationOpen"
+            :title="$t('appHeader.titleHideNavigation')"
+          />
+          <icon-menu
+            v-if="!isNavigationOpen"
+            :title="$t('appHeader.titleShowNavigation')"
+          />
+        </b-button>
+        <b-navbar-nav>
+          <b-navbar-brand
+            class="mr-0"
+            to="/"
+            data-test-id="appHeader-container-overview"
+          >
+            <img
+              class="header-logo"
+              src="@/assets/images/logo-header.svg"
+              :alt="altLogo"
+            />
+          </b-navbar-brand>
+          <div v-if="isNavTagPresent" :key="routerKey" class="pl-2 nav-tags">
+            <span>|</span>
+            <span class="pl-3 asset-tag">{{ assetTag }}</span>
+            <span class="pl-3">{{ modelType }}</span>
+            <span class="pl-3">{{ serialNumber }}</span>
+          </div>
+        </b-navbar-nav>
+        <!-- Right aligned nav items -->
+        <b-navbar-nav class="ml-auto helper-menu">
+          <b-nav-item
+            to="/logs/event-logs"
+            data-test-id="appHeader-container-health"
+          >
+            <status-icon :status="healthStatusIcon" />
+            {{ $t('appHeader.health') }}
+          </b-nav-item>
+          <b-nav-item
+            to="/operations/server-power-operations"
+            data-test-id="appHeader-container-power"
+          >
+            <status-icon :status="serverStatusIcon" />
+            {{ $t('appHeader.power') }}
+          </b-nav-item>
+          <!-- Using LI elements instead of b-nav-item to support semantic button elements -->
+          <li class="nav-item">
+            <b-button
+              id="app-header-refresh"
+              variant="link"
+              data-test-id="appHeader-button-refresh"
+              @click="refresh"
+            >
+              <icon-renew :title="$t('appHeader.titleRefresh')" />
+              <span class="responsive-text">{{ $t('appHeader.refresh') }}</span>
+            </b-button>
+          </li>
+          <li class="nav-item">
+            <b-dropdown
+              id="app-header-user"
+              variant="link"
+              right
+              data-test-id="appHeader-container-user"
+            >
+              <template #button-content>
+                <icon-avatar :title="$t('appHeader.titleProfile')" />
+                <span class="responsive-text">{{ username }}</span>
+              </template>
+              <b-dropdown-item
+                to="/profile-settings"
+                data-test-id="appHeader-link-profile"
+                >{{ $t('appHeader.profileSettings') }}
+              </b-dropdown-item>
+              <b-dropdown-item
+                data-test-id="appHeader-link-logout"
+                @click="logout"
+              >
+                {{ $t('appHeader.logOut') }}
+              </b-dropdown-item>
+            </b-dropdown>
+          </li>
+        </b-navbar-nav>
+      </b-navbar>
+    </header>
+    <loading-bar />
+  </div>
+</template>
+
+<script>
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import IconAvatar from '@carbon/icons-vue/es/user--avatar/20';
+import IconClose from '@carbon/icons-vue/es/close/20';
+import IconMenu from '@carbon/icons-vue/es/menu/20';
+import IconRenew from '@carbon/icons-vue/es/renew/20';
+import StatusIcon from '@/components/Global/StatusIcon';
+import LoadingBar from '@/components/Global/LoadingBar';
+
+export default {
+  name: 'AppHeader',
+  components: {
+    IconAvatar,
+    IconClose,
+    IconMenu,
+    IconRenew,
+    StatusIcon,
+    LoadingBar,
+  },
+  mixins: [BVToastMixin],
+  props: {
+    routerKey: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      isNavigationOpen: false,
+      altLogo: process.env.VUE_APP_COMPANY_NAME || 'Built on OpenBMC',
+    };
+  },
+  computed: {
+    isNavTagPresent() {
+      return this.assetTag || this.modelType || this.serialNumber;
+    },
+    assetTag() {
+      return this.$store.getters['global/assetTag'];
+    },
+    modelType() {
+      return this.$store.getters['global/modelType'];
+    },
+    serialNumber() {
+      return this.$store.getters['global/serialNumber'];
+    },
+    isAuthorized() {
+      return this.$store.getters['global/isAuthorized'];
+    },
+    serverStatus() {
+      return this.$store.getters['global/serverStatus'];
+    },
+    healthStatus() {
+      return this.$store.getters['eventLog/healthStatus'];
+    },
+    serverStatusIcon() {
+      switch (this.serverStatus) {
+        case 'on':
+          return 'success';
+        case 'error':
+          return 'danger';
+        case 'diagnosticMode':
+          return 'warning';
+        case 'off':
+        default:
+          return 'secondary';
+      }
+    },
+    healthStatusIcon() {
+      switch (this.healthStatus) {
+        case 'OK':
+          return 'success';
+        case 'Warning':
+          return 'warning';
+        case 'Critical':
+          return 'danger';
+        default:
+          return 'secondary';
+      }
+    },
+    username() {
+      return this.$store.getters['global/username'];
+    },
+  },
+  watch: {
+    isAuthorized(value) {
+      if (value === false) {
+        this.errorToast(this.$t('global.toast.unAuthDescription'), {
+          title: this.$t('global.toast.unAuthTitle'),
+        });
+      }
+    },
+  },
+  created() {
+    // Reset auth state to check if user is authenticated based
+    // on available browser cookies
+    this.$store.dispatch('authentication/resetStoreState');
+    this.getSystemInfo();
+    this.getEvents();
+  },
+  mounted() {
+    this.$root.$on(
+      'change-is-navigation-open',
+      (isNavigationOpen) => (this.isNavigationOpen = isNavigationOpen)
+    );
+  },
+  methods: {
+    getSystemInfo() {
+      this.$store.dispatch('global/getSystemInfo');
+    },
+    getEvents() {
+      this.$store.dispatch('eventLog/getEventLogData');
+    },
+    refresh() {
+      this.$emit('refresh');
+    },
+    logout() {
+      this.$store.dispatch('authentication/logout');
+    },
+    toggleNavigation() {
+      this.$root.$emit('toggle-navigation');
+    },
+    setFocus(event) {
+      event.preventDefault();
+      this.$root.$emit('skip-navigation');
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@mixin focus-box-shadow($padding-color: $navbar-color, $outline-color: $white) {
+  box-shadow: inset 0 0 0 3px $padding-color, inset 0 0 0 5px $outline-color;
+}
+.app-header {
+  .link-skip-nav {
+    position: absolute;
+    top: -60px;
+    left: 0.5rem;
+    z-index: $zindex-popover;
+    transition: $duration--moderate-01 $exit-easing--expressive;
+    &:focus {
+      top: 0.5rem;
+      transition-timing-function: $entrance-easing--expressive;
+    }
+  }
+  .navbar-text,
+  .nav-link,
+  .btn-link {
+    color: color('white') !important;
+    fill: currentColor;
+    padding: 0.68rem 1rem !important;
+
+    &:hover {
+      background-color: theme-color-level(light, 10);
+    }
+    &:active {
+      background-color: theme-color-level(light, 9);
+    }
+    &:focus {
+      @include focus-box-shadow;
+      outline: 0;
+    }
+  }
+
+  .nav-item {
+    fill: theme-color('light');
+  }
+
+  .navbar {
+    padding: 0;
+    background-color: $navbar-color;
+    @include media-breakpoint-up($responsive-layout-bp) {
+      height: $header-height;
+    }
+
+    .helper-menu {
+      @include media-breakpoint-down(sm) {
+        background-color: gray('800');
+        width: 100%;
+        justify-content: flex-end;
+
+        .nav-link,
+        .btn {
+          padding: $spacer / 1.125 $spacer / 2;
+        }
+
+        .nav-link:focus,
+        .btn:focus {
+          @include focus-box-shadow($gray-800);
+        }
+      }
+
+      .responsive-text {
+        @include media-breakpoint-down(xs) {
+          @include sr-only;
+        }
+      }
+    }
+  }
+
+  .navbar-nav {
+    @include media-breakpoint-up($responsive-layout-bp) {
+      padding: 0 $spacer;
+    }
+    align-items: center;
+
+    .navbar-brand,
+    .nav-link {
+      transition: $focus-transition;
+    }
+    .nav-tags {
+      color: theme-color-level(light, 3);
+      @include media-breakpoint-down(xs) {
+        @include sr-only;
+      }
+      .asset-tag {
+        @include media-breakpoint-down($responsive-layout-bp) {
+          @include sr-only;
+        }
+      }
+    }
+  }
+
+  .nav-trigger {
+    fill: theme-color('light');
+    width: $header-height;
+    height: $header-height;
+    transition: none;
+    display: inline-flex;
+    flex: 0 0 20px;
+    align-items: center;
+
+    svg {
+      margin: 0;
+    }
+
+    &:hover {
+      fill: theme-color('light');
+      background-color: theme-color-level(light, 10);
+    }
+
+    &.open {
+      background-color: gray('800');
+    }
+
+    @include media-breakpoint-up($responsive-layout-bp) {
+      display: none;
+    }
+  }
+
+  .dropdown-menu {
+    margin-top: 0;
+
+    @include media-breakpoint-only(md) {
+      margin-top: 4px;
+    }
+  }
+
+  .navbar-expand {
+    @include media-breakpoint-down(sm) {
+      flex-flow: wrap;
+    }
+  }
+}
+
+.navbar-brand {
+  padding: $spacer/2;
+  height: $header-height;
+  line-height: 1;
+  &:focus {
+    box-shadow: inset 0 0 0 3px $navbar-color, inset 0 0 0 5px color('white');
+    outline: 0;
+  }
+}
+</style>
diff --git a/src/components/_sila/AppHeader/index.js b/src/components/_sila/AppHeader/index.js
new file mode 100644
index 00000000..e180e80f
--- /dev/null
+++ b/src/components/_sila/AppHeader/index.js
@@ -0,0 +1,2 @@
+import AppHeader from './AppHeader';
+export default AppHeader;
diff --git a/src/components/_sila/AppNavigation/AppNavigation.vue b/src/components/_sila/AppNavigation/AppNavigation.vue
new file mode 100644
index 00000000..acfabe76
--- /dev/null
+++ b/src/components/_sila/AppNavigation/AppNavigation.vue
@@ -0,0 +1,255 @@
+<template>
+  <div>
+    <div class="nav-container" :class="{ open: isNavigationOpen }">
+      <nav ref="nav" :aria-label="$t('appNavigation.primaryNavigation')">
+        <b-nav vertical class="mb-4">
+          <template v-for="(navItem, index) in navigationItems">
+            <!-- Navigation items with no children -->
+            <b-nav-item
+              v-if="!navItem.children"
+              :key="index"
+              :to="navItem.route"
+              :data-test-id="`nav-item-${navItem.id}`"
+            >
+              <component :is="navItem.icon" />
+              {{ navItem.label }}
+            </b-nav-item>
+
+            <!-- Navigation items with children -->
+            <li v-else :key="index" class="nav-item">
+              <b-button
+                v-b-toggle="`${navItem.id}`"
+                variant="link"
+                :data-test-id="`nav-button-${navItem.id}`"
+              >
+                <component :is="navItem.icon" />
+                {{ navItem.label }}
+                <icon-expand class="icon-expand" />
+              </b-button>
+              <b-collapse :id="navItem.id" tag="ul" class="nav-item__nav">
+                <li class="nav-item">
+                  <router-link
+                    v-for="(subNavItem, i) of navItem.children"
+                    :key="i"
+                    :to="subNavItem.route"
+                    :data-test-id="`nav-item-${subNavItem.id}`"
+                    class="nav-link"
+                  >
+                    {{ subNavItem.label }}
+                  </router-link>
+                </li>
+              </b-collapse>
+            </li>
+          </template>
+        </b-nav>
+      </nav>
+    </div>
+    <transition name="fade">
+      <div
+        v-if="isNavigationOpen"
+        id="nav-overlay"
+        class="nav-overlay"
+        @click="toggleIsOpen"
+      ></div>
+    </transition>
+  </div>
+</template>
+
+<script>
+//Do not change Mixin import.
+//Exact match alias set to support
+//dotenv customizations.
+import AppNavigationMixin from './AppNavigationMixin';
+
+export default {
+  name: 'AppNavigation',
+  mixins: [AppNavigationMixin],
+  data() {
+    return {
+      isNavigationOpen: false,
+    };
+  },
+  watch: {
+    $route: function () {
+      this.isNavigationOpen = false;
+    },
+    isNavigationOpen: function (isNavigationOpen) {
+      this.$root.$emit('change-is-navigation-open', isNavigationOpen);
+    },
+  },
+  mounted() {
+    this.$root.$on('toggle-navigation', () => this.toggleIsOpen());
+  },
+  methods: {
+    toggleIsOpen() {
+      this.isNavigationOpen = !this.isNavigationOpen;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+svg {
+  fill: currentColor;
+  height: 1.2rem;
+  width: 1.2rem;
+  margin-left: 0 !important; //!important overriding button specificity
+  vertical-align: text-bottom;
+  &:not(.icon-expand) {
+    margin-right: $spacer;
+  }
+}
+
+.nav {
+  padding-top: $spacer / 4;
+  @include media-breakpoint-up($responsive-layout-bp) {
+    padding-top: $spacer;
+  }
+}
+
+.nav-item__nav {
+  list-style: none;
+  padding-left: 0;
+  margin-left: 0;
+
+  .nav-item {
+    outline: none;
+  }
+
+  .nav-link {
+    padding-left: $spacer * 4;
+    outline: none;
+
+    &:not(.nav-link--current) {
+      font-weight: normal;
+    }
+  }
+}
+
+.btn-link {
+  display: inline-block;
+  width: 100%;
+  text-align: left;
+  text-decoration: none !important;
+  border-radius: 0;
+
+  &.collapsed {
+    .icon-expand {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.icon-expand {
+  float: right;
+  margin-top: $spacer / 4;
+}
+
+.btn-link,
+.nav-link {
+  position: relative;
+  font-weight: $headings-font-weight;
+  padding-left: $spacer; // defining consistent padding for links and buttons
+  padding-right: $spacer;
+  color: theme-color('secondary');
+
+  &:hover {
+    background-color: theme-color-level(dark, -10.5);
+    color: theme-color('dark');
+  }
+
+  &:focus {
+    background-color: theme-color-level(light, 0);
+    box-shadow: inset 0 0 0 2px theme-color('primary');
+    color: theme-color('dark');
+    outline: 0;
+  }
+
+  &:active {
+    background-color: theme-color('secondary');
+    color: $white;
+  }
+}
+
+.nav-link--current {
+  font-weight: $headings-font-weight;
+  background-color: theme-color('secondary');
+  color: theme-color('light');
+  cursor: default;
+  box-shadow: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 4px;
+    background-color: theme-color('primary');
+  }
+
+  &:hover,
+  &:focus {
+    background-color: theme-color('secondary');
+    color: theme-color('light');
+  }
+}
+
+.nav-container {
+  position: fixed;
+  width: $navigation-width;
+  top: $header-height;
+  bottom: 0;
+  left: 0;
+  z-index: $zindex-fixed;
+  overflow-y: auto;
+  background-color: theme-color('light');
+  transform: translateX(-$navigation-width);
+  transition: transform $exit-easing--productive $duration--moderate-02;
+  border-right: 1px solid theme-color-level('light', 2.85);
+
+  @include media-breakpoint-down(md) {
+    z-index: $zindex-fixed + 2;
+  }
+
+  &.open,
+  &:focus-within {
+    transform: translateX(0);
+    transition-timing-function: $entrance-easing--productive;
+  }
+
+  @include media-breakpoint-up($responsive-layout-bp) {
+    transition-duration: $duration--fast-01;
+    transform: translateX(0);
+  }
+}
+
+.nav-overlay {
+  position: fixed;
+  top: $header-height;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: $zindex-fixed + 1;
+  background-color: $black;
+  opacity: 0.5;
+
+  &.fade-enter-active {
+    transition: opacity $duration--moderate-02 $entrance-easing--productive;
+  }
+
+  &.fade-leave-active {
+    transition: opacity $duration--fast-02 $exit-easing--productive;
+  }
+
+  &.fade-enter, // Remove this vue2 based only class when switching to vue3
+  &.fade-enter-from, // This is vue3 based only class modified from 'fade-enter'
+  &.fade-leave-to {
+    opacity: 0;
+  }
+
+  @include media-breakpoint-up($responsive-layout-bp) {
+    display: none;
+  }
+}
+</style>
diff --git a/src/components/_sila/AppNavigation/AppNavigationMixin.js b/src/components/_sila/AppNavigation/AppNavigationMixin.js
new file mode 100644
index 00000000..bbbbb1ee
--- /dev/null
+++ b/src/components/_sila/AppNavigation/AppNavigationMixin.js
@@ -0,0 +1,182 @@
+import IconDashboard from '@carbon/icons-vue/es/dashboard/16';
+import IconTextLinkAnalysis from '@carbon/icons-vue/es/text-link--analysis/16';
+import IconDataCheck from '@carbon/icons-vue/es/data--check/16';
+import IconSettingsAdjust from '@carbon/icons-vue/es/settings--adjust/16';
+import IconSettings from '@carbon/icons-vue/es/settings/16';
+import IconSecurity from '@carbon/icons-vue/es/security/16';
+import IconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
+import IconDataBase from '@carbon/icons-vue/es/data--base--alt/16';
+
+const AppNavigationMixin = {
+  components: {
+    iconOverview: IconDashboard,
+    iconLogs: IconTextLinkAnalysis,
+    iconHealth: IconDataCheck,
+    iconControl: IconSettingsAdjust,
+    iconSettings: IconSettings,
+    iconSecurityAndAccess: IconSecurity,
+    iconExpand: IconChevronUp,
+    iconResourceManagement: IconDataBase,
+  },
+  data() {
+    return {
+      navigationItems: [
+        {
+          id: 'overview',
+          label: this.$t('appNavigation.overview'),
+          route: '/',
+          icon: 'iconOverview',
+        },
+        {
+          id: 'logs',
+          label: this.$t('appNavigation.logs'),
+          icon: 'iconLogs',
+          children: [
+            {
+              id: 'event-logs',
+              label: this.$t('appNavigation.eventLogs'),
+              route: '/logs/event-logs',
+            },
+            {
+              id: 'post-code-logs',
+              label: this.$t('appNavigation.postCodeLogs'),
+              route: '/logs/post-code-logs',
+            },
+          ],
+        },
+        {
+          id: 'hardware-status',
+          label: this.$t('appNavigation.hardwareStatus'),
+          icon: 'iconHealth',
+          children: [
+            {
+              id: 'inventory',
+              label: this.$t('appNavigation.inventory'),
+              route: '/hardware-status/inventory',
+            },
+            {
+              id: 'sensors',
+              label: this.$t('appNavigation.sensors'),
+              route: '/hardware-status/sensors',
+            },
+          ],
+        },
+        {
+          id: 'operations',
+          label: this.$t('appNavigation.operations'),
+          icon: 'iconControl',
+          children: [
+            {
+              id: 'factory-reset',
+              label: this.$t('appNavigation.factoryReset'),
+              route: '/operations/factory-reset',
+            },
+            {
+              id: 'kvm',
+              label: this.$t('appNavigation.kvm'),
+              route: '/operations/kvm',
+            },
+            {
+              id: 'key-clear',
+              label: this.$t('appNavigation.keyClear'),
+              route: '/operations/key-clear',
+            },
+            {
+              id: 'firmware',
+              label: this.$t('appNavigation.firmware'),
+              route: '/operations/firmware',
+            },
+            {
+              id: 'reboot-bmc',
+              label: this.$t('appNavigation.rebootBmc'),
+              route: '/operations/reboot-bmc',
+            },
+            {
+              id: 'serial-over-lan',
+              label: this.$t('appNavigation.serialOverLan'),
+              route: '/operations/serial-over-lan',
+            },
+            {
+              id: 'server-power-operations',
+              label: this.$t('appNavigation.serverPowerOperations'),
+              route: '/operations/server-power-operations',
+            },
+            {
+              id: 'virtual-media',
+              label: this.$t('appNavigation.virtualMedia'),
+              route: '/operations/virtual-media',
+            },
+          ],
+        },
+        {
+          id: 'settings',
+          label: this.$t('appNavigation.settings'),
+          icon: 'iconSettings',
+          children: [
+            {
+              id: 'date-time',
+              label: this.$t('appNavigation.dateTime'),
+              route: '/settings/date-time',
+            },
+            {
+              id: 'network',
+              label: this.$t('appNavigation.network'),
+              route: '/settings/network',
+            },
+            {
+              id: 'power-restore-policy',
+              label: this.$t('appNavigation.powerRestorePolicy'),
+              route: '/settings/power-restore-policy',
+            },
+          ],
+        },
+        {
+          id: 'security-and-access',
+          label: this.$t('appNavigation.securityAndAccess'),
+          icon: 'iconSecurityAndAccess',
+          children: [
+            {
+              id: 'sessions',
+              label: this.$t('appNavigation.sessions'),
+              route: '/security-and-access/sessions',
+            },
+            {
+              id: 'ldap',
+              label: this.$t('appNavigation.ldap'),
+              route: '/security-and-access/ldap',
+            },
+            {
+              id: 'user-management',
+              label: this.$t('appNavigation.userManagement'),
+              route: '/security-and-access/user-management',
+            },
+            {
+              id: 'policies',
+              label: this.$t('appNavigation.policies'),
+              route: '/security-and-access/policies',
+            },
+            {
+              id: 'certificates',
+              label: this.$t('appNavigation.certificates'),
+              route: '/security-and-access/certificates',
+            },
+          ],
+        },
+        {
+          id: 'resource-management',
+          label: this.$t('appNavigation.resourceManagement'),
+          icon: 'iconResourceManagement',
+          children: [
+            {
+              id: 'power',
+              label: this.$t('appNavigation.power'),
+              route: '/resource-management/power',
+            },
+          ],
+        },
+      ],
+    };
+  },
+};
+
+export default AppNavigationMixin;
diff --git a/src/components/_sila/AppNavigation/index.js b/src/components/_sila/AppNavigation/index.js
new file mode 100644
index 00000000..88fe8eb6
--- /dev/null
+++ b/src/components/_sila/AppNavigation/index.js
@@ -0,0 +1,2 @@
+import AppNavigation from './AppNavigation';
+export default AppNavigation;
diff --git a/src/components/_sila/Global/Alert.vue b/src/components/_sila/Global/Alert.vue
new file mode 100644
index 00000000..e8de9e27
--- /dev/null
+++ b/src/components/_sila/Global/Alert.vue
@@ -0,0 +1,47 @@
+<template>
+  <b-alert :show="show" :variant="variant" :class="{ small }">
+    <div
+      v-if="
+        variant == 'info' ||
+        variant == 'success' ||
+        variant == 'warning' ||
+        variant == 'danger'
+      "
+      class="alert-icon"
+    >
+      <status-icon :status="variant" />
+    </div>
+    <div class="alert-content">
+      <div class="alert-msg">
+        <slot />
+      </div>
+    </div>
+    <div class="alert-action">
+      <slot name="action"></slot>
+    </div>
+  </b-alert>
+</template>
+
+<script>
+import StatusIcon from '@/components/Global/StatusIcon';
+import { BAlert } from 'bootstrap-vue';
+
+export default {
+  name: 'Alert',
+  components: {
+    BAlert: BAlert,
+    StatusIcon: StatusIcon,
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: true,
+    },
+    variant: {
+      type: String,
+      default: '',
+    },
+    small: Boolean,
+  },
+};
+</script>
diff --git a/src/components/_sila/Global/ButtonBackToTop.vue b/src/components/_sila/Global/ButtonBackToTop.vue
new file mode 100644
index 00000000..9160c7b7
--- /dev/null
+++ b/src/components/_sila/Global/ButtonBackToTop.vue
@@ -0,0 +1,68 @@
+<template>
+  <b-button
+    id="scrollToTopBtn"
+    class="btn-top btn-icon-only"
+    :class="{ 'show-btn': showButton }"
+    variant="secondary"
+    :title="$t('global.ariaLabel.scrollToTop')"
+    @click="scrollToTop"
+  >
+    <icon-up-to-top />
+    <span class="sr-only">{{ $t('global.ariaLabel.scrollToTop') }}</span>
+  </b-button>
+</template>
+
+<script>
+import UpToTop24 from '@carbon/icons-vue/es/up-to-top/24';
+
+import { debounce } from 'lodash';
+
+export default {
+  name: 'BackToTop',
+  components: { IconUpToTop: UpToTop24 },
+  data() {
+    return {
+      showButton: false,
+    };
+  },
+  created() {
+    window.addEventListener('scroll', debounce(this.handleScroll, 200));
+  },
+  methods: {
+    handleScroll() {
+      document.documentElement.scrollTop > 500
+        ? (this.showButton = true)
+        : (this.showButton = false);
+    },
+    scrollToTop() {
+      document.documentElement.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.btn-top {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+
+  box-shadow: $box-shadow;
+  visibility: hidden;
+  opacity: 0;
+  transition: $transition-base;
+  z-index: $zindex-fixed;
+
+  @media (min-width: 1600px) {
+    left: 1485px;
+    right: auto;
+  }
+}
+.show-btn {
+  visibility: visible;
+  opacity: 1;
+}
+</style>
diff --git a/src/components/_sila/Global/FormFile.vue b/src/components/_sila/Global/FormFile.vue
new file mode 100644
index 00000000..cf713acf
--- /dev/null
+++ b/src/components/_sila/Global/FormFile.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="custom-form-file-container">
+    <label>
+      <b-form-file
+        :id="id"
+        v-model="file"
+        :accept="accept"
+        :disabled="disabled"
+        :state="state"
+        plain
+        @input="$emit('input', file)"
+      >
+      </b-form-file>
+      <span
+        class="add-file-btn btn"
+        :class="{
+          disabled,
+          'btn-secondary': isSecondary,
+          'btn-primary': !isSecondary,
+        }"
+      >
+        {{ $t('global.fileUpload.browseText') }}
+      </span>
+      <slot name="invalid"></slot>
+    </label>
+    <div v-if="file" class="clear-selected-file px-3 py-2 mt-2">
+      {{ file ? file.name : '' }}
+      <b-button
+        variant="light"
+        class="px-2 ml-auto"
+        :disabled="disabled"
+        @click="file = null"
+        ><icon-close :title="$t('global.fileUpload.clearSelectedFile')" /><span
+          class="sr-only"
+          >{{ $t('global.fileUpload.clearSelectedFile') }}</span
+        >
+      </b-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { BFormFile } from 'bootstrap-vue';
+import IconClose from '@carbon/icons-vue/es/close/20';
+
+export default {
+  name: 'FormFile',
+  components: { BFormFile, IconClose },
+  props: {
+    id: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    accept: {
+      type: String,
+      default: '',
+    },
+    state: {
+      type: Boolean,
+      default: true,
+    },
+    variant: {
+      type: String,
+      default: 'secondary',
+    },
+  },
+  data() {
+    return {
+      file: null,
+    };
+  },
+  computed: {
+    isSecondary() {
+      return this.variant === 'secondary';
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.form-control-file {
+  opacity: 0;
+  height: 0;
+  &:focus + span {
+    box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white;
+  }
+}
+
+// Get mouse pointer on complete element
+.add-file-btn {
+  position: relative;
+  &.disabled {
+    border-color: gray('400');
+    background-color: gray('400');
+    color: gray('600');
+    box-shadow: none !important;
+  }
+}
+
+.clear-selected-file {
+  display: flex;
+  align-items: center;
+  background-color: theme-color('light');
+  .btn {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+
+    &:focus {
+      box-shadow: inset 0 0 0 2px theme-color('primary');
+    }
+  }
+}
+</style>
diff --git a/src/components/_sila/Global/InfoTooltip.vue b/src/components/_sila/Global/InfoTooltip.vue
new file mode 100644
index 00000000..c91109d1
--- /dev/null
+++ b/src/components/_sila/Global/InfoTooltip.vue
@@ -0,0 +1,35 @@
+<template>
+  <b-button
+    v-b-tooltip
+    variant="link"
+    class="btn-tooltip btn-icon-only"
+    :title="title"
+  >
+    <icon-tooltip />
+    <span class="sr-only">{{ $t('global.ariaLabel.tooltip') }}</span>
+  </b-button>
+</template>
+
+<script>
+import IconTooltip from '@carbon/icons-vue/es/information/16';
+
+export default {
+  components: { IconTooltip },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.btn-tooltip {
+  padding: 0;
+  line-height: 1em;
+  svg {
+    vertical-align: baseline;
+  }
+}
+</style>
diff --git a/src/components/_sila/Global/InputPasswordToggle.vue b/src/components/_sila/Global/InputPasswordToggle.vue
new file mode 100644
index 00000000..d2c0d4a6
--- /dev/null
+++ b/src/components/_sila/Global/InputPasswordToggle.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="input-password-toggle-container">
+    <slot></slot>
+    <b-button
+      :title="togglePasswordLabel"
+      variant="link"
+      class="input-action-btn btn-icon-only"
+      :class="{ isVisible: isVisible }"
+      @click="toggleVisibility"
+    >
+      <icon-view-off v-if="isVisible" />
+      <icon-view v-else />
+      <span class="sr-only">{{ togglePasswordLabel }}</span>
+    </b-button>
+  </div>
+</template>
+
+<script>
+import IconView from '@carbon/icons-vue/es/view/20';
+import IconViewOff from '@carbon/icons-vue/es/view--off/20';
+
+export default {
+  name: 'InputPasswordToggle',
+  components: { IconView, IconViewOff },
+  data() {
+    return {
+      isVisible: false,
+      togglePasswordLabel: this.$t('global.ariaLabel.showPassword'),
+    };
+  },
+  methods: {
+    toggleVisibility() {
+      const firstChild = this.$children[0];
+      const inputEl = firstChild ? firstChild.$el : null;
+
+      this.isVisible = !this.isVisible;
+
+      if (inputEl && inputEl.nodeName === 'INPUT') {
+        inputEl.type = this.isVisible ? 'text' : 'password';
+      }
+
+      this.isVisible
+        ? (this.togglePasswordLabel = this.$t('global.ariaLabel.hidePassword'))
+        : (this.togglePasswordLabel = this.$t('global.ariaLabel.showPassword'));
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.input-password-toggle-container {
+  position: relative;
+}
+</style>
diff --git a/src/components/_sila/Global/LoadingBar.vue b/src/components/_sila/Global/LoadingBar.vue
new file mode 100644
index 00000000..0e9551b5
--- /dev/null
+++ b/src/components/_sila/Global/LoadingBar.vue
@@ -0,0 +1,93 @@
+<template>
+  <transition name="fade">
+    <b-progress v-if="!isLoadingComplete">
+      <b-progress-bar
+        striped
+        animated
+        :value="loadingIndicatorValue"
+        :aria-label="$t('global.ariaLabel.progressBar')"
+      />
+    </b-progress>
+  </transition>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loadingIndicatorValue: 0,
+      isLoadingComplete: false,
+      loadingIntervalId: null,
+      timeoutId: null,
+    };
+  },
+  created() {
+    this.$root.$on('loader-start', () => {
+      this.startLoadingInterval();
+    });
+    this.$root.$on('loader-end', () => {
+      this.endLoadingInterval();
+    });
+    this.$root.$on('loader-hide', () => {
+      this.hideLoadingBar();
+    });
+  },
+  methods: {
+    startLoadingInterval() {
+      this.clearLoadingInterval();
+      this.clearTimeout();
+      this.loadingIndicatorValue = 0;
+      this.isLoadingComplete = false;
+      this.loadingIntervalId = setInterval(() => {
+        this.loadingIndicatorValue += 1;
+        if (this.loadingIndicatorValue > 100) this.clearLoadingInterval();
+      }, 100);
+    },
+    endLoadingInterval() {
+      this.clearLoadingInterval();
+      this.clearTimeout();
+      this.loadingIndicatorValue = 100;
+      this.timeoutId = setTimeout(() => {
+        // Let animation complete before hiding
+        // the loading bar
+        this.isLoadingComplete = true;
+      }, 1000);
+    },
+    hideLoadingBar() {
+      this.clearLoadingInterval();
+      this.clearTimeout();
+      this.loadingIndicatorValue = 0;
+      this.isLoadingComplete = true;
+    },
+    clearLoadingInterval() {
+      if (this.loadingIntervalId) clearInterval(this.loadingIntervalId);
+      this.loadingIntervalId = null;
+    },
+    clearTimeout() {
+      if (this.timeoutId) clearTimeout(this.timeoutId);
+      this.timeoutId = null;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.progress {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -0.4rem;
+  opacity: 1;
+  transition: opacity $duration--moderate-01 $standard-easing--productive;
+  height: 0.4rem;
+
+  &.fade-enter, // Remove this vue2 based only class when switching to vue3
+  &.fade-enter-from, // This is vue3 based only class modified from 'fade-enter'
+  &.fade-leave-to {
+    opacity: 0;
+  }
+}
+.progress-bar {
+  background-color: $loading-color;
+}
+</style>
diff --git a/src/components/_sila/Global/PageContainer.vue b/src/components/_sila/Global/PageContainer.vue
new file mode 100644
index 00000000..ab4adb63
--- /dev/null
+++ b/src/components/_sila/Global/PageContainer.vue
@@ -0,0 +1,37 @@
+<template>
+  <main id="main-content" class="page-container">
+    <slot />
+  </main>
+</template>
+
+<script>
+import JumpLinkMixin from '@/components/Mixins/JumpLinkMixin';
+export default {
+  name: 'PageContainer',
+  mixins: [JumpLinkMixin],
+  created() {
+    this.$root.$on('skip-navigation', () => {
+      this.setFocus(this.$el);
+    });
+  },
+};
+</script>
+<style lang="scss" scoped>
+main {
+  width: 100%;
+  height: 100%;
+  padding-top: $spacer * 1.5;
+  padding-bottom: $spacer * 3;
+  padding-left: $spacer;
+  padding-right: $spacer;
+
+  &:focus-visible {
+    box-shadow: inset 0 0 0 2px theme-color('primary');
+    outline: none;
+  }
+
+  @include media-breakpoint-up($responsive-layout-bp) {
+    padding-left: $spacer * 2;
+  }
+}
+</style>
diff --git a/src/components/_sila/Global/PageSection.vue b/src/components/_sila/Global/PageSection.vue
new file mode 100644
index 00000000..dd39ddd5
--- /dev/null
+++ b/src/components/_sila/Global/PageSection.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="page-section">
+    <h2 v-if="sectionTitle">{{ sectionTitle }}</h2>
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PageSection',
+  props: {
+    sectionTitle: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.page-section {
+  margin-bottom: $spacer * 4;
+}
+
+h2 {
+  @include font-size($h3-font-size);
+  margin-bottom: $spacer;
+}
+</style>
diff --git a/src/components/_sila/Global/PageTitle.vue b/src/components/_sila/Global/PageTitle.vue
new file mode 100644
index 00000000..45c75edb
--- /dev/null
+++ b/src/components/_sila/Global/PageTitle.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="page-title">
+    <h1>{{ title }}</h1>
+    <p v-if="description">{{ description }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PageTitle',
+  props: {
+    description: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      title: this.$route.meta.title,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.page-title {
+  margin-bottom: $spacer * 2;
+}
+p {
+  max-width: 72ch;
+}
+</style>
diff --git a/src/components/_sila/Global/Search.vue b/src/components/_sila/Global/Search.vue
new file mode 100644
index 00000000..ac8f9bfb
--- /dev/null
+++ b/src/components/_sila/Global/Search.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="search-global">
+    <b-form-group
+      :label="$t('global.form.search')"
+      :label-for="`searchInput-${_uid}`"
+      label-class="invisible"
+      class="mb-2"
+    >
+      <b-input-group size="md" class="align-items-center">
+        <b-input-group-prepend>
+          <icon-search class="search-icon" />
+        </b-input-group-prepend>
+        <b-form-input
+          :id="`searchInput-${_uid}`"
+          ref="searchInput"
+          v-model="filter"
+          class="search-input"
+          type="text"
+          :aria-label="$t('global.form.search')"
+          :placeholder="placeholder"
+          @input="onChangeInput"
+        >
+        </b-form-input>
+        <b-button
+          v-if="filter"
+          variant="link"
+          class="btn-icon-only input-action-btn"
+          :title="$t('global.ariaLabel.clearSearch')"
+          @click="onClearSearch"
+        >
+          <icon-close />
+          <span class="sr-only">{{ $t('global.ariaLabel.clearSearch') }}</span>
+        </b-button>
+      </b-input-group>
+    </b-form-group>
+  </div>
+</template>
+
+<script>
+import IconSearch from '@carbon/icons-vue/es/search/16';
+import IconClose from '@carbon/icons-vue/es/close/20';
+
+export default {
+  name: 'Search',
+  components: { IconSearch, IconClose },
+  props: {
+    placeholder: {
+      type: String,
+      default: function () {
+        return this.$t('global.form.search');
+      },
+    },
+  },
+  data() {
+    return {
+      filter: null,
+    };
+  },
+  methods: {
+    onChangeInput() {
+      this.$emit('change-search', this.filter);
+    },
+    onClearSearch() {
+      this.filter = '';
+      this.$emit('clear-search');
+      this.$refs.searchInput.focus();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.search-input {
+  padding-left: ($spacer * 2);
+}
+.search-icon {
+  position: absolute;
+  left: 10px;
+  top: 12px;
+  z-index: 4;
+  stroke: gray('400');
+}
+</style>
diff --git a/src/components/_sila/Global/StatusIcon.vue b/src/components/_sila/Global/StatusIcon.vue
new file mode 100644
index 00000000..4552633e
--- /dev/null
+++ b/src/components/_sila/Global/StatusIcon.vue
@@ -0,0 +1,61 @@
+<template>
+  <span :class="['status-icon', status]">
+    <icon-info v-if="status === 'info'" />
+    <icon-success v-else-if="status === 'success'" />
+    <icon-warning v-else-if="status === 'warning'" />
+    <icon-danger v-else-if="status === 'danger'" />
+    <icon-secondary v-else />
+  </span>
+</template>
+
+<script>
+import IconInfo from '@carbon/icons-vue/es/information--filled/20';
+import IconCheckmark from '@carbon/icons-vue/es/checkmark--filled/20';
+import IconWarning from '@carbon/icons-vue/es/warning--filled/20';
+import IconError from '@carbon/icons-vue/es/error--filled/20';
+import IconMisuse from '@carbon/icons-vue/es/misuse/20';
+
+export default {
+  name: 'StatusIcon',
+  components: {
+    IconInfo: IconInfo,
+    iconSuccess: IconCheckmark,
+    iconDanger: IconMisuse,
+    iconSecondary: IconError,
+    iconWarning: IconWarning,
+  },
+  props: {
+    status: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.status-icon {
+  vertical-align: text-bottom;
+
+  &.info {
+    color: theme-color('info');
+  }
+  &.success {
+    color: theme-color('success');
+  }
+  &.danger {
+    color: theme-color('danger');
+  }
+  &.secondary {
+    color: gray('600');
+    transform: rotate(-45deg);
+  }
+  &.warning {
+    color: theme-color('warning');
+  }
+
+  svg {
+    fill: currentColor;
+  }
+}
+</style>
diff --git a/src/components/_sila/Global/TableCellCount.vue b/src/components/_sila/Global/TableCellCount.vue
new file mode 100644
index 00000000..acb4d443
--- /dev/null
+++ b/src/components/_sila/Global/TableCellCount.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="mt-2">
+    <p v-if="!filterActive">
+      {{ $t('global.table.items', { count: totalNumberOfCells }) }}
+    </p>
+    <p v-else>
+      {{
+        $t('global.table.selectedItems', {
+          count: totalNumberOfCells,
+          filterCount: filteredItemsCount,
+        })
+      }}
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    filteredItemsCount: {
+      type: Number,
+      required: true,
+    },
+    totalNumberOfCells: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    filterActive() {
+      return this.filteredItemsCount !== this.totalNumberOfCells;
+    },
+  },
+};
+</script>
diff --git a/src/components/_sila/Global/TableDateFilter.vue b/src/components/_sila/Global/TableDateFilter.vue
new file mode 100644
index 00000000..aa10cb5c
--- /dev/null
+++ b/src/components/_sila/Global/TableDateFilter.vue
@@ -0,0 +1,165 @@
+<template>
+  <b-row class="mb-2">
+    <b-col class="d-sm-flex">
+      <b-form-group
+        :label="$t('global.table.fromDate')"
+        label-for="input-from-date"
+        class="mr-3 my-0 w-100"
+      >
+        <b-input-group>
+          <b-form-input
+            id="input-from-date"
+            v-model="fromDate"
+            placeholder="YYYY-MM-DD"
+            :state="getValidationState($v.fromDate)"
+            class="form-control-with-button mb-3 mb-md-0"
+            @blur="$v.fromDate.$touch()"
+          />
+          <b-form-invalid-feedback role="alert">
+            <template v-if="!$v.fromDate.pattern">
+              {{ $t('global.form.invalidFormat') }}
+            </template>
+            <template v-if="!$v.fromDate.maxDate">
+              {{ $t('global.form.dateMustBeBefore', { date: toDate }) }}
+            </template>
+          </b-form-invalid-feedback>
+          <b-form-datepicker
+            v-model="fromDate"
+            class="btn-datepicker btn-icon-only"
+            button-only
+            right
+            :max="toDate"
+            :hide-header="true"
+            :locale="locale"
+            :label-help="
+              $t('global.calendar.useCursorKeysToNavigateCalendarDates')
+            "
+            :title="$t('global.calendar.selectDate')"
+            button-variant="link"
+            aria-controls="input-from-date"
+          >
+            <template #button-content>
+              <icon-calendar />
+              <span class="sr-only">
+                {{ $t('global.calendar.selectDate') }}
+              </span>
+            </template>
+          </b-form-datepicker>
+        </b-input-group>
+      </b-form-group>
+      <b-form-group
+        :label="$t('global.table.toDate')"
+        label-for="input-to-date"
+        class="my-0 w-100"
+      >
+        <b-input-group>
+          <b-form-input
+            id="input-to-date"
+            v-model="toDate"
+            placeholder="YYYY-MM-DD"
+            :state="getValidationState($v.toDate)"
+            class="form-control-with-button"
+            @blur="$v.toDate.$touch()"
+          />
+          <b-form-invalid-feedback role="alert">
+            <template v-if="!$v.toDate.pattern">
+              {{ $t('global.form.invalidFormat') }}
+            </template>
+            <template v-if="!$v.toDate.minDate">
+              {{ $t('global.form.dateMustBeAfter', { date: fromDate }) }}
+            </template>
+          </b-form-invalid-feedback>
+          <b-form-datepicker
+            v-model="toDate"
+            class="btn-datepicker btn-icon-only"
+            button-only
+            right
+            :min="fromDate"
+            :hide-header="true"
+            :locale="locale"
+            :label-help="
+              $t('global.calendar.useCursorKeysToNavigateCalendarDates')
+            "
+            :title="$t('global.calendar.selectDate')"
+            button-variant="link"
+            aria-controls="input-to-date"
+          >
+            <template #button-content>
+              <icon-calendar />
+              <span class="sr-only">
+                {{ $t('global.calendar.selectDate') }}
+              </span>
+            </template>
+          </b-form-datepicker>
+        </b-input-group>
+      </b-form-group>
+    </b-col>
+  </b-row>
+</template>
+
+<script>
+import IconCalendar from '@carbon/icons-vue/es/calendar/20';
+import { helpers } from 'vuelidate/lib/validators';
+
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+
+const isoDateRegex = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/;
+
+export default {
+  components: { IconCalendar },
+  mixins: [VuelidateMixin],
+  data() {
+    return {
+      fromDate: '',
+      toDate: '',
+      offsetToDate: '',
+      locale: this.$store.getters['global/languagePreference'],
+    };
+  },
+  validations() {
+    return {
+      fromDate: {
+        pattern: helpers.regex('pattern', isoDateRegex),
+        maxDate: (value) => {
+          if (!this.toDate) return true;
+          const date = new Date(value);
+          const maxDate = new Date(this.toDate);
+          if (date.getTime() > maxDate.getTime()) return false;
+          return true;
+        },
+      },
+      toDate: {
+        pattern: helpers.regex('pattern', isoDateRegex),
+        minDate: (value) => {
+          if (!this.fromDate) return true;
+          const date = new Date(value);
+          const minDate = new Date(this.fromDate);
+          if (date.getTime() < minDate.getTime()) return false;
+          return true;
+        },
+      },
+    };
+  },
+  watch: {
+    fromDate() {
+      this.emitChange();
+    },
+    toDate(newVal) {
+      // Offset the end date to end of day to make sure all
+      // entries from selected end date are included in filter
+      this.offsetToDate = new Date(newVal).setUTCHours(23, 59, 59, 999);
+      this.emitChange();
+    },
+  },
+  methods: {
+    emitChange() {
+      if (this.$v.$invalid) return;
+      this.$v.$reset(); //reset to re-validate on blur
+      this.$emit('change', {
+        fromDate: this.fromDate ? new Date(this.fromDate) : null,
+        toDate: this.toDate ? new Date(this.offsetToDate) : null,
+      });
+    },
+  },
+};
+</script>
diff --git a/src/components/_sila/Global/TableFilter.vue b/src/components/_sila/Global/TableFilter.vue
new file mode 100644
index 00000000..7c66bea6
--- /dev/null
+++ b/src/components/_sila/Global/TableFilter.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="table-filter d-inline-block">
+    <p class="d-inline-block mb-0">
+      <b-badge v-for="(tag, index) in tags" :key="index" pill>
+        {{ tag }}
+        <b-button-close
+          :disabled="dropdownVisible"
+          :aria-hidden="true"
+          @click="removeTag(tag)"
+        />
+      </b-badge>
+    </p>
+    <b-dropdown
+      variant="link"
+      no-caret
+      right
+      data-test-id="tableFilter-dropdown-options"
+      @hide="dropdownVisible = false"
+      @show="dropdownVisible = true"
+    >
+      <template #button-content>
+        <icon-filter />
+        {{ $t('global.action.filter') }}
+      </template>
+      <b-dropdown-form>
+        <b-form-group
+          v-for="(filter, index) of filters"
+          :key="index"
+          :label="filter.label"
+        >
+          <b-form-checkbox-group v-model="tags">
+            <b-form-checkbox
+              v-for="value in filter.values"
+              :key="value"
+              :value="value"
+              :data-test-id="`tableFilter-checkbox-${value}`"
+            >
+              <b-dropdown-item>
+                {{ value }}
+              </b-dropdown-item>
+            </b-form-checkbox>
+          </b-form-checkbox-group>
+        </b-form-group>
+      </b-dropdown-form>
+      <b-dropdown-item-button
+        variant="primary"
+        data-test-id="tableFilter-button-clearAll"
+        @click="clearAllTags"
+      >
+        {{ $t('global.action.clearAll') }}
+      </b-dropdown-item-button>
+    </b-dropdown>
+  </div>
+</template>
+
+<script>
+import IconFilter from '@carbon/icons-vue/es/settings--adjust/20';
+
+export default {
+  name: 'TableFilter',
+  components: { IconFilter },
+  props: {
+    filters: {
+      type: Array,
+      default: () => [],
+      validator: (prop) => {
+        return prop.every(
+          (filter) => 'label' in filter && 'values' in filter && 'key' in filter
+        );
+      },
+    },
+  },
+  data() {
+    return {
+      dropdownVisible: false,
+      tags: [],
+    };
+  },
+  watch: {
+    tags: {
+      handler() {
+        this.emitChange();
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    removeTag(removedTag) {
+      this.tags = this.tags.filter((tag) => tag !== removedTag);
+    },
+    clearAllTags() {
+      this.tags = [];
+    },
+    emitChange() {
+      const activeFilters = this.filters.map(({ key, values }) => {
+        const activeValues = values.filter(
+          (value) => this.tags.indexOf(value) !== -1
+        );
+        return {
+          key,
+          values: activeValues,
+        };
+      });
+      this.$emit('filter-change', { activeFilters });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.badge {
+  margin-right: $spacer / 2;
+}
+</style>
diff --git a/src/components/_sila/Global/TableRowAction.vue b/src/components/_sila/Global/TableRowAction.vue
new file mode 100644
index 00000000..549f1b52
--- /dev/null
+++ b/src/components/_sila/Global/TableRowAction.vue
@@ -0,0 +1,112 @@
+<template>
+  <span>
+    <b-link
+      v-if="value === 'export'"
+      class="align-bottom btn-icon-only py-0 btn-link"
+      :download="download"
+      :href="href"
+      :title="title"
+    >
+      <slot name="icon">
+        {{ $t('global.action.export') }}
+      </slot>
+      <span v-if="btnIconOnly" class="sr-only">{{ title }}</span>
+    </b-link>
+    <b-link
+      v-else-if="
+        value === 'download' && downloadInNewTab && downloadLocation !== ''
+      "
+      class="align-bottom btn-icon-only py-0 btn-link"
+      target="_blank"
+      :href="downloadLocation"
+      :title="title"
+    >
+      <slot name="icon" />
+      <span class="sr-only">
+        {{ $t('global.action.download') }}
+      </span>
+    </b-link>
+    <b-link
+      v-else-if="value === 'download' && downloadLocation !== ''"
+      class="align-bottom btn-icon-only py-0 btn-link"
+      :download="exportName"
+      :href="downloadLocation"
+      :title="title"
+    >
+      <slot name="icon" />
+      <span class="sr-only">
+        {{ $t('global.action.download') }}
+      </span>
+    </b-link>
+    <b-button
+      v-else-if="showButton"
+      variant="link"
+      :class="{ 'btn-icon-only': btnIconOnly }"
+      :disabled="!enabled"
+      :title="btnIconOnly ? title : !title"
+      @click="$emit('click-table-action', value)"
+    >
+      <slot name="icon">
+        {{ title }}
+      </slot>
+      <span v-if="btnIconOnly" class="sr-only">{{ title }}</span>
+    </b-button>
+  </span>
+</template>
+
+<script>
+import { omit } from 'lodash';
+
+export default {
+  name: 'TableRowAction',
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+    enabled: {
+      type: Boolean,
+      default: true,
+    },
+    title: {
+      type: String,
+      default: null,
+    },
+    rowData: {
+      type: Object,
+      default: () => {},
+    },
+    exportName: {
+      type: String,
+      default: 'export',
+    },
+    downloadLocation: {
+      type: String,
+      default: '',
+    },
+    btnIconOnly: {
+      type: Boolean,
+      default: true,
+    },
+    downloadInNewTab: {
+      type: Boolean,
+      default: false,
+    },
+    showButton: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    dataForExport() {
+      return JSON.stringify(omit(this.rowData, 'actions'));
+    },
+    download() {
+      return `${this.exportName}.json`;
+    },
+    href() {
+      return `data:text/json;charset=utf-8,${this.dataForExport}`;
+    },
+  },
+};
+</script>
diff --git a/src/components/_sila/Global/TableToolbar.vue b/src/components/_sila/Global/TableToolbar.vue
new file mode 100644
index 00000000..5235feae
--- /dev/null
+++ b/src/components/_sila/Global/TableToolbar.vue
@@ -0,0 +1,130 @@
+<template>
+  <transition name="slide">
+    <div v-if="isToolbarActive" class="toolbar-container">
+      <div class="toolbar-content">
+        <p class="toolbar-selected">
+          {{ selectedItemsCount }} {{ $t('global.action.selected') }}
+        </p>
+        <div class="toolbar-actions d-flex">
+          <slot name="toolbar-buttons"></slot>
+          <b-button
+            v-for="(action, index) in actions"
+            :key="index"
+            :data-test-id="`table-button-${action.value}Selected`"
+            variant="primary"
+            class="d-block"
+            @click="$emit('batch-action', action.value)"
+          >
+            {{ action.label }}
+          </b-button>
+          <b-button
+            variant="secondary"
+            class="d-block"
+            @click="$emit('clear-selected')"
+          >
+            {{ $t('global.action.cancel') }}
+          </b-button>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'TableToolbar',
+  props: {
+    selectedItemsCount: {
+      type: Number,
+      required: true,
+    },
+    actions: {
+      type: Array,
+      default: () => [],
+      validator: (prop) => {
+        return prop.every((action) => {
+          return (
+            Object.prototype.hasOwnProperty.call(action, 'value') &&
+            Object.prototype.hasOwnProperty.call(action, 'label')
+          );
+        });
+      },
+    },
+  },
+  data() {
+    return {
+      isToolbarActive: false,
+    };
+  },
+  watch: {
+    selectedItemsCount: function (selectedItemsCount) {
+      if (selectedItemsCount > 0) {
+        this.isToolbarActive = true;
+      } else {
+        this.isToolbarActive = false;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$toolbar-height: 46px;
+
+.toolbar-container {
+  width: 100%;
+  position: relative;
+  z-index: $zindex-dropdown + 1;
+}
+
+.toolbar-content {
+  height: $toolbar-height;
+  background-color: theme-color('primary');
+  color: $white;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -$toolbar-height;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.toolbar-selected {
+  line-height: $toolbar-height;
+  margin: 0;
+  padding: 0 $spacer;
+}
+
+// Using v-deep to style export slot child-element
+// depricated and vue-js 3
+.toolbar-actions ::v-deep .btn {
+  position: relative;
+  &:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    height: 1.5rem;
+    width: 1px;
+    background: rgba($white, 0.6);
+  }
+  &:last-child,
+  &:first-child {
+    &:after {
+      width: 0;
+    }
+  }
+}
+
+.slide-enter-active {
+  transition: transform $duration--moderate-02 $entrance-easing--productive;
+}
+.slide-leave-active {
+  transition: transform $duration--moderate-02 $exit-easing--productive;
+}
+.slide-enter, // Remove this vue2 based only class when switching to vue3
+.slide-enter-from, // This is vue3 based only class modified from 'slide-enter'
+.slide-leave-to {
+  transform: translateY($toolbar-height);
+}
+</style>
diff --git a/src/components/_sila/Global/TableToolbarExport.vue b/src/components/_sila/Global/TableToolbarExport.vue
new file mode 100644
index 00000000..69646ea6
--- /dev/null
+++ b/src/components/_sila/Global/TableToolbarExport.vue
@@ -0,0 +1,36 @@
+<template>
+  <b-button
+    class="d-flex align-items-center"
+    variant="primary"
+    :download="download"
+    :href="href"
+  >
+    {{ $t('global.action.export') }}
+  </b-button>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    fileName: {
+      type: String,
+      default: 'data',
+    },
+  },
+  computed: {
+    dataForExport() {
+      return JSON.stringify(this.data);
+    },
+    download() {
+      return `${this.fileName}.json`;
+    },
+    href() {
+      return `data:text/json;charset=utf-8,${this.dataForExport}`;
+    },
+  },
+};
+</script>
diff --git a/src/components/_sila/Mixins/BVPaginationMixin.js b/src/components/_sila/Mixins/BVPaginationMixin.js
new file mode 100644
index 00000000..4ccf6f2c
--- /dev/null
+++ b/src/components/_sila/Mixins/BVPaginationMixin.js
@@ -0,0 +1,34 @@
+import i18n from '@/i18n';
+export const currentPage = 1;
+export const perPage = 20;
+export const itemsPerPageOptions = [
+  {
+    value: 10,
+    text: '10',
+  },
+  {
+    value: 20,
+    text: '20',
+  },
+  {
+    value: 30,
+    text: '30',
+  },
+  {
+    value: 40,
+    text: '40',
+  },
+  {
+    value: 0,
+    text: i18n.t('global.table.viewAll'),
+  },
+];
+const BVPaginationMixin = {
+  methods: {
+    getTotalRowCount(count) {
+      return this.perPage === 0 ? 0 : count;
+    },
+  },
+};
+
+export default BVPaginationMixin;
diff --git a/src/components/_sila/Mixins/BVTableSelectableMixin.js b/src/components/_sila/Mixins/BVTableSelectableMixin.js
new file mode 100644
index 00000000..b4f0b953
--- /dev/null
+++ b/src/components/_sila/Mixins/BVTableSelectableMixin.js
@@ -0,0 +1,41 @@
+export const selectedRows = [];
+export const tableHeaderCheckboxModel = false;
+export const tableHeaderCheckboxIndeterminate = false;
+
+const BVTableSelectableMixin = {
+  methods: {
+    clearSelectedRows(tableRef) {
+      if (tableRef) tableRef.clearSelected();
+    },
+    toggleSelectRow(tableRef, rowIndex) {
+      if (tableRef && rowIndex !== undefined) {
+        tableRef.isRowSelected(rowIndex)
+          ? tableRef.unselectRow(rowIndex)
+          : tableRef.selectRow(rowIndex);
+      }
+    },
+    onRowSelected(selectedRows, totalRowsCount) {
+      if (selectedRows && totalRowsCount !== undefined) {
+        this.selectedRows = selectedRows;
+        if (selectedRows.length === 0) {
+          this.tableHeaderCheckboxIndeterminate = false;
+          this.tableHeaderCheckboxModel = false;
+        } else if (selectedRows.length === totalRowsCount) {
+          this.tableHeaderCheckboxIndeterminate = false;
+          this.tableHeaderCheckboxModel = true;
+        } else {
+          this.tableHeaderCheckboxIndeterminate = true;
+          this.tableHeaderCheckboxModel = true;
+        }
+      }
+    },
+    onChangeHeaderCheckbox(tableRef) {
+      if (tableRef) {
+        if (this.tableHeaderCheckboxModel) tableRef.selectAllRows();
+        else tableRef.clearSelected();
+      }
+    },
+  },
+};
+
+export default BVTableSelectableMixin;
diff --git a/src/components/_sila/Mixins/BVToastMixin.js b/src/components/_sila/Mixins/BVToastMixin.js
new file mode 100644
index 00000000..a04ef438
--- /dev/null
+++ b/src/components/_sila/Mixins/BVToastMixin.js
@@ -0,0 +1,115 @@
+import StatusIcon from '../Global/StatusIcon';
+
+const BVToastMixin = {
+  components: {
+    StatusIcon,
+  },
+  methods: {
+    $_BVToastMixin_createTitle(title, status) {
+      const statusIcon = this.$createElement('StatusIcon', {
+        props: { status },
+      });
+      const titleWithIcon = this.$createElement(
+        'strong',
+        { class: 'toast-icon' },
+        [statusIcon, title]
+      );
+      return titleWithIcon;
+    },
+    $_BVToastMixin_createBody(messageBody) {
+      if (Array.isArray(messageBody)) {
+        return messageBody.map((message) =>
+          this.$createElement('p', { class: 'mb-0' }, message)
+        );
+      } else {
+        return [this.$createElement('p', { class: 'mb-0' }, messageBody)];
+      }
+    },
+    $_BVToastMixin_createTimestamp() {
+      const timestamp = this.$options.filters.formatTime(new Date());
+      return this.$createElement('p', { class: 'mt-3 mb-0' }, timestamp);
+    },
+    $_BVToastMixin_createRefreshAction() {
+      return this.$createElement(
+        'BLink',
+        {
+          class: 'd-inline-block mt-3',
+          on: {
+            click: () => {
+              this.$root.$emit('refresh-application');
+            },
+          },
+        },
+        this.$t('global.action.refresh')
+      );
+    },
+    $_BVToastMixin_initToast(body, title, variant) {
+      this.$root.$bvToast.toast(body, {
+        title,
+        variant,
+        autoHideDelay: 10000, //auto hide in milliseconds
+        noAutoHide: variant !== 'success',
+        isStatus: true,
+        solid: true,
+      });
+    },
+    successToast(
+      message,
+      {
+        title: t = this.$t('global.status.success'),
+        timestamp,
+        refreshAction,
+      } = {}
+    ) {
+      const body = this.$_BVToastMixin_createBody(message);
+      const title = this.$_BVToastMixin_createTitle(t, 'success');
+      if (refreshAction) body.push(this.$_BVToastMixin_createRefreshAction());
+      if (timestamp) body.push(this.$_BVToastMixin_createTimestamp());
+      this.$_BVToastMixin_initToast(body, title, 'success');
+    },
+    errorToast(
+      message,
+      {
+        title: t = this.$t('global.status.error'),
+        timestamp,
+        refreshAction,
+      } = {}
+    ) {
+      const body = this.$_BVToastMixin_createBody(message);
+      const title = this.$_BVToastMixin_createTitle(t, 'danger');
+      if (refreshAction) body.push(this.$_BVToastMixin_createRefreshAction());
+      if (timestamp) body.push(this.$_BVToastMixin_createTimestamp());
+      this.$_BVToastMixin_initToast(body, title, 'danger');
+    },
+    warningToast(
+      message,
+      {
+        title: t = this.$t('global.status.warning'),
+        timestamp,
+        refreshAction,
+      } = {}
+    ) {
+      const body = this.$_BVToastMixin_createBody(message);
+      const title = this.$_BVToastMixin_createTitle(t, 'warning');
+      if (refreshAction) body.push(this.$_BVToastMixin_createRefreshAction());
+      if (timestamp) body.push(this.$_BVToastMixin_createTimestamp());
+      this.$_BVToastMixin_initToast(body, title, 'warning');
+    },
+    infoToast(
+      message,
+      {
+        title: t = this.$t('global.status.informational'),
+        timestamp,
+        refreshAction,
+      } = {}
+    ) {
+      const body = this.$_BVToastMixin_createBody(message);
+      const title = this.$_BVToastMixin_createTitle(t, 'info');
+      if (refreshAction) body.push(this.$_BVToastMixin_createRefreshAction());
+      if (timestamp) body.push(this.$_BVToastMixin_createTimestamp());
+      this.$_BVToastMixin_initToast(body, title, 'info');
+    },
+  },
+};
+
+export default BVToastMixin;
diff --git a/src/components/_sila/Mixins/DataFormatterMixin.js b/src/components/_sila/Mixins/DataFormatterMixin.js
new file mode 100644
index 00000000..5ce79327
--- /dev/null
+++ b/src/components/_sila/Mixins/DataFormatterMixin.js
@@ -0,0 +1,30 @@
+const DataFormatterMixin = {
+  methods: {
+    dataFormatter(value) {
+      if (value === undefined || value === null || value === '') {
+        return '--';
+      } else if (typeof value === 'number') {
+        return parseFloat(value.toFixed(3));
+      } else {
+        return value;
+      }
+    },
+    statusIcon(status) {
+      switch (status) {
+        case 'OK':
+          return 'success';
+        case 'Warning':
+          return 'warning';
+        case 'Critical':
+          return 'danger';
+        default:
+          return '';
+      }
+    },
+    dataFormatterArray(value) {
+      return value.join(', ');
+    },
+  },
+};
+
+export default DataFormatterMixin;
diff --git a/src/components/_sila/Mixins/JumpLinkMixin.js b/src/components/_sila/Mixins/JumpLinkMixin.js
new file mode 100644
index 00000000..b038527b
--- /dev/null
+++ b/src/components/_sila/Mixins/JumpLinkMixin.js
@@ -0,0 +1,27 @@
+const JumpLinkMixin = {
+  methods: {
+    setFocus(element) {
+      element.setAttribute('tabindex', '-1');
+      element.focus();
+      // Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk
+      element.removeAttribute('tabindex');
+    },
+    scrollToOffset(event) {
+      // Select element to scroll to
+      const ref = event.target.getAttribute('data-ref');
+      const element = this.$refs[ref].$el;
+
+      // Set focus and tabindex on selected element
+      this.setFocus(element);
+
+      // Set scroll offset below header
+      const offset = element.offsetTop - 50;
+      window.scroll({
+        top: offset,
+        behavior: 'smooth',
+      });
+    },
+  },
+};
+
+export default JumpLinkMixin;
diff --git a/src/components/_sila/Mixins/LoadingBarMixin.js b/src/components/_sila/Mixins/LoadingBarMixin.js
new file mode 100644
index 00000000..d1152703
--- /dev/null
+++ b/src/components/_sila/Mixins/LoadingBarMixin.js
@@ -0,0 +1,19 @@
+export const loading = true;
+
+const LoadingBarMixin = {
+  methods: {
+    startLoader() {
+      this.$root.$emit('loader-start');
+      this.loading = true;
+    },
+    endLoader() {
+      this.$root.$emit('loader-end');
+      this.loading = false;
+    },
+    hideLoader() {
+      this.$root.$emit('loader-hide');
+    },
+  },
+};
+
+export default LoadingBarMixin;
diff --git a/src/components/_sila/Mixins/LocalTimezoneLabelMixin.js b/src/components/_sila/Mixins/LocalTimezoneLabelMixin.js
new file mode 100644
index 00000000..6b4141c6
--- /dev/null
+++ b/src/components/_sila/Mixins/LocalTimezoneLabelMixin.js
@@ -0,0 +1,14 @@
+import { format } from 'date-fns-tz';
+
+const LocalTimezoneLabelMixin = {
+  methods: {
+    localOffset() {
+      const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+      const shortTz = this.$options.filters.shortTimeZone(new Date());
+      const pattern = `'${shortTz}' O`;
+      return format(new Date(), pattern, { timezone }).replace('GMT', 'UTC');
+    },
+  },
+};
+
+export default LocalTimezoneLabelMixin;
diff --git a/src/components/_sila/Mixins/SearchFilterMixin.js b/src/components/_sila/Mixins/SearchFilterMixin.js
new file mode 100644
index 00000000..a4819e26
--- /dev/null
+++ b/src/components/_sila/Mixins/SearchFilterMixin.js
@@ -0,0 +1,14 @@
+export const searchFilter = null;
+
+const SearchFilterMixin = {
+  methods: {
+    onChangeSearchInput(searchValue) {
+      this.searchFilter = searchValue;
+    },
+    onClearSearchInput() {
+      this.searchFilter = null;
+    },
+  },
+};
+
+export default SearchFilterMixin;
diff --git a/src/components/_sila/Mixins/TableFilterMixin.js b/src/components/_sila/Mixins/TableFilterMixin.js
new file mode 100644
index 00000000..7a2cc540
--- /dev/null
+++ b/src/components/_sila/Mixins/TableFilterMixin.js
@@ -0,0 +1,58 @@
+import { includes } from 'lodash';
+
+const TableFilterMixin = {
+  methods: {
+    getFilteredTableData(tableData = [], filters = []) {
+      const filterItems = filters.reduce((arr, filter) => {
+        return [...arr, ...filter.values];
+      }, []);
+      // If no filters are active, then return all table data
+      if (filterItems.length === 0) return tableData;
+
+      // Check if row property value is included in list of
+      // active filters
+      return tableData.filter((row) => {
+        let returnRow = false;
+        for (const { key, values } of filters) {
+          const rowProperty = row[key];
+          if (rowProperty && includes(values, rowProperty)) {
+            returnRow = true;
+            break;
+          }
+        }
+        return returnRow;
+      });
+    },
+    getFilteredTableDataByDate(
+      tableData = [],
+      startDate,
+      endDate,
+      propertyKey = 'date'
+    ) {
+      if (!startDate && !endDate) return tableData;
+      let startDateInMs = startDate ? startDate.getTime() : 0;
+      let endDateInMs = endDate ? endDate.getTime() : Number.POSITIVE_INFINITY;
+
+      const isUtcDisplay = this.$store.getters['global/isUtcDisplay'];
+
+      //Offset preference selected
+      if (!isUtcDisplay) {
+        startDateInMs = startDate
+          ? startDate.getTime() + startDate.getTimezoneOffset() * 60000
+          : 0;
+        endDateInMs = endDate
+          ? endDate.getTime() + endDate.getTimezoneOffset() * 60000
+          : Number.POSITIVE_INFINITY;
+      }
+
+      return tableData.filter((row) => {
+        const date = row[propertyKey];
+        if (!(date instanceof Date)) return;
+        const dateInMs = date.getTime();
+        if (dateInMs >= startDateInMs && dateInMs <= endDateInMs) return row;
+      });
+    },
+  },
+};
+
+export default TableFilterMixin;
diff --git a/src/components/_sila/Mixins/TableRowExpandMixin.js b/src/components/_sila/Mixins/TableRowExpandMixin.js
new file mode 100644
index 00000000..7f815a46
--- /dev/null
+++ b/src/components/_sila/Mixins/TableRowExpandMixin.js
@@ -0,0 +1,15 @@
+import i18n from '@/i18n';
+export const expandRowLabel = i18n.t('global.table.expandTableRow');
+
+const TableRowExpandMixin = {
+  methods: {
+    toggleRowDetails(row) {
+      row.toggleDetails();
+      row.detailsShowing
+        ? (this.expandRowLabel = this.$t('global.table.expandTableRow'))
+        : (this.expandRowLabel = this.$t('global.table.collapseTableRow'));
+    },
+  },
+};
+
+export default TableRowExpandMixin;
diff --git a/src/components/_sila/Mixins/TableSortMixin.js b/src/components/_sila/Mixins/TableSortMixin.js
new file mode 100644
index 00000000..c0997350
--- /dev/null
+++ b/src/components/_sila/Mixins/TableSortMixin.js
@@ -0,0 +1,11 @@
+const STATUS = ['OK', 'Warning', 'Critical'];
+
+const TableSortMixin = {
+  methods: {
+    sortStatus(a, b, key) {
+      return STATUS.indexOf(a[key]) - STATUS.indexOf(b[key]);
+    },
+  },
+};
+
+export default TableSortMixin;
diff --git a/src/components/_sila/Mixins/VuelidateMixin.js b/src/components/_sila/Mixins/VuelidateMixin.js
new file mode 100644
index 00000000..fec85251
--- /dev/null
+++ b/src/components/_sila/Mixins/VuelidateMixin.js
@@ -0,0 +1,10 @@
+const VuelidateMixin = {
+  methods: {
+    getValidationState(model) {
+      const { $dirty, $error } = model;
+      return $dirty ? !$error : null;
+    },
+  },
+};
+
+export default VuelidateMixin;
diff --git a/src/env/assets/styles/_sila.scss b/src/env/assets/styles/_sila.scss
new file mode 100644
index 00000000..884d62b5
--- /dev/null
+++ b/src/env/assets/styles/_sila.scss
@@ -0,0 +1,92 @@
+@font-face {
+  font-family: 'Inter';
+  src: url('~@/env/assets/fonts/Inter/Inter-ExtraLight.woff2') format('woff2');
+  font-weight: 200;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url('~@/env/assets/fonts/Inter/Inter-ExtraLightItalic.woff2') format('woff2');
+  font-weight: 200;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url('~@/env/assets/fonts/Inter/Inter-Light.woff2') format('woff2');
+  font-weight: 300;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url('~@/env/assets/fonts/Inter/Inter-Regular.woff2') format('woff2');
+  font-weight: 400;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url('~@/env/assets/fonts/Inter/Inter-Italic.woff2') format('woff2');
+  font-weight: 400;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url('~@/env/assets/fonts/Inter/Inter-Medium.woff2') format('woff2');
+  font-weight: 500;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url('~@/env/assets/fonts/Inter/Inter-Bold.woff2') format('woff2');
+  font-weight: 700;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url('~@/env/assets/fonts/Inter/Inter-BoldItalic.woff2') format('woff2');
+  font-weight: 700;
+  font-style: italic;
+}
+
+// IBS uses Inter https://github.com/rsms/inter
+
+$font-family-base: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+$dark: #2c405a;
+
+$blue: #0070ff;
+$red: #e11717;
+$green: #34b233;
+$yellow: #f5bd1f;
+
+$primary: $red;
+$danger: $red;
+$success: $green;
+$warning: $yellow;
+
+$dark-hover: #3c506a;
+
+$red-hover: #FC2A2A;
+$red-active: #df2323;
+$red-disabled: #E17171;
+$red-click: #C71414;
+$red-shadow: #e1171780;
+$red-light-background: #e117170d;
+
+$gray-2: #fbfbfc;
+$gray-5: #1a3e5b0d;
+$gray-5-hover: #1427351a;
+$gray-10: #1a3e5b1a;
+$gray-20: #1a3e5b33;
+$red-40:#e1171766;
+
+$surface-secondary: #F3F4F5;
+$on-surface-secondary: #040a0f99;
+$on-surface-tretiatry: #040A0F4D;
+
+$text-primary: #0C1C29;
+$text-secondary: #0C1C29E5;
+$text-tretiatry: #0c1c2999;
+$text-quaternary: #0c1c294d;
+
+$login-page-description-color: #0c1c2999;
+
+$border-radius: 8px;
+
+$loading-color: #c11d1d;
+$navbar-color: $dark;
+
diff --git a/src/env/components/AppNavigation/sila.js b/src/env/components/AppNavigation/sila.js
new file mode 100644
index 00000000..bbbbb1ee
--- /dev/null
+++ b/src/env/components/AppNavigation/sila.js
@@ -0,0 +1,182 @@
+import IconDashboard from '@carbon/icons-vue/es/dashboard/16';
+import IconTextLinkAnalysis from '@carbon/icons-vue/es/text-link--analysis/16';
+import IconDataCheck from '@carbon/icons-vue/es/data--check/16';
+import IconSettingsAdjust from '@carbon/icons-vue/es/settings--adjust/16';
+import IconSettings from '@carbon/icons-vue/es/settings/16';
+import IconSecurity from '@carbon/icons-vue/es/security/16';
+import IconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
+import IconDataBase from '@carbon/icons-vue/es/data--base--alt/16';
+
+const AppNavigationMixin = {
+  components: {
+    iconOverview: IconDashboard,
+    iconLogs: IconTextLinkAnalysis,
+    iconHealth: IconDataCheck,
+    iconControl: IconSettingsAdjust,
+    iconSettings: IconSettings,
+    iconSecurityAndAccess: IconSecurity,
+    iconExpand: IconChevronUp,
+    iconResourceManagement: IconDataBase,
+  },
+  data() {
+    return {
+      navigationItems: [
+        {
+          id: 'overview',
+          label: this.$t('appNavigation.overview'),
+          route: '/',
+          icon: 'iconOverview',
+        },
+        {
+          id: 'logs',
+          label: this.$t('appNavigation.logs'),
+          icon: 'iconLogs',
+          children: [
+            {
+              id: 'event-logs',
+              label: this.$t('appNavigation.eventLogs'),
+              route: '/logs/event-logs',
+            },
+            {
+              id: 'post-code-logs',
+              label: this.$t('appNavigation.postCodeLogs'),
+              route: '/logs/post-code-logs',
+            },
+          ],
+        },
+        {
+          id: 'hardware-status',
+          label: this.$t('appNavigation.hardwareStatus'),
+          icon: 'iconHealth',
+          children: [
+            {
+              id: 'inventory',
+              label: this.$t('appNavigation.inventory'),
+              route: '/hardware-status/inventory',
+            },
+            {
+              id: 'sensors',
+              label: this.$t('appNavigation.sensors'),
+              route: '/hardware-status/sensors',
+            },
+          ],
+        },
+        {
+          id: 'operations',
+          label: this.$t('appNavigation.operations'),
+          icon: 'iconControl',
+          children: [
+            {
+              id: 'factory-reset',
+              label: this.$t('appNavigation.factoryReset'),
+              route: '/operations/factory-reset',
+            },
+            {
+              id: 'kvm',
+              label: this.$t('appNavigation.kvm'),
+              route: '/operations/kvm',
+            },
+            {
+              id: 'key-clear',
+              label: this.$t('appNavigation.keyClear'),
+              route: '/operations/key-clear',
+            },
+            {
+              id: 'firmware',
+              label: this.$t('appNavigation.firmware'),
+              route: '/operations/firmware',
+            },
+            {
+              id: 'reboot-bmc',
+              label: this.$t('appNavigation.rebootBmc'),
+              route: '/operations/reboot-bmc',
+            },
+            {
+              id: 'serial-over-lan',
+              label: this.$t('appNavigation.serialOverLan'),
+              route: '/operations/serial-over-lan',
+            },
+            {
+              id: 'server-power-operations',
+              label: this.$t('appNavigation.serverPowerOperations'),
+              route: '/operations/server-power-operations',
+            },
+            {
+              id: 'virtual-media',
+              label: this.$t('appNavigation.virtualMedia'),
+              route: '/operations/virtual-media',
+            },
+          ],
+        },
+        {
+          id: 'settings',
+          label: this.$t('appNavigation.settings'),
+          icon: 'iconSettings',
+          children: [
+            {
+              id: 'date-time',
+              label: this.$t('appNavigation.dateTime'),
+              route: '/settings/date-time',
+            },
+            {
+              id: 'network',
+              label: this.$t('appNavigation.network'),
+              route: '/settings/network',
+            },
+            {
+              id: 'power-restore-policy',
+              label: this.$t('appNavigation.powerRestorePolicy'),
+              route: '/settings/power-restore-policy',
+            },
+          ],
+        },
+        {
+          id: 'security-and-access',
+          label: this.$t('appNavigation.securityAndAccess'),
+          icon: 'iconSecurityAndAccess',
+          children: [
+            {
+              id: 'sessions',
+              label: this.$t('appNavigation.sessions'),
+              route: '/security-and-access/sessions',
+            },
+            {
+              id: 'ldap',
+              label: this.$t('appNavigation.ldap'),
+              route: '/security-and-access/ldap',
+            },
+            {
+              id: 'user-management',
+              label: this.$t('appNavigation.userManagement'),
+              route: '/security-and-access/user-management',
+            },
+            {
+              id: 'policies',
+              label: this.$t('appNavigation.policies'),
+              route: '/security-and-access/policies',
+            },
+            {
+              id: 'certificates',
+              label: this.$t('appNavigation.certificates'),
+              route: '/security-and-access/certificates',
+            },
+          ],
+        },
+        {
+          id: 'resource-management',
+          label: this.$t('appNavigation.resourceManagement'),
+          icon: 'iconResourceManagement',
+          children: [
+            {
+              id: 'power',
+              label: this.$t('appNavigation.power'),
+              route: '/resource-management/power',
+            },
+          ],
+        },
+      ],
+    };
+  },
+};
+
+export default AppNavigationMixin;
diff --git a/src/env/router/sila.js b/src/env/router/sila.js
new file mode 100644
index 00000000..39590cfa
--- /dev/null
+++ b/src/env/router/sila.js
@@ -0,0 +1,286 @@
+import AppLayout from '@/layouts/_sila/AppLayout.vue';
+import ChangePassword from '@/views/_sila/ChangePassword';
+import Sessions from '@/views/_sila/SecurityAndAccess/Sessions';
+import ConsoleLayout from '@/layouts/_sila/ConsoleLayout.vue';
+import DateTime from '@/views/_sila/Settings/DateTime';
+import EventLogs from '@/views/_sila/Logs/EventLogs';
+import Firmware from '@/views/_sila/Operations/Firmware';
+import FactoryReset from '@/views/_sila/Operations/FactoryReset';
+import Inventory from '@/views/_sila/HardwareStatus/Inventory';
+import Kvm from '@/views/_sila/Operations/Kvm';
+import KvmConsole from '@/views/_sila/Operations/Kvm/KvmConsole';
+import Ldap from '@/views/_sila/SecurityAndAccess/Ldap';
+import UserManagement from '@/views/_sila/SecurityAndAccess/UserManagement';
+import Login from '@/views/_sila/Login';
+import LoginLayout from '@/layouts/_sila/LoginLayout';
+import Network from '@/views/_sila/Settings/Network';
+import Overview from '@/views/_sila/Overview';
+import PageNotFound from '@/views/_sila/PageNotFound';
+import PostCodeLogs from '@/views/_sila/Logs/PostCodeLogs';
+import PowerRestorePolicy from '@/views/_sila/Settings/PowerRestorePolicy';
+import ProfileSettings from '@/views/_sila/ProfileSettings';
+import RebootBmc from '@/views/_sila/Operations/RebootBmc';
+import Policies from '@/views/_sila/SecurityAndAccess/Policies';
+import Sensors from '@/views/_sila/HardwareStatus/Sensors';
+import SerialOverLan from '@/views/_sila/Operations/SerialOverLan';
+import SerialOverLanConsole from '@/views/_sila/Operations/SerialOverLan/SerialOverLanConsole';
+import ServerPowerOperations from '@/views/_sila/Operations/ServerPowerOperations';
+import KeyClear from '@/views/_sila/Operations/KeyClear';
+import Certificates from '@/views/_sila/SecurityAndAccess/Certificates';
+import VirtualMedia from '@/views/_sila/Operations/VirtualMedia';
+import Power from '@/views/_sila/ResourceManagement/Power';
+import i18n from '@/i18n';
+
+const routes = [
+  {
+    path: '/login',
+    component: LoginLayout,
+    children: [
+      {
+        path: '',
+        name: 'login',
+        component: Login,
+        meta: {
+          title: i18n.t('appPageTitle.login'),
+        },
+      },
+      {
+        path: '/change-password',
+        name: 'change-password',
+        component: ChangePassword,
+        meta: {
+          title: i18n.t('appPageTitle.changePassword'),
+          requiresAuth: true,
+        },
+      },
+    ],
+  },
+  {
+    path: '/console',
+    component: ConsoleLayout,
+    meta: {
+      requiresAuth: true,
+    },
+    children: [
+      {
+        path: 'serial-over-lan-console',
+        name: 'serial-over-lan-console',
+        component: SerialOverLanConsole,
+        meta: {
+          title: i18n.t('appPageTitle.serialOverLan'),
+        },
+      },
+      {
+        path: 'kvm',
+        name: 'kvm-console',
+        component: KvmConsole,
+        meta: {
+          title: i18n.t('appPageTitle.kvm'),
+        },
+      },
+    ],
+  },
+  {
+    path: '/',
+    meta: {
+      requiresAuth: true,
+    },
+    component: AppLayout,
+    children: [
+      {
+        path: '',
+        name: 'overview',
+        component: Overview,
+        meta: {
+          title: i18n.t('appPageTitle.overview'),
+        },
+      },
+      {
+        path: '/profile-settings',
+        name: 'profile-settings',
+        component: ProfileSettings,
+        meta: {
+          title: i18n.t('appPageTitle.profileSettings'),
+        },
+      },
+      {
+        path: '/logs/event-logs',
+        name: 'event-logs',
+        component: EventLogs,
+        meta: {
+          title: i18n.t('appPageTitle.eventLogs'),
+        },
+      },
+      {
+        path: '/logs/post-code-logs',
+        name: 'post-code-logs',
+        component: PostCodeLogs,
+        meta: {
+          title: i18n.t('appPageTitle.postCodeLogs'),
+        },
+      },
+      {
+        path: '/hardware-status/inventory',
+        name: 'inventory',
+        component: Inventory,
+        meta: {
+          title: i18n.t('appPageTitle.inventory'),
+        },
+      },
+      {
+        path: '/hardware-status/sensors',
+        name: 'sensors',
+        component: Sensors,
+        meta: {
+          title: i18n.t('appPageTitle.sensors'),
+        },
+      },
+      {
+        path: '/security-and-access/sessions',
+        name: 'sessions',
+        component: Sessions,
+        meta: {
+          title: i18n.t('appPageTitle.sessions'),
+        },
+      },
+      {
+        path: '/security-and-access/ldap',
+        name: 'ldap',
+        component: Ldap,
+        meta: {
+          title: i18n.t('appPageTitle.ldap'),
+        },
+      },
+      {
+        path: '/security-and-access/user-management',
+        name: 'user-management',
+        component: UserManagement,
+        meta: {
+          title: i18n.t('appPageTitle.userManagement'),
+        },
+      },
+      {
+        path: '/security-and-access/policies',
+        name: 'policies',
+        component: Policies,
+        meta: {
+          title: i18n.t('appPageTitle.policies'),
+        },
+      },
+      {
+        path: '/security-and-access/certificates',
+        name: 'certificates',
+        component: Certificates,
+        meta: {
+          title: i18n.t('appPageTitle.certificates'),
+        },
+      },
+      {
+        path: '/settings/date-time',
+        name: 'date-time',
+        component: DateTime,
+        meta: {
+          title: i18n.t('appPageTitle.dateTime'),
+        },
+      },
+      {
+        path: '/operations/kvm',
+        name: 'kvm',
+        component: Kvm,
+        meta: {
+          title: i18n.t('appPageTitle.kvm'),
+        },
+      },
+      {
+        path: '/operations/firmware',
+        name: 'firmware',
+        component: Firmware,
+        meta: {
+          title: i18n.t('appPageTitle.firmware'),
+        },
+      },
+      {
+        path: '/settings/network',
+        name: 'network',
+        component: Network,
+        meta: {
+          title: i18n.t('appPageTitle.network'),
+        },
+      },
+      {
+        path: '/settings/power-restore-policy',
+        name: 'power-restore-policy',
+        component: PowerRestorePolicy,
+        meta: {
+          title: i18n.t('appPageTitle.powerRestorePolicy'),
+        },
+      },
+      {
+        path: '/resource-management/power',
+        name: 'power',
+        component: Power,
+        meta: {
+          title: i18n.t('appPageTitle.power'),
+        },
+      },
+      {
+        path: '/operations/factory-reset',
+        name: 'factory-reset',
+        component: FactoryReset,
+        meta: {
+          title: i18n.t('appPageTitle.factoryReset'),
+        },
+      },
+      {
+        path: '/operations/key-clear',
+        name: 'key-clear',
+        component: KeyClear,
+        meta: {
+          title: i18n.t('appPageTitle.keyClear'),
+        },
+      },
+      {
+        path: '/operations/reboot-bmc',
+        name: 'reboot-bmc',
+        component: RebootBmc,
+        meta: {
+          title: i18n.t('appPageTitle.rebootBmc'),
+        },
+      },
+      {
+        path: '/operations/serial-over-lan',
+        name: 'serial-over-lan',
+        component: SerialOverLan,
+        meta: {
+          title: i18n.t('appPageTitle.serialOverLan'),
+        },
+      },
+      {
+        path: '/operations/server-power-operations',
+        name: 'server-power-operations',
+        component: ServerPowerOperations,
+        meta: {
+          title: i18n.t('appPageTitle.serverPowerOperations'),
+        },
+      },
+      {
+        path: '/operations/virtual-media',
+        name: 'virtual-media',
+        component: VirtualMedia,
+        meta: {
+          title: i18n.t('appPageTitle.virtualMedia'),
+        },
+      },
+      {
+        path: '*',
+        name: 'page-not-found',
+        component: PageNotFound,
+        meta: {
+          title: i18n.t('appPageTitle.pageNotFound'),
+        },
+      },
+    ],
+  },
+];
+
+export default routes;
diff --git a/src/env/store/sila.js b/src/env/store/sila.js
new file mode 100644
index 00000000..d0834c3b
--- /dev/null
+++ b/src/env/store/sila.js
@@ -0,0 +1,10 @@
+import store from '@/store';
+import KeyClearStore from '@/store/modules/Operations/KeyClearStore';
+
+store.registerModule('key-clear', KeyClearStore);
+
+// Use store.registerModule() to register env specific
+// store modules
+// https://vuex.vuejs.org/api/#registermodule
+
+export default store;
diff --git a/src/layouts/_sila/AppLayout.vue b/src/layouts/_sila/AppLayout.vue
new file mode 100644
index 00000000..0b78e5b1
--- /dev/null
+++ b/src/layouts/_sila/AppLayout.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="app-container">
+    <app-header
+      ref="focusTarget"
+      class="app-header"
+      :router-key="routerKey"
+      @refresh="refresh"
+    />
+    <app-navigation class="app-navigation" />
+    <page-container class="app-content">
+      <router-view ref="routerView" :key="routerKey" />
+      <!-- Scroll to top button -->
+      <button-back-to-top />
+    </page-container>
+  </div>
+</template>
+
+<script>
+import AppHeader from '@/components/AppHeader';
+import AppNavigation from '@/components/AppNavigation';
+import PageContainer from '@/components/Global/PageContainer';
+import ButtonBackToTop from '@/components/Global/ButtonBackToTop';
+import JumpLinkMixin from '@/components/Mixins/JumpLinkMixin';
+
+export default {
+  name: 'App',
+  components: {
+    AppHeader,
+    AppNavigation,
+    PageContainer,
+    ButtonBackToTop,
+  },
+  mixins: [JumpLinkMixin],
+  data() {
+    return {
+      routerKey: 0,
+    };
+  },
+  watch: {
+    $route: function () {
+      this.$nextTick(function () {
+        this.setFocus(this.$refs.focusTarget.$el);
+      });
+    },
+  },
+  mounted() {
+    this.$root.$on('refresh-application', () => this.refresh());
+  },
+  methods: {
+    refresh() {
+      // Changing the component :key value will trigger
+      // a component re-rendering and 'refresh' the view
+      this.routerKey += 1;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: auto;
+  grid-template-areas:
+    'header'
+    'content';
+
+  @include media-breakpoint-up($responsive-layout-bp) {
+    grid-template-columns: $navigation-width 1fr;
+    grid-template-areas:
+      'header header'
+      'navigation content';
+  }
+}
+
+.app-header {
+  grid-area: header;
+  position: sticky;
+  top: 0;
+  z-index: $zindex-fixed + 1;
+}
+
+.app-navigation {
+  grid-area: navigation;
+}
+
+.app-content {
+  grid-area: content;
+  background-color: $white;
+}
+</style>
diff --git a/src/layouts/_sila/ConsoleLayout.vue b/src/layouts/_sila/ConsoleLayout.vue
new file mode 100644
index 00000000..9f8175bf
--- /dev/null
+++ b/src/layouts/_sila/ConsoleLayout.vue
@@ -0,0 +1,9 @@
+<template>
+  <router-view />
+</template>
+
+<script>
+export default {
+  name: 'Console',
+};
+</script>
diff --git a/src/layouts/_sila/LoginLayout.vue b/src/layouts/_sila/LoginLayout.vue
new file mode 100644
index 00000000..cdff2040
--- /dev/null
+++ b/src/layouts/_sila/LoginLayout.vue
@@ -0,0 +1,112 @@
+<template>
+  <main>
+    <div class="login-container">
+      <div class="login-main">
+        <div>
+          <div class="login-brand mb-5">
+            <img
+              width="90px"
+              src="@/assets/images/login-company-logo.svg"
+              :alt="altLogo"
+            />
+          </div>
+          <h1 v-if="customizableGuiName" class="h3 mb-5">
+            {{ customizableGuiName }}
+          </h1>
+          <router-view class="login=form form-background" />
+        </div>
+      </div>
+      <div class="login-aside">
+        <div class="login-aside__logo-brand">
+          <!-- Add Secondary brand logo if needed -->
+        </div>
+        <div class="login-aside__logo-bmc">
+          <img
+            height="60px"
+            src="@/assets/images/built-on-openbmc-logo.svg"
+            alt="Built on OpenBMC"
+          />
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+export default {
+  name: 'LoginLayout',
+  data() {
+    return {
+      altLogo: process.env.VUE_APP_COMPANY_NAME || 'OpenBMC',
+      customizableGuiName: process.env.VUE_APP_GUI_NAME || '',
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.login-container {
+  background: gray('100');
+  display: flex;
+  flex-direction: column;
+  gap: $spacer * 2;
+  max-width: 1400px;
+  min-width: 320px;
+  min-height: 100vh;
+  justify-content: space-around;
+
+  @include media-breakpoint-up('md') {
+    background: $white;
+    flex-direction: row;
+  }
+}
+
+.login-main {
+  min-height: 50vh;
+  padding: $spacer * 3;
+
+  @include media-breakpoint-up('md') {
+    background: gray('100');
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 75%;
+    min-height: 100vh;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.login-form {
+  @include media-breakpoint-up('md') {
+    max-width: 360px;
+  }
+}
+
+.login-aside {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  gap: $spacer * 1.5;
+  margin-right: $spacer * 3;
+  margin-bottom: $spacer;
+
+  @include media-breakpoint-up('md') {
+    min-height: 100vh;
+    padding-bottom: $spacer;
+    flex: 1 1 25%;
+    margin-bottom: 0;
+  }
+}
+
+.login-aside__logo-brand:not(:empty) {
+  &::after {
+    content: '';
+    display: inline-block;
+    height: 2.5rem;
+    width: 2px;
+    background-color: gray('200');
+    margin-left: $spacer * 1.5;
+    vertical-align: middle;
+  }
+}
+</style>
diff --git a/src/views/_sila/ChangePassword/ChangePassword.vue b/src/views/_sila/ChangePassword/ChangePassword.vue
new file mode 100644
index 00000000..2440ace1
--- /dev/null
+++ b/src/views/_sila/ChangePassword/ChangePassword.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="change-password-container">
+    <alert variant="danger" class="mb-4">
+      <p v-if="changePasswordError">
+        {{ $t('pageChangePassword.changePasswordError') }}
+      </p>
+      <p v-else>{{ $t('pageChangePassword.changePasswordAlertMessage') }}</p>
+    </alert>
+    <div class="change-password__form-container">
+      <dl>
+        <dt>{{ $t('pageChangePassword.username') }}</dt>
+        <dd>{{ username }}</dd>
+      </dl>
+      <b-form novalidate @submit.prevent="changePassword">
+        <b-form-group
+          label-for="password"
+          :label="$t('pageChangePassword.newPassword')"
+        >
+          <input-password-toggle>
+            <b-form-input
+              id="password"
+              v-model="form.password"
+              autofocus="autofocus"
+              type="password"
+              :state="getValidationState($v.form.password)"
+              class="form-control-with-button"
+              @change="$v.form.password.$touch()"
+            >
+            </b-form-input>
+            <b-form-invalid-feedback role="alert">
+              <template v-if="!$v.form.password.required">
+                {{ $t('global.form.fieldRequired') }}
+              </template>
+            </b-form-invalid-feedback>
+          </input-password-toggle>
+        </b-form-group>
+        <b-form-group
+          label-for="password-confirm"
+          :label="$t('pageChangePassword.confirmNewPassword')"
+        >
+          <input-password-toggle>
+            <b-form-input
+              id="password-confirm"
+              v-model="form.passwordConfirm"
+              type="password"
+              :state="getValidationState($v.form.passwordConfirm)"
+              class="form-control-with-button"
+              @change="$v.form.passwordConfirm.$touch()"
+            >
+            </b-form-input>
+            <b-form-invalid-feedback role="alert">
+              <template v-if="!$v.form.passwordConfirm.required">
+                {{ $t('global.form.fieldRequired') }}
+              </template>
+              <template v-else-if="!$v.form.passwordConfirm.sameAsPassword">
+                {{ $t('global.form.passwordsDoNotMatch') }}
+              </template>
+            </b-form-invalid-feedback>
+          </input-password-toggle>
+        </b-form-group>
+        <div class="text-right">
+          <b-button type="button" variant="link" @click="goBack">
+            {{ $t('pageChangePassword.goBack') }}
+          </b-button>
+          <b-button type="submit" variant="primary">
+            {{ $t('pageChangePassword.changePassword') }}
+          </b-button>
+        </div>
+      </b-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { required, sameAs } from 'vuelidate/lib/validators';
+import Alert from '@/components/Global/Alert';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
+import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+
+export default {
+  name: 'ChangePassword',
+  components: { Alert, InputPasswordToggle },
+  mixins: [VuelidateMixin, BVToastMixin],
+  data() {
+    return {
+      form: {
+        password: null,
+        passwordConfirm: null,
+      },
+      username: this.$store.getters['global/username'],
+      changePasswordError: false,
+    };
+  },
+  validations() {
+    return {
+      form: {
+        password: { required },
+        passwordConfirm: {
+          required,
+          sameAsPassword: sameAs('password'),
+        },
+      },
+    };
+  },
+  methods: {
+    goBack() {
+      // Remove session created if navigating back to the Login page
+      this.$store.dispatch('authentication/logout');
+    },
+    changePassword() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      let data = {
+        originalUsername: this.username,
+        password: this.form.password,
+      };
+
+      this.$store
+        .dispatch('userManagement/updateUser', data)
+        .then(() => this.$router.push('/'))
+        .catch(() => (this.changePasswordError = true));
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.change-password__form-container {
+  @include media-breakpoint-up('md') {
+    max-width: 360px;
+  }
+}
+</style>
diff --git a/src/views/_sila/ChangePassword/index.js b/src/views/_sila/ChangePassword/index.js
new file mode 100644
index 00000000..9de0af42
--- /dev/null
+++ b/src/views/_sila/ChangePassword/index.js
@@ -0,0 +1,2 @@
+import ChangePassword from './ChangePassword.vue';
+export default ChangePassword;
diff --git a/src/views/_sila/HardwareStatus/Inventory/Inventory.vue b/src/views/_sila/HardwareStatus/Inventory/Inventory.vue
new file mode 100644
index 00000000..fcdbf8d2
--- /dev/null
+++ b/src/views/_sila/HardwareStatus/Inventory/Inventory.vue
@@ -0,0 +1,196 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+
+    <!-- Service indicators -->
+    <service-indicator />
+
+    <!-- Quicklinks section -->
+    <page-section :section-title="$t('pageInventory.quicklinkTitle')">
+      <b-row class="w-75">
+        <b-col v-for="column in quicklinkColumns" :key="column.id" xl="4">
+          <div v-for="item in column" :key="item.id">
+            <b-link
+              :href="item.href"
+              :data-ref="item.dataRef"
+              @click.prevent="scrollToOffset"
+            >
+              <jump-link /> {{ item.linkText }}
+            </b-link>
+          </div>
+        </b-col>
+      </b-row>
+    </page-section>
+
+    <!-- System table -->
+    <table-system ref="system" />
+
+    <!-- BMC manager table -->
+    <table-bmc-manager ref="bmc" />
+
+    <!-- Chassis table -->
+    <table-chassis ref="chassis" />
+
+    <!-- DIMM slot table -->
+    <table-dimm-slot ref="dimms" />
+
+    <!-- Fans table -->
+    <table-fans ref="fans" />
+
+    <!-- Power supplies table -->
+    <table-power-supplies ref="powerSupply" />
+
+    <!-- Processors table -->
+    <table-processors ref="processors" />
+
+    <!-- Assembly table -->
+    <table-assembly ref="assembly" />
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import ServiceIndicator from './InventoryServiceIndicator';
+import TableSystem from './InventoryTableSystem';
+import TablePowerSupplies from './InventoryTablePowerSupplies';
+import TableDimmSlot from './InventoryTableDimmSlot';
+import TableFans from './InventoryTableFans';
+import TableBmcManager from './InventoryTableBmcManager';
+import TableChassis from './InventoryTableChassis';
+import TableProcessors from './InventoryTableProcessors';
+import TableAssembly from './InventoryTableAssembly';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import PageSection from '@/components/Global/PageSection';
+import JumpLink16 from '@carbon/icons-vue/es/jump-link/16';
+import JumpLinkMixin from '@/components/Mixins/JumpLinkMixin';
+import { chunk } from 'lodash';
+
+export default {
+  components: {
+    PageTitle,
+    ServiceIndicator,
+    TableDimmSlot,
+    TablePowerSupplies,
+    TableSystem,
+    TableFans,
+    TableBmcManager,
+    TableChassis,
+    TableProcessors,
+    TableAssembly,
+    PageSection,
+    JumpLink: JumpLink16,
+  },
+  mixins: [LoadingBarMixin, JumpLinkMixin],
+  beforeRouteLeave(to, from, next) {
+    // Hide loader if user navigates away from page
+    // before requests complete
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      links: [
+        {
+          id: 'system',
+          dataRef: 'system',
+          href: '#system',
+          linkText: this.$t('pageInventory.system'),
+        },
+        {
+          id: 'bmc',
+          dataRef: 'bmc',
+          href: '#bmc',
+          linkText: this.$t('pageInventory.bmcManager'),
+        },
+        {
+          id: 'chassis',
+          dataRef: 'chassis',
+          href: '#chassis',
+          linkText: this.$t('pageInventory.chassis'),
+        },
+        {
+          id: 'dimms',
+          dataRef: 'dimms',
+          href: '#dimms',
+          linkText: this.$t('pageInventory.dimmSlot'),
+        },
+        {
+          id: 'fans',
+          dataRef: 'fans',
+          href: '#fans',
+          linkText: this.$t('pageInventory.fans'),
+        },
+        {
+          id: 'powerSupply',
+          dataRef: 'powerSupply',
+          href: '#powerSupply',
+          linkText: this.$t('pageInventory.powerSupplies'),
+        },
+        {
+          id: 'processors',
+          dataRef: 'processors',
+          href: '#processors',
+          linkText: this.$t('pageInventory.processors'),
+        },
+        {
+          id: 'assembly',
+          dataRef: 'assembly',
+          href: '#assembly',
+          linkText: this.$t('pageInventory.assemblies'),
+        },
+      ],
+    };
+  },
+  computed: {
+    quicklinkColumns() {
+      // Chunk links array to 3 array's to display 3 items per column
+      return chunk(this.links, 3);
+    },
+  },
+  created() {
+    this.startLoader();
+    const bmcManagerTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-bmc-manager-complete', () => resolve());
+    });
+    const chassisTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-chassis-complete', () => resolve());
+    });
+    const dimmSlotTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-dimm-slot-complete', () => resolve());
+    });
+    const fansTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-fans-complete', () => resolve());
+    });
+    const powerSuppliesTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-power-supplies-complete', () =>
+        resolve()
+      );
+    });
+    const processorsTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-processors-complete', () => resolve());
+    });
+    const serviceIndicatorPromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-service-complete', () => resolve());
+    });
+    const systemTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-system-complete', () => resolve());
+    });
+    const assemblyTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-assembly-complete', () => resolve());
+    });
+    // Combine all child component Promises to indicate
+    // when page data load complete
+    Promise.all([
+      bmcManagerTablePromise,
+      chassisTablePromise,
+      dimmSlotTablePromise,
+      fansTablePromise,
+      powerSuppliesTablePromise,
+      processorsTablePromise,
+      serviceIndicatorPromise,
+      systemTablePromise,
+      assemblyTablePromise,
+    ]).finally(() => this.endLoader());
+  },
+};
+</script>
diff --git a/src/views/_sila/HardwareStatus/Inventory/InventoryServiceIndicator.vue b/src/views/_sila/HardwareStatus/Inventory/InventoryServiceIndicator.vue
new file mode 100644
index 00000000..01f4a446
--- /dev/null
+++ b/src/views/_sila/HardwareStatus/Inventory/InventoryServiceIndicator.vue
@@ -0,0 +1,76 @@
+<template>
+  <page-section
+    :section-title="$t('pageInventory.systemIndicator.sectionTitle')"
+  >
+    <div class="form-background pl-4 pt-4 pb-1">
+      <b-row>
+        <b-col sm="6" md="3">
+          <dl>
+            <dt>{{ $t('pageInventory.systemIndicator.powerStatus') }}</dt>
+            <dd>
+              {{ $t(powerStatus) }}
+            </dd>
+          </dl>
+        </b-col>
+        <b-col sm="6" md="3">
+          <dl>
+            <dt>
+              {{ $t('pageInventory.systemIndicator.identifyLed') }}
+            </dt>
+            <dd>
+              <b-form-checkbox
+                id="identifyLedSwitchService"
+                v-model="systems.locationIndicatorActive"
+                data-test-id="inventoryService-toggle-identifyLed"
+                switch
+                @change="toggleIdentifyLedSwitch"
+              >
+                <span v-if="systems.locationIndicatorActive">
+                  {{ $t('global.status.on') }}
+                </span>
+                <span v-else>{{ $t('global.status.off') }}</span>
+              </b-form-checkbox>
+            </dd>
+          </dl>
+        </b-col>
+      </b-row>
+    </div>
+  </page-section>
+</template>
+<script>
+import PageSection from '@/components/Global/PageSection';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+
+export default {
+  components: { PageSection },
+  mixins: [BVToastMixin],
+  computed: {
+    systems() {
+      let systemData = this.$store.getters['system/systems'][0];
+      return systemData ? systemData : {};
+    },
+    serverStatus() {
+      return this.$store.getters['global/serverStatus'];
+    },
+    powerStatus() {
+      if (this.serverStatus === 'unreachable') {
+        return `global.status.off`;
+      }
+      return `global.status.${this.serverStatus}`;
+    },
+  },
+  created() {
+    this.$store.dispatch('system/getSystem').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('hardware-status-service-complete');
+    });
+  },
+  methods: {
+    toggleIdentifyLedSwitch(state) {
+      this.$store
+        .dispatch('system/changeIdentifyLedState', state)
+        .catch(({ message }) => this.errorToast(message));
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/HardwareStatus/Inventory/InventoryTableAssembly.vue b/src/views/_sila/HardwareStatus/Inventory/InventoryTableAssembly.vue
new file mode 100644
index 00000000..b4010bfe
--- /dev/null
+++ b/src/views/_sila/HardwareStatus/Inventory/InventoryTableAssembly.vue
@@ -0,0 +1,153 @@
+<template>
+  <page-section :section-title="$t('pageInventory.assemblies')">
+    <b-table
+      sort-icon-left
+      no-sort-reset
+      hover
+      responsive="md"
+      :items="items"
+      :fields="fields"
+      show-empty
+      :empty-text="$t('global.table.emptyMessage')"
+      :busy="isBusy"
+    >
+      <!-- Expand chevron icon -->
+      <template #cell(expandRow)="row">
+        <b-button
+          variant="link"
+          data-test-id="hardwareStatus-button-expandAssembly"
+          :title="expandRowLabel"
+          class="btn-icon-only"
+          @click="toggleRowDetails(row)"
+        >
+          <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
+        </b-button>
+      </template>
+
+      <!-- Toggle identify LED -->
+      <template #cell(identifyLed)="row">
+        <b-form-checkbox
+          v-if="hasIdentifyLed(row.item.identifyLed)"
+          v-model="row.item.identifyLed"
+          name="switch"
+          switch
+          @change="toggleIdentifyLedValue(row.item)"
+        >
+          <span v-if="row.item.identifyLed">
+            {{ $t('global.status.on') }}
+          </span>
+          <span v-else> {{ $t('global.status.off') }} </span>
+        </b-form-checkbox>
+        <div v-else>--</div>
+      </template>
+
+      <template #row-details="{ item }">
+        <b-container fluid>
+          <b-row>
+            <b-col class="mt-2" sm="6" xl="6">
+              <!-- Nmae -->
+              <dt>{{ $t('pageInventory.table.name') }}:</dt>
+              <dd>{{ dataFormatter(item.name) }}</dd>
+              <!-- Serial number -->
+              <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
+              <dd>{{ dataFormatter(item.serialNumber) }}</dd>
+            </b-col>
+            <b-col class="mt-2" sm="6" xl="6">
+              <!-- Model-->
+              <dt>Model</dt>
+              <dd>{{ dataFormatter(item.model) }}</dd>
+              <!-- Spare Part Number -->
+              <dt>Spare Part Number</dt>
+              <dd>{{ dataFormatter(item.sparePartNumber) }}</dd>
+            </b-col>
+          </b-row>
+        </b-container>
+      </template>
+    </b-table>
+  </page-section>
+</template>
+
+<script>
+import PageSection from '@/components/Global/PageSection';
+import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+
+export default {
+  components: { IconChevron, PageSection },
+  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+        },
+        {
+          key: 'name',
+          label: this.$t('pageInventory.table.id'),
+          formatter: this.dataFormatter,
+          sortable: true,
+        },
+        {
+          key: 'partNumber',
+          label: this.$t('pageInventory.table.partNumber'),
+          formatter: this.dataFormatter,
+          sortable: true,
+        },
+        {
+          key: 'locationNumber',
+          label: this.$t('pageInventory.table.locationNumber'),
+          formatter: this.dataFormatter,
+          sortable: true,
+        },
+        {
+          key: 'identifyLed',
+          label: this.$t('pageInventory.table.identifyLed'),
+          formatter: this.dataFormatter,
+        },
+      ],
+      expandRowLabel: expandRowLabel,
+    };
+  },
+  computed: {
+    assemblies() {
+      return this.$store.getters['assemblies/assemblies'];
+    },
+    items() {
+      if (this.assemblies) {
+        return this.assemblies;
+      } else {
+        return [];
+      }
+    },
+  },
+  created() {
+    this.$store.dispatch('assemblies/getAssemblyInfo').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('hardware-status-assembly-complete');
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    toggleIdentifyLedValue(row) {
+      this.$store
+        .dispatch('assemblies/updateIdentifyLedValue', {
+          uri: row.uri,
+          memberId: row.id,
+          identifyLed: row.identifyLed,
+        })
+        .catch(({ message }) => this.errorToast(message));
+    },
+    hasIdentifyLed(identifyLed) {
+      return typeof identifyLed === 'boolean';
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/HardwareStatus/Inventory/InventoryTableBmcManager.vue b/src/views/_sila/HardwareStatus/Inventory/InventoryTableBmcManager.vue
new file mode 100644
index 00000000..48b914f4
--- /dev/null
+++ b/src/views/_sila/HardwareStatus/Inventory/InventoryTableBmcManager.vue
@@ -0,0 +1,245 @@
+<template>
+  <page-section :section-title="$t('pageInventory.bmcManager')">
+    <b-table
+      responsive="md"
+      hover
+      :items="items"
+      :fields="fields"
+      show-empty
+      :empty-text="$t('global.table.emptyMessage')"
+      :busy="isBusy"
+    >
+      <!-- Expand chevron icon -->
+      <template #cell(expandRow)="row">
+        <b-button
+          variant="link"
+          data-test-id="hardwareStatus-button-expandBmc"
+          :title="expandRowLabel"
+          class="btn-icon-only"
+          @click="toggleRowDetails(row)"
+        >
+          <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
+        </b-button>
+      </template>
+
+      <!-- Health -->
+      <template #cell(health)="{ value }">
+        <status-icon :status="statusIcon(value)" />
+        {{ value }}
+      </template>
+
+      <!-- Toggle identify LED -->
+      <template #cell(identifyLed)="row">
+        <b-form-checkbox
+          v-if="hasIdentifyLed(row.item.identifyLed)"
+          v-model="row.item.identifyLed"
+          name="switch"
+          switch
+          @change="toggleIdentifyLedValue(row.item)"
+        >
+          <span v-if="row.item.identifyLed">
+            {{ $t('global.status.on') }}
+          </span>
+          <span v-else> {{ $t('global.status.off') }} </span>
+        </b-form-checkbox>
+        <div v-else>--</div>
+      </template>
+
+      <template #row-details="{ item }">
+        <b-container fluid>
+          <b-row>
+            <b-col class="mt-2" sm="6" xl="6">
+              <dl>
+                <!-- Name -->
+                <dt>{{ $t('pageInventory.table.name') }}:</dt>
+                <dd>{{ dataFormatter(item.name) }}</dd>
+                <!-- Part number -->
+                <dt>{{ $t('pageInventory.table.partNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.partNumber) }}</dd>
+                <!-- Serial number -->
+                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.serialNumber) }}</dd>
+                <!-- Spare part number -->
+                <dt>{{ $t('pageInventory.table.sparePartNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.sparePartNumber) }}</dd>
+                <!-- Model -->
+                <dt>{{ $t('pageInventory.table.model') }}:</dt>
+                <dd>{{ dataFormatter(item.model) }}</dd>
+                <!-- UUID -->
+                <dt>{{ $t('pageInventory.table.uuid') }}:</dt>
+                <dd>{{ dataFormatter(item.uuid) }}</dd>
+                <!-- Service entry point UUID -->
+                <dt>{{ $t('pageInventory.table.serviceEntryPointUuid') }}:</dt>
+                <dd>{{ dataFormatter(item.serviceEntryPointUuid) }}</dd>
+              </dl>
+            </b-col>
+            <b-col class="mt-2" sm="6" xl="6">
+              <dl>
+                <!-- Status state -->
+                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
+                <dd>{{ dataFormatter(item.statusState) }}</dd>
+                <!-- Power state -->
+                <dt>{{ $t('pageInventory.table.power') }}:</dt>
+                <dd>{{ dataFormatter(item.powerState) }}</dd>
+                <!-- Health rollup -->
+                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
+                <dd>{{ dataFormatter(item.healthRollup) }}</dd>
+                <!-- BMC date and time -->
+                <dt>{{ $t('pageInventory.table.bmcDateTime') }}:</dt>
+                <dd>
+                  {{ item.dateTime | formatDate }}
+                  {{ item.dateTime | formatTime }}
+                </dd>
+                <!-- Reset date and time -->
+                <dt>{{ $t('pageInventory.table.lastResetTime') }}:</dt>
+                <dd>
+                  {{ item.lastResetTime | formatDate }}
+                  {{ item.lastResetTime | formatTime }}
+                </dd>
+              </dl>
+            </b-col>
+          </b-row>
+          <div class="section-divider mb-3 mt-3"></div>
+          <b-row>
+            <b-col class="mt-2" sm="6" xl="6">
+              <dl>
+                <!-- Manufacturer -->
+                <dt>{{ $t('pageInventory.table.manufacturer') }}:</dt>
+                <dd>{{ dataFormatter(item.manufacturer) }}</dd>
+                <!-- Description -->
+                <dt>{{ $t('pageInventory.table.description') }}:</dt>
+                <dd>{{ dataFormatter(item.description) }}</dd>
+                <!-- Manager type -->
+                <dt>{{ $t('pageInventory.table.managerType') }}:</dt>
+                <dd>{{ dataFormatter(item.managerType) }}</dd>
+              </dl>
+            </b-col>
+            <b-col class="mt-2" sm="6" xl="6">
+              <!-- Firmware Version  -->
+              <dl>
+                <dt>{{ $t('pageInventory.table.firmwareVersion') }}:</dt>
+                <dd>{{ item.firmwareVersion }}</dd>
+              </dl>
+              <!-- Graphical console -->
+              <p class="mt-1 mb-2 h6 float-none m-0">
+                {{ $t('pageInventory.table.graphicalConsole') }}
+              </p>
+              <dl class="ml-4">
+                <dt>{{ $t('pageInventory.table.connectTypesSupported') }}:</dt>
+                <dd>
+                  {{ dataFormatterArray(item.graphicalConsoleConnectTypes) }}
+                </dd>
+                <dt>{{ $t('pageInventory.table.maxConcurrentSessions') }}:</dt>
+                <dd>
+                  {{ dataFormatter(item.graphicalConsoleMaxSessions) }}
+                </dd>
+                <dt>{{ $t('pageInventory.table.serviceEnabled') }}:</dt>
+                <dd>
+                  {{ dataFormatter(item.graphicalConsoleEnabled) }}
+                </dd>
+              </dl>
+              <!-- Serial console -->
+              <p class="mt-1 mb-2 h6 float-none m-0">
+                {{ $t('pageInventory.table.serialConsole') }}
+              </p>
+              <dl class="ml-4">
+                <dt>{{ $t('pageInventory.table.connectTypesSupported') }}:</dt>
+                <dd>
+                  {{ dataFormatterArray(item.serialConsoleConnectTypes) }}
+                </dd>
+                <dt>{{ $t('pageInventory.table.maxConcurrentSessions') }}:</dt>
+                <dd>{{ dataFormatter(item.serialConsoleMaxSessions) }}</dd>
+                <dt>{{ $t('pageInventory.table.serviceEnabled') }}:</dt>
+                <dd>{{ dataFormatter(item.serialConsoleEnabled) }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+        </b-container>
+      </template>
+    </b-table>
+  </page-section>
+</template>
+
+<script>
+import PageSection from '@/components/Global/PageSection';
+import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
+import StatusIcon from '@/components/Global/StatusIcon';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+
+export default {
+  components: { IconChevron, PageSection, StatusIcon },
+  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+        },
+        {
+          key: 'id',
+          label: this.$t('pageInventory.table.id'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'health',
+          label: this.$t('pageInventory.table.health'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'locationNumber',
+          label: this.$t('pageInventory.table.locationNumber'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'identifyLed',
+          label: this.$t('pageInventory.table.identifyLed'),
+          formatter: this.dataFormatter,
+        },
+      ],
+      expandRowLabel: expandRowLabel,
+    };
+  },
+  computed: {
+    bmc() {
+      return this.$store.getters['bmc/bmc'];
+    },
+    items() {
+      if (this.bmc) {
+        return [this.bmc];
+      } else {
+        return [];
+      }
+    },
+  },
+  created() {
+    this.$store.dispatch('bmc/getBmcInfo').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('hardware-status-bmc-manager-complete');
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    toggleIdentifyLedValue(row) {
+      this.$store
+        .dispatch('bmc/updateIdentifyLedValue', {
+          uri: row.uri,
+          identifyLed: row.identifyLed,
+        })
+        .catch(({ message }) => this.errorToast(message));
+    },
+    // TO DO: remove hasIdentifyLed method once the following story is merged:
+    // https://gerrit.openbmc-project.xyz/c/openbmc/bmcweb/+/43179
+    hasIdentifyLed(identifyLed) {
+      return typeof identifyLed === 'boolean';
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/HardwareStatus/Inventory/InventoryTableChassis.vue b/src/views/_sila/HardwareStatus/Inventory/InventoryTableChassis.vue
new file mode 100644
index 00000000..b49cec7f
--- /dev/null
+++ b/src/views/_sila/HardwareStatus/Inventory/InventoryTableChassis.vue
@@ -0,0 +1,191 @@
+<template>
+  <page-section :section-title="$t('pageInventory.chassis')">
+    <b-table
+      responsive="md"
+      hover
+      :items="chassis"
+      :fields="fields"
+      show-empty
+      :empty-text="$t('global.table.emptyMessage')"
+      :busy="isBusy"
+    >
+      <!-- Expand chevron icon -->
+      <template #cell(expandRow)="row">
+        <b-button
+          variant="link"
+          data-test-id="hardwareStatus-button-expandChassis"
+          :title="expandRowLabel"
+          class="btn-icon-only"
+          @click="toggleRowDetails(row)"
+        >
+          <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
+        </b-button>
+      </template>
+
+      <!-- Health -->
+      <template #cell(health)="{ value }">
+        <status-icon :status="statusIcon(value)" />
+        {{ value }}
+      </template>
+      <!-- Toggle identify LED -->
+      <template #cell(identifyLed)="row">
+        <b-form-checkbox
+          v-if="hasIdentifyLed(row.item.identifyLed)"
+          v-model="row.item.identifyLed"
+          name="switch"
+          switch
+          @change="toggleIdentifyLedValue(row.item)"
+        >
+          <span v-if="row.item.identifyLed">
+            {{ $t('global.status.on') }}
+          </span>
+          <span v-else> {{ $t('global.status.off') }} </span>
+        </b-form-checkbox>
+        <div v-else>--</div>
+      </template>
+      <template #row-details="{ item }">
+        <b-container fluid>
+          <b-row>
+            <b-col class="mt-2" sm="6" xl="6">
+              <dl>
+                <!-- Name -->
+                <dt>{{ $t('pageInventory.table.name') }}:</dt>
+                <dd>{{ dataFormatter(item.name) }}</dd>
+                <!-- Part number -->
+                <dt>{{ $t('pageInventory.table.partNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.partNumber) }}</dd>
+                <!-- Serial Number -->
+                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.serialNumber) }}</dd>
+                <!-- Model -->
+                <dt>{{ $t('pageInventory.table.model') }}:</dt>
+                <dd class="mb-2">
+                  {{ dataFormatter(item.model) }}
+                </dd>
+                <!-- Asset tag -->
+                <dt>{{ $t('pageInventory.table.assetTag') }}:</dt>
+                <dd class="mb-2">
+                  {{ dataFormatter(item.assetTag) }}
+                </dd>
+              </dl>
+            </b-col>
+            <b-col class="mt-2" sm="6" xl="6">
+              <dl>
+                <!-- Status state -->
+                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
+                <dd>{{ dataFormatter(item.statusState) }}</dd>
+                <!-- Power state -->
+                <dt>{{ $t('pageInventory.table.power') }}:</dt>
+                <dd>{{ dataFormatter(item.power) }}</dd>
+                <!-- Health rollup -->
+                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
+                <dd>{{ dataFormatter(item.healthRollup) }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+          <div class="section-divider mb-3 mt-3"></div>
+          <b-row>
+            <b-col class="mt-2" sm="6" xl="6">
+              <dl>
+                <!-- Manufacturer -->
+                <dt>{{ $t('pageInventory.table.manufacturer') }}:</dt>
+                <dd>{{ dataFormatter(item.manufacturer) }}</dd>
+                <!-- Chassis Type -->
+                <dt>{{ $t('pageInventory.table.chassisType') }}:</dt>
+                <dd>{{ dataFormatter(item.chassisType) }}</dd>
+              </dl>
+            </b-col>
+            <b-col class="mt-2" sm="6" xl="6">
+              <dl>
+                <!-- Min power -->
+                <dt>{{ $t('pageInventory.table.minPowerWatts') }}:</dt>
+                <dd>{{ dataFormatter(item.minPowerWatts) }}</dd>
+                <!-- Max power -->
+                <dt>{{ $t('pageInventory.table.maxPowerWatts') }}:</dt>
+                <dd>{{ dataFormatter(item.maxPowerWatts) }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+        </b-container>
+      </template>
+    </b-table>
+  </page-section>
+</template>
+
+<script>
+import PageSection from '@/components/Global/PageSection';
+import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import StatusIcon from '@/components/Global/StatusIcon';
+
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+
+export default {
+  components: { IconChevron, PageSection, StatusIcon },
+  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+        },
+        {
+          key: 'id',
+          label: this.$t('pageInventory.table.id'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'health',
+          label: this.$t('pageInventory.table.health'),
+          formatter: this.dataFormatter,
+          tdClass: 'text-nowrap',
+        },
+        {
+          key: 'locationNumber',
+          label: this.$t('pageInventory.table.locationNumber'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'identifyLed',
+          label: this.$t('pageInventory.table.identifyLed'),
+          formatter: this.dataFormatter,
+        },
+      ],
+      expandRowLabel: expandRowLabel,
+    };
+  },
+  computed: {
+    chassis() {
+      return this.$store.getters['chassis/chassis'];
+    },
+  },
+  created() {
+    this.$store.dispatch('chassis/getChassisInfo').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('hardware-status-chassis-complete');
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    toggleIdentifyLedValue(row) {
+      this.$store
+        .dispatch('chassis/updateIdentifyLedValue', {
+          uri: row.uri,
+          identifyLed: row.identifyLed,
+        })
+        .catch(({ message }) => this.errorToast(message));
+    },
+    // TO DO: Remove this method when the LocationIndicatorActive is added from backend.
+    hasIdentifyLed(identifyLed) {
+      return typeof identifyLed === 'boolean';
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/HardwareStatus/Inventory/InventoryTableDimmSlot.vue b/src/views/_sila/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
new file mode 100644
index 00000000..65994810
--- /dev/null
+++ b/src/views/_sila/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
@@ -0,0 +1,255 @@
+<template>
+  <page-section :section-title="$t('pageInventory.dimmSlot')">
+    <b-row class="align-items-end">
+      <b-col sm="6" md="5" xl="4">
+        <search
+          @change-search="onChangeSearchInput"
+          @clear-search="onClearSearchInput"
+        />
+      </b-col>
+      <b-col sm="6" md="3" xl="2">
+        <table-cell-count
+          :filtered-items-count="filteredRows"
+          :total-number-of-cells="dimms.length"
+        ></table-cell-count>
+      </b-col>
+    </b-row>
+    <b-table
+      sort-icon-left
+      no-sort-reset
+      hover
+      sort-by="health"
+      responsive="md"
+      show-empty
+      :items="dimms"
+      :fields="fields"
+      :sort-desc="true"
+      :sort-compare="sortCompare"
+      :filter="searchFilter"
+      :empty-text="$t('global.table.emptyMessage')"
+      :empty-filtered-text="$t('global.table.emptySearchMessage')"
+      :busy="isBusy"
+      @filtered="onFiltered"
+    >
+      <!-- Expand chevron icon -->
+      <template #cell(expandRow)="row">
+        <b-button
+          variant="link"
+          data-test-id="hardwareStatus-button-expandDimms"
+          :title="expandRowLabel"
+          class="btn-icon-only"
+          @click="toggleRowDetails(row)"
+        >
+          <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
+        </b-button>
+      </template>
+
+      <!-- Health -->
+      <template #cell(health)="{ value }">
+        <status-icon :status="statusIcon(value)" />
+        {{ value }}
+      </template>
+      <!-- Toggle identify LED -->
+      <template #cell(identifyLed)="row">
+        <b-form-checkbox
+          v-model="row.item.identifyLed"
+          name="switch"
+          switch
+          @change="toggleIdentifyLedValue(row.item)"
+        >
+          <span v-if="row.item.identifyLed">
+            {{ $t('global.status.on') }}
+          </span>
+          <span v-else> {{ $t('global.status.off') }} </span>
+        </b-form-checkbox>
+      </template>
+      <template #row-details="{ item }">
+        <b-container fluid>
+          <b-row>
+            <b-col sm="6" xl="6">
+              <dl>
+                <!-- Part Number -->
+                <dt>{{ $t('pageInventory.table.partNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.partNumber) }}</dd>
+              </dl>
+              <dl>
+                <!-- Serial Number -->
+                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.serialNumber) }}</dd>
+              </dl>
+              <dl>
+                <!-- Spare Part Number -->
+                <dt>{{ $t('pageInventory.table.sparePartNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.sparePartNumber) }}</dd>
+              </dl>
+              <dl>
+                <!-- Model -->
+                <dt>{{ $t('pageInventory.table.model') }}:</dt>
+                <dd>{{ dataFormatter(item.model) }}</dd>
+              </dl>
+            </b-col>
+            <b-col sm="6" xl="6">
+              <dl>
+                <!-- Memory Size in kb -->
+                <dt>{{ $t('pageInventory.table.memorySize') }}:</dt>
+                <dd>{{ dataFormatter(item.memorySize) }} KB</dd>
+              </dl>
+              <dl>
+                <!-- Status-->
+                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
+                <dd>{{ dataFormatter(item.statusState) }}</dd>
+              </dl>
+              <dl>
+                <!-- Enabled-->
+                <dt>{{ $t('pageInventory.table.enabled') }}:</dt>
+                <dd>{{ dataFormatter(item.enabled) }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+          <div class="section-divider mb-3 mt-3"></div>
+          <b-row>
+            <b-col sm="6" xl="6">
+              <dl>
+                <!-- Description -->
+                <dt>{{ $t('pageInventory.table.description') }}:</dt>
+                <dd>{{ dataFormatter(item.description) }}</dd>
+              </dl>
+              <dl>
+                <!-- Memory Type -->
+                <dt>{{ $t('pageInventory.table.memoryType') }}:</dt>
+                <dd>{{ dataFormatter(item.memoryType) }}</dd>
+              </dl>
+              <dl>
+                <!-- Base Module Type -->
+                <dt>{{ $t('pageInventory.table.baseModuleType') }}:</dt>
+                <dd>{{ dataFormatter(item.baseModuleType) }}</dd>
+              </dl>
+              <dl>
+                <!-- Capacity MiB -->
+                <dt>{{ $t('pageInventory.table.capacityMiB') }}:</dt>
+                <dd>{{ dataFormatter(item.capacityMiB) }}</dd>
+              </dl>
+            </b-col>
+            <b-col sm="6" xl="6">
+              <dl>
+                <!-- Bus Width Bits -->
+                <dt>{{ $t('pageInventory.table.busWidthBits') }}:</dt>
+                <dd>{{ dataFormatter(item.busWidthBits) }}</dd>
+              </dl>
+              <dl>
+                <!-- Data Width Bits -->
+                <dt>{{ $t('pageInventory.table.dataWidthBits') }}:</dt>
+                <dd>{{ dataFormatter(item.dataWidthBits) }}</dd>
+              </dl>
+              <dl>
+                <!-- Operating Speed Mhz -->
+                <dt>{{ $t('pageInventory.table.operatingSpeedMhz') }}:</dt>
+                <dd>{{ dataFormatter(item.operatingSpeedMhz) }} MHz</dd>
+              </dl>
+            </b-col>
+          </b-row>
+        </b-container>
+      </template>
+    </b-table>
+  </page-section>
+</template>
+
+<script>
+import PageSection from '@/components/Global/PageSection';
+import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
+
+import StatusIcon from '@/components/Global/StatusIcon';
+import TableCellCount from '@/components/Global/TableCellCount';
+
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import TableSortMixin from '@/components/Mixins/TableSortMixin';
+import Search from '@/components/Global/Search';
+import SearchFilterMixin, {
+  searchFilter,
+} from '@/components/Mixins/SearchFilterMixin';
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+
+export default {
+  components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
+  mixins: [
+    TableRowExpandMixin,
+    DataFormatterMixin,
+    TableSortMixin,
+    SearchFilterMixin,
+  ],
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+        },
+        {
+          key: 'id',
+          label: this.$t('pageInventory.table.id'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'health',
+          label: this.$t('pageInventory.table.health'),
+          formatter: this.dataFormatter,
+          tdClass: 'text-nowrap',
+        },
+        {
+          key: 'locationNumber',
+          label: this.$t('pageInventory.table.locationNumber'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'identifyLed',
+          label: this.$t('pageInventory.table.identifyLed'),
+          formatter: this.dataFormatter,
+        },
+      ],
+      searchFilter: searchFilter,
+      searchTotalFilteredRows: 0,
+      expandRowLabel: expandRowLabel,
+    };
+  },
+  computed: {
+    filteredRows() {
+      return this.searchFilter
+        ? this.searchTotalFilteredRows
+        : this.dimms.length;
+    },
+    dimms() {
+      return this.$store.getters['memory/dimms'];
+    },
+  },
+  created() {
+    this.$store.dispatch('memory/getDimms').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('hardware-status-dimm-slot-complete');
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    sortCompare(a, b, key) {
+      if (key === 'health') {
+        return this.sortStatus(a, b, key);
+      }
+    },
+    onFiltered(filteredItems) {
+      this.searchTotalFilteredRows = filteredItems.length;
+    },
+    toggleIdentifyLedValue(row) {
+      this.$store
+        .dispatch('memory/updateIdentifyLedValue', {
+          uri: row.uri,
+          identifyLed: row.identifyLed,
+        })
+        .catch(({ message }) => this.errorToast(message));
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/HardwareStatus/Inventory/InventoryTableFans.vue b/src/views/_sila/HardwareStatus/Inventory/InventoryTableFans.vue
new file mode 100644
index 00000000..fe788c53
--- /dev/null
+++ b/src/views/_sila/HardwareStatus/Inventory/InventoryTableFans.vue
@@ -0,0 +1,190 @@
+<template>
+  <page-section :section-title="$t('pageInventory.fans')">
+    <b-row class="align-items-end">
+      <b-col sm="6" md="5" xl="4">
+        <search
+          @change-search="onChangeSearchInput"
+          @clear-search="onClearSearchInput"
+        />
+      </b-col>
+      <b-col sm="6" md="3" xl="2">
+        <table-cell-count
+          :filtered-items-count="filteredRows"
+          :total-number-of-cells="fans.length"
+        ></table-cell-count>
+      </b-col>
+    </b-row>
+    <b-table
+      sort-icon-left
+      no-sort-reset
+      hover
+      responsive="md"
+      sort-by="health"
+      show-empty
+      :items="fans"
+      :fields="fields"
+      :sort-desc="true"
+      :sort-compare="sortCompare"
+      :filter="searchFilter"
+      :empty-text="$t('global.table.emptyMessage')"
+      :empty-filtered-text="$t('global.table.emptySearchMessage')"
+      :busy="isBusy"
+      @filtered="onFiltered"
+    >
+      <!-- Expand chevron icon -->
+      <template #cell(expandRow)="row">
+        <b-button
+          variant="link"
+          data-test-id="hardwareStatus-button-expandFans"
+          :title="expandRowLabel"
+          class="btn-icon-only"
+          @click="toggleRowDetails(row)"
+        >
+          <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
+        </b-button>
+      </template>
+
+      <!-- Health -->
+      <template #cell(health)="{ value }">
+        <status-icon :status="statusIcon(value)" />
+        {{ value }}
+      </template>
+
+      <template #row-details="{ item }">
+        <b-container fluid>
+          <b-row>
+            <b-col sm="6" xl="4">
+              <dl>
+                <!-- Name -->
+                <dt>{{ $t('pageInventory.table.name') }}:</dt>
+                <dd>{{ dataFormatter(item.name) }}</dd>
+              </dl>
+              <dl>
+                <!-- Serial number -->
+                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.serialNumber) }}</dd>
+              </dl>
+              <dl>
+                <!-- Part number -->
+                <dt>{{ $t('pageInventory.table.partNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.partNumber) }}</dd>
+              </dl>
+              <dl>
+                <!-- Fan speed -->
+                <dt>{{ $t('pageInventory.table.fanSpeed') }}:</dt>
+                <dd>{{ dataFormatter(item.speed) }}</dd>
+              </dl>
+            </b-col>
+            <b-col sm="6" xl="4">
+              <dl>
+                <!-- Status state -->
+                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
+                <dd>{{ dataFormatter(item.statusState) }}</dd>
+              </dl>
+              <dl>
+                <!-- Health Rollup state -->
+                <dt>{{ $t('pageInventory.table.statusHealthRollup') }}:</dt>
+                <dd>{{ dataFormatter(item.healthRollup) }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+        </b-container>
+      </template>
+    </b-table>
+  </page-section>
+</template>
+
+<script>
+import PageSection from '@/components/Global/PageSection';
+import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
+import TableCellCount from '@/components/Global/TableCellCount';
+
+import StatusIcon from '@/components/Global/StatusIcon';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import TableSortMixin from '@/components/Mixins/TableSortMixin';
+import Search from '@/components/Global/Search';
+import SearchFilterMixin, {
+  searchFilter,
+} from '@/components/Mixins/SearchFilterMixin';
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+
+export default {
+  components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
+  mixins: [
+    TableRowExpandMixin,
+    DataFormatterMixin,
+    TableSortMixin,
+    SearchFilterMixin,
+  ],
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+          sortable: false,
+        },
+        {
+          key: 'id',
+          label: this.$t('pageInventory.table.id'),
+          formatter: this.dataFormatter,
+          sortable: true,
+        },
+        {
+          key: 'health',
+          label: this.$t('pageInventory.table.health'),
+          formatter: this.dataFormatter,
+          sortable: true,
+          tdClass: 'text-nowrap',
+        },
+        {
+          key: 'partNumber',
+          label: this.$t('pageInventory.table.partNumber'),
+          formatter: this.dataFormatter,
+          sortable: true,
+        },
+        {
+          key: 'serialNumber',
+          label: this.$t('pageInventory.table.serialNumber'),
+          formatter: this.dataFormatter,
+        },
+      ],
+      searchFilter: searchFilter,
+      searchTotalFilteredRows: 0,
+      expandRowLabel: expandRowLabel,
+    };
+  },
+  computed: {
+    filteredRows() {
+      return this.searchFilter
+        ? this.searchTotalFilteredRows
+        : this.fans.length;
+    },
+    fans() {
+      return this.$store.getters['fan/fans'];
+    },
+  },
+  created() {
+    this.$store.dispatch('fan/getFanInfo').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('hardware-status-fans-complete');
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    sortCompare(a, b, key) {
+      if (key === 'health') {
+        return this.sortStatus(a, b, key);
+      }
+    },
+    onFiltered(filteredItems) {
+      this.searchTotalFilteredRows = filteredItems.length;
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue b/src/views/_sila/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
new file mode 100644
index 00000000..aed7871a
--- /dev/null
+++ b/src/views/_sila/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
@@ -0,0 +1,208 @@
+<template>
+  <page-section :section-title="$t('pageInventory.powerSupplies')">
+    <b-row class="align-items-end">
+      <b-col sm="6" md="5" xl="4">
+        <search
+          @change-search="onChangeSearchInput"
+          @clear-search="onClearSearchInput"
+        />
+      </b-col>
+      <b-col sm="6" md="3" xl="2">
+        <table-cell-count
+          :filtered-items-count="filteredRows"
+          :total-number-of-cells="powerSupplies.length"
+        ></table-cell-count>
+      </b-col>
+    </b-row>
+    <b-table
+      sort-icon-left
+      no-sort-reset
+      hover
+      responsive="md"
+      sort-by="health"
+      show-empty
+      :items="powerSupplies"
+      :fields="fields"
+      :sort-desc="true"
+      :sort-compare="sortCompare"
+      :filter="searchFilter"
+      :empty-text="$t('global.table.emptyMessage')"
+      :empty-filtered-text="$t('global.table.emptySearchMessage')"
+      :busy="isBusy"
+      @filtered="onFiltered"
+    >
+      <!-- Expand chevron icon -->
+      <template #cell(expandRow)="row">
+        <b-button
+          variant="link"
+          data-test-id="hardwareStatus-button-expandPowerSupplies"
+          :title="expandRowLabel"
+          class="btn-icon-only"
+          @click="toggleRowDetails(row)"
+        >
+          <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
+        </b-button>
+      </template>
+
+      <!-- Health -->
+      <template #cell(health)="{ value }">
+        <status-icon :status="statusIcon(value)" />
+        {{ value }}
+      </template>
+
+      <template #row-details="{ item }">
+        <b-container fluid>
+          <b-row>
+            <b-col sm="6" xl="4">
+              <dl>
+                <!-- Name -->
+                <dt>{{ $t('pageInventory.table.name') }}:</dt>
+                <dd>{{ dataFormatter(item.name) }}</dd>
+                <!-- Part number -->
+                <dt>{{ $t('pageInventory.table.partNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.partNumber) }}</dd>
+                <!-- Serial number -->
+                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.serialNumber) }}</dd>
+                <!-- Spare part number -->
+                <dt>{{ $t('pageInventory.table.sparePartNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.sparePartNumber) }}</dd>
+                <!-- Model -->
+                <dt>{{ $t('pageInventory.table.model') }}:</dt>
+                <dd>{{ dataFormatter(item.model) }}</dd>
+              </dl>
+            </b-col>
+            <b-col sm="6" xl="4">
+              <dl>
+                <!-- Status state -->
+                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
+                <dd>{{ dataFormatter(item.statusState) }}</dd>
+                <!-- Status Health rollup state -->
+                <dt>{{ $t('pageInventory.table.statusHealthRollup') }}:</dt>
+                <dd>{{ dataFormatter(item.statusHealth) }}</dd>
+                <!-- Efficiency percent -->
+                <dt>{{ $t('pageInventory.table.efficiencyPercent') }}:</dt>
+                <dd>{{ dataFormatter(item.efficiencyPercent) }}</dd>
+                <!-- Power input watts -->
+                <dt>{{ $t('pageInventory.table.powerInputWatts') }}:</dt>
+                <dd>{{ dataFormatter(item.powerInputWatts) }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+          <div class="section-divider mb-3 mt-3"></div>
+          <b-row>
+            <b-col sm="6" xl="4">
+              <dl>
+                <!-- Manufacturer -->
+                <dt>{{ $t('pageInventory.table.manufacturer') }}:</dt>
+                <dd>{{ dataFormatter(item.manufacturer) }}</dd>
+              </dl>
+            </b-col>
+            <b-col sm="6" xl="4">
+              <dl>
+                <!-- Firmware version -->
+                <dt>{{ $t('pageInventory.table.firmwareVersion') }}:</dt>
+                <dd>{{ dataFormatter(item.firmwareVersion) }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+        </b-container>
+      </template>
+    </b-table>
+  </page-section>
+</template>
+
+<script>
+import PageSection from '@/components/Global/PageSection';
+import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
+
+import StatusIcon from '@/components/Global/StatusIcon';
+import TableCellCount from '@/components/Global/TableCellCount';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import TableSortMixin from '@/components/Mixins/TableSortMixin';
+import Search from '@/components/Global/Search';
+import SearchFilterMixin, {
+  searchFilter,
+} from '@/components/Mixins/SearchFilterMixin';
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+
+export default {
+  components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
+  mixins: [
+    TableRowExpandMixin,
+    DataFormatterMixin,
+    TableSortMixin,
+    SearchFilterMixin,
+  ],
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+          sortable: false,
+        },
+        {
+          key: 'id',
+          label: this.$t('pageInventory.table.id'),
+          formatter: this.dataFormatter,
+          sortable: true,
+        },
+        {
+          key: 'health',
+          label: this.$t('pageInventory.table.health'),
+          formatter: this.dataFormatter,
+          sortable: true,
+          tdClass: 'text-nowrap',
+        },
+        {
+          key: 'locationNumber',
+          label: this.$t('pageInventory.table.locationNumber'),
+          formatter: this.dataFormatter,
+          sortable: true,
+        },
+        {
+          key: 'identifyLed',
+          label: this.$t('pageInventory.table.identifyLed'),
+          formatter: this.dataFormatter,
+        },
+      ],
+      searchFilter: searchFilter,
+      searchTotalFilteredRows: 0,
+      expandRowLabel: expandRowLabel,
+    };
+  },
+  computed: {
+    filteredRows() {
+      return this.searchFilter
+        ? this.searchTotalFilteredRows
+        : this.powerSupplies.length;
+    },
+    powerSupplies() {
+      return this.$store.getters['powerSupply/powerSupplies'];
+    },
+  },
+  created() {
+    this.$store.dispatch('powerSupply/getAllPowerSupplies').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('hardware-status-power-supplies-complete');
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    sortCompare(a, b, key) {
+      if (key === 'health') {
+        return this.sortStatus(a, b, key);
+      }
+    },
+    onFiltered(filteredItems) {
+      this.searchTotalFilteredRows = filteredItems.length;
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/HardwareStatus/Inventory/InventoryTableProcessors.vue b/src/views/_sila/HardwareStatus/Inventory/InventoryTableProcessors.vue
new file mode 100644
index 00000000..7d5dd700
--- /dev/null
+++ b/src/views/_sila/HardwareStatus/Inventory/InventoryTableProcessors.vue
@@ -0,0 +1,251 @@
+<template>
+  <page-section :section-title="$t('pageInventory.processors')">
+    <!-- Search -->
+    <b-row class="align-items-end">
+      <b-col sm="6" md="5" xl="4">
+        <search
+          @change-search="onChangeSearchInput"
+          @clear-search="onClearSearchInput"
+        />
+      </b-col>
+      <b-col sm="6" md="3" xl="2">
+        <table-cell-count
+          :filtered-items-count="filteredRows"
+          :total-number-of-cells="processors.length"
+        ></table-cell-count>
+      </b-col>
+    </b-row>
+    <b-table
+      sort-icon-left
+      no-sort-reset
+      hover
+      responsive="md"
+      show-empty
+      :items="processors"
+      :fields="fields"
+      :sort-desc="true"
+      :filter="searchFilter"
+      :empty-text="$t('global.table.emptyMessage')"
+      :empty-filtered-text="$t('global.table.emptySearchMessage')"
+      :busy="isBusy"
+      @filtered="onFiltered"
+    >
+      <!-- Expand button -->
+      <template #cell(expandRow)="row">
+        <b-button
+          variant="link"
+          data-test-id="hardwareStatus-button-expandProcessors"
+          :title="expandRowLabel"
+          class="btn-icon-only"
+          @click="toggleRowDetails(row)"
+        >
+          <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
+        </b-button>
+      </template>
+      <!-- Health -->
+      <template #cell(health)="{ value }">
+        <status-icon :status="statusIcon(value)" />
+        {{ value }}
+      </template>
+
+      <!-- Toggle identify LED -->
+      <template #cell(identifyLed)="row">
+        <b-form-checkbox
+          v-if="hasIdentifyLed(row.item.identifyLed)"
+          v-model="row.item.identifyLed"
+          name="switch"
+          switch
+          @change="toggleIdentifyLedValue(row.item)"
+        >
+          <span v-if="row.item.identifyLed">
+            {{ $t('global.status.on') }}
+          </span>
+          <span v-else> {{ $t('global.status.off') }} </span>
+        </b-form-checkbox>
+        <div v-else>--</div>
+      </template>
+
+      <template #row-details="{ item }">
+        <b-container fluid>
+          <b-row>
+            <b-col class="mt-2" sm="6" xl="6">
+              <dl>
+                <!-- Name -->
+                <dt>{{ $t('pageInventory.table.name') }}:</dt>
+                <dd>{{ dataFormatter(item.name) }}</dd>
+                <!-- Part Number -->
+                <dt>{{ $t('pageInventory.table.partNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.partNumber) }}</dd>
+                <!-- Serial Number -->
+                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.serialNumber) }}</dd>
+                <!-- Spare Part Number -->
+                <dt>{{ $t('pageInventory.table.sparePartNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.sparePartNumber) }}</dd>
+                <!-- Model -->
+                <dt>{{ $t('pageInventory.table.model') }}:</dt>
+                <dd>{{ dataFormatter(item.model) }}</dd>
+                <!-- Asset Tag -->
+                <dt>{{ $t('pageInventory.table.assetTag') }}:</dt>
+                <dd>{{ dataFormatter(item.assetTag) }}</dd>
+              </dl>
+            </b-col>
+            <b-col class="mt-2" sm="6" xl="6">
+              <dl>
+                <!-- Status state -->
+                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
+                <dd>{{ dataFormatter(item.statusState) }}</dd>
+                <!-- Health Rollup -->
+                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
+                <dd>{{ dataFormatter(item.healthRollup) }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+          <div class="section-divider mb-3 mt-3"></div>
+          <b-row>
+            <b-col class="mt-1" sm="6" xl="6">
+              <dl>
+                <!-- Manufacturer -->
+                <dt>{{ $t('pageInventory.table.manufacturer') }}:</dt>
+                <dd>{{ dataFormatter(item.manufacturer) }}</dd>
+                <!-- Processor Type -->
+                <dt>{{ $t('pageInventory.table.processorType') }}:</dt>
+                <dd>{{ dataFormatter(item.processorType) }}</dd>
+                <!-- Processor Architecture -->
+                <dt>{{ $t('pageInventory.table.processorArchitecture') }}:</dt>
+                <dd>{{ dataFormatter(item.processorArchitecture) }}</dd>
+                <!-- Instruction Set -->
+                <dt>{{ $t('pageInventory.table.instructionSet') }}:</dt>
+                <dd>{{ dataFormatter(item.instructionSet) }}</dd>
+                <!-- Version -->
+                <dt>{{ $t('pageInventory.table.version') }}:</dt>
+                <dd>{{ dataFormatter(item.version) }}</dd>
+              </dl>
+            </b-col>
+            <b-col class="mt-1" sm="6" xl="6">
+              <dl>
+                <!-- Min Speed MHz -->
+                <dt>{{ $t('pageInventory.table.minSpeedMHz') }}:</dt>
+                <dd>{{ dataFormatter(item.minSpeedMHz) }}</dd>
+                <!-- Max Speed MHz -->
+                <dt>{{ $t('pageInventory.table.maxSpeedMHz') }}:</dt>
+                <dd>{{ dataFormatter(item.maxSpeedMHz) }}</dd>
+                <!-- Total Cores -->
+                <dt>{{ $t('pageInventory.table.totalCores') }}:</dt>
+                <dd>{{ dataFormatter(item.totalCores) }}</dd>
+                <!-- Total Threads -->
+                <dt>{{ $t('pageInventory.table.totalThreads') }}:</dt>
+                <dd>{{ dataFormatter(item.totalThreads) }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+        </b-container>
+      </template>
+    </b-table>
+  </page-section>
+</template>
+
+<script>
+import PageSection from '@/components/Global/PageSection';
+import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
+import StatusIcon from '@/components/Global/StatusIcon';
+import TableCellCount from '@/components/Global/TableCellCount';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import TableSortMixin from '@/components/Mixins/TableSortMixin';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import Search from '@/components/Global/Search';
+import SearchFilterMixin, {
+  searchFilter,
+} from '@/components/Mixins/SearchFilterMixin';
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+
+export default {
+  components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
+  mixins: [
+    BVToastMixin,
+    TableRowExpandMixin,
+    DataFormatterMixin,
+    TableSortMixin,
+    SearchFilterMixin,
+  ],
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+          sortable: false,
+        },
+        {
+          key: 'id',
+          label: this.$t('pageInventory.table.id'),
+          formatter: this.dataFormatter,
+          sortable: true,
+        },
+        {
+          key: 'health',
+          label: this.$t('pageInventory.table.health'),
+          formatter: this.dataFormatter,
+          sortable: true,
+          tdClass: 'text-nowrap',
+        },
+        {
+          key: 'locationNumber',
+          label: this.$t('pageInventory.table.locationNumber'),
+          formatter: this.dataFormatter,
+          sortable: true,
+        },
+        {
+          key: 'identifyLed',
+          label: this.$t('pageInventory.table.identifyLed'),
+          formatter: this.dataFormatter,
+          sortable: false,
+        },
+      ],
+      searchFilter: searchFilter,
+      searchTotalFilteredRows: 0,
+      expandRowLabel: expandRowLabel,
+    };
+  },
+  computed: {
+    filteredRows() {
+      return this.searchFilter
+        ? this.searchTotalFilteredRows
+        : this.processors.length;
+    },
+    processors() {
+      return this.$store.getters['processors/processors'];
+    },
+  },
+  created() {
+    this.$store.dispatch('processors/getProcessorsInfo').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('hardware-status-processors-complete');
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    onFiltered(filteredItems) {
+      this.searchTotalFilteredRows = filteredItems.length;
+    },
+    toggleIdentifyLedValue(row) {
+      this.$store
+        .dispatch('processors/updateIdentifyLedValue', {
+          uri: row.uri,
+          identifyLed: row.identifyLed,
+        })
+        .catch(({ message }) => this.errorToast(message));
+    },
+    // TO DO: remove hasIdentifyLed when the following is merged:
+    // https://gerrit.openbmc-project.xyz/c/openbmc/bmcweb/+/37045
+    hasIdentifyLed(identifyLed) {
+      return typeof identifyLed === 'boolean';
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/HardwareStatus/Inventory/InventoryTableSystem.vue b/src/views/_sila/HardwareStatus/Inventory/InventoryTableSystem.vue
new file mode 100644
index 00000000..cf2cf020
--- /dev/null
+++ b/src/views/_sila/HardwareStatus/Inventory/InventoryTableSystem.vue
@@ -0,0 +1,224 @@
+<template>
+  <page-section :section-title="$t('pageInventory.system')">
+    <b-table
+      responsive="md"
+      hover
+      show-empty
+      :items="systems"
+      :fields="fields"
+      :empty-text="$t('global.table.emptyMessage')"
+      :busy="isBusy"
+    >
+      <!-- Expand chevron icon -->
+      <template #cell(expandRow)="row">
+        <b-button
+          variant="link"
+          data-test-id="hardwareStatus-button-expandSystem"
+          :title="expandRowLabel"
+          class="btn-icon-only"
+          @click="toggleRowDetails(row)"
+        >
+          <icon-chevron />
+          <span class="sr-only">{{ expandRowLabel }}</span>
+        </b-button>
+      </template>
+
+      <!-- Health -->
+      <template #cell(health)="{ value }">
+        <status-icon :status="statusIcon(value)" />
+        {{ value }}
+      </template>
+
+      <template #cell(locationIndicatorActive)="{ item }">
+        <b-form-checkbox
+          id="identifyLedSwitchSystem"
+          v-model="item.locationIndicatorActive"
+          data-test-id="inventorySystem-toggle-identifyLed"
+          switch
+          @change="toggleIdentifyLedSwitch"
+        >
+          <span v-if="item.locationIndicatorActive">
+            {{ $t('global.status.on') }}
+          </span>
+          <span v-else>{{ $t('global.status.off') }}</span>
+        </b-form-checkbox>
+      </template>
+
+      <template #row-details="{ item }">
+        <b-container fluid>
+          <b-row>
+            <b-col class="mt-2" sm="6">
+              <dl>
+                <!-- Serial number -->
+                <dt>{{ $t('pageInventory.table.serialNumber') }}:</dt>
+                <dd>{{ dataFormatter(item.serialNumber) }}</dd>
+                <!-- Model -->
+                <dt>{{ $t('pageInventory.table.model') }}:</dt>
+                <dd>{{ dataFormatter(item.model) }}</dd>
+                <!-- Asset tag -->
+                <dt>{{ $t('pageInventory.table.assetTag') }}:</dt>
+                <dd class="mb-2">
+                  {{ dataFormatter(item.assetTag) }}
+                </dd>
+              </dl>
+            </b-col>
+            <b-col class="mt-2" sm="6">
+              <dl>
+                <!-- Status state -->
+                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
+                <dd>{{ dataFormatter(item.statusState) }}</dd>
+                <!-- Power state -->
+                <dt>{{ $t('pageInventory.table.power') }}:</dt>
+                <dd>{{ dataFormatter(item.powerState) }}</dd>
+                <!-- Health rollup -->
+                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
+                <dd>{{ dataFormatter(item.healthRollup) }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+          <div class="section-divider mb-3 mt-3"></div>
+          <b-row>
+            <b-col class="mt-1" sm="6">
+              <dl>
+                <!-- Manufacturer -->
+                <dt>{{ $t('pageInventory.table.manufacturer') }}:</dt>
+                <dd>{{ dataFormatter(item.manufacturer) }}</dd>
+                <!-- Description -->
+                <dt>{{ $t('pageInventory.table.description') }}:</dt>
+                <dd>{{ dataFormatter(item.description) }}</dd>
+                <!-- Sub Model -->
+                <dt>{{ $t('pageInventory.table.subModel') }}:</dt>
+                <dd>
+                  {{ dataFormatter(item.subModel) }}
+                </dd>
+                <!-- System Type -->
+                <dt>{{ $t('pageInventory.table.systemType') }}:</dt>
+                <dd>
+                  {{ dataFormatter(item.systemType) }}
+                </dd>
+              </dl>
+            </b-col>
+            <b-col sm="6">
+              <!-- Memory Summary -->
+              <p class="mt-1 mb-2 h6 float-none m-0">
+                {{ $t('pageInventory.table.memorySummary') }}
+              </p>
+              <dl class="ml-4">
+                <!-- Status state -->
+                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
+                <dd>{{ dataFormatter(item.memorySummaryState) }}</dd>
+                <!-- Health -->
+                <dt>{{ $t('pageInventory.table.health') }}:</dt>
+                <dd>{{ dataFormatter(item.memorySummaryHealth) }}</dd>
+                <!-- Health Roll  -->
+                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
+                <dd>{{ dataFormatter(item.memorySummaryHealthRollup) }}</dd>
+                <!-- Total system memory -->
+                <dt>{{ $t('pageInventory.table.totalSystemMemoryGiB') }}:</dt>
+                <dd>{{ dataFormatter(item.totalSystemMemoryGiB) }}GB</dd>
+              </dl>
+              <!-- Processor Summary -->
+              <p class="mt-1 mb-2 h6 float-none m-0">
+                {{ $t('pageInventory.table.processorSummary') }}
+              </p>
+              <dl class="ml-4">
+                <!-- Status state -->
+                <dt>{{ $t('pageInventory.table.statusState') }}:</dt>
+                <dd>{{ dataFormatter(item.processorSummaryState) }}</dd>
+                <!-- Health -->
+                <dt>{{ $t('pageInventory.table.health') }}:</dt>
+                <dd>{{ dataFormatter(item.processorSummaryHealth) }}</dd>
+                <!-- Health Rollup -->
+                <dt>{{ $t('pageInventory.table.healthRollup') }}:</dt>
+                <dd>{{ dataFormatter(item.processorSummaryHealthRoll) }}</dd>
+                <!-- Count -->
+                <dt>{{ $t('pageInventory.table.count') }}:</dt>
+                <dd>{{ dataFormatter(item.processorSummaryCount) }}</dd>
+                <!-- Core Count -->
+                <dt>{{ $t('pageInventory.table.coreCount') }}:</dt>
+                <dd>{{ dataFormatter(item.processorSummaryCoreCount) }}</dd>
+              </dl>
+            </b-col>
+          </b-row>
+        </b-container>
+      </template>
+    </b-table>
+  </page-section>
+</template>
+
+<script>
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import PageSection from '@/components/Global/PageSection';
+import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
+
+import StatusIcon from '@/components/Global/StatusIcon';
+
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+
+export default {
+  components: { IconChevron, PageSection, StatusIcon },
+  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+        },
+        {
+          key: 'id',
+          label: this.$t('pageInventory.table.id'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'hardwareType',
+          label: this.$t('pageInventory.table.hardwareType'),
+          formatter: this.dataFormatter,
+          tdClass: 'text-nowrap',
+        },
+        {
+          key: 'health',
+          label: this.$t('pageInventory.table.health'),
+          formatter: this.dataFormatter,
+          tdClass: 'text-nowrap',
+        },
+        {
+          key: 'locationNumber',
+          label: this.$t('pageInventory.table.locationNumber'),
+          formatter: this.dataFormatter,
+        },
+        {
+          key: 'locationIndicatorActive',
+          label: this.$t('pageInventory.table.identifyLed'),
+          formatter: this.dataFormatter,
+        },
+      ],
+      expandRowLabel: expandRowLabel,
+    };
+  },
+  computed: {
+    systems() {
+      return this.$store.getters['system/systems'];
+    },
+  },
+  created() {
+    this.$store.dispatch('system/getSystem').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('hardware-status-system-complete');
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    toggleIdentifyLedSwitch(state) {
+      this.$store
+        .dispatch('system/changeIdentifyLedState', state)
+        .catch(({ message }) => this.errorToast(message));
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/HardwareStatus/Inventory/index.js b/src/views/_sila/HardwareStatus/Inventory/index.js
new file mode 100644
index 00000000..c9fde8d2
--- /dev/null
+++ b/src/views/_sila/HardwareStatus/Inventory/index.js
@@ -0,0 +1,2 @@
+import Inventory from './Inventory.vue';
+export default Inventory;
diff --git a/src/views/_sila/HardwareStatus/Sensors/Sensors.vue b/src/views/_sila/HardwareStatus/Sensors/Sensors.vue
new file mode 100644
index 00000000..6329d9d8
--- /dev/null
+++ b/src/views/_sila/HardwareStatus/Sensors/Sensors.vue
@@ -0,0 +1,256 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+    <b-row class="align-items-end">
+      <b-col sm="6" md="5" xl="4">
+        <search
+          :placeholder="$t('pageSensors.searchForSensors')"
+          data-test-id="sensors-input-searchForSensors"
+          @change-search="onChangeSearchInput"
+          @clear-search="onClearSearchInput"
+        />
+      </b-col>
+      <b-col sm="3" md="3" xl="2">
+        <table-cell-count
+          :filtered-items-count="filteredRows"
+          :total-number-of-cells="allSensors.length"
+        ></table-cell-count>
+      </b-col>
+      <b-col sm="3" md="4" xl="6" class="text-right">
+        <table-filter :filters="tableFilters" @filter-change="onFilterChange" />
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col xl="12">
+        <table-toolbar
+          ref="toolbar"
+          :selected-items-count="selectedRows.length"
+          @clear-selected="clearSelectedRows($refs.table)"
+        >
+          <template #toolbar-buttons>
+            <table-toolbar-export
+              :data="selectedRows"
+              :file-name="exportFileNameByDate()"
+            />
+          </template>
+        </table-toolbar>
+        <b-table
+          ref="table"
+          responsive="md"
+          selectable
+          no-select-on-click
+          sort-icon-left
+          hover
+          no-sort-reset
+          sticky-header="75vh"
+          sort-by="status"
+          show-empty
+          :no-border-collapse="true"
+          :items="filteredSensors"
+          :fields="fields"
+          :sort-desc="true"
+          :sort-compare="sortCompare"
+          :filter="searchFilter"
+          :empty-text="$t('global.table.emptyMessage')"
+          :empty-filtered-text="$t('global.table.emptySearchMessage')"
+          :busy="isBusy"
+          @filtered="onFiltered"
+          @row-selected="onRowSelected($event, filteredSensors.length)"
+        >
+          <!-- Checkbox column -->
+          <template #head(checkbox)>
+            <b-form-checkbox
+              v-model="tableHeaderCheckboxModel"
+              :indeterminate="tableHeaderCheckboxIndeterminate"
+              @change="onChangeHeaderCheckbox($refs.table)"
+            >
+              <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+            </b-form-checkbox>
+          </template>
+          <template #cell(checkbox)="row">
+            <b-form-checkbox
+              v-model="row.rowSelected"
+              @change="toggleSelectRow($refs.table, row.index)"
+            >
+              <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+            </b-form-checkbox>
+          </template>
+
+          <template #cell(status)="{ value }">
+            <status-icon :status="statusIcon(value)" /> {{ value }}
+          </template>
+          <template #cell(currentValue)="data">
+            {{ data.value }} {{ data.item.units }}
+          </template>
+          <template #cell(lowerCaution)="data">
+            {{ data.value }} {{ data.item.units }}
+          </template>
+          <template #cell(upperCaution)="data">
+            {{ data.value }} {{ data.item.units }}
+          </template>
+          <template #cell(lowerCritical)="data">
+            {{ data.value }} {{ data.item.units }}
+          </template>
+          <template #cell(upperCritical)="data">
+            {{ data.value }} {{ data.item.units }}
+          </template>
+        </b-table>
+      </b-col>
+    </b-row>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import Search from '@/components/Global/Search';
+import StatusIcon from '@/components/Global/StatusIcon';
+import TableFilter from '@/components/Global/TableFilter';
+import TableToolbar from '@/components/Global/TableToolbar';
+import TableToolbarExport from '@/components/Global/TableToolbarExport';
+import TableCellCount from '@/components/Global/TableCellCount';
+
+import BVTableSelectableMixin, {
+  selectedRows,
+  tableHeaderCheckboxModel,
+  tableHeaderCheckboxIndeterminate,
+} from '@/components/Mixins/BVTableSelectableMixin';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import TableSortMixin from '@/components/Mixins/TableSortMixin';
+import SearchFilterMixin, {
+  searchFilter,
+} from '@/components/Mixins/SearchFilterMixin';
+
+export default {
+  name: 'Sensors',
+  components: {
+    PageTitle,
+    Search,
+    StatusIcon,
+    TableCellCount,
+    TableFilter,
+    TableToolbar,
+    TableToolbarExport,
+  },
+  mixins: [
+    TableFilterMixin,
+    BVTableSelectableMixin,
+    LoadingBarMixin,
+    DataFormatterMixin,
+    TableSortMixin,
+    SearchFilterMixin,
+  ],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'checkbox',
+          sortable: false,
+          label: '',
+        },
+        {
+          key: 'name',
+          sortable: true,
+          label: this.$t('pageSensors.table.name'),
+        },
+        {
+          key: 'status',
+          sortable: true,
+          label: this.$t('pageSensors.table.status'),
+          tdClass: 'text-nowrap',
+        },
+        {
+          key: 'lowerCritical',
+          formatter: this.dataFormatter,
+          label: this.$t('pageSensors.table.lowerCritical'),
+        },
+        {
+          key: 'lowerCaution',
+          formatter: this.dataFormatter,
+          label: this.$t('pageSensors.table.lowerWarning'),
+        },
+
+        {
+          key: 'currentValue',
+          formatter: this.dataFormatter,
+          label: this.$t('pageSensors.table.currentValue'),
+        },
+        {
+          key: 'upperCaution',
+          formatter: this.dataFormatter,
+          label: this.$t('pageSensors.table.upperWarning'),
+        },
+        {
+          key: 'upperCritical',
+          formatter: this.dataFormatter,
+          label: this.$t('pageSensors.table.upperCritical'),
+        },
+      ],
+      tableFilters: [
+        {
+          key: 'status',
+          label: this.$t('pageSensors.table.status'),
+          values: ['OK', 'Warning', 'Critical'],
+        },
+      ],
+      activeFilters: [],
+      searchFilter: searchFilter,
+      searchTotalFilteredRows: 0,
+      selectedRows: selectedRows,
+      tableHeaderCheckboxModel: tableHeaderCheckboxModel,
+      tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
+    };
+  },
+  computed: {
+    allSensors() {
+      return this.$store.getters['sensors/sensors'];
+    },
+    filteredRows() {
+      return this.searchFilter
+        ? this.searchTotalFilteredRows
+        : this.filteredSensors.length;
+    },
+    filteredSensors() {
+      return this.getFilteredTableData(this.allSensors, this.activeFilters);
+    },
+  },
+  created() {
+    this.startLoader();
+    this.$store.dispatch('sensors/getAllSensors').finally(() => {
+      this.endLoader();
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    sortCompare(a, b, key) {
+      if (key === 'status') {
+        return this.sortStatus(a, b, key);
+      }
+    },
+    onFilterChange({ activeFilters }) {
+      this.activeFilters = activeFilters;
+    },
+    onFiltered(filteredItems) {
+      this.searchTotalFilteredRows = filteredItems.length;
+    },
+    onChangeSearchInput(event) {
+      this.searchFilter = event;
+    },
+    exportFileNameByDate() {
+      // Create export file name based on date
+      let date = new Date();
+      date =
+        date.toISOString().slice(0, 10) +
+        '_' +
+        date.toString().split(':').join('-').split(' ')[4];
+      return this.$t('pageSensors.exportFilePrefix') + date;
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/HardwareStatus/Sensors/index.js b/src/views/_sila/HardwareStatus/Sensors/index.js
new file mode 100644
index 00000000..fc71b611
--- /dev/null
+++ b/src/views/_sila/HardwareStatus/Sensors/index.js
@@ -0,0 +1,2 @@
+import Sensors from './Sensors.vue';
+export default Sensors;
diff --git a/src/views/_sila/Login/Login.vue b/src/views/_sila/Login/Login.vue
new file mode 100644
index 00000000..8d96573a
--- /dev/null
+++ b/src/views/_sila/Login/Login.vue
@@ -0,0 +1,146 @@
+<template>
+  <b-form class="login-form" novalidate @submit.prevent="login">
+    <alert class="login-error mb-4" :show="authError" variant="danger">
+      <p id="login-error-alert">
+        {{ $t('pageLogin.alert.message') }}
+      </p>
+    </alert>
+    <b-form-group label-for="language" :label="$t('pageLogin.language')">
+      <b-form-select
+        id="language"
+        v-model="$i18n.locale"
+        :options="languages"
+        data-test-id="login-select-language"
+      ></b-form-select>
+    </b-form-group>
+    <b-form-group label-for="username" :label="$t('pageLogin.username')">
+      <b-form-input
+        id="username"
+        v-model="userInfo.username"
+        aria-describedby="login-error-alert username-required"
+        :state="getValidationState($v.userInfo.username)"
+        type="text"
+        autofocus="autofocus"
+        data-test-id="login-input-username"
+        @input="$v.userInfo.username.$touch()"
+      >
+      </b-form-input>
+      <b-form-invalid-feedback id="username-required" role="alert">
+        <template v-if="!$v.userInfo.username.required">
+          {{ $t('global.form.fieldRequired') }}
+        </template>
+      </b-form-invalid-feedback>
+    </b-form-group>
+    <div class="login-form__section mb-3">
+      <label for="password">{{ $t('pageLogin.password') }}</label>
+      <input-password-toggle>
+        <b-form-input
+          id="password"
+          v-model="userInfo.password"
+          aria-describedby="login-error-alert password-required"
+          :state="getValidationState($v.userInfo.password)"
+          type="password"
+          data-test-id="login-input-password"
+          class="form-control-with-button"
+          @input="$v.userInfo.password.$touch()"
+        >
+        </b-form-input>
+      </input-password-toggle>
+      <b-form-invalid-feedback id="password-required" role="alert">
+        <template v-if="!$v.userInfo.password.required">
+          {{ $t('global.form.fieldRequired') }}
+        </template>
+      </b-form-invalid-feedback>
+    </div>
+    <b-button
+      class="mt-3"
+      type="submit"
+      variant="primary"
+      data-test-id="login-button-submit"
+      :disabled="disableSubmitButton"
+      >{{ $t('pageLogin.logIn') }}</b-button
+    >
+  </b-form>
+</template>
+
+<script>
+import { required } from 'vuelidate/lib/validators';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import i18n from '@/i18n';
+import Alert from '@/components/Global/Alert';
+import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
+
+export default {
+  name: 'Login',
+  components: { Alert, InputPasswordToggle },
+  mixins: [VuelidateMixin],
+  data() {
+    return {
+      userInfo: {
+        username: null,
+        password: null,
+      },
+      disableSubmitButton: false,
+      languages: [
+        {
+          value: 'en-US',
+          text: 'English',
+        },
+        {
+          value: 'es',
+          text: 'Español',
+        },
+        {
+          value: 'ru-RU',
+          text: 'Русский',
+        },
+      ],
+    };
+  },
+  computed: {
+    authError() {
+      return this.$store.getters['authentication/authError'];
+    },
+  },
+  validations: {
+    userInfo: {
+      username: {
+        required,
+      },
+      password: {
+        required,
+      },
+    },
+  },
+  methods: {
+    login: function () {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.disableSubmitButton = true;
+      const username = this.userInfo.username;
+      const password = this.userInfo.password;
+      this.$store
+        .dispatch('authentication/login', { username, password })
+        .then(() => {
+          localStorage.setItem('storedLanguage', i18n.locale);
+          localStorage.setItem('storedUsername', username);
+          this.$store.commit('global/setUsername', username);
+          this.$store.commit('global/setLanguagePreference', i18n.locale);
+          return this.$store.dispatch(
+            'authentication/checkPasswordChangeRequired',
+            username
+          );
+        })
+        .then((passwordChangeRequired) => {
+          if (passwordChangeRequired) {
+            this.$router.push('/change-password');
+          } else {
+            this.$router.push('/');
+          }
+        })
+        .catch((error) => console.log(error))
+        .finally(() => (this.disableSubmitButton = false));
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Login/index.js b/src/views/_sila/Login/index.js
new file mode 100644
index 00000000..8fe0250d
--- /dev/null
+++ b/src/views/_sila/Login/index.js
@@ -0,0 +1,2 @@
+import Login from './Login.vue';
+export default Login;
diff --git a/src/views/_sila/Logs/Dumps/Dumps.vue b/src/views/_sila/Logs/Dumps/Dumps.vue
new file mode 100644
index 00000000..81c9de04
--- /dev/null
+++ b/src/views/_sila/Logs/Dumps/Dumps.vue
@@ -0,0 +1,404 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+    <b-row>
+      <b-col sm="6" lg="5" xl="4">
+        <page-section :section-title="$t('pageDumps.initiateDump')">
+          <dumps-form />
+        </page-section>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col xl="10">
+        <page-section :section-title="$t('pageDumps.dumpsAvailableOnBmc')">
+          <b-row class="align-items-start">
+            <b-col sm="8" xl="6" class="d-sm-flex align-items-end">
+              <search
+                :placeholder="$t('pageDumps.table.searchDumps')"
+                @change-search="onChangeSearchInput"
+                @clear-search="onClearSearchInput"
+              />
+              <div class="ml-sm-4">
+                <table-cell-count
+                  :filtered-items-count="filteredRows"
+                  :total-number-of-cells="allDumps.length"
+                ></table-cell-count>
+              </div>
+            </b-col>
+            <b-col sm="8" md="7" xl="6">
+              <table-date-filter @change="onChangeDateTimeFilter" />
+            </b-col>
+          </b-row>
+          <b-row>
+            <b-col class="text-right">
+              <table-filter
+                :filters="tableFilters"
+                @filter-change="onFilterChange"
+              />
+            </b-col>
+          </b-row>
+          <table-toolbar
+            :selected-items-count="selectedRows.length"
+            :actions="batchActions"
+            @clear-selected="clearSelectedRows($refs.table)"
+            @batch-action="onTableBatchAction"
+          />
+          <b-table
+            ref="table"
+            show-empty
+            hover
+            sort-icon-left
+            no-sort-reset
+            sort-desc
+            selectable
+            no-select-on-click
+            responsive="md"
+            sort-by="dateTime"
+            :fields="fields"
+            :items="filteredDumps"
+            :empty-text="$t('global.table.emptyMessage')"
+            :empty-filtered-text="$t('global.table.emptySearchMessage')"
+            :filter="searchFilter"
+            :busy="isBusy"
+            @filtered="onChangeSearchFilter"
+            @row-selected="onRowSelected($event, filteredTableItems.length)"
+          >
+            <!-- Checkbox column -->
+            <template #head(checkbox)>
+              <b-form-checkbox
+                v-model="tableHeaderCheckboxModel"
+                :indeterminate="tableHeaderCheckboxIndeterminate"
+                @change="onChangeHeaderCheckbox($refs.table)"
+              >
+                <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+              </b-form-checkbox>
+            </template>
+            <template #cell(checkbox)="row">
+              <b-form-checkbox
+                v-model="row.rowSelected"
+                @change="toggleSelectRow($refs.table, row.index)"
+              >
+                <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+              </b-form-checkbox>
+            </template>
+
+            <!-- Date and Time column -->
+            <template #cell(dateTime)="{ value }">
+              <p class="mb-0">{{ value | formatDate }}</p>
+              <p class="mb-0">{{ value | formatTime }}</p>
+            </template>
+
+            <!-- Size column -->
+            <template #cell(size)="{ value }">
+              {{ convertBytesToMegabytes(value) }} MB
+            </template>
+
+            <!-- Actions column -->
+            <template #cell(actions)="row">
+              <table-row-action
+                v-for="(action, index) in row.item.actions"
+                :key="index"
+                :value="action.value"
+                :title="action.title"
+                :download-location="row.item.data"
+                :export-name="exportFileName(row)"
+                @click-table-action="onTableRowAction($event, row.item)"
+              >
+                <template #icon>
+                  <icon-download v-if="action.value === 'download'" />
+                  <icon-delete v-if="action.value === 'delete'" />
+                </template>
+              </table-row-action>
+            </template>
+          </b-table>
+        </page-section>
+      </b-col>
+    </b-row>
+    <!-- Table pagination -->
+    <b-row>
+      <b-col sm="6" xl="5">
+        <b-form-group
+          class="table-pagination-select"
+          :label="$t('global.table.itemsPerPage')"
+          label-for="pagination-items-per-page"
+        >
+          <b-form-select
+            id="pagination-items-per-page"
+            v-model="perPage"
+            :options="itemsPerPageOptions"
+          />
+        </b-form-group>
+      </b-col>
+      <b-col sm="6" xl="5">
+        <b-pagination
+          v-model="currentPage"
+          first-number
+          last-number
+          :per-page="perPage"
+          :total-rows="getTotalRowCount()"
+          aria-controls="table-dump-entries"
+        />
+      </b-col>
+    </b-row>
+  </b-container>
+</template>
+
+<script>
+import IconDelete from '@carbon/icons-vue/es/trash-can/20';
+import IconDownload from '@carbon/icons-vue/es/download/20';
+import DumpsForm from './DumpsForm';
+import PageSection from '@/components/Global/PageSection';
+import PageTitle from '@/components/Global/PageTitle';
+import Search from '@/components/Global/Search';
+import TableCellCount from '@/components/Global/TableCellCount';
+import TableDateFilter from '@/components/Global/TableDateFilter';
+import TableRowAction from '@/components/Global/TableRowAction';
+import TableToolbar from '@/components/Global/TableToolbar';
+import BVTableSelectableMixin, {
+  selectedRows,
+  tableHeaderCheckboxModel,
+  tableHeaderCheckboxIndeterminate,
+} from '@/components/Mixins/BVTableSelectableMixin';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import BVPaginationMixin, {
+  currentPage,
+  perPage,
+  itemsPerPageOptions,
+} from '@/components/Mixins/BVPaginationMixin';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import SearchFilterMixin, {
+  searchFilter,
+} from '@/components/Mixins/SearchFilterMixin';
+import TableFilter from '@/components/Global/TableFilter';
+import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
+
+export default {
+  components: {
+    DumpsForm,
+    IconDelete,
+    IconDownload,
+    PageSection,
+    PageTitle,
+    Search,
+    TableCellCount,
+    TableDateFilter,
+    TableRowAction,
+    TableToolbar,
+    TableFilter,
+  },
+  mixins: [
+    BVTableSelectableMixin,
+    BVToastMixin,
+    BVPaginationMixin,
+    LoadingBarMixin,
+    SearchFilterMixin,
+    TableFilterMixin,
+  ],
+  beforeRouteLeave(to, from, next) {
+    // Hide loader if the user navigates to another page
+    // before request is fulfilled.
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'checkbox',
+          sortable: false,
+        },
+        {
+          key: 'dateTime',
+          label: this.$t('pageDumps.table.dateAndTime'),
+          sortable: true,
+        },
+        {
+          key: 'dumpType',
+          label: this.$t('pageDumps.table.dumpType'),
+          sortable: true,
+        },
+        {
+          key: 'id',
+          label: this.$t('pageDumps.table.id'),
+          sortable: true,
+        },
+        {
+          key: 'size',
+          label: this.$t('pageDumps.table.size'),
+          sortable: true,
+        },
+        {
+          key: 'actions',
+          sortable: false,
+          label: '',
+          tdClass: 'text-right text-nowrap',
+        },
+      ],
+      batchActions: [
+        {
+          value: 'delete',
+          label: this.$t('global.action.delete'),
+        },
+      ],
+      tableFilters: [
+        {
+          key: 'dumpType',
+          label: this.$t('pageDumps.table.dumpType'),
+          values: [
+            'BMC Dump Entry',
+            'Hostboot Dump Entry',
+            'Resource Dump Entry',
+            'System Dump Entry',
+          ],
+        },
+      ],
+      activeFilters: [],
+      currentPage: currentPage,
+      filterEndDate: null,
+      filterStartDate: null,
+      itemsPerPageOptions: itemsPerPageOptions,
+      perPage: perPage,
+      searchFilter,
+      searchTotalFilteredRows: 0,
+      selectedRows,
+      tableHeaderCheckboxIndeterminate,
+      tableHeaderCheckboxModel,
+    };
+  },
+  computed: {
+    filteredRows() {
+      return this.searchFilter
+        ? this.searchTotalFilteredRows
+        : this.filteredDumps.length;
+    },
+    allDumps() {
+      return this.$store.getters['dumps/allDumps'].map((item) => {
+        return {
+          ...item,
+          actions: [
+            {
+              value: 'download',
+              title: this.$t('global.action.download'),
+            },
+            {
+              value: 'delete',
+              title: this.$t('global.action.delete'),
+            },
+          ],
+        };
+      });
+    },
+    filteredDumpsByDate() {
+      return this.getFilteredTableDataByDate(
+        this.allDumps,
+        this.filterStartDate,
+        this.filterEndDate,
+        'dateTime'
+      );
+    },
+    filteredDumps() {
+      return this.getFilteredTableData(
+        this.filteredDumpsByDate,
+        this.activeFilters
+      );
+    },
+  },
+  created() {
+    this.startLoader();
+    this.$store.dispatch('dumps/getBmcDumpEntries').finally(() => {
+      this.endLoader();
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    convertBytesToMegabytes(bytes) {
+      return parseFloat((bytes / 1000000).toFixed(3));
+    },
+    onFilterChange({ activeFilters }) {
+      this.activeFilters = activeFilters;
+    },
+    onFiltered(filteredItems) {
+      this.searchTotalFilteredRows = filteredItems.length;
+    },
+    onChangeDateTimeFilter({ fromDate, toDate }) {
+      this.filterStartDate = fromDate;
+      this.filterEndDate = toDate;
+    },
+    onTableRowAction(action, dump) {
+      if (action === 'delete') {
+        this.$bvModal
+          .msgBoxConfirm(this.$tc('pageDumps.modal.deleteDumpConfirmation'), {
+            title: this.$tc('pageDumps.modal.deleteDump'),
+            okTitle: this.$tc('pageDumps.modal.deleteDump'),
+            cancelTitle: this.$t('global.action.cancel'),
+          })
+          .then((deleteConfrimed) => {
+            if (deleteConfrimed) {
+              this.$store
+                .dispatch('dumps/deleteDumps', [dump])
+                .then((messages) => {
+                  messages.forEach(({ type, message }) => {
+                    if (type === 'success') {
+                      this.successToast(message);
+                    } else if (type === 'error') {
+                      this.errorToast(message);
+                    }
+                  });
+                });
+            }
+          });
+      }
+    },
+    onTableBatchAction(action) {
+      if (action === 'delete') {
+        this.$bvModal
+          .msgBoxConfirm(
+            this.$tc(
+              'pageDumps.modal.deleteDumpConfirmation',
+              this.selectedRows.length
+            ),
+            {
+              title: this.$tc(
+                'pageDumps.modal.deleteDump',
+                this.selectedRows.length
+              ),
+              okTitle: this.$tc(
+                'pageDumps.modal.deleteDump',
+                this.selectedRows.length
+              ),
+              cancelTitle: this.$t('global.action.cancel'),
+            }
+          )
+          .then((deleteConfrimed) => {
+            if (deleteConfrimed) {
+              if (this.selectedRows.length === this.dumps.length) {
+                this.$store
+                  .dispatch('dumps/deleteAllDumps')
+                  .then((success) => this.successToast(success))
+                  .catch(({ message }) => this.errorToast(message));
+              } else {
+                this.$store
+                  .dispatch('dumps/deleteDumps', this.selectedRows)
+                  .then((messages) => {
+                    messages.forEach(({ type, message }) => {
+                      if (type === 'success') {
+                        this.successToast(message);
+                      } else if (type === 'error') {
+                        this.errorToast(message);
+                      }
+                    });
+                  });
+              }
+            }
+          });
+      }
+    },
+    exportFileName(row) {
+      let filename = row.item.dumpType + '_' + row.item.id + '.tar.xz';
+      filename = filename.replace(RegExp(' ', 'g'), '_');
+      return filename;
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Logs/Dumps/DumpsForm.vue b/src/views/_sila/Logs/Dumps/DumpsForm.vue
new file mode 100644
index 00000000..07f4a060
--- /dev/null
+++ b/src/views/_sila/Logs/Dumps/DumpsForm.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="form-background p-3">
+    <b-form id="form-new-dump" novalidate @submit.prevent="handleSubmit">
+      <b-form-group
+        :label="$t('pageDumps.form.selectDumpType')"
+        label-for="selectDumpType"
+      >
+        <b-form-select
+          id="selectDumpType"
+          v-model="selectedDumpType"
+          :options="dumpTypeOptions"
+          :state="getValidationState($v.selectedDumpType)"
+        >
+          <template #first>
+            <b-form-select-option :value="null" disabled>
+              {{ $t('global.form.selectAnOption') }}
+            </b-form-select-option>
+          </template>
+        </b-form-select>
+        <b-form-invalid-feedback role="alert">
+          {{ $t('global.form.required') }}
+        </b-form-invalid-feedback>
+      </b-form-group>
+      <alert variant="info" class="mb-3" :show="selectedDumpType === 'system'">
+        {{ $t('pageDumps.form.systemDumpInfo') }}
+      </alert>
+      <b-button variant="primary" type="submit" form="form-new-dump">
+        {{ $t('pageDumps.form.initiateDump') }}
+      </b-button>
+    </b-form>
+    <modal-confirmation @ok="createSystemDump" />
+  </div>
+</template>
+
+<script>
+import { required } from 'vuelidate/lib/validators';
+import ModalConfirmation from './DumpsModalConfirmation';
+import Alert from '@/components/Global/Alert';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+
+export default {
+  components: { Alert, ModalConfirmation },
+  mixins: [BVToastMixin, VuelidateMixin],
+  data() {
+    return {
+      selectedDumpType: null,
+      dumpTypeOptions: [
+        { value: 'bmc', text: this.$t('pageDumps.form.bmcDump') },
+        { value: 'system', text: this.$t('pageDumps.form.systemDump') },
+      ],
+    };
+  },
+  validations() {
+    return {
+      selectedDumpType: { required },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+
+      // System dump initiation
+      if (this.selectedDumpType === 'system') {
+        this.showConfirmationModal();
+      }
+      // BMC dump initiation
+      else if (this.selectedDumpType === 'bmc') {
+        this.$store
+          .dispatch('dumps/createBmcDump')
+          .then(() =>
+            this.infoToast(this.$t('pageDumps.toast.successStartBmcDump'), {
+              title: this.$t('pageDumps.toast.successStartBmcDumpTitle'),
+              timestamp: true,
+            })
+          )
+          .catch(({ message }) => this.errorToast(message));
+      }
+    },
+    showConfirmationModal() {
+      this.$bvModal.show('modal-confirmation');
+    },
+    createSystemDump() {
+      this.$store
+        .dispatch('dumps/createSystemDump')
+        .then(() =>
+          this.infoToast(this.$t('pageDumps.toast.successStartSystemDump'), {
+            title: this.$t('pageDumps.toast.successStartSystemDumpTitle'),
+            timestamp: true,
+          })
+        )
+        .catch(({ message }) => this.errorToast(message));
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Logs/Dumps/DumpsModalConfirmation.vue b/src/views/_sila/Logs/Dumps/DumpsModalConfirmation.vue
new file mode 100644
index 00000000..f8e20cfd
--- /dev/null
+++ b/src/views/_sila/Logs/Dumps/DumpsModalConfirmation.vue
@@ -0,0 +1,75 @@
+<template>
+  <b-modal
+    id="modal-confirmation"
+    ref="modal"
+    :title="$t('pageDumps.modal.initiateSystemDump')"
+    @hidden="resetForm"
+  >
+    <p>
+      <strong>
+        {{ $t('pageDumps.modal.initiateSystemDumpMessage1') }}
+      </strong>
+    </p>
+    <p>
+      {{ $t('pageDumps.modal.initiateSystemDumpMessage2') }}
+    </p>
+    <p>
+      <status-icon status="danger" />
+      {{ $t('pageDumps.modal.initiateSystemDumpMessage3') }}
+    </p>
+    <b-form-checkbox v-model="confirmed" @input="$v.confirmed.$touch()">
+      {{ $t('pageDumps.modal.initiateSystemDumpMessage4') }}
+    </b-form-checkbox>
+    <b-form-invalid-feedback
+      :state="getValidationState($v.confirmed)"
+      role="alert"
+    >
+      {{ $t('global.form.required') }}
+    </b-form-invalid-feedback>
+    <template #modal-footer="{ cancel }">
+      <b-button variant="secondary" @click="cancel()">
+        {{ $t('global.action.cancel') }}
+      </b-button>
+      <b-button variant="danger" @click="handleSubmit">
+        {{ $t('pageDumps.form.initiateDump') }}
+      </b-button>
+    </template>
+  </b-modal>
+</template>
+
+<script>
+import StatusIcon from '@/components/Global/StatusIcon';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+
+export default {
+  components: { StatusIcon },
+  mixins: [VuelidateMixin],
+  data() {
+    return {
+      confirmed: false,
+    };
+  },
+  validations: {
+    confirmed: {
+      mustBeTrue: (value) => value === true,
+    },
+  },
+  methods: {
+    closeModal() {
+      this.$nextTick(() => {
+        this.$refs.modal.hide();
+      });
+    },
+    handleSubmit() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.$emit('ok');
+      this.closeModal();
+    },
+    resetForm() {
+      this.confirmed = false;
+      this.$v.$reset();
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Logs/Dumps/index.js b/src/views/_sila/Logs/Dumps/index.js
new file mode 100644
index 00000000..65525fb0
--- /dev/null
+++ b/src/views/_sila/Logs/Dumps/index.js
@@ -0,0 +1,2 @@
+import Dumps from './Dumps.vue';
+export default Dumps;
diff --git a/src/views/_sila/Logs/EventLogs/EventLogs.vue b/src/views/_sila/Logs/EventLogs/EventLogs.vue
new file mode 100644
index 00000000..5b8ca110
--- /dev/null
+++ b/src/views/_sila/Logs/EventLogs/EventLogs.vue
@@ -0,0 +1,604 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+    <b-row class="align-items-start">
+      <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4">
+        <search
+          :placeholder="$t('pageEventLogs.table.searchLogs')"
+          data-test-id="eventLogs-input-searchLogs"
+          @change-search="onChangeSearchInput"
+          @clear-search="onClearSearchInput"
+        />
+        <div class="ml-sm-4">
+          <table-cell-count
+            :filtered-items-count="filteredRows"
+            :total-number-of-cells="allLogs.length"
+          ></table-cell-count>
+        </div>
+      </b-col>
+      <b-col sm="8" md="7" xl="6">
+        <table-date-filter @change="onChangeDateTimeFilter" />
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col class="text-right">
+        <table-filter :filters="tableFilters" @filter-change="onFilterChange" />
+        <b-button
+          variant="link"
+          :disabled="allLogs.length === 0"
+          @click="deleteAllLogs"
+        >
+          <icon-delete /> {{ $t('global.action.deleteAll') }}
+        </b-button>
+        <b-button
+          variant="primary"
+          :class="{ disabled: allLogs.length === 0 }"
+          :download="exportFileNameByDate()"
+          :href="href"
+        >
+          <icon-export /> {{ $t('global.action.exportAll') }}
+        </b-button>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <table-toolbar
+          ref="toolbar"
+          :selected-items-count="selectedRows.length"
+          :actions="batchActions"
+          @clear-selected="clearSelectedRows($refs.table)"
+          @batch-action="onBatchAction"
+        >
+          <template #toolbar-buttons>
+            <b-button variant="primary" @click="resolveLogs">
+              {{ $t('pageEventLogs.resolve') }}
+            </b-button>
+            <b-button variant="primary" @click="unresolveLogs">
+              {{ $t('pageEventLogs.unresolve') }}
+            </b-button>
+            <table-toolbar-export
+              :data="batchExportData"
+              :file-name="exportFileNameByDate()"
+            />
+          </template>
+        </table-toolbar>
+        <b-table
+          id="table-event-logs"
+          ref="table"
+          responsive="md"
+          selectable
+          no-select-on-click
+          sort-icon-left
+          hover
+          no-sort-reset
+          sort-desc
+          show-empty
+          sort-by="id"
+          :fields="fields"
+          :items="filteredLogs"
+          :sort-compare="onSortCompare"
+          :empty-text="$t('global.table.emptyMessage')"
+          :empty-filtered-text="$t('global.table.emptySearchMessage')"
+          :per-page="perPage"
+          :current-page="currentPage"
+          :filter="searchFilter"
+          :busy="isBusy"
+          @filtered="onFiltered"
+          @row-selected="onRowSelected($event, filteredLogs.length)"
+        >
+          <!-- Checkbox column -->
+          <template #head(checkbox)>
+            <b-form-checkbox
+              v-model="tableHeaderCheckboxModel"
+              data-test-id="eventLogs-checkbox-selectAll"
+              :indeterminate="tableHeaderCheckboxIndeterminate"
+              @change="onChangeHeaderCheckbox($refs.table)"
+            >
+              <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+            </b-form-checkbox>
+          </template>
+          <template #cell(checkbox)="row">
+            <b-form-checkbox
+              v-model="row.rowSelected"
+              :data-test-id="`eventLogs-checkbox-selectRow-${row.index}`"
+              @change="toggleSelectRow($refs.table, row.index)"
+            >
+              <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+            </b-form-checkbox>
+          </template>
+
+          <!-- Expand chevron icon -->
+          <template #cell(expandRow)="row">
+            <b-button
+              variant="link"
+              :aria-label="expandRowLabel"
+              :title="expandRowLabel"
+              class="btn-icon-only"
+              @click="toggleRowDetails(row)"
+            >
+              <icon-chevron />
+            </b-button>
+          </template>
+
+          <template #row-details="{ item }">
+            <b-container fluid>
+              <b-row>
+                <b-col>
+                  <dl>
+                    <!-- Name -->
+                    <dt>{{ $t('pageEventLogs.table.name') }}:</dt>
+                    <dd>{{ dataFormatter(item.name) }}</dd>
+                  </dl>
+                  <dl>
+                    <!-- Type -->
+                    <dt>{{ $t('pageEventLogs.table.type') }}:</dt>
+                    <dd>{{ dataFormatter(item.type) }}</dd>
+                  </dl>
+                </b-col>
+                <b-col>
+                  <dl>
+                    <!-- Modified date -->
+                    <dt>{{ $t('pageEventLogs.table.modifiedDate') }}:</dt>
+                    <dd v-if="item.modifiedDate">
+                      {{ item.modifiedDate | formatDate }}
+                      {{ item.modifiedDate | formatTime }}
+                    </dd>
+                    <dd v-else>--</dd>
+                  </dl>
+                </b-col>
+                <b-col class="text-nowrap">
+                  <b-button
+                    class="btn btn-secondary float-right"
+                    :href="item.additionalDataUri"
+                    target="_blank"
+                  >
+                    <icon-download />{{ $t('pageEventLogs.additionalDataUri') }}
+                  </b-button>
+                </b-col>
+              </b-row>
+            </b-container>
+          </template>
+
+          <!-- Severity column -->
+          <template #cell(severity)="{ value }">
+            <status-icon v-if="value" :status="statusIcon(value)" />
+            {{ value }}
+          </template>
+          <!-- Date column -->
+          <template #cell(date)="{ value }">
+            <p class="mb-0">{{ value | formatDate }}</p>
+            <p class="mb-0">{{ value | formatTime }}</p>
+          </template>
+
+          <!-- Status column -->
+          <template #cell(status)="row">
+            <b-form-checkbox
+              v-model="row.item.status"
+              name="switch"
+              switch
+              @change="changelogStatus(row.item)"
+            >
+              <span v-if="row.item.status">
+                {{ $t('pageEventLogs.resolved') }}
+              </span>
+              <span v-else> {{ $t('pageEventLogs.unresolved') }} </span>
+            </b-form-checkbox>
+          </template>
+          <template #cell(filterByStatus)="{ value }">
+            {{ value }}
+          </template>
+
+          <!-- Actions column -->
+          <template #cell(actions)="row">
+            <table-row-action
+              v-for="(action, index) in row.item.actions"
+              :key="index"
+              :value="action.value"
+              :title="action.title"
+              :row-data="row.item"
+              :export-name="exportFileNameByDate('export')"
+              :data-test-id="`eventLogs-button-deleteRow-${row.index}`"
+              @click-table-action="onTableRowAction($event, row.item)"
+            >
+              <template #icon>
+                <icon-export v-if="action.value === 'export'" />
+                <icon-trashcan v-if="action.value === 'delete'" />
+              </template>
+            </table-row-action>
+          </template>
+        </b-table>
+      </b-col>
+    </b-row>
+
+    <!-- Table pagination -->
+    <b-row>
+      <b-col sm="6">
+        <b-form-group
+          class="table-pagination-select"
+          :label="$t('global.table.itemsPerPage')"
+          label-for="pagination-items-per-page"
+        >
+          <b-form-select
+            id="pagination-items-per-page"
+            v-model="perPage"
+            :options="itemsPerPageOptions"
+          />
+        </b-form-group>
+      </b-col>
+      <b-col sm="6">
+        <b-pagination
+          v-model="currentPage"
+          first-number
+          last-number
+          :per-page="perPage"
+          :total-rows="getTotalRowCount(filteredRows)"
+          aria-controls="table-event-logs"
+        />
+      </b-col>
+    </b-row>
+  </b-container>
+</template>
+
+<script>
+import IconDelete from '@carbon/icons-vue/es/trash-can/20';
+import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
+import IconExport from '@carbon/icons-vue/es/document--export/20';
+import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
+import IconDownload from '@carbon/icons-vue/es/download/20';
+import { omit } from 'lodash';
+
+import PageTitle from '@/components/Global/PageTitle';
+import StatusIcon from '@/components/Global/StatusIcon';
+import Search from '@/components/Global/Search';
+import TableCellCount from '@/components/Global/TableCellCount';
+import TableDateFilter from '@/components/Global/TableDateFilter';
+import TableFilter from '@/components/Global/TableFilter';
+import TableRowAction from '@/components/Global/TableRowAction';
+import TableToolbar from '@/components/Global/TableToolbar';
+import TableToolbarExport from '@/components/Global/TableToolbarExport';
+
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
+import BVPaginationMixin, {
+  currentPage,
+  perPage,
+  itemsPerPageOptions,
+} from '@/components/Mixins/BVPaginationMixin';
+import BVTableSelectableMixin, {
+  selectedRows,
+  tableHeaderCheckboxModel,
+  tableHeaderCheckboxIndeterminate,
+} from '@/components/Mixins/BVTableSelectableMixin';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import TableSortMixin from '@/components/Mixins/TableSortMixin';
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+import SearchFilterMixin, {
+  searchFilter,
+} from '@/components/Mixins/SearchFilterMixin';
+
+export default {
+  components: {
+    IconDelete,
+    IconExport,
+    IconTrashcan,
+    IconChevron,
+    IconDownload,
+    PageTitle,
+    Search,
+    StatusIcon,
+    TableCellCount,
+    TableFilter,
+    TableRowAction,
+    TableToolbar,
+    TableToolbarExport,
+    TableDateFilter,
+  },
+  mixins: [
+    BVPaginationMixin,
+    BVTableSelectableMixin,
+    BVToastMixin,
+    LoadingBarMixin,
+    TableFilterMixin,
+    DataFormatterMixin,
+    TableSortMixin,
+    TableRowExpandMixin,
+    SearchFilterMixin,
+  ],
+  beforeRouteLeave(to, from, next) {
+    // Hide loader if the user navigates to another page
+    // before request is fulfilled.
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+        },
+        {
+          key: 'checkbox',
+          sortable: false,
+        },
+        {
+          key: 'id',
+          label: this.$t('pageEventLogs.table.id'),
+          sortable: true,
+        },
+        {
+          key: 'severity',
+          label: this.$t('pageEventLogs.table.severity'),
+          sortable: true,
+          tdClass: 'text-nowrap',
+        },
+        {
+          key: 'date',
+          label: this.$t('pageEventLogs.table.date'),
+          sortable: true,
+          tdClass: 'text-nowrap',
+        },
+        {
+          key: 'description',
+          label: this.$t('pageEventLogs.table.description'),
+          tdClass: 'text-break',
+        },
+        {
+          key: 'status',
+          label: this.$t('pageEventLogs.table.status'),
+        },
+        {
+          key: 'actions',
+          sortable: false,
+          label: '',
+          tdClass: 'text-right text-nowrap',
+        },
+      ],
+      tableFilters: [
+        {
+          key: 'severity',
+          label: this.$t('pageEventLogs.table.severity'),
+          values: ['OK', 'Warning', 'Critical'],
+        },
+        {
+          key: 'filterByStatus',
+          label: this.$t('pageEventLogs.table.status'),
+          values: ['Resolved', 'Unresolved'],
+        },
+      ],
+      expandRowLabel,
+      activeFilters: [],
+      batchActions: [
+        {
+          value: 'delete',
+          label: this.$t('global.action.delete'),
+        },
+      ],
+      currentPage: currentPage,
+      filterStartDate: null,
+      filterEndDate: null,
+      itemsPerPageOptions: itemsPerPageOptions,
+      perPage: perPage,
+      searchFilter: searchFilter,
+      searchTotalFilteredRows: 0,
+      selectedRows: selectedRows,
+      tableHeaderCheckboxModel: tableHeaderCheckboxModel,
+      tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
+    };
+  },
+  computed: {
+    href() {
+      return `data:text/json;charset=utf-8,${this.exportAllLogs()}`;
+    },
+    filteredRows() {
+      return this.searchFilter
+        ? this.searchTotalFilteredRows
+        : this.filteredLogs.length;
+    },
+    allLogs() {
+      return this.$store.getters['eventLog/allEvents'].map((event) => {
+        return {
+          ...event,
+          actions: [
+            {
+              value: 'export',
+              title: this.$t('global.action.export'),
+            },
+            {
+              value: 'delete',
+              title: this.$t('global.action.delete'),
+            },
+          ],
+        };
+      });
+    },
+    batchExportData() {
+      return this.selectedRows.map((row) => omit(row, 'actions'));
+    },
+    filteredLogsByDate() {
+      return this.getFilteredTableDataByDate(
+        this.allLogs,
+        this.filterStartDate,
+        this.filterEndDate
+      );
+    },
+    filteredLogs() {
+      return this.getFilteredTableData(
+        this.filteredLogsByDate,
+        this.activeFilters
+      );
+    },
+  },
+  created() {
+    this.startLoader();
+    this.$store.dispatch('eventLog/getEventLogData').finally(() => {
+      this.endLoader();
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    changelogStatus(row) {
+      this.$store
+        .dispatch('eventLog/updateEventLogStatus', {
+          uri: row.uri,
+          status: row.status,
+        })
+        .then((success) => {
+          this.successToast(success);
+        })
+        .catch(({ message }) => this.errorToast(message));
+    },
+    deleteAllLogs() {
+      this.$bvModal
+        .msgBoxConfirm(this.$t('pageEventLogs.modal.deleteAllMessage'), {
+          title: this.$t('pageEventLogs.modal.deleteAllTitle'),
+          okTitle: this.$t('global.action.delete'),
+          okVariant: 'danger',
+          cancelTitle: this.$t('global.action.cancel'),
+        })
+        .then((deleteConfirmed) => {
+          if (deleteConfirmed) {
+            this.$store
+              .dispatch('eventLog/deleteAllEventLogs', this.allLogs)
+              .then((message) => this.successToast(message))
+              .catch(({ message }) => this.errorToast(message));
+          }
+        });
+    },
+    deleteLogs(uris) {
+      this.$store
+        .dispatch('eventLog/deleteEventLogs', uris)
+        .then((messages) => {
+          messages.forEach(({ type, message }) => {
+            if (type === 'success') {
+              this.successToast(message);
+            } else if (type === 'error') {
+              this.errorToast(message);
+            }
+          });
+        });
+    },
+    exportAllLogs() {
+      {
+        return this.$store.getters['eventLog/allEvents'].map((eventLogs) => {
+          const allEventLogsString = JSON.stringify(eventLogs);
+          return allEventLogsString;
+        });
+      }
+    },
+    onFilterChange({ activeFilters }) {
+      this.activeFilters = activeFilters;
+    },
+    onSortCompare(a, b, key) {
+      if (key === 'severity') {
+        return this.sortStatus(a, b, key);
+      }
+    },
+    onTableRowAction(action, { uri }) {
+      if (action === 'delete') {
+        this.$bvModal
+          .msgBoxConfirm(this.$tc('pageEventLogs.modal.deleteMessage'), {
+            title: this.$tc('pageEventLogs.modal.deleteTitle'),
+            okTitle: this.$t('global.action.delete'),
+            cancelTitle: this.$t('global.action.cancel'),
+          })
+          .then((deleteConfirmed) => {
+            if (deleteConfirmed) this.deleteLogs([uri]);
+          });
+      }
+    },
+    onBatchAction(action) {
+      if (action === 'delete') {
+        const uris = this.selectedRows.map((row) => row.uri);
+        this.$bvModal
+          .msgBoxConfirm(
+            this.$tc(
+              'pageEventLogs.modal.deleteMessage',
+              this.selectedRows.length
+            ),
+            {
+              title: this.$tc(
+                'pageEventLogs.modal.deleteTitle',
+                this.selectedRows.length
+              ),
+              okTitle: this.$t('global.action.delete'),
+              cancelTitle: this.$t('global.action.cancel'),
+            }
+          )
+          .then((deleteConfirmed) => {
+            if (deleteConfirmed) {
+              if (this.selectedRows.length === this.allLogs.length) {
+                this.$store
+                  .dispatch(
+                    'eventLog/deleteAllEventLogs',
+                    this.selectedRows.length
+                  )
+                  .then(() => {
+                    this.successToast(
+                      this.$tc('pageEventLogs.toast.successDelete', uris.length)
+                    );
+                  })
+                  .catch(({ message }) => this.errorToast(message));
+              } else {
+                this.deleteLogs(uris);
+              }
+            }
+          });
+      }
+    },
+    onChangeDateTimeFilter({ fromDate, toDate }) {
+      this.filterStartDate = fromDate;
+      this.filterEndDate = toDate;
+    },
+    onFiltered(filteredItems) {
+      this.searchTotalFilteredRows = filteredItems.length;
+    },
+    // Create export file name based on date
+    exportFileNameByDate(value) {
+      let date = new Date();
+      date =
+        date.toISOString().slice(0, 10) +
+        '_' +
+        date.toString().split(':').join('-').split(' ')[4];
+      let fileName;
+      if (value === 'export') {
+        fileName = 'event_log_';
+      } else {
+        fileName = 'all_event_logs_';
+      }
+      return fileName + date;
+    },
+    resolveLogs() {
+      this.$store
+        .dispatch('eventLog/resolveEventLogs', this.selectedRows)
+        .then((messages) => {
+          messages.forEach(({ type, message }) => {
+            if (type === 'success') {
+              this.successToast(message);
+            } else if (type === 'error') {
+              this.errorToast(message);
+            }
+          });
+        });
+    },
+    unresolveLogs() {
+      this.$store
+        .dispatch('eventLog/unresolveEventLogs', this.selectedRows)
+        .then((messages) => {
+          messages.forEach(({ type, message }) => {
+            if (type === 'success') {
+              this.successToast(message);
+            } else if (type === 'error') {
+              this.errorToast(message);
+            }
+          });
+        });
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Logs/EventLogs/index.js b/src/views/_sila/Logs/EventLogs/index.js
new file mode 100644
index 00000000..521efde4
--- /dev/null
+++ b/src/views/_sila/Logs/EventLogs/index.js
@@ -0,0 +1,2 @@
+import EventLogs from './EventLogs.vue';
+export default EventLogs;
diff --git a/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue b/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue
new file mode 100644
index 00000000..d116d2ed
--- /dev/null
+++ b/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue
@@ -0,0 +1,347 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+    <b-row class="align-items-start">
+      <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4">
+        <search
+          :placeholder="$t('pagePostCodeLogs.table.searchLogs')"
+          @change-search="onChangeSearchInput"
+          @clear-search="onClearSearchInput"
+        />
+        <div class="ml-sm-4">
+          <table-cell-count
+            :filtered-items-count="filteredRows"
+            :total-number-of-cells="allLogs.length"
+          ></table-cell-count>
+        </div>
+      </b-col>
+      <b-col sm="8" md="7" xl="6">
+        <table-date-filter @change="onChangeDateTimeFilter" />
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col xl="12" class="text-right">
+        <b-button
+          variant="primary"
+          :disabled="allLogs.length === 0"
+          :download="exportFileNameByDate()"
+          :href="href"
+        >
+          <icon-export /> {{ $t('pagePostCodeLogs.button.exportAll') }}
+        </b-button>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <table-toolbar
+          ref="toolbar"
+          :selected-items-count="selectedRows.length"
+          @clear-selected="clearSelectedRows($refs.table)"
+        >
+          <template #toolbar-buttons>
+            <table-toolbar-export
+              :data="batchExportData"
+              :file-name="exportFileNameByDate()"
+            />
+          </template>
+        </table-toolbar>
+        <b-table
+          id="table-post-code-logs"
+          ref="table"
+          responsive="md"
+          selectable
+          no-select-on-click
+          sort-icon-left
+          hover
+          no-sort-reset
+          sort-desc
+          show-empty
+          sort-by="id"
+          :fields="fields"
+          :items="filteredLogs"
+          :empty-text="$t('global.table.emptyMessage')"
+          :empty-filtered-text="$t('global.table.emptySearchMessage')"
+          :per-page="perPage"
+          :current-page="currentPage"
+          :filter="searchFilter"
+          :busy="isBusy"
+          @filtered="onFiltered"
+          @row-selected="onRowSelected($event, filteredLogs.length)"
+        >
+          <!-- Checkbox column -->
+          <template #head(checkbox)>
+            <b-form-checkbox
+              v-model="tableHeaderCheckboxModel"
+              data-test-id="postCode-checkbox-selectAll"
+              :indeterminate="tableHeaderCheckboxIndeterminate"
+              @change="onChangeHeaderCheckbox($refs.table)"
+            >
+              <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+            </b-form-checkbox>
+          </template>
+          <template #cell(checkbox)="row">
+            <b-form-checkbox
+              v-model="row.rowSelected"
+              :data-test-id="`postCode-checkbox-selectRow-${row.index}`"
+              @change="toggleSelectRow($refs.table, row.index)"
+            >
+              <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+            </b-form-checkbox>
+          </template>
+          <!-- Date column -->
+          <template #cell(date)="{ value }">
+            <p class="mb-0">{{ value | formatDate }}</p>
+            <p class="mb-0">{{ value | formatTime }}</p>
+          </template>
+
+          <!-- Actions column -->
+          <template #cell(actions)="row">
+            <table-row-action
+              v-for="(action, index) in row.item.actions"
+              :key="index"
+              :value="action.value"
+              :title="action.title"
+              :row-data="row.item"
+              :btn-icon-only="true"
+              :export-name="exportFileNameByDate(action.value)"
+              :download-location="row.item.uri"
+              :download-in-new-tab="true"
+              :show-button="false"
+            >
+              <template #icon>
+                <icon-export v-if="action.value === 'export'" />
+                <icon-download v-if="action.value === 'download'" />
+              </template>
+            </table-row-action>
+          </template>
+        </b-table>
+      </b-col>
+    </b-row>
+
+    <!-- Table pagination -->
+    <b-row>
+      <b-col sm="6">
+        <b-form-group
+          class="table-pagination-select"
+          :label="$t('global.table.itemsPerPage')"
+          label-for="pagination-items-per-page"
+        >
+          <b-form-select
+            id="pagination-items-per-page"
+            v-model="perPage"
+            :options="itemsPerPageOptions"
+          />
+        </b-form-group>
+      </b-col>
+      <b-col sm="6">
+        <b-pagination
+          v-model="currentPage"
+          first-number
+          last-number
+          :per-page="perPage"
+          :total-rows="getTotalRowCount(filteredRows)"
+          aria-controls="table-post-code-logs"
+        />
+      </b-col>
+    </b-row>
+  </b-container>
+</template>
+
+<script>
+import IconDownload from '@carbon/icons-vue/es/download/20';
+import IconExport from '@carbon/icons-vue/es/document--export/20';
+import { omit } from 'lodash';
+import PageTitle from '@/components/Global/PageTitle';
+import Search from '@/components/Global/Search';
+import TableCellCount from '@/components/Global/TableCellCount';
+import TableDateFilter from '@/components/Global/TableDateFilter';
+import TableRowAction from '@/components/Global/TableRowAction';
+import TableToolbar from '@/components/Global/TableToolbar';
+import TableToolbarExport from '@/components/Global/TableToolbarExport';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
+import BVPaginationMixin, {
+  currentPage,
+  perPage,
+  itemsPerPageOptions,
+} from '@/components/Mixins/BVPaginationMixin';
+import BVTableSelectableMixin, {
+  selectedRows,
+  tableHeaderCheckboxModel,
+  tableHeaderCheckboxIndeterminate,
+} from '@/components/Mixins/BVTableSelectableMixin';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import TableSortMixin from '@/components/Mixins/TableSortMixin';
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+import SearchFilterMixin, {
+  searchFilter,
+} from '@/components/Mixins/SearchFilterMixin';
+
+export default {
+  components: {
+    IconExport,
+    IconDownload,
+    PageTitle,
+    Search,
+    TableCellCount,
+    TableRowAction,
+    TableToolbar,
+    TableToolbarExport,
+    TableDateFilter,
+  },
+  mixins: [
+    BVPaginationMixin,
+    BVTableSelectableMixin,
+    BVToastMixin,
+    LoadingBarMixin,
+    TableFilterMixin,
+    TableSortMixin,
+    TableRowExpandMixin,
+    SearchFilterMixin,
+  ],
+  beforeRouteLeave(to, from, next) {
+    // Hide loader if the user navigates to another page
+    // before request is fulfilled.
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'checkbox',
+          sortable: false,
+        },
+        {
+          key: 'date',
+          label: this.$t('pagePostCodeLogs.table.created'),
+          sortable: true,
+        },
+        {
+          key: 'timeStampOffset',
+          label: this.$t('pagePostCodeLogs.table.timeStampOffset'),
+        },
+        {
+          key: 'bootCount',
+          label: this.$t('pagePostCodeLogs.table.bootCount'),
+        },
+        {
+          key: 'postCode',
+          label: this.$t('pagePostCodeLogs.table.postCode'),
+        },
+        {
+          key: 'actions',
+          label: '',
+          tdClass: 'text-right text-nowrap',
+        },
+      ],
+      expandRowLabel,
+      activeFilters: [],
+      currentPage: currentPage,
+      filterStartDate: null,
+      filterEndDate: null,
+      itemsPerPageOptions: itemsPerPageOptions,
+      perPage: perPage,
+      searchFilter: searchFilter,
+      searchTotalFilteredRows: 0,
+      selectedRows: selectedRows,
+      tableHeaderCheckboxModel: tableHeaderCheckboxModel,
+      tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
+    };
+  },
+  computed: {
+    href() {
+      return `data:text/json;charset=utf-8,${this.exportAllLogsString()}`;
+    },
+    filteredRows() {
+      return this.searchFilter
+        ? this.searchTotalFilteredRows
+        : this.filteredLogs.length;
+    },
+    allLogs() {
+      return this.$store.getters['postCodeLogs/allPostCodes'].map(
+        (postCodes) => {
+          return {
+            ...postCodes,
+            actions: [
+              {
+                value: 'export',
+                title: this.$t('pagePostCodeLogs.action.exportLogs'),
+              },
+              {
+                value: 'download',
+                title: this.$t('pagePostCodeLogs.action.downloadDetails'),
+              },
+            ],
+          };
+        }
+      );
+    },
+    batchExportData() {
+      return this.selectedRows.map((row) => omit(row, 'actions'));
+    },
+    filteredLogsByDate() {
+      return this.getFilteredTableDataByDate(
+        this.allLogs,
+        this.filterStartDate,
+        this.filterEndDate
+      );
+    },
+    filteredLogs() {
+      return this.getFilteredTableData(
+        this.filteredLogsByDate,
+        this.activeFilters
+      );
+    },
+  },
+  created() {
+    this.startLoader();
+    this.$store.dispatch('postCodeLogs/getPostCodesLogData').finally(() => {
+      this.endLoader();
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    exportAllLogsString() {
+      {
+        return this.$store.getters['postCodeLogs/allPostCodes'].map(
+          (postCodes) => {
+            const allLogsString = JSON.stringify(postCodes);
+            return allLogsString;
+          }
+        );
+      }
+    },
+    onFilterChange({ activeFilters }) {
+      this.activeFilters = activeFilters;
+    },
+    onChangeDateTimeFilter({ fromDate, toDate }) {
+      this.filterStartDate = fromDate;
+      this.filterEndDate = toDate;
+    },
+    onFiltered(filteredItems) {
+      this.searchTotalFilteredRows = filteredItems.length;
+    },
+    // Create export file name based on date and action
+    exportFileNameByDate(value) {
+      let date = new Date();
+      date =
+        date.toISOString().slice(0, 10) +
+        '_' +
+        date.toString().split(':').join('-').split(' ')[4];
+      let fileName;
+      if (value === 'download') {
+        fileName = this.$t('pagePostCodeLogs.downloadFilePrefix');
+      } else if (value === 'export') {
+        fileName = this.$t('pagePostCodeLogs.exportFilePrefix');
+      } else {
+        fileName = this.$t('pagePostCodeLogs.allExportFilePrefix');
+      }
+      return fileName + date;
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Logs/PostCodeLogs/index.js b/src/views/_sila/Logs/PostCodeLogs/index.js
new file mode 100644
index 00000000..ab591124
--- /dev/null
+++ b/src/views/_sila/Logs/PostCodeLogs/index.js
@@ -0,0 +1,2 @@
+import PostCodeLogs from './PostCodeLogs.vue';
+export default PostCodeLogs;
diff --git a/src/views/_sila/Operations/FactoryReset/FactoryReset.vue b/src/views/_sila/Operations/FactoryReset/FactoryReset.vue
new file mode 100644
index 00000000..897348fc
--- /dev/null
+++ b/src/views/_sila/Operations/FactoryReset/FactoryReset.vue
@@ -0,0 +1,117 @@
+<template>
+  <b-container fluid="xl">
+    <page-title :description="$t('pageFactoryReset.description')" />
+
+    <!-- Reset Form -->
+    <b-form id="factory-reset" @submit.prevent="onResetSubmit">
+      <b-row>
+        <b-col md="8">
+          <b-form-group :label="$t('pageFactoryReset.form.resetOptionsLabel')">
+            <b-form-radio-group
+              id="factory-reset-options"
+              v-model="resetOption"
+              stacked
+            >
+              <b-form-radio
+                class="mb-1"
+                value="resetBios"
+                aria-describedby="reset-bios"
+                data-test-id="factoryReset-radio-resetBios"
+              >
+                {{ $t('pageFactoryReset.form.resetBiosOptionLabel') }}
+              </b-form-radio>
+              <b-form-text id="reset-bios" class="ml-4 mb-3">
+                {{ $t('pageFactoryReset.form.resetBiosOptionHelperText') }}
+              </b-form-text>
+
+              <b-form-radio
+                class="mb-1"
+                value="resetToDefaults"
+                aria-describedby="reset-to-defaults"
+                data-test-id="factoryReset-radio-resetToDefaults"
+              >
+                {{ $t('pageFactoryReset.form.resetToDefaultsOptionLabel') }}
+              </b-form-radio>
+              <b-form-text id="reset-to-defaults" class="ml-4 mb-3">
+                {{
+                  $t('pageFactoryReset.form.resetToDefaultsOptionHelperText')
+                }}
+              </b-form-text>
+            </b-form-radio-group>
+          </b-form-group>
+          <b-button
+            type="submit"
+            variant="primary"
+            data-test-id="factoryReset-button-submit"
+          >
+            {{ $t('global.action.reset') }}
+          </b-button>
+        </b-col>
+      </b-row>
+    </b-form>
+
+    <!-- Modals -->
+    <modal-reset :reset-type="resetOption" @okConfirm="onOkConfirm" />
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import ModalReset from './FactoryResetModal';
+
+export default {
+  name: 'FactoryReset',
+  components: { PageTitle, ModalReset },
+  mixins: [LoadingBarMixin, BVToastMixin],
+  data() {
+    return {
+      resetOption: 'resetBios',
+    };
+  },
+  created() {
+    this.hideLoader();
+  },
+  methods: {
+    onResetSubmit() {
+      this.$bvModal.show('modal-reset');
+    },
+    onOkConfirm() {
+      if (this.resetOption == 'resetBios') {
+        this.onResetBiosConfirm();
+      } else {
+        this.onResetToDefaultsConfirm();
+      }
+    },
+    onResetBiosConfirm() {
+      this.$store
+        .dispatch('factoryReset/resetBios')
+        .then((title) => {
+          this.successToast('', {
+            title,
+          });
+        })
+        .catch(({ message }) => {
+          this.errorToast('', {
+            title: message,
+          });
+        });
+    },
+    onResetToDefaultsConfirm() {
+      this.$store
+        .dispatch('factoryReset/resetToDefaults')
+        .then((title) => {
+          this.successToast('', {
+            title,
+          });
+        })
+        .catch(({ message }) => {
+          this.errorToast('', {
+            title: message,
+          });
+        });
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Operations/FactoryReset/FactoryResetModal.vue b/src/views/_sila/Operations/FactoryReset/FactoryResetModal.vue
new file mode 100644
index 00000000..170bf284
--- /dev/null
+++ b/src/views/_sila/Operations/FactoryReset/FactoryResetModal.vue
@@ -0,0 +1,113 @@
+<template>
+  <b-modal
+    id="modal-reset"
+    ref="modal"
+    :title="$t(`pageFactoryReset.modal.${resetType}Title`)"
+    title-tag="h2"
+    @hidden="resetConfirm"
+  >
+    <p class="mb-2">
+      <strong>{{ $t(`pageFactoryReset.modal.${resetType}Header`) }}</strong>
+    </p>
+    <ul class="pl-3 mb-4">
+      <li
+        v-for="(item, index) in $t(
+          `pageFactoryReset.modal.${resetType}SettingsList`
+        )"
+        :key="index"
+        class="mt-1 mb-1"
+      >
+        {{ $t(item) }}
+      </li>
+    </ul>
+
+    <!-- Warning message -->
+    <template v-if="!isServerOff">
+      <p class="d-flex mb-2">
+        <status-icon status="danger" />
+        <span id="reset-to-default-warning" class="ml-1">
+          {{ $t(`pageFactoryReset.modal.resetWarningMessage`) }}
+        </span>
+      </p>
+      <b-form-checkbox
+        v-model="confirm"
+        aria-describedby="reset-to-default-warning"
+        @input="$v.confirm.$touch()"
+      >
+        {{ $t(`pageFactoryReset.modal.resetWarningCheckLabel`) }}
+      </b-form-checkbox>
+      <b-form-invalid-feedback
+        role="alert"
+        :state="getValidationState($v.confirm)"
+      >
+        {{ $t('global.form.fieldRequired') }}
+      </b-form-invalid-feedback>
+    </template>
+
+    <template #modal-footer="{ cancel }">
+      <b-button
+        variant="secondary"
+        data-test-id="factoryReset-button-cancel"
+        @click="cancel()"
+      >
+        {{ $t('global.action.cancel') }}
+      </b-button>
+      <b-button
+        type="sumbit"
+        variant="primary"
+        data-test-id="factoryReset-button-confirm"
+        @click="handleConfirm"
+      >
+        {{ $t(`pageFactoryReset.modal.${resetType}SubmitText`) }}
+      </b-button>
+    </template>
+  </b-modal>
+</template>
+<script>
+import StatusIcon from '@/components/Global/StatusIcon';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
+
+export default {
+  components: { StatusIcon },
+  mixins: [VuelidateMixin],
+  props: {
+    resetType: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      confirm: false,
+    };
+  },
+  computed: {
+    serverStatus() {
+      return this.$store.getters['global/serverStatus'];
+    },
+    isServerOff() {
+      return this.serverStatus === 'off' ? true : false;
+    },
+  },
+  validations: {
+    confirm: {
+      mustBeTrue: function (value) {
+        return this.isServerOff || value === true;
+      },
+    },
+  },
+  methods: {
+    handleConfirm() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.$emit('okConfirm');
+      this.$nextTick(() => this.$refs.modal.hide());
+      this.resetConfirm();
+    },
+    resetConfirm() {
+      this.confirm = false;
+      this.$v.$reset();
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Operations/FactoryReset/index.js b/src/views/_sila/Operations/FactoryReset/index.js
new file mode 100644
index 00000000..eae747e0
--- /dev/null
+++ b/src/views/_sila/Operations/FactoryReset/index.js
@@ -0,0 +1,2 @@
+import FactoryReset from './FactoryReset.vue';
+export default FactoryReset;
diff --git a/src/views/_sila/Operations/Firmware/Firmware.vue b/src/views/_sila/Operations/Firmware/Firmware.vue
new file mode 100644
index 00000000..a2acb9b0
--- /dev/null
+++ b/src/views/_sila/Operations/Firmware/Firmware.vue
@@ -0,0 +1,93 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+    <alerts-server-power
+      v-if="isServerPowerOffRequired"
+      :is-server-off="isServerOff"
+    />
+
+    <!-- Firmware cards -->
+    <b-row>
+      <b-col xl="10">
+        <!-- BMC Firmware -->
+        <bmc-cards :is-page-disabled="isPageDisabled" />
+
+        <!-- Host Firmware -->
+        <host-cards v-if="!isSingleFileUploadEnabled" />
+      </b-col>
+    </b-row>
+
+    <!-- Update firmware-->
+    <page-section
+      :section-title="$t('pageFirmware.sectionTitleUpdateFirmware')"
+    >
+      <b-row>
+        <b-col sm="8" md="6" xl="4">
+          <!-- Update form -->
+          <form-update
+            :is-server-off="isServerOff"
+            :is-page-disabled="isPageDisabled"
+          />
+        </b-col>
+      </b-row>
+    </page-section>
+  </b-container>
+</template>
+
+<script>
+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 LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
+
+export default {
+  name: 'FirmwareSingleImage',
+  components: {
+    AlertsServerPower,
+    BmcCards,
+    FormUpdate,
+    HostCards,
+    PageSection,
+    PageTitle,
+  },
+  mixins: [LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      loading,
+      isServerPowerOffRequired:
+        process.env.VUE_APP_SERVER_OFF_REQUIRED === 'true',
+    };
+  },
+  computed: {
+    serverStatus() {
+      return this.$store.getters['global/serverStatus'];
+    },
+    isServerOff() {
+      return this.serverStatus === 'off' ? true : false;
+    },
+    isSingleFileUploadEnabled() {
+      return this.$store.getters['firmware/isSingleFileUploadEnabled'];
+    },
+    isPageDisabled() {
+      if (this.isServerPowerOffRequired) {
+        return !this.isServerOff || this.loading || this.isOperationInProgress;
+      }
+      return this.loading || this.isOperationInProgress;
+    },
+  },
+  created() {
+    this.startLoader();
+    this.$store
+      .dispatch('firmware/getFirmwareInformation')
+      .finally(() => this.endLoader());
+  },
+};
+</script>
diff --git a/src/views/_sila/Operations/Firmware/FirmwareAlertServerPower.vue b/src/views/_sila/Operations/Firmware/FirmwareAlertServerPower.vue
new file mode 100644
index 00000000..24aa1d69
--- /dev/null
+++ b/src/views/_sila/Operations/Firmware/FirmwareAlertServerPower.vue
@@ -0,0 +1,50 @@
+<template>
+  <b-row>
+    <b-col xl="10">
+      <!-- Operation in progress alert -->
+      <alert v-if="isOperationInProgress" variant="info" class="mb-5">
+        <p>
+          {{ $t('pageFirmware.alert.operationInProgress') }}
+        </p>
+      </alert>
+      <!-- Power off server warning alert -->
+      <alert v-else-if="!isServerOff" variant="warning" class="mb-5">
+        <p class="mb-0">
+          {{ $t('pageFirmware.alert.serverMustBePoweredOffTo') }}
+        </p>
+        <ul class="m-0">
+          <li>
+            {{ $t('pageFirmware.alert.switchRunningAndBackupImages') }}
+          </li>
+          <li>
+            {{ $t('pageFirmware.alert.updateFirmware') }}
+          </li>
+        </ul>
+        <template #action>
+          <b-link to="/operations/server-power-operations">
+            {{ $t('pageFirmware.alert.viewServerPowerOperations') }}
+          </b-link>
+        </template>
+      </alert>
+    </b-col>
+  </b-row>
+</template>
+
+<script>
+import Alert from '@/components/Global/Alert';
+
+export default {
+  components: { Alert },
+  props: {
+    isServerOff: {
+      required: true,
+      type: Boolean,
+    },
+  },
+  computed: {
+    isOperationInProgress() {
+      return this.$store.getters['controls/isOperationInProgress'];
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Operations/Firmware/FirmwareCardsBmc.vue b/src/views/_sila/Operations/Firmware/FirmwareCardsBmc.vue
new file mode 100644
index 00000000..d79a8769
--- /dev/null
+++ b/src/views/_sila/Operations/Firmware/FirmwareCardsBmc.vue
@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <page-section :section-title="sectionTitle">
+      <b-card-group deck>
+        <!-- Running image -->
+        <b-card>
+          <template #header>
+            <p class="font-weight-bold m-0">
+              {{ $t('pageFirmware.cardTitleRunning') }}
+            </p>
+          </template>
+          <dl class="mb-0">
+            <dt>{{ $t('pageFirmware.cardBodyVersion') }}</dt>
+            <dd class="mb-0">{{ runningVersion }}</dd>
+          </dl>
+        </b-card>
+
+        <!-- Backup image -->
+        <b-card>
+          <template #header>
+            <p class="font-weight-bold m-0">
+              {{ $t('pageFirmware.cardTitleBackup') }}
+            </p>
+          </template>
+          <dl>
+            <dt>{{ $t('pageFirmware.cardBodyVersion') }}</dt>
+            <dd>
+              <status-icon v-if="showBackupImageStatus" status="danger" />
+              <span v-if="showBackupImageStatus" class="sr-only">
+                {{ backupStatus }}
+              </span>
+              {{ backupVersion }}
+            </dd>
+          </dl>
+          <b-btn
+            v-if="!switchToBackupImageDisabled"
+            v-b-modal.modal-switch-to-running
+            data-test-id="firmware-button-switchToRunning"
+            variant="link"
+            size="sm"
+            class="py-0 px-1 mt-2"
+            :disabled="isPageDisabled || !backup"
+          >
+            <icon-switch class="d-none d-sm-inline-block" />
+            {{ $t('pageFirmware.cardActionSwitchToRunning') }}
+          </b-btn>
+        </b-card>
+      </b-card-group>
+    </page-section>
+    <modal-switch-to-running :backup="backupVersion" @ok="switchToRunning" />
+  </div>
+</template>
+
+<script>
+import IconSwitch from '@carbon/icons-vue/es/arrows--horizontal/20';
+import PageSection from '@/components/Global/PageSection';
+import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+
+import ModalSwitchToRunning from './FirmwareModalSwitchToRunning';
+
+export default {
+  components: { IconSwitch, ModalSwitchToRunning, PageSection },
+  mixins: [BVToastMixin, LoadingBarMixin],
+  props: {
+    isPageDisabled: {
+      required: true,
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      loading,
+      switchToBackupImageDisabled:
+        process.env.VUE_APP_SWITCH_TO_BACKUP_IMAGE_DISABLED === 'true',
+    };
+  },
+  computed: {
+    isSingleFileUploadEnabled() {
+      return this.$store.getters['firmware/isSingleFileUploadEnabled'];
+    },
+    sectionTitle() {
+      if (this.isSingleFileUploadEnabled) {
+        return this.$t('pageFirmware.sectionTitleBmcCardsCombined');
+      }
+      return this.$t('pageFirmware.sectionTitleBmcCards');
+    },
+    running() {
+      return this.$store.getters['firmware/activeBmcFirmware'];
+    },
+    backup() {
+      return this.$store.getters['firmware/backupBmcFirmware'];
+    },
+    runningVersion() {
+      return this.running?.version || '--';
+    },
+    backupVersion() {
+      return this.backup?.version || '--';
+    },
+    backupStatus() {
+      return this.backup?.status || null;
+    },
+    showBackupImageStatus() {
+      return (
+        this.backupStatus === 'Critical' || this.backupStatus === 'Warning'
+      );
+    },
+  },
+  methods: {
+    switchToRunning() {
+      this.startLoader();
+      const timerId = setTimeout(() => {
+        this.endLoader();
+        this.infoToast(this.$t('pageFirmware.toast.verifySwitchMessage'), {
+          title: this.$t('pageFirmware.toast.verifySwitch'),
+          refreshAction: true,
+        });
+      }, 60000);
+
+      this.$store
+        .dispatch('firmware/switchBmcFirmwareAndReboot')
+        .then(() =>
+          this.infoToast(this.$t('pageFirmware.toast.rebootStartedMessage'), {
+            title: this.$t('pageFirmware.toast.rebootStarted'),
+          })
+        )
+        .catch(({ message }) => {
+          this.errorToast(message);
+          clearTimeout(timerId);
+          this.endLoader();
+        });
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Operations/Firmware/FirmwareCardsHost.vue b/src/views/_sila/Operations/Firmware/FirmwareCardsHost.vue
new file mode 100644
index 00000000..b4a8e90d
--- /dev/null
+++ b/src/views/_sila/Operations/Firmware/FirmwareCardsHost.vue
@@ -0,0 +1,73 @@
+<template>
+  <page-section :section-title="$t('pageFirmware.sectionTitleHostCards')">
+    <b-card-group deck>
+      <!-- Running image -->
+      <b-card>
+        <template #header>
+          <p class="font-weight-bold m-0">
+            {{ $t('pageFirmware.cardTitleRunning') }}
+          </p>
+        </template>
+        <dl class="mb-0">
+          <dt>{{ $t('pageFirmware.cardBodyVersion') }}</dt>
+          <dd class="mb-0">{{ runningVersion }}</dd>
+        </dl>
+      </b-card>
+
+      <!-- Backup image -->
+      <b-card>
+        <template #header>
+          <p class="font-weight-bold m-0">
+            {{ $t('pageFirmware.cardTitleBackup') }}
+          </p>
+        </template>
+        <dl class="mb-0">
+          <dt>{{ $t('pageFirmware.cardBodyVersion') }}</dt>
+          <dd class="mb-0">
+            <status-icon v-if="showBackupImageStatus" status="danger" />
+            <span v-if="showBackupImageStatus" class="sr-only">
+              {{ backupStatus }}
+            </span>
+            {{ backupVersion }}
+          </dd>
+        </dl>
+      </b-card>
+    </b-card-group>
+  </page-section>
+</template>
+
+<script>
+import PageSection from '@/components/Global/PageSection';
+
+export default {
+  components: { PageSection },
+  computed: {
+    running() {
+      return this.$store.getters['firmware/activeHostFirmware'];
+    },
+    backup() {
+      return this.$store.getters['firmware/backupHostFirmware'];
+    },
+    runningVersion() {
+      return this.running?.version || '--';
+    },
+    backupVersion() {
+      return this.backup?.version || '--';
+    },
+    backupStatus() {
+      return this.backup?.status || null;
+    },
+    showBackupImageStatus() {
+      return (
+        this.backupStatus === 'Critical' || this.backupStatus === 'Warning'
+      );
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.page-section {
+  margin-top: -$spacer * 1.5;
+}
+</style>
diff --git a/src/views/_sila/Operations/Firmware/FirmwareFormUpdate.vue b/src/views/_sila/Operations/Firmware/FirmwareFormUpdate.vue
new file mode 100644
index 00000000..ac4b23fc
--- /dev/null
+++ b/src/views/_sila/Operations/Firmware/FirmwareFormUpdate.vue
@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <div class="form-background p-3">
+      <b-form @submit.prevent="onSubmitUpload">
+        <b-form-group
+          v-if="isTftpUploadAvailable"
+          :label="$t('pageFirmware.form.updateFirmware.fileSource')"
+          :disabled="isPageDisabled"
+        >
+          <b-form-radio v-model="isWorkstationSelected" :value="true">
+            {{ $t('pageFirmware.form.updateFirmware.workstation') }}
+          </b-form-radio>
+          <b-form-radio v-model="isWorkstationSelected" :value="false">
+            {{ $t('pageFirmware.form.updateFirmware.tftpServer') }}
+          </b-form-radio>
+        </b-form-group>
+
+        <!-- Workstation Upload -->
+        <template v-if="isWorkstationSelected">
+          <b-form-group
+            :label="$t('pageFirmware.form.updateFirmware.imageFile')"
+            label-for="image-file"
+          >
+            <form-file
+              id="image-file"
+              :disabled="isPageDisabled"
+              :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.updateFirmware.fileAddress')"
+            label-for="tftp-address"
+          >
+            <b-form-input
+              id="tftp-address"
+              v-model="tftpFileAddress"
+              type="text"
+              :state="getValidationState($v.tftpFileAddress)"
+              :disabled="isPageDisabled"
+              @input="$v.tftpFileAddress.$touch()"
+            />
+            <b-form-invalid-feedback role="alert">
+              {{ $t('global.form.fieldRequired') }}
+            </b-form-invalid-feedback>
+          </b-form-group>
+        </template>
+        <b-btn
+          data-test-id="firmware-button-startUpdate"
+          type="submit"
+          variant="primary"
+          :disabled="isPageDisabled"
+        >
+          {{ $t('pageFirmware.form.updateFirmware.startUpdate') }}
+        </b-btn>
+      </b-form>
+    </div>
+
+    <!-- Modals -->
+    <modal-update-firmware @ok="updateFirmware" />
+  </div>
+</template>
+
+<script>
+import { requiredIf } from 'vuelidate/lib/validators';
+
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+
+import FormFile from '@/components/Global/FormFile';
+import ModalUpdateFirmware from './FirmwareModalUpdateFirmware';
+
+export default {
+  components: { FormFile, ModalUpdateFirmware },
+  mixins: [BVToastMixin, LoadingBarMixin, VuelidateMixin],
+  props: {
+    isPageDisabled: {
+      required: true,
+      type: Boolean,
+      default: false,
+    },
+    isServerOff: {
+      required: true,
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      loading,
+      isWorkstationSelected: true,
+      file: null,
+      tftpFileAddress: null,
+      isServerPowerOffRequired:
+        process.env.VUE_APP_SERVER_OFF_REQUIRED === 'true',
+    };
+  },
+  computed: {
+    isTftpUploadAvailable() {
+      return this.$store.getters['firmware/isTftpUploadAvailable'];
+    },
+  },
+  watch: {
+    isWorkstationSelected: function () {
+      this.$v.$reset();
+      this.file = null;
+      this.tftpFileAddress = null;
+    },
+  },
+  validations() {
+    return {
+      file: {
+        required: requiredIf(function () {
+          return this.isWorkstationSelected;
+        }),
+      },
+      tftpFileAddress: {
+        required: requiredIf(function () {
+          return !this.isWorkstationSelected;
+        }),
+      },
+    };
+  },
+  created() {
+    this.$store.dispatch('firmware/getUpdateServiceSettings');
+  },
+  methods: {
+    updateFirmware() {
+      this.startLoader();
+      const timerId = setTimeout(() => {
+        this.endLoader();
+        this.infoToast(this.$t('pageFirmware.toast.verifyUpdateMessage'), {
+          title: this.$t('pageFirmware.toast.verifyUpdate'),
+          refreshAction: true,
+        });
+      }, 360000);
+      this.infoToast(this.$t('pageFirmware.toast.updateStartedMessage'), {
+        title: this.$t('pageFirmware.toast.updateStarted'),
+        timestamp: true,
+      });
+      if (this.isWorkstationSelected) {
+        this.dispatchWorkstationUpload(timerId);
+      } else {
+        this.dispatchTftpUpload(timerId);
+      }
+    },
+    dispatchWorkstationUpload(timerId) {
+      this.$store
+        .dispatch('firmware/uploadFirmware', this.file)
+        .catch(({ message }) => {
+          this.endLoader();
+          this.errorToast(message);
+          clearTimeout(timerId);
+        });
+    },
+    dispatchTftpUpload(timerId) {
+      this.$store
+        .dispatch('firmware/uploadFirmwareTFTP', this.tftpFileAddress)
+        .catch(({ message }) => {
+          this.endLoader();
+          this.errorToast(message);
+          clearTimeout(timerId);
+        });
+    },
+    onSubmitUpload() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.$bvModal.show('modal-update-firmware');
+    },
+    onFileUpload(file) {
+      this.file = file;
+      this.$v.file.$touch();
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Operations/Firmware/FirmwareModalSwitchToRunning.vue b/src/views/_sila/Operations/Firmware/FirmwareModalSwitchToRunning.vue
new file mode 100644
index 00000000..dc4a4973
--- /dev/null
+++ b/src/views/_sila/Operations/Firmware/FirmwareModalSwitchToRunning.vue
@@ -0,0 +1,31 @@
+<template>
+  <b-modal
+    id="modal-switch-to-running"
+    :ok-title="$t('pageFirmware.modal.switchImages')"
+    :cancel-title="$t('global.action.cancel')"
+    :title="$t('pageFirmware.modal.switchRunningImage')"
+    @ok="$emit('ok')"
+  >
+    <p>
+      {{ $t('pageFirmware.modal.switchRunningImageInfo') }}
+    </p>
+    <p class="m-0">
+      {{
+        $t('pageFirmware.modal.switchRunningImageInfo2', {
+          backup,
+        })
+      }}
+    </p>
+  </b-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    backup: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Operations/Firmware/FirmwareModalUpdateFirmware.vue b/src/views/_sila/Operations/Firmware/FirmwareModalUpdateFirmware.vue
new file mode 100644
index 00000000..18355217
--- /dev/null
+++ b/src/views/_sila/Operations/Firmware/FirmwareModalUpdateFirmware.vue
@@ -0,0 +1,44 @@
+<template>
+  <b-modal
+    id="modal-update-firmware"
+    :title="$t('pageFirmware.sectionTitleUpdateFirmware')"
+    :ok-title="$t('pageFirmware.form.updateFirmware.startUpdate')"
+    :cancel-title="$t('global.action.cancel')"
+    @ok="$emit('ok')"
+  >
+    <template v-if="isSingleFileUploadEnabled">
+      <p>
+        {{ $t('pageFirmware.modal.updateFirmwareInfo') }}
+      </p>
+      <p>
+        {{
+          $t('pageFirmware.modal.updateFirmwareInfo2', {
+            running: runningBmcVersion,
+          })
+        }}
+      </p>
+      <p class="m-0">
+        {{ $t('pageFirmware.modal.updateFirmwareInfo3') }}
+      </p>
+    </template>
+    <template v-else>
+      {{ $t('pageFirmware.modal.updateFirmwareInfoDefault') }}
+    </template>
+  </b-modal>
+</template>
+
+<script>
+export default {
+  computed: {
+    runningBmc() {
+      return this.$store.getters['firmware/activeBmcFirmware'];
+    },
+    runningBmcVersion() {
+      return this.runningBmc?.version || '--';
+    },
+    isSingleFileUploadEnabled() {
+      return this.$store.getters['firmware/isSingleFileUploadEnabled'];
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Operations/Firmware/index.js b/src/views/_sila/Operations/Firmware/index.js
new file mode 100644
index 00000000..ad15cc03
--- /dev/null
+++ b/src/views/_sila/Operations/Firmware/index.js
@@ -0,0 +1,2 @@
+import Firmware from './Firmware.vue';
+export default Firmware;
diff --git a/src/views/_sila/Operations/KeyClear/KeyClear.vue b/src/views/_sila/Operations/KeyClear/KeyClear.vue
new file mode 100644
index 00000000..2524da10
--- /dev/null
+++ b/src/views/_sila/Operations/KeyClear/KeyClear.vue
@@ -0,0 +1,106 @@
+<template>
+  <b-container fluid="xl">
+    <page-title :description="$t('pageKeyClear.description')" />
+    <b-row>
+      <b-col md="8" xl="6">
+        <alert variant="info" class="mb-4">
+          <div class="font-weight-bold">
+            {{ $t('pageKeyClear.alert.title') }}
+          </div>
+          <div>
+            {{ $t('pageKeyClear.alert.description') }}
+          </div>
+        </alert>
+      </b-col>
+    </b-row>
+    <!-- Reset Form -->
+    <b-form id="key-clear" @submit.prevent="onKeyClearSubmit(keyOption)">
+      <b-row>
+        <b-col md="8">
+          <b-form-group :label="$t('pageKeyClear.form.keyClearOptionsLabel')">
+            <b-form-radio-group
+              id="key-clear-options"
+              v-model="keyOption"
+              stacked
+            >
+              <b-form-radio class="mb-1" value="NONE">
+                {{ $t('pageKeyClear.form.none') }}
+              </b-form-radio>
+              <b-form-text id="key-clear-not-requested" class="ml-4 mb-3">
+                {{ $t('pageKeyClear.form.keyClearNotRequested') }}
+              </b-form-text>
+              <b-form-radio class="mb-1" value="ALL">
+                {{ $t('pageKeyClear.form.clearAllLabel') }}
+              </b-form-radio>
+              <b-form-text id="clear-all" class="ml-4 mb-3">
+                {{ $t('pageKeyClear.form.clearAllHeperText') }}
+              </b-form-text>
+              <b-form-radio class="mb-1" value="POWERVM_SYSKEY">
+                {{ $t('pageKeyClear.form.clearHypervisorSystemKeyLabel') }}
+              </b-form-radio>
+              <b-form-text id="clear-hypervisor-key" class="ml-4 mb-3">
+                {{ $t('pageKeyClear.form.clearHypervisorSystemKeyHelperText') }}
+              </b-form-text>
+              <template v-if="username == 'service'">
+                <b-form-radio class="mb-1" value="MFG_ALL">
+                  {{ $t('pageKeyClear.form.clearAllSetGenesisIPL') }}
+                </b-form-radio>
+                <b-form-radio class="mb-1" value="MFG">
+                  {{ $t('pageKeyClear.form.setFactoryDefault') }}
+                </b-form-radio>
+              </template>
+            </b-form-radio-group>
+          </b-form-group>
+          <b-button
+            type="submit"
+            variant="primary"
+            data-test-id="keyClear-button-submit"
+          >
+            {{ $t('pageKeyClear.form.clear') }}
+          </b-button>
+        </b-col>
+      </b-row>
+    </b-form>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import Alert from '@/components/Global/Alert';
+
+export default {
+  name: 'KeyClear',
+  components: { PageTitle, Alert },
+  mixins: [LoadingBarMixin, BVToastMixin],
+  data() {
+    return {
+      keyOption: 'NONE',
+      username: this.$store.getters['global/username'],
+    };
+  },
+  created() {
+    this.hideLoader();
+  },
+  methods: {
+    onKeyClearSubmit(valueSelected) {
+      this.$bvModal
+        .msgBoxConfirm(this.$t('pageKeyClear.modal.clearAllMessage'), {
+          title: this.$t('pageKeyClear.modal.clearAllTitle'),
+          okTitle: this.$t('pageKeyClear.modal.clear'),
+          okVariant: 'danger',
+          cancelTitle: this.$t('global.action.cancel'),
+        })
+        .then((clearConfirmed) => {
+          if (clearConfirmed) {
+            this.$store
+              .dispatch('keyClear/clearEncryptionKeys', valueSelected)
+              .then((message) => this.successToast(message))
+              .catch(({ message }) => this.errorToast(message));
+          }
+        });
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Operations/KeyClear/index.js b/src/views/_sila/Operations/KeyClear/index.js
new file mode 100644
index 00000000..56de8c4e
--- /dev/null
+++ b/src/views/_sila/Operations/KeyClear/index.js
@@ -0,0 +1,2 @@
+import KeyClear from './KeyClear.vue';
+export default KeyClear;
diff --git a/src/views/_sila/Operations/Kvm/Kvm.vue b/src/views/_sila/Operations/Kvm/Kvm.vue
new file mode 100644
index 00000000..1a41baaf
--- /dev/null
+++ b/src/views/_sila/Operations/Kvm/Kvm.vue
@@ -0,0 +1,24 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+    <div class="terminal-container">
+      <kvm-console :is-full-window="false" />
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import KvmConsole from './KvmConsole';
+
+export default {
+  name: 'Kvm',
+  components: { PageTitle, KvmConsole },
+};
+</script>
+
+<style scoped>
+.terminal-container {
+  width: 100%;
+}
+</style>
diff --git a/src/views/_sila/Operations/Kvm/KvmConsole.vue b/src/views/_sila/Operations/Kvm/KvmConsole.vue
new file mode 100644
index 00000000..c028a9fc
--- /dev/null
+++ b/src/views/_sila/Operations/Kvm/KvmConsole.vue
@@ -0,0 +1,170 @@
+<template>
+  <div :class="marginClass">
+    <div ref="toolbar" class="kvm-toolbar">
+      <b-row class="d-flex">
+        <b-col class="d-flex flex-column justify-content-end" cols="4">
+          <dl class="mb-2" sm="2" md="2">
+            <dt class="d-inline font-weight-bold mr-1">
+              {{ $t('pageKvm.status') }}:
+            </dt>
+            <dd class="d-inline">
+              <status-icon :status="serverStatusIcon" />
+              <span class="d-none d-md-inline"> {{ serverStatus }}</span>
+            </dd>
+          </dl>
+        </b-col>
+
+        <b-col class="d-flex justify-content-end pr-1">
+          <b-button
+            v-if="isConnected"
+            variant="link"
+            type="button"
+            @click="sendCtrlAltDel"
+          >
+            <icon-arrow-down />
+            {{ $t('pageKvm.buttonCtrlAltDelete') }}
+          </b-button>
+          <b-button
+            v-if="!isFullWindow"
+            variant="link"
+            type="button"
+            @click="openConsoleWindow()"
+          >
+            <icon-launch />
+            {{ $t('pageKvm.openNewTab') }}
+          </b-button>
+        </b-col>
+      </b-row>
+    </div>
+    <div id="terminal-kvm" ref="panel" :class="terminalClass"></div>
+  </div>
+</template>
+
+<script>
+import RFB from '@novnc/novnc/core/rfb';
+import StatusIcon from '@/components/Global/StatusIcon';
+import IconLaunch from '@carbon/icons-vue/es/launch/20';
+import IconArrowDown from '@carbon/icons-vue/es/arrow--down/16';
+import { throttle } from 'lodash';
+
+const Connecting = 0;
+const Connected = 1;
+const Disconnected = 2;
+
+export default {
+  name: 'KvmConsole',
+  components: { StatusIcon, IconLaunch, IconArrowDown },
+  props: {
+    isFullWindow: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      rfb: null,
+      isConnected: false,
+      terminalClass: this.isFullWindow ? 'full-window' : '',
+      marginClass: this.isFullWindow ? 'margin-left-full-window' : '',
+      status: Connecting,
+      convasRef: null,
+      resizeKvmWindow: null,
+    };
+  },
+  computed: {
+    serverStatusIcon() {
+      if (this.status === Connected) {
+        return 'success';
+      } else if (this.status === Disconnected) {
+        return 'danger';
+      }
+      return 'secondary';
+    },
+    serverStatus() {
+      if (this.status === Connected) {
+        return this.$t('pageKvm.connected');
+      } else if (this.status === Disconnected) {
+        return this.$t('pageKvm.disconnected');
+      }
+      return this.$t('pageKvm.connecting');
+    },
+  },
+  mounted() {
+    this.openTerminal();
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeKvmWindow);
+    this.closeTerminal();
+  },
+  methods: {
+    sendCtrlAltDel() {
+      this.rfb.sendCtrlAltDel();
+    },
+    closeTerminal() {
+      this.rfb.disconnect();
+      this.rfb = null;
+    },
+    openTerminal() {
+      const token = this.$store.getters['authentication/token'];
+      this.rfb = new RFB(
+        this.$refs.panel,
+        `wss://${window.location.host}/kvm/0`,
+        { wsProtocols: [token] }
+      );
+
+      this.rfb.scaleViewport = true;
+      this.rfb.clipViewport = true;
+      const that = this;
+
+      this.resizeKvmWindow = throttle(() => {
+        setTimeout(that.setWidthToolbar, 0);
+      }, 1000);
+      window.addEventListener('resize', this.resizeKvmWindow);
+
+      this.rfb.addEventListener('connect', () => {
+        that.isConnected = true;
+        that.status = Connected;
+        that.setWidthToolbar();
+      });
+
+      this.rfb.addEventListener('disconnect', () => {
+        this.isConnected = false;
+        that.status = Disconnected;
+      });
+    },
+    setWidthToolbar() {
+      if (
+        this.$refs.panel.children &&
+        this.$refs.panel.children.length > 0 &&
+        this.$refs.panel.children[0].children.length > 0
+      ) {
+        this.$refs.toolbar.style.width =
+          this.$refs.panel.children[0].children[0].clientWidth - 10 + 'px';
+      }
+    },
+    openConsoleWindow() {
+      window.open(
+        '#/console/kvm',
+        '_blank',
+        'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=700,height=550'
+      );
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.button-ctrl-alt-delete {
+  float: right;
+}
+
+.kvm-status {
+  padding-top: $spacer / 2;
+  padding-left: $spacer / 4;
+  display: inline-block;
+}
+
+.margin-left-full-window {
+  margin-left: 5px;
+}
+</style>
diff --git a/src/views/_sila/Operations/Kvm/index.js b/src/views/_sila/Operations/Kvm/index.js
new file mode 100644
index 00000000..ac4f9667
--- /dev/null
+++ b/src/views/_sila/Operations/Kvm/index.js
@@ -0,0 +1,2 @@
+import Kvm from './Kvm.vue';
+export default Kvm;
diff --git a/src/views/_sila/Operations/RebootBmc/RebootBmc.vue b/src/views/_sila/Operations/RebootBmc/RebootBmc.vue
new file mode 100644
index 00000000..900619cd
--- /dev/null
+++ b/src/views/_sila/Operations/RebootBmc/RebootBmc.vue
@@ -0,0 +1,83 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+    <b-row>
+      <b-col md="8" lg="8" xl="6">
+        <page-section>
+          <b-row>
+            <b-col>
+              <dl>
+                <dt>
+                  {{ $t('pageRebootBmc.lastReboot') }}
+                </dt>
+                <dd v-if="lastBmcRebootTime">
+                  {{ lastBmcRebootTime | formatDate }}
+                  {{ lastBmcRebootTime | formatTime }}
+                </dd>
+                <dd v-else>--</dd>
+              </dl>
+            </b-col>
+          </b-row>
+          {{ $t('pageRebootBmc.rebootInformation') }}
+          <b-button
+            variant="primary"
+            class="d-block mt-5"
+            data-test-id="rebootBmc-button-reboot"
+            @click="onClick"
+          >
+            {{ $t('pageRebootBmc.rebootBmc') }}
+          </b-button>
+        </page-section>
+      </b-col>
+    </b-row>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+
+export default {
+  name: 'RebootBmc',
+  components: { PageTitle, PageSection },
+  mixins: [BVToastMixin, LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
+  computed: {
+    lastBmcRebootTime() {
+      return this.$store.getters['controls/lastBmcRebootTime'];
+    },
+  },
+  created() {
+    this.startLoader();
+    this.$store
+      .dispatch('controls/getLastBmcRebootTime')
+      .finally(() => this.endLoader());
+  },
+  methods: {
+    onClick() {
+      this.$bvModal
+        .msgBoxConfirm(this.$t('pageRebootBmc.modal.confirmMessage'), {
+          title: this.$t('pageRebootBmc.modal.confirmTitle'),
+          okTitle: this.$t('global.action.confirm'),
+          cancelTitle: this.$t('global.action.cancel'),
+        })
+        .then((confirmed) => {
+          if (confirmed) this.rebootBmc();
+        });
+    },
+    rebootBmc() {
+      this.$store
+        .dispatch('controls/rebootBmc')
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message));
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/_sila/Operations/RebootBmc/index.js b/src/views/_sila/Operations/RebootBmc/index.js
new file mode 100644
index 00000000..ac31417e
--- /dev/null
+++ b/src/views/_sila/Operations/RebootBmc/index.js
@@ -0,0 +1,2 @@
+import RebootBmc from './RebootBmc.vue';
+export default RebootBmc;
diff --git a/src/views/_sila/Operations/SerialOverLan/SerialOverLan.vue b/src/views/_sila/Operations/SerialOverLan/SerialOverLan.vue
new file mode 100644
index 00000000..48a68345
--- /dev/null
+++ b/src/views/_sila/Operations/SerialOverLan/SerialOverLan.vue
@@ -0,0 +1,24 @@
+<template>
+  <b-container fluid="xl">
+    <page-title class="mb-4" :description="$t('pageSerialOverLan.subTitle')" />
+
+    <page-section class="mb-0">
+      <serial-over-lan-console :is-full-window="false" />
+    </page-section>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import SerialOverLanConsole from './SerialOverLanConsole';
+
+export default {
+  name: 'SerialOverLan',
+  components: {
+    PageSection,
+    PageTitle,
+    SerialOverLanConsole,
+  },
+};
+</script>
diff --git a/src/views/_sila/Operations/SerialOverLan/SerialOverLanConsole.vue b/src/views/_sila/Operations/SerialOverLan/SerialOverLanConsole.vue
new file mode 100644
index 00000000..694083fd
--- /dev/null
+++ b/src/views/_sila/Operations/SerialOverLan/SerialOverLanConsole.vue
@@ -0,0 +1,172 @@
+<template>
+  <div :class="isFullWindow ? 'full-window-container' : 'terminal-container'">
+    <b-row class="d-flex">
+      <b-col sm="4" md="6">
+        <alert
+          v-if="serverStatus === 'on' ? false : true"
+          variant="warning"
+          :small="true"
+          class="mt-4"
+        >
+          <p class="col-form-label">
+            {{ $t('pageSerialOverLan.alert.disconnectedAlertMessage') }}
+          </p>
+        </alert>
+      </b-col>
+    </b-row>
+    <b-row class="d-flex">
+      <b-col class="d-flex flex-column justify-content-end">
+        <dl class="mb-2" sm="6" md="6">
+          <dt class="d-inline font-weight-bold mr-1">
+            {{ $t('pageSerialOverLan.status') }}:
+          </dt>
+          <dd class="d-inline">
+            <status-icon :status="serverStatusIcon" /> {{ connectionStatus }}
+          </dd>
+        </dl>
+      </b-col>
+
+      <b-col v-if="!isFullWindow" class="d-flex justify-content-end">
+        <b-button variant="link" type="button" @click="openConsoleWindow()">
+          <icon-launch />
+          {{ $t('pageSerialOverLan.openNewTab') }}
+        </b-button>
+      </b-col>
+    </b-row>
+    <div id="terminal" ref="panel"></div>
+  </div>
+</template>
+
+<script>
+import Alert from '@/components/Global/Alert';
+import { AttachAddon } from 'xterm-addon-attach';
+import { FitAddon } from 'xterm-addon-fit';
+import { Terminal } from 'xterm';
+import { throttle } from 'lodash';
+import IconLaunch from '@carbon/icons-vue/es/launch/20';
+import StatusIcon from '@/components/Global/StatusIcon';
+
+export default {
+  name: 'SerialOverLanConsole',
+  components: {
+    Alert,
+    IconLaunch,
+    StatusIcon,
+  },
+  props: {
+    isFullWindow: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      resizeConsoleWindow: null,
+    };
+  },
+  computed: {
+    serverStatus() {
+      return this.$store.getters['global/serverStatus'];
+    },
+    serverStatusIcon() {
+      return this.serverStatus === 'on' ? 'success' : 'danger';
+    },
+    connectionStatus() {
+      return this.serverStatus === 'on'
+        ? this.$t('pageSerialOverLan.connected')
+        : this.$t('pageSerialOverLan.disconnected');
+    },
+  },
+  created() {
+    this.$store.dispatch('global/getServerStatus');
+  },
+  mounted() {
+    this.openTerminal();
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeConsoleWindow);
+    this.closeTerminal();
+  },
+  methods: {
+    openTerminal() {
+      const token = this.$store.getters['authentication/token'];
+
+      this.ws = new WebSocket(`wss://${window.location.host}/console0`, [
+        token,
+      ]);
+
+      // Refer https://github.com/xtermjs/xterm.js/ for xterm implementation and addons.
+
+      this.term = new Terminal({
+        fontSize: 15,
+        fontFamily:
+          'SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',
+      });
+
+      const attachAddon = new AttachAddon(this.ws);
+      this.term.loadAddon(attachAddon);
+
+      const fitAddon = new FitAddon();
+      this.term.loadAddon(fitAddon);
+
+      const SOL_THEME = {
+        background: '#19273c',
+        cursor: 'rgba(83, 146, 255, .5)',
+        scrollbar: 'rgba(83, 146, 255, .5)',
+      };
+      this.term.setOption('theme', SOL_THEME);
+
+      this.term.open(this.$refs.panel);
+      fitAddon.fit();
+
+      this.resizeConsoleWindow = throttle(() => {
+        fitAddon.fit();
+      }, 1000);
+      window.addEventListener('resize', this.resizeConsoleWindow);
+
+      try {
+        this.ws.onopen = function () {
+          console.log('websocket console0/ opened');
+        };
+        this.ws.onclose = function (event) {
+          console.log(
+            'websocket console0/ closed. code: ' +
+              event.code +
+              ' reason: ' +
+              event.reason
+          );
+        };
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    closeTerminal() {
+      console.log('closeTerminal');
+      this.term.dispose();
+      this.term = null;
+      this.ws.close();
+      this.ws = null;
+    },
+    openConsoleWindow() {
+      window.open(
+        '#/console/serial-over-lan-console',
+        '_blank',
+        'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=600,height=550'
+      );
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~xterm/css/xterm.css';
+
+#terminal {
+  overflow: auto;
+}
+
+.full-window-container {
+  width: 97%;
+  margin: 1.5%;
+}
+</style>
diff --git a/src/views/_sila/Operations/SerialOverLan/index.js b/src/views/_sila/Operations/SerialOverLan/index.js
new file mode 100644
index 00000000..7c8bc7c0
--- /dev/null
+++ b/src/views/_sila/Operations/SerialOverLan/index.js
@@ -0,0 +1,2 @@
+import SerialOverLan from './SerialOverLan.vue';
+export default SerialOverLan;
diff --git a/src/views/_sila/Operations/ServerPowerOperations/BootSettings.vue b/src/views/_sila/Operations/ServerPowerOperations/BootSettings.vue
new file mode 100644
index 00000000..4896286b
--- /dev/null
+++ b/src/views/_sila/Operations/ServerPowerOperations/BootSettings.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="form-background p-3">
+    <b-form novalidate @submit.prevent="handleSubmit">
+      <b-form-group
+        :label="
+          $t('pageServerPowerOperations.bootSettings.bootSettingsOverride')
+        "
+        label-for="boot-option"
+        class="mb-3"
+      >
+        <b-form-select
+          id="boot-option"
+          v-model="form.bootOption"
+          :disabled="bootSourceOptions.length === 0"
+          :options="bootSourceOptions"
+          @change="onChangeSelect"
+        >
+        </b-form-select>
+      </b-form-group>
+      <b-form-checkbox
+        v-model="form.oneTimeBoot"
+        class="mb-4"
+        :disabled="form.bootOption === 'None'"
+        @change="$v.form.oneTimeBoot.$touch()"
+      >
+        {{ $t('pageServerPowerOperations.bootSettings.enableOneTimeBoot') }}
+      </b-form-checkbox>
+      <b-form-group
+        :label="$t('pageServerPowerOperations.bootSettings.tpmRequiredPolicy')"
+      >
+        <b-form-text id="tpm-required-policy-help-block">
+          {{
+            $t('pageServerPowerOperations.bootSettings.tpmRequiredPolicyHelper')
+          }}
+        </b-form-text>
+        <b-form-checkbox
+          id="tpm-required-policy"
+          v-model="form.tpmPolicyOn"
+          aria-describedby="tpm-required-policy-help-block"
+          @change="$v.form.tpmPolicyOn.$touch()"
+        >
+          {{ $t('global.status.enabled') }}
+        </b-form-checkbox>
+      </b-form-group>
+      <b-button variant="primary" type="submit" class="mb-3">
+        {{ $t('global.action.save') }}
+      </b-button>
+    </b-form>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+
+export default {
+  name: 'BootSettings',
+  mixins: [BVToastMixin, LoadingBarMixin],
+  data() {
+    return {
+      form: {
+        bootOption: this.$store.getters['serverBootSettings/bootSource'],
+        oneTimeBoot: this.$store.getters['serverBootSettings/overrideEnabled'],
+        tpmPolicyOn: this.$store.getters['serverBootSettings/tpmEnabled'],
+      },
+    };
+  },
+  computed: {
+    ...mapState('serverBootSettings', [
+      'bootSourceOptions',
+      'bootSource',
+      'overrideEnabled',
+      'tpmEnabled',
+    ]),
+  },
+  watch: {
+    bootSource: function (value) {
+      this.form.bootOption = value;
+    },
+    overrideEnabled: function (value) {
+      this.form.oneTimeBoot = value;
+    },
+    tpmEnabled: function (value) {
+      this.form.tpmPolicyOn = value;
+    },
+  },
+  validations: {
+    // Empty validations to leverage vuelidate form states
+    // to check for changed values
+    form: {
+      bootOption: {},
+      oneTimeBoot: {},
+      tpmPolicyOn: {},
+    },
+  },
+  created() {
+    this.$store
+      .dispatch('serverBootSettings/getTpmPolicy')
+      .finally(() =>
+        this.$root.$emit('server-power-operations-boot-settings-complete')
+      );
+  },
+  methods: {
+    handleSubmit() {
+      this.startLoader();
+      const tpmPolicyChanged = this.$v.form.tpmPolicyOn.$dirty;
+      let settings;
+      let bootSource = this.form.bootOption;
+      let overrideEnabled = this.form.oneTimeBoot;
+      let tpmEnabled = null;
+
+      if (tpmPolicyChanged) tpmEnabled = this.form.tpmPolicyOn;
+      settings = { bootSource, overrideEnabled, tpmEnabled };
+
+      this.$store
+        .dispatch('serverBootSettings/saveSettings', settings)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message))
+        .finally(() => {
+          this.$v.form.$reset();
+          this.endLoader();
+        });
+    },
+    onChangeSelect(selectedOption) {
+      this.$v.form.bootOption.$touch();
+      // Disable one time boot if selected boot option is 'None'
+      if (selectedOption === 'None') this.form.oneTimeBoot = false;
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Operations/ServerPowerOperations/ServerPowerOperations.vue b/src/views/_sila/Operations/ServerPowerOperations/ServerPowerOperations.vue
new file mode 100644
index 00000000..9e030837
--- /dev/null
+++ b/src/views/_sila/Operations/ServerPowerOperations/ServerPowerOperations.vue
@@ -0,0 +1,260 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+    <b-row class="mb-4">
+      <b-col md="8" xl="6">
+        <page-section
+          :section-title="$t('pageServerPowerOperations.currentStatus')"
+        >
+          <b-row>
+            <b-col>
+              <dl>
+                <dt>{{ $t('pageServerPowerOperations.serverStatus') }}</dt>
+                <dd
+                  v-if="serverStatus === 'on'"
+                  data-test-id="powerServerOps-text-hostStatus"
+                >
+                  {{ $t('global.status.on') }}
+                </dd>
+                <dd
+                  v-else-if="serverStatus === 'off'"
+                  data-test-id="powerServerOps-text-hostStatus"
+                >
+                  {{ $t('global.status.off') }}
+                </dd>
+                <dd v-else>
+                  {{ $t('global.status.notAvailable') }}
+                </dd>
+              </dl>
+            </b-col>
+          </b-row>
+          <b-row>
+            <b-col>
+              <dl>
+                <dt>
+                  {{ $t('pageServerPowerOperations.lastPowerOperation') }}
+                </dt>
+                <dd
+                  v-if="lastPowerOperationTime"
+                  data-test-id="powerServerOps-text-lastPowerOp"
+                >
+                  {{ lastPowerOperationTime | formatDate }}
+                  {{ lastPowerOperationTime | formatTime }}
+                </dd>
+                <dd v-else>--</dd>
+              </dl>
+            </b-col>
+          </b-row>
+        </page-section>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col v-if="hasBootSourceOptions" sm="8" md="6" xl="4">
+        <page-section
+          :section-title="$t('pageServerPowerOperations.serverBootSettings')"
+        >
+          <boot-settings />
+        </page-section>
+      </b-col>
+      <b-col sm="8" md="6" xl="7">
+        <page-section
+          :section-title="$t('pageServerPowerOperations.operations')"
+        >
+          <alert :show="oneTimeBootEnabled" variant="warning">
+            {{ $t('pageServerPowerOperations.oneTimeBootWarning') }}
+          </alert>
+          <template v-if="isOperationInProgress">
+            <alert variant="info">
+              {{ $t('pageServerPowerOperations.operationInProgress') }}
+            </alert>
+          </template>
+          <template v-else-if="serverStatus === 'off'">
+            <b-button
+              variant="primary"
+              data-test-id="serverPowerOperations-button-powerOn"
+              @click="powerOn"
+            >
+              {{ $t('pageServerPowerOperations.powerOn') }}
+            </b-button>
+          </template>
+          <template v-else>
+            <!-- Reboot server options -->
+            <b-form novalidate class="mb-5" @submit.prevent="rebootServer">
+              <b-form-group
+                :label="$t('pageServerPowerOperations.rebootServer')"
+              >
+                <b-form-radio
+                  v-model="form.rebootOption"
+                  name="reboot-option"
+                  data-test-id="serverPowerOperations-radio-rebootOrderly"
+                  value="orderly"
+                >
+                  {{ $t('pageServerPowerOperations.orderlyReboot') }}
+                </b-form-radio>
+                <b-form-radio
+                  v-model="form.rebootOption"
+                  name="reboot-option"
+                  data-test-id="serverPowerOperations-radio-rebootImmediate"
+                  value="immediate"
+                >
+                  {{ $t('pageServerPowerOperations.immediateReboot') }}
+                </b-form-radio>
+              </b-form-group>
+              <b-button
+                variant="primary"
+                type="submit"
+                data-test-id="serverPowerOperations-button-reboot"
+              >
+                {{ $t('pageServerPowerOperations.reboot') }}
+              </b-button>
+            </b-form>
+            <!-- Shutdown server options -->
+            <b-form novalidate @submit.prevent="shutdownServer">
+              <b-form-group
+                :label="$t('pageServerPowerOperations.shutdownServer')"
+              >
+                <b-form-radio
+                  v-model="form.shutdownOption"
+                  name="shutdown-option"
+                  data-test-id="serverPowerOperations-radio-shutdownOrderly"
+                  value="orderly"
+                >
+                  {{ $t('pageServerPowerOperations.orderlyShutdown') }}
+                </b-form-radio>
+                <b-form-radio
+                  v-model="form.shutdownOption"
+                  name="shutdown-option"
+                  data-test-id="serverPowerOperations-radio-shutdownImmediate"
+                  value="immediate"
+                >
+                  {{ $t('pageServerPowerOperations.immediateShutdown') }}
+                </b-form-radio>
+              </b-form-group>
+              <b-button
+                variant="primary"
+                type="submit"
+                data-test-id="serverPowerOperations-button-shutDown"
+              >
+                {{ $t('pageServerPowerOperations.shutDown') }}
+              </b-button>
+            </b-form>
+          </template>
+        </page-section>
+      </b-col>
+    </b-row>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import BootSettings from './BootSettings';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import Alert from '@/components/Global/Alert';
+
+export default {
+  name: 'ServerPowerOperations',
+  components: { PageTitle, PageSection, BootSettings, Alert },
+  mixins: [BVToastMixin, LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      form: {
+        rebootOption: 'orderly',
+        shutdownOption: 'orderly',
+      },
+    };
+  },
+  computed: {
+    serverStatus() {
+      return this.$store.getters['global/serverStatus'];
+    },
+    isOperationInProgress() {
+      return this.$store.getters['controls/isOperationInProgress'];
+    },
+    lastPowerOperationTime() {
+      return this.$store.getters['controls/lastPowerOperationTime'];
+    },
+    oneTimeBootEnabled() {
+      return this.$store.getters['serverBootSettings/overrideEnabled'];
+    },
+    hasBootSourceOptions() {
+      let bootOptions = this.$store.getters[
+        'serverBootSettings/bootSourceOptions'
+      ];
+      return bootOptions.length !== 0;
+    },
+  },
+  created() {
+    this.startLoader();
+    const bootSettingsPromise = new Promise((resolve) => {
+      this.$root.$on('server-power-operations-boot-settings-complete', () =>
+        resolve()
+      );
+    });
+    Promise.all([
+      this.$store.dispatch('serverBootSettings/getBootSettings'),
+      this.$store.dispatch('controls/getLastPowerOperationTime'),
+      bootSettingsPromise,
+    ]).finally(() => this.endLoader());
+  },
+  methods: {
+    powerOn() {
+      this.$store.dispatch('controls/serverPowerOn');
+    },
+    rebootServer() {
+      const modalMessage = this.$t(
+        'pageServerPowerOperations.modal.confirmRebootMessage'
+      );
+      const modalOptions = {
+        title: this.$t('pageServerPowerOperations.modal.confirmRebootTitle'),
+        okTitle: this.$t('global.action.confirm'),
+        cancelTitle: this.$t('global.action.cancel'),
+      };
+
+      if (this.form.rebootOption === 'orderly') {
+        this.$bvModal
+          .msgBoxConfirm(modalMessage, modalOptions)
+          .then((confirmed) => {
+            if (confirmed) this.$store.dispatch('controls/serverSoftReboot');
+          });
+      } else if (this.form.rebootOption === 'immediate') {
+        this.$bvModal
+          .msgBoxConfirm(modalMessage, modalOptions)
+          .then((confirmed) => {
+            if (confirmed) this.$store.dispatch('controls/serverHardReboot');
+          });
+      }
+    },
+    shutdownServer() {
+      const modalMessage = this.$t(
+        'pageServerPowerOperations.modal.confirmShutdownMessage'
+      );
+      const modalOptions = {
+        title: this.$t('pageServerPowerOperations.modal.confirmShutdownTitle'),
+        okTitle: this.$t('global.action.confirm'),
+        cancelTitle: this.$t('global.action.cancel'),
+      };
+
+      if (this.form.shutdownOption === 'orderly') {
+        this.$bvModal
+          .msgBoxConfirm(modalMessage, modalOptions)
+          .then((confirmed) => {
+            if (confirmed) this.$store.dispatch('controls/serverSoftPowerOff');
+          });
+      }
+      if (this.form.shutdownOption === 'immediate') {
+        this.$bvModal
+          .msgBoxConfirm(modalMessage, modalOptions)
+          .then((confirmed) => {
+            if (confirmed) this.$store.dispatch('controls/serverHardPowerOff');
+          });
+      }
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Operations/ServerPowerOperations/index.js b/src/views/_sila/Operations/ServerPowerOperations/index.js
new file mode 100644
index 00000000..10430047
--- /dev/null
+++ b/src/views/_sila/Operations/ServerPowerOperations/index.js
@@ -0,0 +1,2 @@
+import ServerPowerOperations from './ServerPowerOperations.vue';
+export default ServerPowerOperations;
diff --git a/src/views/_sila/Operations/VirtualMedia/ModalConfigureConnection.vue b/src/views/_sila/Operations/VirtualMedia/ModalConfigureConnection.vue
new file mode 100644
index 00000000..b0bcfb2b
--- /dev/null
+++ b/src/views/_sila/Operations/VirtualMedia/ModalConfigureConnection.vue
@@ -0,0 +1,145 @@
+<template>
+  <b-modal
+    id="configure-connection"
+    ref="modal"
+    @ok="onOk"
+    @hidden="resetForm"
+    @show="initModal"
+  >
+    <template #modal-title>
+      {{ $t('pageVirtualMedia.modal.title') }}
+    </template>
+    <b-form>
+      <b-form-group
+        :label="$t('pageVirtualMedia.modal.serverUri')"
+        label-for="serverUri"
+      >
+        <b-form-input
+          id="serverUri"
+          v-model="form.serverUri"
+          type="text"
+          :state="getValidationState($v.form.serverUri)"
+          data-test-id="configureConnection-input-serverUri"
+          @input="$v.form.serverUri.$touch()"
+        />
+        <b-form-invalid-feedback role="alert">
+          <template v-if="!$v.form.serverUri.required">
+            {{ $t('global.form.fieldRequired') }}
+          </template>
+        </b-form-invalid-feedback>
+      </b-form-group>
+      <b-form-group
+        :label="$t('pageVirtualMedia.modal.username')"
+        label-for="username"
+      >
+        <b-form-input
+          id="username"
+          v-model="form.username"
+          type="text"
+          data-test-id="configureConnection-input-username"
+        />
+      </b-form-group>
+      <b-form-group
+        :label="$t('pageVirtualMedia.modal.password')"
+        label-for="password"
+      >
+        <b-form-input
+          id="password"
+          v-model="form.password"
+          type="password"
+          data-test-id="configureConnection-input-password"
+        />
+      </b-form-group>
+      <b-form-group>
+        <b-form-checkbox
+          v-model="form.isRW"
+          data-test-id="configureConnection-input-isRW"
+          name="check-button"
+        >
+          RW
+        </b-form-checkbox>
+      </b-form-group>
+    </b-form>
+    <template #modal-ok>
+      {{ $t('global.action.save') }}
+    </template>
+    <template #modal-cancel>
+      {{ $t('global.action.cancel') }}
+    </template>
+  </b-modal>
+</template>
+
+<script>
+import { required } from 'vuelidate/lib/validators';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+
+export default {
+  mixins: [VuelidateMixin],
+  props: {
+    connection: {
+      type: Object,
+      default: null,
+      validator: (prop) => {
+        console.log(prop);
+        return true;
+      },
+    },
+  },
+  data() {
+    return {
+      form: {
+        serverUri: null,
+        username: null,
+        password: null,
+        isRW: false,
+      },
+    };
+  },
+  watch: {
+    connection: function (value) {
+      if (value === null) return;
+      Object.assign(this.form, value);
+    },
+  },
+  validations() {
+    return {
+      form: {
+        serverUri: {
+          required,
+        },
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      let connectionData = {};
+      Object.assign(connectionData, this.form);
+      this.$emit('ok', connectionData);
+      this.closeModal();
+    },
+    initModal() {
+      if (this.connection) {
+        Object.assign(this.form, this.connection);
+      }
+    },
+    closeModal() {
+      this.$nextTick(() => {
+        this.$refs.modal.hide();
+      });
+    },
+    resetForm() {
+      this.form.serverUri = null;
+      this.form.username = null;
+      this.form.password = null;
+      this.form.isRW = false;
+      this.$v.$reset();
+    },
+    onOk(bvModalEvt) {
+      bvModalEvt.preventDefault();
+      this.handleSubmit();
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue b/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue
new file mode 100644
index 00000000..8a3d5add
--- /dev/null
+++ b/src/views/_sila/Operations/VirtualMedia/VirtualMedia.vue
@@ -0,0 +1,221 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+    <b-row class="mb-4">
+      <b-col md="12">
+        <page-section
+          :section-title="$t('pageVirtualMedia.virtualMediaSubTitleFirst')"
+        >
+          <b-row>
+            <b-col v-for="(dev, $index) in proxyDevices" :key="$index" md="6">
+              <b-form-group :label="dev.id" label-class="bold">
+                <form-file
+                  v-if="!dev.isActive"
+                  :id="concatId(dev.id)"
+                  v-model="dev.file"
+                >
+                  <template #invalid>
+                    <b-form-invalid-feedback role="alert">
+                      {{ $t('global.form.required') }}
+                    </b-form-invalid-feedback>
+                  </template>
+                </form-file>
+              </b-form-group>
+              <b-button
+                v-if="!dev.isActive"
+                variant="primary"
+                :disabled="!dev.file"
+                @click="startVM(dev)"
+              >
+                {{ $t('pageVirtualMedia.start') }}
+              </b-button>
+              <b-button
+                v-if="dev.isActive"
+                variant="primary"
+                :disabled="!dev.file"
+                @click="stopVM(dev)"
+              >
+                {{ $t('pageVirtualMedia.stop') }}
+              </b-button>
+            </b-col>
+          </b-row>
+        </page-section>
+      </b-col>
+    </b-row>
+    <b-row v-if="loadImageFromExternalServer" class="mb-4">
+      <b-col md="12">
+        <page-section
+          :section-title="$t('pageVirtualMedia.virtualMediaSubTitleSecond')"
+        >
+          <b-row>
+            <b-col
+              v-for="(device, $index) in legacyDevices"
+              :key="$index"
+              md="6"
+            >
+              <b-form-group
+                :label="device.id"
+                :label-for="device.id"
+                label-class="bold"
+              >
+                <b-button
+                  variant="primary"
+                  :disabled="device.isActive"
+                  @click="configureConnection(device)"
+                >
+                  {{ $t('pageVirtualMedia.configureConnection') }}
+                </b-button>
+
+                <b-button
+                  v-if="!device.isActive"
+                  variant="primary"
+                  class="float-right"
+                  :disabled="!device.serverUri"
+                  @click="startLegacy(device)"
+                >
+                  {{ $t('pageVirtualMedia.start') }}
+                </b-button>
+                <b-button
+                  v-if="device.isActive"
+                  variant="primary"
+                  class="float-right"
+                  @click="stopLegacy(device)"
+                >
+                  {{ $t('pageVirtualMedia.stop') }}
+                </b-button>
+              </b-form-group>
+            </b-col>
+          </b-row>
+        </page-section>
+      </b-col>
+    </b-row>
+    <modal-configure-connection
+      :connection="modalConfigureConnection"
+      @ok="saveConnection"
+    />
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import ModalConfigureConnection from './ModalConfigureConnection';
+import NbdServer from '@/utilities/NBDServer';
+import FormFile from '@/components/Global/FormFile';
+
+export default {
+  name: 'VirtualMedia',
+  components: { PageTitle, PageSection, ModalConfigureConnection, FormFile },
+  mixins: [BVToastMixin, LoadingBarMixin],
+  data() {
+    return {
+      modalConfigureConnection: null,
+      loadImageFromExternalServer:
+        process.env.VUE_APP_VIRTUAL_MEDIA_LIST_ENABLED === 'true'
+          ? true
+          : false,
+    };
+  },
+  computed: {
+    proxyDevices() {
+      return this.$store.getters['virtualMedia/proxyDevices'];
+    },
+    legacyDevices() {
+      return this.$store.getters['virtualMedia/legacyDevices'];
+    },
+  },
+  created() {
+    if (this.proxyDevices.length > 0 || this.legacyDevices.length > 0) return;
+    this.startLoader();
+    this.$store
+      .dispatch('virtualMedia/getData')
+      .finally(() => this.endLoader());
+  },
+  methods: {
+    startVM(device) {
+      const token = this.$store.getters['authentication/token'];
+      device.nbd = new NbdServer(
+        `wss://${window.location.host}${device.websocket}`,
+        device.file,
+        device.id,
+        token
+      );
+      device.nbd.socketStarted = () =>
+        this.successToast(this.$t('pageVirtualMedia.toast.serverRunning'));
+      device.nbd.errorReadingFile = () =>
+        this.errorToast(this.$t('pageVirtualMedia.toast.errorReadingFile'));
+      device.nbd.socketClosed = (code) => {
+        if (code === 1000)
+          this.successToast(
+            this.$t('pageVirtualMedia.toast.serverClosedSuccessfully')
+          );
+        else
+          this.errorToast(
+            this.$t('pageVirtualMedia.toast.serverClosedWithErrors')
+          );
+        device.file = null;
+        device.isActive = false;
+      };
+
+      device.nbd.start();
+      device.isActive = true;
+    },
+    stopVM(device) {
+      device.nbd.stop();
+    },
+    startLegacy(connectionData) {
+      var data = {};
+      data.Image = connectionData.serverUri;
+      data.UserName = connectionData.username;
+      data.Password = connectionData.password;
+      data.WriteProtected = !connectionData.isRW;
+      this.startLoader();
+      this.$store
+        .dispatch('virtualMedia/mountImage', {
+          id: connectionData.id,
+          data: data,
+        })
+        .then(() => {
+          this.successToast(
+            this.$t('pageVirtualMedia.toast.serverConnectionEstablished')
+          );
+          connectionData.isActive = true;
+        })
+        .catch(() => {
+          this.errorToast(this.$t('pageVirtualMedia.toast.errorMounting'));
+          this.isActive = false;
+        })
+        .finally(() => this.endLoader());
+    },
+    stopLegacy(connectionData) {
+      this.$store
+        .dispatch('virtualMedia/unmountImage', connectionData.id)
+        .then(() => {
+          this.successToast(
+            this.$t('pageVirtualMedia.toast.serverClosedSuccessfully')
+          );
+          connectionData.isActive = false;
+        })
+        .catch(() =>
+          this.errorToast(this.$t('pageVirtualMedia.toast.errorUnmounting'))
+        )
+        .finally(() => this.endLoader());
+    },
+    saveConnection(connectionData) {
+      this.modalConfigureConnection.serverUri = connectionData.serverUri;
+      this.modalConfigureConnection.username = connectionData.username;
+      this.modalConfigureConnection.password = connectionData.password;
+      this.modalConfigureConnection.isRW = connectionData.isRW;
+    },
+    configureConnection(connectionData) {
+      this.modalConfigureConnection = connectionData;
+      this.$bvModal.show('configure-connection');
+    },
+    concatId(val) {
+      return val.split(' ').join('_').toLowerCase();
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Operations/VirtualMedia/index.js b/src/views/_sila/Operations/VirtualMedia/index.js
new file mode 100644
index 00000000..4573e865
--- /dev/null
+++ b/src/views/_sila/Operations/VirtualMedia/index.js
@@ -0,0 +1,2 @@
+import VirtualMedia from './VirtualMedia.vue';
+export default VirtualMedia;
diff --git a/src/views/_sila/Overview/Overview.vue b/src/views/_sila/Overview/Overview.vue
new file mode 100644
index 00000000..9960f373
--- /dev/null
+++ b/src/views/_sila/Overview/Overview.vue
@@ -0,0 +1,100 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+    <overview-quick-links class="mb-4" />
+    <page-section
+      :section-title="$t('pageOverview.systemInformation')"
+      class="mb-1"
+    >
+      <b-card-group deck>
+        <overview-server />
+        <overview-firmware />
+      </b-card-group>
+      <b-card-group deck>
+        <overview-network />
+        <overview-power />
+      </b-card-group>
+    </page-section>
+    <page-section :section-title="$t('pageOverview.statusInformation')">
+      <b-card-group deck>
+        <overview-events />
+        <overview-inventory />
+        <overview-dumps v-if="showDumps" />
+      </b-card-group>
+    </page-section>
+  </b-container>
+</template>
+
+<script>
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import OverviewDumps from './OverviewDumps.vue';
+import OverviewEvents from './OverviewEvents.vue';
+import OverviewFirmware from './OverviewFirmware.vue';
+import OverviewInventory from './OverviewInventory.vue';
+import OverviewNetwork from './OverviewNetwork';
+import OverviewPower from './OverviewPower';
+import OverviewQuickLinks from './OverviewQuickLinks';
+import OverviewServer from './OverviewServer';
+import PageSection from '@/components/Global/PageSection';
+import PageTitle from '@/components/Global/PageTitle';
+
+export default {
+  name: 'Overview',
+  components: {
+    OverviewDumps,
+    OverviewEvents,
+    OverviewFirmware,
+    OverviewInventory,
+    OverviewNetwork,
+    OverviewPower,
+    OverviewQuickLinks,
+    OverviewServer,
+    PageSection,
+    PageTitle,
+  },
+  mixins: [LoadingBarMixin],
+  data() {
+    return {
+      showDumps: process.env.VUE_APP_ENV_NAME === 'ibm',
+    };
+  },
+  created() {
+    this.startLoader();
+    const dumpsPromise = new Promise((resolve) => {
+      this.$root.$on('overview-dumps-complete', () => resolve());
+    });
+    const eventsPromise = new Promise((resolve) => {
+      this.$root.$on('overview-events-complete', () => resolve());
+    });
+    const firmwarePromise = new Promise((resolve) => {
+      this.$root.$on('overview-firmware-complete', () => resolve());
+    });
+    const inventoryPromise = new Promise((resolve) => {
+      this.$root.$on('overview-inventory-complete', () => resolve());
+    });
+    const networkPromise = new Promise((resolve) => {
+      this.$root.$on('overview-network-complete', () => resolve());
+    });
+    const powerPromise = new Promise((resolve) => {
+      this.$root.$on('overview-power-complete', () => resolve());
+    });
+    const quicklinksPromise = new Promise((resolve) => {
+      this.$root.$on('overview-quicklinks-complete', () => resolve());
+    });
+    const serverPromise = new Promise((resolve) => {
+      this.$root.$on('overview-server-complete', () => resolve());
+    });
+
+    Promise.all([
+      dumpsPromise,
+      eventsPromise,
+      firmwarePromise,
+      inventoryPromise,
+      networkPromise,
+      powerPromise,
+      quicklinksPromise,
+      serverPromise,
+    ]).finally(() => this.endLoader());
+  },
+};
+</script>
diff --git a/src/views/_sila/Overview/OverviewCard.vue b/src/views/_sila/Overview/OverviewCard.vue
new file mode 100644
index 00000000..4fc0a031
--- /dev/null
+++ b/src/views/_sila/Overview/OverviewCard.vue
@@ -0,0 +1,81 @@
+<template>
+  <b-card bg-variant="light" border-variant="light" class="mb-4">
+    <div class="justify-content-between align-items-center d-flex flex-wrap">
+      <h3 class="h5 mb-0">{{ title }}</h3>
+      <div class="card-buttons">
+        <b-button
+          v-if="exportButton || downloadButton"
+          :disabled="disabled"
+          :download="download"
+          :href="href"
+          class="p-0"
+          variant="link"
+        >
+          <span v-if="downloadButton">{{ $t('global.action.download') }}</span>
+          <span v-if="exportButton">{{ $t('global.action.exportAll') }}</span>
+        </b-button>
+        <span v-if="exportButton || downloadButton" class="pl-2 pr-2">|</span>
+        <b-link :to="to">{{ $t('pageOverview.viewMore') }}</b-link>
+      </div>
+    </div>
+    <slot></slot>
+  </b-card>
+</template>
+
+<script>
+export default {
+  name: 'OverviewCard',
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    disabled: {
+      type: Boolean,
+      default: true,
+    },
+    downloadButton: {
+      type: Boolean,
+      default: false,
+    },
+    exportButton: {
+      type: Boolean,
+      default: false,
+    },
+
+    fileName: {
+      type: String,
+      default: 'data',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    to: {
+      type: String,
+      default: '/',
+    },
+  },
+  computed: {
+    dataForExport() {
+      return JSON.stringify(this.data);
+    },
+    download() {
+      return `${this.fileName}.json`;
+    },
+    href() {
+      return `data:text/json;charset=utf-8,${this.dataForExport}`;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+a {
+  vertical-align: middle;
+  font-size: 14px;
+}
+.card {
+  min-width: 310px;
+}
+</style>
diff --git a/src/views/_sila/Overview/OverviewDumps.vue b/src/views/_sila/Overview/OverviewDumps.vue
new file mode 100644
index 00000000..a2ae4e4e
--- /dev/null
+++ b/src/views/_sila/Overview/OverviewDumps.vue
@@ -0,0 +1,54 @@
+<template>
+  <overview-card
+    :data="dumps"
+    :disabled="dumps.length === 0"
+    :download-button="true"
+    :file-name="exportFileNameByDate()"
+    :title="$t('pageOverview.dumps')"
+    :to="`/logs/dumps`"
+  >
+    <b-row class="mt-3">
+      <b-col sm="6">
+        <dl>
+          <dt>{{ $t('pageOverview.total') }}</dt>
+          <dd class="h3">{{ dataFormatter(dumps.length) }}</dd>
+        </dl>
+      </b-col>
+    </b-row>
+  </overview-card>
+</template>
+
+<script>
+import OverviewCard from './OverviewCard';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+
+export default {
+  name: 'Dumps',
+  components: {
+    OverviewCard,
+  },
+  mixins: [DataFormatterMixin],
+  computed: {
+    dumps() {
+      return this.$store.getters['dumps/allDumps'];
+    },
+  },
+  created() {
+    this.$store.dispatch('dumps/getBmcDumpEntries').finally(() => {
+      this.$root.$emit('overview-dumps-complete');
+    });
+  },
+  methods: {
+    exportFileNameByDate() {
+      // Create export file name based on date
+      let date = new Date();
+      date =
+        date.toISOString().slice(0, 10) +
+        '_' +
+        date.toString().split(':').join('-').split(' ')[4];
+      let fileName = 'all_dumps_';
+      return fileName + date;
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Overview/OverviewEvents.vue b/src/views/_sila/Overview/OverviewEvents.vue
new file mode 100644
index 00000000..b73c0b48
--- /dev/null
+++ b/src/views/_sila/Overview/OverviewEvents.vue
@@ -0,0 +1,85 @@
+<template>
+  <overview-card
+    :data="eventLogData"
+    :disabled="eventLogData.length === 0"
+    :export-button="true"
+    :file-name="exportFileNameByDate()"
+    :title="$t('pageOverview.eventLogs')"
+    :to="`/logs/event-logs`"
+  >
+    <b-row class="mt-3">
+      <b-col sm="6">
+        <dl>
+          <dt>{{ $t('pageOverview.criticalEvents') }}</dt>
+          <dd class="h3">
+            {{ dataFormatter(criticalEvents.length) }}
+            <status-icon status="danger" />
+          </dd>
+        </dl>
+      </b-col>
+      <b-col sm="6">
+        <dl>
+          <dt>{{ $t('pageOverview.warningEvents') }}</dt>
+          <dd class="h3">
+            {{ dataFormatter(warningEvents.length) }}
+            <status-icon status="warning" />
+          </dd>
+        </dl>
+      </b-col>
+    </b-row>
+  </overview-card>
+</template>
+
+<script>
+import OverviewCard from './OverviewCard';
+import StatusIcon from '@/components/Global/StatusIcon';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+
+export default {
+  name: 'Events',
+  components: { OverviewCard, StatusIcon },
+  mixins: [DataFormatterMixin],
+  computed: {
+    eventLogData() {
+      return this.$store.getters['eventLog/allEvents'];
+    },
+    criticalEvents() {
+      return this.eventLogData
+        .filter((log) => log.severity === 'Critical')
+        .map((log) => {
+          return log;
+        });
+    },
+    warningEvents() {
+      return this.eventLogData
+        .filter((log) => log.severity === 'Warning')
+        .map((log) => {
+          return log;
+        });
+    },
+  },
+  created() {
+    this.$store.dispatch('eventLog/getEventLogData').finally(() => {
+      this.$root.$emit('overview-events-complete');
+    });
+  },
+  methods: {
+    exportFileNameByDate() {
+      // Create export file name based on date
+      let date = new Date();
+      date =
+        date.toISOString().slice(0, 10) +
+        '_' +
+        date.toString().split(':').join('-').split(' ')[4];
+      let fileName = 'all_event_logs_';
+      return fileName + date;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.status-icon {
+  vertical-align: text-top;
+}
+</style>
diff --git a/src/views/_sila/Overview/OverviewFirmware.vue b/src/views/_sila/Overview/OverviewFirmware.vue
new file mode 100644
index 00000000..f1f9ce53
--- /dev/null
+++ b/src/views/_sila/Overview/OverviewFirmware.vue
@@ -0,0 +1,49 @@
+<template>
+  <overview-card
+    :title="$t('pageOverview.firmwareInformation')"
+    :to="`/operations/firmware`"
+  >
+    <b-row class="mt-3">
+      <b-col>
+        <dl>
+          <dt>{{ $t('pageOverview.runningVersion') }}</dt>
+          <dd>{{ dataFormatter(runningVersion) }}</dd>
+          <dt>{{ $t('pageOverview.backupVersion') }}</dt>
+          <dd>{{ dataFormatter(backupVersion) }}</dd>
+        </dl>
+      </b-col>
+    </b-row>
+  </overview-card>
+</template>
+
+<script>
+import OverviewCard from './OverviewCard';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+
+export default {
+  name: 'Firmware',
+  components: {
+    OverviewCard,
+  },
+  mixins: [DataFormatterMixin],
+  computed: {
+    backupBmcFirmware() {
+      return this.$store.getters['firmware/backupBmcFirmware'];
+    },
+    backupVersion() {
+      return this.backupBmcFirmware?.version;
+    },
+    activeBmcFirmware() {
+      return this.$store.getters[`firmware/activeBmcFirmware`];
+    },
+    runningVersion() {
+      return this.activeBmcFirmware?.version;
+    },
+  },
+  created() {
+    this.$store.dispatch('firmware/getFirmwareInformation').finally(() => {
+      this.$root.$emit('overview-firmware-complete');
+    });
+  },
+};
+</script>
diff --git a/src/views/_sila/Overview/OverviewInventory.vue b/src/views/_sila/Overview/OverviewInventory.vue
new file mode 100644
index 00000000..575cb7b7
--- /dev/null
+++ b/src/views/_sila/Overview/OverviewInventory.vue
@@ -0,0 +1,57 @@
+<template>
+  <overview-card
+    :title="$t('pageOverview.inventory')"
+    :to="`/hardware-status/inventory`"
+  >
+    <b-row class="mt-3">
+      <b-col sm="6">
+        <dl sm="6">
+          <dt>{{ $t('pageOverview.systemIdentifyLed') }}</dt>
+          <dd>
+            <b-form-checkbox
+              id="identifyLedSwitch"
+              v-model="systems.locationIndicatorActive"
+              data-test-id="overviewInventory-checkbox-identifyLed"
+              switch
+              @change="toggleIdentifyLedSwitch"
+            >
+              <span v-if="systems.locationIndicatorActive">
+                {{ $t('global.status.on') }}
+              </span>
+              <span v-else>{{ $t('global.status.off') }}</span>
+            </b-form-checkbox>
+          </dd>
+        </dl>
+      </b-col>
+    </b-row>
+  </overview-card>
+</template>
+
+<script>
+import OverviewCard from './OverviewCard';
+
+export default {
+  name: 'Inventory',
+  components: {
+    OverviewCard,
+  },
+  computed: {
+    systems() {
+      let systemData = this.$store.getters['system/systems'][0];
+      return systemData ? systemData : {};
+    },
+  },
+  created() {
+    this.$store.dispatch('system/getSystem').finally(() => {
+      this.$root.$emit('overview-inventory-complete');
+    });
+  },
+  methods: {
+    toggleIdentifyLedSwitch(state) {
+      this.$store
+        .dispatch('system/changeIdentifyLedState', state)
+        .catch(({ message }) => this.errorToast(message));
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Overview/OverviewNetwork.vue b/src/views/_sila/Overview/OverviewNetwork.vue
new file mode 100644
index 00000000..b81e5c73
--- /dev/null
+++ b/src/views/_sila/Overview/OverviewNetwork.vue
@@ -0,0 +1,71 @@
+<template>
+  <overview-card
+    v-if="network"
+    :title="$t('pageOverview.networkInformation')"
+    :to="`/settings/network`"
+  >
+    <b-row class="mt-3">
+      <b-col sm="6">
+        <dl>
+          <dt>{{ $t('pageOverview.hostName') }}</dt>
+          <dd>{{ dataFormatter(network.hostname) }}</dd>
+        </dl>
+      </b-col>
+      <b-col sm="6">
+        <dl>
+          <dt>{{ $t('pageOverview.linkStatus') }}</dt>
+          <dd>
+            {{ dataFormatter(network.linkStatus) }}
+          </dd>
+        </dl>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <dl>
+          <dt>{{ $t('pageOverview.ipv4') }}</dt>
+          <dd>
+            {{ dataFormatter(network.staticAddress) }}
+          </dd>
+        </dl>
+      </b-col>
+      <b-col>
+        <dl>
+          <dt>{{ $t('pageOverview.dhcp') }}</dt>
+          <dd>
+            {{
+              dataFormatter(
+                network.dhcpAddress.length !== 0
+                  ? network.dhcpAddress[0].Address
+                  : null
+              )
+            }}
+          </dd>
+        </dl>
+      </b-col>
+    </b-row>
+  </overview-card>
+</template>
+
+<script>
+import OverviewCard from './OverviewCard';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+
+export default {
+  name: 'Network',
+  components: {
+    OverviewCard,
+  },
+  mixins: [DataFormatterMixin],
+  computed: {
+    network() {
+      return this.$store.getters['network/globalNetworkSettings'][0];
+    },
+  },
+  created() {
+    this.$store.dispatch('network/getEthernetData').finally(() => {
+      this.$root.$emit('overview-network-complete');
+    });
+  },
+};
+</script>
diff --git a/src/views/_sila/Overview/OverviewPower.vue b/src/views/_sila/Overview/OverviewPower.vue
new file mode 100644
index 00000000..0d84c76c
--- /dev/null
+++ b/src/views/_sila/Overview/OverviewPower.vue
@@ -0,0 +1,48 @@
+<template>
+  <overview-card
+    :title="$t('pageOverview.powerInformation')"
+    :to="`/resource-management/power`"
+  >
+    <b-row class="mt-3">
+      <b-col sm="6">
+        <dl>
+          <dt>{{ $t('pageOverview.powerConsumption') }}</dt>
+          <dd v-if="powerConsumptionValue == null">
+            {{ $t('global.status.notAvailable') }}
+          </dd>
+          <dd v-else>{{ powerConsumptionValue }} W</dd>
+          <dt>{{ $t('pageOverview.powerCap') }}</dt>
+          <dd v-if="powerCapValue == null">
+            {{ $t('global.status.disabled') }}
+          </dd>
+          <dd v-else>{{ powerCapValue }} W</dd>
+        </dl>
+      </b-col>
+    </b-row>
+  </overview-card>
+</template>
+
+<script>
+import OverviewCard from './OverviewCard';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'Power',
+  components: {
+    OverviewCard,
+  },
+  mixins: [DataFormatterMixin],
+  computed: {
+    ...mapGetters({
+      powerCapValue: 'powerControl/powerCapValue',
+      powerConsumptionValue: 'powerControl/powerConsumptionValue',
+    }),
+  },
+  created() {
+    this.$store.dispatch('powerControl/getPowerControl').finally(() => {
+      this.$root.$emit('overview-power-complete');
+    });
+  },
+};
+</script>
diff --git a/src/views/_sila/Overview/OverviewQuickLinks.vue b/src/views/_sila/Overview/OverviewQuickLinks.vue
new file mode 100644
index 00000000..bc579b03
--- /dev/null
+++ b/src/views/_sila/Overview/OverviewQuickLinks.vue
@@ -0,0 +1,56 @@
+<template>
+  <b-card bg-variant="light" border-variant="light">
+    <b-row class="d-flex justify-content-between align-items-center">
+      <b-col sm="6" lg="9" class="mb-2 mt-2">
+        <dl>
+          <dt>{{ $t('pageOverview.bmcTime') }}</dt>
+          <dd v-if="bmcTime" data-test-id="overviewQuickLinks-text-bmcTime">
+            {{ bmcTime | formatDate }} {{ bmcTime | formatTime }}
+          </dd>
+          <dd v-else>--</dd>
+        </dl>
+      </b-col>
+      <b-col sm="6" lg="3" class="mb-2 mt-2">
+        <b-button
+          to="/operations/serial-over-lan"
+          variant="secondary"
+          data-test-id="overviewQuickLinks-button-solConsole"
+          class="d-flex justify-content-between align-items-center"
+        >
+          {{ $t('pageOverview.solConsole') }}
+          <icon-arrow-right />
+        </b-button>
+      </b-col>
+    </b-row>
+  </b-card>
+</template>
+
+<script>
+import ArrowRight16 from '@carbon/icons-vue/es/arrow--right/16';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+
+export default {
+  name: 'QuickLinks',
+  components: {
+    IconArrowRight: ArrowRight16,
+  },
+  mixins: [BVToastMixin],
+  computed: {
+    bmcTime() {
+      return this.$store.getters['global/bmcTime'];
+    },
+  },
+  created() {
+    Promise.all([this.$store.dispatch('global/getBmcTime')]).finally(() => {
+      this.$root.$emit('overview-quicklinks-complete');
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+dd,
+dl {
+  margin: 0;
+}
+</style>
diff --git a/src/views/_sila/Overview/OverviewServer.vue b/src/views/_sila/Overview/OverviewServer.vue
new file mode 100644
index 00000000..d066d391
--- /dev/null
+++ b/src/views/_sila/Overview/OverviewServer.vue
@@ -0,0 +1,47 @@
+<template>
+  <overview-card
+    :title="$t('pageOverview.serverInformation')"
+    :to="`/hardware-status/inventory`"
+  >
+    <b-row class="mt-3">
+      <b-col lg="6">
+        <dl>
+          <dt>{{ $t('pageOverview.model') }}</dt>
+          <dd>{{ dataFormatter(serverModel) }}</dd>
+          <dt>{{ $t('pageOverview.serialNumber') }}</dt>
+          <dd>{{ dataFormatter(serverSerialNumber) }}</dd>
+        </dl>
+      </b-col>
+    </b-row>
+  </overview-card>
+</template>
+
+<script>
+import OverviewCard from './OverviewCard';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import { mapState } from 'vuex';
+
+export default {
+  name: 'Server',
+  components: {
+    OverviewCard,
+  },
+  mixins: [DataFormatterMixin],
+  computed: {
+    ...mapState({
+      server: (state) => state.system.systems[0],
+      serverModel() {
+        return this.server?.model;
+      },
+      serverSerialNumber() {
+        return this.server?.serialNumber;
+      },
+    }),
+  },
+  created() {
+    this.$store.dispatch('system/getSystem').finally(() => {
+      this.$root.$emit('overview-server-complete');
+    });
+  },
+};
+</script>
diff --git a/src/views/_sila/Overview/index.js b/src/views/_sila/Overview/index.js
new file mode 100644
index 00000000..8553ef3d
--- /dev/null
+++ b/src/views/_sila/Overview/index.js
@@ -0,0 +1,2 @@
+import Overview from './Overview.vue';
+export default Overview;
diff --git a/src/views/_sila/PageNotFound/PageNotFound.vue b/src/views/_sila/PageNotFound/PageNotFound.vue
new file mode 100644
index 00000000..91341dbb
--- /dev/null
+++ b/src/views/_sila/PageNotFound/PageNotFound.vue
@@ -0,0 +1,12 @@
+<template>
+  <b-container fluid="xl">
+    <page-title :description="$t('pagePageNotFound.description')" />
+  </b-container>
+</template>
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+export default {
+  name: 'PageNotFound',
+  components: { PageTitle },
+};
+</script>
diff --git a/src/views/_sila/PageNotFound/index.js b/src/views/_sila/PageNotFound/index.js
new file mode 100644
index 00000000..ed1d519a
--- /dev/null
+++ b/src/views/_sila/PageNotFound/index.js
@@ -0,0 +1,2 @@
+import PageNotFound from './PageNotFound.vue';
+export default PageNotFound;
diff --git a/src/views/_sila/ProfileSettings/ProfileSettings.vue b/src/views/_sila/ProfileSettings/ProfileSettings.vue
new file mode 100644
index 00000000..8f01c59b
--- /dev/null
+++ b/src/views/_sila/ProfileSettings/ProfileSettings.vue
@@ -0,0 +1,222 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+
+    <b-row>
+      <b-col md="8" lg="8" xl="6">
+        <page-section
+          :section-title="$t('pageProfileSettings.profileInfoTitle')"
+        >
+          <dl>
+            <dt>{{ $t('pageProfileSettings.username') }}</dt>
+            <dd>
+              {{ username }}
+            </dd>
+          </dl>
+        </page-section>
+      </b-col>
+    </b-row>
+
+    <b-form @submit.prevent="submitForm">
+      <b-row>
+        <b-col sm="8" md="6" xl="3">
+          <page-section
+            :section-title="$t('pageProfileSettings.changePassword')"
+          >
+            <b-form-group
+              id="input-group-1"
+              :label="$t('pageProfileSettings.newPassword')"
+              label-for="input-1"
+            >
+              <b-form-text id="password-help-block">
+                {{
+                  $t('pageUserManagement.modal.passwordMustBeBetween', {
+                    min: passwordRequirements.minLength,
+                    max: passwordRequirements.maxLength,
+                  })
+                }}
+              </b-form-text>
+              <input-password-toggle>
+                <b-form-input
+                  id="password"
+                  v-model="form.newPassword"
+                  type="password"
+                  aria-describedby="password-help-block"
+                  :state="getValidationState($v.form.newPassword)"
+                  data-test-id="profileSettings-input-newPassword"
+                  class="form-control-with-button"
+                  @input="$v.form.newPassword.$touch()"
+                />
+                <b-form-invalid-feedback role="alert">
+                  <template
+                    v-if="
+                      !$v.form.newPassword.minLength ||
+                      !$v.form.newPassword.maxLength
+                    "
+                  >
+                    {{
+                      $t('pageProfileSettings.newPassLabelTextInfo', {
+                        min: passwordRequirements.minLength,
+                        max: passwordRequirements.maxLength,
+                      })
+                    }}
+                  </template>
+                </b-form-invalid-feedback>
+              </input-password-toggle>
+            </b-form-group>
+            <b-form-group
+              id="input-group-2"
+              :label="$t('pageProfileSettings.confirmPassword')"
+              label-for="input-2"
+            >
+              <input-password-toggle>
+                <b-form-input
+                  id="password-confirmation"
+                  v-model="form.confirmPassword"
+                  type="password"
+                  :state="getValidationState($v.form.confirmPassword)"
+                  data-test-id="profileSettings-input-confirmPassword"
+                  class="form-control-with-button"
+                  @input="$v.form.confirmPassword.$touch()"
+                />
+                <b-form-invalid-feedback role="alert">
+                  <template v-if="!$v.form.confirmPassword.sameAsPassword">
+                    {{ $t('pageProfileSettings.passwordsDoNotMatch') }}
+                  </template>
+                </b-form-invalid-feedback>
+              </input-password-toggle>
+            </b-form-group>
+          </page-section>
+        </b-col>
+      </b-row>
+      <page-section :section-title="$t('pageProfileSettings.timezoneDisplay')">
+        <p>{{ $t('pageProfileSettings.timezoneDisplayDesc') }}</p>
+        <b-row>
+          <b-col md="9" lg="8" xl="9">
+            <b-form-group :label="$t('pageProfileSettings.timezone')">
+              <b-form-radio
+                v-model="form.isUtcDisplay"
+                :value="true"
+                data-test-id="profileSettings-radio-defaultUTC"
+              >
+                {{ $t('pageProfileSettings.defaultUTC') }}
+              </b-form-radio>
+              <b-form-radio
+                v-model="form.isUtcDisplay"
+                :value="false"
+                data-test-id="profileSettings-radio-browserOffset"
+              >
+                {{
+                  $t('pageProfileSettings.browserOffset', {
+                    timezone,
+                  })
+                }}
+              </b-form-radio>
+            </b-form-group>
+          </b-col>
+        </b-row>
+      </page-section>
+      <b-button
+        variant="primary"
+        type="submit"
+        data-test-id="profileSettings-button-saveSettings"
+      >
+        {{ $t('global.action.saveSettings') }}
+      </b-button>
+    </b-form>
+  </b-container>
+</template>
+
+<script>
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
+import { maxLength, minLength, sameAs } from 'vuelidate/lib/validators';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import LocalTimezoneLabelMixin from '@/components/Mixins/LocalTimezoneLabelMixin';
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+
+export default {
+  name: 'ProfileSettings',
+  components: { InputPasswordToggle, PageSection, PageTitle },
+  mixins: [
+    BVToastMixin,
+    LocalTimezoneLabelMixin,
+    LoadingBarMixin,
+    VuelidateMixin,
+  ],
+  data() {
+    return {
+      form: {
+        newPassword: '',
+        confirmPassword: '',
+        isUtcDisplay: this.$store.getters['global/isUtcDisplay'],
+      },
+    };
+  },
+  computed: {
+    username() {
+      return this.$store.getters['global/username'];
+    },
+    passwordRequirements() {
+      return this.$store.getters['userManagement/accountPasswordRequirements'];
+    },
+    timezone() {
+      return this.localOffset();
+    },
+  },
+  created() {
+    this.startLoader();
+    this.$store
+      .dispatch('userManagement/getAccountSettings')
+      .finally(() => this.endLoader());
+  },
+  validations() {
+    return {
+      form: {
+        newPassword: {
+          minLength: minLength(this.passwordRequirements.minLength),
+          maxLength: maxLength(this.passwordRequirements.maxLength),
+        },
+        confirmPassword: {
+          sameAsPassword: sameAs('newPassword'),
+        },
+      },
+    };
+  },
+  methods: {
+    saveNewPasswordInputData() {
+      this.$v.form.confirmPassword.$touch();
+      this.$v.form.newPassword.$touch();
+      if (this.$v.$invalid) return;
+      let userData = {
+        originalUsername: this.username,
+        password: this.form.newPassword,
+      };
+
+      this.$store
+        .dispatch('userManagement/updateUser', userData)
+        .then((message) => {
+          (this.form.newPassword = ''), (this.form.confirmPassword = '');
+          this.$v.$reset();
+          this.successToast(message);
+        })
+        .catch(({ message }) => this.errorToast(message));
+    },
+    saveTimeZonePrefrenceData() {
+      localStorage.setItem('storedUtcDisplay', this.form.isUtcDisplay);
+      this.$store.commit('global/setUtcTime', this.form.isUtcDisplay);
+      this.successToast(
+        this.$t('pageProfileSettings.toast.successUpdatingTimeZone')
+      );
+    },
+    submitForm() {
+      if (this.form.confirmPassword || this.form.newPassword) {
+        this.saveNewPasswordInputData();
+      }
+      this.saveTimeZonePrefrenceData();
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/ProfileSettings/index.js b/src/views/_sila/ProfileSettings/index.js
new file mode 100644
index 00000000..d6589c72
--- /dev/null
+++ b/src/views/_sila/ProfileSettings/index.js
@@ -0,0 +1,2 @@
+import ProfileSettings from './ProfileSettings.vue';
+export default ProfileSettings;
diff --git a/src/views/_sila/ResourceManagement/Power.vue b/src/views/_sila/ResourceManagement/Power.vue
new file mode 100644
index 00000000..cc0cc993
--- /dev/null
+++ b/src/views/_sila/ResourceManagement/Power.vue
@@ -0,0 +1,170 @@
+<template>
+  <b-container fluid="xl">
+    <page-title :description="$t('pagePower.description')" />
+
+    <b-row>
+      <b-col sm="8" md="6" xl="12">
+        <dl>
+          <dt>{{ $t('pagePower.powerConsumption') }}</dt>
+          <dd>
+            {{
+              powerConsumptionValue
+                ? `${powerConsumptionValue} W`
+                : $t('global.status.notAvailable')
+            }}
+          </dd>
+        </dl>
+      </b-col>
+    </b-row>
+
+    <b-form @submit.prevent="submitForm">
+      <b-form-group :disabled="loading">
+        <b-row>
+          <b-col sm="8" md="6" xl="12">
+            <b-form-group :label="$t('pagePower.powerCapSettingLabel')">
+              <b-form-checkbox
+                v-model="isPowerCapFieldEnabled"
+                data-test-id="power-checkbox-togglePowerCapField"
+                name="power-cap-setting"
+              >
+                {{ $t('pagePower.powerCapSettingData') }}
+              </b-form-checkbox>
+            </b-form-group>
+          </b-col>
+        </b-row>
+
+        <b-row>
+          <b-col sm="8" md="6" xl="3">
+            <b-form-group
+              id="input-group-1"
+              :label="$t('pagePower.powerCapLabel')"
+              label-for="input-1"
+            >
+              <b-form-text id="power-help-text">
+                {{
+                  $t('pagePower.powerCapLabelTextInfo', {
+                    min: 1,
+                    max: 10000,
+                  })
+                }}
+              </b-form-text>
+
+              <b-form-input
+                id="input-1"
+                v-model.number="powerCapValue"
+                :disabled="!isPowerCapFieldEnabled"
+                data-test-id="power-input-powerCapValue"
+                type="number"
+                aria-describedby="power-help-text"
+                :state="getValidationState($v.powerCapValue)"
+              ></b-form-input>
+
+              <b-form-invalid-feedback id="input-live-feedback" role="alert">
+                <template v-if="!$v.powerCapValue.required">
+                  {{ $t('global.form.fieldRequired') }}
+                </template>
+                <template v-else-if="!$v.powerCapValue.between">
+                  {{ $t('global.form.invalidValue') }}
+                </template>
+              </b-form-invalid-feedback>
+            </b-form-group>
+          </b-col>
+        </b-row>
+
+        <b-button
+          variant="primary"
+          type="submit"
+          data-test-id="power-button-savePowerCapValue"
+        >
+          {{ $t('global.action.save') }}
+        </b-button>
+      </b-form-group>
+    </b-form>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import { requiredIf, between } from 'vuelidate/lib/validators';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'Power',
+  components: { PageTitle },
+  mixins: [VuelidateMixin, BVToastMixin, LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      loading,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      powerConsumptionValue: 'powerControl/powerConsumptionValue',
+    }),
+
+    /**
+      Computed property isPowerCapFieldEnabled is used to enable or disable the input field.
+      The input field is enabled when the powercapValue property is not null.
+   **/
+    isPowerCapFieldEnabled: {
+      get() {
+        return this.powerCapValue !== null;
+      },
+      set(value) {
+        this.$v.$reset();
+        let newValue = null;
+        if (value) {
+          if (this.powerCapValue) {
+            newValue = this.powerCapValue;
+          } else {
+            newValue = '';
+          }
+        }
+        this.$store.dispatch('powerControl/setPowerCapUpdatedValue', newValue);
+      },
+    },
+    powerCapValue: {
+      get() {
+        return this.$store.getters['powerControl/powerCapValue'];
+      },
+      set(value) {
+        this.$v.$touch();
+        this.$store.dispatch('powerControl/setPowerCapUpdatedValue', value);
+      },
+    },
+  },
+  created() {
+    this.startLoader();
+    this.$store
+      .dispatch('powerControl/getPowerControl')
+      .finally(() => this.endLoader());
+  },
+  validations: {
+    powerCapValue: {
+      between: between(1, 10000),
+      required: requiredIf(function () {
+        return this.isPowerCapFieldEnabled;
+      }),
+    },
+  },
+  methods: {
+    submitForm() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.startLoader();
+      this.$store
+        .dispatch('powerControl/setPowerControl', this.powerCapValue)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message))
+        .finally(() => this.endLoader());
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/ResourceManagement/index.js b/src/views/_sila/ResourceManagement/index.js
new file mode 100644
index 00000000..5882decd
--- /dev/null
+++ b/src/views/_sila/ResourceManagement/index.js
@@ -0,0 +1,2 @@
+import Power from './Power.vue';
+export default Power;
diff --git a/src/views/_sila/SecurityAndAccess/Certificates/Certificates.vue b/src/views/_sila/SecurityAndAccess/Certificates/Certificates.vue
new file mode 100644
index 00000000..0113b80a
--- /dev/null
+++ b/src/views/_sila/SecurityAndAccess/Certificates/Certificates.vue
@@ -0,0 +1,322 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+    <b-row>
+      <b-col xl="11">
+        <!-- Expired certificates banner -->
+        <alert :show="expiredCertificateTypes.length > 0" variant="danger">
+          <template v-if="expiredCertificateTypes.length > 1">
+            {{ $t('pageCertificates.alert.certificatesExpiredMessage') }}
+          </template>
+          <template v-else>
+            {{
+              $t('pageCertificates.alert.certificateExpiredMessage', {
+                certificate: expiredCertificateTypes[0],
+              })
+            }}
+          </template>
+        </alert>
+        <!-- Expiring certificates banner -->
+        <alert :show="expiringCertificateTypes.length > 0" variant="warning">
+          <template v-if="expiringCertificateTypes.length > 1">
+            {{ $t('pageCertificates.alert.certificatesExpiringMessage') }}
+          </template>
+          <template v-else>
+            {{
+              $t('pageCertificates.alert.certificateExpiringMessage', {
+                certificate: expiringCertificateTypes[0],
+              })
+            }}
+          </template>
+        </alert>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col xl="11" class="text-right">
+        <b-button
+          v-b-modal.generate-csr
+          data-test-id="certificates-button-generateCsr"
+          variant="link"
+        >
+          <icon-add />
+          {{ $t('pageCertificates.generateCsr') }}
+        </b-button>
+        <b-button
+          variant="primary"
+          :disabled="certificatesForUpload.length === 0"
+          @click="initModalUploadCertificate(null)"
+        >
+          <icon-add />
+          {{ $t('pageCertificates.addNewCertificate') }}
+        </b-button>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col xl="11">
+        <b-table
+          responsive="md"
+          show-empty
+          hover
+          :busy="isBusy"
+          :fields="fields"
+          :items="tableItems"
+          :empty-text="$t('global.table.emptyMessage')"
+        >
+          <template #cell(validFrom)="{ value }">
+            {{ value | formatDate }}
+          </template>
+
+          <template #cell(validUntil)="{ value }">
+            <status-icon
+              v-if="getDaysUntilExpired(value) < 31"
+              :status="getIconStatus(value)"
+            />
+            {{ value | formatDate }}
+          </template>
+
+          <template #cell(actions)="{ value, item }">
+            <table-row-action
+              v-for="(action, index) in value"
+              :key="index"
+              :value="action.value"
+              :title="action.title"
+              :enabled="action.enabled"
+              @click-table-action="onTableRowAction($event, item)"
+            >
+              <template #icon>
+                <icon-replace v-if="action.value === 'replace'" />
+                <icon-trashcan v-if="action.value === 'delete'" />
+              </template>
+            </table-row-action>
+          </template>
+        </b-table>
+      </b-col>
+    </b-row>
+
+    <!-- Modals -->
+    <modal-upload-certificate :certificate="modalCertificate" @ok="onModalOk" />
+    <modal-generate-csr />
+  </b-container>
+</template>
+
+<script>
+import IconAdd from '@carbon/icons-vue/es/add--alt/20';
+import IconReplace from '@carbon/icons-vue/es/renew/20';
+import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
+
+import ModalGenerateCsr from './ModalGenerateCsr';
+import ModalUploadCertificate from './ModalUploadCertificate';
+import PageTitle from '@/components/Global/PageTitle';
+import TableRowAction from '@/components/Global/TableRowAction';
+import StatusIcon from '@/components/Global/StatusIcon';
+import Alert from '@/components/Global/Alert';
+
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+
+export default {
+  name: 'Certificates',
+  components: {
+    Alert,
+    IconAdd,
+    IconReplace,
+    IconTrashcan,
+    ModalGenerateCsr,
+    ModalUploadCertificate,
+    PageTitle,
+    StatusIcon,
+    TableRowAction,
+  },
+  mixins: [BVToastMixin, LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      isBusy: true,
+      modalCertificate: null,
+      fields: [
+        {
+          key: 'certificate',
+          label: this.$t('pageCertificates.table.certificate'),
+        },
+        {
+          key: 'issuedBy',
+          label: this.$t('pageCertificates.table.issuedBy'),
+        },
+        {
+          key: 'issuedTo',
+          label: this.$t('pageCertificates.table.issuedTo'),
+        },
+        {
+          key: 'validFrom',
+          label: this.$t('pageCertificates.table.validFrom'),
+        },
+        {
+          key: 'validUntil',
+          label: this.$t('pageCertificates.table.validUntil'),
+        },
+        {
+          key: 'actions',
+          label: '',
+          tdClass: 'text-right text-nowrap',
+        },
+      ],
+    };
+  },
+  computed: {
+    certificates() {
+      return this.$store.getters['certificates/allCertificates'];
+    },
+    tableItems() {
+      return this.certificates.map((certificate) => {
+        return {
+          ...certificate,
+          actions: [
+            {
+              value: 'replace',
+              title: this.$t('pageCertificates.replaceCertificate'),
+            },
+            {
+              value: 'delete',
+              title: this.$t('pageCertificates.deleteCertificate'),
+              enabled:
+                certificate.type === 'TrustStore Certificate' ? true : false,
+            },
+          ],
+        };
+      });
+    },
+    certificatesForUpload() {
+      return this.$store.getters['certificates/availableUploadTypes'];
+    },
+    bmcTime() {
+      return this.$store.getters['global/bmcTime'];
+    },
+    expiredCertificateTypes() {
+      return this.certificates.reduce((acc, val) => {
+        const daysUntilExpired = this.getDaysUntilExpired(val.validUntil);
+        if (daysUntilExpired < 1) {
+          acc.push(val.certificate);
+        }
+        return acc;
+      }, []);
+    },
+    expiringCertificateTypes() {
+      return this.certificates.reduce((acc, val) => {
+        const daysUntilExpired = this.getDaysUntilExpired(val.validUntil);
+        if (daysUntilExpired < 31 && daysUntilExpired > 0) {
+          acc.push(val.certificate);
+        }
+        return acc;
+      }, []);
+    },
+  },
+  async created() {
+    this.startLoader();
+    await this.$store.dispatch('global/getBmcTime');
+    this.$store.dispatch('certificates/getCertificates').finally(() => {
+      this.endLoader();
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    onTableRowAction(event, rowItem) {
+      switch (event) {
+        case 'replace':
+          this.initModalUploadCertificate(rowItem);
+          break;
+        case 'delete':
+          this.initModalDeleteCertificate(rowItem);
+          break;
+        default:
+          break;
+      }
+    },
+    initModalUploadCertificate(certificate = null) {
+      this.modalCertificate = certificate;
+      this.$bvModal.show('upload-certificate');
+    },
+    initModalDeleteCertificate(certificate) {
+      this.$bvModal
+        .msgBoxConfirm(
+          this.$t('pageCertificates.modal.deleteConfirmMessage', {
+            issuedBy: certificate.issuedBy,
+            certificate: certificate.certificate,
+          }),
+          {
+            title: this.$t('pageCertificates.deleteCertificate'),
+            okTitle: this.$t('global.action.delete'),
+            cancelTitle: this.$t('global.action.cancel'),
+          }
+        )
+        .then((deleteConfirmed) => {
+          if (deleteConfirmed) this.deleteCertificate(certificate);
+        });
+    },
+    onModalOk({ addNew, file, type, location }) {
+      if (addNew) {
+        // Upload a new certificate
+        this.addNewCertificate(file, type);
+      } else {
+        // Replace an existing certificate
+        this.replaceCertificate(file, type, location);
+      }
+    },
+    addNewCertificate(file, type) {
+      this.startLoader();
+      this.$store
+        .dispatch('certificates/addNewCertificate', { file, type })
+        .then((success) => this.successToast(success))
+        .catch(({ message }) => this.errorToast(message))
+        .finally(() => this.endLoader());
+    },
+    replaceCertificate(file, type, location) {
+      this.startLoader();
+      const reader = new FileReader();
+      reader.readAsBinaryString(file);
+      reader.onloadend = (event) => {
+        const certificateString = event.target.result;
+        this.$store
+          .dispatch('certificates/replaceCertificate', {
+            certificateString,
+            type,
+            location,
+          })
+          .then((success) => this.successToast(success))
+          .catch(({ message }) => this.errorToast(message))
+          .finally(() => this.endLoader());
+      };
+    },
+    deleteCertificate({ type, location }) {
+      this.startLoader();
+      this.$store
+        .dispatch('certificates/deleteCertificate', {
+          type,
+          location,
+        })
+        .then((success) => this.successToast(success))
+        .catch(({ message }) => this.errorToast(message))
+        .finally(() => this.endLoader());
+    },
+    getDaysUntilExpired(date) {
+      if (this.bmcTime) {
+        const validUntilMs = date.getTime();
+        const currentBmcTimeMs = this.bmcTime.getTime();
+        const oneDayInMs = 24 * 60 * 60 * 1000;
+        return Math.round((validUntilMs - currentBmcTimeMs) / oneDayInMs);
+      }
+      return new Date();
+    },
+    getIconStatus(date) {
+      const daysUntilExpired = this.getDaysUntilExpired(date);
+      if (daysUntilExpired < 1) {
+        return 'danger';
+      } else if (daysUntilExpired < 31) {
+        return 'warning';
+      }
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/SecurityAndAccess/Certificates/CsrCountryCodes.js b/src/views/_sila/SecurityAndAccess/Certificates/CsrCountryCodes.js
new file mode 100644
index 00000000..a2d70007
--- /dev/null
+++ b/src/views/_sila/SecurityAndAccess/Certificates/CsrCountryCodes.js
@@ -0,0 +1,345 @@
+import i18n from '@/i18n';
+
+export const COUNTRY_LIST = [
+  { name: 'Afghanistan', code: 'AF', label: i18n.t('countries.AF') },
+  { name: 'Albania', code: 'AL', label: i18n.t('countries.AL') },
+  { name: 'Algeria', code: 'DZ', label: i18n.t('countries.DZ') },
+  { name: 'American Samoa', code: 'AS', label: i18n.t('countries.AS') },
+  { name: 'Andorra', code: 'AD', label: i18n.t('countries.AD') },
+  { name: 'Angola', code: 'AO', label: i18n.t('countries.AO') },
+  { name: 'Anguilla', code: 'AI', label: i18n.t('countries.AI') },
+  { name: 'Antarctica', code: 'AQ', label: i18n.t('countries.AQ') },
+  { name: 'Antigua and Barbuda', code: 'AG', label: i18n.t('countries.AG') },
+  { name: 'Argentina', code: 'AR', label: i18n.t('countries.AR') },
+  { name: 'Armenia', code: 'AM', label: i18n.t('countries.AM') },
+  { name: 'Aruba', code: 'AW', label: i18n.t('countries.AW') },
+  { name: 'Australia', code: 'AU', label: i18n.t('countries.AU') },
+  { name: 'Austria', code: 'AT', label: i18n.t('countries.AT') },
+  { name: 'Azerbaijan', code: 'AZ', label: i18n.t('countries.AZ') },
+  { name: 'Bahamas, The', code: 'BS', label: i18n.t('countries.BS') },
+  { name: 'Bahrain', code: 'BH', label: i18n.t('countries.BH') },
+  { name: 'Bangladesh', code: 'BD', label: i18n.t('countries.BD') },
+  { name: 'Barbados', code: 'BB', label: i18n.t('countries.BB') },
+  { name: 'Belarus', code: 'BY', label: i18n.t('countries.BY') },
+  { name: 'Belgium', code: 'BE', label: i18n.t('countries.BE') },
+  { name: 'Belize', code: 'BZ', label: i18n.t('countries.BZ') },
+  { name: 'Benin', code: 'BJ', label: i18n.t('countries.BJ') },
+  { name: 'Bermuda', code: 'BM', label: i18n.t('countries.BM') },
+  { name: 'Bhutan', code: 'BT', label: i18n.t('countries.BT') },
+  { name: 'Bolivia', code: 'BO', label: i18n.t('countries.BO') },
+  {
+    name: 'Bonaire, Sint Eustatius and Saba',
+    code: 'BQ',
+    label: i18n.t('countries.BQ'),
+  },
+  {
+    name: 'Bosnia and Herzegovina ',
+    code: 'BA',
+    label: i18n.t('countries.BA'),
+  },
+  { name: 'Bostwana', code: 'BW', label: i18n.t('countries.BW') },
+  { name: 'Bouvet Island', code: 'BV', label: i18n.t('countries.BV') },
+  { name: 'Brazil', code: 'BR', label: i18n.t('countries.BR') },
+  {
+    name: 'British Indian Ocean Territory',
+    code: 'IO',
+    label: i18n.t('countries.IO'),
+  },
+  { name: 'Brunei Darussalam ', code: 'BN', label: i18n.t('countries.BN') },
+  { name: 'Bulgaria', code: 'BG', label: i18n.t('countries.BG') },
+  { name: 'Burkina Faso', code: 'BF', label: i18n.t('countries.BF') },
+  { name: 'Burundi', code: 'BI', label: i18n.t('countries.BI') },
+  { name: 'Cabo Verde', code: 'CV', label: i18n.t('countries.CV') },
+  { name: 'Cambodia', code: 'KH', label: i18n.t('countries.KH') },
+  { name: 'Cameroon', code: 'CM', label: i18n.t('countries.CM') },
+  { name: 'Canada', code: 'CA', label: i18n.t('countries.CA') },
+  { name: 'Cayman Islands', code: 'KY', label: i18n.t('countries.KY') },
+  {
+    name: 'Central African Republic',
+    code: 'CF',
+    label: i18n.t('countries.CF'),
+  },
+  { name: 'Chad', code: 'TD', label: i18n.t('countries.TD') },
+  { name: 'Chile', code: 'CL', label: i18n.t('countries.CL') },
+  { name: 'China', code: 'CN', label: i18n.t('countries.CN') },
+  { name: 'Christmas Island ', code: 'CX', label: i18n.t('countries.CX') },
+  { name: 'Cocos(Keeling) Islands', code: 'CC', label: i18n.t('countries.CC') },
+  { name: 'Columbia', code: 'CO', label: i18n.t('countries.CO') },
+  { name: 'Comoros', code: 'KM', label: i18n.t('countries.KM') },
+  {
+    name: 'Congo, The Democratic Republic of the',
+    code: 'CD',
+    label: i18n.t('countries.CD'),
+  },
+  { name: 'Congo', code: 'CG', label: i18n.t('countries.CG') },
+  { name: 'Cook Islands', code: 'CK', label: i18n.t('countries.CK') },
+  { name: 'Costa Rica', code: 'CR', label: i18n.t('countries.CR') },
+  { name: 'Croatia', code: 'HR', label: i18n.t('countries.HR') },
+  { name: 'Cuba', code: 'CU', label: i18n.t('countries.CU') },
+  { name: 'Curaçao', code: 'CW', label: i18n.t('countries.CW') },
+  { name: 'Cyprus', code: 'CY', label: i18n.t('countries.CY') },
+  { name: 'Czechia', code: 'CZ', label: i18n.t('countries.CZ') },
+  { name: "Côte d'Ivoire", code: 'CI', label: i18n.t('countries.CI') },
+  { name: 'Denmark', code: 'DK', label: i18n.t('countries.DK') },
+  { name: 'Djibouti', code: 'DJ', label: i18n.t('countries.DJ') },
+  { name: 'Dominica', code: 'DM', label: i18n.t('countries.DM') },
+  { name: 'Dominican Republic', code: 'DO', label: i18n.t('countries.DO') },
+  { name: 'Ecuador', code: 'EC', label: i18n.t('countries.EC') },
+  { name: 'Egypt', code: 'EG', label: i18n.t('countries.EG') },
+  { name: 'El Salvador', code: 'SV', label: i18n.t('countries.SV') },
+  { name: 'Equatorial Guinea ', code: 'GQ', label: i18n.t('countries.GQ') },
+  { name: 'Eritrea', code: 'ER', label: i18n.t('countries.ER') },
+  { name: 'Estonia', code: 'EE', label: i18n.t('countries.EE') },
+  { name: 'Eswatini', code: 'SZ', label: i18n.t('countries.SZ') },
+  { name: 'Ethiopia', code: 'ET', label: i18n.t('countries.ET') },
+  {
+    name: 'Falkland Islands (Malvinas)',
+    code: 'FK',
+    label: i18n.t('countries.FK'),
+  },
+  { name: 'Faroe Islands', code: 'FO', label: i18n.t('countries.FO') },
+  { name: 'Fiji', code: 'FJ', label: i18n.t('countries.FJ') },
+  { name: 'Finland', code: 'FI', label: i18n.t('countries.FI') },
+  { name: 'France', code: 'FR', label: i18n.t('countries.FR') },
+  { name: 'French Guiana', code: 'GF', label: i18n.t('countries.GF') },
+  { name: 'French Polynesia', code: 'PF', label: i18n.t('countries.PF') },
+  {
+    name: 'French Southern Territories',
+    code: 'TF',
+    label: i18n.t('countries.TF'),
+  },
+  { name: 'Gabon', code: 'GA', label: i18n.t('countries.GA') },
+  { name: 'Gambia, The', code: 'GM', label: i18n.t('countries.GM') },
+  { name: 'Georgia', code: 'GE', label: i18n.t('countries.GE') },
+  { name: 'Germany', code: 'DE', label: i18n.t('countries.DE') },
+  { name: 'Ghana', code: 'GH', label: i18n.t('countries.GH') },
+  { name: 'Gibraltar', code: 'GI', label: i18n.t('countries.GI') },
+  { name: 'Greece', code: 'GR', label: i18n.t('countries.GR') },
+  { name: 'Greenland', code: 'GL', label: i18n.t('countries.GL') },
+  { name: 'Grenada', code: 'GD', label: i18n.t('countries.GD') },
+  { name: 'Guadeloupe', code: 'GP', label: i18n.t('countries.GP') },
+  { name: 'Guam', code: 'GU', label: i18n.t('countries.GU') },
+  { name: 'Guatemala', code: 'GT', label: i18n.t('countries.GT') },
+  { name: 'Guernsey', code: 'GG', label: i18n.t('countries.GG') },
+  { name: 'Guinea', code: 'GN', label: i18n.t('countries.GN') },
+  { name: 'Guinea-Bissau', code: 'GW', label: i18n.t('countries.GW') },
+  { name: 'Guyana', code: 'GY', label: i18n.t('countries.GY') },
+  { name: 'Haiti', code: 'HT', label: i18n.t('countries.HT') },
+  {
+    name: 'Heard Island and McDonald Islands',
+    code: 'HM',
+    label: i18n.t('countries.HM'),
+  },
+  { name: 'Holy See', code: 'VA', label: i18n.t('countries.VA') },
+  { name: 'Honduras', code: 'HN', label: i18n.t('countries.HN') },
+  { name: 'Hong Kong', code: 'HK', label: i18n.t('countries.HK') },
+  { name: 'Hungary', code: 'HU', label: i18n.t('countries.HU') },
+  { name: 'Iceland', code: 'IS', label: i18n.t('countries.IS') },
+  { name: 'India', code: 'IN', label: i18n.t('countries.IN') },
+  { name: 'Indonesia', code: 'ID', label: i18n.t('countries.ID') },
+  {
+    name: 'Iran, Islamic Republic of',
+    code: 'IR',
+    label: i18n.t('countries.IR'),
+  },
+  { name: 'Iraq', code: 'IQ', label: i18n.t('countries.IQ') },
+  { name: 'Ireland', code: 'IE', label: i18n.t('countries.IE') },
+  { name: 'Isle of Man', code: 'IM', label: i18n.t('countries.IM') },
+  { name: 'Israel', code: 'IL', label: i18n.t('countries.IL') },
+  { name: 'Italy', code: 'IT', label: i18n.t('countries.IT') },
+  { name: 'Jamaica', code: 'JM', label: i18n.t('countries.JM') },
+  { name: 'Japan', code: 'JP', label: i18n.t('countries.JP') },
+  { name: 'Jersey', code: 'JE', label: i18n.t('countries.JE') },
+  { name: 'Jordan', code: 'JO', label: i18n.t('countries.JO') },
+  { name: 'Kazakhstan', code: 'KZ', label: i18n.t('countries.KZ') },
+  { name: 'Kenya', code: 'KE', label: i18n.t('countries.KE') },
+  { name: 'Kiribati', code: 'KI', label: i18n.t('countries.KI') },
+  { name: 'Korea, Republic of', code: 'KR', label: i18n.t('countries.KR') },
+  {
+    name: "Korea, Democratic People's Republic of",
+    code: 'KP',
+    label: i18n.t('countries.KP'),
+  },
+  { name: 'Kuwait', code: 'KW', label: i18n.t('countries.KW') },
+  { name: 'Kyrgyzstan', code: 'KG', label: i18n.t('countries.KG') },
+  {
+    name: "Lao People's Democratic Republic",
+    code: 'LA',
+    label: i18n.t('countries.LA'),
+  },
+  { name: 'Latvia', code: 'LV', label: i18n.t('countries.LV') },
+  { name: 'Lebanon', code: 'LB', label: i18n.t('countries.LB') },
+  { name: 'Lesotho', code: 'LS', label: i18n.t('countries.LS') },
+  { name: 'Liberia', code: 'LR', label: i18n.t('countries.LR') },
+  { name: 'Libya', code: 'LY', label: i18n.t('countries.LY') },
+  { name: 'Liechtenstein', code: 'LI', label: i18n.t('countries.LI') },
+  { name: 'Lithuania', code: 'LT', label: i18n.t('countries.LT') },
+  { name: 'Luxembourg', code: 'LU', label: i18n.t('countries.LU') },
+  { name: 'Macao', code: 'MO', label: i18n.t('countries.MO') },
+  {
+    name: 'Macedonia, The Former Yugoslav Republic of',
+    code: 'MK',
+    label: i18n.t('countries.MK'),
+  },
+  { name: 'Madagascar', code: 'MG', label: i18n.t('countries.MG') },
+  { name: 'Malawi', code: 'MW', label: i18n.t('countries.MW') },
+  { name: 'Malaysia', code: 'MY', label: i18n.t('countries.MY') },
+  { name: 'Maldives', code: 'MV', label: i18n.t('countries.MV') },
+  { name: 'Mali', code: 'ML', label: i18n.t('countries.ML') },
+  { name: 'Malta', code: 'MT', label: i18n.t('countries.MT') },
+  { name: 'Marshall Islands', code: 'MH', label: i18n.t('countries.MH') },
+  { name: 'Martinique', code: 'MQ', label: i18n.t('countries.MQ') },
+  { name: 'Mauritania', code: 'MR', label: i18n.t('countries.MR') },
+  { name: 'Mauritius', code: 'MU', label: i18n.t('countries.MU') },
+  { name: 'Mayotte', code: 'YT', label: i18n.t('countries.YT') },
+  { name: 'Mexico', code: 'MX', label: i18n.t('countries.MX') },
+  {
+    name: 'Micronesia, Federated States of',
+    code: 'FM',
+    label: i18n.t('countries.FM'),
+  },
+  { name: 'Moldova, Republic of', code: 'MD', label: i18n.t('countries.MD') },
+  { name: 'Monaco', code: 'MC', label: i18n.t('countries.MC') },
+  { name: 'Mongolia', code: 'MN', label: i18n.t('countries.MN') },
+  { name: 'Montenegro', code: 'ME', label: i18n.t('countries.ME') },
+  { name: 'Montserrat', code: 'MS', label: i18n.t('countries.MS') },
+  { name: 'Morocco', code: 'MA', label: i18n.t('countries.MA') },
+  { name: 'Mozambique', code: 'MZ', label: i18n.t('countries.MZ') },
+  { name: 'Myanmar', code: 'MM', label: i18n.t('countries.MM') },
+  { name: 'Namibia', code: 'NA', label: i18n.t('countries.NA') },
+  { name: 'Nauru', code: 'NR', label: i18n.t('countries.NR') },
+  { name: 'Nepal', code: 'NP', label: i18n.t('countries.NP') },
+  { name: 'Netherlands', code: 'NL', label: i18n.t('countries.NL') },
+  { name: 'New Caledonia', code: 'NC', label: i18n.t('countries.NC') },
+  { name: 'New Zealand', code: 'NZ', label: i18n.t('countries.NZ') },
+  { name: 'Nicaragua', code: 'NI', label: i18n.t('countries.NI') },
+  { name: 'Niger', code: 'NE', label: i18n.t('countries.NE') },
+  { name: 'Nigeria', code: 'NG', label: i18n.t('countries.NG') },
+  { name: 'Niue', code: 'NU', label: i18n.t('countries.NU') },
+  { name: 'Norfolk Island', code: 'NF', label: i18n.t('countries.NF') },
+  {
+    name: 'Northern Mariana Islands',
+    code: 'MP',
+    label: i18n.t('countries.MP'),
+  },
+  { name: 'Norway', code: 'NO', label: i18n.t('countries.NO') },
+  { name: 'Oman', code: 'OM', label: i18n.t('countries.OM') },
+  { name: 'Pakistan', code: 'PK', label: i18n.t('countries.PK') },
+  { name: 'Palau', code: 'PW', label: i18n.t('countries.PW') },
+  { name: 'Palestine', code: 'PS', label: i18n.t('countries.PS') },
+  { name: 'Panama', code: 'PA', label: i18n.t('countries.PA') },
+  { name: 'Papua New Guinea', code: 'PG', label: i18n.t('countries.PG') },
+  { name: 'Paraguay', code: 'PY', label: i18n.t('countries.PY') },
+  { name: 'Peru', code: 'PE', label: i18n.t('countries.PE') },
+  { name: 'Philippines', code: 'PH', label: i18n.t('countries.PH') },
+  { name: 'Pitcairn', code: 'PN', label: i18n.t('countries.PN') },
+  { name: 'Poland', code: 'PL', label: i18n.t('countries.PL') },
+  { name: 'Portugal', code: 'PT', label: i18n.t('countries.PT') },
+  { name: 'Puerto Rico', code: 'PR', label: i18n.t('countries.PR') },
+  { name: 'Qatar', code: 'QA', label: i18n.t('countries.QA') },
+  { name: 'Romania', code: 'RO', label: i18n.t('countries.RO') },
+  { name: 'Russian Federation', code: 'RU', label: i18n.t('countries.RU') },
+  { name: 'Rwanda', code: 'RW', label: i18n.t('countries.RW') },
+  { name: 'Réunion', code: 'RE', label: i18n.t('countries.RE') },
+  { name: 'Saint Barthélemy', code: 'BL', label: i18n.t('countries.BL') },
+  {
+    name: 'Saint Helena, Ascension and Tristan da Cunha',
+    code: 'SH',
+    label: i18n.t('countries.SH'),
+  },
+  { name: 'Saint Kitts and Nevis ', code: 'KN', label: i18n.t('countries.KN') },
+  { name: 'Saint Lucia', code: 'LC', label: i18n.t('countries.LC') },
+  { name: 'Saint Martin', code: 'MF', label: i18n.t('countries.MF') },
+  {
+    name: 'Saint Pierre and Miquelon',
+    code: 'PM',
+    label: i18n.t('countries.PM'),
+  },
+  {
+    name: 'Saint Vincent and the Grenadines',
+    code: 'VC',
+    label: i18n.t('countries.VC'),
+  },
+  { name: 'Samoa', code: 'WS', label: i18n.t('countries.WS') },
+  { name: 'San Marino ', code: 'SM', label: i18n.t('countries.SM') },
+  { name: 'Sao Tome and Principe', code: 'ST', label: i18n.t('countries.ST') },
+  { name: 'Saudi Arabia', code: 'SA', label: i18n.t('countries.SA') },
+  { name: 'Senegal', code: 'SN', label: i18n.t('countries.SN') },
+  { name: 'Serbia', code: 'RS', label: i18n.t('countries.RS') },
+  { name: 'Seychelles', code: 'SC', label: i18n.t('countries.SC') },
+  { name: 'Sierra Leone', code: 'SL', label: i18n.t('countries.SL') },
+  { name: 'Singapore', code: 'SG', label: i18n.t('countries.SG') },
+  { name: 'Sint Maarten', code: 'SX', label: i18n.t('countries.SX') },
+  { name: 'Slovakia', code: 'SK', label: i18n.t('countries.SK') },
+  { name: 'Slovenia', code: 'SI', label: i18n.t('countries.SI') },
+  { name: 'Solomon Islands', code: 'SB', label: i18n.t('countries.SB') },
+  { name: 'Somalia', code: 'SO', label: i18n.t('countries.SO') },
+  { name: 'South Africa ', code: 'ZA', label: i18n.t('countries.ZA') },
+  {
+    name: 'South Georgia and the South Sandwich Islands',
+    code: 'GS',
+    label: i18n.t('countries.GS'),
+  },
+  { name: 'South Sudan', code: 'SS', label: i18n.t('countries.SS') },
+  { name: 'Spain', code: 'ES', label: i18n.t('countries.ES') },
+  { name: 'Sri Lanka', code: 'LK', label: i18n.t('countries.LK') },
+  { name: 'Sudan', code: 'SD', label: i18n.t('countries.SD') },
+  { name: 'Suriname', code: 'SR', label: i18n.t('countries.SR') },
+  { name: 'Svalbard and Jan Mayen', code: 'SJ', label: i18n.t('countries.SJ') },
+  { name: 'Sweden', code: 'SE', label: i18n.t('countries.SE') },
+  { name: 'Switzerland', code: 'CH', label: i18n.t('countries.CH') },
+  { name: 'Syrian Arab Republic', code: 'SY', label: i18n.t('countries.SY') },
+  { name: 'Taiwan', code: 'TW', label: i18n.t('countries.TW') },
+  { name: 'Tajikistan', code: 'TJ', label: i18n.t('countries.TJ') },
+  {
+    name: 'Tanzania, United Republic of',
+    code: 'TZ',
+    label: i18n.t('countries.TZ'),
+  },
+  { name: 'Thailand', code: 'TH', label: i18n.t('countries.TH') },
+  { name: 'Timor-Leste', code: 'TL', label: i18n.t('countries.TL') },
+  { name: 'Togo', code: 'TG', label: i18n.t('countries.TG') },
+  { name: 'Tokelau', code: 'TK', label: i18n.t('countries.TK') },
+  { name: 'Tonga', code: 'TO', label: i18n.t('countries.TO') },
+  { name: 'Trinidad and Tobago', code: 'TT', label: i18n.t('countries.TT') },
+  { name: 'Tunisia', code: 'TN', label: i18n.t('countries.TN') },
+  { name: 'Turkey', code: 'TR', label: i18n.t('countries.TR') },
+  { name: 'Turkmenistan', code: 'TM', label: i18n.t('countries.TM') },
+  {
+    name: 'Turks and Caicos Islands',
+    code: 'TC',
+    label: i18n.t('countries.TC'),
+  },
+  { name: 'Tuvalu', code: 'TV', label: i18n.t('countries.TV') },
+  { name: 'Uganda', code: 'UG', label: i18n.t('countries.UG') },
+  { name: 'Ukraine', code: 'UA', label: i18n.t('countries.UA') },
+  { name: 'United Arab Emirates', code: 'AE', label: i18n.t('countries.AE') },
+  { name: 'United Kingdom', code: 'GB', label: i18n.t('countries.GB') },
+  {
+    name: 'United States Minor Outlying Islands',
+    code: 'UM',
+    label: i18n.t('countries.UM'),
+  },
+  {
+    name: 'United States of America',
+    code: 'US',
+    label: i18n.t('countries.US'),
+  },
+  { name: 'Uruguay', code: 'UY', label: i18n.t('countries.UY') },
+  { name: 'Uzbekistan', code: 'UZ', label: i18n.t('countries.UZ') },
+  { name: 'Vanuatu', code: 'VU', label: i18n.t('countries.VU') },
+  { name: 'Venezuela', code: 'VE', label: i18n.t('countries.VE') },
+  { name: 'Viet Nam', code: 'VN', label: i18n.t('countries.VN') },
+  {
+    name: 'Virgin Islands, British',
+    code: 'VG',
+    label: i18n.t('countries.VG'),
+  },
+  { name: 'Virgin Islands, U.S', code: 'VI', label: i18n.t('countries.VI') },
+  { name: 'Wallis and Futuna', code: 'WF', label: i18n.t('countries.WF') },
+  { name: 'Western Sahara', code: 'EH', label: i18n.t('countries.EH') },
+  { name: 'Yemen', code: 'YE', label: i18n.t('countries.YE') },
+  { name: 'Zambia', code: 'ZM', label: i18n.t('countries.ZM') },
+  { name: 'Zimbabwe', code: 'ZW', label: i18n.t('countries.ZW') },
+  { name: 'Åland Islands', code: 'AX', label: i18n.t('countries.AX') },
+];
diff --git a/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue b/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
new file mode 100644
index 00000000..d76f9fe1
--- /dev/null
+++ b/src/views/_sila/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
@@ -0,0 +1,496 @@
+<template>
+  <div>
+    <b-modal
+      id="generate-csr"
+      ref="modal"
+      size="lg"
+      no-stacking
+      :title="$t('pageCertificates.modal.generateACertificateSigningRequest')"
+      @ok="onOkGenerateCsrModal"
+      @cancel="resetForm"
+      @hidden="$v.$reset()"
+    >
+      <b-form id="generate-csr-form" novalidate @submit.prevent="handleSubmit">
+        <b-container fluid>
+          <b-row>
+            <b-col lg="9">
+              <b-row>
+                <b-col lg="6">
+                  <b-form-group
+                    :label="$t('pageCertificates.modal.certificateType')"
+                    label-for="certificate-type"
+                  >
+                    <b-form-select
+                      id="certificate-type"
+                      v-model="form.certificateType"
+                      data-test-id="modalGenerateCsr-select-certificateType"
+                      :options="certificateOptions"
+                      :state="getValidationState($v.form.certificateType)"
+                      @input="$v.form.certificateType.$touch()"
+                    >
+                      <template #first>
+                        <b-form-select-option :value="null" disabled>
+                          {{ $t('global.form.selectAnOption') }}
+                        </b-form-select-option>
+                      </template>
+                    </b-form-select>
+                    <b-form-invalid-feedback role="alert">
+                      {{ $t('global.form.fieldRequired') }}
+                    </b-form-invalid-feedback>
+                  </b-form-group>
+                </b-col>
+                <b-col lg="6">
+                  <b-form-group
+                    :label="$t('pageCertificates.modal.country')"
+                    label-for="country"
+                  >
+                    <b-form-select
+                      id="country"
+                      v-model="form.country"
+                      data-test-id="modalGenerateCsr-select-country"
+                      :options="countryOptions"
+                      :state="getValidationState($v.form.country)"
+                      @input="$v.form.country.$touch()"
+                    >
+                      <template #first>
+                        <b-form-select-option :value="null" disabled>
+                          {{ $t('global.form.selectAnOption') }}
+                        </b-form-select-option>
+                      </template>
+                    </b-form-select>
+                    <b-form-invalid-feedback role="alert">
+                      {{ $t('global.form.fieldRequired') }}
+                    </b-form-invalid-feedback>
+                  </b-form-group>
+                </b-col>
+              </b-row>
+              <b-row>
+                <b-col lg="6">
+                  <b-form-group
+                    :label="$t('pageCertificates.modal.state')"
+                    label-for="state"
+                  >
+                    <b-form-input
+                      id="state"
+                      v-model="form.state"
+                      type="text"
+                      data-test-id="modalGenerateCsr-input-state"
+                      :state="getValidationState($v.form.state)"
+                    />
+                    <b-form-invalid-feedback role="alert">
+                      {{ $t('global.form.fieldRequired') }}
+                    </b-form-invalid-feedback>
+                  </b-form-group>
+                </b-col>
+                <b-col lg="6">
+                  <b-form-group
+                    :label="$t('pageCertificates.modal.city')"
+                    label-for="city"
+                  >
+                    <b-form-input
+                      id="city"
+                      v-model="form.city"
+                      type="text"
+                      data-test-id="modalGenerateCsr-input-city"
+                      :state="getValidationState($v.form.city)"
+                    />
+                    <b-form-invalid-feedback role="alert">
+                      {{ $t('global.form.fieldRequired') }}
+                    </b-form-invalid-feedback>
+                  </b-form-group>
+                </b-col>
+              </b-row>
+              <b-row>
+                <b-col lg="6">
+                  <b-form-group
+                    :label="$t('pageCertificates.modal.companyName')"
+                    label-for="company-name"
+                  >
+                    <b-form-input
+                      id="company-name"
+                      v-model="form.companyName"
+                      type="text"
+                      data-test-id="modalGenerateCsr-input-companyName"
+                      :state="getValidationState($v.form.companyName)"
+                    />
+                    <b-form-invalid-feedback role="alert">
+                      {{ $t('global.form.fieldRequired') }}
+                    </b-form-invalid-feedback>
+                  </b-form-group>
+                </b-col>
+                <b-col lg="6">
+                  <b-form-group
+                    :label="$t('pageCertificates.modal.companyUnit')"
+                    label-for="company-unit"
+                  >
+                    <b-form-input
+                      id="company-unit"
+                      v-model="form.companyUnit"
+                      type="text"
+                      data-test-id="modalGenerateCsr-input-companyUnit"
+                      :state="getValidationState($v.form.companyUnit)"
+                    />
+                    <b-form-invalid-feedback role="alert">
+                      {{ $t('global.form.fieldRequired') }}
+                    </b-form-invalid-feedback>
+                  </b-form-group>
+                </b-col>
+              </b-row>
+              <b-row>
+                <b-col lg="6">
+                  <b-form-group
+                    :label="$t('pageCertificates.modal.commonName')"
+                    label-for="common-name"
+                  >
+                    <b-form-input
+                      id="common-name"
+                      v-model="form.commonName"
+                      type="text"
+                      data-test-id="modalGenerateCsr-input-commonName"
+                      :state="getValidationState($v.form.commonName)"
+                    />
+                    <b-form-invalid-feedback role="alert">
+                      {{ $t('global.form.fieldRequired') }}
+                    </b-form-invalid-feedback>
+                  </b-form-group>
+                </b-col>
+                <b-col lg="6">
+                  <b-form-group label-for="challenge-password">
+                    <template #label>
+                      {{ $t('pageCertificates.modal.challengePassword') }} -
+                      <span class="form-text d-inline">
+                        {{ $t('global.form.optional') }}
+                      </span>
+                    </template>
+                    <b-form-input
+                      id="challenge-password"
+                      v-model="form.challengePassword"
+                      type="text"
+                      data-test-id="modalGenerateCsr-input-challengePassword"
+                    />
+                  </b-form-group>
+                </b-col>
+              </b-row>
+              <b-row>
+                <b-col lg="6">
+                  <b-form-group label-for="contact-person">
+                    <template #label>
+                      {{ $t('pageCertificates.modal.contactPerson') }} -
+                      <span class="form-text d-inline">
+                        {{ $t('global.form.optional') }}
+                      </span>
+                    </template>
+                    <b-form-input
+                      id="contact-person"
+                      v-model="form.contactPerson"
+                      type="text"
+                      data-test-id="modalGenerateCsr-input-contactPerson"
+                    />
+                  </b-form-group>
+                </b-col>
+                <b-col lg="6">
+                  <b-form-group label-for="email-address">
+                    <template #label>
+                      {{ $t('pageCertificates.modal.emailAddress') }} -
+                      <span class="form-text d-inline">
+                        {{ $t('global.form.optional') }}
+                      </span>
+                    </template>
+                    <b-form-input
+                      id="email-address"
+                      v-model="form.emailAddress"
+                      type="text"
+                      data-test-id="modalGenerateCsr-input-emailAddress"
+                    />
+                  </b-form-group>
+                </b-col>
+              </b-row>
+              <b-row>
+                <b-col lg="12">
+                  <b-form-group label-for="alternate-name">
+                    <template #label>
+                      {{ $t('pageCertificates.modal.alternateName') }} -
+                      <span class="form-text d-inline">
+                        {{ $t('global.form.optional') }}
+                      </span>
+                    </template>
+                    <b-form-text id="alternate-name-help-block">
+                      {{ $t('pageCertificates.modal.alternateNameHelperText') }}
+                    </b-form-text>
+                    <b-form-tags
+                      v-model="form.alternateName"
+                      :remove-on-delete="true"
+                      :tag-pills="true"
+                      input-id="alternate-name"
+                      size="lg"
+                      separator=" "
+                      :input-attrs="{
+                        'aria-describedby': 'alternate-name-help-block',
+                      }"
+                      :duplicate-tag-text="
+                        $t('pageCertificates.modal.duplicateAlternateName')
+                      "
+                      placeholder=""
+                      data-test-id="modalGenerateCsr-input-alternateName"
+                    >
+                      <template #add-button-text>
+                        <icon-add /> {{ $t('global.action.add') }}
+                      </template>
+                    </b-form-tags>
+                  </b-form-group>
+                </b-col>
+              </b-row>
+            </b-col>
+            <b-col lg="3">
+              <b-row>
+                <b-col lg="12">
+                  <p class="col-form-label">
+                    {{ $t('pageCertificates.modal.privateKey') }}
+                  </p>
+                  <b-form-group
+                    :label="$t('pageCertificates.modal.keyPairAlgorithm')"
+                    label-for="key-pair-algorithm"
+                  >
+                    <b-form-select
+                      id="key-pair-algorithm"
+                      v-model="form.keyPairAlgorithm"
+                      data-test-id="modalGenerateCsr-select-keyPairAlgorithm"
+                      :options="keyPairAlgorithmOptions"
+                      :state="getValidationState($v.form.keyPairAlgorithm)"
+                      @input="$v.form.keyPairAlgorithm.$touch()"
+                    >
+                      <template #first>
+                        <b-form-select-option :value="null" disabled>
+                          {{ $t('global.form.selectAnOption') }}
+                        </b-form-select-option>
+                      </template>
+                    </b-form-select>
+                    <b-form-invalid-feedback role="alert">
+                      {{ $t('global.form.fieldRequired') }}
+                    </b-form-invalid-feedback>
+                  </b-form-group>
+                </b-col>
+              </b-row>
+              <b-row>
+                <b-col lg="12">
+                  <template v-if="$v.form.keyPairAlgorithm.$model === 'EC'">
+                    <b-form-group
+                      :label="$t('pageCertificates.modal.keyCurveId')"
+                      label-for="key-curve-id"
+                    >
+                      <b-form-select
+                        id="key-curve-id"
+                        v-model="form.keyCurveId"
+                        data-test-id="modalGenerateCsr-select-keyCurveId"
+                        :options="keyCurveIdOptions"
+                        :state="getValidationState($v.form.keyCurveId)"
+                        @input="$v.form.keyCurveId.$touch()"
+                      >
+                        <template #first>
+                          <b-form-select-option :value="null" disabled>
+                            {{ $t('global.form.selectAnOption') }}
+                          </b-form-select-option>
+                        </template>
+                      </b-form-select>
+                      <b-form-invalid-feedback role="alert">
+                        {{ $t('global.form.fieldRequired') }}
+                      </b-form-invalid-feedback>
+                    </b-form-group>
+                  </template>
+                  <template v-if="$v.form.keyPairAlgorithm.$model === 'RSA'">
+                    <b-form-group
+                      :label="$t('pageCertificates.modal.keyBitLength')"
+                      label-for="key-bit-length"
+                    >
+                      <b-form-select
+                        id="key-bit-length"
+                        v-model="form.keyBitLength"
+                        data-test-id="modalGenerateCsr-select-keyBitLength"
+                        :options="keyBitLengthOptions"
+                        :state="getValidationState($v.form.keyBitLength)"
+                        @input="$v.form.keyBitLength.$touch()"
+                      >
+                        <template #first>
+                          <b-form-select-option :value="null" disabled>
+                            {{ $t('global.form.selectAnOption') }}
+                          </b-form-select-option>
+                        </template>
+                      </b-form-select>
+                      <b-form-invalid-feedback role="alert">
+                        {{ $t('global.form.fieldRequired') }}
+                      </b-form-invalid-feedback>
+                    </b-form-group>
+                  </template>
+                </b-col>
+              </b-row>
+            </b-col>
+          </b-row>
+        </b-container>
+      </b-form>
+      <template #modal-footer="{ ok, cancel }">
+        <b-button variant="secondary" @click="cancel()">
+          {{ $t('global.action.cancel') }}
+        </b-button>
+        <b-button
+          form="generate-csr-form"
+          type="submit"
+          variant="primary"
+          data-test-id="modalGenerateCsr-button-ok"
+          @click="ok()"
+        >
+          {{ $t('pageCertificates.generateCsr') }}
+        </b-button>
+      </template>
+    </b-modal>
+    <b-modal
+      id="csr-string"
+      no-stacking
+      size="lg"
+      :title="$t('pageCertificates.modal.certificateSigningRequest')"
+      @hidden="onHiddenCsrStringModal"
+    >
+      {{ csrString }}
+      <template #modal-footer>
+        <b-btn variant="secondary" @click="copyCsrString">
+          <template v-if="csrStringCopied">
+            <icon-checkmark />
+            {{ $t('global.status.copied') }}
+          </template>
+          <template v-else>
+            {{ $t('global.action.copy') }}
+          </template>
+        </b-btn>
+        <a
+          :href="`data:text/json;charset=utf-8,${csrString}`"
+          download="certificate.txt"
+          class="btn btn-primary"
+        >
+          {{ $t('global.action.download') }}
+        </a>
+      </template>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import IconAdd from '@carbon/icons-vue/es/add--alt/20';
+import IconCheckmark from '@carbon/icons-vue/es/checkmark/20';
+
+import { required, requiredIf } from 'vuelidate/lib/validators';
+
+import { COUNTRY_LIST } from './CsrCountryCodes';
+import { CERTIFICATE_TYPES } from '@/store/modules/SecurityAndAccess/CertificatesStore';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+
+export default {
+  name: 'ModalGenerateCsr',
+  components: { IconAdd, IconCheckmark },
+  mixins: [BVToastMixin, VuelidateMixin],
+  data() {
+    return {
+      form: {
+        certificateType: null,
+        country: null,
+        state: null,
+        city: null,
+        companyName: null,
+        companyUnit: null,
+        commonName: null,
+        challengePassword: null,
+        contactPerson: null,
+        emailAddress: null,
+        alternateName: [],
+        keyPairAlgorithm: null,
+        keyCurveId: null,
+        keyBitLength: null,
+      },
+      certificateOptions: CERTIFICATE_TYPES.reduce((arr, cert) => {
+        if (cert.type === 'TrustStore Certificate') return arr;
+        arr.push({
+          text: cert.label,
+          value: cert.type,
+        });
+        return arr;
+      }, []),
+      countryOptions: COUNTRY_LIST.map((country) => ({
+        text: country.label,
+        value: country.code,
+      })),
+      keyPairAlgorithmOptions: ['EC', 'RSA'],
+      keyCurveIdOptions: ['prime256v1', 'secp521r1', 'secp384r1'],
+      keyBitLengthOptions: [2048],
+      csrString: '',
+      csrStringCopied: false,
+    };
+  },
+  validations: {
+    form: {
+      certificateType: { required },
+      country: { required },
+      state: { required },
+      city: { required },
+      companyName: { required },
+      companyUnit: { required },
+      commonName: { required },
+      challengePassword: {},
+      contactPerson: {},
+      emailAddress: {},
+      alternateName: {},
+      keyPairAlgorithm: { required },
+      keyCurveId: {
+        reuired: requiredIf(function (form) {
+          return form.keyPairAlgorithm === 'EC';
+        }),
+      },
+      keyBitLength: {
+        reuired: requiredIf(function (form) {
+          return form.keyPairAlgorithm === 'RSA';
+        }),
+      },
+    },
+  },
+  methods: {
+    handleSubmit() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.$store
+        .dispatch('certificates/generateCsr', this.form)
+        .then(({ data: { CSRString } }) => {
+          this.csrString = CSRString;
+          this.$bvModal.show('csr-string');
+          this.$v.$reset();
+        });
+    },
+    resetForm() {
+      for (let key of Object.keys(this.form)) {
+        if (key === 'alternateName') {
+          this.form[key] = [];
+        } else {
+          this.form[key] = null;
+        }
+      }
+    },
+    onOkGenerateCsrModal(bvModalEvt) {
+      // prevent modal close
+      bvModalEvt.preventDefault();
+      this.handleSubmit();
+    },
+    onHiddenCsrStringModal() {
+      this.csrString = '';
+      this.resetForm();
+    },
+    copyCsrString(bvModalEvt) {
+      // prevent modal close
+      bvModalEvt.preventDefault();
+      navigator.clipboard.writeText(this.csrString).then(() => {
+        // Show copied text for 5 seconds
+        this.csrStringCopied = true;
+        setTimeout(() => {
+          this.csrStringCopied = false;
+        }, 5000 /*5 seconds*/);
+      });
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/SecurityAndAccess/Certificates/ModalUploadCertificate.vue b/src/views/_sila/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
new file mode 100644
index 00000000..f4db7a26
--- /dev/null
+++ b/src/views/_sila/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
@@ -0,0 +1,168 @@
+<template>
+  <b-modal id="upload-certificate" ref="modal" @ok="onOk" @hidden="resetForm">
+    <template #modal-title>
+      <template v-if="certificate">
+        {{ $t('pageCertificates.replaceCertificate') }}
+      </template>
+      <template v-else>
+        {{ $t('pageCertificates.addNewCertificate') }}
+      </template>
+    </template>
+    <b-form>
+      <!-- Replace Certificate type -->
+      <template v-if="certificate !== null">
+        <dl class="mb-4">
+          <dt>{{ $t('pageCertificates.modal.certificateType') }}</dt>
+          <dd>{{ certificate.certificate }}</dd>
+        </dl>
+      </template>
+
+      <!-- Add new Certificate type -->
+      <template v-else>
+        <b-form-group
+          :label="$t('pageCertificates.modal.certificateType')"
+          label-for="certificate-type"
+        >
+          <b-form-select
+            id="certificate-type"
+            v-model="form.certificateType"
+            :options="certificateOptions"
+            :state="getValidationState($v.form.certificateType)"
+            @input="$v.form.certificateType.$touch()"
+          >
+          </b-form-select>
+          <b-form-invalid-feedback role="alert">
+            <template v-if="!$v.form.certificateType.required">
+              {{ $t('global.form.fieldRequired') }}
+            </template>
+          </b-form-invalid-feedback>
+        </b-form-group>
+      </template>
+
+      <b-form-group :label="$t('pageCertificates.modal.certificateFile')">
+        <form-file
+          id="certificate-file"
+          v-model="form.file"
+          accept=".pem"
+          :state="getValidationState($v.form.file)"
+        >
+          <template #invalid>
+            <b-form-invalid-feedback role="alert">
+              {{ $t('global.form.required') }}
+            </b-form-invalid-feedback>
+          </template>
+        </form-file>
+      </b-form-group>
+    </b-form>
+    <template #modal-ok>
+      <template v-if="certificate">
+        {{ $t('global.action.replace') }}
+      </template>
+      <template v-else>
+        {{ $t('global.action.add') }}
+      </template>
+    </template>
+    <template #modal-cancel>
+      {{ $t('global.action.cancel') }}
+    </template>
+  </b-modal>
+</template>
+
+<script>
+import { required, requiredIf } from 'vuelidate/lib/validators';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+
+import FormFile from '@/components/Global/FormFile';
+
+export default {
+  components: { FormFile },
+  mixins: [VuelidateMixin],
+  props: {
+    certificate: {
+      type: Object,
+      default: null,
+      validator: (prop) => {
+        if (prop === null) return true;
+        return (
+          Object.prototype.hasOwnProperty.call(prop, 'type') &&
+          Object.prototype.hasOwnProperty.call(prop, 'certificate')
+        );
+      },
+    },
+  },
+  data() {
+    return {
+      form: {
+        certificateType: null,
+        file: null,
+      },
+    };
+  },
+  computed: {
+    certificateTypes() {
+      return this.$store.getters['certificates/availableUploadTypes'];
+    },
+    certificateOptions() {
+      return this.certificateTypes.map(({ type, label }) => {
+        return {
+          text: label,
+          value: type,
+        };
+      });
+    },
+  },
+  watch: {
+    certificateOptions: function (options) {
+      if (options.length) {
+        this.form.certificateType = options[0].value;
+      }
+    },
+  },
+  validations() {
+    return {
+      form: {
+        certificateType: {
+          required: requiredIf(function () {
+            return !this.certificate;
+          }),
+        },
+        file: {
+          required,
+        },
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.$emit('ok', {
+        addNew: !this.certificate,
+        file: this.form.file,
+        location: this.certificate ? this.certificate.location : null,
+        type: this.certificate
+          ? this.certificate.type
+          : this.form.certificateType,
+      });
+      this.closeModal();
+    },
+    closeModal() {
+      this.$nextTick(() => {
+        this.$refs.modal.hide();
+      });
+    },
+    resetForm() {
+      this.form.certificateType = this.certificateOptions.length
+        ? this.certificateOptions[0].value
+        : null;
+      this.form.file = null;
+      this.$v.$reset();
+    },
+    onOk(bvModalEvt) {
+      // prevent modal close
+      bvModalEvt.preventDefault();
+      this.handleSubmit();
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/SecurityAndAccess/Certificates/index.js b/src/views/_sila/SecurityAndAccess/Certificates/index.js
new file mode 100644
index 00000000..aff57b59
--- /dev/null
+++ b/src/views/_sila/SecurityAndAccess/Certificates/index.js
@@ -0,0 +1,2 @@
+import Certificates from './Certificates.vue';
+export default Certificates;
diff --git a/src/views/_sila/SecurityAndAccess/Ldap/Ldap.vue b/src/views/_sila/SecurityAndAccess/Ldap/Ldap.vue
new file mode 100644
index 00000000..1f2108de
--- /dev/null
+++ b/src/views/_sila/SecurityAndAccess/Ldap/Ldap.vue
@@ -0,0 +1,435 @@
+<template>
+  <b-container fluid="xl">
+    <page-title :description="$t('pageLdap.pageDescription')" />
+    <page-section :section-title="$t('pageLdap.settings')">
+      <b-form novalidate @submit.prevent="handleSubmit">
+        <b-row>
+          <b-col>
+            <b-form-group
+              class="mb-3"
+              :label="$t('pageLdap.form.ldapAuthentication')"
+              :disabled="loading"
+            >
+              <b-form-checkbox
+                v-model="form.ldapAuthenticationEnabled"
+                data-test-id="ldap-checkbox-ldapAuthenticationEnabled"
+                @change="onChangeldapAuthenticationEnabled"
+              >
+                {{ $t('global.action.enable') }}
+              </b-form-checkbox>
+            </b-form-group>
+          </b-col>
+        </b-row>
+        <div class="form-background p-3">
+          <b-form-group
+            class="m-0"
+            :label="$t('pageLdap.ariaLabel.ldapSettings')"
+            label-class="sr-only"
+            :disabled="!form.ldapAuthenticationEnabled || loading"
+          >
+            <b-row>
+              <b-col md="3" lg="4" xl="3">
+                <b-form-group
+                  class="mb-4"
+                  :label="$t('pageLdap.form.secureLdapUsingSsl')"
+                >
+                  <b-form-text id="enable-secure-help-block">
+                    {{ $t('pageLdap.form.secureLdapHelper') }}
+                  </b-form-text>
+                  <b-form-checkbox
+                    id="enable-secure-ldap"
+                    v-model="form.secureLdapEnabled"
+                    aria-describedby="enable-secure-help-block"
+                    data-test-id="ldap-checkbox-secureLdapEnabled"
+                    :disabled="
+                      !caCertificateExpiration || !ldapCertificateExpiration
+                    "
+                    @change="$v.form.secureLdapEnabled.$touch()"
+                  >
+                    {{ $t('global.action.enable') }}
+                  </b-form-checkbox>
+                </b-form-group>
+                <dl>
+                  <dt>{{ $t('pageLdap.form.caCertificateValidUntil') }}</dt>
+                  <dd v-if="caCertificateExpiration">
+                    {{ caCertificateExpiration | formatDate }}
+                  </dd>
+                  <dd v-else>--</dd>
+                  <dt>{{ $t('pageLdap.form.ldapCertificateValidUntil') }}</dt>
+                  <dd v-if="ldapCertificateExpiration">
+                    {{ ldapCertificateExpiration | formatDate }}
+                  </dd>
+                  <dd v-else>--</dd>
+                </dl>
+                <b-link
+                  class="d-inline-block mb-4 m-md-0"
+                  to="/security-and-access/certificates"
+                >
+                  {{ $t('pageLdap.form.manageSslCertificates') }}
+                </b-link>
+              </b-col>
+              <b-col md="9" lg="8" xl="9">
+                <b-row>
+                  <b-col>
+                    <b-form-group :label="$t('pageLdap.form.serviceType')">
+                      <b-form-radio
+                        v-model="form.activeDirectoryEnabled"
+                        data-test-id="ldap-radio-activeDirectoryEnabled"
+                        :value="false"
+                        @change="onChangeServiceType"
+                      >
+                        OpenLDAP
+                      </b-form-radio>
+                      <b-form-radio
+                        v-model="form.activeDirectoryEnabled"
+                        data-test-id="ldap-radio-activeDirectoryEnabled"
+                        :value="true"
+                        @change="onChangeServiceType"
+                      >
+                        Active Directory
+                      </b-form-radio>
+                    </b-form-group>
+                  </b-col>
+                </b-row>
+                <b-row>
+                  <b-col sm="6" xl="4">
+                    <b-form-group label-for="server-uri">
+                      <template #label>
+                        {{ $t('pageLdap.form.serverUri') }}
+                        <info-tooltip
+                          :title="$t('pageLdap.form.serverUriTooltip')"
+                        />
+                      </template>
+                      <b-input-group :prepend="ldapProtocol">
+                        <b-form-input
+                          id="server-uri"
+                          v-model="form.serverUri"
+                          data-test-id="ldap-input-serverUri"
+                          :state="getValidationState($v.form.serverUri)"
+                          @change="$v.form.serverUri.$touch()"
+                        />
+                        <b-form-invalid-feedback role="alert">
+                          {{ $t('global.form.fieldRequired') }}
+                        </b-form-invalid-feedback>
+                      </b-input-group>
+                    </b-form-group>
+                  </b-col>
+                  <b-col sm="6" xl="4">
+                    <b-form-group
+                      :label="$t('pageLdap.form.bindDn')"
+                      label-for="bind-dn"
+                    >
+                      <b-form-input
+                        id="bind-dn"
+                        v-model="form.bindDn"
+                        data-test-id="ldap-input-bindDn"
+                        :state="getValidationState($v.form.bindDn)"
+                        @change="$v.form.bindDn.$touch()"
+                      />
+                      <b-form-invalid-feedback role="alert">
+                        {{ $t('global.form.fieldRequired') }}
+                      </b-form-invalid-feedback>
+                    </b-form-group>
+                  </b-col>
+                  <b-col sm="6" xl="4">
+                    <b-form-group
+                      :label="$t('pageLdap.form.bindPassword')"
+                      label-for="bind-password"
+                    >
+                      <input-password-toggle
+                        data-test-id="ldap-input-togglePassword"
+                      >
+                        <b-form-input
+                          id="bind-password"
+                          v-model="form.bindPassword"
+                          type="password"
+                          :state="getValidationState($v.form.bindPassword)"
+                          class="form-control-with-button"
+                          @change="$v.form.bindPassword.$touch()"
+                        />
+                        <b-form-invalid-feedback role="alert">
+                          {{ $t('global.form.fieldRequired') }}
+                        </b-form-invalid-feedback>
+                      </input-password-toggle>
+                    </b-form-group>
+                  </b-col>
+                  <b-col sm="6" xl="4">
+                    <b-form-group
+                      :label="$t('pageLdap.form.baseDn')"
+                      label-for="base-dn"
+                    >
+                      <b-form-input
+                        id="base-dn"
+                        v-model="form.baseDn"
+                        data-test-id="ldap-input-baseDn"
+                        :state="getValidationState($v.form.baseDn)"
+                        @change="$v.form.baseDn.$touch()"
+                      />
+                      <b-form-invalid-feedback role="alert">
+                        {{ $t('global.form.fieldRequired') }}
+                      </b-form-invalid-feedback>
+                    </b-form-group>
+                  </b-col>
+                  <b-col sm="6" xl="4">
+                    <b-form-group label-for="user-id-attribute">
+                      <template #label>
+                        {{ $t('pageLdap.form.userIdAttribute') }} -
+                        <span class="form-text d-inline">
+                          {{ $t('global.form.optional') }}
+                        </span>
+                      </template>
+                      <b-form-input
+                        id="user-id-attribute"
+                        v-model="form.userIdAttribute"
+                        data-test-id="ldap-input-userIdAttribute"
+                        @change="$v.form.userIdAttribute.$touch()"
+                      />
+                    </b-form-group>
+                  </b-col>
+                  <b-col sm="6" xl="4">
+                    <b-form-group label-for="group-id-attribute">
+                      <template #label>
+                        {{ $t('pageLdap.form.groupIdAttribute') }} -
+                        <span class="form-text d-inline">
+                          {{ $t('global.form.optional') }}
+                        </span>
+                      </template>
+                      <b-form-input
+                        id="group-id-attribute"
+                        v-model="form.groupIdAttribute"
+                        data-test-id="ldap-input-groupIdAttribute"
+                        @change="$v.form.groupIdAttribute.$touch()"
+                      />
+                    </b-form-group>
+                  </b-col>
+                </b-row>
+              </b-col>
+            </b-row>
+          </b-form-group>
+        </div>
+        <b-row class="mt-4 mb-5">
+          <b-col>
+            <b-btn
+              variant="primary"
+              type="submit"
+              data-test-id="ldap-button-saveSettings"
+              :disabled="loading"
+            >
+              {{ $t('global.action.saveSettings') }}
+            </b-btn>
+          </b-col>
+        </b-row>
+      </b-form>
+    </page-section>
+
+    <!-- Role groups -->
+    <page-section :section-title="$t('pageLdap.roleGroups')">
+      <table-role-groups />
+    </page-section>
+  </b-container>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { find } from 'lodash';
+import { requiredIf } from 'vuelidate/lib/validators';
+
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin';
+import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
+import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import InfoTooltip from '@/components/Global/InfoTooltip';
+import TableRoleGroups from './TableRoleGroups';
+
+export default {
+  name: 'Ldap',
+  components: {
+    InfoTooltip,
+    InputPasswordToggle,
+    PageTitle,
+    PageSection,
+    TableRoleGroups,
+  },
+  mixins: [BVToastMixin, VuelidateMixin, LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      form: {
+        ldapAuthenticationEnabled: this.$store.getters['ldap/isServiceEnabled'],
+        secureLdapEnabled: false,
+        activeDirectoryEnabled: this.$store.getters[
+          'ldap/isActiveDirectoryEnabled'
+        ],
+        serverUri: '',
+        bindDn: '',
+        bindPassword: '',
+        baseDn: '',
+        userIdAttribute: '',
+        groupIdAttribute: '',
+        loading,
+      },
+    };
+  },
+  computed: {
+    ...mapGetters('ldap', [
+      'isServiceEnabled',
+      'isActiveDirectoryEnabled',
+      'ldap',
+      'activeDirectory',
+    ]),
+    sslCertificates() {
+      return this.$store.getters['certificates/allCertificates'];
+    },
+    caCertificateExpiration() {
+      const caCertificate = find(this.sslCertificates, {
+        type: 'TrustStore Certificate',
+      });
+      if (caCertificate === undefined) return null;
+      return caCertificate.validUntil;
+    },
+    ldapCertificateExpiration() {
+      const ldapCertificate = find(this.sslCertificates, {
+        type: 'LDAP Certificate',
+      });
+      if (ldapCertificate === undefined) return null;
+      return ldapCertificate.validUntil;
+    },
+    ldapProtocol() {
+      return this.form.secureLdapEnabled ? 'ldaps://' : 'ldap://';
+    },
+  },
+  watch: {
+    isServiceEnabled: function (value) {
+      this.form.ldapAuthenticationEnabled = value;
+    },
+    isActiveDirectoryEnabled: function (value) {
+      this.form.activeDirectoryEnabled = value;
+      this.setFormValues();
+    },
+  },
+  validations: {
+    form: {
+      ldapAuthenticationEnabled: {},
+      secureLdapEnabled: {},
+      activeDirectoryEnabled: {
+        required: requiredIf(function () {
+          return this.form.ldapAuthenticationEnabled;
+        }),
+      },
+      serverUri: {
+        required: requiredIf(function () {
+          return this.form.ldapAuthenticationEnabled;
+        }),
+      },
+      bindDn: {
+        required: requiredIf(function () {
+          return this.form.ldapAuthenticationEnabled;
+        }),
+      },
+      bindPassword: {
+        required: requiredIf(function () {
+          return this.form.ldapAuthenticationEnabled;
+        }),
+      },
+      baseDn: {
+        required: requiredIf(function () {
+          return this.form.ldapAuthenticationEnabled;
+        }),
+      },
+      userIdAttribute: {},
+      groupIdAttribute: {},
+    },
+  },
+  created() {
+    this.startLoader();
+    this.$store
+      .dispatch('ldap/getAccountSettings')
+      .finally(() => this.endLoader());
+    this.$store
+      .dispatch('certificates/getCertificates')
+      .finally(() => this.endLoader());
+    this.setFormValues();
+  },
+  methods: {
+    setFormValues(serviceType) {
+      if (!serviceType) {
+        serviceType = this.isActiveDirectoryEnabled
+          ? this.activeDirectory
+          : this.ldap;
+      }
+      const {
+        serviceAddress = '',
+        bindDn = '',
+        baseDn = '',
+        userAttribute = '',
+        groupsAttribute = '',
+      } = serviceType;
+      const secureLdap =
+        serviceAddress && serviceAddress.includes('ldaps://') ? true : false;
+      const serverUri = serviceAddress
+        ? serviceAddress.replace(/ldaps?:\/\//, '')
+        : '';
+      this.form.secureLdapEnabled = secureLdap;
+      this.form.serverUri = serverUri;
+      this.form.bindDn = bindDn;
+      this.form.bindPassword = '';
+      this.form.baseDn = baseDn;
+      this.form.userIdAttribute = userAttribute;
+      this.form.groupIdAttribute = groupsAttribute;
+    },
+    handleSubmit() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      const data = {
+        serviceEnabled: this.form.ldapAuthenticationEnabled,
+        activeDirectoryEnabled: this.form.activeDirectoryEnabled,
+        serviceAddress: `${this.ldapProtocol}${this.form.serverUri}`,
+        bindDn: this.form.bindDn,
+        bindPassword: this.form.bindPassword,
+        baseDn: this.form.baseDn,
+        userIdAttribute: this.form.userIdAttribute,
+        groupIdAttribute: this.form.groupIdAttribute,
+      };
+      this.startLoader();
+      this.$store
+        .dispatch('ldap/saveAccountSettings', data)
+        .then((success) => {
+          this.successToast(success);
+        })
+        .catch(({ message }) => {
+          this.errorToast(message);
+        })
+        .finally(() => {
+          this.form.bindPassword = '';
+          this.$v.form.$reset();
+          this.endLoader();
+        });
+    },
+    onChangeServiceType(isActiveDirectoryEnabled) {
+      this.$v.form.activeDirectoryEnabled.$touch();
+      const serviceType = isActiveDirectoryEnabled
+        ? this.activeDirectory
+        : this.ldap;
+      // Set form values according to user selected
+      // service type
+      this.setFormValues(serviceType);
+    },
+    onChangeldapAuthenticationEnabled(isServiceEnabled) {
+      this.$v.form.ldapAuthenticationEnabled.$touch();
+      if (!isServiceEnabled) {
+        // Request will fail if sent with empty values.
+        // The frontend only checks for required fields
+        // when the service is enabled. This is to prevent
+        // an error if a user clears any properties then
+        // disables the service.
+        this.setFormValues();
+      }
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue b/src/views/_sila/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
new file mode 100644
index 00000000..6ea2561a
--- /dev/null
+++ b/src/views/_sila/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
@@ -0,0 +1,164 @@
+<template>
+  <b-modal id="modal-role-group" ref="modal" @ok="onOk" @hidden="resetForm">
+    <template #modal-title>
+      <template v-if="roleGroup">
+        {{ $t('pageLdap.modal.editRoleGroup') }}
+      </template>
+      <template v-else>
+        {{ $t('pageLdap.modal.addNewRoleGroup') }}
+      </template>
+    </template>
+    <b-container>
+      <b-row>
+        <b-col sm="8">
+          <b-form id="role-group" @submit.prevent="handleSubmit">
+            <!-- Edit role group -->
+            <template v-if="roleGroup !== null">
+              <dl class="mb-4">
+                <dt>{{ $t('pageLdap.modal.groupName') }}</dt>
+                <dd>{{ form.groupName }}</dd>
+              </dl>
+            </template>
+
+            <!-- Add new role group -->
+            <template v-else>
+              <b-form-group
+                :label="$t('pageLdap.modal.groupName')"
+                label-for="role-group-name"
+              >
+                <b-form-input
+                  id="role-group-name"
+                  v-model="form.groupName"
+                  :state="getValidationState($v.form.groupName)"
+                  @input="$v.form.groupName.$touch()"
+                />
+                <b-form-invalid-feedback role="alert">
+                  {{ $t('global.form.fieldRequired') }}
+                </b-form-invalid-feedback>
+              </b-form-group>
+            </template>
+
+            <b-form-group
+              :label="$t('pageLdap.modal.groupPrivilege')"
+              label-for="privilege"
+            >
+              <b-form-select
+                id="privilege"
+                v-model="form.groupPrivilege"
+                :options="accountRoles"
+                :state="getValidationState($v.form.groupPrivilege)"
+                @input="$v.form.groupPrivilege.$touch()"
+              >
+                <template v-if="!roleGroup" #first>
+                  <b-form-select-option :value="null" disabled>
+                    {{ $t('global.form.selectAnOption') }}
+                  </b-form-select-option>
+                </template>
+              </b-form-select>
+              <b-form-invalid-feedback role="alert">
+                {{ $t('global.form.fieldRequired') }}
+              </b-form-invalid-feedback>
+            </b-form-group>
+          </b-form>
+        </b-col>
+      </b-row>
+    </b-container>
+    <template #modal-footer="{ cancel }">
+      <b-button variant="secondary" @click="cancel()">
+        {{ $t('global.action.cancel') }}
+      </b-button>
+      <b-button form="role-group" type="submit" variant="primary" @click="onOk">
+        <template v-if="roleGroup">
+          {{ $t('global.action.save') }}
+        </template>
+        <template v-else>
+          {{ $t('global.action.add') }}
+        </template>
+      </b-button>
+    </template>
+  </b-modal>
+</template>
+
+<script>
+import { required, requiredIf } from 'vuelidate/lib/validators';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+
+export default {
+  mixins: [VuelidateMixin],
+  props: {
+    roleGroup: {
+      type: Object,
+      default: null,
+      validator: (prop) => {
+        if (prop === null) return true;
+        return (
+          Object.prototype.hasOwnProperty.call(prop, 'groupName') &&
+          Object.prototype.hasOwnProperty.call(prop, 'groupPrivilege')
+        );
+      },
+    },
+  },
+  data() {
+    return {
+      form: {
+        groupName: null,
+        groupPrivilege: null,
+      },
+    };
+  },
+  computed: {
+    accountRoles() {
+      return this.$store.getters['userManagement/accountRoles'];
+    },
+  },
+  watch: {
+    roleGroup: function (value) {
+      if (value === null) return;
+      this.form.groupName = value.groupName;
+      this.form.groupPrivilege = value.groupPrivilege;
+    },
+  },
+  validations() {
+    return {
+      form: {
+        groupName: {
+          required: requiredIf(function () {
+            return !this.roleGroup;
+          }),
+        },
+        groupPrivilege: {
+          required,
+        },
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.$emit('ok', {
+        addNew: !this.roleGroup,
+        groupName: this.form.groupName,
+        groupPrivilege: this.form.groupPrivilege,
+      });
+      this.closeModal();
+    },
+    closeModal() {
+      this.$nextTick(() => {
+        this.$refs.modal.hide();
+      });
+    },
+    resetForm() {
+      this.form.groupName = null;
+      this.form.groupPrivilege = null;
+      this.$v.$reset();
+      this.$emit('hidden');
+    },
+    onOk(bvModalEvt) {
+      // prevent modal close
+      bvModalEvt.preventDefault();
+      this.handleSubmit();
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/SecurityAndAccess/Ldap/TableRoleGroups.vue b/src/views/_sila/SecurityAndAccess/Ldap/TableRoleGroups.vue
new file mode 100644
index 00000000..5ae3e3d1
--- /dev/null
+++ b/src/views/_sila/SecurityAndAccess/Ldap/TableRoleGroups.vue
@@ -0,0 +1,269 @@
+<template>
+  <div>
+    <b-row>
+      <b-col md="9">
+        <alert :show="isServiceEnabled === false" variant="info">
+          {{ $t('pageLdap.tableRoleGroups.alertContent') }}
+        </alert>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col class="text-right" md="9">
+        <b-btn
+          variant="primary"
+          :disabled="!isServiceEnabled"
+          @click="initRoleGroupModal(null)"
+        >
+          <icon-add />
+          {{ $t('pageLdap.addRoleGroup') }}
+        </b-btn>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col md="9">
+        <table-toolbar
+          ref="toolbar"
+          :selected-items-count="selectedRows.length"
+          :actions="batchActions"
+          @clear-selected="clearSelectedRows($refs.table)"
+          @batch-action="onBatchAction"
+        />
+        <b-table
+          ref="table"
+          responsive
+          selectable
+          show-empty
+          no-select-on-click
+          hover
+          no-sort-reset
+          sort-icon-left
+          :busy="isBusy"
+          :items="tableItems"
+          :fields="fields"
+          :empty-text="$t('global.table.emptyMessage')"
+          @row-selected="onRowSelected($event, tableItems.length)"
+        >
+          <!-- Checkbox column -->
+          <template #head(checkbox)>
+            <b-form-checkbox
+              v-model="tableHeaderCheckboxModel"
+              :indeterminate="tableHeaderCheckboxIndeterminate"
+              :disabled="!isServiceEnabled"
+              @change="onChangeHeaderCheckbox($refs.table)"
+            >
+              <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+            </b-form-checkbox>
+          </template>
+          <template #cell(checkbox)="row">
+            <b-form-checkbox
+              v-model="row.rowSelected"
+              :disabled="!isServiceEnabled"
+              @change="toggleSelectRow($refs.table, row.index)"
+            >
+              <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+            </b-form-checkbox>
+          </template>
+
+          <!-- table actions column -->
+          <template #cell(actions)="{ item }">
+            <table-row-action
+              v-for="(action, index) in item.actions"
+              :key="index"
+              :value="action.value"
+              :enabled="action.enabled"
+              :title="action.title"
+              @click-table-action="onTableRowAction($event, item)"
+            >
+              <template #icon>
+                <icon-edit v-if="action.value === 'edit'" />
+                <icon-trashcan v-if="action.value === 'delete'" />
+              </template>
+            </table-row-action>
+          </template>
+        </b-table>
+      </b-col>
+    </b-row>
+    <modal-add-role-group
+      :role-group="activeRoleGroup"
+      @ok="saveRoleGroup"
+      @hidden="activeRoleGroup = null"
+    />
+  </div>
+</template>
+
+<script>
+import IconEdit from '@carbon/icons-vue/es/edit/20';
+import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
+import IconAdd from '@carbon/icons-vue/es/add--alt/20';
+import { mapGetters } from 'vuex';
+
+import Alert from '@/components/Global/Alert';
+import TableToolbar from '@/components/Global/TableToolbar';
+import TableRowAction from '@/components/Global/TableRowAction';
+import BVTableSelectableMixin, {
+  selectedRows,
+  tableHeaderCheckboxModel,
+  tableHeaderCheckboxIndeterminate,
+} from '@/components/Mixins/BVTableSelectableMixin';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import ModalAddRoleGroup from './ModalAddRoleGroup';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+
+export default {
+  components: {
+    Alert,
+    IconAdd,
+    IconEdit,
+    IconTrashcan,
+    ModalAddRoleGroup,
+    TableRowAction,
+    TableToolbar,
+  },
+  mixins: [BVTableSelectableMixin, BVToastMixin, LoadingBarMixin],
+  data() {
+    return {
+      isBusy: true,
+      activeRoleGroup: null,
+      fields: [
+        {
+          key: 'checkbox',
+          sortable: false,
+        },
+        {
+          key: 'groupName',
+          sortable: true,
+          label: this.$t('pageLdap.tableRoleGroups.groupName'),
+        },
+        {
+          key: 'groupPrivilege',
+          sortable: true,
+          label: this.$t('pageLdap.tableRoleGroups.groupPrivilege'),
+        },
+        {
+          key: 'actions',
+          sortable: false,
+          label: '',
+          tdClass: 'text-right',
+        },
+      ],
+      batchActions: [
+        {
+          value: 'delete',
+          label: this.$t('global.action.delete'),
+        },
+      ],
+      selectedRows: selectedRows,
+      tableHeaderCheckboxModel: tableHeaderCheckboxModel,
+      tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
+    };
+  },
+  computed: {
+    ...mapGetters('ldap', ['isServiceEnabled', 'enabledRoleGroups']),
+    tableItems() {
+      return this.enabledRoleGroups.map(({ LocalRole, RemoteGroup }) => {
+        return {
+          groupName: RemoteGroup,
+          groupPrivilege: LocalRole,
+          actions: [
+            {
+              value: 'edit',
+              title: this.$t('global.action.edit'),
+              enabled: this.isServiceEnabled,
+            },
+            {
+              value: 'delete',
+              title: this.$t('global.action.delete'),
+              enabled: this.isServiceEnabled,
+            },
+          ],
+        };
+      });
+    },
+  },
+  created() {
+    this.$store.dispatch('userManagement/getAccountRoles').finally(() => {
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    onBatchAction() {
+      this.$bvModal
+        .msgBoxConfirm(
+          this.$tc(
+            'pageLdap.modal.deleteRoleGroupBatchConfirmMessage',
+            this.selectedRows.length
+          ),
+          {
+            title: this.$t('pageLdap.modal.deleteRoleGroup'),
+            okTitle: this.$t('global.action.delete'),
+            cancelTitle: this.$t('global.action.cancel'),
+          }
+        )
+        .then((deleteConfirmed) => {
+          if (deleteConfirmed) {
+            this.startLoader();
+            this.$store
+              .dispatch('ldap/deleteRoleGroup', {
+                roleGroups: this.selectedRows,
+              })
+              .then((success) => this.successToast(success))
+              .catch(({ message }) => this.errorToast(message))
+              .finally(() => this.endLoader());
+          }
+        });
+    },
+    onTableRowAction(action, row) {
+      switch (action) {
+        case 'edit':
+          this.initRoleGroupModal(row);
+          break;
+        case 'delete':
+          this.$bvModal
+            .msgBoxConfirm(
+              this.$t('pageLdap.modal.deleteRoleGroupConfirmMessage', {
+                groupName: row.groupName,
+              }),
+              {
+                title: this.$t('pageLdap.modal.deleteRoleGroup'),
+                okTitle: this.$t('global.action.delete'),
+                cancelTitle: this.$t('global.action.cancel'),
+              }
+            )
+            .then((deleteConfirmed) => {
+              if (deleteConfirmed) {
+                this.startLoader();
+                this.$store
+                  .dispatch('ldap/deleteRoleGroup', { roleGroups: [row] })
+                  .then((success) => this.successToast(success))
+                  .catch(({ message }) => this.errorToast(message))
+                  .finally(() => this.endLoader());
+              }
+            });
+          break;
+      }
+    },
+    initRoleGroupModal(roleGroup) {
+      this.activeRoleGroup = roleGroup;
+      this.$bvModal.show('modal-role-group');
+    },
+    saveRoleGroup({ addNew, groupName, groupPrivilege }) {
+      this.activeRoleGroup = null;
+      const data = { groupName, groupPrivilege };
+      this.startLoader();
+      if (addNew) {
+        this.$store
+          .dispatch('ldap/addNewRoleGroup', data)
+          .then((success) => this.successToast(success))
+          .catch(({ message }) => this.errorToast(message))
+          .finally(() => this.endLoader());
+      } else {
+        this.$store
+          .dispatch('ldap/saveRoleGroup', data)
+          .then((success) => this.successToast(success))
+          .catch(({ message }) => this.errorToast(message))
+          .finally(() => this.endLoader());
+      }
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/SecurityAndAccess/Ldap/index.js b/src/views/_sila/SecurityAndAccess/Ldap/index.js
new file mode 100644
index 00000000..6ae3abfc
--- /dev/null
+++ b/src/views/_sila/SecurityAndAccess/Ldap/index.js
@@ -0,0 +1,2 @@
+import Ldap from './Ldap.vue';
+export default Ldap;
diff --git a/src/views/_sila/SecurityAndAccess/Policies/Policies.vue b/src/views/_sila/SecurityAndAccess/Policies/Policies.vue
new file mode 100644
index 00000000..1dc197c7
--- /dev/null
+++ b/src/views/_sila/SecurityAndAccess/Policies/Policies.vue
@@ -0,0 +1,213 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+    <b-row>
+      <b-col md="8">
+        <b-row v-if="!modifySSHPolicyDisabled" class="setting-section">
+          <b-col class="d-flex align-items-center justify-content-between">
+            <dl class="mr-3 w-75">
+              <dt>{{ $t('pagePolicies.ssh') }}</dt>
+              <dd>
+                {{ $t('pagePolicies.sshDescription') }}
+              </dd>
+            </dl>
+            <b-form-checkbox
+              id="sshSwitch"
+              v-model="sshProtocolState"
+              data-test-id="policies-toggle-bmcShell"
+              switch
+              @change="changeSshProtocolState"
+            >
+              <span class="sr-only">
+                {{ $t('pagePolicies.ssh') }}
+              </span>
+              <span v-if="sshProtocolState">
+                {{ $t('global.status.enabled') }}
+              </span>
+              <span v-else>{{ $t('global.status.disabled') }}</span>
+            </b-form-checkbox>
+          </b-col>
+        </b-row>
+        <b-row class="setting-section">
+          <b-col class="d-flex align-items-center justify-content-between">
+            <dl class="mt-3 mr-3 w-75">
+              <dt>{{ $t('pagePolicies.ipmi') }}</dt>
+              <dd>
+                {{ $t('pagePolicies.ipmiDescription') }}
+              </dd>
+            </dl>
+            <b-form-checkbox
+              id="ipmiSwitch"
+              v-model="ipmiProtocolState"
+              data-test-id="polices-toggle-networkIpmi"
+              switch
+              @change="changeIpmiProtocolState"
+            >
+              <span class="sr-only">
+                {{ $t('pagePolicies.ipmi') }}
+              </span>
+              <span v-if="ipmiProtocolState">
+                {{ $t('global.status.enabled') }}
+              </span>
+              <span v-else>{{ $t('global.status.disabled') }}</span>
+            </b-form-checkbox>
+          </b-col>
+        </b-row>
+        <b-row class="setting-section">
+          <b-col class="d-flex align-items-center justify-content-between">
+            <dl class="mt-3 mr-3 w-75">
+              <dt>{{ $t('pagePolicies.vtpm') }}</dt>
+              <dd>
+                {{ $t('pagePolicies.vtpmDescription') }}
+              </dd>
+            </dl>
+            <b-form-checkbox
+              id="vtpmSwitch"
+              v-model="vtpmState"
+              data-test-id="policies-toggle-vtpm"
+              switch
+              @change="changeVtpmState"
+            >
+              <span class="sr-only">
+                {{ $t('pagePolicies.vtpm') }}
+              </span>
+              <span v-if="vtpmState">
+                {{ $t('global.status.enabled') }}
+              </span>
+              <span v-else>{{ $t('global.status.disabled') }}</span>
+            </b-form-checkbox>
+          </b-col>
+        </b-row>
+        <b-row class="setting-section">
+          <b-col class="d-flex align-items-center justify-content-between">
+            <dl class="mt-3 mr-3 w-75">
+              <dt>{{ $t('pagePolicies.rtad') }}</dt>
+              <dd>
+                {{ $t('pagePolicies.rtadDescription') }}
+              </dd>
+            </dl>
+            <b-form-checkbox
+              id="rtadSwitch"
+              v-model="rtadState"
+              data-test-id="policies-toggle-rtad"
+              switch
+              @change="changeRtadState"
+            >
+              <span class="sr-only">
+                {{ $t('pagePolicies.rtad') }}
+              </span>
+              <span v-if="rtadState">
+                {{ $t('global.status.enabled') }}
+              </span>
+              <span v-else>{{ $t('global.status.disabled') }}</span>
+            </b-form-checkbox>
+          </b-col>
+        </b-row>
+      </b-col>
+    </b-row>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+
+export default {
+  name: 'Policies',
+  components: { PageTitle },
+  mixins: [LoadingBarMixin, BVToastMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      modifySSHPolicyDisabled:
+        process.env.VUE_APP_MODIFY_SSH_POLICY_DISABLED === 'true',
+    };
+  },
+  computed: {
+    sshProtocolState: {
+      get() {
+        return this.$store.getters['policies/sshProtocolEnabled'];
+      },
+      set(newValue) {
+        return newValue;
+      },
+    },
+    ipmiProtocolState: {
+      get() {
+        return this.$store.getters['policies/ipmiProtocolEnabled'];
+      },
+      set(newValue) {
+        return newValue;
+      },
+    },
+    rtadState: {
+      get() {
+        if (this.$store.getters['policies/rtadEnabled'] === 'Enabled') {
+          return true;
+        } else {
+          return false;
+        }
+      },
+      set(newValue) {
+        return newValue;
+      },
+    },
+    vtpmState: {
+      get() {
+        if (this.$store.getters['policies/vtpmEnabled'] === 'Enabled') {
+          return true;
+        } else {
+          return false;
+        }
+      },
+      set(newValue) {
+        return newValue;
+      },
+    },
+  },
+  created() {
+    this.startLoader();
+    Promise.all([
+      this.$store.dispatch('policies/getBiosStatus'),
+      this.$store.dispatch('policies/getNetworkProtocolStatus'),
+    ]).finally(() => this.endLoader());
+  },
+  methods: {
+    changeIpmiProtocolState(state) {
+      this.$store
+        .dispatch('policies/saveIpmiProtocolState', state)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message));
+    },
+    changeSshProtocolState(state) {
+      this.$store
+        .dispatch('policies/saveSshProtocolState', state)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message));
+    },
+    changeRtadState(state) {
+      this.$store
+        .dispatch('policies/saveRtadState', state ? 'Enabled' : 'Disabled')
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message));
+    },
+    changeVtpmState(state) {
+      this.$store
+        .dispatch('policies/saveVtpmState', state ? 'Enabled' : 'Disabled')
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message));
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.setting-section {
+  border-bottom: 1px solid gray('300');
+}
+</style>
diff --git a/src/views/_sila/SecurityAndAccess/Policies/index.js b/src/views/_sila/SecurityAndAccess/Policies/index.js
new file mode 100644
index 00000000..77023908
--- /dev/null
+++ b/src/views/_sila/SecurityAndAccess/Policies/index.js
@@ -0,0 +1,2 @@
+import Policies from './Policies.vue';
+export default Policies;
diff --git a/src/views/_sila/SecurityAndAccess/Sessions/Sessions.vue b/src/views/_sila/SecurityAndAccess/Sessions/Sessions.vue
new file mode 100644
index 00000000..07ee725d
--- /dev/null
+++ b/src/views/_sila/SecurityAndAccess/Sessions/Sessions.vue
@@ -0,0 +1,294 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+    <b-row class="align-items-end">
+      <b-col sm="6" md="5" xl="4">
+        <search
+          :placeholder="$t('pageSessions.table.searchSessions')"
+          data-test-id="sessions-input-searchSessions"
+          @change-search="onChangeSearchInput"
+          @clear-search="onClearSearchInput"
+        />
+      </b-col>
+      <b-col sm="3" md="3" xl="2">
+        <table-cell-count
+          :filtered-items-count="filteredRows"
+          :total-number-of-cells="allConnections.length"
+        ></table-cell-count>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <table-toolbar
+          ref="toolbar"
+          :selected-items-count="selectedRows.length"
+          :actions="batchActions"
+          @clear-selected="clearSelectedRows($refs.table)"
+          @batch-action="onBatchAction"
+        >
+        </table-toolbar>
+        <b-table
+          id="table-session-logs"
+          ref="table"
+          responsive="md"
+          selectable
+          no-select-on-click
+          hover
+          show-empty
+          sort-by="clientID"
+          :busy="isBusy"
+          :fields="fields"
+          :items="allConnections"
+          :filter="searchFilter"
+          :empty-text="$t('global.table.emptyMessage')"
+          :per-page="perPage"
+          :current-page="currentPage"
+          @filtered="onFiltered"
+          @row-selected="onRowSelected($event, allConnections.length)"
+        >
+          <!-- Checkbox column -->
+          <template #head(checkbox)>
+            <b-form-checkbox
+              v-model="tableHeaderCheckboxModel"
+              data-test-id="sessions-checkbox-selectAll"
+              :indeterminate="tableHeaderCheckboxIndeterminate"
+              @change="onChangeHeaderCheckbox($refs.table)"
+            >
+              <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+            </b-form-checkbox>
+          </template>
+          <template #cell(checkbox)="row">
+            <b-form-checkbox
+              v-model="row.rowSelected"
+              :data-test-id="`sessions-checkbox-selectRow-${row.index}`"
+              @change="toggleSelectRow($refs.table, row.index)"
+            >
+              <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+            </b-form-checkbox>
+          </template>
+
+          <!-- Actions column -->
+          <template #cell(actions)="row" class="ml-3">
+            <table-row-action
+              v-for="(action, index) in row.item.actions"
+              :key="index"
+              :value="action.value"
+              :title="action.title"
+              :row-data="row.item"
+              :btn-icon-only="false"
+              :data-test-id="`sessions-button-disconnect-${row.index}`"
+              @click-table-action="onTableRowAction($event, row.item)"
+            ></table-row-action>
+          </template>
+        </b-table>
+      </b-col>
+    </b-row>
+
+    <!-- Table pagination -->
+    <b-row>
+      <b-col sm="6">
+        <b-form-group
+          class="table-pagination-select"
+          :label="$t('global.table.itemsPerPage')"
+          label-for="pagination-items-per-page"
+        >
+          <b-form-select
+            id="pagination-items-per-page"
+            v-model="perPage"
+            :options="itemsPerPageOptions"
+          />
+        </b-form-group>
+      </b-col>
+      <b-col sm="6">
+        <b-pagination
+          v-model="currentPage"
+          first-number
+          last-number
+          :per-page="perPage"
+          :total-rows="getTotalRowCount(filteredRows)"
+          aria-controls="table-session-logs"
+        />
+      </b-col>
+    </b-row>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import Search from '@/components/Global/Search';
+import TableCellCount from '@/components/Global/TableCellCount';
+import TableRowAction from '@/components/Global/TableRowAction';
+import TableToolbar from '@/components/Global/TableToolbar';
+
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import BVPaginationMixin, {
+  currentPage,
+  perPage,
+  itemsPerPageOptions,
+} from '@/components/Mixins/BVPaginationMixin';
+import BVTableSelectableMixin, {
+  selectedRows,
+  tableHeaderCheckboxModel,
+  tableHeaderCheckboxIndeterminate,
+} from '@/components/Mixins/BVTableSelectableMixin';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import SearchFilterMixin, {
+  searchFilter,
+} from '@/components/Mixins/SearchFilterMixin';
+
+export default {
+  components: {
+    PageTitle,
+    Search,
+    TableCellCount,
+    TableRowAction,
+    TableToolbar,
+  },
+  mixins: [
+    BVPaginationMixin,
+    BVTableSelectableMixin,
+    BVToastMixin,
+    LoadingBarMixin,
+    SearchFilterMixin,
+  ],
+  beforeRouteLeave(to, from, next) {
+    // Hide loader if the user navigates to another page
+    // before request is fulfilled.
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'checkbox',
+        },
+        {
+          key: 'clientID',
+          label: this.$t('pageSessions.table.clientID'),
+        },
+        {
+          key: 'username',
+          label: this.$t('pageSessions.table.username'),
+        },
+        {
+          key: 'ipAddress',
+          label: this.$t('pageSessions.table.ipAddress'),
+        },
+        {
+          key: 'actions',
+          label: '',
+        },
+      ],
+      batchActions: [
+        {
+          value: 'disconnect',
+          label: this.$t('pageSessions.action.disconnect'),
+        },
+      ],
+      currentPage: currentPage,
+      itemsPerPageOptions: itemsPerPageOptions,
+      perPage: perPage,
+      selectedRows: selectedRows,
+      searchTotalFilteredRows: 0,
+      tableHeaderCheckboxModel: tableHeaderCheckboxModel,
+      tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
+      searchFilter: searchFilter,
+    };
+  },
+  computed: {
+    filteredRows() {
+      return this.searchFilter
+        ? this.searchTotalFilteredRows
+        : this.allConnections.length;
+    },
+    allConnections() {
+      return this.$store.getters['sessions/allConnections'].map((session) => {
+        return {
+          ...session,
+          actions: [
+            {
+              value: 'disconnect',
+              title: this.$t('pageSessions.action.disconnect'),
+            },
+          ],
+        };
+      });
+    },
+  },
+  created() {
+    this.startLoader();
+    this.$store.dispatch('sessions/getSessionsData').finally(() => {
+      this.endLoader();
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    onFiltered(filteredItems) {
+      this.searchTotalFilteredRows = filteredItems.length;
+    },
+    onChangeSearchInput(event) {
+      this.searchFilter = event;
+    },
+    disconnectSessions(uris) {
+      this.$store
+        .dispatch('sessions/disconnectSessions', uris)
+        .then((messages) => {
+          messages.forEach(({ type, message }) => {
+            if (type === 'success') {
+              this.successToast(message);
+            } else if (type === 'error') {
+              this.errorToast(message);
+            }
+          });
+        });
+    },
+    onTableRowAction(action, { uri }) {
+      if (action === 'disconnect') {
+        this.$bvModal
+          .msgBoxConfirm(this.$tc('pageSessions.modal.disconnectMessage'), {
+            title: this.$tc('pageSessions.modal.disconnectTitle'),
+            okTitle: this.$t('pageSessions.action.disconnect'),
+            cancelTitle: this.$t('global.action.cancel'),
+          })
+          .then((deleteConfirmed) => {
+            if (deleteConfirmed) this.disconnectSessions([uri]);
+          });
+      }
+    },
+    onBatchAction(action) {
+      if (action === 'disconnect') {
+        const uris = this.selectedRows.map((row) => row.uri);
+        this.$bvModal
+          .msgBoxConfirm(
+            this.$tc(
+              'pageSessions.modal.disconnectMessage',
+              this.selectedRows.length
+            ),
+            {
+              title: this.$tc(
+                'pageSessions.modal.disconnectTitle',
+                this.selectedRows.length
+              ),
+              okTitle: this.$t('pageSessions.action.disconnect'),
+              cancelTitle: this.$t('global.action.cancel'),
+            }
+          )
+          .then((deleteConfirmed) => {
+            if (deleteConfirmed) {
+              this.disconnectSessions(uris);
+            }
+          });
+      }
+    },
+  },
+};
+</script>
+<style lang="scss">
+#table-session-logs {
+  td .btn-link {
+    width: auto !important;
+  }
+}
+</style>
diff --git a/src/views/_sila/SecurityAndAccess/Sessions/index.js b/src/views/_sila/SecurityAndAccess/Sessions/index.js
new file mode 100644
index 00000000..aa113aff
--- /dev/null
+++ b/src/views/_sila/SecurityAndAccess/Sessions/index.js
@@ -0,0 +1,2 @@
+import Sessions from './Sessions.vue';
+export default Sessions;
diff --git a/src/views/_sila/SecurityAndAccess/UserManagement/ModalSettings.vue b/src/views/_sila/SecurityAndAccess/UserManagement/ModalSettings.vue
new file mode 100644
index 00000000..0f05123c
--- /dev/null
+++ b/src/views/_sila/SecurityAndAccess/UserManagement/ModalSettings.vue
@@ -0,0 +1,215 @@
+<template>
+  <b-modal
+    id="modal-settings"
+    ref="modal"
+    :title="$t('pageUserManagement.accountPolicySettings')"
+    @hidden="resetForm"
+  >
+    <b-form id="form-settings" novalidate @submit.prevent="handleSubmit">
+      <b-container>
+        <b-row>
+          <b-col>
+            <b-form-group
+              :label="$t('pageUserManagement.modal.maxFailedLoginAttempts')"
+              label-for="lockout-threshold"
+            >
+              <b-form-text id="lockout-threshold-help-block">
+                {{
+                  $t('global.form.valueMustBeBetween', {
+                    min: 0,
+                    max: 65535,
+                  })
+                }}
+              </b-form-text>
+              <b-form-input
+                id="lockout-threshold"
+                v-model.number="form.lockoutThreshold"
+                type="number"
+                aria-describedby="lockout-threshold-help-block"
+                data-test-id="userManagement-input-lockoutThreshold"
+                :state="getValidationState($v.form.lockoutThreshold)"
+                @input="$v.form.lockoutThreshold.$touch()"
+              />
+              <b-form-invalid-feedback role="alert">
+                <template v-if="!$v.form.lockoutThreshold.required">
+                  {{ $t('global.form.fieldRequired') }}
+                </template>
+                <template
+                  v-if="
+                    !$v.form.lockoutThreshold.minLength ||
+                    !$v.form.lockoutThreshold.maxLength
+                  "
+                >
+                  {{
+                    $t('global.form.valueMustBeBetween', {
+                      min: 0,
+                      max: 65535,
+                    })
+                  }}
+                </template>
+              </b-form-invalid-feedback>
+            </b-form-group>
+          </b-col>
+          <b-col>
+            <b-form-group
+              :label="$t('pageUserManagement.modal.userUnlockMethod')"
+            >
+              <b-form-radio
+                v-model="form.unlockMethod"
+                name="unlock-method"
+                class="mb-2"
+                :value="0"
+                data-test-id="userManagement-radio-manualUnlock"
+                @input="$v.form.unlockMethod.$touch()"
+              >
+                {{ $t('pageUserManagement.modal.manual') }}
+              </b-form-radio>
+              <b-form-radio
+                v-model="form.unlockMethod"
+                name="unlock-method"
+                :value="1"
+                data-test-id="userManagement-radio-automaticUnlock"
+                @input="$v.form.unlockMethod.$touch()"
+              >
+                {{ $t('pageUserManagement.modal.automaticAfterTimeout') }}
+              </b-form-radio>
+              <div class="mt-3 ml-4">
+                <b-form-text id="lockout-duration-help-block">
+                  {{ $t('pageUserManagement.modal.timeoutDurationSeconds') }}
+                </b-form-text>
+                <b-form-input
+                  v-model.number="form.lockoutDuration"
+                  aria-describedby="lockout-duration-help-block"
+                  type="number"
+                  data-test-id="userManagement-input-lockoutDuration"
+                  :state="getValidationState($v.form.lockoutDuration)"
+                  :readonly="$v.form.unlockMethod.$model === 0"
+                  @input="$v.form.lockoutDuration.$touch()"
+                />
+                <b-form-invalid-feedback role="alert">
+                  <template v-if="!$v.form.lockoutDuration.required">
+                    {{ $t('global.form.fieldRequired') }}
+                  </template>
+                  <template v-else-if="!$v.form.lockoutDuration.minvalue">
+                    {{ $t('global.form.mustBeAtLeast', { value: 1 }) }}
+                  </template>
+                </b-form-invalid-feedback>
+              </div>
+            </b-form-group>
+          </b-col>
+        </b-row>
+      </b-container>
+    </b-form>
+    <template #modal-footer="{ cancel }">
+      <b-button
+        variant="secondary"
+        data-test-id="userManagement-button-cancel"
+        @click="cancel()"
+      >
+        {{ $t('global.action.cancel') }}
+      </b-button>
+      <b-button
+        form="form-settings"
+        type="submit"
+        variant="primary"
+        data-test-id="userManagement-button-submit"
+        @click="onOk"
+      >
+        {{ $t('global.action.save') }}
+      </b-button>
+    </template>
+  </b-modal>
+</template>
+
+<script>
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import {
+  required,
+  requiredIf,
+  minValue,
+  maxValue,
+} from 'vuelidate/lib/validators';
+
+export default {
+  mixins: [VuelidateMixin],
+  props: {
+    settings: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      form: {
+        lockoutThreshold: 0,
+        unlockMethod: 0,
+        lockoutDuration: null,
+      },
+    };
+  },
+  watch: {
+    settings: function ({ lockoutThreshold, lockoutDuration }) {
+      this.form.lockoutThreshold = lockoutThreshold;
+      this.form.unlockMethod = lockoutDuration ? 1 : 0;
+      this.form.lockoutDuration = lockoutDuration ? lockoutDuration : null;
+    },
+  },
+  validations: {
+    form: {
+      lockoutThreshold: {
+        minValue: minValue(0),
+        maxValue: maxValue(65535),
+        required,
+      },
+      unlockMethod: { required },
+      lockoutDuration: {
+        minValue: function (value) {
+          return this.form.unlockMethod === 0 || value > 0;
+        },
+        required: requiredIf(function () {
+          return this.form.unlockMethod === 1;
+        }),
+      },
+    },
+  },
+  methods: {
+    handleSubmit() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+
+      let lockoutThreshold;
+      let lockoutDuration;
+      if (this.$v.form.lockoutThreshold.$dirty) {
+        lockoutThreshold = this.form.lockoutThreshold;
+      }
+      if (this.$v.form.unlockMethod.$dirty) {
+        lockoutDuration = this.form.unlockMethod
+          ? this.form.lockoutDuration
+          : 0;
+      }
+
+      this.$emit('ok', { lockoutThreshold, lockoutDuration });
+      this.closeModal();
+    },
+    onOk(bvModalEvt) {
+      // prevent modal close
+      bvModalEvt.preventDefault();
+      this.handleSubmit();
+    },
+    closeModal() {
+      this.$nextTick(() => {
+        this.$refs.modal.hide();
+      });
+    },
+    resetForm() {
+      // Reset form models
+      this.form.lockoutThreshold = this.settings.lockoutThreshold;
+      this.form.unlockMethod = this.settings.lockoutDuration ? 1 : 0;
+      this.form.lockoutDuration = this.settings.lockoutDuration
+        ? this.settings.lockoutDuration
+        : null;
+      this.$v.$reset(); // clear validations
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/SecurityAndAccess/UserManagement/ModalUser.vue b/src/views/_sila/SecurityAndAccess/UserManagement/ModalUser.vue
new file mode 100644
index 00000000..0f8757ce
--- /dev/null
+++ b/src/views/_sila/SecurityAndAccess/UserManagement/ModalUser.vue
@@ -0,0 +1,386 @@
+<template>
+  <b-modal id="modal-user" ref="modal" @hidden="resetForm">
+    <template #modal-title>
+      <template v-if="newUser">
+        {{ $t('pageUserManagement.addUser') }}
+      </template>
+      <template v-else>
+        {{ $t('pageUserManagement.editUser') }}
+      </template>
+    </template>
+    <b-form id="form-user" novalidate @submit.prevent="handleSubmit">
+      <b-container>
+        <!-- Manual unlock form control -->
+        <b-row v-if="!newUser && manualUnlockPolicy && user.Locked">
+          <b-col sm="9">
+            <alert :show="true" variant="warning" small>
+              <template v-if="!$v.form.manualUnlock.$dirty">
+                {{ $t('pageUserManagement.modal.accountLocked') }}
+              </template>
+              <template v-else>
+                {{ $t('pageUserManagement.modal.clickSaveToUnlockAccount') }}
+              </template>
+            </alert>
+          </b-col>
+          <b-col sm="3">
+            <input
+              v-model="form.manualUnlock"
+              data-test-id="userManagement-input-manualUnlock"
+              type="hidden"
+              value="false"
+            />
+            <b-button
+              variant="primary"
+              :disabled="$v.form.manualUnlock.$dirty"
+              data-test-id="userManagement-button-manualUnlock"
+              @click="$v.form.manualUnlock.$touch()"
+            >
+              {{ $t('pageUserManagement.modal.unlock') }}
+            </b-button>
+          </b-col>
+        </b-row>
+        <b-row>
+          <b-col>
+            <b-form-group :label="$t('pageUserManagement.modal.accountStatus')">
+              <b-form-radio
+                v-model="form.status"
+                name="user-status"
+                :value="true"
+                data-test-id="userManagement-radioButton-statusEnabled"
+                @input="$v.form.status.$touch()"
+              >
+                {{ $t('global.status.enabled') }}
+              </b-form-radio>
+              <b-form-radio
+                v-model="form.status"
+                name="user-status"
+                data-test-id="userManagement-radioButton-statusDisabled"
+                :value="false"
+                @input="$v.form.status.$touch()"
+              >
+                {{ $t('global.status.disabled') }}
+              </b-form-radio>
+            </b-form-group>
+            <b-form-group
+              :label="$t('pageUserManagement.modal.username')"
+              label-for="username"
+            >
+              <b-form-text id="username-help-block">
+                {{ $t('pageUserManagement.modal.cannotStartWithANumber') }}
+                <br />
+                {{
+                  $t(
+                    'pageUserManagement.modal.noSpecialCharactersExceptUnderscore'
+                  )
+                }}
+              </b-form-text>
+              <b-form-input
+                id="username"
+                v-model="form.username"
+                type="text"
+                aria-describedby="username-help-block"
+                data-test-id="userManagement-input-username"
+                :state="getValidationState($v.form.username)"
+                :disabled="!newUser && originalUsername === 'root'"
+                @input="$v.form.username.$touch()"
+              />
+              <b-form-invalid-feedback role="alert">
+                <template v-if="!$v.form.username.required">
+                  {{ $t('global.form.fieldRequired') }}
+                </template>
+                <template v-else-if="!$v.form.username.maxLength">
+                  {{
+                    $t('global.form.lengthMustBeBetween', { min: 1, max: 16 })
+                  }}
+                </template>
+                <template v-else-if="!$v.form.username.pattern">
+                  {{ $t('global.form.invalidFormat') }}
+                </template>
+              </b-form-invalid-feedback>
+            </b-form-group>
+            <b-form-group
+              :label="$t('pageUserManagement.modal.privilege')"
+              label-for="privilege"
+            >
+              <b-form-select
+                id="privilege"
+                v-model="form.privilege"
+                :options="privilegeTypes"
+                data-test-id="userManagement-select-privilege"
+                :state="getValidationState($v.form.privilege)"
+                @input="$v.form.privilege.$touch()"
+              >
+                <template #first>
+                  <b-form-select-option :value="null" disabled>
+                    {{ $t('global.form.selectAnOption') }}
+                  </b-form-select-option>
+                </template>
+              </b-form-select>
+              <b-form-invalid-feedback role="alert">
+                <template v-if="!$v.form.privilege.required">
+                  {{ $t('global.form.fieldRequired') }}
+                </template>
+              </b-form-invalid-feedback>
+            </b-form-group>
+          </b-col>
+          <b-col>
+            <b-form-group
+              :label="$t('pageUserManagement.modal.userPassword')"
+              label-for="password"
+            >
+              <b-form-text id="password-help-block">
+                {{
+                  $t('pageUserManagement.modal.passwordMustBeBetween', {
+                    min: passwordRequirements.minLength,
+                    max: passwordRequirements.maxLength,
+                  })
+                }}
+              </b-form-text>
+              <input-password-toggle>
+                <b-form-input
+                  id="password"
+                  v-model="form.password"
+                  type="password"
+                  data-test-id="userManagement-input-password"
+                  aria-describedby="password-help-block"
+                  :state="getValidationState($v.form.password)"
+                  class="form-control-with-button"
+                  @input="$v.form.password.$touch()"
+                />
+                <b-form-invalid-feedback role="alert">
+                  <template v-if="!$v.form.password.required">
+                    {{ $t('global.form.fieldRequired') }}
+                  </template>
+                  <template
+                    v-if="
+                      !$v.form.password.minLength || !$v.form.password.maxLength
+                    "
+                  >
+                    {{
+                      $t('pageUserManagement.modal.passwordMustBeBetween', {
+                        min: passwordRequirements.minLength,
+                        max: passwordRequirements.maxLength,
+                      })
+                    }}
+                  </template>
+                </b-form-invalid-feedback>
+              </input-password-toggle>
+            </b-form-group>
+            <b-form-group
+              :label="$t('pageUserManagement.modal.confirmUserPassword')"
+              label-for="password-confirmation"
+            >
+              <input-password-toggle>
+                <b-form-input
+                  id="password-confirmation"
+                  v-model="form.passwordConfirmation"
+                  data-test-id="userManagement-input-passwordConfirmation"
+                  type="password"
+                  :state="getValidationState($v.form.passwordConfirmation)"
+                  class="form-control-with-button"
+                  @input="$v.form.passwordConfirmation.$touch()"
+                />
+                <b-form-invalid-feedback role="alert">
+                  <template v-if="!$v.form.passwordConfirmation.required">
+                    {{ $t('global.form.fieldRequired') }}
+                  </template>
+                  <template
+                    v-else-if="!$v.form.passwordConfirmation.sameAsPassword"
+                  >
+                    {{ $t('pageUserManagement.modal.passwordsDoNotMatch') }}
+                  </template>
+                </b-form-invalid-feedback>
+              </input-password-toggle>
+            </b-form-group>
+          </b-col>
+        </b-row>
+      </b-container>
+    </b-form>
+    <template #modal-footer="{ cancel }">
+      <b-button
+        variant="secondary"
+        data-test-id="userManagement-button-cancel"
+        @click="cancel()"
+      >
+        {{ $t('global.action.cancel') }}
+      </b-button>
+      <b-button
+        form="form-user"
+        data-test-id="userManagement-button-submit"
+        type="submit"
+        variant="primary"
+        @click="onOk"
+      >
+        <template v-if="newUser">
+          {{ $t('pageUserManagement.addUser') }}
+        </template>
+        <template v-else>
+          {{ $t('global.action.save') }}
+        </template>
+      </b-button>
+    </template>
+  </b-modal>
+</template>
+
+<script>
+import {
+  required,
+  maxLength,
+  minLength,
+  sameAs,
+  helpers,
+  requiredIf,
+} from 'vuelidate/lib/validators';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
+import Alert from '@/components/Global/Alert';
+
+export default {
+  components: { Alert, InputPasswordToggle },
+  mixins: [VuelidateMixin],
+  props: {
+    user: {
+      type: Object,
+      default: null,
+    },
+    passwordRequirements: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      originalUsername: '',
+      form: {
+        status: true,
+        username: '',
+        privilege: null,
+        password: '',
+        passwordConfirmation: '',
+        manualUnlock: false,
+      },
+    };
+  },
+  computed: {
+    newUser() {
+      return this.user ? false : true;
+    },
+    accountSettings() {
+      return this.$store.getters['userManagement/accountSettings'];
+    },
+    manualUnlockPolicy() {
+      return !this.accountSettings.accountLockoutDuration;
+    },
+    privilegeTypes() {
+      return this.$store.getters['userManagement/accountRoles'];
+    },
+  },
+  watch: {
+    user: function (value) {
+      if (value === null) return;
+      this.originalUsername = value.username;
+      this.form.username = value.username;
+      this.form.status = value.Enabled;
+      this.form.privilege = value.privilege;
+    },
+  },
+  validations() {
+    return {
+      form: {
+        status: {
+          required,
+        },
+        username: {
+          required,
+          maxLength: maxLength(16),
+          pattern: helpers.regex('pattern', /^([a-zA-Z_][a-zA-Z0-9_]*)/),
+        },
+        privilege: {
+          required,
+        },
+        password: {
+          required: requiredIf(function () {
+            return this.requirePassword();
+          }),
+          minLength: minLength(this.passwordRequirements.minLength),
+          maxLength: maxLength(this.passwordRequirements.maxLength),
+        },
+        passwordConfirmation: {
+          required: requiredIf(function () {
+            return this.requirePassword();
+          }),
+          sameAsPassword: sameAs('password'),
+        },
+        manualUnlock: {},
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      let userData = {};
+
+      if (this.newUser) {
+        this.$v.$touch();
+        if (this.$v.$invalid) return;
+        userData.username = this.form.username;
+        userData.status = this.form.status;
+        userData.privilege = this.form.privilege;
+        userData.password = this.form.password;
+      } else {
+        if (this.$v.$invalid) return;
+        userData.originalUsername = this.originalUsername;
+        if (this.$v.form.status.$dirty) {
+          userData.status = this.form.status;
+        }
+        if (this.$v.form.username.$dirty) {
+          userData.username = this.form.username;
+        }
+        if (this.$v.form.privilege.$dirty) {
+          userData.privilege = this.form.privilege;
+        }
+        if (this.$v.form.password.$dirty) {
+          userData.password = this.form.password;
+        }
+        if (this.$v.form.manualUnlock.$dirty) {
+          // If form manualUnlock control $dirty then
+          // set user Locked property to false
+          userData.locked = false;
+        }
+        if (Object.entries(userData).length === 1) {
+          this.closeModal();
+          return;
+        }
+      }
+
+      this.$emit('ok', { isNewUser: this.newUser, userData });
+      this.closeModal();
+    },
+    closeModal() {
+      this.$nextTick(() => {
+        this.$refs.modal.hide();
+      });
+    },
+    resetForm() {
+      this.form.originalUsername = '';
+      this.form.status = true;
+      this.form.username = '';
+      this.form.privilege = null;
+      this.form.password = '';
+      this.form.passwordConfirmation = '';
+      this.$v.$reset();
+      this.$emit('hidden');
+    },
+    requirePassword() {
+      if (this.newUser) return true;
+      if (this.$v.form.password.$dirty) return true;
+      if (this.$v.form.passwordConfirmation.$dirty) return true;
+      return false;
+    },
+    onOk(bvModalEvt) {
+      // prevent modal close
+      bvModalEvt.preventDefault();
+      this.handleSubmit();
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/SecurityAndAccess/UserManagement/TableRoles.vue b/src/views/_sila/SecurityAndAccess/UserManagement/TableRoles.vue
new file mode 100644
index 00000000..61ef1ee8
--- /dev/null
+++ b/src/views/_sila/SecurityAndAccess/UserManagement/TableRoles.vue
@@ -0,0 +1,92 @@
+<template>
+  <b-table stacked="sm" hover small :items="items" :fields="fields">
+    <template #cell(administrator)="data">
+      <template v-if="data.value">
+        <checkmark20 />
+      </template>
+    </template>
+    <template #cell(operator)="data">
+      <template v-if="data.value">
+        <checkmark20 />
+      </template>
+    </template>
+    <template #cell(readonly)="data">
+      <template v-if="data.value">
+        <checkmark20 />
+      </template>
+    </template>
+    <template #cell(noaccess)="data">
+      <template v-if="data.value">
+        <checkmark20 />
+      </template>
+    </template>
+  </b-table>
+</template>
+
+<script>
+import Checkmark20 from '@carbon/icons-vue/es/checkmark/20';
+
+export default {
+  components: {
+    Checkmark20,
+  },
+  data() {
+    return {
+      items: [
+        {
+          description: this.$t(
+            'pageUserManagement.tableRoles.configureComponentsManagedByThisService'
+          ),
+          administrator: true,
+          operator: true,
+          readonly: false,
+          noaccess: false,
+        },
+        {
+          description: this.$t(
+            'pageUserManagement.tableRoles.configureManagerResources'
+          ),
+          administrator: true,
+          operator: false,
+          readonly: false,
+          noaccess: false,
+        },
+        {
+          description: this.$t(
+            'pageUserManagement.tableRoles.updatePasswordForCurrentUserAccount'
+          ),
+          administrator: true,
+          operator: true,
+          readonly: true,
+          noaccess: false,
+        },
+        {
+          description: this.$t(
+            'pageUserManagement.tableRoles.configureUsersAndTheirAccounts'
+          ),
+          administrator: true,
+          operator: false,
+          readonly: false,
+          noaccess: false,
+        },
+        {
+          description: this.$t(
+            'pageUserManagement.tableRoles.logInToTheServiceAndReadResources'
+          ),
+          administrator: true,
+          operator: true,
+          readonly: true,
+          noaccess: false,
+        },
+      ],
+      fields: [
+        { key: 'description', label: 'Privilege' },
+        { key: 'administrator', label: 'Administrator', class: 'text-center' },
+        { key: 'operator', label: 'Operator', class: 'text-center' },
+        { key: 'readonly', label: 'ReadOnly', class: 'text-center' },
+        { key: 'noaccess', label: 'NoAccess', class: 'text-center' },
+      ],
+    };
+  },
+};
+</script>
diff --git a/src/views/_sila/SecurityAndAccess/UserManagement/UserManagement.vue b/src/views/_sila/SecurityAndAccess/UserManagement/UserManagement.vue
new file mode 100644
index 00000000..c6c556c8
--- /dev/null
+++ b/src/views/_sila/SecurityAndAccess/UserManagement/UserManagement.vue
@@ -0,0 +1,391 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+    <b-row>
+      <b-col xl="9" class="text-right">
+        <b-button variant="link" @click="initModalSettings">
+          <icon-settings />
+          {{ $t('pageUserManagement.accountPolicySettings') }}
+        </b-button>
+        <b-button
+          variant="primary"
+          data-test-id="userManagement-button-addUser"
+          @click="initModalUser(null)"
+        >
+          <icon-add />
+          {{ $t('pageUserManagement.addUser') }}
+        </b-button>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col xl="9">
+        <table-toolbar
+          ref="toolbar"
+          :selected-items-count="selectedRows.length"
+          :actions="tableToolbarActions"
+          @clear-selected="clearSelectedRows($refs.table)"
+          @batch-action="onBatchAction"
+        />
+        <b-table
+          ref="table"
+          responsive="md"
+          selectable
+          show-empty
+          no-select-on-click
+          hover
+          :busy="isBusy"
+          :fields="fields"
+          :items="tableItems"
+          :empty-text="$t('global.table.emptyMessage')"
+          @row-selected="onRowSelected($event, tableItems.length)"
+        >
+          <!-- Checkbox column -->
+          <template #head(checkbox)>
+            <b-form-checkbox
+              v-model="tableHeaderCheckboxModel"
+              data-test-id="userManagement-checkbox-tableHeaderCheckbox"
+              :indeterminate="tableHeaderCheckboxIndeterminate"
+              @change="onChangeHeaderCheckbox($refs.table)"
+            >
+              <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+            </b-form-checkbox>
+          </template>
+          <template #cell(checkbox)="row">
+            <b-form-checkbox
+              v-model="row.rowSelected"
+              data-test-id="userManagement-checkbox-toggleSelectRow"
+              @change="toggleSelectRow($refs.table, row.index)"
+            >
+              <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+            </b-form-checkbox>
+          </template>
+
+          <!-- table actions column -->
+          <template #cell(actions)="{ item }">
+            <table-row-action
+              v-for="(action, index) in item.actions"
+              :key="index"
+              :value="action.value"
+              :enabled="action.enabled"
+              :title="action.title"
+              @click-table-action="onTableRowAction($event, item)"
+            >
+              <template #icon>
+                <icon-edit
+                  v-if="action.value === 'edit'"
+                  :data-test-id="`userManagement-tableRowAction-edit-${index}`"
+                />
+                <icon-trashcan
+                  v-if="action.value === 'delete'"
+                  :data-test-id="`userManagement-tableRowAction-delete-${index}`"
+                />
+              </template>
+            </table-row-action>
+          </template>
+        </b-table>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col xl="8">
+        <b-button
+          v-b-toggle.collapse-role-table
+          data-test-id="userManagement-button-viewPrivilegeRoleDescriptions"
+          variant="link"
+          class="mt-3"
+        >
+          <icon-chevron />
+          {{ $t('pageUserManagement.viewPrivilegeRoleDescriptions') }}
+        </b-button>
+        <b-collapse id="collapse-role-table" class="mt-3">
+          <table-roles />
+        </b-collapse>
+      </b-col>
+    </b-row>
+    <!-- Modals -->
+    <modal-settings :settings="settings" @ok="saveAccountSettings" />
+    <modal-user
+      :user="activeUser"
+      :password-requirements="passwordRequirements"
+      @ok="saveUser"
+      @hidden="activeUser = null"
+    />
+  </b-container>
+</template>
+
+<script>
+import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
+import IconEdit from '@carbon/icons-vue/es/edit/20';
+import IconAdd from '@carbon/icons-vue/es/add--alt/20';
+import IconSettings from '@carbon/icons-vue/es/settings/20';
+import IconChevron from '@carbon/icons-vue/es/chevron--up/20';
+
+import ModalUser from './ModalUser';
+import ModalSettings from './ModalSettings';
+import PageTitle from '@/components/Global/PageTitle';
+import TableRoles from './TableRoles';
+import TableToolbar from '@/components/Global/TableToolbar';
+import TableRowAction from '@/components/Global/TableRowAction';
+
+import BVTableSelectableMixin, {
+  selectedRows,
+  tableHeaderCheckboxModel,
+  tableHeaderCheckboxIndeterminate,
+} from '@/components/Mixins/BVTableSelectableMixin';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+
+export default {
+  name: 'UserManagement',
+  components: {
+    IconAdd,
+    IconChevron,
+    IconEdit,
+    IconSettings,
+    IconTrashcan,
+    ModalSettings,
+    ModalUser,
+    PageTitle,
+    TableRoles,
+    TableRowAction,
+    TableToolbar,
+  },
+  mixins: [BVTableSelectableMixin, BVToastMixin, LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      isBusy: true,
+      activeUser: null,
+      fields: [
+        {
+          key: 'checkbox',
+        },
+        {
+          key: 'username',
+          label: this.$t('pageUserManagement.table.username'),
+        },
+        {
+          key: 'privilege',
+          label: this.$t('pageUserManagement.table.privilege'),
+        },
+        {
+          key: 'status',
+          label: this.$t('pageUserManagement.table.status'),
+        },
+        {
+          key: 'actions',
+          label: '',
+          tdClass: 'text-right text-nowrap',
+        },
+      ],
+      tableToolbarActions: [
+        {
+          value: 'delete',
+          label: this.$t('global.action.delete'),
+        },
+        {
+          value: 'enable',
+          label: this.$t('global.action.enable'),
+        },
+        {
+          value: 'disable',
+          label: this.$t('global.action.disable'),
+        },
+      ],
+      selectedRows: selectedRows,
+      tableHeaderCheckboxModel: tableHeaderCheckboxModel,
+      tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
+    };
+  },
+  computed: {
+    allUsers() {
+      return this.$store.getters['userManagement/allUsers'];
+    },
+    tableItems() {
+      // transform user data to table data
+      return this.allUsers.map((user) => {
+        return {
+          username: user.UserName,
+          privilege: user.RoleId,
+          status: user.Locked
+            ? 'Locked'
+            : user.Enabled
+            ? 'Enabled'
+            : 'Disabled',
+          actions: [
+            {
+              value: 'edit',
+              enabled: true,
+              title: this.$t('pageUserManagement.editUser'),
+            },
+            {
+              value: 'delete',
+              enabled: user.UserName === 'root' ? false : true,
+              title: this.$tc('pageUserManagement.deleteUser'),
+            },
+          ],
+          ...user,
+        };
+      });
+    },
+    settings() {
+      return this.$store.getters['userManagement/accountSettings'];
+    },
+    passwordRequirements() {
+      return this.$store.getters['userManagement/accountPasswordRequirements'];
+    },
+  },
+  created() {
+    this.startLoader();
+    this.$store.dispatch('userManagement/getUsers').finally(() => {
+      this.endLoader();
+      this.isBusy = false;
+    });
+    this.$store.dispatch('userManagement/getAccountSettings');
+    this.$store.dispatch('userManagement/getAccountRoles');
+  },
+  methods: {
+    initModalUser(user) {
+      this.activeUser = user;
+      this.$bvModal.show('modal-user');
+    },
+    initModalDelete(user) {
+      this.$bvModal
+        .msgBoxConfirm(
+          this.$t('pageUserManagement.modal.deleteConfirmMessage', {
+            user: user.username,
+          }),
+          {
+            title: this.$tc('pageUserManagement.deleteUser'),
+            okTitle: this.$tc('pageUserManagement.deleteUser'),
+            cancelTitle: this.$t('global.action.cancel'),
+          }
+        )
+        .then((deleteConfirmed) => {
+          if (deleteConfirmed) {
+            this.deleteUser(user);
+          }
+        });
+    },
+    initModalSettings() {
+      this.$bvModal.show('modal-settings');
+    },
+    saveUser({ isNewUser, userData }) {
+      this.startLoader();
+      if (isNewUser) {
+        this.$store
+          .dispatch('userManagement/createUser', userData)
+          .then((success) => this.successToast(success))
+          .catch(({ message }) => this.errorToast(message))
+          .finally(() => this.endLoader());
+      } else {
+        this.$store
+          .dispatch('userManagement/updateUser', userData)
+          .then((success) => this.successToast(success))
+          .catch(({ message }) => this.errorToast(message))
+          .finally(() => this.endLoader());
+      }
+    },
+    deleteUser({ username }) {
+      this.startLoader();
+      this.$store
+        .dispatch('userManagement/deleteUser', username)
+        .then((success) => this.successToast(success))
+        .catch(({ message }) => this.errorToast(message))
+        .finally(() => this.endLoader());
+    },
+    onBatchAction(action) {
+      switch (action) {
+        case 'delete':
+          this.$bvModal
+            .msgBoxConfirm(
+              this.$tc(
+                'pageUserManagement.modal.batchDeleteConfirmMessage',
+                this.selectedRows.length
+              ),
+              {
+                title: this.$tc(
+                  'pageUserManagement.deleteUser',
+                  this.selectedRows.length
+                ),
+                okTitle: this.$tc(
+                  'pageUserManagement.deleteUser',
+                  this.selectedRows.length
+                ),
+                cancelTitle: this.$t('global.action.cancel'),
+              }
+            )
+            .then((deleteConfirmed) => {
+              if (deleteConfirmed) {
+                this.startLoader();
+                this.$store
+                  .dispatch('userManagement/deleteUsers', this.selectedRows)
+                  .then((messages) => {
+                    messages.forEach(({ type, message }) => {
+                      if (type === 'success') this.successToast(message);
+                      if (type === 'error') this.errorToast(message);
+                    });
+                  })
+                  .finally(() => this.endLoader());
+              }
+            });
+          break;
+        case 'enable':
+          this.startLoader();
+          this.$store
+            .dispatch('userManagement/enableUsers', this.selectedRows)
+            .then((messages) => {
+              messages.forEach(({ type, message }) => {
+                if (type === 'success') this.successToast(message);
+                if (type === 'error') this.errorToast(message);
+              });
+            })
+            .finally(() => this.endLoader());
+          break;
+        case 'disable':
+          this.startLoader();
+          this.$store
+            .dispatch('userManagement/disableUsers', this.selectedRows)
+            .then((messages) => {
+              messages.forEach(({ type, message }) => {
+                if (type === 'success') this.successToast(message);
+                if (type === 'error') this.errorToast(message);
+              });
+            })
+            .finally(() => this.endLoader());
+          break;
+      }
+    },
+    onTableRowAction(action, row) {
+      switch (action) {
+        case 'edit':
+          this.initModalUser(row);
+          break;
+        case 'delete':
+          this.initModalDelete(row);
+          break;
+        default:
+          break;
+      }
+    },
+    saveAccountSettings(settings) {
+      this.startLoader();
+      this.$store
+        .dispatch('userManagement/saveAccountSettings', settings)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message))
+        .finally(() => this.endLoader());
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.btn.collapsed {
+  svg {
+    transform: rotate(180deg);
+  }
+}
+</style>
diff --git a/src/views/_sila/SecurityAndAccess/UserManagement/index.js b/src/views/_sila/SecurityAndAccess/UserManagement/index.js
new file mode 100644
index 00000000..c3aebec3
--- /dev/null
+++ b/src/views/_sila/SecurityAndAccess/UserManagement/index.js
@@ -0,0 +1,2 @@
+import UserManagement from './UserManagement.vue';
+export default UserManagement;
diff --git a/src/views/_sila/Settings/DateTime/DateTime.vue b/src/views/_sila/Settings/DateTime/DateTime.vue
new file mode 100644
index 00000000..f5e063d1
--- /dev/null
+++ b/src/views/_sila/Settings/DateTime/DateTime.vue
@@ -0,0 +1,417 @@
+<template>
+  <b-container fluid="xl">
+    <page-title />
+    <b-row>
+      <b-col md="8" xl="6">
+        <alert variant="info" class="mb-4">
+          <span>
+            {{ $t('pageDateTime.alert.message') }}
+            <b-link to="/profile-settings">
+              {{ $t('pageDateTime.alert.link') }}</b-link
+            >
+          </span>
+        </alert>
+      </b-col>
+    </b-row>
+    <page-section>
+      <b-row>
+        <b-col lg="3">
+          <dl>
+            <dt>{{ $t('pageDateTime.form.date') }}</dt>
+            <dd v-if="bmcTime">{{ bmcTime | formatDate }}</dd>
+            <dd v-else>--</dd>
+          </dl>
+        </b-col>
+        <b-col lg="3">
+          <dl>
+            <dt>{{ $t('pageDateTime.form.time.label') }}</dt>
+            <dd v-if="bmcTime">{{ bmcTime | formatTime }}</dd>
+            <dd v-else>--</dd>
+          </dl>
+        </b-col>
+      </b-row>
+    </page-section>
+    <page-section :section-title="$t('pageDateTime.configureSettings')">
+      <b-form novalidate @submit.prevent="submitForm">
+        <b-form-group
+          label="Configure date and time"
+          :disabled="loading"
+          label-sr-only
+        >
+          <b-form-radio
+            v-model="form.configurationSelected"
+            value="manual"
+            data-test-id="dateTime-radio-configureManual"
+          >
+            {{ $t('pageDateTime.form.manual') }}
+          </b-form-radio>
+          <b-row class="mt-3 ml-3">
+            <b-col sm="6" lg="4" xl="3">
+              <b-form-group
+                :label="$t('pageDateTime.form.date')"
+                label-for="input-manual-date"
+              >
+                <b-form-text id="date-format-help">YYYY-MM-DD</b-form-text>
+                <b-input-group>
+                  <b-form-input
+                    id="input-manual-date"
+                    v-model="form.manual.date"
+                    :state="getValidationState($v.form.manual.date)"
+                    :disabled="ntpOptionSelected"
+                    data-test-id="dateTime-input-manualDate"
+                    class="form-control-with-button"
+                    @blur="$v.form.manual.date.$touch()"
+                  />
+                  <b-form-invalid-feedback role="alert">
+                    <div v-if="!$v.form.manual.date.pattern">
+                      {{ $t('global.form.invalidFormat') }}
+                    </div>
+                    <div v-if="!$v.form.manual.date.required">
+                      {{ $t('global.form.fieldRequired') }}
+                    </div>
+                  </b-form-invalid-feedback>
+                  <b-form-datepicker
+                    v-model="form.manual.date"
+                    class="btn-datepicker btn-icon-only"
+                    button-only
+                    right
+                    :hide-header="true"
+                    :locale="locale"
+                    :label-help="
+                      $t('global.calendar.useCursorKeysToNavigateCalendarDates')
+                    "
+                    :title="$t('global.calendar.selectDate')"
+                    :disabled="ntpOptionSelected"
+                    button-variant="link"
+                    aria-controls="input-manual-date"
+                  >
+                    <template #button-content>
+                      <icon-calendar />
+                      <span class="sr-only">
+                        {{ $t('global.calendar.selectDate') }}
+                      </span>
+                    </template>
+                  </b-form-datepicker>
+                </b-input-group>
+              </b-form-group>
+            </b-col>
+            <b-col sm="6" lg="4" xl="3">
+              <b-form-group
+                :label="$t('pageDateTime.form.time.timezone', { timezone })"
+                label-for="input-manual-time"
+              >
+                <b-form-text id="time-format-help">HH:MM</b-form-text>
+                <b-input-group>
+                  <b-form-input
+                    id="input-manual-time"
+                    v-model="form.manual.time"
+                    :state="getValidationState($v.form.manual.time)"
+                    :disabled="ntpOptionSelected"
+                    data-test-id="dateTime-input-manualTime"
+                    @blur="$v.form.manual.time.$touch()"
+                  />
+                  <b-form-invalid-feedback role="alert">
+                    <div v-if="!$v.form.manual.time.pattern">
+                      {{ $t('global.form.invalidFormat') }}
+                    </div>
+                    <div v-if="!$v.form.manual.time.required">
+                      {{ $t('global.form.fieldRequired') }}
+                    </div>
+                  </b-form-invalid-feedback>
+                </b-input-group>
+              </b-form-group>
+            </b-col>
+          </b-row>
+          <b-form-radio
+            v-model="form.configurationSelected"
+            value="ntp"
+            data-test-id="dateTime-radio-configureNTP"
+          >
+            NTP
+          </b-form-radio>
+          <b-row class="mt-3 ml-3">
+            <b-col sm="6" lg="4" xl="3">
+              <b-form-group
+                :label="$t('pageDateTime.form.ntpServers.server1')"
+                label-for="input-ntp-1"
+              >
+                <b-input-group>
+                  <b-form-input
+                    id="input-ntp-1"
+                    v-model="form.ntp.firstAddress"
+                    :state="getValidationState($v.form.ntp.firstAddress)"
+                    :disabled="manualOptionSelected"
+                    data-test-id="dateTime-input-ntpServer1"
+                    @blur="$v.form.ntp.firstAddress.$touch()"
+                  />
+                  <b-form-invalid-feedback role="alert">
+                    <div v-if="!$v.form.ntp.firstAddress.required">
+                      {{ $t('global.form.fieldRequired') }}
+                    </div>
+                  </b-form-invalid-feedback>
+                </b-input-group>
+              </b-form-group>
+            </b-col>
+            <b-col sm="6" lg="4" xl="3">
+              <b-form-group
+                :label="$t('pageDateTime.form.ntpServers.server2')"
+                label-for="input-ntp-2"
+              >
+                <b-input-group>
+                  <b-form-input
+                    id="input-ntp-2"
+                    v-model="form.ntp.secondAddress"
+                    :disabled="manualOptionSelected"
+                    data-test-id="dateTime-input-ntpServer2"
+                  />
+                </b-input-group>
+              </b-form-group>
+            </b-col>
+            <b-col sm="6" lg="4" xl="3">
+              <b-form-group
+                :label="$t('pageDateTime.form.ntpServers.server3')"
+                label-for="input-ntp-3"
+              >
+                <b-input-group>
+                  <b-form-input
+                    id="input-ntp-3"
+                    v-model="form.ntp.thirdAddress"
+                    :disabled="manualOptionSelected"
+                    data-test-id="dateTime-input-ntpServer3"
+                  />
+                </b-input-group>
+              </b-form-group>
+            </b-col>
+          </b-row>
+          <b-button
+            variant="primary"
+            type="submit"
+            data-test-id="dateTime-button-saveSettings"
+          >
+            {{ $t('global.action.saveSettings') }}
+          </b-button>
+        </b-form-group>
+      </b-form>
+    </page-section>
+  </b-container>
+</template>
+
+<script>
+import Alert from '@/components/Global/Alert';
+import IconCalendar from '@carbon/icons-vue/es/calendar/20';
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
+import LocalTimezoneLabelMixin from '@/components/Mixins/LocalTimezoneLabelMixin';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+
+import { mapState } from 'vuex';
+import { requiredIf, helpers } from 'vuelidate/lib/validators';
+
+const isoDateRegex = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/;
+const isoTimeRegex = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/;
+
+export default {
+  name: 'DateTime',
+  components: { Alert, IconCalendar, PageTitle, PageSection },
+  mixins: [
+    BVToastMixin,
+    LoadingBarMixin,
+    LocalTimezoneLabelMixin,
+    VuelidateMixin,
+  ],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      locale: this.$store.getters['global/languagePreference'],
+      form: {
+        configurationSelected: 'manual',
+        manual: {
+          date: '',
+          time: '',
+        },
+        ntp: { firstAddress: '', secondAddress: '', thirdAddress: '' },
+      },
+      loading,
+    };
+  },
+  validations() {
+    return {
+      form: {
+        manual: {
+          date: {
+            required: requiredIf(function () {
+              return this.form.configurationSelected === 'manual';
+            }),
+            pattern: helpers.regex('pattern', isoDateRegex),
+          },
+          time: {
+            required: requiredIf(function () {
+              return this.form.configurationSelected === 'manual';
+            }),
+            pattern: helpers.regex('pattern', isoTimeRegex),
+          },
+        },
+        ntp: {
+          firstAddress: {
+            required: requiredIf(function () {
+              return this.form.configurationSelected === 'ntp';
+            }),
+          },
+        },
+      },
+    };
+  },
+  computed: {
+    ...mapState('dateTime', ['ntpServers', 'isNtpProtocolEnabled']),
+    bmcTime() {
+      return this.$store.getters['global/bmcTime'];
+    },
+    ntpOptionSelected() {
+      return this.form.configurationSelected === 'ntp';
+    },
+    manualOptionSelected() {
+      return this.form.configurationSelected === 'manual';
+    },
+    isUtcDisplay() {
+      return this.$store.getters['global/isUtcDisplay'];
+    },
+    timezone() {
+      if (this.isUtcDisplay) {
+        return 'UTC';
+      }
+      return this.localOffset();
+    },
+  },
+  watch: {
+    ntpServers() {
+      this.setNtpValues();
+    },
+    manualDate() {
+      this.emitChange();
+    },
+    bmcTime() {
+      this.form.manual.date = this.$options.filters.formatDate(
+        this.$store.getters['global/bmcTime']
+      );
+      this.form.manual.time = this.$options.filters
+        .formatTime(this.$store.getters['global/bmcTime'])
+        .slice(0, 5);
+    },
+  },
+  created() {
+    this.startLoader();
+    this.setNtpValues();
+    Promise.all([
+      this.$store.dispatch('global/getBmcTime'),
+      this.$store.dispatch('dateTime/getNtpData'),
+    ]).finally(() => this.endLoader());
+  },
+  methods: {
+    emitChange() {
+      if (this.$v.$invalid) return;
+      this.$v.$reset(); //reset to re-validate on blur
+      this.$emit('change', {
+        manualDate: this.manualDate ? new Date(this.manualDate) : null,
+      });
+    },
+    setNtpValues() {
+      this.form.configurationSelected = this.isNtpProtocolEnabled
+        ? 'ntp'
+        : 'manual';
+      [
+        this.form.ntp.firstAddress = '',
+        this.form.ntp.secondAddress = '',
+        this.form.ntp.thirdAddress = '',
+      ] = [this.ntpServers[0], this.ntpServers[1], this.ntpServers[2]];
+    },
+    submitForm() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.startLoader();
+
+      let dateTimeForm = {};
+      let isNTPEnabled = this.form.configurationSelected === 'ntp';
+
+      if (!isNTPEnabled) {
+        const isUtcDisplay = this.$store.getters['global/isUtcDisplay'];
+        let date;
+
+        dateTimeForm.ntpProtocolEnabled = false;
+
+        if (isUtcDisplay) {
+          // Create UTC Date
+          date = this.getUtcDate(this.form.manual.date, this.form.manual.time);
+        } else {
+          // Create local Date
+          date = new Date(`${this.form.manual.date} ${this.form.manual.time}`);
+        }
+
+        dateTimeForm.updatedDateTime = date.toISOString();
+      } else {
+        dateTimeForm.ntpProtocolEnabled = true;
+
+        const ntpArray = [
+          this.form.ntp.firstAddress,
+          this.form.ntp.secondAddress,
+          this.form.ntp.thirdAddress,
+        ];
+
+        // Filter the ntpArray to remove empty strings,
+        // per Redfish spec there should be no empty strings or null on the ntp array.
+        const ntpArrayFiltered = ntpArray.filter((x) => x);
+
+        dateTimeForm.ntpServersArray = [...ntpArrayFiltered];
+
+        [this.ntpServers[0], this.ntpServers[1], this.ntpServers[2]] = [
+          ...dateTimeForm.ntpServersArray,
+        ];
+
+        this.setNtpValues();
+      }
+
+      this.$store
+        .dispatch('dateTime/updateDateTime', dateTimeForm)
+        .then((success) => {
+          this.successToast(success);
+          if (!isNTPEnabled) return;
+          // Shift address up if second address is empty
+          // to avoid refreshing after delay when updating NTP
+          if (!this.form.ntp.secondAddress && this.form.ntp.thirdAddres) {
+            this.form.ntp.secondAddress = this.form.ntp.thirdAddres;
+            this.form.ntp.thirdAddress = '';
+          }
+        })
+        .then(() => {
+          this.$store.dispatch('global/getBmcTime');
+        })
+        .catch(({ message }) => this.errorToast(message))
+        .finally(() => {
+          this.$v.form.$reset();
+          this.endLoader();
+        });
+    },
+    getUtcDate(date, time) {
+      // Split user input string values to create
+      // a UTC Date object
+      const datesArray = date.split('-');
+      const timeArray = time.split(':');
+      let utcDate = Date.UTC(
+        datesArray[0], // User input year
+        //UTC expects zero-index month value 0-11 (January-December)
+        //for reference https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC#Parameters
+        parseInt(datesArray[1]) - 1, // User input month
+        datesArray[2], // User input day
+        timeArray[0], // User input hour
+        timeArray[1] // User input minute
+      );
+      return new Date(utcDate);
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Settings/DateTime/index.js b/src/views/_sila/Settings/DateTime/index.js
new file mode 100644
index 00000000..2df21eae
--- /dev/null
+++ b/src/views/_sila/Settings/DateTime/index.js
@@ -0,0 +1,2 @@
+import DateTime from './DateTime.vue';
+export default DateTime;
diff --git a/src/views/_sila/Settings/Network/ModalDns.vue b/src/views/_sila/Settings/Network/ModalDns.vue
new file mode 100644
index 00000000..7f127173
--- /dev/null
+++ b/src/views/_sila/Settings/Network/ModalDns.vue
@@ -0,0 +1,92 @@
+<template>
+  <b-modal
+    id="modal-dns"
+    ref="modal"
+    :title="$t('pageNetwork.table.addDnsAddress')"
+    @hidden="resetForm"
+  >
+    <b-form id="form-dns" @submit.prevent="handleSubmit">
+      <b-row>
+        <b-col sm="6">
+          <b-form-group
+            :label="$t('pageNetwork.modal.staticDns')"
+            label-for="staticDns"
+          >
+            <b-form-input
+              id="staticDns"
+              v-model="form.staticDns"
+              type="text"
+              :state="getValidationState($v.form.staticDns)"
+              @input="$v.form.staticDns.$touch()"
+            />
+            <b-form-invalid-feedback role="alert">
+              <template v-if="!$v.form.staticDns.required">
+                {{ $t('global.form.fieldRequired') }}
+              </template>
+              <template v-if="!$v.form.staticDns.ipAddress">
+                {{ $t('global.form.invalidFormat') }}
+              </template>
+            </b-form-invalid-feedback>
+          </b-form-group>
+        </b-col>
+      </b-row>
+    </b-form>
+    <template #modal-footer="{ cancel }">
+      <b-button variant="secondary" @click="cancel()">
+        {{ $t('global.action.cancel') }}
+      </b-button>
+      <b-button form="form-dns" type="submit" variant="primary" @click="onOk">
+        {{ $t('global.action.add') }}
+      </b-button>
+    </template>
+  </b-modal>
+</template>
+
+<script>
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { ipAddress, required } from 'vuelidate/lib/validators';
+
+export default {
+  mixins: [VuelidateMixin],
+  data() {
+    return {
+      form: {
+        staticDns: null,
+      },
+    };
+  },
+  validations() {
+    return {
+      form: {
+        staticDns: {
+          required,
+          ipAddress,
+        },
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.$emit('ok', [this.form.staticDns]);
+      this.closeModal();
+    },
+    closeModal() {
+      this.$nextTick(() => {
+        this.$refs.modal.hide();
+      });
+    },
+    resetForm() {
+      this.form.staticDns = null;
+      this.$v.$reset();
+      this.$emit('hidden');
+    },
+    onOk(bvModalEvt) {
+      // prevent modal close
+      bvModalEvt.preventDefault();
+      this.handleSubmit();
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Settings/Network/ModalHostname.vue b/src/views/_sila/Settings/Network/ModalHostname.vue
new file mode 100644
index 00000000..f3221ec7
--- /dev/null
+++ b/src/views/_sila/Settings/Network/ModalHostname.vue
@@ -0,0 +1,110 @@
+<template>
+  <b-modal
+    id="modal-hostname"
+    ref="modal"
+    :title="$t('pageNetwork.modal.editHostnameTitle')"
+    @hidden="resetForm"
+  >
+    <b-form id="hostname-settings" @submit.prevent="handleSubmit">
+      <b-row>
+        <b-col sm="6">
+          <b-form-group
+            :label="$t('pageNetwork.hostname')"
+            label-for="hostname"
+          >
+            <b-form-input
+              id="hostname"
+              v-model="form.hostname"
+              type="text"
+              :state="getValidationState($v.form.hostname)"
+              @input="$v.form.hostname.$touch()"
+            />
+            <b-form-invalid-feedback role="alert">
+              <template v-if="!$v.form.hostname.required">
+                {{ $t('global.form.fieldRequired') }}
+              </template>
+              <template v-if="!$v.form.hostname.validateHostname">
+                {{ $t('global.form.lengthMustBeBetween', { min: 1, max: 64 }) }}
+              </template>
+            </b-form-invalid-feedback>
+          </b-form-group>
+        </b-col>
+      </b-row>
+    </b-form>
+    <template #modal-footer="{ cancel }">
+      <b-button variant="secondary" @click="cancel()">
+        {{ $t('global.action.cancel') }}
+      </b-button>
+      <b-button
+        form="hostname-settings"
+        type="submit"
+        variant="primary"
+        @click="onOk"
+      >
+        {{ $t('global.action.add') }}
+      </b-button>
+    </template>
+  </b-modal>
+</template>
+
+<script>
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { required, helpers } from 'vuelidate/lib/validators';
+
+const validateHostname = helpers.regex('validateHostname', /^\S{0,64}$/);
+
+export default {
+  mixins: [VuelidateMixin],
+  props: {
+    hostname: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      form: {
+        hostname: '',
+      },
+    };
+  },
+  watch: {
+    hostname() {
+      this.form.hostname = this.hostname;
+    },
+  },
+  validations() {
+    return {
+      form: {
+        hostname: {
+          required,
+          validateHostname,
+        },
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.$emit('ok', { HostName: this.form.hostname });
+      this.closeModal();
+    },
+    closeModal() {
+      this.$nextTick(() => {
+        this.$refs.modal.hide();
+      });
+    },
+    resetForm() {
+      this.form.hostname = this.hostname;
+      this.$v.$reset();
+      this.$emit('hidden');
+    },
+    onOk(bvModalEvt) {
+      // prevent modal close
+      bvModalEvt.preventDefault();
+      this.handleSubmit();
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Settings/Network/ModalIpv4.vue b/src/views/_sila/Settings/Network/ModalIpv4.vue
new file mode 100644
index 00000000..dcf4a579
--- /dev/null
+++ b/src/views/_sila/Settings/Network/ModalIpv4.vue
@@ -0,0 +1,165 @@
+<template>
+  <b-modal
+    id="modal-add-ipv4"
+    ref="modal"
+    :title="$t('pageNetwork.table.addIpv4Address')"
+    @hidden="resetForm"
+  >
+    <b-form id="form-ipv4" @submit.prevent="handleSubmit">
+      <b-row>
+        <b-col sm="6">
+          <b-form-group
+            :label="$t('pageNetwork.modal.ipAddress')"
+            label-for="ipAddress"
+          >
+            <b-form-input
+              id="ipAddress"
+              v-model="form.ipAddress"
+              type="text"
+              :state="getValidationState($v.form.ipAddress)"
+              @input="$v.form.ipAddress.$touch()"
+            />
+            <b-form-invalid-feedback role="alert">
+              <template v-if="!$v.form.ipAddress.required">
+                {{ $t('global.form.fieldRequired') }}
+              </template>
+              <template v-if="!$v.form.ipAddress.ipAddress">
+                {{ $t('global.form.invalidFormat') }}
+              </template>
+            </b-form-invalid-feedback>
+          </b-form-group>
+        </b-col>
+        <b-col sm="6">
+          <b-form-group
+            :label="$t('pageNetwork.modal.gateway')"
+            label-for="gateway"
+          >
+            <b-form-input
+              id="gateway"
+              v-model="form.gateway"
+              type="text"
+              :state="getValidationState($v.form.gateway)"
+              @input="$v.form.gateway.$touch()"
+            />
+            <b-form-invalid-feedback role="alert">
+              <template v-if="!$v.form.gateway.required">
+                {{ $t('global.form.fieldRequired') }}
+              </template>
+              <template v-if="!$v.form.gateway.ipAddress">
+                {{ $t('global.form.invalidFormat') }}
+              </template>
+            </b-form-invalid-feedback>
+          </b-form-group>
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col sm="6">
+          <b-form-group
+            :label="$t('pageNetwork.modal.subnetMask')"
+            label-for="subnetMask"
+          >
+            <b-form-input
+              id="subnetMask"
+              v-model="form.subnetMask"
+              type="text"
+              :state="getValidationState($v.form.subnetMask)"
+              @input="$v.form.subnetMask.$touch()"
+            />
+            <b-form-invalid-feedback role="alert">
+              <template v-if="!$v.form.subnetMask.required">
+                {{ $t('global.form.fieldRequired') }}
+              </template>
+              <template v-if="!$v.form.subnetMask.ipAddress">
+                {{ $t('global.form.invalidFormat') }}
+              </template>
+            </b-form-invalid-feedback>
+          </b-form-group>
+        </b-col>
+      </b-row>
+    </b-form>
+    <template #modal-footer="{ cancel }">
+      <b-button variant="secondary" @click="cancel()">
+        {{ $t('global.action.cancel') }}
+      </b-button>
+      <b-button form="form-ipv4" type="submit" variant="primary" @click="onOk">
+        {{ $t('global.action.add') }}
+      </b-button>
+    </template>
+  </b-modal>
+</template>
+
+<script>
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { ipAddress, required } from 'vuelidate/lib/validators';
+
+export default {
+  mixins: [VuelidateMixin],
+  props: {
+    defaultGateway: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      form: {
+        ipAddress: '',
+        gateway: '',
+        subnetMask: '',
+      },
+    };
+  },
+  watch: {
+    defaultGateway() {
+      this.form.gateway = this.defaultGateway;
+    },
+  },
+  validations() {
+    return {
+      form: {
+        ipAddress: {
+          required,
+          ipAddress,
+        },
+        gateway: {
+          required,
+          ipAddress,
+        },
+        subnetMask: {
+          required,
+          ipAddress,
+        },
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.$emit('ok', {
+        Address: this.form.ipAddress,
+        Gateway: this.form.gateway,
+        SubnetMask: this.form.subnetMask,
+      });
+      this.closeModal();
+    },
+    closeModal() {
+      this.$nextTick(() => {
+        this.$refs.modal.hide();
+      });
+    },
+    resetForm() {
+      this.form.ipAddress = null;
+      this.form.gateway = this.defaultGateway;
+      this.form.subnetMask = null;
+      this.$v.$reset();
+      this.$emit('hidden');
+    },
+    onOk(bvModalEvt) {
+      // prevent modal close
+      bvModalEvt.preventDefault();
+      this.handleSubmit();
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Settings/Network/ModalMacAddress.vue b/src/views/_sila/Settings/Network/ModalMacAddress.vue
new file mode 100644
index 00000000..d563f4ce
--- /dev/null
+++ b/src/views/_sila/Settings/Network/ModalMacAddress.vue
@@ -0,0 +1,109 @@
+<template>
+  <b-modal
+    id="modal-mac-address"
+    ref="modal"
+    :title="$t('pageNetwork.modal.editMacAddressTitle')"
+    @hidden="resetForm"
+  >
+    <b-form id="mac-settings" @submit.prevent="handleSubmit">
+      <b-row>
+        <b-col sm="6">
+          <b-form-group
+            :label="$t('pageNetwork.macAddress')"
+            label-for="macAddress"
+          >
+            <b-form-input
+              id="mac-address"
+              v-model.trim="form.macAddress"
+              data-test-id="network-input-macAddress"
+              type="text"
+              :state="getValidationState($v.form.macAddress)"
+              @change="$v.form.macAddress.$touch()"
+            />
+            <b-form-invalid-feedback role="alert">
+              <div v-if="!$v.form.macAddress.required">
+                {{ $t('global.form.fieldRequired') }}
+              </div>
+              <div v-if="!$v.form.macAddress.macAddress">
+                {{ $t('global.form.invalidFormat') }}
+              </div>
+            </b-form-invalid-feedback>
+          </b-form-group>
+        </b-col>
+      </b-row>
+    </b-form>
+    <template #modal-footer="{ cancel }">
+      <b-button variant="secondary" @click="cancel()">
+        {{ $t('global.action.cancel') }}
+      </b-button>
+      <b-button
+        form="mac-settings"
+        type="submit"
+        variant="primary"
+        @click="onOk"
+      >
+        {{ $t('global.action.add') }}
+      </b-button>
+    </template>
+  </b-modal>
+</template>
+
+<script>
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import { macAddress, required } from 'vuelidate/lib/validators';
+
+export default {
+  mixins: [VuelidateMixin],
+  props: {
+    macAddress: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      form: {
+        macAddress: '',
+      },
+    };
+  },
+  watch: {
+    macAddress() {
+      this.form.macAddress = this.macAddress;
+    },
+  },
+  validations() {
+    return {
+      form: {
+        macAddress: {
+          required,
+          macAddress: macAddress(),
+        },
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.$emit('ok', { MACAddress: this.form.macAddress });
+      this.closeModal();
+    },
+    closeModal() {
+      this.$nextTick(() => {
+        this.$refs.modal.hide();
+      });
+    },
+    resetForm() {
+      this.form.macAddress = this.macAddress;
+      this.$v.$reset();
+      this.$emit('hidden');
+    },
+    onOk(bvModalEvt) {
+      // prevent modal close
+      bvModalEvt.preventDefault();
+      this.handleSubmit();
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Settings/Network/Network.vue b/src/views/_sila/Settings/Network/Network.vue
new file mode 100644
index 00000000..2abbcd7a
--- /dev/null
+++ b/src/views/_sila/Settings/Network/Network.vue
@@ -0,0 +1,167 @@
+<template>
+  <b-container fluid="xl">
+    <page-title :description="$t('pageNetwork.pageDescription')" />
+    <!-- Global settings for all interfaces -->
+    <network-global-settings />
+    <!-- Interface tabs -->
+    <page-section v-show="ethernetData">
+      <b-row>
+        <b-col>
+          <b-card no-body>
+            <b-tabs
+              active-nav-item-class="font-weight-bold"
+              card
+              content-class="mt-3"
+            >
+              <b-tab
+                v-for="(data, index) in ethernetData"
+                :key="data.Id"
+                :title="data.Id"
+                @click="getTabIndex(index)"
+              >
+                <!-- Interface settings -->
+                <network-interface-settings :tab-index="tabIndex" />
+                <!-- IPV4 table -->
+                <table-ipv-4 :tab-index="tabIndex" />
+                <!-- Static DNS table -->
+                <table-dns :tab-index="tabIndex" />
+              </b-tab>
+            </b-tabs>
+          </b-card>
+        </b-col>
+      </b-row>
+    </page-section>
+    <!-- Modals -->
+    <modal-ipv4 :default-gateway="defaultGateway" @ok="saveIpv4Address" />
+    <modal-dns @ok="saveDnsAddress" />
+    <modal-hostname :hostname="currentHostname" @ok="saveSettings" />
+    <modal-mac-address :mac-address="currentMacAddress" @ok="saveSettings" />
+  </b-container>
+</template>
+
+<script>
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
+import ModalMacAddress from './ModalMacAddress.vue';
+import ModalHostname from './ModalHostname.vue';
+import ModalIpv4 from './ModalIpv4.vue';
+import ModalDns from './ModalDns.vue';
+import NetworkGlobalSettings from './NetworkGlobalSettings.vue';
+import NetworkInterfaceSettings from './NetworkInterfaceSettings.vue';
+import PageSection from '@/components/Global/PageSection';
+import PageTitle from '@/components/Global/PageTitle';
+import TableIpv4 from './TableIpv4.vue';
+import TableDns from './TableDns.vue';
+import { mapState } from 'vuex';
+
+export default {
+  name: 'Network',
+  components: {
+    ModalHostname,
+    ModalMacAddress,
+    ModalIpv4,
+    ModalDns,
+    NetworkGlobalSettings,
+    NetworkInterfaceSettings,
+    PageSection,
+    PageTitle,
+    TableDns,
+    TableIpv4,
+  },
+  mixins: [BVToastMixin, DataFormatterMixin, LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      currentHostname: '',
+      currentMacAddress: '',
+      defaultGateway: '',
+      loading,
+      tabIndex: 0,
+    };
+  },
+  computed: {
+    ...mapState('network', ['ethernetData']),
+  },
+  watch: {
+    ethernetData() {
+      this.getModalInfo();
+    },
+  },
+  created() {
+    this.startLoader();
+    const globalSettings = new Promise((resolve) => {
+      this.$root.$on('network-global-settings-complete', () => resolve());
+    });
+    const interfaceSettings = new Promise((resolve) => {
+      this.$root.$on('network-interface-settings-complete', () => resolve());
+    });
+    const networkTableDns = new Promise((resolve) => {
+      this.$root.$on('network-table-dns-complete', () => resolve());
+    });
+    const networkTableIpv4 = new Promise((resolve) => {
+      this.$root.$on('network-table-ipv4-complete', () => resolve());
+    });
+    // Combine all child component Promises to indicate
+    // when page data load complete
+    Promise.all([
+      this.$store.dispatch('network/getEthernetData'),
+      globalSettings,
+      interfaceSettings,
+      networkTableDns,
+      networkTableIpv4,
+    ]).finally(() => this.endLoader());
+  },
+  methods: {
+    getModalInfo() {
+      this.defaultGateway = this.$store.getters[
+        'network/globalNetworkSettings'
+      ][this.tabIndex].defaultGateway;
+
+      this.currentHostname = this.$store.getters[
+        'network/globalNetworkSettings'
+      ][this.tabIndex].hostname;
+
+      this.currentMacAddress = this.$store.getters[
+        'network/globalNetworkSettings'
+      ][this.tabIndex].macAddress;
+    },
+    getTabIndex(selectedIndex) {
+      this.tabIndex = selectedIndex;
+      this.$store.dispatch('network/setSelectedTabIndex', this.tabIndex);
+      this.$store.dispatch(
+        'network/setSelectedTabId',
+        this.ethernetData[selectedIndex].Id
+      );
+      this.getModalInfo();
+    },
+    saveIpv4Address(modalFormData) {
+      this.startLoader();
+      this.$store
+        .dispatch('network/saveIpv4Address', modalFormData)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message))
+        .finally(() => this.endLoader());
+    },
+    saveDnsAddress(modalFormData) {
+      this.startLoader();
+      this.$store
+        .dispatch('network/saveDnsAddress', modalFormData)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message))
+        .finally(() => this.endLoader());
+    },
+    saveSettings(modalFormData) {
+      this.startLoader();
+      this.$store
+        .dispatch('network/saveSettings', modalFormData)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message))
+        .finally(() => this.endLoader());
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Settings/Network/NetworkGlobalSettings.vue b/src/views/_sila/Settings/Network/NetworkGlobalSettings.vue
new file mode 100644
index 00000000..30287673
--- /dev/null
+++ b/src/views/_sila/Settings/Network/NetworkGlobalSettings.vue
@@ -0,0 +1,161 @@
+<template>
+  <page-section
+    v-if="firstInterface"
+    :section-title="$t('pageNetwork.networkSettings')"
+  >
+    <b-row>
+      <b-col md="3">
+        <dl>
+          <dt>
+            {{ $t('pageNetwork.hostname') }}
+            <b-button variant="link" class="p-1" @click="initSettingsModal()">
+              <icon-edit :title="$t('pageNetwork.modal.editHostnameTitle')" />
+            </b-button>
+          </dt>
+          <dd>{{ dataFormatter(firstInterface.hostname) }}</dd>
+        </dl>
+      </b-col>
+      <b-col md="3">
+        <dl>
+          <dt>{{ $t('pageNetwork.useDomainName') }}</dt>
+          <dd>
+            <b-form-checkbox
+              id="useDomainNameSwitch"
+              v-model="useDomainNameState"
+              data-test-id="networkSettings-switch-useDomainName"
+              switch
+              @change="changeDomainNameState"
+            >
+              <span v-if="useDomainNameState">
+                {{ $t('global.status.enabled') }}
+              </span>
+              <span v-else>{{ $t('global.status.disabled') }}</span>
+            </b-form-checkbox>
+          </dd>
+        </dl>
+      </b-col>
+      <b-col md="3">
+        <dl>
+          <dt>{{ $t('pageNetwork.useDns') }}</dt>
+          <dd>
+            <b-form-checkbox
+              id="useDnsSwitch"
+              v-model="useDnsState"
+              data-test-id="networkSettings-switch-useDns"
+              switch
+              @change="changeDnsState"
+            >
+              <span v-if="useDnsState">
+                {{ $t('global.status.enabled') }}
+              </span>
+              <span v-else>{{ $t('global.status.disabled') }}</span>
+            </b-form-checkbox>
+          </dd>
+        </dl>
+      </b-col>
+      <b-col md="3">
+        <dl>
+          <dt>{{ $t('pageNetwork.useNtp') }}</dt>
+          <dd>
+            <b-form-checkbox
+              id="useNtpSwitch"
+              v-model="useNtpState"
+              data-test-id="networkSettings-switch-useNtp"
+              switch
+              @change="changeNtpState"
+            >
+              <span v-if="useNtpState">
+                {{ $t('global.status.enabled') }}
+              </span>
+              <span v-else>{{ $t('global.status.disabled') }}</span>
+            </b-form-checkbox>
+          </dd>
+        </dl>
+      </b-col>
+    </b-row>
+  </page-section>
+</template>
+
+<script>
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import IconEdit from '@carbon/icons-vue/es/edit/16';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import PageSection from '@/components/Global/PageSection';
+import { mapState } from 'vuex';
+
+export default {
+  name: 'GlobalNetworkSettings',
+  components: { IconEdit, PageSection },
+  mixins: [BVToastMixin, DataFormatterMixin],
+
+  data() {
+    return {
+      hostname: '',
+    };
+  },
+  computed: {
+    ...mapState('network', ['ethernetData']),
+    firstInterface() {
+      return this.$store.getters['network/globalNetworkSettings'][0];
+    },
+    useDomainNameState: {
+      get() {
+        return this.$store.getters['network/globalNetworkSettings'][0]
+          .useDomainNameEnabled;
+      },
+      set(newValue) {
+        return newValue;
+      },
+    },
+    useDnsState: {
+      get() {
+        return this.$store.getters['network/globalNetworkSettings'][0]
+          .useDnsEnabled;
+      },
+      set(newValue) {
+        return newValue;
+      },
+    },
+    useNtpState: {
+      get() {
+        return this.$store.getters['network/globalNetworkSettings'][0]
+          .useNtpEnabled;
+      },
+      set(newValue) {
+        return newValue;
+      },
+    },
+  },
+  created() {
+    this.$store.dispatch('network/getEthernetData').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('network-global-settings-complete');
+    });
+  },
+  methods: {
+    changeDomainNameState(state) {
+      this.$store
+        .dispatch('network/saveDomainNameState', state)
+        .then((success) => {
+          this.successToast(success);
+        })
+        .catch(({ message }) => this.errorToast(message));
+    },
+    changeDnsState(state) {
+      this.$store
+        .dispatch('network/saveDnsState', state)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message));
+    },
+    changeNtpState(state) {
+      this.$store
+        .dispatch('network/saveNtpState', state)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message));
+    },
+    initSettingsModal() {
+      this.$bvModal.show('modal-hostname');
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Settings/Network/NetworkInterfaceSettings.vue b/src/views/_sila/Settings/Network/NetworkInterfaceSettings.vue
new file mode 100644
index 00000000..023d29bc
--- /dev/null
+++ b/src/views/_sila/Settings/Network/NetworkInterfaceSettings.vue
@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <page-section>
+      <b-row>
+        <b-col md="3">
+          <dl>
+            <dt>{{ $t('pageNetwork.linkStatus') }}</dt>
+            <dd>
+              {{ dataFormatter(linkStatus) }}
+            </dd>
+          </dl>
+        </b-col>
+        <b-col md="3">
+          <dl>
+            <dt>{{ $t('pageNetwork.speed') }}</dt>
+            <dd>
+              {{ dataFormatter(linkSpeed) }}
+            </dd>
+          </dl>
+        </b-col>
+      </b-row>
+    </page-section>
+    <page-section :section-title="$t('pageNetwork.interfaceSection')">
+      <b-row>
+        <b-col md="3">
+          <dl>
+            <dt>
+              {{ $t('pageNetwork.fqdn') }}
+            </dt>
+            <dd>
+              {{ dataFormatter(fqdn) }}
+            </dd>
+          </dl>
+        </b-col>
+        <b-col md="3">
+          <dl class="text-nowrap">
+            <dt>
+              {{ $t('pageNetwork.macAddress') }}
+              <b-button
+                variant="link"
+                class="p-1"
+                @click="initMacAddressModal()"
+              >
+                <icon-edit
+                  :title="$t('pageNetwork.modal.editMacAddressTitle')"
+                />
+              </b-button>
+            </dt>
+            <dd>
+              {{ dataFormatter(macAddress) }}
+            </dd>
+          </dl>
+        </b-col>
+      </b-row>
+    </page-section>
+  </div>
+</template>
+
+<script>
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import IconEdit from '@carbon/icons-vue/es/edit/16';
+import PageSection from '@/components/Global/PageSection';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import { mapState } from 'vuex';
+
+export default {
+  name: 'Ipv4Table',
+  components: {
+    IconEdit,
+    PageSection,
+  },
+  mixins: [BVToastMixin, DataFormatterMixin],
+  props: {
+    tabIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      selectedInterface: '',
+      linkStatus: '',
+      linkSpeed: '',
+      fqdn: '',
+      macAddress: '',
+    };
+  },
+  computed: {
+    ...mapState('network', ['ethernetData']),
+  },
+  watch: {
+    // Watch for change in tab index
+    tabIndex() {
+      this.getSettings();
+    },
+  },
+  created() {
+    this.getSettings();
+    this.$store.dispatch('network/getEthernetData').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('network-interface-settings-complete');
+    });
+  },
+  methods: {
+    getSettings() {
+      this.selectedInterface = this.tabIndex;
+      this.linkStatus = this.ethernetData[this.selectedInterface].LinkStatus;
+      this.linkSpeed = this.ethernetData[this.selectedInterface].SpeedMbps;
+      this.fqdn = this.ethernetData[this.selectedInterface].FQDN;
+      this.macAddress = this.ethernetData[this.selectedInterface].MACAddress;
+    },
+    initMacAddressModal() {
+      this.$bvModal.show('modal-mac-address');
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Settings/Network/TableDns.vue b/src/views/_sila/Settings/Network/TableDns.vue
new file mode 100644
index 00000000..569109f1
--- /dev/null
+++ b/src/views/_sila/Settings/Network/TableDns.vue
@@ -0,0 +1,145 @@
+<template>
+  <page-section :section-title="$t('pageNetwork.staticDns')">
+    <b-row>
+      <b-col lg="6">
+        <div class="text-right">
+          <b-button variant="primary" @click="initDnsModal()">
+            <icon-add />
+            {{ $t('pageNetwork.table.addDnsAddress') }}
+          </b-button>
+        </div>
+        <b-table
+          responsive="md"
+          hover
+          :fields="dnsTableFields"
+          :items="form.dnsStaticTableItems"
+          :empty-text="$t('global.table.emptyMessage')"
+          class="mb-0"
+          show-empty
+        >
+          <template #cell(actions)="{ item, index }">
+            <table-row-action
+              v-for="(action, actionIndex) in item.actions"
+              :key="actionIndex"
+              :value="action.value"
+              :title="action.title"
+              :enabled="action.enabled"
+              @click-table-action="onDnsTableAction(action, $event, index)"
+            >
+              <template #icon>
+                <icon-edit v-if="action.value === 'edit'" />
+                <icon-trashcan v-if="action.value === 'delete'" />
+              </template>
+            </table-row-action>
+          </template>
+        </b-table>
+      </b-col>
+    </b-row>
+  </page-section>
+</template>
+
+<script>
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import IconAdd from '@carbon/icons-vue/es/add--alt/20';
+import IconEdit from '@carbon/icons-vue/es/edit/20';
+import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
+import PageSection from '@/components/Global/PageSection';
+import TableRowAction from '@/components/Global/TableRowAction';
+import { mapState } from 'vuex';
+
+export default {
+  name: 'DNSTable',
+  components: {
+    IconAdd,
+    IconEdit,
+    IconTrashcan,
+    PageSection,
+    TableRowAction,
+  },
+  mixins: [BVToastMixin],
+  props: {
+    tabIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      form: {
+        dnsStaticTableItems: [],
+      },
+      actions: [
+        {
+          value: 'edit',
+          title: this.$t('global.action.edit'),
+        },
+        {
+          value: 'delete',
+          title: this.$t('global.action.delete'),
+        },
+      ],
+      dnsTableFields: [
+        {
+          key: 'address',
+          label: this.$t('pageNetwork.table.ipAddress'),
+        },
+        { key: 'actions', label: '', tdClass: 'text-right' },
+      ],
+    };
+  },
+  computed: {
+    ...mapState('network', ['ethernetData']),
+  },
+  watch: {
+    // Watch for change in tab index
+    tabIndex() {
+      this.getStaticDnsItems();
+    },
+    ethernetData() {
+      this.getStaticDnsItems();
+    },
+  },
+  created() {
+    this.getStaticDnsItems();
+    this.$store.dispatch('network/getEthernetData').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('network-table-dns-complete');
+    });
+  },
+  methods: {
+    getStaticDnsItems() {
+      const index = this.tabIndex;
+      const dns = this.ethernetData[index].StaticNameServers || [];
+      this.form.dnsStaticTableItems = dns.map((server) => {
+        return {
+          address: server,
+          actions: [
+            {
+              value: 'delete',
+              title: this.$t('pageNetwork.table.deleteDns'),
+            },
+          ],
+        };
+      });
+    },
+    onDnsTableAction(action, $event, index) {
+      if ($event === 'delete') {
+        this.deleteDnsTableRow(index);
+      }
+    },
+    deleteDnsTableRow(index) {
+      this.form.dnsStaticTableItems.splice(index, 1);
+      const newDnsArray = this.form.dnsStaticTableItems.map((dns) => {
+        return dns.address;
+      });
+      this.$store
+        .dispatch('network/editDnsAddress', newDnsArray)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message));
+    },
+    initDnsModal() {
+      this.$bvModal.show('modal-dns');
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Settings/Network/TableIpv4.vue b/src/views/_sila/Settings/Network/TableIpv4.vue
new file mode 100644
index 00000000..75870031
--- /dev/null
+++ b/src/views/_sila/Settings/Network/TableIpv4.vue
@@ -0,0 +1,169 @@
+<template>
+  <page-section :section-title="$t('pageNetwork.ipv4')">
+    <b-row>
+      <b-col>
+        <h3 class="h5">
+          {{ $t('pageNetwork.ipv4Addresses') }}
+        </h3>
+      </b-col>
+      <b-col class="text-right">
+        <b-button variant="primary" @click="initAddIpv4Address()">
+          <icon-add />
+          {{ $t('pageNetwork.table.addIpv4Address') }}
+        </b-button>
+      </b-col>
+    </b-row>
+    <b-table
+      responsive="md"
+      hover
+      :fields="ipv4TableFields"
+      :items="form.ipv4TableItems"
+      :empty-text="$t('global.table.emptyMessage')"
+      class="mb-0"
+      show-empty
+    >
+      <template #cell(actions)="{ item, index }">
+        <table-row-action
+          v-for="(action, actionIndex) in item.actions"
+          :key="actionIndex"
+          :value="action.value"
+          :title="action.title"
+          :enabled="action.enabled"
+          @click-table-action="onIpv4TableAction(action, $event, index)"
+        >
+          <template #icon>
+            <icon-edit v-if="action.value === 'edit'" />
+            <icon-trashcan v-if="action.value === 'delete'" />
+          </template>
+        </table-row-action>
+      </template>
+    </b-table>
+  </page-section>
+</template>
+
+<script>
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import IconAdd from '@carbon/icons-vue/es/add--alt/20';
+import IconEdit from '@carbon/icons-vue/es/edit/20';
+import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import PageSection from '@/components/Global/PageSection';
+import TableRowAction from '@/components/Global/TableRowAction';
+import { mapState } from 'vuex';
+
+export default {
+  name: 'Ipv4Table',
+  components: {
+    IconAdd,
+    IconEdit,
+    IconTrashcan,
+    PageSection,
+    TableRowAction,
+  },
+  mixins: [BVToastMixin, LoadingBarMixin],
+  props: {
+    tabIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      form: {
+        ipv4TableItems: [],
+      },
+      actions: [
+        {
+          value: 'edit',
+          title: this.$t('global.action.edit'),
+        },
+        {
+          value: 'delete',
+          title: this.$t('global.action.delete'),
+        },
+      ],
+      ipv4TableFields: [
+        {
+          key: 'Address',
+          label: this.$t('pageNetwork.table.ipAddress'),
+        },
+        {
+          key: 'Gateway',
+          label: this.$t('pageNetwork.table.gateway'),
+        },
+        {
+          key: 'SubnetMask',
+          label: this.$t('pageNetwork.table.subnet'),
+        },
+        {
+          key: 'AddressOrigin',
+          label: this.$t('pageNetwork.table.addressOrigin'),
+        },
+        { key: 'actions', label: '', tdClass: 'text-right' },
+      ],
+    };
+  },
+  computed: {
+    ...mapState('network', ['ethernetData']),
+  },
+  watch: {
+    // Watch for change in tab index
+    tabIndex() {
+      this.getIpv4TableItems();
+    },
+    ethernetData() {
+      this.getIpv4TableItems();
+    },
+  },
+  created() {
+    this.getIpv4TableItems();
+    this.$store.dispatch('network/getEthernetData').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('network-table-ipv4-complete');
+    });
+  },
+  methods: {
+    getIpv4TableItems() {
+      const index = this.tabIndex;
+      const addresses = this.ethernetData[index].IPv4Addresses || [];
+      this.form.ipv4TableItems = addresses.map((ipv4) => {
+        return {
+          Address: ipv4.Address,
+          SubnetMask: ipv4.SubnetMask,
+          Gateway: ipv4.Gateway,
+          AddressOrigin: ipv4.AddressOrigin,
+          actions: [
+            {
+              value: 'delete',
+              title: this.$t('pageNetwork.table.deleteIpv4'),
+            },
+          ],
+        };
+      });
+    },
+    onIpv4TableAction(action, $event, index) {
+      if ($event === 'delete') {
+        this.deleteIpv4TableRow(index);
+      }
+    },
+    deleteIpv4TableRow(index) {
+      this.form.ipv4TableItems.splice(index, 1);
+      const newIpv4Array = this.form.ipv4TableItems.map((ipv4) => {
+        const { Address, SubnetMask, Gateway } = ipv4;
+        return {
+          Address,
+          SubnetMask,
+          Gateway,
+        };
+      });
+      this.$store
+        .dispatch('network/editIpv4Address', newIpv4Array)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message));
+    },
+    initAddIpv4Address() {
+      this.$bvModal.show('modal-add-ipv4');
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Settings/Network/index.js b/src/views/_sila/Settings/Network/index.js
new file mode 100644
index 00000000..97bf0397
--- /dev/null
+++ b/src/views/_sila/Settings/Network/index.js
@@ -0,0 +1,2 @@
+import Network from './Network.vue';
+export default Network;
diff --git a/src/views/_sila/Settings/PowerRestorePolicy/PowerRestorePolicy.vue b/src/views/_sila/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
new file mode 100644
index 00000000..06e30f3e
--- /dev/null
+++ b/src/views/_sila/Settings/PowerRestorePolicy/PowerRestorePolicy.vue
@@ -0,0 +1,91 @@
+<template>
+  <b-container fluid="xl">
+    <page-title :description="$t('pagePowerRestorePolicy.description')" />
+
+    <b-row>
+      <b-col sm="8" md="6" xl="12">
+        <b-form-group :label="$t('pagePowerRestorePolicy.powerPoliciesLabel')">
+          <b-form-radio-group
+            v-model="currentPowerRestorePolicy"
+            :options="options"
+            name="power-restore-policy"
+          ></b-form-radio-group>
+        </b-form-group>
+      </b-col>
+    </b-row>
+
+    <b-button variant="primary" type="submit" @click="submitForm">
+      {{ $t('global.action.saveSettings') }}
+    </b-button>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+
+export default {
+  name: 'PowerRestorePolicy',
+  components: { PageTitle },
+  mixins: [VuelidateMixin, BVToastMixin, LoadingBarMixin],
+  beforeRouteLeave(to, from, next) {
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      policyValue: null,
+      options: [],
+    };
+  },
+  computed: {
+    powerRestorePolicies() {
+      return this.$store.getters['powerPolicy/powerRestorePolicies'];
+    },
+    currentPowerRestorePolicy: {
+      get() {
+        return this.$store.getters['powerPolicy/powerRestoreCurrentPolicy'];
+      },
+      set(policy) {
+        this.policyValue = policy;
+      },
+    },
+  },
+  created() {
+    this.startLoader();
+    this.renderPowerRestoreSettings();
+  },
+  methods: {
+    renderPowerRestoreSettings() {
+      Promise.all([
+        this.$store.dispatch('powerPolicy/getPowerRestorePolicies'),
+        this.$store.dispatch('powerPolicy/getPowerRestoreCurrentPolicy'),
+      ]).finally(() => {
+        this.options.length = 0;
+        this.powerRestorePolicies.map((item) => {
+          this.options.push({
+            text: this.$t(`pagePowerRestorePolicy.policiesDesc.${item.state}`),
+            value: `${item.state}`,
+          });
+        });
+        this.endLoader();
+      });
+    },
+    submitForm() {
+      this.startLoader();
+      this.$store
+        .dispatch(
+          'powerPolicy/setPowerRestorePolicy',
+          this.policyValue || this.currentPowerRestorePolicy
+        )
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message))
+        .finally(() => {
+          this.renderPowerRestoreSettings();
+        });
+    },
+  },
+};
+</script>
diff --git a/src/views/_sila/Settings/PowerRestorePolicy/index.js b/src/views/_sila/Settings/PowerRestorePolicy/index.js
new file mode 100644
index 00000000..fab0d477
--- /dev/null
+++ b/src/views/_sila/Settings/PowerRestorePolicy/index.js
@@ -0,0 +1,2 @@
+import PowerRestorePolicy from './PowerRestorePolicy.vue';
+export default PowerRestorePolicy;
-- 
cgit v1.2.3