fix Modals, Tables and Pages: event logs, inventoty, post logs, operttions, global styles

28 files changed, 682 insertions, 1751 deletions

diff --git a/src/views/HardwareStatus/Inventory/Inventory.vue b/src/views/HardwareStatus/Inventory/Inventory.vue
index 0e97f711..bfb930ab 100644
--- a/src/views/HardwareStatus/Inventory/Inventory.vue
+++ b/src/views/HardwareStatus/Inventory/Inventory.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-container fluid class="p-0 m-0">
+  <b-container id="page-inventory" fluid class="p-0 m-0">
     <page-title />
     <!-- Service indicators -->
     <service-indicator />
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue b/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue
index f7fef0e3..47edf3a5 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue
@@ -10,6 +10,7 @@
       responsive="md"
       :items="items"
       :fields="fields"
+      show-empty
       :empty-text="$t('global.table.emptyMessage')"
       :busy="isBusy"
     >
@@ -89,30 +90,44 @@ export default {
         {
           key: 'expandRow',
           label: '',
-          tdClass: 'table-row-expand',
+          thClass: 'bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'table-row-expand bootstrap-rounded-table__td',
         },
         {
           key: 'name',
           label: this.$t('pageInventory.table.id'),
           formatter: this.dataFormatter,
           sortable: true,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'partNumber',
           label: this.$t('pageInventory.table.partNumber'),
           formatter: this.dataFormatter,
           sortable: true,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'locationNumber',
           label: this.$t('pageInventory.table.locationNumber'),
           formatter: this.dataFormatter,
           sortable: true,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'identifyLed',
           label: this.$t('pageInventory.table.identifyLed'),
           formatter: this.dataFormatter,
+          thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: ' bootstrap-rounded-table__td',
         },
       ],
       expandRowLabel: expandRowLabel,
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
index 41a88c2e..21a07e5f 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
@@ -18,6 +18,7 @@
           variant="link"
           data-test-id="hardwareStatus-button-expandBmc"
           :title="expandRowLabel"
+          class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
           <icon-chevron />
@@ -183,27 +184,43 @@ export default {
         {
           key: 'expandRow',
           label: '',
-          tdClass: 'table-row-expand',
+          thStyle: { maxWidth: '27px' },
+          tdStyle: { maxWidth: '27px' },
+          thClass: 'bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'table-row-expand bootstrap-rounded-table__td',
         },
         {
           key: 'id',
           label: this.$t('pageInventory.table.id'),
           formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'health',
           label: this.$t('pageInventory.table.health'),
           formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'locationNumber',
           label: this.$t('pageInventory.table.locationNumber'),
           formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'identifyLed',
           label: this.$t('pageInventory.table.identifyLed'),
           formatter: this.dataFormatter,
+          thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: ' bootstrap-rounded-table__td',
         },
       ],
       expandRowLabel: expandRowLabel,
@@ -246,37 +263,37 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.row {
-  margin: 0px;
-  flex-wrap: nowrap;
-}
-.fans-table-col-first__cell {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: flex-start;
-}
+// .row {
+//   margin: 0px;
+//   flex-wrap: nowrap;
+// }
+// .fans-table-col-first__cell {
+//   display: flex;
+//   flex-flow: row nowrap;
+//   align-items: center;
+//   justify-content: flex-start;
+// }
 
-.status__img {
-  margin-right: 7px;
-}
+// .status__img {
+//   margin-right: 7px;
+// }
 
-.bold-12px__caps {
-  color: $text-secondary;
-}
+// .bold-12px__caps {
+//   color: $text-secondary;
+// }
 
-.attrib-names {
-  border-bottom: 1px solid $faint-secondary-primary-10;
-  color: $text-secondary !important;
-  font-weight: 600;
-}
+// .attrib-names {
+//   border-bottom: 1px solid $faint-secondary-primary-10;
+//   color: $text-secondary !important;
+//   font-weight: 600;
+// }
 
-.custom-switch {
-  margin: 0;
-}
+// .custom-switch {
+//   margin: 0;
+// }
 
-.btn-link {
-  width: 30px !important;
-  height: 20px !important;
-}
+// .btn-link {
+//   width: 30px !important;
+//   height: 20px !important;
+// }
 </style>
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue b/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue
index 60f593f4..c213aa97 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue
@@ -137,28 +137,41 @@ export default {
         {
           key: 'expandRow',
           label: '',
-          tdClass: 'table-row-expand',
+          thClass: 'bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'table-row-expand bootstrap-rounded-table__td',
         },
         {
           key: 'id',
           label: this.$t('pageInventory.table.id'),
           formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'health',
           label: this.$t('pageInventory.table.health'),
           formatter: this.dataFormatter,
-          tdClass: 'text-nowrap',
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'text-nowrap regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'locationNumber',
           label: this.$t('pageInventory.table.locationNumber'),
           formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'identifyLed',
           label: this.$t('pageInventory.table.identifyLed'),
           formatter: this.dataFormatter,
+          thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: ' bootstrap-rounded-table__td',
         },
       ],
       expandRowLabel: expandRowLabel,
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue b/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
index 020ab1f6..430e86af 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
@@ -190,28 +190,41 @@ export default {
         {
           key: 'expandRow',
           label: '',
-          tdClass: 'table-row-expand',
+          thClass: 'bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'table-row-expand bootstrap-rounded-table__td',
         },
         {
           key: 'id',
           label: this.$t('pageInventory.table.id'),
           formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'health',
           label: this.$t('pageInventory.table.health'),
           formatter: this.dataFormatter,
-          tdClass: 'text-nowrap',
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'text-nowrap regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'locationNumber',
           label: this.$t('pageInventory.table.locationNumber'),
           formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'identifyLed',
           label: this.$t('pageInventory.table.identifyLed'),
           formatter: this.dataFormatter,
+          thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: ' bootstrap-rounded-table__td',
         },
       ],
       searchFilter: searchFilter,
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
index 8706f498..e1932d53 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
@@ -129,32 +129,45 @@ export default {
         {
           key: 'expandRow',
           label: '',
-          tdClass: 'table-row-expand',
           sortable: false,
+          thClass: 'bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'table-row-expand bootstrap-rounded-table__td',
         },
         {
           key: 'id',
           label: this.$t('pageInventory.table.id'),
           formatter: this.dataFormatter,
           sortable: true,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'health',
           label: this.$t('pageInventory.table.health'),
           formatter: this.dataFormatter,
           sortable: true,
-          tdClass: 'text-nowrap',
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'text-nowrap regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'partNumber',
           label: this.$t('pageInventory.table.partNumber'),
           formatter: this.dataFormatter,
           sortable: true,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'serialNumber',
           label: this.$t('pageInventory.table.serialNumber'),
           formatter: this.dataFormatter,
+          thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: ' bootstrap-rounded-table__td',
         },
       ],
       searchFilter: searchFilter,
diff --git a/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue b/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
index 9417d9d6..7bb14a52 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
@@ -148,32 +148,45 @@ export default {
         {
           key: 'expandRow',
           label: '',
-          tdClass: 'table-row-expand',
           sortable: false,
+          thClass: 'bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'table-row-expand bootstrap-rounded-table__td',
         },
         {
           key: 'id',
           label: this.$t('pageInventory.table.id'),
           formatter: this.dataFormatter,
           sortable: true,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'health',
           label: this.$t('pageInventory.table.health'),
           formatter: this.dataFormatter,
           sortable: true,
-          tdClass: 'text-nowrap',
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'text-nowrap regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'locationNumber',
           label: this.$t('pageInventory.table.locationNumber'),
           formatter: this.dataFormatter,
           sortable: true,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'identifyLed',
           label: this.$t('pageInventory.table.identifyLed'),
           formatter: this.dataFormatter,
+          thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: ' bootstrap-rounded-table__td',
         },
       ],
       searchFilter: searchFilter,
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue b/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue
index 3e25747d..d81a0490 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue
@@ -183,33 +183,46 @@ export default {
         {
           key: 'expandRow',
           label: '',
-          tdClass: 'table-row-expand',
           sortable: false,
+          thClass: 'bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'table-row-expand bootstrap-rounded-table__td',
         },
         {
           key: 'id',
           label: this.$t('pageInventory.table.id'),
           formatter: this.dataFormatter,
           sortable: true,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'health',
           label: this.$t('pageInventory.table.health'),
           formatter: this.dataFormatter,
           sortable: true,
-          tdClass: 'text-nowrap',
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'text-nowrap regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'locationNumber',
           label: this.$t('pageInventory.table.locationNumber'),
           formatter: this.dataFormatter,
           sortable: true,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'identifyLed',
           label: this.$t('pageInventory.table.identifyLed'),
           formatter: this.dataFormatter,
           sortable: false,
+          thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: ' bootstrap-rounded-table__td',
         },
       ],
       processors: [
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue b/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue
index 1576c8d8..9ddcaa69 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue
@@ -29,7 +29,7 @@
       <!-- Health -->
       <template #cell(health)="{ value }">
         <status-icon :status="statusIcon(value)" />
-        {{ value }}
+        {{ statusIcon(value) }}
       </template>
 
       <template #cell(locationIndicatorActive)="{ item }">
@@ -171,34 +171,50 @@ export default {
         {
           key: 'expandRow',
           label: '',
-          tdClass: 'table-row-expand',
+          thStyle: { minWidth: '29px' },
+          thClass: 'bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'table-row-expand bootstrap-rounded-table__td',
         },
         {
           key: 'id',
           label: this.$t('pageInventory.table.id'),
           formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'hardwareType',
           label: this.$t('pageInventory.table.hardwareType'),
           formatter: this.dataFormatter,
-          tdClass: 'text-nowrap',
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'text-nowrap regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'health',
           label: this.$t('pageInventory.table.health'),
           formatter: this.dataFormatter,
-          tdClass: 'text-nowrap',
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'locationNumber',
           label: this.$t('pageInventory.table.locationNumber'),
           formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'locationIndicatorActive',
           label: this.$t('pageInventory.table.identifyLed'),
           formatter: this.dataFormatter,
+          thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: ' bootstrap-rounded-table__td',
         },
       ],
       expandRowLabel: expandRowLabel,
diff --git a/src/views/Logs/EventLogs/EventLogs.vue b/src/views/Logs/EventLogs/EventLogs.vue
index eb1c703a..441d8cfa 100644
--- a/src/views/Logs/EventLogs/EventLogs.vue
+++ b/src/views/Logs/EventLogs/EventLogs.vue
@@ -1,63 +1,95 @@
 <template>
-  <b-container fluid="xxl pt-0 m-2">
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+    class="logs-section"
+  >
     <page-title />
+    <div class="logs-head-container">
+      <div class="semi-bold-12px">
+        <table-cell-count
+          :filtered-items-count="filteredRows"
+          :total-number-of-cells="allLogs.length"
+        ></table-cell-count>
+      </div>
+      <search
+        :placeholder="$t('pageEventLogs.table.searchLogs')"
+        data-test-id="eventLogs-input-searchLogs"
+        style="margin: 13px; width: 35%"
+        @change-search="onChangeSearchInput"
+        @clear-search="onClearSearchInput"
+      />
+    </div>
     <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">
+      <b-col md="12" xl="6">
         <table-date-filter @change="onChangeDateTimeFilter" />
       </b-col>
-    </b-row>
-    <b-row>
-      <b-col class="text-right">
+      <b-col
+        md="12"
+        xl="6"
+        class="d-flex align-items-end justify-content-between mt-3"
+      >
         <table-filter :filters="tableFilters" @filter-change="onFilterChange" />
-        <b-button
-          variant="link"
-          :disabled="allLogs.length === 0"
-          @click="deleteAllLogs"
+        <popover-with-slot
+          id="popover-delete"
+          :button-label="$t('pageEventLogs.clear')"
+          :popup-label="$t('pageEventLogs.clearLogs_popup')"
+          placement="left"
+          :action="deleteAllLogs"
         >
-          <icon-delete /> {{ $t('global.action.deleteAll') }}
-        </b-button>
+          <b-button
+            id="popover-delete"
+            ref="button"
+            variant="link"
+            style="color: $red-brand-primary"
+            :disabled="allLogs.length === 0"
+          >
+            <icon-delete /> {{ $t('pageEventLogs.clearLogs') }}
+          </b-button>
+        </popover-with-slot>
         <b-button
           variant="primary"
+          size="md"
           :class="{ disabled: allLogs.length === 0 }"
           :download="exportFileNameByDate()"
           :href="href"
         >
-          <icon-export /> {{ $t('global.action.exportAll') }}
+          <icon-download /> {{ $t('global.action.exportAll') }}
         </b-button>
       </b-col>
     </b-row>
     <b-row>
-      <b-col>
+      <b-col id="logs-table-wrapper" class="m-0 p-0">
         <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">
+            <b-button
+              size="md"
+              variant="secondary"
+              style="margin-right: 1rem"
+              @click="resolveLogs"
+            >
+              <img
+                class="sourse__img"
+                src="@/assets/images/event-logs/resolved-button.svg"
+              />
               {{ $t('pageEventLogs.resolve') }}
             </b-button>
-            <b-button variant="primary" @click="unresolveLogs">
+            <b-button
+              size="md"
+              variant="primary"
+              style="margin-right: 1rem"
+              @click="unresolveLogs"
+            >
               {{ $t('pageEventLogs.unresolve') }}
             </b-button>
             <table-toolbar-export
               :data="batchExportData"
+              style="margin-right: 1rem"
               :file-name="exportFileNameByDate()"
             />
           </template>
@@ -66,6 +98,7 @@
           id="table-event-logs"
           ref="table"
           responsive="md"
+          class="logs-table"
           selectable
           no-select-on-click
           sort-icon-left
@@ -73,7 +106,9 @@
           no-sort-reset
           sort-desc
           show-empty
+          no-border-collapse
           sort-by="id"
+          :sticky-header="true"
           :fields="fields"
           :items="filteredLogs"
           :sort-compare="onSortCompare"
@@ -106,126 +141,123 @@
               <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)"
+          <!-- Description column -->
+          <template #cell(description)="data">
+            <b-row class="semi-bold-16px tretiatry">
+              {{ filteredLogs[data.index].name }}
+            </b-row>
+            <b-row
+              class="regular-12px tretiatry pointer"
+              @click="toggleRowDetails(data)"
             >
-              <icon-chevron />
-            </b-button>
+              {{ data.value }}
+            </b-row>
           </template>
 
           <template #row-details="{ item }">
-            <b-container fluid>
+            <b-container
+              fluid
+              style="border-bottom: 1px solid rgba(26, 62, 91, 0.1)"
+            >
               <b-row>
-                <b-col>
+                <b-col class="mt-1">
                   <dl>
                     <!-- Name -->
-                    <dt>{{ $t('pageEventLogs.table.name') }}:</dt>
-                    <dd>{{ dataFormatter(item.name) }}</dd>
+                    <dt class="semi-bold-12px">
+                      {{ $t('pageEventLogs.table.name') }}:
+                    </dt>
+                    <dd class="regular-12px">{{ dataFormatter(item.name) }}</dd>
                   </dl>
                   <dl>
-                    <!-- Type -->
-                    <dt>{{ $t('pageEventLogs.table.type') }}:</dt>
-                    <dd>{{ dataFormatter(item.type) }}</dd>
+                    <!-- Description -->
+                    <dt class="semi-bold-12px">
+                      {{ $t('pageEventLogs.table.description') }}:
+                    </dt>
+                    <dd class="regular-12px tretiatry">
+                      {{ dataFormatter(item.description) }}
+                    </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 }}
+                    <!-- Type -->
+                    <dt class="semi-bold-12px">
+                      {{ $t('pageEventLogs.table.type') }}:
+                    </dt>
+                    <dd class="regular-12px tretiatry">
+                      {{ dataFormatter(item.type) }}
                     </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 }}
+            <span
+              :class="`indicators-${value}`"
+              class="bold-12px__caps"
+              style="text-overflow: ellipsis; white-space: nowrap"
+            >
+              {{ value }}</span
+            >
           </template>
           <!-- Date column -->
           <template #cell(date)="{ value }">
-            <p class="mb-0">{{ value | formatDate }}</p>
-            <p class="mb-0">{{ value | formatTime }}</p>
+            <img
+              src="@/assets/images/event-logs/time.svg"
+              class="sourse__img"
+            />
+            <span v-if="value" class="regular-12px quaternary">
+              {{ value | formatDate }}
+            </span>
+            <span v-if="value" class="regular-12px quaternary">
+              в {{ value | formatTimeShort }}
+            </span>
           </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">
+          <template #cell(status)="{ value }">
+            <b-row v-if="value === true">
+              <img
+                class="sourse__img"
+                src="@/assets/images/event-logs/resolved.svg"
+              />
+              <span class="semi-bold-12px__caps resolved">
                 {{ $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>
+            </b-row>
+            <b-row v-else>
+              <img
+                class="sourse__img"
+                src="@/assets/images/event-logs/not-resolved.svg"
+              />
+              <span class="semi-bold-12px__caps not-resolved">
+                {{ $t('pageEventLogs.unresolved') }}</span
+              >
+            </b-row>
           </template>
         </b-table>
       </b-col>
     </b-row>
-
     <!-- Table pagination -->
-    <b-row>
-      <b-col sm="6">
+    <b-row class="logs-pagination-container">
+      <b-col sm="6" class="d-flex align-items-center justify-content-start">
         <b-form-group
           class="table-pagination-select"
           :label="$t('global.table.itemsPerPage')"
-          label-for="pagination-items-per-page"
+          label-class="semi-bold-16px mb-0"
+          label-for="pagination"
         >
           <b-form-select
-            id="pagination-items-per-page"
+            id="pagination"
             v-model="perPage"
+            class="select-per-page semi-bold-16px mb-0"
             :options="itemsPerPageOptions"
           />
         </b-form-group>
       </b-col>
-      <b-col sm="6">
+      <b-col sm="6" class="d-flex align-items-center justify-content-end">
+        <span class="semi-bold-16px"> Страницы </span>
         <b-pagination
           v-model="currentPage"
           first-number
@@ -241,21 +273,17 @@
 
 <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 PopoverWithSlot from '@/components/Global/SilaComponents/PopoverWithSlot';
 
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
@@ -278,23 +306,20 @@ import TableRowExpandMixin, {
 import SearchFilterMixin, {
   searchFilter,
 } from '@/components/Mixins/SearchFilterMixin';
+// import { headerHeight } from '@/assets/styles/bmc/helpers/_variables';
 
 export default {
   components: {
     IconDelete,
-    IconExport,
-    IconTrashcan,
-    IconChevron,
     IconDownload,
     PageTitle,
     Search,
-    StatusIcon,
     TableCellCount,
     TableFilter,
-    TableRowAction,
     TableToolbar,
     TableToolbarExport,
     TableDateFilter,
+    PopoverWithSlot,
   },
   mixins: [
     BVPaginationMixin,
@@ -316,47 +341,54 @@ export default {
   data() {
     return {
       isBusy: true,
+      sortDesc: true,
+      // headerHeight,
+      // stickyHeader: 'calc(100vh - 200px - #{$header-height})',
       fields: [
         {
-          key: 'expandRow',
-          label: '',
-          tdClass: 'table-row-expand',
-        },
-        {
           key: 'checkbox',
           sortable: false,
+          thClass: ' logs-table__th',
+          tdClass: 'logs-table__td',
         },
         {
           key: 'id',
           label: this.$t('pageEventLogs.table.id'),
           sortable: true,
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'semi-bold-12px logs-table__td',
+        },
+        {
+          key: 'description',
+          label: this.$t('pageEventLogs.table.about_event'),
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td',
         },
         {
           key: 'severity',
           label: this.$t('pageEventLogs.table.severity'),
-          sortable: true,
-          tdClass: 'text-nowrap',
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td',
+        },
+        {
+          key: 'source',
+          label: this.$t('pageEventLogs.table.source'),
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td semi-bold-12px__caps tretiatry ',
         },
         {
           key: 'date',
           label: this.$t('pageEventLogs.table.date'),
           sortable: true,
-          tdClass: 'text-nowrap',
-        },
-        {
-          key: 'description',
-          label: this.$t('pageEventLogs.table.description'),
-          tdClass: 'text-break',
+          thClass: `bold-12px__caps logs-table__th`,
+          tdClass: 'logs-table__td',
         },
         {
           key: 'status',
+          sortable: true,
           label: this.$t('pageEventLogs.table.status'),
-        },
-        {
-          key: 'actions',
-          sortable: false,
-          label: '',
-          tdClass: 'text-right text-nowrap',
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td',
         },
       ],
       tableFilters: [
@@ -431,7 +463,7 @@ export default {
       return this.getFilteredTableData(
         this.filteredLogsByDate,
         this.activeFilters
-      );
+      ).filter((el) => el.description);
     },
   },
   created() {
@@ -454,21 +486,10 @@ export default {
         .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));
-          }
-        });
+      this.$store
+        .dispatch('eventLog/deleteAllEventLogs', this.allLogs)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message));
     },
     deleteLogs(uris) {
       this.$store
@@ -602,3 +623,21 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.row {
+  margin: 0px;
+}
+
+.not-resolved {
+  color: $text-quaternary;
+}
+
+.table-pagination-select {
+  line-height: 1.8rem;
+}
+
+.form-group,
+.b-pagination {
+  margin: 0px !important;
+}
+</style>
diff --git a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
index d116d2ed..b13cef46 100644
--- a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
+++ b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
@@ -1,26 +1,29 @@
 <template>
-  <b-container fluid="xl">
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+    class="logs-section"
+  >
     <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">
+    <div class="logs-head-container">
+      <div class="semi-bold-12px">
+        <table-cell-count
+          :filtered-items-count="filteredRows"
+          :total-number-of-cells="allLogs.length"
+        ></table-cell-count>
+      </div>
+      <search
+        :placeholder="$t('pagePostCodeLogs.table.searchLogs')"
+        style="margin: 13px; width: 35%"
+        @change-search="onChangeSearchInput"
+        @clear-search="onClearSearchInput"
+      />
+    </div>
+    <b-row class="align-items-start m-0 p-0">
+      <b-col sm="7" md="6" xl="5">
         <table-date-filter @change="onChangeDateTimeFilter" />
       </b-col>
-    </b-row>
-    <b-row>
-      <b-col xl="12" class="text-right">
+      <b-col class="d-flex justify-content-end mt-3">
         <b-button
           variant="primary"
           :disabled="allLogs.length === 0"
@@ -31,8 +34,8 @@
         </b-button>
       </b-col>
     </b-row>
-    <b-row>
-      <b-col>
+    <b-row class="m-0 p-0">
+      <b-col class="p-0">
         <table-toolbar
           ref="toolbar"
           :selected-items-count="selectedRows.length"
@@ -40,107 +43,116 @@
         >
           <template #toolbar-buttons>
             <table-toolbar-export
+              style="margin-right: 1rem"
               :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>
+        <div id="logs-table-wrapper">
+          <b-table
+            id="logs-table"
+            ref="table"
+            responsive="md"
+            class="logs-table"
+            selectable
+            no-select-on-click
+            sort-icon-left
+            hover
+            no-sort-reset
+            sort-desc
+            show-empty
+            sort-by="id"
+            :no-border-collapse="true"
+            :sticky-header="true"
+            :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>
+            <!-- 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>
+        </div>
       </b-col>
     </b-row>
 
     <!-- Table pagination -->
-    <b-row>
-      <b-col sm="6">
+    <b-row class="logs-pagination-container m-0">
+      <b-col sm="6" class="d-flex align-items-center justify-content-start">
         <b-form-group
           class="table-pagination-select"
           :label="$t('global.table.itemsPerPage')"
+          label-class="semi-bold-16px mb-0"
           label-for="pagination-items-per-page"
         >
           <b-form-select
             id="pagination-items-per-page"
             v-model="perPage"
+            class="select-per-page semi-bold-16px mb-0"
             :options="itemsPerPageOptions"
           />
         </b-form-group>
       </b-col>
-      <b-col sm="6">
+      <b-col sm="6" class="d-flex align-items-center justify-content-end">
+        <span class="semi-bold-16px"> Страницы </span>
         <b-pagination
           v-model="currentPage"
           first-number
           last-number
           :per-page="perPage"
           :total-rows="getTotalRowCount(filteredRows)"
-          aria-controls="table-post-code-logs"
+          aria-controls="table-event-logs"
         />
       </b-col>
     </b-row>
@@ -210,32 +222,44 @@ export default {
   data() {
     return {
       isBusy: true,
+      // stickyHeader: 'calc(100vh - 307px)',
       fields: [
         {
           key: 'checkbox',
           sortable: false,
+          thClass: ' logs-table__th',
+          tdClass: 'logs-table__td',
         },
         {
           key: 'date',
           label: this.$t('pagePostCodeLogs.table.created'),
           sortable: true,
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'semi-bold-12px logs-table__td',
         },
         {
           key: 'timeStampOffset',
           label: this.$t('pagePostCodeLogs.table.timeStampOffset'),
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td',
         },
         {
           key: 'bootCount',
           label: this.$t('pagePostCodeLogs.table.bootCount'),
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td',
         },
         {
           key: 'postCode',
           label: this.$t('pagePostCodeLogs.table.postCode'),
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td semi-bold-12px__caps',
         },
         {
           key: 'actions',
           label: '',
-          tdClass: 'text-right text-nowrap',
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'text-right logs-table__td',
         },
       ],
       expandRowLabel,
@@ -345,3 +369,21 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.table-pagination-select {
+  line-height: 1.8rem;
+}
+
+.form-group,
+.b-pagination {
+  margin: 0px !important;
+}
+.items-per-page {
+  padding: 0 0 0 5px;
+  width: 55px;
+  height: 24px;
+  background-color: transparent;
+  border: 1px solid $on-surface-tretiatry;
+  border-radius: 4px;
+}
+</style>
diff --git a/src/views/Operations/Firmware/FirmwareFormUpdate.vue b/src/views/Operations/Firmware/FirmwareFormUpdate.vue
index ac4b23fc..a5e5ba97 100644
--- a/src/views/Operations/Firmware/FirmwareFormUpdate.vue
+++ b/src/views/Operations/Firmware/FirmwareFormUpdate.vue
@@ -59,6 +59,7 @@
         <b-btn
           data-test-id="firmware-button-startUpdate"
           type="submit"
+          size="md"
           variant="primary"
           :disabled="isPageDisabled"
         >
diff --git a/src/views/Operations/Kvm/ImagesModal.vue b/src/views/Operations/Kvm/ImagesModal.vue
deleted file mode 100644
index ce4e6ebf..00000000
--- a/src/views/Operations/Kvm/ImagesModal.vue
+++ /dev/null
@@ -1,296 +0,0 @@
-<template>
-  <b-modal id="modal-images" class="modal-images" hide-footer>
-    <template #modal-title>
-      <div class="popup-title">
-        <span class="semi-bold-20px">{{ $t('pageKvm.addImage_modal') }}</span>
-      </div>
-    </template>
-    <div class="popup-switch">
-      <span
-        class="medium-16px popup-item"
-        :class="{ 'switch-active': isImportFromPC }"
-        @click="switchExport"
-        >{{ $t('pageKvm.fromPC') }}</span
-      >
-      <span
-        class="medium-16px popup-item"
-        :class="{ 'switch-active': !isImportFromPC }"
-        @click="switchImport"
-        >{{ $t('pageKvm.fromServer') }}</span
-      >
-      <div class="slider" />
-    </div>
-    <div v-if="isImportFromPC" class="images-import_container">
-      <b-form-file
-        id="images-import__file-input"
-        placeholder="Нажмите на область или перетащите в нее файл образа"
-      ></b-form-file>
-    </div>
-    <div v-else class="popup-body">
-      <div class="connection-type-container">
-        <span class="regular-12px tretiatry select-label" for="username">{{
-          $t('pageKvm.urlAdress')
-        }}</span>
-        <b-form-select
-          v-model="connectionType"
-          :options="connectionTypes"
-          class="select-connection regular-14px"
-        />
-        <label class="regular-12px tretiatry" for="username">{{
-          $t('pageKvm.connectionType')
-        }}</label>
-        <b-form-input id="url" type="text" class="form-control url-input">
-        </b-form-input>
-        <b-form-group>
-          <label class="regular-12px tretiatry" for="username">{{
-            $t('pageLogin.username')
-          }}</label>
-          <b-form-input
-            id="username"
-            v-model="userInfo.username"
-            aria-describedby="login-error-alert username-required"
-            :state="getValidationState($v.userInfo.username)"
-            type="text"
-            data-test-id="login-input-username"
-            class="form-control image-username-input"
-            @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>
-
-        <b-form-group>
-          <input-password-toggle>
-            <label class="regular-12px tretiatry" for="password">{{
-              $t('pageLogin.password')
-            }}</label>
-            <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 image-password-input"
-              @input="$v.userInfo.password.$touch()"
-            >
-            </b-form-input>
-            <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>
-          </input-password-toggle>
-        </b-form-group>
-        <b-button class="upload-button" variant="primary">
-          {{ $t('pageKvm.upload') }}
-        </b-button>
-      </div>
-    </div>
-  </b-modal>
-</template>
-<script>
-import { required } from 'vuelidate/lib/validators';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
-
-export default {
-  components: { InputPasswordToggle },
-  mixins: [VuelidateMixin],
-  data() {
-    return {
-      isImportFromPC: true,
-      userInfo: {
-        username: null,
-        password: null,
-      },
-      connectionType: 1,
-      connectionTypes: [
-        {
-          value: 1,
-          text: 'HTTPS',
-        },
-      ],
-    };
-  },
-  validations: {
-    userInfo: {
-      username: {
-        required,
-      },
-      password: {
-        required,
-      },
-    },
-  },
-  methods: {
-    switchExport() {
-      this.isImportFromPC = true;
-    },
-    switchImport() {
-      this.isImportFromPC = false;
-    },
-  },
-};
-</script>
-<style lang="scss">
-.modal-dialog {
-  margin: 25vh auto;
-}
-.modal-content {
-  border-radius: 16px;
-  width: 480px;
-}
-.modal-header {
-  border-bottom: none;
-}
-
-.images-import_container > .custom-file {
-  width: 432px;
-  height: 357px;
-}
-
-#images-import__file-input ~ .custom-file-label {
-  background-color: transparent;
-  border: 1px dashed rgba(12, 28, 41, 0.6);
-  box-sizing: border-box;
-  border-radius: 8px;
-  width: 432px;
-  height: 357px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  white-space: normal;
-  padding: 0 65px;
-}
-
-#images-import__file-input ~ .custom-file-label::after {
-  display: none;
-}
-</style>
-<style lang="scss" scoped>
-.popup-switch {
-  position: relative;
-  display: flex;
-  flex-flow: row nowrap;
-  border-bottom: 1px solid #f3f4f5;
-  width: 100%;
-  height: 36px;
-}
-
-.switch-active {
-  color: $red-brand-primary;
-  transition: ease-in 0.15s;
-}
-
-.medium-16px {
-  margin-left: 20px;
-}
-
-.slider {
-  position: absolute;
-  height: 0px;
-  border-bottom: 4px solid $red-brand-primary;
-  transition: ease-in 0.2s;
-  bottom: 0px;
-}
-
-.popup-item:nth-child(1).switch-active ~ .slider {
-  width: 110px;
-  left: 21px;
-}
-
-.popup-item:nth-child(2).switch-active ~ .slider {
-  left: 157px;
-  width: 82px;
-}
-
-.popup-body {
-  margin: 24px 0 0 0;
-}
-
-.images-import_container {
-  width: 478px;
-  height: 405px;
-  background-color: $surface-secondary;
-  margin: 0px 0px -16px -16px;
-  border-radius: 0 0 16px 16px;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.image-username-input,
-.image-password-input {
-  height: 56px;
-  margin: -30px 0 5px 0;
-  padding-top: 30px;
-  font-family: 'Inter', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  letter-spacing: 0em;
-}
-
-.url-input {
-  height: 56px;
-  padding-top: 30px;
-  font-family: 'Inter', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  letter-spacing: 0em;
-  margin: -30px 0 20px 0;
-}
-
-.connection-type-container {
-  width: 446px;
-}
-
-.caption-12px {
-  padding-left: 10px;
-}
-
-.text-input {
-  margin: 0 0 0 50px;
-  padding: 0 0 0 5px;
-}
-
-.login-button {
-  height: 36px;
-  width: 380px;
-}
-
-.select-connection {
-  height: 56px;
-  padding-top: 30px;
-  border: none;
-  border-radius: 8px;
-  margin: -0px 0 18px 0;
-  background-color: $surface-secondary;
-  background-image: url('../../../assets/images/icon-chevron.svg');
-}
-.select-label {
-  position: absolute;
-  top: 84px;
-}
-
-.form-background .custom-select,
-.form-background .form-control {
-  border-radius: 8px;
-  border: none;
-  background-color: rgba(26, 62, 91, 0.05);
-}
-
-.upload-button {
-  width: 100%;
-  height: 52px;
-  margin: 0 auto 10px;
-}
-</style>
diff --git a/src/views/Operations/Kvm/Kvm.vue b/src/views/Operations/Kvm/Kvm.vue
index 324d50d0..a3103453 100644
--- a/src/views/Operations/Kvm/Kvm.vue
+++ b/src/views/Operations/Kvm/Kvm.vue
@@ -1,114 +1,24 @@
 <template>
-  <b-container fluid="xxl pt-0 m-0">
-    <b-button
-      class="btn-primary semi-bold-16px images_add-image-button"
-      @click="$bvModal.show('modal-images')"
-    >
-      {{ $t('pageKvm.addImage') }}</b-button
-    >
+  <b-container fluid>
     <page-title />
-    <div class="images">
-      <div class="images_desc">
-        <span class="regular-12px tretiatry">Подключенные образы:</span>
-      </div>
-      <div class="images-container">
-        <div class="images-container_image">
-          <img src="@/assets/images/console-images.svg" class="images-image" />
-          <span class="semi-bold-12px">Win-11-2022</span>
-          <span class="light-12px">с носителя</span>
-        </div>
-        <div class="images-container_image">
-          <img src="@/assets/images/console-images.svg" class="images-image" />
-          <span class="semi-bold-12px">Win-10-2017</span>
-          <span class="light-12px">с сервера</span>
-        </div>
-        <div class="images-container_image">
-          <img src="@/assets/images/console-images.svg" class="images-image" />
-          <span class="semi-bold-12px">Win-7-2010</span>
-          <span class="light-12px">с сервера</span>
-        </div>
-      </div>
+    <div class="terminal-container">
+      <kvm-console :is-full-window="false" />
     </div>
-    <kvm-console :is-full-window="false" />
-    <images-modal />
   </b-container>
 </template>
 
 <script>
 import PageTitle from '@/components/Global/PageTitle';
-import ImagesModal from './ImagesModal';
 import KvmConsole from './KvmConsole';
 
 export default {
   name: 'Kvm',
-  components: {
-    PageTitle,
-    ImagesModal,
-    KvmConsole,
-  },
+  components: { PageTitle, KvmConsole },
 };
 </script>
-<style lang="scss" scoped>
-.images_add-image-button {
-  position: absolute;
-  top: calc(#{$header-height});
-  right: 0px;
-  border: none;
-  box-shadow: none;
-  background-color: $faint-secondary-primary-5;
-  color: $red-brand-primary;
-  border-radius: 8px;
-  margin: 12px 32px;
-  width: 236px;
-  height: 40px;
-  z-index: 1001;
-  &:active {
-    background-color: $faint-secondary-primary-5-hover !important;
-    color: $red-brand-primary-active !important;
-    border: none;
-  }
-  &:focus {
-    box-shadow: none !important;
-  }
-  &:focus-visible {
-    box-shadow: none !important;
-  }
-}
-
-.images {
-  display: flex;
-  flex-flow: row wrap;
-  height: 144px;
-}
 
-.images_desc {
-  margin: 16px 0 16px 32px;
+<style scoped>
+.terminal-container {
   width: 100%;
 }
-
-.images-container {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  margin: 0 0 16px 32px;
-}
-
-.images-container_image {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  margin-right: 24px;
-}
-
-.images-image {
-  width: 40px;
-  height: 40px;
-  margin-bottom: 8px;
-}
-
-.semi-bold-12px {
-  color: $text-primary;
-}
 </style>
diff --git a/src/views/Operations/RebootBmc/RebootBmc.vue b/src/views/Operations/RebootBmc/RebootBmc.vue
index 900619cd..34b22151 100644
--- a/src/views/Operations/RebootBmc/RebootBmc.vue
+++ b/src/views/Operations/RebootBmc/RebootBmc.vue
@@ -19,14 +19,22 @@
             </b-col>
           </b-row>
           {{ $t('pageRebootBmc.rebootInformation') }}
-          <b-button
-            variant="primary"
-            class="d-block mt-5"
-            data-test-id="rebootBmc-button-reboot"
-            @click="onClick"
+          <popover-with-slot
+            id="popover-reboot"
+            :button-label="$t('global.action.reload')"
+            :popup-label="$t('BMC.ReloadBmc_popup')"
+            placement="left"
+            :action="rebootBmc"
           >
-            {{ $t('pageRebootBmc.rebootBmc') }}
-          </b-button>
+            <b-button
+              id="popover-reboot"
+              variant="primary"
+              class="d-block mt-5"
+              data-test-id="rebootBmc-button-reboot"
+            >
+              {{ $t('pageRebootBmc.rebootBmc') }}
+            </b-button>
+          </popover-with-slot>
         </page-section>
       </b-col>
     </b-row>
@@ -38,10 +46,11 @@ 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 PopoverWithSlot from '@/components/Global/SilaComponents/PopoverWithSlot';
 
 export default {
   name: 'RebootBmc',
-  components: { PageTitle, PageSection },
+  components: { PageTitle, PageSection, PopoverWithSlot },
   mixins: [BVToastMixin, LoadingBarMixin],
   beforeRouteLeave(to, from, next) {
     this.hideLoader();
@@ -59,17 +68,6 @@ export default {
       .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')
diff --git a/src/views/Operations/SerialOverLan/SerialOverLan.vue b/src/views/Operations/SerialOverLan/SerialOverLan.vue
index 33533bf9..48a68345 100644
--- a/src/views/Operations/SerialOverLan/SerialOverLan.vue
+++ b/src/views/Operations/SerialOverLan/SerialOverLan.vue
@@ -1,47 +1,10 @@
 <template>
-  <b-container fluid="xxl pt-0 m-0">
-    <page-title />
-    <b-button
-      class="btn-primary semi-bold-16px images_add-image-button"
-      @click="$bvModal.show('modal-images')"
-    >
-      {{ $t('pageKvm.addImage') }}</b-button
-    >
+  <b-container fluid="xl">
+    <page-title class="mb-4" :description="$t('pageSerialOverLan.subTitle')" />
+
     <page-section class="mb-0">
-      <div class="images">
-        <div class="images_desc">
-          <span class="regular-12px tretiatry">Подключенные образы:</span>
-        </div>
-        <div class="images-container">
-          <div class="images-container_image">
-            <img
-              src="@/assets/images/console-images.svg"
-              class="images-image"
-            />
-            <span class="semi-bold-12px">Win-11-2022</span>
-            <span class="light-12px">с носителя</span>
-          </div>
-          <div class="images-container_image">
-            <img
-              src="@/assets/images/console-images.svg"
-              class="images-image"
-            />
-            <span class="semi-bold-12px">Win-10-2017</span>
-            <span class="light-12px">с сервера</span>
-          </div>
-          <div class="images-container_image">
-            <img
-              src="@/assets/images/console-images.svg"
-              class="images-image"
-            />
-            <span class="semi-bold-12px">Win-7-2010</span>
-            <span class="light-12px">с сервера</span>
-          </div>
-        </div>
-      </div>
       <serial-over-lan-console :is-full-window="false" />
     </page-section>
-    <images-modal />
   </b-container>
 </template>
 
@@ -49,78 +12,13 @@
 import PageTitle from '@/components/Global/PageTitle';
 import PageSection from '@/components/Global/PageSection';
 import SerialOverLanConsole from './SerialOverLanConsole';
-import ImagesModal from '../Kvm/ImagesModal';
 
 export default {
   name: 'SerialOverLan',
   components: {
     PageSection,
     PageTitle,
-    ImagesModal,
     SerialOverLanConsole,
   },
 };
 </script>
-<style lang="scss" scoped>
-.images_add-image-button {
-  position: absolute;
-  top: 95px;
-  right: 0px;
-  border: none;
-  box-shadow: none;
-  background-color: $faint-secondary-primary-5;
-  color: $red-brand-primary;
-  border-radius: 8px;
-  margin: 12px 32px;
-  width: 236px;
-  height: 40px;
-  z-index: 1001;
-  &:active {
-    background-color: $faint-secondary-primary-5-hover !important;
-    color: $red-brand-primary-active !important;
-    border: none;
-  }
-  &:focus {
-    box-shadow: none !important;
-  }
-  &:focus-visible {
-    box-shadow: none !important;
-  }
-}
-.images {
-  display: flex;
-  flex-flow: row wrap;
-  height: 144px;
-}
-
-.images_desc {
-  margin: 16px 0 16px 32px;
-  width: 100%;
-}
-
-.images-container {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  margin: 0 0 16px 32px;
-}
-
-.images-container_image {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  margin-right: 24px;
-}
-
-.images-image {
-  width: 40px;
-  height: 40px;
-  margin-bottom: 8px;
-}
-
-.semi-bold-12px {
-  color: $text-primary;
-}
-</style>
diff --git a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
index ce8549df..3fa9ae47 100644
--- a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
+++ b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
@@ -9,7 +9,7 @@
           class="mt-4"
         >
           <p class="col-form-label">
-            {{ $t('pageSerialOverLan.alert.disconnectedAlertMessage') }}
+            {{ $t('pageSerialOverLan.disconnectedAlertMessage') }}
           </p>
         </alert>
       </b-col>
@@ -85,37 +85,38 @@ export default {
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.resizeConsoleWindow);
+    this.closeTerminal();
   },
   methods: {
     openTerminal() {
       const token = this.$store.getters['authentication/token'];
 
-      const ws = new WebSocket(`wss://${window.location.host}/console0`, [
+      this.ws = new WebSocket(`wss://${window.location.host}/console0`, [
         token,
       ]);
 
       // Refer https://github.com/xtermjs/xterm.js/ for xterm implementation and addons.
 
-      const term = new Terminal({
+      this.term = new Terminal({
         fontSize: 15,
         fontFamily:
           'SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',
       });
 
-      const attachAddon = new AttachAddon(ws);
-      term.loadAddon(attachAddon);
+      const attachAddon = new AttachAddon(this.ws);
+      this.term.loadAddon(attachAddon);
 
       const fitAddon = new FitAddon();
-      term.loadAddon(fitAddon);
+      this.term.loadAddon(fitAddon);
 
       const SOL_THEME = {
         background: '#19273c',
         cursor: 'rgba(83, 146, 255, .5)',
         scrollbar: 'rgba(83, 146, 255, .5)',
       };
-      term.setOption('theme', SOL_THEME);
+      this.term.setOption('theme', SOL_THEME);
 
-      term.open(this.$refs.panel);
+      this.term.open(this.$refs.panel);
       fitAddon.fit();
 
       this.resizeConsoleWindow = throttle(() => {
@@ -124,10 +125,10 @@ export default {
       window.addEventListener('resize', this.resizeConsoleWindow);
 
       try {
-        ws.onopen = function () {
+        this.ws.onopen = function () {
           console.log('websocket console0/ opened');
         };
-        ws.onclose = function (event) {
+        this.ws.onclose = function (event) {
           console.log(
             'websocket console0/ closed. code: ' +
               event.code +
@@ -139,6 +140,13 @@ export default {
         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',
diff --git a/src/views/Operations/ServerPowerOperations/BootSettings.vue b/src/views/Operations/ServerPowerOperations/BootSettings.vue
index ab3c22b9..b5cbb4e0 100644
--- a/src/views/Operations/ServerPowerOperations/BootSettings.vue
+++ b/src/views/Operations/ServerPowerOperations/BootSettings.vue
@@ -1,8 +1,5 @@
 <template>
-  <div class="form-background p-3">
-    <label class="semi-bold-16px">{{
-      $t('pageServerPowerOperations.serverBootSettings')
-    }}</label>
+  <page-section class="m-0">
     <b-form novalidate @submit.prevent="handleSubmit">
       <b-form-group label-for="boot-option" class="mb-3 regular-12px">
         <label class="semi-bold-12px">{{
@@ -49,16 +46,18 @@
         {{ $t('global.action.save') }}
       </b-button>
     </b-form>
-  </div>
+  </page-section>
 </template>
 
 <script>
 import { mapState } from 'vuex';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import PageSection from '@/components/Global/PageSection';
 
 export default {
   name: 'BootSettings',
+  components: { PageSection },
   mixins: [BVToastMixin, LoadingBarMixin],
   data() {
     return {
diff --git a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
index a394a77f..823caa95 100644
--- a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
+++ b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
@@ -1,15 +1,15 @@
 <template>
   <b-container fluid="xxl pt-0 m-0">
     <page-title />
-    <b-row class="m-2">
+    <page-section
+      :section-title="$t('pageServerPowerOperations.serverStatus')"
+      class="m-4"
+    >
       <b-col md="8" xl="6">
-        <page-section class="m-2 pt-2 pb-2">
+        <page-section class="pt-2 mb-0">
           <b-row>
             <b-col>
               <dl>
-                <dt class="semi-bold-16px">
-                  {{ $t('pageServerPowerOperations.serverStatus') }}
-                </dt>
                 <dd
                   v-if="serverStatus === 'on'"
                   style="margin-top: 10px"
@@ -60,13 +60,13 @@
           </b-row>
         </page-section>
       </b-col>
-    </b-row>
-    <b-row class="m-2">
+    </page-section>
+    <page-section
+      :section-title="$t('SystemDescription.title.Control')"
+      class="ml-4 mb-0"
+    >
       <b-col sm="8" md="6" xl="7">
-        <page-section class="m-2">
-          <b-row class="ml-0 mb-3">
-            <span class="semi-bold-16px">{{ 'Управление' }}</span>
-          </b-row>
+        <page-section>
           <alert :show="oneTimeBootEnabled" variant="warning">
             {{ $t('pageServerPowerOperations.oneTimeBootWarning') }}
           </alert>
@@ -177,14 +177,15 @@
           </template>
         </page-section>
       </b-col>
-    </b-row>
-    <b-row>
-      <b-col v-if="hasBootSourceOptions" class="m-2" sm="8" md="6" xl="4">
-        <page-section class="m-2">
-          <boot-settings />
-        </page-section>
+    </page-section>
+    <page-section
+      :section-title="$t('pageServerPowerOperations.serverBootSettings')"
+      class="m-4"
+    >
+      <b-col v-if="hasBootSourceOptions" sm="8" md="6" xl="4">
+        <boot-settings />
       </b-col>
-    </b-row>
+    </page-section>
   </b-container>
 </template>
 
diff --git a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
index b0bcfb2b..1a41a334 100644
--- a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
+++ b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
@@ -9,7 +9,7 @@
     <template #modal-title>
       {{ $t('pageVirtualMedia.modal.title') }}
     </template>
-    <b-form>
+    <b-form style="width: 100%">
       <b-form-group
         :label="$t('pageVirtualMedia.modal.serverUri')"
         label-for="serverUri"
@@ -43,12 +43,14 @@
         :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"
-        />
+        <input-password-toggle>
+          <b-form-input
+            id="password"
+            v-model="form.password"
+            type="password"
+            data-test-id="configureConnection-input-password"
+          />
+        </input-password-toggle>
       </b-form-group>
       <b-form-group>
         <b-form-checkbox
@@ -72,8 +74,12 @@
 <script>
 import { required } from 'vuelidate/lib/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
 
 export default {
+  components: {
+    InputPasswordToggle,
+  },
   mixins: [VuelidateMixin],
   props: {
     connection: {
diff --git a/src/views/Operations/VirtualMedia/VirtualMedia.vue b/src/views/Operations/VirtualMedia/VirtualMedia.vue
index 8a3d5add..9f464138 100644
--- a/src/views/Operations/VirtualMedia/VirtualMedia.vue
+++ b/src/views/Operations/VirtualMedia/VirtualMedia.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid>
     <page-title />
     <b-row class="mb-4">
       <b-col md="12">
@@ -8,7 +8,7 @@
         >
           <b-row>
             <b-col v-for="(dev, $index) in proxyDevices" :key="$index" md="6">
-              <b-form-group :label="dev.id" label-class="bold">
+              <b-form-group :label="dev.id" label-class="regular-14px">
                 <form-file
                   v-if="!dev.isActive"
                   :id="concatId(dev.id)"
@@ -23,6 +23,7 @@
               </b-form-group>
               <b-button
                 v-if="!dev.isActive"
+                size="md"
                 variant="primary"
                 :disabled="!dev.file"
                 @click="startVM(dev)"
@@ -42,48 +43,52 @@
         </page-section>
       </b-col>
     </b-row>
-    <b-row v-if="loadImageFromExternalServer" class="mb-4">
+    <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"
+              v-for="(device, $index) in [
+                { id: 'device_1', isActive: false },
+                { id: 'device_2', isActive: false },
+              ]"
               :key="$index"
               md="6"
             >
               <b-form-group
                 :label="device.id"
                 :label-for="device.id"
-                label-class="bold"
+                label-class="regular-14px"
               >
                 <b-button
                   variant="primary"
+                  size="lg"
                   :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-button
+                v-if="!device.isActive"
+                variant="primary"
+                size="md"
+                :disabled="!device.serverUri"
+                @click="startLegacy(device)"
+              >
+                {{ $t('pageVirtualMedia.start') }}
+              </b-button>
+              <b-button
+                v-if="device.isActive"
+                size="md"
+                variant="primary"
+                @click="stopLegacy(device)"
+              >
+                {{ $t('pageVirtualMedia.stop') }}
+              </b-button>
             </b-col>
           </b-row>
         </page-section>
@@ -107,7 +112,12 @@ import FormFile from '@/components/Global/FormFile';
 
 export default {
   name: 'VirtualMedia',
-  components: { PageTitle, PageSection, ModalConfigureConnection, FormFile },
+  components: {
+    PageTitle,
+    PageSection,
+    ModalConfigureConnection,
+    FormFile,
+  },
   mixins: [BVToastMixin, LoadingBarMixin],
   data() {
     return {
diff --git a/src/views/SILA/EventLogs/EventLogs.vue b/src/views/SILA/EventLogs/EventLogs.vue
deleted file mode 100644
index c7f65e8b..00000000
--- a/src/views/SILA/EventLogs/EventLogs.vue
+++ /dev/null
@@ -1,833 +0,0 @@
-<template>
-  <b-container
-    :style="{ display: 'flex', 'flex-direction': 'column' }"
-    fluid="xxl pt-0 m-0"
-    class="logs-section"
-  >
-    <page-title />
-    <div class="event-log-head-container">
-      <span class="regular-12px">Срок хранения событий:</span>
-      <span class="semi-bold-12px">42 дня</span>
-      <span class="regular-12px red" style="color: $red-brand-primary"
-        >Изменить</span
-      >
-      <div class="form-control event-log-search">
-        <button class="search-button">
-          <img
-            class="event-log-search__icon"
-            src="@/assets/images/search-icon.svg"
-          />
-        </button>
-        <b-form-input
-          v-model="searchInput"
-          type="text"
-          class="event-log-search__input"
-          placeholder="Поиск по журналу"
-          @input="onChangeSearchInput"
-          @clear-search="onClearSearchInput"
-        >
-        </b-form-input>
-      </div>
-    </div>
-    <div class="event-logs__section">
-      <div class="event-logs__filter-container">
-        <span class="caption-12px">{{ $t('pageEventLogs.eventFilter') }}</span>
-        <b-form-select
-          v-model="eventFilter"
-          :options="eventFilters"
-          class="event-logs__filter regular-14px"
-        />
-      </div>
-      <div class="event-logs__filter-container">
-        <span class="caption-12px">{{
-          $t('pageEventLogs.eventTypeFilter')
-        }}</span>
-        <b-form-select
-          v-model="eventTypeFilter"
-          :options="eventTypeFilters"
-          class="event-logs__filter regular-14px"
-        />
-      </div>
-      <div class="event-logs__filter-container">
-        <span class="caption-12px">{{
-          $t('pageEventLogs.eventSourseFilter')
-        }}</span>
-        <b-form-select
-          v-model="eventSourseFilter"
-          :options="eventSourseFilters"
-          class="event-logs__filter regular-14px"
-        />
-      </div>
-      <div class="event-logs__filter-container">
-        <span class="caption-12px">{{
-          $t('pageEventLogs.eventDateFilter')
-        }}</span>
-        <b-form-select
-          v-model="eventDateFilter"
-          :options="eventDateFilters"
-          class="event-logs__filter-date regular-14px"
-        />
-      </div>
-      <popover
-        id="popover-reactive-1"
-        description="pageEventLogs.clearLogs"
-        popup="pageEventLogs.clearLogs_popup"
-        button="pageEventLogs.clear"
-        placement="bottom"
-        :isclear="true"
-        class="clear-popover"
-        :action="deleteAllLogs"
-      />
-    </div>
-    <table-toolbar
-      ref="toolbar"
-      :selected-items-count="selectedRows.length"
-      :actions="batchActions"
-      @clear-selected="clearSelectedRows($refs.table)"
-    >
-      <template #toolbar-buttons>
-        <b-button
-          size="md"
-          variant="secondary"
-          style="margin-right: 1rem"
-          @click="resolveLogs"
-        >
-          <img
-            class="sourse__img"
-            src="@/assets/images/event-logs/resolved-button.svg"
-          />
-          {{ $t('pageEventLogs.event_resolve') }}
-        </b-button>
-        <b-button
-          size="md"
-          variant="primary"
-          style="margin-right: 1rem"
-          @click="unresolveLogs"
-        >
-          <img
-            class="sourse__img"
-            src="@/assets/images/event-logs/archive.svg"
-          />
-          {{ $t('pageEventLogs.archive') }}
-        </b-button>
-        <table-toolbar-export
-          :data="batchExportData"
-          style="margin-right: 1rem"
-          :file-name="exportFileNameByDate()"
-        />
-      </template>
-    </table-toolbar>
-    <div id="logs-table-wrapper">
-      <b-table
-        id="logs-table"
-        ref="table"
-        responsive="md"
-        class="logs-table"
-        selectable
-        :busy="isBusy"
-        no-select-on-click
-        sort-icon-left
-        :sticky-header="stickyHeader"
-        :no-border-collapse="true"
-        no-sort-reset
-        :sort-desc="sortDesc"
-        sort-by="id"
-        :current-page="currentPage"
-        :per-page="perPage"
-        :fields="fields"
-        :items="filteredLogs"
-        :sort-compare="onSortCompare"
-        :empty-text="$t('global.table.emptyMessage')"
-        :empty-filtered-text="$t('global.table.emptySearchMessage')"
-        :filter="searchFilter"
-        @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>
-        <template #cell(description)="data">
-          <b-row class="semi-bold-16px tretiatry">
-            {{ filteredLogs[data.index].name }}
-          </b-row>
-          <b-row
-            class="regular-12px tretiatry pointer"
-            @click="toggleRowDetails(data)"
-          >
-            {{ data.value }}
-          </b-row>
-        </template>
-        <!-- Severity column -->
-        <template #cell(severity)="{ value }">
-          <span
-            :class="`indicators-${value}`"
-            class="bold-12px__caps"
-            style="text-overflow: ellipsis; white-space: nowrap"
-          >
-            {{ value }}</span
-          >
-        </template>
-        <!-- Source column -->
-        <template #cell(source)="{ value }">
-          <b-row v-if="value === 'Процессоры'">
-            <img
-              class="sourse__img"
-              src="@/assets/images/event-logs/processor.svg"
-            />
-            <span>{{ value }}</span>
-          </b-row>
-          <b-row v-else-if="value === 'Вентиляторы'">
-            <img
-              class="sourse__img"
-              src="@/assets/images/event-logs/fans.svg"
-            />
-            <span class="pointer" @click="redirectFans">{{ value }}</span>
-          </b-row>
-          <b-row v-else-if="value === 'RAID-контролеры'">
-            <img
-              class="sourse__img"
-              src="@/assets/images/event-logs/raid-controllers.svg"
-            />
-            <span>{{ value }}</span>
-          </b-row>
-          <b-row v-else-if="value === 'Модули памяти'">
-            <img
-              src="@/assets/images/event-logs/memory-module.svg"
-              class="sourse__img"
-            />
-            <span>{{ value }}</span>
-          </b-row>
-          <b-row v-else>
-            <span>{{ value }}</span>
-          </b-row>
-        </template>
-        <!-- Date column -->
-        <template #cell(date)="{ value }">
-          <img src="@/assets/images/event-logs/time.svg" class="sourse__img" />
-          <span v-if="value" class="regular-12px quaternary">
-            {{ value | formatDate }}
-          </span>
-          <span v-if="value" class="regular-12px quaternary">
-            в {{ value | formatTimeShort }}
-          </span>
-        </template>
-
-        <!-- Status column -->
-        <template #cell(status)="{ value }">
-          <b-row v-if="value === true">
-            <img
-              class="sourse__img"
-              src="@/assets/images/event-logs/resolved.svg"
-            />
-            <span class="semi-bold-12px__caps resolved">
-              {{ $t('pageEventLogs.resolved') }}
-            </span>
-          </b-row>
-          <b-row v-else>
-            <img
-              class="sourse__img"
-              src="@/assets/images/event-logs/not-resolved.svg"
-            />
-            <span class="semi-bold-12px__caps not-resolved">
-              {{ $t('pageEventLogs.unresolved') }}</span
-            >
-          </b-row>
-        </template>
-        <template #row-details="{ item }">
-          <b-container
-            fluid
-            style="border-bottom: 1px solid rgba(26, 62, 91, 0.1)"
-          >
-            <b-col class="mt-1 mb-2 regular-12px tretiatry">
-              <span class="row-details">
-                {{ item.description }}
-              </span>
-            </b-col>
-          </b-container>
-        </template>
-      </b-table>
-    </div>
-    <div class="pagination-container">
-      <div style="margin-left: 10px" class="pagination-content">
-        <span class="semi-bold-16px"> Страницы </span>
-        <b-pagination
-          v-model="currentPage"
-          class="mt-2"
-          first-number
-          last-number
-          :per-page="perPage"
-          :total-rows="getTotalRowCount(filteredRows)"
-          aria-controls="table-event-logs"
-        />
-      </div>
-      <div class="pagination-items-limit">
-        <span class="semi-bold-16px"> Показывать по </span>
-        <b-form-select
-          v-model="perPage"
-          :options="itemsPerPageOptions"
-          class="event-logs__filter items-per-page semi-bold-16px"
-        />
-        <span class="semi-bold-16px"> записей на странице </span>
-        <b-button
-          size="md"
-          variant="primary"
-          :class="{ disabled: allLogs.length === 0 }"
-          :download="exportFileNameByDate()"
-          :href="href"
-        >
-          <icon-export /> {{ $t('global.action.exportAll') }}
-        </b-button>
-      </div>
-    </div>
-  </b-container>
-</template>
-
-<script>
-import { omit } from 'lodash';
-import IconExport from '@carbon/icons-vue/es/document--export/20';
-import PageTitle from '@/components/Global/PageTitle';
-import Popover from '@/components/Global/Popover';
-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 BVToastMixin from '@/components/Mixins/BVToastMixin';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
-import TableSortMixin from '@/components/Mixins/TableSortMixin';
-import BVPaginationMixin, {
-  currentPage,
-  perPage,
-  itemsPerPageOptions,
-} from '@/components/Mixins/BVPaginationMixin';
-
-import BVTableSelectableMixin, {
-  selectedRows,
-  tableHeaderCheckboxModel,
-  tableHeaderCheckboxIndeterminate,
-} from '@/components/Mixins/BVTableSelectableMixin';
-import TableRowExpandMixin, {
-  expandRowLabel,
-} from '@/components/Mixins/TableRowExpandMixin';
-import SearchFilterMixin, {
-  searchFilter,
-} from '@/components/Mixins/SearchFilterMixin';
-
-export default {
-  components: {
-    PageTitle,
-    Popover,
-    TableToolbar,
-    TableToolbarExport,
-    IconExport,
-  },
-  mixins: [
-    BVTableSelectableMixin,
-    BVToastMixin,
-    LoadingBarMixin,
-    TableFilterMixin,
-    DataFormatterMixin,
-    TableSortMixin,
-    TableRowExpandMixin,
-    SearchFilterMixin,
-    BVPaginationMixin,
-  ],
-  beforeRouteLeave(to, from, next) {
-    // Hide loader if the user navigates to another page
-    // before request is fulfilled.
-    this.hideLoader();
-    next();
-  },
-  data() {
-    return {
-      isBusy: true,
-      perPage,
-      itemsPerPageOptions,
-      currentPage,
-      sortDesc: true,
-      stickyHeader: 'calc(100vh - 307px)',
-      fields: [
-        {
-          key: 'checkbox',
-          sortable: false,
-          thClass: ' logs-table__th',
-          tdClass: 'logs-table__td',
-        },
-        {
-          key: 'id',
-          label: this.$t('pageEventLogs.table.id'),
-          sortable: true,
-          thClass: 'bold-12px__caps logs-table__th',
-          tdClass: 'semi-bold-12px logs-table__td',
-        },
-        {
-          key: 'description',
-          label: this.$t('pageEventLogs.table.about_event'),
-          thClass: 'bold-12px__caps logs-table__th',
-          tdClass: 'logs-table__td',
-        },
-        {
-          key: 'severity',
-          label: this.$t('pageEventLogs.table.severity'),
-          thClass: 'bold-12px__caps logs-table__th',
-          tdClass: 'logs-table__td',
-        },
-        {
-          key: 'source',
-          label: this.$t('pageEventLogs.table.source'),
-          thClass: 'bold-12px__caps logs-table__th',
-          tdClass: 'logs-table__td semi-bold-12px__caps tretiatry ',
-        },
-        {
-          key: 'date',
-          label: this.$t('pageEventLogs.table.date'),
-          sortable: true,
-          thClass: `bold-12px__caps logs-table__th`,
-          tdClass: 'logs-table__td',
-        },
-        {
-          key: 'status',
-          sortable: true,
-          label: this.$t('pageEventLogs.table.status'),
-          thClass: 'bold-12px__caps logs-table__th',
-          tdClass: 'logs-table__td',
-        },
-      ],
-      eventFilter: 1,
-      eventFilters: [
-        {
-          value: 1,
-          text: 'Все события',
-        },
-      ],
-      eventTypeFilter: 'all',
-      eventTypeFilters: [
-        {
-          value: 'all',
-          text: 'Все события',
-        },
-        {
-          value: 'info',
-          text: 'Информационное',
-        },
-        {
-          value: 'Warning',
-          text: 'Предупреждения',
-        },
-        {
-          value: 'critical',
-          text: 'Критические',
-        },
-        {
-          value: 'ok',
-          text: 'ok',
-        },
-      ],
-      eventSourseFilter: 1,
-      eventSourseFilters: [
-        {
-          value: 1,
-          text: 'Все события',
-        },
-      ],
-      eventDateFilter: 1,
-      eventDateFilters: [
-        {
-          value: 1,
-          text: 'События за последний час',
-        },
-      ],
-      expandRowLabel,
-      activeFilters: [],
-      batchActions: [
-        {
-          value: 'delete',
-          label: this.$t('global.action.delete'),
-        },
-      ],
-      filterStartDate: null,
-      filterEndDate: null,
-      searchInput: null,
-      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
-      ).filter((el) => el.description);
-    },
-  },
-  created() {
-    this.startLoader();
-    this.$store.dispatch('eventLog/getEventLogData').finally(() => {
-      this.endLoader();
-      this.isBusy = false;
-    });
-  },
-  methods: {
-    redirectFans() {
-      this.$router.push('/fans');
-    },
-    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.$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((message) => this.successToast(message))
-                  .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>
-<style lang="scss">
-.b-table-details > td {
-  padding: 0px !important;
-}
-</style>
-<style lang="scss" scoped>
-$toolbar-height: 64px;
-.row {
-  margin: 0px;
-}
-
-.clear-popover {
-  margin-left: auto;
-}
-
-.event-logs__section {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  height: 84px;
-  gap: 16px;
-  margin: 0 32px;
-}
-
-.event-log-head-container {
-  position: absolute;
-  top: calc(#{$header-height});
-  right: 0px;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 6px;
-  z-index: 1001;
-}
-
-.event-log-search {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  border: none;
-  box-shadow: none;
-  border-radius: 8px;
-  margin: 12px 32px 12px 16px;
-  width: 236px;
-  height: 40px;
-}
-
-.search-button {
-  border: none;
-  background: none;
-}
-
-.event-log-search__icon {
-  width: 20px;
-  height: 20px;
-}
-
-.event-log-search__input {
-  border: none;
-  background: none;
-  box-shadow: none;
-}
-
-.event-logs__filter-container {
-  width: 183px;
-}
-
-.event-logs__filter,
-.event-logs__filter-date {
-  height: 40px;
-  border: none;
-  border-radius: 8px;
-  background-image: url('../../../assets/images/icon-chevron.svg');
-}
-
-.caption-12px {
-  padding-left: 10px;
-}
-
-.event-logs__filter {
-  width: 171px;
-}
-
-.event-logs__filter-date {
-  width: 236px;
-}
-
-.custom-checkbox {
-  background-color: none;
-}
-
-.sourse__img {
-  padding-right: 8px;
-}
-
-.not-resolved {
-  color: $text-quaternary;
-}
-
-.pagination-container {
-  width: calc(100% - #{$navigation-width});
-  height: $toolbar-height;
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.06);
-  z-index: $zindex-dropdown;
-  background-color: $white;
-}
-
-.pagination-content {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-evenly;
-}
-
-.page-input {
-  display: inline-block;
-  width: 55px;
-  height: 24px;
-  border: 1px solid $on-surface-tretiatry;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pagination-items-limit {
-  margin-left: auto;
-  display: flex;
-  gap: 7px;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-evenly;
-  margin-right: 1rem;
-}
-
-.items-per-page {
-  padding: 0 0 0 5px;
-  width: 55px;
-  height: 24px;
-  background-color: transparent;
-  border: 1px solid $on-surface-tretiatry;
-  border-radius: 4px;
-}
-
-.row-details {
-  display: block;
-  height: auto;
-  width: 70vw;
-}
-</style>
diff --git a/src/views/SILA/EventLogs/index.js b/src/views/SILA/EventLogs/index.js
deleted file mode 100644
index 521efde4..00000000
--- a/src/views/SILA/EventLogs/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import EventLogs from './EventLogs.vue';
-export default EventLogs;
diff --git a/src/views/Settings/DateTime/DateTime.vue b/src/views/Settings/DateTime/DateTime.vue
index 7ab3ec0e..63570c39 100644
--- a/src/views/Settings/DateTime/DateTime.vue
+++ b/src/views/Settings/DateTime/DateTime.vue
@@ -1,67 +1,61 @@
 <template>
-  <b-container fluid="xxl" class="pt-0 m-0">
+  <b-container id="date-time" fluid="xxl" class="pt-0 m-0">
     <page-title />
-    <b-row class="m-4">
-      <b-col md="8" xl="12">
-        <alert variant="info">
-          <span class="regular-12px">
+    <b-row class="bootstrap-table__section">
+      <b-col md="8" xl="6">
+        <alert variant="info" class="mb-4">
+          <span>
             {{ $t('pageDateTime.alert.message') }}
-            <b-link class="semi-bold-12px" to="/profile-settings">
+            <b-link to="/profile-settings">
               {{ $t('pageDateTime.alert.link') }}</b-link
             >
           </span>
         </alert>
       </b-col>
     </b-row>
-    <page-section class="m-4">
+    <page-section class="bootstrap-table__section">
       <b-row>
-        <b-col sm="6" lg="5" xl="4" xxl="3">
+        <b-col lg="3">
           <dl>
-            <dt class="semi-bold-12px">{{ $t('pageDateTime.form.date') }}</dt>
-            <dd v-if="bmcTime" class="regular-12px">
-              {{ bmcTime | formatDate }}
-            </dd>
+            <dt>{{ $t('pageDateTime.form.date') }}</dt>
+            <dd v-if="bmcTime">{{ bmcTime | formatDate }}</dd>
             <dd v-else>--</dd>
           </dl>
         </b-col>
-        <b-col sm="6" lg="5" xl="4" xxl="3">
+        <b-col lg="3">
           <dl>
-            <dt class="semi-bold-12px">
-              {{ $t('pageDateTime.form.time.label') }}
-            </dt>
-            <dd v-if="bmcTime" class="regular-12px">
-              {{ bmcTime | formatTime }}
-            </dd>
+            <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 class="m-4">
-      <label class="semi-bold-16px">{{
-        $t('pageDateTime.configureSettings')
-      }}</label>
+    <page-section
+      class="bootstrap-table__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
-          class="system-control__radio regular-12px"
         >
           <b-form-radio
             v-model="form.configurationSelected"
             value="manual"
             data-test-id="dateTime-radio-configureManual"
           >
-            {{ $t('SystemDescription.UseServerDatettime') }}
+            {{ $t('pageDateTime.form.manual') }}
           </b-form-radio>
           <b-row class="mt-3 ml-3">
-            <b-col sm="7" lg="5" xl="5" xxl="3">
+            <b-col sm="6" lg="4" xl="3">
               <b-form-group
                 :label="$t('pageDateTime.form.date')"
                 label-for="input-manual-date"
+                label-class="regular-14px"
               >
-                <span class="regular-12px">YYYY-MM-DD</span>
+                <b-form-text id="date-format-help">YYYY-MM-DD</b-form-text>
                 <b-input-group>
                   <b-form-input
                     id="input-manual-date"
@@ -105,12 +99,13 @@
                 </b-input-group>
               </b-form-group>
             </b-col>
-            <b-col sm="7" lg="5" xl="5" xxl="3">
+            <b-col sm="6" lg="4" xl="3">
               <b-form-group
                 :label="$t('pageDateTime.form.time.timezone', { timezone })"
                 label-for="input-manual-time"
+                label-class="regular-14px"
               >
-                <span class="regular-12px">HH:MM</span>
+                <b-form-text id="time-format-help">HH:MM</b-form-text>
                 <b-input-group>
                   <b-form-input
                     id="input-manual-time"
@@ -134,7 +129,6 @@
           </b-row>
           <b-form-radio
             v-model="form.configurationSelected"
-            class="system-control__radio regular-12px"
             value="ntp"
             data-test-id="dateTime-radio-configureNTP"
           >
@@ -145,6 +139,7 @@
               <b-form-group
                 :label="$t('pageDateTime.form.ntpServers.server1')"
                 label-for="input-ntp-1"
+                label-class="regular-14px"
               >
                 <b-input-group>
                   <b-form-input
@@ -167,6 +162,7 @@
               <b-form-group
                 :label="$t('pageDateTime.form.ntpServers.server2')"
                 label-for="input-ntp-2"
+                label-class="regular-14px"
               >
                 <b-input-group>
                   <b-form-input
@@ -182,6 +178,7 @@
               <b-form-group
                 :label="$t('pageDateTime.form.ntpServers.server3')"
                 label-for="input-ntp-3"
+                label-class="regular-14px"
               >
                 <b-input-group>
                   <b-form-input
@@ -195,7 +192,6 @@
             </b-col>
           </b-row>
           <b-button
-            size="md"
             variant="primary"
             type="submit"
             data-test-id="dateTime-button-saveSettings"
diff --git a/src/views/Settings/Network/ModalDns.vue b/src/views/Settings/Network/ModalDns.vue
index 7f127173..a1dc9cec 100644
--- a/src/views/Settings/Network/ModalDns.vue
+++ b/src/views/Settings/Network/ModalDns.vue
@@ -5,9 +5,9 @@
     :title="$t('pageNetwork.table.addDnsAddress')"
     @hidden="resetForm"
   >
-    <b-form id="form-dns" @submit.prevent="handleSubmit">
+    <b-form id="form-dns" style="width: 100%" @submit.prevent="handleSubmit">
       <b-row>
-        <b-col sm="6">
+        <b-col>
           <b-form-group
             :label="$t('pageNetwork.modal.staticDns')"
             label-for="staticDns"
diff --git a/src/views/Settings/Network/Network.vue b/src/views/Settings/Network/Network.vue
index 2abbcd7a..2d8fd61d 100644
--- a/src/views/Settings/Network/Network.vue
+++ b/src/views/Settings/Network/Network.vue
@@ -1,10 +1,9 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid="m-0 p-0" class="page-network">
     <page-title :description="$t('pageNetwork.pageDescription')" />
-    <!-- Global settings for all interfaces -->
-    <network-global-settings />
-    <!-- Interface tabs -->
-    <page-section v-show="ethernetData">
+
+    <page-section v-show="ethernetData" class="m-4">
+      <network-global-settings class="m-4" />
       <b-row>
         <b-col>
           <b-card no-body>
diff --git a/src/views/Settings/Network/TableDns.vue b/src/views/Settings/Network/TableDns.vue
index 569109f1..1ad8f436 100644
--- a/src/views/Settings/Network/TableDns.vue
+++ b/src/views/Settings/Network/TableDns.vue
@@ -3,7 +3,7 @@
     <b-row>
       <b-col lg="6">
         <div class="text-right">
-          <b-button variant="primary" @click="initDnsModal()">
+          <b-button variant="primary" class="mb-2" @click="initDnsModal()">
             <icon-add />
             {{ $t('pageNetwork.table.addDnsAddress') }}
           </b-button>
@@ -14,7 +14,7 @@
           :fields="dnsTableFields"
           :items="form.dnsStaticTableItems"
           :empty-text="$t('global.table.emptyMessage')"
-          class="mb-0"
+          class="bootstrap-rounded-table mb-0"
           show-empty
         >
           <template #cell(actions)="{ item, index }">
@@ -82,8 +82,19 @@ export default {
         {
           key: 'address',
           label: this.$t('pageNetwork.table.ipAddress'),
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'actions',
+          thStyle: { width: '30%' },
+          label: this.$t('pageNetwork.table.actions'),
+          thClass:
+            'text-right semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'text-right bootstrap-rounded-table__td',
         },
-        { key: 'actions', label: '', tdClass: 'text-right' },
       ],
     };
   },
@@ -115,6 +126,10 @@ export default {
           address: server,
           actions: [
             {
+              value: 'edit',
+              title: this.$t('global.action.edit'),
+            },
+            {
               value: 'delete',
               title: this.$t('pageNetwork.table.deleteDns'),
             },
diff --git a/src/views/Settings/Network/TableIpv4.vue b/src/views/Settings/Network/TableIpv4.vue
index 75870031..7481dc7b 100644
--- a/src/views/Settings/Network/TableIpv4.vue
+++ b/src/views/Settings/Network/TableIpv4.vue
@@ -7,7 +7,7 @@
         </h3>
       </b-col>
       <b-col class="text-right">
-        <b-button variant="primary" @click="initAddIpv4Address()">
+        <b-button variant="primary" class="mb-2" @click="initAddIpv4Address()">
           <icon-add />
           {{ $t('pageNetwork.table.addIpv4Address') }}
         </b-button>
@@ -19,7 +19,7 @@
       :fields="ipv4TableFields"
       :items="form.ipv4TableItems"
       :empty-text="$t('global.table.emptyMessage')"
-      class="mb-0"
+      class="bootstrap-rounded-table mb-0"
       show-empty
     >
       <template #cell(actions)="{ item, index }">
@@ -86,20 +86,43 @@ export default {
         {
           key: 'Address',
           label: this.$t('pageNetwork.table.ipAddress'),
+          thStyle: { width: '20%' },
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'Gateway',
           label: this.$t('pageNetwork.table.gateway'),
+          thStyle: { width: '20%' },
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'SubnetMask',
           label: this.$t('pageNetwork.table.subnet'),
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'AddressOrigin',
           label: this.$t('pageNetwork.table.addressOrigin'),
+          thStyle: { width: '20%' },
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'actions',
+          label: this.$t('pageNetwork.table.actions'),
+          thStyle: { width: '10%' },
+          thClass:
+            'text-right semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'text-right bootstrap-rounded-table__td',
         },
-        { key: 'actions', label: '', tdClass: 'text-right' },
       ],
     };
   },
@@ -134,6 +157,10 @@ export default {
           AddressOrigin: ipv4.AddressOrigin,
           actions: [
             {
+              value: 'edit',
+              title: this.$t('pageNetwork.table.edit'),
+            },
+            {
               value: 'delete',
               title: this.$t('pageNetwork.table.deleteIpv4'),
             },