From 0cbf1713dc23e0039653891fab1fa2c52b4bfaf3 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Wed, 1 Jun 2022 17:40:28 +0300
Subject: Add PopoverSlot restyled DateTime and ServerPowerOrerations pages add
 reload BMC.

---
 src/assets/images/fans-page/notWorking.svg         |   3 -
 src/assets/images/fans-page/working.svg            |   3 -
 src/assets/images/status/off.svg                   |   3 +
 src/assets/images/status/on.svg                    |   3 +
 src/assets/styles/bmc/custom/_buttons.scss         |  18 +-
 src/assets/styles/bmc/custom/_forms.scss           |  44 +-
 src/assets/styles/bmc/custom/_pagination.scss      |  12 +-
 src/assets/styles/bmc/custom/_tables.scss          |  47 +-
 src/components/AppHeader/AppHeader.vue             |  19 +-
 src/components/AppNavigation/AppNavigationMixin.js |  17 +-
 src/components/Global/LoadingBar.vue               |   4 +-
 src/components/Global/Popover.vue                  |  90 ++--
 .../SilaComponents/InventoryControlSystem.vue      |  42 +-
 .../Global/SilaComponents/NtpPopover.vue           |   4 +-
 .../Global/SilaComponents/PopoverWithSlot.vue      | 225 +++++++++
 src/components/Global/TableToolbar.vue             |  11 +-
 src/components/Global/TableToolbarExport.vue       |  13 +-
 src/components/SubHeader/SubHeader.vue             |  10 +-
 src/locales/ru-RU.json                             |  11 +-
 src/main.js                                        |  17 +
 src/router/routes.js                               |   2 +-
 .../BMC/Configuration/BMCConfigurationControl.vue  |  10 +-
 .../BMC/Configuration/BMCConfigurationTable.vue    |  72 ++-
 .../Fans/StaticInformation/FansStaticPage.vue      |  10 +-
 src/views/HardwareStatus/Inventory/Inventory.vue   |  73 +--
 src/views/Logs/EventLogs/EventLogs.vue             | 465 ++++++++---------
 .../Specification/MemoryStaticPage.vue             |  10 +-
 src/views/Operations/Kvm/Kvm.vue                   |  13 +-
 .../Operations/SerialOverLan/SerialOverLan.vue     |  13 +-
 .../ServerPowerOperations/BootSettings.vue         |  38 +-
 .../ServerPowerOperations.vue                      | 370 +++++++-------
 .../Specification/PowerStaticPage.vue              |   5 +-
 .../AcceleratorSpecificationTable.vue              |   7 +-
 .../Specification/ProcessorsSpecificationTable.vue |   7 +-
 src/views/SILA/EventLogs/EventLogs.vue             | 548 ++++++---------------
 src/views/SILA/PciDevices/PciDevicesPage.vue       |   5 +-
 .../RAID/Specification/RAIDSpecificationPage.vue   |   7 +-
 src/views/Settings/DateTime/DateTime.vue           |  62 ++-
 .../Info/InventoryTableSystem.vue                  |  47 +-
 .../SystemDescription/Info/SystemDescription.vue   | 138 +++---
 40 files changed, 1289 insertions(+), 1209 deletions(-)
 delete mode 100644 src/assets/images/fans-page/notWorking.svg
 delete mode 100644 src/assets/images/fans-page/working.svg
 create mode 100644 src/assets/images/status/off.svg
 create mode 100644 src/assets/images/status/on.svg
 create mode 100644 src/components/Global/SilaComponents/PopoverWithSlot.vue

diff --git a/src/assets/images/fans-page/notWorking.svg b/src/assets/images/fans-page/notWorking.svg
deleted file mode 100644
index d84bedbc..00000000
--- a/src/assets/images/fans-page/notWorking.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.5751 6.25033L9.00008 7.82533L7.42508 6.25033C7.10008 5.92533 6.57508 5.92533 6.25008 6.25033C5.92508 6.57533 5.92508 7.10033 6.25008 7.42533L7.82508 9.00033L6.25008 10.5753C5.92508 10.9003 5.92508 11.4253 6.25008 11.7503C6.57508 12.0753 7.10008 12.0753 7.42508 11.7503L9.00008 10.1753L10.5751 11.7503C10.9001 12.0753 11.4251 12.0753 11.7501 11.7503C12.0751 11.4253 12.0751 10.9003 11.7501 10.5753L10.1751 9.00033L11.7501 7.42533C12.0751 7.10033 12.0751 6.57533 11.7501 6.25033C11.4251 5.93366 10.8917 5.93366 10.5751 6.25033ZM9.00008 0.666992C4.39175 0.666992 0.666748 4.39199 0.666748 9.00033C0.666748 13.6087 4.39175 17.3337 9.00008 17.3337C13.6084 17.3337 17.3334 13.6087 17.3334 9.00033C17.3334 4.39199 13.6084 0.666992 9.00008 0.666992ZM9.00008 15.667C5.32508 15.667 2.33341 12.6753 2.33341 9.00033C2.33341 5.32533 5.32508 2.33366 9.00008 2.33366C12.6751 2.33366 15.6667 5.32533 15.6667 9.00033C15.6667 12.6753 12.6751 15.667 9.00008 15.667Z" fill="#FF4141"/>
-</svg>
diff --git a/src/assets/images/fans-page/working.svg b/src/assets/images/fans-page/working.svg
deleted file mode 100644
index e97abf4a..00000000
--- a/src/assets/images/fans-page/working.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.00008 0.666992C4.40008 0.666992 0.666748 4.40033 0.666748 9.00033C0.666748 13.6003 4.40008 17.3337 9.00008 17.3337C13.6001 17.3337 17.3334 13.6003 17.3334 9.00033C17.3334 4.40033 13.6001 0.666992 9.00008 0.666992ZM9.00008 15.667C5.32508 15.667 2.33341 12.6753 2.33341 9.00033C2.33341 5.32533 5.32508 2.33366 9.00008 2.33366C12.6751 2.33366 15.6667 5.32533 15.6667 9.00033C15.6667 12.6753 12.6751 15.667 9.00008 15.667ZM12.2334 5.90866L7.33342 10.8087L5.76675 9.24199C5.44175 8.91699 4.91675 8.91699 4.59175 9.24199C4.26675 9.56699 4.26675 10.092 4.59175 10.417L6.75008 12.5753C7.07508 12.9003 7.60008 12.9003 7.92508 12.5753L13.4167 7.08366C13.7417 6.75866 13.7417 6.23366 13.4167 5.90866C13.0917 5.58366 12.5584 5.58366 12.2334 5.90866Z" fill="#4EBF19"/>
-</svg>
diff --git a/src/assets/images/status/off.svg b/src/assets/images/status/off.svg
new file mode 100644
index 00000000..d84bedbc
--- /dev/null
+++ b/src/assets/images/status/off.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5751 6.25033L9.00008 7.82533L7.42508 6.25033C7.10008 5.92533 6.57508 5.92533 6.25008 6.25033C5.92508 6.57533 5.92508 7.10033 6.25008 7.42533L7.82508 9.00033L6.25008 10.5753C5.92508 10.9003 5.92508 11.4253 6.25008 11.7503C6.57508 12.0753 7.10008 12.0753 7.42508 11.7503L9.00008 10.1753L10.5751 11.7503C10.9001 12.0753 11.4251 12.0753 11.7501 11.7503C12.0751 11.4253 12.0751 10.9003 11.7501 10.5753L10.1751 9.00033L11.7501 7.42533C12.0751 7.10033 12.0751 6.57533 11.7501 6.25033C11.4251 5.93366 10.8917 5.93366 10.5751 6.25033ZM9.00008 0.666992C4.39175 0.666992 0.666748 4.39199 0.666748 9.00033C0.666748 13.6087 4.39175 17.3337 9.00008 17.3337C13.6084 17.3337 17.3334 13.6087 17.3334 9.00033C17.3334 4.39199 13.6084 0.666992 9.00008 0.666992ZM9.00008 15.667C5.32508 15.667 2.33341 12.6753 2.33341 9.00033C2.33341 5.32533 5.32508 2.33366 9.00008 2.33366C12.6751 2.33366 15.6667 5.32533 15.6667 9.00033C15.6667 12.6753 12.6751 15.667 9.00008 15.667Z" fill="#FF4141"/>
+</svg>
diff --git a/src/assets/images/status/on.svg b/src/assets/images/status/on.svg
new file mode 100644
index 00000000..e97abf4a
--- /dev/null
+++ b/src/assets/images/status/on.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.00008 0.666992C4.40008 0.666992 0.666748 4.40033 0.666748 9.00033C0.666748 13.6003 4.40008 17.3337 9.00008 17.3337C13.6001 17.3337 17.3334 13.6003 17.3334 9.00033C17.3334 4.40033 13.6001 0.666992 9.00008 0.666992ZM9.00008 15.667C5.32508 15.667 2.33341 12.6753 2.33341 9.00033C2.33341 5.32533 5.32508 2.33366 9.00008 2.33366C12.6751 2.33366 15.6667 5.32533 15.6667 9.00033C15.6667 12.6753 12.6751 15.667 9.00008 15.667ZM12.2334 5.90866L7.33342 10.8087L5.76675 9.24199C5.44175 8.91699 4.91675 8.91699 4.59175 9.24199C4.26675 9.56699 4.26675 10.092 4.59175 10.417L6.75008 12.5753C7.07508 12.9003 7.60008 12.9003 7.92508 12.5753L13.4167 7.08366C13.7417 6.75866 13.7417 6.23366 13.4167 5.90866C13.0917 5.58366 12.5584 5.58366 12.2334 5.90866Z" fill="#4EBF19"/>
+</svg>
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index 04c612ec..d9c929db 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -13,6 +13,11 @@
   }
 }
 
+.btn-md {
+  width: 220px;
+  height: 36px;
+}
+
 .btn-primary {
   background-color: $red-brand-primary;
   border-radius: 8px;
@@ -126,7 +131,6 @@
 }
 
 .btn-link {
-  // font-weight: $headings-font-weight;
   color: $text-primary;
   text-decoration: none !important;
   &:hover {
@@ -136,11 +140,6 @@
   &:active {
     background-color: gray("300");
   }
-  &:focus {
-    // box-shadow: inset 0 0 0 2px theme-color("primary");
-    // color: theme-color("primary");
-    // outline: none;
-  }
   &:disabled {
     box-shadow: $btn-focus-box-shadow;
   }
@@ -180,8 +179,6 @@
 .collapse-button {
   height: 56px;
   width: 100%;
-  padding: 0 0 0 2rem;
-  margin: 0;
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-start;
@@ -193,4 +190,9 @@
   &:hover {
     color: $text-primary;
   }
+}
+
+.table-toolbar-button {
+  width: 220px;
+  height: 36px;
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 51dc0ed6..8cb8e242 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -209,6 +209,48 @@
   color: $red-brand-primary;
 }
 
+.cb label{
+  padding-top: 4px;
+}
 .system-control__radio label {
   padding-top: 4px;
-}
\ No newline at end of file
+}
+
+//radio buttons global style
+  .custom-radio ::before {
+    border: 1px solid $red-brand-primary;
+  background-color: #fff;
+  border-radius: 100%;
+}
+
+.custom-radio 
+.custom-control-input:checked
+~ .custom-control-label::before {
+  border: 2px solid $red-brand-primary;
+  background-color: $red-brand-primary;
+  box-shadow: 0px 0px 0px 2.5px $white inset;
+  border-radius: 100%;
+}
+
+  .custom-radio
+  .custom-control-input:hover
+  ~ .custom-control-label::before {
+  background-color: $red-brand-primary-hover !important;
+  box-shadow: 0px 0px 0px 2.5px $white inset;
+  border-color: $red-brand-primary-hover;
+}
+
+.custom-radio
+.custom-control-input:checked
+~ .custom-control-label::after {
+  background-image: none !important;
+  border-radius: 100%;
+}
+
+.custom-radio
+.custom-control-input:active
+~ .custom-control-label::before {
+  background-color: $red-brand-primary-active !important;
+  box-shadow: 0px 0px 0px 2.5px $white inset;
+  border-color: $red-brand-primary-active;
+}
diff --git a/src/assets/styles/bmc/custom/_pagination.scss b/src/assets/styles/bmc/custom/_pagination.scss
index d38ce5d2..bce593ef 100644
--- a/src/assets/styles/bmc/custom/_pagination.scss
+++ b/src/assets/styles/bmc/custom/_pagination.scss
@@ -15,10 +15,20 @@
   @include media-breakpoint-up(sm) {
     justify-content: flex-end;
   }
+
+  .page-link {
+    border: transparent;
+    &:hover {
+      background-color: transparent;
+    }
+    &:focus {
+      box-shadow: none;
+    }
+  }
   .page-item.active button {
     color: theme-color("dark");
     background-color: color("white");
-    border-color: $border-color;
+    border-color: transparent;
     box-shadow: inset 0px -3px theme-color("primary");
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index d76d4982..bb56ba83 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -86,7 +86,6 @@
     }
   }
   .b-table-sort-icon-left {
-    background-position: left calc(1.5rem / 2) center !important;
     padding-left: calc(1.2rem + 0.65em) !important;
     &:focus {
       outline: none;
@@ -171,12 +170,22 @@
   // }
 }
 
+.indicators-Critical {
+  color: $indicators-errors !important;
+}
+
+.indicators-Warning {
+  color: $indicators-warning !important;
+}
+
+.indicators-OK {
+  color: $indicators-succes !important;
+}
+
 .bootstrap-table__stripes tr:nth-of-type(even) {
   background-color: rgb(255 255 255);
 }
 
-
-////// не работает
 .bootstrap-table__stripes_odd tr:nth-of-type(odd) {
   background-color: rgb(255 255 255);
 }
@@ -308,4 +317,36 @@
   -ms-border-radius: 0;
   -o-border-radius: 0;
   -khtml-border-radius: 0;
+}
+
+// logs tables styles 
+#logs-table {
+  margin: 0 !important;
+}
+
+#logs-table-wrapper div {
+  overflow-y: overlay;
+  &::-webkit-scrollbar {
+    position: absolute;
+    width: 10px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border: 4px solid transparent;
+    border-top: 52px solid transparent;
+    background: $faint-secondary-primary-20;
+    border-radius: 16px;
+    background-clip: content-box;
+  }
+}
+
+.logs-table__th {
+  background-color: #f8f8f8 !important;
+  border-bottom: 1px solid $faint-secondary-primary-20 !important;
+  border-top: 1px solid $faint-secondary-primary-20 !important;
+  color: $text-primary !important;
+}
+
+.logs-table__td {
+  border-bottom: 1px solid $faint-secondary-primary-10 !important;
+  height: 64px;
 }
\ No newline at end of file
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 70631fbf..939ec5af 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -64,19 +64,6 @@
             {{ $t('appHeader.servers') }}
           </b-nav-item>
 
-          <b-nav-item
-            to="/profile-settings"
-            data-test-id="appHeader-container-health"
-            class="nav-top-button"
-            :class="{
-              'active-route-top-nav': ''.includes(
-                $route.path.split('profile-settings')[1]
-              ),
-            }"
-          >
-            {{ $t('appHeader.settings') }}
-          </b-nav-item>
-
           <b-nav-item
             to="/information-and-faq"
             data-test-id="appHeader-container-power"
@@ -125,7 +112,7 @@
           <status-icon :status="serverStatusIcon" />
           {{ $t('appHeader.power') }}
         </b-nav-item>
-        <div class="nav-item">
+        <div class="nav-item header-clock__icon">
           <b-button
             id="app-header-refresh"
             variant="link"
@@ -193,7 +180,7 @@ import IconClose from '@carbon/icons-vue/es/close/20';
 import IconMenu from '@carbon/icons-vue/es/menu/20';
 import IconAvatar from '@carbon/icons-vue/es/user--avatar/20';
 import IconRenew from '@carbon/icons-vue/es/renew/20';
-import StatusIcon from '@/components/Global/StatusIcon';
+// import StatusIcon from '@/components/Global/StatusIcon';
 export default {
   name: 'AppHeader',
   components: {
@@ -201,7 +188,7 @@ export default {
     IconMenu,
     IconAvatar,
     IconRenew,
-    StatusIcon,
+    // StatusIcon,
   },
   mixins: [BVToastMixin],
   props: {
diff --git a/src/components/AppNavigation/AppNavigationMixin.js b/src/components/AppNavigation/AppNavigationMixin.js
index c58553a2..241a8f3b 100644
--- a/src/components/AppNavigation/AppNavigationMixin.js
+++ b/src/components/AppNavigation/AppNavigationMixin.js
@@ -32,6 +32,16 @@ export const AppNavigationMixin = {
               label: this.$t('appNavigation.serverParam'),
               route: '/server-parametrs',
             },
+            {
+              id: 'date-time',
+              label: this.$t('appNavigation.dateTime'),
+              route: '/settings/date-time',
+            },
+            {
+              id: 'server-power-operations',
+              label: this.$t('appNavigation.serverPowerOperations'),
+              route: '/operations/server-power-operations',
+            },
           ],
         },
         {
@@ -269,7 +279,7 @@ export const AppNavigationMixin = {
             },
             {
               id: 'key-clear',
-              label: this.$t('appNavigation.keyClear'),
+              label: this.$t('appPageTitle.keyClear'),
               route: '/operations/key-clear',
             },
             {
@@ -298,11 +308,6 @@ export const AppNavigationMixin = {
           id: 'settings',
           label: this.$t('appNavigation.settings'),
           children: [
-            {
-              id: 'date-time',
-              label: this.$t('appNavigation.dateTime'),
-              route: '/settings/date-time',
-            },
             {
               id: 'network',
               label: this.$t('appNavigation.network'),
diff --git a/src/components/Global/LoadingBar.vue b/src/components/Global/LoadingBar.vue
index 0e9551b5..b65f97a7 100644
--- a/src/components/Global/LoadingBar.vue
+++ b/src/components/Global/LoadingBar.vue
@@ -74,12 +74,13 @@ export default {
 <style lang="scss" scoped>
 .progress {
   position: absolute;
-  left: 0;
   right: 0;
   bottom: -0.4rem;
   opacity: 1;
   transition: opacity $duration--moderate-01 $standard-easing--productive;
   height: 0.4rem;
+  width: calc(100vw - 320px);
+  border-radius: 0px;
 
   &.fade-enter, // Remove this vue2 based only class when switching to vue3
   &.fade-enter-from, // This is vue3 based only class modified from 'fade-enter'
@@ -89,5 +90,6 @@ export default {
 }
 .progress-bar {
   background-color: $loading-color;
+  border-radius: 0px;
 }
 </style>
diff --git a/src/components/Global/Popover.vue b/src/components/Global/Popover.vue
index f0b4063f..95e9fb24 100644
--- a/src/components/Global/Popover.vue
+++ b/src/components/Global/Popover.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="my-container">
+  <div id="popover-container">
     <div v-if="isclear" :id="id" ref="button" variant="primary" class="pointer">
       <img src="@/assets/images/icon-clear-red.svg" />
       <span class="regular-12px red-font">{{ $t(description) }}</span>
@@ -42,7 +42,7 @@
       triggers="click"
       :show.sync="popoverShow"
       placement="auto"
-      container="my-container"
+      container="popover-container"
       @show="onShow"
       @shown="onShown"
       @hidden="onHidden"
@@ -58,28 +58,34 @@
 
       <div class="popup-body">
         <div>
-          <label class="light-12px" for="username">{{ 'HEX для ввода' }}</label>
-          <img
-            id="popover-target-1"
-            src="@/assets/images/popups/red-sign.svg"
-          />
+          <label class="light-12px" style="margin-right: 5px">{{
+            'HEX для ввода'
+          }}</label>
+          <img id="popover-tooltip" src="@/assets/images/popups/red-sign.svg" />
           <popover-info
-            id="popover-target-1"
+            id="popover-tooltip"
             description="Введите HEX в поле для подтверждения действия"
           />
-          <div class="hex-form">
+          <div class="hex-label">
             <span class="medium-12px"> 9c1735b3f819142393146a5d03314f0a </span>
           </div>
         </div>
         <div class="popup-body__input-container">
-          <span class="regular-12px tretiatry">Поле для ввода</span>
+          <span style="margin-left: 12px" class="regular-12px tretiatry"
+            >Поле для ввода</span
+          >
           <b-form-input
             id="popover-input-1"
-            v-model="input1"
+            v-model="input"
             class="medium-12px"
           ></b-form-input>
         </div>
-        <b-button class="popover-button" variant="primary" @click="onClose">
+        <b-button
+          class="popup-button"
+          variant="primary"
+          :disabled="!input"
+          @click="onOk"
+        >
           {{ $t(button) }}
         </b-button>
       </div>
@@ -89,27 +95,32 @@
 
 <script>
 import PopoverInfo from './PopoverInfo';
-
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
 export default {
   components: {
     PopoverInfo,
   },
+  mixins: [BVToastMixin],
   props: {
+    id: {
+      type: String,
+      default: '',
+    },
     description: {
       type: String,
       default: '',
     },
-    id: {
+    popup: {
       type: String,
       default: '',
     },
-    button: {
+    placement: {
       type: String,
-      default: 'global.action.reload',
+      default: 'auto',
     },
-    popup: {
+    button: {
       type: String,
-      default: '',
+      default: 'global.action.reload',
     },
     isMicrocode: {
       type: Boolean,
@@ -123,43 +134,39 @@ export default {
       type: Boolean,
       default: false,
     },
+    action: {
+      type: Function,
+      default: null,
+    },
   },
   data() {
     return {
-      input1: '',
-      input1state: null,
-      input1Return: '',
+      input: '',
       popoverShow: false,
     };
   },
-  watch: {
-    input1(val) {
-      if (val) {
-        this.input1state = true;
-      }
-    },
-  },
   methods: {
     onClose() {
       this.popoverShow = false;
     },
     onOk() {
-      if (!this.input1) {
-        this.input1state = false;
-      }
-      if (this.input1) {
+      if (this.input === '9c1735b3f819142393146a5d03314f0a') {
+        this.action();
         this.onClose();
-        // Return our popover form results
-        this.input1Return = this.input1;
+      } else {
+        this.warningToast(
+          this.$t('Неправильный HEX в поле для подтверждения действия'),
+          {
+            title: this.$t('Неправильный НЕХ'),
+          }
+        );
       }
     },
     onShow() {
-      this.$root.$emit('bv::hide::popover');
       // This is called just before the popover is shown
       // Reset our popover form variables
-      this.input1 = '';
-      this.input1state = null;
-      this.input1Return = '';
+      this.$root.$emit('bv::hide::popover');
+      this.input = '';
     },
     onShown() {
       // Called just after the popover has been shown
@@ -220,6 +227,7 @@ export default {
   flex-direction: column;
   align-content: center;
   justify-content: center;
+  align-items: center;
 }
 
 .form-control {
@@ -229,7 +237,7 @@ export default {
   padding-top: 30px;
 }
 
-.hex-form {
+.hex-label {
   height: 32px;
   width: 341px;
   display: flex;
@@ -241,10 +249,10 @@ export default {
   margin: 0 auto;
 }
 
-.popover-button {
+.popup-button {
   width: 341px;
   height: 40px;
-  margin: 0 auto 10px;
+  margin-bottom: 10px;
 }
 
 .popup-body__input-container {
diff --git a/src/components/Global/SilaComponents/InventoryControlSystem.vue b/src/components/Global/SilaComponents/InventoryControlSystem.vue
index de5432e1..18f1d9ff 100644
--- a/src/components/Global/SilaComponents/InventoryControlSystem.vue
+++ b/src/components/Global/SilaComponents/InventoryControlSystem.vue
@@ -91,10 +91,10 @@
               v-model="timeOption"
               class="system-control__radio regular-12px"
             >
-              <b-form-radio value="NTP">
+              <b-form-radio variant="radio" value="NTP">
                 {{ $t('SystemDescription.GetNtpFromServer') }}
               </b-form-radio>
-              <b-form-radio value="serverDate">
+              <b-form-radio variant="radio" value="serverDate">
                 {{ $t('SystemDescription.UseServerDatettime') }}
               </b-form-radio>
             </b-form-radio-group>
@@ -192,42 +192,4 @@ label {
 .system-control__table__cell__4 {
   margin-top: 26px;
 }
-
-.custom-radio ::before {
-  border: 1px solid $red-brand-primary;
-  background-color: #fff;
-  border-radius: 100%;
-}
-
-.system-control-section::v-deep
-  .custom-control-input:checked
-  ~ .custom-control-label::before {
-  border: 2px solid $red-brand-primary;
-  background-color: $red-brand-primary;
-  box-shadow: 0px 0px 0px 2.5px $white inset;
-  border-radius: 100%;
-}
-
-.system-control-section::v-deep
-  .custom-control-input:hover
-  ~ .custom-control-label::before {
-  background-color: $red-brand-primary-hover !important;
-  box-shadow: 0px 0px 0px 2.5px $white inset;
-  border-color: $red-brand-primary-hover;
-}
-
-.system-control-section::v-deep
-  .custom-control-input:checked
-  ~ .custom-control-label::after {
-  background-image: none !important;
-  border-radius: 100%;
-}
-
-.system-control-section::v-deep
-  .custom-control-input:active
-  ~ .custom-control-label::before {
-  background-color: $red-brand-primary-active !important;
-  box-shadow: 0px 0px 0px 2.5px $white inset;
-  border-color: $red-brand-primary-active;
-}
 </style>
diff --git a/src/components/Global/SilaComponents/NtpPopover.vue b/src/components/Global/SilaComponents/NtpPopover.vue
index c94c1cc8..6f181002 100644
--- a/src/components/Global/SilaComponents/NtpPopover.vue
+++ b/src/components/Global/SilaComponents/NtpPopover.vue
@@ -31,7 +31,7 @@
             class="medium-12px"
           ></b-form-input>
         </div>
-        <b-button class="popover-button" variant="primary" @click="onClose">
+        <b-button class="popup-button" variant="primary" @click="onClose">
           {{ $t('global.action.save') }}
         </b-button>
       </div>
@@ -115,7 +115,7 @@ export default {
   padding-top: 30px;
 }
 
-.popover-button {
+.popup-button {
   width: 341px;
   height: 40px;
   margin: 0 auto 10px;
diff --git a/src/components/Global/SilaComponents/PopoverWithSlot.vue b/src/components/Global/SilaComponents/PopoverWithSlot.vue
new file mode 100644
index 00000000..a9ec649b
--- /dev/null
+++ b/src/components/Global/SilaComponents/PopoverWithSlot.vue
@@ -0,0 +1,225 @@
+<template>
+  <div id="popover-container">
+    <slot />
+    <b-popover
+      ref="popover"
+      :target="id"
+      triggers="click"
+      :show.sync="popoverShow"
+      :placement="placement"
+      container="popover-container"
+      @show="onShow"
+      @shown="onShown"
+      @hidden="onHidden"
+    >
+      <template #title>
+        <div class="popup-title">
+          <span class="bold-16px__caps">{{ popupLabel }}</span>
+          <b-button class="popup-title__button_close" @click="onClose">
+            <img src="@/assets/images/popups/x-icon.svg" />
+          </b-button>
+        </div>
+      </template>
+
+      <div class="popup-body">
+        <div>
+          <label class="light-12px" style="margin-right: 5px">{{
+            'HEX для ввода'
+          }}</label>
+          <img id="popover-tooltip" src="@/assets/images/popups/red-sign.svg" />
+          <popover-info
+            id="popover-tooltip"
+            description="Введите HEX в поле для подтверждения действия"
+          />
+          <div class="hex-label">
+            <span class="medium-12px"> 9c1735b3f819142393146a5d03314f0a </span>
+          </div>
+        </div>
+        <div class="popup-body__input-container">
+          <span style="margin-left: 12px" class="regular-12px tretiatry"
+            >Поле для ввода</span
+          >
+          <b-form-input
+            id="popover-input-1"
+            ref="input"
+            v-model="input"
+            class="medium-12px"
+          ></b-form-input>
+        </div>
+        <b-button
+          class="popup-button"
+          variant="primary"
+          :disabled="!input"
+          @click="onOk"
+        >
+          {{ buttonLabel }}
+        </b-button>
+      </div>
+    </b-popover>
+  </div>
+</template>
+
+<script>
+import PopoverInfo from '../PopoverInfo';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+export default {
+  components: {
+    PopoverInfo,
+  },
+  mixins: [BVToastMixin],
+  props: {
+    id: {
+      type: String,
+      default: '',
+    },
+    placement: {
+      type: String,
+      default: 'auto',
+    },
+    popupLabel: {
+      type: String,
+      default: '',
+    },
+    buttonLabel: {
+      type: String,
+      default: 'global.action.reload',
+    },
+    action: {
+      type: Function,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      input: '',
+      popoverShow: false,
+    };
+  },
+  methods: {
+    onClose() {
+      this.popoverShow = false;
+    },
+    onOk() {
+      if (this.input === '9c1735b3f819142393146a5d03314f0a') {
+        this.action();
+        this.onClose();
+      } else {
+        this.warningToast(
+          this.$t('Неправильный HEX в поле для подтверждения действия'),
+          {
+            title: this.$t('Неправильный НЕХ'),
+          }
+        );
+      }
+    },
+    onShow() {
+      // This is called just before the popover is shown
+      // Reset our popover form variables
+      this.$root.$emit('bv::hide::popover');
+      this.input = '';
+    },
+    onShown() {
+      // Called just after the popover has been shown
+      // Transfer focus to the first input
+      this.focusRef(this.$refs.input);
+    },
+    onHidden() {
+      // Called just after the popover has finished hiding
+      // Bring focus back to the button
+      // this.focusRef(this.$refs.button);
+    },
+    focusRef(ref) {
+      // Some references may be a component, functional component, or plain element
+      // This handles that check before focusing, assuming a `focus()` method exists
+      // We do this in a double `$nextTick()` to ensure components have
+      // updated & popover positioned first
+      this.$nextTick(() => {
+        this.$nextTick(() => {
+          console.log(ref);
+          (ref.$el || ref).focus();
+        });
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.form-group {
+  margin: 0;
+}
+
+.popup-title {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: baseline;
+}
+
+.popup-title__button_close {
+  margin: 0 28px 0 auto;
+  background: none;
+  border: none;
+  &:active {
+    background-color: $faint-secondary-primary-5-hover !important;
+    box-shadow: none !important;
+    border-radius: 8px;
+  }
+  &:focus-visible {
+    border: none !important;
+    border-radius: 8px;
+  }
+  &:focus {
+    box-shadow: none;
+    border-radius: 8px;
+  }
+}
+
+.popup-body {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+}
+
+.form-control {
+  width: 341px;
+  height: 52px;
+  margin: -25px auto;
+  padding-top: 30px;
+}
+
+.hex-label {
+  height: 32px;
+  width: 341px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: $faint-secondary-primary-5;
+  border-radius: 8px;
+  border: none;
+  margin: 0 auto;
+}
+
+.popup-button {
+  width: 341px;
+  height: 40px;
+  margin-bottom: 10px;
+}
+
+.popup-body__input-container {
+  height: 52px;
+  margin: 24px auto 16px auto;
+}
+
+.popover-info {
+  background-color: $on-surface-primary;
+  // border: 1px solid $text-primary;
+  // box-shadow: 0px 6px 16px -12px rgba(23, 40, 77, 0.06);
+  border-radius: 8px;
+  width: 168px;
+  height: 76px;
+  &.arrow {
+    display: block;
+  }
+}
+</style>
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index 3ac8e2ce..eabe0c98 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -67,12 +67,13 @@ export default {
   },
 };
 </script>
-
 <style lang="scss" scoped>
 $toolbar-height: 64px;
 
 .toolbar-container {
-  width: 100%;
+  width: calc(100vw - 320px);
+  height: $toolbar-height;
+  border-radius: 0px;
   position: fixed;
   bottom: 0;
   right: 0;
@@ -80,18 +81,14 @@ $toolbar-height: 64px;
 }
 
 .toolbar-content {
-  height: $toolbar-height;
   background-color: $white;
   color: $white;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: -$toolbar-height;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.06);
+  border-radius: 0px;
 }
 
 .toolbar-selected {
diff --git a/src/components/Global/TableToolbarExport.vue b/src/components/Global/TableToolbarExport.vue
index 69646ea6..152a4f68 100644
--- a/src/components/Global/TableToolbarExport.vue
+++ b/src/components/Global/TableToolbarExport.vue
@@ -1,16 +1,15 @@
 <template>
-  <b-button
-    class="d-flex align-items-center"
-    variant="primary"
-    :download="download"
-    :href="href"
-  >
-    {{ $t('global.action.export') }}
+  <b-button size="md" variant="primary" :download="download" :href="href">
+    <icon-export /> {{ $t('global.action.export') }}
   </b-button>
 </template>
 
 <script>
+import IconExport from '@carbon/icons-vue/es/document--export/20';
 export default {
+  components: {
+    IconExport,
+  },
   props: {
     data: {
       type: Array,
diff --git a/src/components/SubHeader/SubHeader.vue b/src/components/SubHeader/SubHeader.vue
index 4ab6b094..9d8a1b88 100644
--- a/src/components/SubHeader/SubHeader.vue
+++ b/src/components/SubHeader/SubHeader.vue
@@ -114,20 +114,18 @@ export default {
   .navbar-text,
   .nav-link,
   .btn-link {
-    border-radius: 4px;
+    border-radius: 14% 14% 0px 0px;
     padding: 0.68rem 1rem !important;
 
     &:hover {
       background-color: $white;
       color: #1a3e5b !important;
-      border-radius: 4px;
-      border-bottom: 5px;
+      border-radius: 14% 14% 0px 0px;
     }
     &:active {
       background-color: $white;
       color: #1a3e5b !important;
-      border-bottom: 5px;
-      border-radius: 4px;
+      border-radius: 14% 14% 0px 0px;
     }
   }
 
@@ -169,7 +167,7 @@ export default {
 #sub-header .nav-item.active-route-top > a {
   background-color: $white;
   color: #1a3e5b;
-  border-radius: 4px;
+  border-radius: 14% 14% 0px 0px;
 }
 
 .navbar-dark .navbar-nav .nav-link {
diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json
index e6753ea6..407292fc 100644
--- a/src/locales/ru-RU.json
+++ b/src/locales/ru-RU.json
@@ -15,7 +15,7 @@
       "enable": "Включить",
       "export": "Экспортировать",
       "import": "Импортировать",
-      "exportAll": "Экспортировать всё",
+      "exportAll": "Экспортировать все",
       "filter": "Фильтровать",
       "refresh": "Обновить",
       "replace": "Переместить",
@@ -82,6 +82,8 @@
       "notAvailable": "Недоступно",
       "off": "Выкл.",
       "on": "Вкл.",
+      "off_full": "Выключен",
+      "on_full": "Включен",
       "success": "Успешно",
       "warning": "Предупреждение",
       "informational": "Информация",
@@ -149,7 +151,7 @@
     "powerConsumption": "Показатели потребляемой мощности"
   },
   "appNavigation": {
-    "systemInformaion": "Краткое описание системы",
+    "systemInformaion": "Система",
     "overviewInfo": "Основная информация",
     "networkParametrs": "Параметры сети",
     "eventLogs": "Журнал событий",
@@ -219,7 +221,7 @@
     "changePassword": "Изменить пароль",
     "power": "Питание",
     "sessions": "Сессии",
-    "dateTime": "Дата и время",
+    "dateTime": "Настройка даты и времени",
     "dumps": "Дампы",
     "eventLogs": "Журнал событий",
     "factoryReset": "Сброс до заводских настроек",
@@ -239,7 +241,7 @@
     "policies": "Политики безопасности",
     "sensors": "Датчики",
     "serialOverLan": "Консоль Serial over LAN (SOL)",
-    "serverPowerOperations": "Управление питанием сервера",
+    "serverPowerOperations": "Управление питанием и ОС сервера",
     "certificates": "Сертификаты",
     "keyClear": "Очистка ключа",
     "virtualMedia": "Виртуальные носители"
@@ -945,6 +947,7 @@
     "orderlyReboot": "По порядку – ОС выключается, затем сервер перезапускается",
     "orderlyShutdown": "По порядку - ОС выключается, затем сервер выключается",
     "powerOn": "Включить",
+    "powerOnServer": "Включить сервер",
     "reboot": "Перезапустить",
     "rebootServer": "Перезапустить сервер",
     "shutDown": "Выключить",
diff --git a/src/main.js b/src/main.js
index 79bab44f..3d357157 100644
--- a/src/main.js
+++ b/src/main.js
@@ -85,6 +85,23 @@ Vue.filter('formatTime', function (value) {
   }
 });
 
+Vue.filter('formatTimeShort', function (value) {
+  const isUtcDisplay = store.getters['global/isUtcDisplay'];
+
+  if (value instanceof Date) {
+    if (isUtcDisplay) {
+      let timeOptions = {
+        timeZone: 'UTC',
+        hourCycle: 'h23',
+      };
+      return `${value.toLocaleTimeString('default', timeOptions)}`;
+    }
+    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    // const shortTz = Vue.filter('shortTimeZone')(value);
+    const pattern = `HH:mm:ss`;
+    return format(value, pattern, { timezone }).replace('GMT', 'UTC');
+  }
+});
 // Plugins
 Vue.use(AlertPlugin);
 Vue.use(BadgePlugin);
diff --git a/src/router/routes.js b/src/router/routes.js
index d6a2d694..439815ae 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -149,7 +149,7 @@ const routes = [
       },
       {
         path: '/network-parametrs',
-        name: 'network',
+        name: 'network-parametrs',
         component: SystemNetwork,
         meta: {
           title: i18n.t('appNavigation.systemInformaion'),
diff --git a/src/views/BMC/Configuration/BMCConfigurationControl.vue b/src/views/BMC/Configuration/BMCConfigurationControl.vue
index 0eb8bfc9..2cc259a7 100644
--- a/src/views/BMC/Configuration/BMCConfigurationControl.vue
+++ b/src/views/BMC/Configuration/BMCConfigurationControl.vue
@@ -10,6 +10,7 @@
           description="BMC.ReloadBmc"
           popup="BMC.ReloadBmc_popup"
           button="BMC.ReloadBmc"
+          :action="rebootBmc"
         />
         <settings-import-popup
           id="popover-reactive-2"
@@ -53,13 +54,14 @@
 import SettingsImportPopup from './SettingsImportPopup';
 import PageSection from '@/components/Global/PageSection';
 import Popover from '@/components/Global/Popover';
-
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
 export default {
   components: {
     PageSection,
     Popover,
     SettingsImportPopup,
   },
+  mixins: [BVToastMixin],
   data() {
     return {
       timeOption: 'resetBios',
@@ -80,6 +82,12 @@ export default {
     redirectNetworkParametrs() {
       this.$router.push('/network-parametrs');
     },
+    rebootBmc() {
+      this.$store
+        .dispatch('controls/rebootBmc')
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message));
+    },
   },
 };
 </script>
diff --git a/src/views/BMC/Configuration/BMCConfigurationTable.vue b/src/views/BMC/Configuration/BMCConfigurationTable.vue
index a550743e..51e428e3 100644
--- a/src/views/BMC/Configuration/BMCConfigurationTable.vue
+++ b/src/views/BMC/Configuration/BMCConfigurationTable.vue
@@ -4,27 +4,10 @@
       responsive="md"
       show-empty
       class="bootstrap-rounded-table"
-      :items="systems"
+      :items="items"
       :fields="fields"
       :empty-text="$t('global.table.emptyMessage')"
     >
-      <template #cell(value)="data">
-        <b-row v-if="data.index === 2">
-          <b-col>
-            <span v-if="isAddersСolon">
-              {{ '487566942332' }}
-            </span>
-            <span v-else>
-              {{ data.value }}
-            </span>
-          </b-col>
-          <b-col class="macAddresCol">
-            <b-form-checkbox v-model="isAddersСolon"> </b-form-checkbox>
-            <span> {{ 'XXXX формат' }} </span>
-          </b-col>
-        </b-row>
-        <span v-else>{{ data.value }}</span>
-      </template>
     </b-table>
   </page-section>
 </template>
@@ -64,17 +47,52 @@ export default {
         },
       ],
       expandRowLabel: expandRowLabel,
-      systems: [
+      items: null,
+    };
+  },
+  computed: {
+    bmc() {
+      return this.$store.getters['bmc/bmc'];
+    },
+  },
+  watch: {
+    bmc() {
+      this.items = [
         {
-          param: 'Время BMC',
-          value: '14:20',
+          param: 'Время сервера',
+          value: this.bmc.dateTime,
         },
-        { param: 'Версия прошивки', value: '1.214.248 beta' },
-        { param: 'MAC - адреса', value: '48:75:66:94:23:32' },
-        { param: 'IP - адреса', value: '192.168.48.1' },
-        { param: 'Имя ВМС', value: 'ВМС-007' },
-      ],
-    };
+        {
+          param: 'uuid',
+          value: this.bmc.uuid,
+        },
+        {
+          param: 'Версия прошивки',
+          value: this.bmc.firmwareVersion,
+        },
+        {
+          param: 'Модель',
+          value: this.bmc.model,
+        },
+        {
+          param: 'Описание',
+          value: this.bmc.description,
+        },
+        {
+          param: 'Максимальное количество сессий',
+          value: this.bmc.graphicalConsoleMaxSessions,
+        },
+      ];
+    },
+  },
+  created() {
+    this.$store.dispatch('bmc/getBmcInfo').finally(() => {
+      this.$root.$emit('hardware-status-bmc-manager-complete');
+    });
+    const bmcManagerTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-bmc-manager-complete', () => resolve());
+    });
+    Promise.all([bmcManagerTablePromise]).finally(() => this.endLoader());
   },
 };
 </script>
diff --git a/src/views/Fans/StaticInformation/FansStaticPage.vue b/src/views/Fans/StaticInformation/FansStaticPage.vue
index 85b5191f..7e3a9849 100644
--- a/src/views/Fans/StaticInformation/FansStaticPage.vue
+++ b/src/views/Fans/StaticInformation/FansStaticPage.vue
@@ -16,19 +16,13 @@
       >
         <template #cell(status)="{ value }">
           <div v-if="value" class="fans-table-col-first__cell">
-            <img
-              class="status__img"
-              src="@/assets/images/fans-page/working.svg"
-            />
+            <img class="status__img" src="@/assets/images/status/on.svg" />
             <span>
               {{ $t('global.status.inWork') }}
             </span>
           </div>
           <div v-else class="fans-table-col-first__cell">
-            <img
-              class="status__img"
-              src="@/assets/images/fans-page/notWorking.svg"
-            />
+            <img class="status__img" src="@/assets/images/status/off.svg" />
             <span>
               {{ $t('global.status.outWorking') }}
             </span>
diff --git a/src/views/HardwareStatus/Inventory/Inventory.vue b/src/views/HardwareStatus/Inventory/Inventory.vue
index fcdbf8d2..1fbbe81f 100644
--- a/src/views/HardwareStatus/Inventory/Inventory.vue
+++ b/src/views/HardwareStatus/Inventory/Inventory.vue
@@ -1,50 +1,51 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid="xxl pt-0 m-2">
     <page-title />
+    <div class="main-container">
+      <!-- Service indicators -->
+      <service-indicator />
 
-    <!-- Service indicators -->
-    <service-indicator />
+      <!-- Quicklinks section -->
+      <page-section :section-title="$t('pageInventory.quicklinkTitle')">
+        <b-row class="w-75">
+          <b-col v-for="column in quicklinkColumns" :key="column.id" xl="4">
+            <div v-for="item in column" :key="item.id">
+              <b-link
+                :href="item.href"
+                :data-ref="item.dataRef"
+                @click.prevent="scrollToOffset"
+              >
+                <jump-link /> {{ item.linkText }}
+              </b-link>
+            </div>
+          </b-col>
+        </b-row>
+      </page-section>
 
-    <!-- Quicklinks section -->
-    <page-section :section-title="$t('pageInventory.quicklinkTitle')">
-      <b-row class="w-75">
-        <b-col v-for="column in quicklinkColumns" :key="column.id" xl="4">
-          <div v-for="item in column" :key="item.id">
-            <b-link
-              :href="item.href"
-              :data-ref="item.dataRef"
-              @click.prevent="scrollToOffset"
-            >
-              <jump-link /> {{ item.linkText }}
-            </b-link>
-          </div>
-        </b-col>
-      </b-row>
-    </page-section>
+      <!-- System table -->
+      <table-system ref="system" />
 
-    <!-- System table -->
-    <table-system ref="system" />
+      <!-- BMC manager table -->
+      <table-bmc-manager ref="bmc" />
 
-    <!-- BMC manager table -->
-    <table-bmc-manager ref="bmc" />
+      <!-- Chassis table -->
+      <table-chassis ref="chassis" />
 
-    <!-- Chassis table -->
-    <table-chassis ref="chassis" />
+      <!-- DIMM slot table -->
+      <table-dimm-slot ref="dimms" />
 
-    <!-- DIMM slot table -->
-    <table-dimm-slot ref="dimms" />
+      <!-- Fans table -->
+      <table-fans ref="fans" />
 
-    <!-- Fans table -->
-    <table-fans ref="fans" />
+      <!-- Power supplies table -->
+      <table-power-supplies ref="powerSupply" />
 
-    <!-- Power supplies table -->
-    <table-power-supplies ref="powerSupply" />
+      <!-- Processors table -->
+      <table-processors ref="processors" />
 
-    <!-- Processors table -->
-    <table-processors ref="processors" />
-
-    <!-- Assembly table -->
-    <table-assembly ref="assembly" />
+      <!-- Assembly table -->
+      <table-assembly ref="assembly" />
+    </div>
   </b-container>
 </template>
 
diff --git a/src/views/Logs/EventLogs/EventLogs.vue b/src/views/Logs/EventLogs/EventLogs.vue
index 5b8ca110..10aa9469 100644
--- a/src/views/Logs/EventLogs/EventLogs.vue
+++ b/src/views/Logs/EventLogs/EventLogs.vue
@@ -1,241 +1,248 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid="xxl pt-0 m-2">
     <page-title />
-    <b-row class="align-items-start">
-      <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4">
-        <search
-          :placeholder="$t('pageEventLogs.table.searchLogs')"
-          data-test-id="eventLogs-input-searchLogs"
-          @change-search="onChangeSearchInput"
-          @clear-search="onClearSearchInput"
-        />
-        <div class="ml-sm-4">
-          <table-cell-count
-            :filtered-items-count="filteredRows"
-            :total-number-of-cells="allLogs.length"
-          ></table-cell-count>
-        </div>
-      </b-col>
-      <b-col sm="8" md="7" xl="6">
-        <table-date-filter @change="onChangeDateTimeFilter" />
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col class="text-right">
-        <table-filter :filters="tableFilters" @filter-change="onFilterChange" />
-        <b-button
-          variant="link"
-          :disabled="allLogs.length === 0"
-          @click="deleteAllLogs"
-        >
-          <icon-delete /> {{ $t('global.action.deleteAll') }}
-        </b-button>
-        <b-button
-          variant="primary"
-          :class="{ disabled: allLogs.length === 0 }"
-          :download="exportFileNameByDate()"
-          :href="href"
-        >
-          <icon-export /> {{ $t('global.action.exportAll') }}
-        </b-button>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col>
-        <table-toolbar
-          ref="toolbar"
-          :selected-items-count="selectedRows.length"
-          :actions="batchActions"
-          @clear-selected="clearSelectedRows($refs.table)"
-          @batch-action="onBatchAction"
-        >
-          <template #toolbar-buttons>
-            <b-button variant="primary" @click="resolveLogs">
-              {{ $t('pageEventLogs.resolve') }}
-            </b-button>
-            <b-button variant="primary" @click="unresolveLogs">
-              {{ $t('pageEventLogs.unresolve') }}
-            </b-button>
-            <table-toolbar-export
-              :data="batchExportData"
-              :file-name="exportFileNameByDate()"
-            />
-          </template>
-        </table-toolbar>
-        <b-table
-          id="table-event-logs"
-          ref="table"
-          responsive="md"
-          selectable
-          no-select-on-click
-          sort-icon-left
-          hover
-          no-sort-reset
-          sort-desc
-          show-empty
-          sort-by="id"
-          :fields="fields"
-          :items="filteredLogs"
-          :sort-compare="onSortCompare"
-          :empty-text="$t('global.table.emptyMessage')"
-          :empty-filtered-text="$t('global.table.emptySearchMessage')"
-          :per-page="perPage"
-          :current-page="currentPage"
-          :filter="searchFilter"
-          :busy="isBusy"
-          @filtered="onFiltered"
-          @row-selected="onRowSelected($event, filteredLogs.length)"
-        >
-          <!-- Checkbox column -->
-          <template #head(checkbox)>
-            <b-form-checkbox
-              v-model="tableHeaderCheckboxModel"
-              data-test-id="eventLogs-checkbox-selectAll"
-              :indeterminate="tableHeaderCheckboxIndeterminate"
-              @change="onChangeHeaderCheckbox($refs.table)"
-            >
-              <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
-            </b-form-checkbox>
-          </template>
-          <template #cell(checkbox)="row">
-            <b-form-checkbox
-              v-model="row.rowSelected"
-              :data-test-id="`eventLogs-checkbox-selectRow-${row.index}`"
-              @change="toggleSelectRow($refs.table, row.index)"
-            >
-              <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
-            </b-form-checkbox>
-          </template>
+    <div class="main-container">
+      <b-row class="align-items-start">
+        <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4">
+          <search
+            :placeholder="$t('pageEventLogs.table.searchLogs')"
+            data-test-id="eventLogs-input-searchLogs"
+            @change-search="onChangeSearchInput"
+            @clear-search="onClearSearchInput"
+          />
+          <div class="ml-sm-4">
+            <table-cell-count
+              :filtered-items-count="filteredRows"
+              :total-number-of-cells="allLogs.length"
+            ></table-cell-count>
+          </div>
+        </b-col>
+        <b-col sm="8" md="7" xl="6">
+          <table-date-filter @change="onChangeDateTimeFilter" />
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col class="text-right">
+          <table-filter
+            :filters="tableFilters"
+            @filter-change="onFilterChange"
+          />
+          <b-button
+            variant="link"
+            :disabled="allLogs.length === 0"
+            @click="deleteAllLogs"
+          >
+            <icon-delete /> {{ $t('global.action.deleteAll') }}
+          </b-button>
+          <b-button
+            variant="primary"
+            :class="{ disabled: allLogs.length === 0 }"
+            :download="exportFileNameByDate()"
+            :href="href"
+          >
+            <icon-export /> {{ $t('global.action.exportAll') }}
+          </b-button>
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col>
+          <table-toolbar
+            ref="toolbar"
+            :selected-items-count="selectedRows.length"
+            :actions="batchActions"
+            @clear-selected="clearSelectedRows($refs.table)"
+            @batch-action="onBatchAction"
+          >
+            <template #toolbar-buttons>
+              <b-button variant="primary" @click="resolveLogs">
+                {{ $t('pageEventLogs.resolve') }}
+              </b-button>
+              <b-button variant="primary" @click="unresolveLogs">
+                {{ $t('pageEventLogs.unresolve') }}
+              </b-button>
+              <table-toolbar-export
+                :data="batchExportData"
+                :file-name="exportFileNameByDate()"
+              />
+            </template>
+          </table-toolbar>
+          <b-table
+            id="table-event-logs"
+            ref="table"
+            responsive="md"
+            selectable
+            no-select-on-click
+            sort-icon-left
+            hover
+            no-sort-reset
+            sort-desc
+            show-empty
+            sort-by="id"
+            :fields="fields"
+            :items="filteredLogs"
+            :sort-compare="onSortCompare"
+            :empty-text="$t('global.table.emptyMessage')"
+            :empty-filtered-text="$t('global.table.emptySearchMessage')"
+            :per-page="perPage"
+            :current-page="currentPage"
+            :filter="searchFilter"
+            :busy="isBusy"
+            @filtered="onFiltered"
+            @row-selected="onRowSelected($event, filteredLogs.length)"
+          >
+            <!-- Checkbox column -->
+            <template #head(checkbox)>
+              <b-form-checkbox
+                v-model="tableHeaderCheckboxModel"
+                data-test-id="eventLogs-checkbox-selectAll"
+                :indeterminate="tableHeaderCheckboxIndeterminate"
+                @change="onChangeHeaderCheckbox($refs.table)"
+              >
+                <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+              </b-form-checkbox>
+            </template>
+            <template #cell(checkbox)="row">
+              <b-form-checkbox
+                v-model="row.rowSelected"
+                :data-test-id="`eventLogs-checkbox-selectRow-${row.index}`"
+                @change="toggleSelectRow($refs.table, row.index)"
+              >
+                <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+              </b-form-checkbox>
+            </template>
 
-          <!-- Expand chevron icon -->
-          <template #cell(expandRow)="row">
-            <b-button
-              variant="link"
-              :aria-label="expandRowLabel"
-              :title="expandRowLabel"
-              class="btn-icon-only"
-              @click="toggleRowDetails(row)"
-            >
-              <icon-chevron />
-            </b-button>
-          </template>
+            <!-- Expand chevron icon -->
+            <template #cell(expandRow)="row">
+              <b-button
+                variant="link"
+                :aria-label="expandRowLabel"
+                :title="expandRowLabel"
+                class="btn-icon-only"
+                @click="toggleRowDetails(row)"
+              >
+                <icon-chevron />
+              </b-button>
+            </template>
 
-          <template #row-details="{ item }">
-            <b-container fluid>
-              <b-row>
-                <b-col>
-                  <dl>
-                    <!-- Name -->
-                    <dt>{{ $t('pageEventLogs.table.name') }}:</dt>
-                    <dd>{{ dataFormatter(item.name) }}</dd>
-                  </dl>
-                  <dl>
-                    <!-- Type -->
-                    <dt>{{ $t('pageEventLogs.table.type') }}:</dt>
-                    <dd>{{ dataFormatter(item.type) }}</dd>
-                  </dl>
-                </b-col>
-                <b-col>
-                  <dl>
-                    <!-- Modified date -->
-                    <dt>{{ $t('pageEventLogs.table.modifiedDate') }}:</dt>
-                    <dd v-if="item.modifiedDate">
-                      {{ item.modifiedDate | formatDate }}
-                      {{ item.modifiedDate | formatTime }}
-                    </dd>
-                    <dd v-else>--</dd>
-                  </dl>
-                </b-col>
-                <b-col class="text-nowrap">
-                  <b-button
-                    class="btn btn-secondary float-right"
-                    :href="item.additionalDataUri"
-                    target="_blank"
-                  >
-                    <icon-download />{{ $t('pageEventLogs.additionalDataUri') }}
-                  </b-button>
-                </b-col>
-              </b-row>
-            </b-container>
-          </template>
+            <template #row-details="{ item }">
+              <b-container fluid>
+                <b-row>
+                  <b-col>
+                    <dl>
+                      <!-- Name -->
+                      <dt>{{ $t('pageEventLogs.table.name') }}:</dt>
+                      <dd>{{ dataFormatter(item.name) }}</dd>
+                    </dl>
+                    <dl>
+                      <!-- Type -->
+                      <dt>{{ $t('pageEventLogs.table.type') }}:</dt>
+                      <dd>{{ dataFormatter(item.type) }}</dd>
+                    </dl>
+                  </b-col>
+                  <b-col>
+                    <dl>
+                      <!-- Modified date -->
+                      <dt>{{ $t('pageEventLogs.table.modifiedDate') }}:</dt>
+                      <dd v-if="item.modifiedDate">
+                        {{ item.modifiedDate | formatDate }}
+                        {{ item.modifiedDate | formatTime }}
+                      </dd>
+                      <dd v-else>--</dd>
+                    </dl>
+                  </b-col>
+                  <b-col class="text-nowrap">
+                    <b-button
+                      class="btn btn-secondary float-right"
+                      :href="item.additionalDataUri"
+                      target="_blank"
+                    >
+                      <icon-download />{{
+                        $t('pageEventLogs.additionalDataUri')
+                      }}
+                    </b-button>
+                  </b-col>
+                </b-row>
+              </b-container>
+            </template>
 
-          <!-- Severity column -->
-          <template #cell(severity)="{ value }">
-            <status-icon v-if="value" :status="statusIcon(value)" />
-            {{ value }}
-          </template>
-          <!-- Date column -->
-          <template #cell(date)="{ value }">
-            <p class="mb-0">{{ value | formatDate }}</p>
-            <p class="mb-0">{{ value | formatTime }}</p>
-          </template>
+            <!-- Severity column -->
+            <template #cell(severity)="{ value }">
+              <status-icon v-if="value" :status="statusIcon(value)" />
+              {{ value }}
+            </template>
+            <!-- Date column -->
+            <template #cell(date)="{ value }">
+              <p class="mb-0">{{ value | formatDate }}</p>
+              <p class="mb-0">{{ value | formatTime }}</p>
+            </template>
 
-          <!-- Status column -->
-          <template #cell(status)="row">
-            <b-form-checkbox
-              v-model="row.item.status"
-              name="switch"
-              switch
-              @change="changelogStatus(row.item)"
-            >
-              <span v-if="row.item.status">
-                {{ $t('pageEventLogs.resolved') }}
-              </span>
-              <span v-else> {{ $t('pageEventLogs.unresolved') }} </span>
-            </b-form-checkbox>
-          </template>
-          <template #cell(filterByStatus)="{ value }">
-            {{ value }}
-          </template>
+            <!-- Status column -->
+            <template #cell(status)="row">
+              <b-form-checkbox
+                v-model="row.item.status"
+                name="switch"
+                switch
+                @change="changelogStatus(row.item)"
+              >
+                <span v-if="row.item.status">
+                  {{ $t('pageEventLogs.resolved') }}
+                </span>
+                <span v-else> {{ $t('pageEventLogs.unresolved') }} </span>
+              </b-form-checkbox>
+            </template>
+            <template #cell(filterByStatus)="{ value }">
+              {{ value }}
+            </template>
 
-          <!-- Actions column -->
-          <template #cell(actions)="row">
-            <table-row-action
-              v-for="(action, index) in row.item.actions"
-              :key="index"
-              :value="action.value"
-              :title="action.title"
-              :row-data="row.item"
-              :export-name="exportFileNameByDate('export')"
-              :data-test-id="`eventLogs-button-deleteRow-${row.index}`"
-              @click-table-action="onTableRowAction($event, row.item)"
-            >
-              <template #icon>
-                <icon-export v-if="action.value === 'export'" />
-                <icon-trashcan v-if="action.value === 'delete'" />
-              </template>
-            </table-row-action>
-          </template>
-        </b-table>
-      </b-col>
-    </b-row>
+            <!-- Actions column -->
+            <template #cell(actions)="row">
+              <table-row-action
+                v-for="(action, index) in row.item.actions"
+                :key="index"
+                :value="action.value"
+                :title="action.title"
+                :row-data="row.item"
+                :export-name="exportFileNameByDate('export')"
+                :data-test-id="`eventLogs-button-deleteRow-${row.index}`"
+                @click-table-action="onTableRowAction($event, row.item)"
+              >
+                <template #icon>
+                  <icon-export v-if="action.value === 'export'" />
+                  <icon-trashcan v-if="action.value === 'delete'" />
+                </template>
+              </table-row-action>
+            </template>
+          </b-table>
+        </b-col>
+      </b-row>
 
-    <!-- Table pagination -->
-    <b-row>
-      <b-col sm="6">
-        <b-form-group
-          class="table-pagination-select"
-          :label="$t('global.table.itemsPerPage')"
-          label-for="pagination-items-per-page"
-        >
-          <b-form-select
-            id="pagination-items-per-page"
-            v-model="perPage"
-            :options="itemsPerPageOptions"
+      <!-- Table pagination -->
+      <b-row>
+        <b-col sm="6">
+          <b-form-group
+            class="table-pagination-select"
+            :label="$t('global.table.itemsPerPage')"
+            label-for="pagination-items-per-page"
+          >
+            <b-form-select
+              id="pagination-items-per-page"
+              v-model="perPage"
+              :options="itemsPerPageOptions"
+            />
+          </b-form-group>
+        </b-col>
+        <b-col sm="6">
+          <b-pagination
+            v-model="currentPage"
+            first-number
+            last-number
+            :per-page="perPage"
+            :total-rows="getTotalRowCount(filteredRows)"
+            aria-controls="table-event-logs"
           />
-        </b-form-group>
-      </b-col>
-      <b-col sm="6">
-        <b-pagination
-          v-model="currentPage"
-          first-number
-          last-number
-          :per-page="perPage"
-          :total-rows="getTotalRowCount(filteredRows)"
-          aria-controls="table-event-logs"
-        />
-      </b-col>
-    </b-row>
+        </b-col>
+      </b-row>
+    </div>
   </b-container>
 </template>
 
diff --git a/src/views/MemoryModules/Specification/MemoryStaticPage.vue b/src/views/MemoryModules/Specification/MemoryStaticPage.vue
index a40bd2ea..679f4ba1 100644
--- a/src/views/MemoryModules/Specification/MemoryStaticPage.vue
+++ b/src/views/MemoryModules/Specification/MemoryStaticPage.vue
@@ -42,10 +42,7 @@
                 </span>
               </b-col>
               <b-col cols="1">
-                <img
-                  src="@/assets/images/fans-page/working.svg"
-                  class="icon-chevron"
-                />
+                <img src="@/assets/images/status/on.svg" class="icon-chevron" />
               </b-col>
             </b-row>
             <b-row v-else>
@@ -74,10 +71,7 @@
                 </span>
               </b-col>
               <b-col cols="1">
-                <img
-                  src="@/assets/images/fans-page/working.svg"
-                  class="icon-chevron"
-                />
+                <img src="@/assets/images/status/on.svg" class="icon-chevron" />
               </b-col>
             </b-row>
             <b-row v-else>
diff --git a/src/views/Operations/Kvm/Kvm.vue b/src/views/Operations/Kvm/Kvm.vue
index 8c51ace4..324d50d0 100644
--- a/src/views/Operations/Kvm/Kvm.vue
+++ b/src/views/Operations/Kvm/Kvm.vue
@@ -29,8 +29,7 @@
         </div>
       </div>
     </div>
-    <div class="console"></div>
-    <!-- <kvm-console :is-full-window="false" /> -->
+    <kvm-console :is-full-window="false" />
     <images-modal />
   </b-container>
 </template>
@@ -38,14 +37,14 @@
 <script>
 import PageTitle from '@/components/Global/PageTitle';
 import ImagesModal from './ImagesModal';
-// import KvmConsole from './KvmConsole';
+import KvmConsole from './KvmConsole';
 
 export default {
   name: 'Kvm',
   components: {
     PageTitle,
     ImagesModal,
-    // KvmConsole
+    KvmConsole,
   },
 };
 </script>
@@ -112,10 +111,4 @@ export default {
 .semi-bold-12px {
   color: $text-primary;
 }
-
-.console {
-  background-color: black;
-  width: 100%;
-  height: 70vh;
-}
 </style>
diff --git a/src/views/Operations/SerialOverLan/SerialOverLan.vue b/src/views/Operations/SerialOverLan/SerialOverLan.vue
index 6f6852cf..33533bf9 100644
--- a/src/views/Operations/SerialOverLan/SerialOverLan.vue
+++ b/src/views/Operations/SerialOverLan/SerialOverLan.vue
@@ -39,8 +39,7 @@
           </div>
         </div>
       </div>
-      <div class="console"></div>
-      <!-- <serial-over-lan-console :is-full-window="false" /> -->
+      <serial-over-lan-console :is-full-window="false" />
     </page-section>
     <images-modal />
   </b-container>
@@ -49,7 +48,7 @@
 <script>
 import PageTitle from '@/components/Global/PageTitle';
 import PageSection from '@/components/Global/PageSection';
-// import SerialOverLanConsole from './SerialOverLanConsole';
+import SerialOverLanConsole from './SerialOverLanConsole';
 import ImagesModal from '../Kvm/ImagesModal';
 
 export default {
@@ -58,7 +57,7 @@ export default {
     PageSection,
     PageTitle,
     ImagesModal,
-    // SerialOverLanConsole,
+    SerialOverLanConsole,
   },
 };
 </script>
@@ -124,10 +123,4 @@ export default {
 .semi-bold-12px {
   color: $text-primary;
 }
-
-.console {
-  background-color: black;
-  width: 100%;
-  height: 70vh;
-}
 </style>
diff --git a/src/views/Operations/ServerPowerOperations/BootSettings.vue b/src/views/Operations/ServerPowerOperations/BootSettings.vue
index 4896286b..ab3c22b9 100644
--- a/src/views/Operations/ServerPowerOperations/BootSettings.vue
+++ b/src/views/Operations/ServerPowerOperations/BootSettings.vue
@@ -1,16 +1,17 @@
 <template>
   <div class="form-background p-3">
+    <label class="semi-bold-16px">{{
+      $t('pageServerPowerOperations.serverBootSettings')
+    }}</label>
     <b-form novalidate @submit.prevent="handleSubmit">
-      <b-form-group
-        :label="
+      <b-form-group label-for="boot-option" class="mb-3 regular-12px">
+        <label class="semi-bold-12px">{{
           $t('pageServerPowerOperations.bootSettings.bootSettingsOverride')
-        "
-        label-for="boot-option"
-        class="mb-3"
-      >
+        }}</label>
         <b-form-select
           id="boot-option"
           v-model="form.bootOption"
+          class="boot-select regular-14px"
           :disabled="bootSourceOptions.length === 0"
           :options="bootSourceOptions"
           @change="onChangeSelect"
@@ -19,30 +20,32 @@
       </b-form-group>
       <b-form-checkbox
         v-model="form.oneTimeBoot"
-        class="mb-4"
+        class="mb-4 regular-12px cb"
         :disabled="form.bootOption === 'None'"
         @change="$v.form.oneTimeBoot.$touch()"
       >
         {{ $t('pageServerPowerOperations.bootSettings.enableOneTimeBoot') }}
       </b-form-checkbox>
-      <b-form-group
-        :label="$t('pageServerPowerOperations.bootSettings.tpmRequiredPolicy')"
-      >
-        <b-form-text id="tpm-required-policy-help-block">
+      <b-form-group>
+        <label class="semi-bold-12px">{{
+          $t('pageServerPowerOperations.bootSettings.tpmRequiredPolicy')
+        }}</label>
+        <label id="tpm-required-policy-help-block" class="regular-12px">
           {{
             $t('pageServerPowerOperations.bootSettings.tpmRequiredPolicyHelper')
           }}
-        </b-form-text>
+        </label>
         <b-form-checkbox
           id="tpm-required-policy"
           v-model="form.tpmPolicyOn"
+          class="regular-12px cb"
           aria-describedby="tpm-required-policy-help-block"
           @change="$v.form.tpmPolicyOn.$touch()"
         >
           {{ $t('global.status.enabled') }}
         </b-form-checkbox>
       </b-form-group>
-      <b-button variant="primary" type="submit" class="mb-3">
+      <b-button variant="primary" size="md" type="submit" class="mb-3">
         {{ $t('global.action.save') }}
       </b-button>
     </b-form>
@@ -130,3 +133,12 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.boot-select {
+  height: 40px;
+  max-width: 270px;
+  border: none;
+  border-radius: 8px;
+  background-image: url('../../../assets/images/icon-chevron.svg');
+}
+</style>
diff --git a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
index 9e030837..f2fb62e2 100644
--- a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
+++ b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
@@ -1,147 +1,192 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid="xxl pt-0 m-0">
     <page-title />
-    <b-row class="mb-4">
-      <b-col md="8" xl="6">
-        <page-section
-          :section-title="$t('pageServerPowerOperations.currentStatus')"
-        >
-          <b-row>
-            <b-col>
-              <dl>
-                <dt>{{ $t('pageServerPowerOperations.serverStatus') }}</dt>
-                <dd
-                  v-if="serverStatus === 'on'"
-                  data-test-id="powerServerOps-text-hostStatus"
-                >
-                  {{ $t('global.status.on') }}
-                </dd>
-                <dd
-                  v-else-if="serverStatus === 'off'"
-                  data-test-id="powerServerOps-text-hostStatus"
-                >
-                  {{ $t('global.status.off') }}
-                </dd>
-                <dd v-else>
-                  {{ $t('global.status.notAvailable') }}
-                </dd>
-              </dl>
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col>
-              <dl>
-                <dt>
-                  {{ $t('pageServerPowerOperations.lastPowerOperation') }}
-                </dt>
-                <dd
-                  v-if="lastPowerOperationTime"
-                  data-test-id="powerServerOps-text-lastPowerOp"
-                >
-                  {{ lastPowerOperationTime | formatDate }}
-                  {{ lastPowerOperationTime | formatTime }}
-                </dd>
-                <dd v-else>--</dd>
-              </dl>
-            </b-col>
-          </b-row>
-        </page-section>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col v-if="hasBootSourceOptions" sm="8" md="6" xl="4">
-        <page-section
-          :section-title="$t('pageServerPowerOperations.serverBootSettings')"
-        >
-          <boot-settings />
-        </page-section>
-      </b-col>
-      <b-col sm="8" md="6" xl="7">
-        <page-section
-          :section-title="$t('pageServerPowerOperations.operations')"
-        >
-          <alert :show="oneTimeBootEnabled" variant="warning">
-            {{ $t('pageServerPowerOperations.oneTimeBootWarning') }}
-          </alert>
-          <template v-if="isOperationInProgress">
-            <alert variant="info">
-              {{ $t('pageServerPowerOperations.operationInProgress') }}
+    <div class="main-container">
+      <b-row class="m-2">
+        <b-col md="8" xl="6">
+          <page-section class="m-2 pt-2 pb-2">
+            <b-row>
+              <b-col>
+                <dl>
+                  <dt class="semi-bold-16px">
+                    {{ $t('pageServerPowerOperations.serverStatus') }}
+                  </dt>
+                  <dd
+                    v-if="serverStatus === 'on'"
+                    style="margin-top: 10px"
+                    class="regular-12px"
+                    data-test-id="powerServerOps-text-hostStatus"
+                  >
+                    <img
+                      style="margin-right: 5px"
+                      src="@/assets/images/status/on.svg"
+                    />
+                    {{ $t('global.status.on_full') }}
+                  </dd>
+                  <dd
+                    v-else-if="serverStatus === 'off'"
+                    style="margin-top: 10px"
+                    class="regular-12px"
+                    data-test-id="powerServerOps-text-hostStatus"
+                  >
+                    <img
+                      style="margin-right: 5px"
+                      src="@/assets/images/status/off.svg"
+                    />
+                    {{ $t('global.status.off_full') }}
+                  </dd>
+                  <dd v-else class="regular-12px">
+                    {{ $t('global.status.notAvailable') }}
+                  </dd>
+                </dl>
+              </b-col>
+            </b-row>
+            <b-row>
+              <b-col>
+                <dl>
+                  <dt class="semi-bold-12px">
+                    {{ $t('pageServerPowerOperations.lastPowerOperation') }}
+                  </dt>
+                  <dd
+                    v-if="lastPowerOperationTime"
+                    class="regular-12px"
+                    data-test-id="powerServerOps-text-lastPowerOp"
+                  >
+                    {{ lastPowerOperationTime | formatDate }}
+                    {{ lastPowerOperationTime | formatTime }}
+                  </dd>
+                  <dd v-else>--</dd>
+                </dl>
+              </b-col>
+            </b-row>
+          </page-section>
+        </b-col>
+      </b-row>
+      <b-row class="m-2">
+        <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>
+            <alert :show="oneTimeBootEnabled" variant="warning">
+              {{ $t('pageServerPowerOperations.oneTimeBootWarning') }}
             </alert>
-          </template>
-          <template v-else-if="serverStatus === 'off'">
-            <b-button
-              variant="primary"
-              data-test-id="serverPowerOperations-button-powerOn"
-              @click="powerOn"
-            >
-              {{ $t('pageServerPowerOperations.powerOn') }}
-            </b-button>
-          </template>
-          <template v-else>
-            <!-- Reboot server options -->
-            <b-form novalidate class="mb-5" @submit.prevent="rebootServer">
-              <b-form-group
-                :label="$t('pageServerPowerOperations.rebootServer')"
+            <template v-if="isOperationInProgress">
+              <alert variant="info">
+                {{ $t('pageServerPowerOperations.operationInProgress') }}
+              </alert>
+            </template>
+            <template v-else-if="serverStatus === 'off'">
+              <popover-with-slot
+                id="popover-powerOn"
+                :button-label="$t('pageServerPowerOperations.powerOn')"
+                :popup-label="$t('pageServerPowerOperations.powerOnServer')"
+                placement="right"
+                :action="powerOn"
               >
-                <b-form-radio
-                  v-model="form.rebootOption"
-                  name="reboot-option"
-                  data-test-id="serverPowerOperations-radio-rebootOrderly"
-                  value="orderly"
+                <b-button
+                  id="popover-powerOn"
+                  ref="button"
+                  size="md"
+                  variant="primary"
                 >
-                  {{ $t('pageServerPowerOperations.orderlyReboot') }}
-                </b-form-radio>
-                <b-form-radio
-                  v-model="form.rebootOption"
-                  name="reboot-option"
-                  data-test-id="serverPowerOperations-radio-rebootImmediate"
-                  value="immediate"
-                >
-                  {{ $t('pageServerPowerOperations.immediateReboot') }}
-                </b-form-radio>
-              </b-form-group>
-              <b-button
-                variant="primary"
-                type="submit"
-                data-test-id="serverPowerOperations-button-reboot"
-              >
-                {{ $t('pageServerPowerOperations.reboot') }}
-              </b-button>
-            </b-form>
-            <!-- Shutdown server options -->
-            <b-form novalidate @submit.prevent="shutdownServer">
-              <b-form-group
-                :label="$t('pageServerPowerOperations.shutdownServer')"
-              >
-                <b-form-radio
-                  v-model="form.shutdownOption"
-                  name="shutdown-option"
-                  data-test-id="serverPowerOperations-radio-shutdownOrderly"
-                  value="orderly"
+                  {{ $t('pageServerPowerOperations.powerOn') }}
+                </b-button>
+              </popover-with-slot>
+            </template>
+            <template v-else>
+              <!-- Reboot server options -->
+              <b-form novalidate class="mb-2">
+                <b-form-group class="regular-12px cb">
+                  <label class="semi-bold-12px">{{
+                    $t('pageServerPowerOperations.rebootServer')
+                  }}</label>
+                  <b-form-radio
+                    v-model="form.rebootOption"
+                    name="reboot-option"
+                    data-test-id="serverPowerOperations-radio-rebootOrderly"
+                    value="orderly"
+                  >
+                    {{ $t('pageServerPowerOperations.orderlyReboot') }}
+                  </b-form-radio>
+                  <b-form-radio
+                    v-model="form.rebootOption"
+                    name="reboot-option"
+                    data-test-id="serverPowerOperations-radio-rebootImmediate"
+                    value="immediate"
+                  >
+                    {{ $t('pageServerPowerOperations.immediateReboot') }}
+                  </b-form-radio>
+                </b-form-group>
+                <popover-with-slot
+                  id="popover-reboot"
+                  :button-label="$t('pageServerPowerOperations.reboot')"
+                  :popup-label="$t('pageServerPowerOperations.rebootServer')"
+                  placement="right"
+                  :action="rebootServer"
                 >
-                  {{ $t('pageServerPowerOperations.orderlyShutdown') }}
-                </b-form-radio>
-                <b-form-radio
-                  v-model="form.shutdownOption"
-                  name="shutdown-option"
-                  data-test-id="serverPowerOperations-radio-shutdownImmediate"
-                  value="immediate"
+                  <b-button
+                    id="popover-reboot"
+                    ref="button"
+                    size="md"
+                    variant="primary"
+                  >
+                    {{ $t('pageServerPowerOperations.reboot') }}
+                  </b-button>
+                </popover-with-slot>
+              </b-form>
+              <!-- Shutdown server options -->
+              <b-form>
+                <b-form-group class="regular-12px cb">
+                  <label class="semi-bold-12px">{{
+                    $t('pageServerPowerOperations.shutdownServer')
+                  }}</label>
+                  <b-form-radio
+                    v-model="form.shutdownOption"
+                    name="shutdown-option"
+                    data-test-id="serverPowerOperations-radio-shutdownOrderly"
+                    value="orderly"
+                  >
+                    {{ $t('pageServerPowerOperations.orderlyShutdown') }}
+                  </b-form-radio>
+                  <b-form-radio
+                    v-model="form.shutdownOption"
+                    name="shutdown-option"
+                    data-test-id="serverPowerOperations-radio-shutdownImmediate"
+                    value="immediate"
+                  >
+                    {{ $t('pageServerPowerOperations.immediateShutdown') }}
+                  </b-form-radio>
+                </b-form-group>
+                <popover-with-slot
+                  id="popover-shutDown"
+                  :button-label="$t('pageServerPowerOperations.shutDown')"
+                  :popup-label="$t('pageServerPowerOperations.shutdownServer')"
+                  placement="right"
+                  :action="shutdownServer"
                 >
-                  {{ $t('pageServerPowerOperations.immediateShutdown') }}
-                </b-form-radio>
-              </b-form-group>
-              <b-button
-                variant="primary"
-                type="submit"
-                data-test-id="serverPowerOperations-button-shutDown"
-              >
-                {{ $t('pageServerPowerOperations.shutDown') }}
-              </b-button>
-            </b-form>
-          </template>
-        </page-section>
-      </b-col>
-    </b-row>
+                  <b-button
+                    id="popover-shutDown"
+                    ref="button"
+                    size="md"
+                    variant="secondary"
+                  >
+                    {{ $t('pageServerPowerOperations.shutDown') }}
+                  </b-button>
+                </popover-with-slot>
+              </b-form>
+            </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>
+        </b-col>
+      </b-row>
+    </div>
   </b-container>
 </template>
 
@@ -152,10 +197,17 @@ import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import BootSettings from './BootSettings';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import Alert from '@/components/Global/Alert';
+import PopoverWithSlot from '@/components/Global/SilaComponents/PopoverWithSlot';
 
 export default {
   name: 'ServerPowerOperations',
-  components: { PageTitle, PageSection, BootSettings, Alert },
+  components: {
+    PageTitle,
+    PageSection,
+    BootSettings,
+    Alert,
+    PopoverWithSlot,
+  },
   mixins: [BVToastMixin, LoadingBarMixin],
   beforeRouteLeave(to, from, next) {
     this.hideLoader();
@@ -207,52 +259,18 @@ export default {
       this.$store.dispatch('controls/serverPowerOn');
     },
     rebootServer() {
-      const modalMessage = this.$t(
-        'pageServerPowerOperations.modal.confirmRebootMessage'
-      );
-      const modalOptions = {
-        title: this.$t('pageServerPowerOperations.modal.confirmRebootTitle'),
-        okTitle: this.$t('global.action.confirm'),
-        cancelTitle: this.$t('global.action.cancel'),
-      };
-
       if (this.form.rebootOption === 'orderly') {
-        this.$bvModal
-          .msgBoxConfirm(modalMessage, modalOptions)
-          .then((confirmed) => {
-            if (confirmed) this.$store.dispatch('controls/serverSoftReboot');
-          });
+        this.$store.dispatch('controls/serverSoftReboot');
       } else if (this.form.rebootOption === 'immediate') {
-        this.$bvModal
-          .msgBoxConfirm(modalMessage, modalOptions)
-          .then((confirmed) => {
-            if (confirmed) this.$store.dispatch('controls/serverHardReboot');
-          });
+        this.$store.dispatch('controls/serverHardReboot');
       }
     },
     shutdownServer() {
-      const modalMessage = this.$t(
-        'pageServerPowerOperations.modal.confirmShutdownMessage'
-      );
-      const modalOptions = {
-        title: this.$t('pageServerPowerOperations.modal.confirmShutdownTitle'),
-        okTitle: this.$t('global.action.confirm'),
-        cancelTitle: this.$t('global.action.cancel'),
-      };
-
       if (this.form.shutdownOption === 'orderly') {
-        this.$bvModal
-          .msgBoxConfirm(modalMessage, modalOptions)
-          .then((confirmed) => {
-            if (confirmed) this.$store.dispatch('controls/serverSoftPowerOff');
-          });
+        this.$store.dispatch('controls/serverSoftPowerOff');
       }
       if (this.form.shutdownOption === 'immediate') {
-        this.$bvModal
-          .msgBoxConfirm(modalMessage, modalOptions)
-          .then((confirmed) => {
-            if (confirmed) this.$store.dispatch('controls/serverHardPowerOff');
-          });
+        this.$store.dispatch('controls/serverHardPowerOff');
       }
     },
   },
diff --git a/src/views/PowerSupplies/Specification/PowerStaticPage.vue b/src/views/PowerSupplies/Specification/PowerStaticPage.vue
index 8ff1aa1b..3511b1f7 100644
--- a/src/views/PowerSupplies/Specification/PowerStaticPage.vue
+++ b/src/views/PowerSupplies/Specification/PowerStaticPage.vue
@@ -32,10 +32,7 @@
                 </span>
               </b-col>
               <b-col cols="1">
-                <img
-                  src="@/assets/images/fans-page/working.svg"
-                  class="icon-chevron"
-                />
+                <img src="@/assets/images/status/on.svg" class="icon-chevron" />
               </b-col>
             </b-row>
             <b-row v-else>
diff --git a/src/views/Processors/Specification/AcceleratorSpecificationTable.vue b/src/views/Processors/Specification/AcceleratorSpecificationTable.vue
index 1be41ac2..c13e13ff 100644
--- a/src/views/Processors/Specification/AcceleratorSpecificationTable.vue
+++ b/src/views/Processors/Specification/AcceleratorSpecificationTable.vue
@@ -18,16 +18,13 @@
     </template>
     <template #cell(status)="{ value }">
       <div v-if="value" class="fans-table-col-first__cell">
-        <img class="status__img" src="@/assets/images/fans-page/working.svg" />
+        <img class="status__img" src="@/assets/images/status/on.svg" />
         <span>
           {{ $t('global.status.inWork') }}
         </span>
       </div>
       <div v-else class="fans-table-col-first__cell">
-        <img
-          class="status__img"
-          src="@/assets/images/fans-page/notWorking.svg"
-        />
+        <img class="status__img" src="@/assets/images/status/off.svg" />
         <span>
           {{ $t('global.status.outWorking') }}
         </span>
diff --git a/src/views/Processors/Specification/ProcessorsSpecificationTable.vue b/src/views/Processors/Specification/ProcessorsSpecificationTable.vue
index 1d026f1b..07a4512d 100644
--- a/src/views/Processors/Specification/ProcessorsSpecificationTable.vue
+++ b/src/views/Processors/Specification/ProcessorsSpecificationTable.vue
@@ -25,16 +25,13 @@
     </template>
     <template #cell(status)="{ value }">
       <div v-if="value" class="fans-table-col-first__cell">
-        <img class="status__img" src="@/assets/images/fans-page/working.svg" />
+        <img class="status__img" src="@/assets/images/status/on.svg" />
         <span>
           {{ $t('global.status.inWork') }}
         </span>
       </div>
       <div v-else class="fans-table-col-first__cell">
-        <img
-          class="status__img"
-          src="@/assets/images/fans-page/notWorking.svg"
-        />
+        <img class="status__img" src="@/assets/images/status/off.svg" />
         <span>
           {{ $t('global.status.outWorking') }}
         </span>
diff --git a/src/views/SILA/EventLogs/EventLogs.vue b/src/views/SILA/EventLogs/EventLogs.vue
index 36ec9802..aca17ac0 100644
--- a/src/views/SILA/EventLogs/EventLogs.vue
+++ b/src/views/SILA/EventLogs/EventLogs.vue
@@ -73,8 +73,10 @@
         description="pageEventLogs.clearLogs"
         popup="pageEventLogs.clearLogs_popup"
         button="pageEventLogs.clear"
+        placement="bottom"
         :isclear="true"
         class="clear-popover"
+        :action="deleteAllLogs"
       />
     </div>
     <table-toolbar
@@ -85,8 +87,9 @@
     >
       <template #toolbar-buttons>
         <b-button
-          variant="primary"
-          class="table-toolbar__resolved-button"
+          size="md"
+          variant="secondary"
+          style="margin-right: 1rem"
           @click="resolveLogs"
         >
           <img
@@ -96,8 +99,9 @@
           {{ $t('pageEventLogs.event_resolve') }}
         </b-button>
         <b-button
+          size="md"
           variant="primary"
-          class="table-toolbar__unresolved-button"
+          style="margin-right: 1rem"
           @click="unresolveLogs"
         >
           <img
@@ -106,15 +110,21 @@
           />
           {{ $t('pageEventLogs.archive') }}
         </b-button>
+        <table-toolbar-export
+          :data="batchExportData"
+          style="margin-right: 1rem"
+          :file-name="exportFileNameByDate()"
+        />
       </template>
     </table-toolbar>
-    <div id="event-logs-table-wrapper">
+    <div id="logs-table-wrapper">
       <b-table
-        id="event-logs-table"
+        id="logs-table"
         ref="table"
         responsive="md"
-        class="event-logs-table"
+        class="logs-table"
         selectable
+        :busy="isBusy"
         no-select-on-click
         sort-icon-left
         :sticky-header="stickyHeader"
@@ -122,6 +132,8 @@
         no-sort-reset
         :sort-desc="sortDesc"
         sort-by="id"
+        :current-page="currentPage"
+        :per-page="perPage"
         :fields="fields"
         :items="filteredLogs"
         :sort-compare="onSortCompare"
@@ -153,42 +165,26 @@
         </template>
         <template #cell(description)="data">
           <b-row class="semi-bold-16px tretiatry">
-            {{ data.item.description.name }}
+            {{ filteredLogs[data.index].name }}
           </b-row>
           <b-row
             class="regular-12px tretiatry pointer"
             @click="toggleRowDetails(data)"
           >
-            {{ data.item.description.description }}</b-row
-          >
-        </template>
-        <template #row-details="{ index }">
-          <b-container fluid>
-            <b-col class="mt-1 mb-2 regular-12px tretiatry">
-              <span class="row-details">
-                {{
-                  `Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.
-                   Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.`
-                }}
-                {{ $t(filteredLogs[index].description.description) }}
-              </span>
-            </b-col>
-          </b-container>
+            {{ data.value }}
+          </b-row>
         </template>
         <!-- Severity column -->
         <template #cell(severity)="{ value }">
-          <span v-if="value === 'Критические'" class="bold-12px__caps errors">{{
-            value
-          }}</span>
           <span
-            v-else-if="value === 'Предупреждения'"
-            class="bold-12px__caps warning"
+            :class="`indicators-${value}`"
+            class="bold-12px__caps"
+            style="text-overflow: ellipsis; white-space: nowrap"
+          >
+            {{ value }}</span
           >
-            {{ value }}
-          </span>
-          <span v-else class="bold-12px__caps information">{{ value }}</span>
         </template>
-        <!-- Date column -->
+        <!-- Source column -->
         <template #cell(source)="{ value }">
           <b-row v-if="value === 'Процессоры'">
             <img
@@ -211,18 +207,26 @@
             />
             <span>{{ value }}</span>
           </b-row>
-          <b-row v-else>
+          <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 class="regular-12px quaternary"> {{ value }} </span>
+          <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 -->
@@ -246,25 +250,50 @@
             >
           </b-row>
         </template>
+        <template #row-details="{ item }">
+          <b-container
+            fluid
+            style="border-bottom: 1px solid rgba(26, 62, 91, 0.2)"
+          >
+            <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 class="pagination-content">
-        <span class="semi-bold-16px"> Страница </span>
-        <img class="sourse__img" src="@/assets/images/arrow-left.svg" />
-        <span class="semi-bold-16px page-input"> 1 </span>
-        <span class="semi-bold-16px"> из </span>
-        <span class="semi-bold-16px"> 123 </span>
-        <img class="sourse__img" src="@/assets/images/arrow-right.svg" />
+        <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="itemsPerPage"
+          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>
@@ -272,19 +301,28 @@
 
 <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 BVToastMixin from '@/components/Mixins/BVToastMixin';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
-import TableSortMixin from '@/components/Mixins/TableSortMixin';
 import TableRowExpandMixin, {
   expandRowLabel,
 } from '@/components/Mixins/TableRowExpandMixin';
@@ -297,6 +335,8 @@ export default {
     PageTitle,
     Popover,
     TableToolbar,
+    TableToolbarExport,
+    IconExport,
   },
   mixins: [
     BVTableSelectableMixin,
@@ -307,6 +347,7 @@ export default {
     TableSortMixin,
     TableRowExpandMixin,
     SearchFilterMixin,
+    BVPaginationMixin,
   ],
   beforeRouteLeave(to, from, next) {
     // Hide loader if the user navigates to another page
@@ -316,257 +357,57 @@ export default {
   },
   data() {
     return {
+      isBusy: true,
+      perPage,
+      itemsPerPageOptions,
+      currentPage,
       sortDesc: true,
-      stickyHeader: 'calc(100vh - 243px)',
-      itemsPerPage: 50,
-      itemsPerPageOptions: [
-        {
-          value: 10,
-          text: '10',
-        },
-        {
-          value: 50,
-          text: '50',
-        },
-        {
-          value: 100,
-          text: '100',
-        },
-      ],
+      stickyHeader: 'calc(100vh - 307px)',
       fields: [
         {
           key: 'checkbox',
           sortable: false,
-          thClass: ' event-logs-table__th',
-          class: 'event-logs-table__id',
-          tdClass: 'event-logs-table__td',
+          thClass: ' logs-table__th',
+          tdClass: 'logs-table__td',
         },
         {
           key: 'id',
           label: this.$t('pageEventLogs.table.id'),
           sortable: true,
-          thClass: 'bold-12px__caps event-logs-table__th',
-          tdClass: 'semi-bold-12px event-logs-table__td',
+          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 event-logs-table__th',
-          tdClass: 'event-logs-table__td',
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td',
         },
         {
           key: 'severity',
           label: this.$t('pageEventLogs.table.severity'),
-          thClass: 'bold-12px__caps event-logs-table__th',
-          tdClass: 'event-logs-table__td',
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td',
         },
         {
           key: 'source',
           label: this.$t('pageEventLogs.table.source'),
-          thClass: 'bold-12px__caps event-logs-table__th',
-          tdClass: 'semi-bold-12px__caps tretiatry event-logs-table__td',
+          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 event-logs-table__th event-logs-table__th__date`,
-          tdClass: 'event-logs-table__td',
+          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 event-logs-table__th',
-          tdClass: 'event-logs-table__td',
-        },
-      ],
-      allLogs: [
-        {
-          checkbox: false,
-          id: 1,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-            full_description: '',
-          },
-          severity: 'Критические',
-          source: 'Вентиляторы',
-          date: '23.11.2021 в 13.36',
-          status: true,
-        },
-        {
-          checkbox: false,
-          id: 2,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Информационное',
-          source: 'Модули памяти',
-          date: '23.11.2021 в 13.36',
-          status: false,
-        },
-        {
-          checkbox: false,
-          id: 3,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Критические',
-          source: 'Процессоры',
-          date: '23.11.2021 в 13.36',
-          status: true,
-        },
-        {
-          checkbox: false,
-          id: 4,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Предупреждения',
-          source: 'RAID-контролеры',
-          date: '23.11.2021 в 13.36',
-          status: 'expandRow',
-        },
-        {
-          checkbox: false,
-          id: 5,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Критические',
-          source: 'Процессоры',
-          date: '23.11.2021 в 13.36',
-          status: true,
-        },
-        {
-          checkbox: false,
-          id: 6,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Предупреждения',
-          source: 'RAID-контролеры',
-          date: '23.11.2021 в 13.36',
-          status: false,
-        },
-        {
-          checkbox: false,
-          id: 7,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Информационное',
-          source: 'Модули памяти',
-          date: '23.11.2021 в 13.36',
-          status: false,
-        },
-        {
-          checkbox: false,
-          id: 8,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Критические',
-          source: 'Вентиляторы',
-          date: '23.11.2021 в 13.36',
-          status: true,
-        },
-        {
-          checkbox: false,
-          id: 9,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Информационное',
-          source: 'Модули памяти',
-          date: '23.11.2021 в 13.36',
-          status: false,
-        },
-        {
-          checkbox: false,
-          id: 10,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Критические',
-          source: 'Процессоры',
-          date: '23.11.2021 в 13.36',
-          status: true,
-        },
-        {
-          checkbox: false,
-          id: 11,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Предупреждения',
-          source: 'RAID-контролеры',
-          date: '23.11.2021 в 13.36',
-          status: 'expandRow',
-        },
-        {
-          checkbox: false,
-          id: 12,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Критические',
-          source: 'Процессоры',
-          date: '23.11.2021 в 13.36',
-          status: true,
-        },
-        {
-          checkbox: false,
-          id: 13,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Предупреждения',
-          source: 'RAID-контролеры',
-          date: '23.11.2021 в 13.36',
-          status: false,
-        },
-        {
-          checkbox: false,
-          id: 14,
-          description: {
-            name: 'Имя источника событий',
-            description: 'Краткое описание ошибки или сообщени....',
-          },
-          severity: 'Информационное',
-          source: 'Модули памяти',
-          date: '23.11.2021 в 13.36',
-          status: false,
-        },
-      ],
-      tableFilters: [
-        {
-          key: 'severity',
-          label: this.$t('pageEventLogs.table.severity'),
-          values: ['Информационное', 'Предупреждения', 'Критические'],
-        },
-        {
-          key: 'filterByStatus',
-          label: this.$t('pageEventLogs.table.status'),
-          values: ['Resolved', 'Unresolved'],
-        },
-        {
-          key: 'status',
-          label: this.$t('pageEventLogs.table.status'),
-          values: [false, true],
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td',
         },
       ],
       eventFilter: 1,
@@ -587,13 +428,17 @@ export default {
           text: 'Информационное',
         },
         {
-          value: 'warning',
+          value: 'Warning',
           text: 'Предупреждения',
         },
         {
           value: 'critical',
           text: 'Критические',
         },
+        {
+          value: 'ok',
+          text: 'ok',
+        },
       ],
       eventSourseFilter: 1,
       eventSourseFilters: [
@@ -636,23 +481,23 @@ export default {
         ? 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'),
-    //         },
-    //       ],
-    //     };
-    //   });
-    // },
+    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'));
     },
@@ -667,15 +512,15 @@ export default {
       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;
-    // });
+    this.startLoader();
+    this.$store.dispatch('eventLog/getEventLogData').finally(() => {
+      this.endLoader();
+      this.isBusy = false;
+    });
   },
   methods: {
     redirectFans() {
@@ -693,21 +538,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
@@ -738,19 +572,19 @@ export default {
         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]);
-    //       });
-    //   }
-    // },
+    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);
@@ -838,17 +672,6 @@ export default {
 };
 </script>
 <style lang="scss">
-#event-logs-table {
-  margin: 0 !important;
-}
-
-.event-logs-table__th {
-  background-color: #f8f8f8 !important;
-  border-bottom: 1px solid $faint-secondary-primary-20 !important;
-  border-top: 1px solid $faint-secondary-primary-20 !important;
-  color: $text-primary !important;
-}
-
 .event-logs-section .table.b-table > thead > tr > [aria-sort='ascending'] {
   background-image: url('../../../assets/images/event-logs/sort-icon-rotate.svg');
 }
@@ -859,22 +682,11 @@ export default {
 }
 
 .event-logs-section .b-table-sort-icon-left {
-  background-position: left 57% center !important;
   background-size: 15px !important;
-  padding-left: 0.75rem !important;
-  padding-right: 2rem !important;
-  &.event-logs-table__th__date {
-    background-position: left 33% center !important;
-  }
 }
 
-.event-logs-table__id {
-  padding-left: 38px !important;
-}
-
-.event-logs-table__td {
-  border-bottom: 1px solid $faint-secondary-primary-10 !important;
-  height: 64px;
+.b-table-details > td {
+  padding: 0px !important;
 }
 </style>
 <style lang="scss" scoped>
@@ -962,69 +774,14 @@ $toolbar-height: 64px;
   width: 236px;
 }
 
-.bold-12px__caps {
-  color: $text-primary !important;
-}
-
 .custom-checkbox {
   background-color: none;
 }
 
-#event-logs-table-wrapper div {
-  overflow-y: overlay;
-  &::-webkit-scrollbar {
-    position: absolute;
-    width: 10px;
-  }
-  &::-webkit-scrollbar-thumb {
-    border: 4px solid transparent;
-    border-top: 52px solid transparent;
-    background: $faint-secondary-primary-20;
-    border-radius: 16px;
-    background-clip: content-box;
-  }
-}
-
-.table-toolbar__resolved-button {
-  width: 226px;
-  height: 36px;
-  background-color: $faint-secondary-primary-5;
-  border-radius: 8px;
-  color: $red-brand-primary;
-  margin-right: 1rem;
-  justify-content: center;
-}
-
-.table-toolbar__unresolved-button {
-  width: 226px;
-  height: 36px;
-  background-color: $red-brand-primary;
-  border-radius: 8px;
-  color: $white;
-  margin-right: 2rem;
-  justify-content: center;
-}
-
 .sourse__img {
   padding-right: 8px;
 }
 
-.errors {
-  color: $indicators-errors !important;
-}
-
-.warning {
-  color: $indicators-warning !important;
-}
-
-.information {
-  color: $indicators-complementary !important;
-}
-
-.resolved {
-  color: $indicators-succes;
-}
-
 .not-resolved {
   color: $text-quaternary;
 }
@@ -1065,11 +822,12 @@ $toolbar-height: 64px;
 
 .pagination-items-limit {
   margin-left: auto;
-  width: 400px;
   display: flex;
+  gap: 7px;
   flex-direction: row;
   align-items: center;
   justify-content: space-evenly;
+  margin-right: 1rem;
 }
 
 .items-per-page {
diff --git a/src/views/SILA/PciDevices/PciDevicesPage.vue b/src/views/SILA/PciDevices/PciDevicesPage.vue
index 09734a4a..e25e0606 100644
--- a/src/views/SILA/PciDevices/PciDevicesPage.vue
+++ b/src/views/SILA/PciDevices/PciDevicesPage.vue
@@ -17,10 +17,7 @@
           <template #cell(status)>
             <b-row>
               <b-col>
-                <img
-                  src="@/assets/images/fans-page/working.svg"
-                  class="icon-chevron"
-                />
+                <img src="@/assets/images/status/on.svg" class="icon-chevron" />
                 <span>
                   {{ 'Работоспособен' }}
                 </span>
diff --git a/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue b/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue
index db2407d5..057c120b 100644
--- a/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue
+++ b/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue
@@ -25,10 +25,7 @@
           <template #cell(value)="{ index, value }">
             <b-row v-if="index === 0">
               <b-col>
-                <img
-                  src="@/assets/images/fans-page/working.svg"
-                  class="icon-chevron"
-                />
+                <img src="@/assets/images/status/on.svg" class="icon-chevron" />
                 <span>
                   {{ 'Работоспособен' }}
                 </span>
@@ -76,7 +73,7 @@
               <b-row v-if="index === 0">
                 <b-col>
                   <img
-                    src="@/assets/images/fans-page/working.svg"
+                    src="@/assets/images/status/on.svg"
                     class="icon-chevron"
                   />
                   <span>
diff --git a/src/views/Settings/DateTime/DateTime.vue b/src/views/Settings/DateTime/DateTime.vue
index f5e063d1..7ab3ec0e 100644
--- a/src/views/Settings/DateTime/DateTime.vue
+++ b/src/views/Settings/DateTime/DateTime.vue
@@ -1,57 +1,67 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid="xxl" class="pt-0 m-0">
     <page-title />
-    <b-row>
-      <b-col md="8" xl="6">
-        <alert variant="info" class="mb-4">
-          <span>
+    <b-row class="m-4">
+      <b-col md="8" xl="12">
+        <alert variant="info">
+          <span class="regular-12px">
             {{ $t('pageDateTime.alert.message') }}
-            <b-link to="/profile-settings">
+            <b-link class="semi-bold-12px" to="/profile-settings">
               {{ $t('pageDateTime.alert.link') }}</b-link
             >
           </span>
         </alert>
       </b-col>
     </b-row>
-    <page-section>
+    <page-section class="m-4">
       <b-row>
-        <b-col lg="3">
+        <b-col sm="6" lg="5" xl="4" xxl="3">
           <dl>
-            <dt>{{ $t('pageDateTime.form.date') }}</dt>
-            <dd v-if="bmcTime">{{ bmcTime | formatDate }}</dd>
+            <dt class="semi-bold-12px">{{ $t('pageDateTime.form.date') }}</dt>
+            <dd v-if="bmcTime" class="regular-12px">
+              {{ bmcTime | formatDate }}
+            </dd>
             <dd v-else>--</dd>
           </dl>
         </b-col>
-        <b-col lg="3">
+        <b-col sm="6" lg="5" xl="4" xxl="3">
           <dl>
-            <dt>{{ $t('pageDateTime.form.time.label') }}</dt>
-            <dd v-if="bmcTime">{{ bmcTime | formatTime }}</dd>
+            <dt class="semi-bold-12px">
+              {{ $t('pageDateTime.form.time.label') }}
+            </dt>
+            <dd v-if="bmcTime" class="regular-12px">
+              {{ bmcTime | formatTime }}
+            </dd>
             <dd v-else>--</dd>
           </dl>
         </b-col>
       </b-row>
     </page-section>
-    <page-section :section-title="$t('pageDateTime.configureSettings')">
+    <page-section class="m-4">
+      <label class="semi-bold-16px">{{
+        $t('pageDateTime.configureSettings')
+      }}</label>
       <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('pageDateTime.form.manual') }}
+            {{ $t('SystemDescription.UseServerDatettime') }}
           </b-form-radio>
           <b-row class="mt-3 ml-3">
-            <b-col sm="6" lg="4" xl="3">
+            <b-col sm="7" lg="5" xl="5" xxl="3">
               <b-form-group
                 :label="$t('pageDateTime.form.date')"
                 label-for="input-manual-date"
               >
-                <b-form-text id="date-format-help">YYYY-MM-DD</b-form-text>
+                <span class="regular-12px">YYYY-MM-DD</span>
                 <b-input-group>
                   <b-form-input
                     id="input-manual-date"
@@ -95,12 +105,12 @@
                 </b-input-group>
               </b-form-group>
             </b-col>
-            <b-col sm="6" lg="4" xl="3">
+            <b-col sm="7" lg="5" xl="5" xxl="3">
               <b-form-group
                 :label="$t('pageDateTime.form.time.timezone', { timezone })"
                 label-for="input-manual-time"
               >
-                <b-form-text id="time-format-help">HH:MM</b-form-text>
+                <span class="regular-12px">HH:MM</span>
                 <b-input-group>
                   <b-form-input
                     id="input-manual-time"
@@ -124,10 +134,11 @@
           </b-row>
           <b-form-radio
             v-model="form.configurationSelected"
+            class="system-control__radio regular-12px"
             value="ntp"
             data-test-id="dateTime-radio-configureNTP"
           >
-            NTP
+            {{ $t('SystemDescription.GetNtpFromServer') }}
           </b-form-radio>
           <b-row class="mt-3 ml-3">
             <b-col sm="6" lg="4" xl="3">
@@ -184,6 +195,7 @@
             </b-col>
           </b-row>
           <b-button
+            size="md"
             variant="primary"
             type="submit"
             data-test-id="dateTime-button-saveSettings"
@@ -415,3 +427,13 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.form-control {
+  height: 40px;
+  max-width: 270px;
+}
+
+.input-group {
+  max-width: 270px;
+}
+</style>
diff --git a/src/views/SystemDescription/Info/InventoryTableSystem.vue b/src/views/SystemDescription/Info/InventoryTableSystem.vue
index f903a46b..eef0d871 100644
--- a/src/views/SystemDescription/Info/InventoryTableSystem.vue
+++ b/src/views/SystemDescription/Info/InventoryTableSystem.vue
@@ -4,7 +4,7 @@
       responsive="md"
       show-empty
       class="bootstrap-rounded-table"
-      :items="systems"
+      :items="items"
       :fields="fields"
       :empty-text="$t('global.table.emptyMessage')"
     >
@@ -15,14 +15,14 @@
 <script>
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import PageSection from '@/components/Global/PageSection';
-
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import TableRowExpandMixin, {
   expandRowLabel,
 } from '@/components/Mixins/TableRowExpandMixin';
 
 export default {
   components: { PageSection },
-  mixins: [BVToastMixin, TableRowExpandMixin],
+  mixins: [BVToastMixin, TableRowExpandMixin, LoadingBarMixin],
   data() {
     return {
       fields: [
@@ -45,35 +45,42 @@ export default {
         },
       ],
       expandRowLabel: expandRowLabel,
-      systems: [
+      items: null,
+    };
+  },
+  computed: {
+    systems() {
+      return this.$store.getters['system/systems'];
+    },
+  },
+  watch: {
+    systems() {
+      this.items = [
         {
-          param: 'UUID сервера',
-          value: '17583',
+          param: 'id',
+          value: this.id,
         },
-        { param: 'Модель', value: '1.214.248 beta' },
-        { param: 'Производитель', value: 'Asus' },
-        { param: 'Операционная система', value: 'Linux' },
-        { param: 'Серийный номер', value: '741852963335' },
+        { param: 'Модель', value: this.systems[0].model },
+        { param: 'Производитель', value: '' },
+        { param: 'Операционная система', value: '' },
+        { param: 'Серийный номер', value: this.systems[0].serialNumber },
         {
           param: 'Свободное место на Flash-накопителе',
           value: '1 024 000 Мб',
         },
-      ],
-    };
+      ];
+    },
   },
   created() {
     this.$store.dispatch('system/getSystem').finally(() => {
       // Emit initial data fetch complete to parent component
       this.$root.$emit('hardware-status-system-complete');
-      this.isBusy = false;
     });
-  },
-  methods: {
-    toggleIdentifyLedSwitch(state) {
-      this.$store
-        .dispatch('system/changeIdentifyLedState', state)
-        .catch(({ message }) => this.errorToast(message));
-    },
+    this.startLoader();
+    const systemTablePromise = new Promise((resolve) => {
+      this.$root.$on('hardware-status-system-complete', () => resolve());
+    });
+    Promise.all([systemTablePromise]).finally(() => this.endLoader());
   },
 };
 </script>
diff --git a/src/views/SystemDescription/Info/SystemDescription.vue b/src/views/SystemDescription/Info/SystemDescription.vue
index 558c70ef..b5cde965 100644
--- a/src/views/SystemDescription/Info/SystemDescription.vue
+++ b/src/views/SystemDescription/Info/SystemDescription.vue
@@ -6,87 +6,61 @@
     <page-title />
     <!-- System table -->
     <div class="main-container">
-      <div class="page-collapse-decorator">
-        <b-button
-          v-b-toggle.toggle-collapse_1
-          variant="link"
-          class="collapse-button semi-bold-16px"
-        >
-          {{ $t('SystemDescription.title.ServerConfig') }}
-          <component :is="iconChevronUp" class="icon-expand" />
-        </b-button>
-        <b-collapse id="toggle-collapse_1" class="nav-item__nav">
-          <table-system ref="system" />
-          <!-- Notes Administration -->
-          <section class="notes-section">
-            <div class="semi-bold-12px textarea-description">
-              <span>{{ $t('SystemDescription.title.Notes') }}</span>
-            </div>
-            <div class="textarea-container">
-              <div class="buttons-container">
-                <button class="notes-button">
-                  <img
-                    src="@/assets/images/textarea-buttons/button-icon-bold.svg"
-                  />
-                </button>
-                <button class="notes-button">
-                  <img
-                    src="@/assets/images/textarea-buttons/button-icon-cursive.svg"
-                  />
-                </button>
-                <button class="notes-button">
-                  <img
-                    src="@/assets/images/textarea-buttons/button-icon-underline.svg"
-                  />
-                </button>
-                <button class="notes-button">
-                  <img
-                    src="@/assets/images/textarea-buttons/button-icon-crossline.svg"
-                  />
-                </button>
-                <button class="notes-button">
-                  <img
-                    src="@/assets/images/textarea-buttons/button-icon-link.svg"
-                  />
-                </button>
-                <div class="line"></div>
-                <button class="notes-button">
-                  <img
-                    src="@/assets/images/textarea-buttons/button-icon-list.svg"
-                  />
-                </button>
-                <button class="notes-button">
-                  <img
-                    src="@/assets/images/textarea-buttons/button-icon-number-list.svg"
-                  />
-                </button>
-              </div>
-              <textarea
-                id=""
-                name="area"
-                placeholder="Тут будет текст который ввел администратор и работать в качестве блокнота"
-                cols="30"
-                rows="10"
-                class="notes-textarea"
-              ></textarea>
-            </div>
-          </section>
-        </b-collapse>
-      </div>
-      <!-- Control -->
-      <div class="page-collapse-decorator">
-        <b-button
-          v-b-toggle.toggle-collapse_2
-          variant="link"
-          class="collapse-button semi-bold-16px"
-        >
-          {{ $t('SystemDescription.title.Control') }}
-          <component :is="iconChevronUp" class="icon-expand" />
-        </b-button>
-        <b-collapse id="toggle-collapse_2" class="nav-item__nav">
-          <control-system />
-        </b-collapse>
-      </div>
+      <table-system />
+      <!-- Notes Administration -->
+      <section class="notes-section">
+        <div class="semi-bold-12px textarea-description">
+          <span>{{ $t('SystemDescription.title.Notes') }}</span>
+        </div>
+        <div class="textarea-container">
+          <div class="buttons-container">
+            <button class="notes-button">
+              <img
+                src="@/assets/images/textarea-buttons/button-icon-bold.svg"
+              />
+            </button>
+            <button class="notes-button">
+              <img
+                src="@/assets/images/textarea-buttons/button-icon-cursive.svg"
+              />
+            </button>
+            <button class="notes-button">
+              <img
+                src="@/assets/images/textarea-buttons/button-icon-underline.svg"
+              />
+            </button>
+            <button class="notes-button">
+              <img
+                src="@/assets/images/textarea-buttons/button-icon-crossline.svg"
+              />
+            </button>
+            <button class="notes-button">
+              <img
+                src="@/assets/images/textarea-buttons/button-icon-link.svg"
+              />
+            </button>
+            <div class="line"></div>
+            <button class="notes-button">
+              <img
+                src="@/assets/images/textarea-buttons/button-icon-list.svg"
+              />
+            </button>
+            <button class="notes-button">
+              <img
+                src="@/assets/images/textarea-buttons/button-icon-number-list.svg"
+              />
+            </button>
+          </div>
+          <textarea
+            id=""
+            name="area"
+            placeholder="Тут будет текст который ввел администратор и работать в качестве блокнота"
+            cols="30"
+            rows="10"
+            class="notes-textarea"
+          ></textarea>
+        </div>
+      </section>
     </div>
   </b-container>
 </template>
@@ -94,13 +68,11 @@
 <script>
 import PageTitle from '@/components/Global/PageTitle';
 import TableSystem from './InventoryTableSystem';
-import ControlSystem from '@/components/Global/SilaComponents/InventoryControlSystem';
 import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
 
 export default {
   components: {
     PageTitle,
-    ControlSystem,
     TableSystem,
   },
   data() {
-- 
cgit v1.2.3