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

54 files changed, 1384 insertions, 2289 deletions

diff --git a/public/favicon.ico b/public/favicon.ico
index fd9df18d..c2870480 100644
--- a/public/favicon.ico
+++ b/public/favicon.ico
diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss
index 42e4a848..906f3717 100644
--- a/src/assets/styles/bmc/custom/_base.scss
+++ b/src/assets/styles/bmc/custom/_base.scss
@@ -4,7 +4,7 @@ body {
 
 .scroll-container {
   overflow-y: overlay;
-  height: calc(100vh - 95px);
+  height: calc(100vh - #{$header-height});
   &::-webkit-scrollbar {
     margin-top: $header-height;
     position: absolute;
@@ -19,6 +19,17 @@ body {
   }
 }
 
+@-moz-document url-prefix() {
+  #logs-table-wrapper div,
+  #table-event-logs div,
+  .scroll-container,
+  .nav-container {
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: $faint-secondary-primary-20 transparent;
+}
+}
+
 .pointer {
   cursor: pointer;
 }
@@ -156,6 +167,10 @@ h6,
   color: $text-primary;
 }
 
+.modal-body,
+.page-network dd,
+.page-inventory dd,
+#date-time .custom-radio,
 .regular-14px {
   font-family: 'Inter', sans-serif;
   font-size: 14px;
@@ -167,7 +182,18 @@ h6,
   color: $text-secondary;
 }
 
+.page-network dt,
+.page-inventory dt,
+.semi-bold-14px {
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  color: $text-primary;
+}
 
+#date-time dd,
 .regular-16px {
   font-family: 'Inter', sans-serif;
   font-size: 16px;
@@ -178,7 +204,7 @@ h6,
   text-align: left;
 }
 
-
+#date-time dt,
 .semi-bold-16px {
   font-family: 'Inter', sans-serif;
   font-size: 16px;
@@ -221,14 +247,15 @@ h6,
   color: $text-secondary;
 }
 
+h2, .h2,
+.modal-title,
 .semi-bold-20px {
   font-family: 'Inter', sans-serif;
-  font-size: 20px;
+  font-size: 20px !important;
   font-style: normal;
   font-weight: 600;
   line-height: 24px;
   letter-spacing: 0em;
-  text-align: center;
 }
 
 .bold-24px {
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index 26a11dbd..51e2d073 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -2,6 +2,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: space-around;
+  height: 36px;
   &:disabled {
     color: gray("600");
     fill: currentColor;
@@ -11,6 +12,9 @@
       background-color: gray("400");
     }
   }
+  &svg {
+    padding-right: 8px;
+  }
 }
 
 .btn-md {
@@ -19,10 +23,11 @@
 }
 
 .btn-lg {
-  width: 270px;
+  width: 290px;
   height: 36px;
 }
 
+.btn-danger,
 .btn-primary {
   background-color: $red-brand-primary;
   border-radius: 8px;
@@ -54,7 +59,8 @@
   }
 }
 
-.btn-secondary {
+.btn-secondary,
+.modal-header button {
   background-color: $faint-secondary-primary-5;
   color: $red-brand-primary;
   border-radius: 8px;
@@ -82,6 +88,19 @@
     color: $red-brand-primary;
     background-color: $faint-secondary-primary-20;
   }
+  // style for standard close button in modal and popups
+  &.close {
+    width: 32px;
+    height: 22px;
+    padding: 0px;
+    margin: 0px;
+    background-color: $faint-secondary-primary-1;
+    border: 1px solid $faint-secondary-primary-10;
+    border-radius: 7px;
+    &:hover {
+      background-color: $faint-secondary-primary-2;
+    }
+  }
 }
 
 .btn-unstiled {
diff --git a/src/assets/styles/bmc/custom/_card.scss b/src/assets/styles/bmc/custom/_card.scss
index 5f2a5962..db8d076b 100644
--- a/src/assets/styles/bmc/custom/_card.scss
+++ b/src/assets/styles/bmc/custom/_card.scss
@@ -2,4 +2,18 @@
   .bg-success {
     background-color: theme-color-light('success')!important;
   }
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    border-radius: 16px;
+}
+
+.card-header {
+  border-radius: 15px 15px 0 0;
+  background-color: $faint-secondary-primary-10 !important;
+  color: $text-primary !important;
+  .nav-tabs .nav-link {
+    border-radius: 10px 10px 0 0 ;
+    &:hover {
+      background-color: $faint-secondary-primary-2;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_dropdown.scss b/src/assets/styles/bmc/custom/_dropdown.scss
index 010b9b3f..1ea80d9f 100644
--- a/src/assets/styles/bmc/custom/_dropdown.scss
+++ b/src/assets/styles/bmc/custom/_dropdown.scss
@@ -1,11 +1,16 @@
 // Make calendar visible over the table
 .dropdown-menu {
+  border-radius: 5px;
   z-index: $zindex-dropdown + 1;
   padding: 0;
+  a {
+    border-radius: 5px;
+  }
 }
 .dropdown-item {
   padding-left: $spacer/4;
   margin-top: -1 * $spacer/4;
+  background-color: $white;
 }
 // .b-dropdown-form {
 //   padding: $spacer/2;
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 8cb8e242..d8f2cecb 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -61,6 +61,16 @@
   }
 }
 
+.select-per-page {
+  padding: 0 0 0 5px;
+  width: 146px !important;
+  height: 24px;
+  background-color: transparent;
+  border: 1px solid $on-surface-tretiatry;
+  border-radius: 4px;
+  background-image: url('~@/assets/images/icon-chevron.svg');
+}
+
 // Inverted form colors
 .form-background {
   background-color: none;
@@ -91,6 +101,14 @@
   line-height: $form-line-height;
 }
 
+.custom-checkbox {
+  line-height: 23px;
+}
+
+.custom-radio {
+  line-height: 23px !important;
+}
+
 .custom-checkbox ::before {
   box-shadow: none !important;
   border: 2px solid $on-surface-secondary;
@@ -123,7 +141,6 @@
 .custom-switch {
   width: 28px;
   height: 16px;
-  margin: -4px 0 -4px auto;
 }
 
 .custom-switch
@@ -216,7 +233,7 @@
   padding-top: 4px;
 }
 
-//radio buttons global style
+//radio buttons style
   .custom-radio ::before {
     border: 1px solid $red-brand-primary;
   background-color: #fff;
@@ -228,7 +245,7 @@
 ~ .custom-control-label::before {
   border: 2px solid $red-brand-primary;
   background-color: $red-brand-primary;
-  box-shadow: 0px 0px 0px 2.5px $white inset;
+  box-shadow: 0px 0px 0px 2.4px $white inset;
   border-radius: 100%;
 }
 
@@ -236,7 +253,7 @@
   .custom-control-input:hover
   ~ .custom-control-label::before {
   background-color: $red-brand-primary-hover !important;
-  box-shadow: 0px 0px 0px 2.5px $white inset;
+  box-shadow: 0px 0px 0px 2.4px $white inset;
   border-color: $red-brand-primary-hover;
 }
 
@@ -251,6 +268,6 @@
 .custom-control-input:active
 ~ .custom-control-label::before {
   background-color: $red-brand-primary-active !important;
-  box-shadow: 0px 0px 0px 2.5px $white inset;
+  box-shadow: 0px 0px 0px 2.4px $white inset;
   border-color: $red-brand-primary-active;
 }
diff --git a/src/assets/styles/bmc/custom/_logs.scss b/src/assets/styles/bmc/custom/_logs.scss
index ae0099e0..2a8dcff7 100644
--- a/src/assets/styles/bmc/custom/_logs.scss
+++ b/src/assets/styles/bmc/custom/_logs.scss
@@ -10,3 +10,65 @@
 .logs-section .b-table-sort-icon-left {
   background-size: 15px !important;
 }
+
+.logs-head-container {
+  position: absolute;
+  width: 50%;
+  top: calc(#{$header-height});
+  right: 0px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+  align-items: baseline;
+  gap: 6px;
+  z-index: 1001;
+}
+
+#logs-table-wrapper div {
+  max-height: calc(100vh - 194px - #{$header-height});
+}
+
+#logs-table,
+#table-event-logs {
+  margin: 0 !important;
+}
+
+// scrollbar styles
+#logs-table-wrapper div,
+#table-event-logs 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;
+}
+
+.logs-pagination-container {
+  width: calc(100% - #{$navigation-width});
+  height: $toolbar-height;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.06);
+  z-index: $zindex-dropdown;
+  background-color: $white;
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_modal.scss b/src/assets/styles/bmc/custom/_modal.scss
index e2fa0cd8..725d4672 100644
--- a/src/assets/styles/bmc/custom/_modal.scss
+++ b/src/assets/styles/bmc/custom/_modal.scss
@@ -1,12 +1,69 @@
+.modal-dialog {
+  margin: 25vh auto 0;
+}
+
+.modal-content {
+  border-radius: 16px;
+}
+
 .modal-header {
+  align-items: center;
+  border-bottom: 1px solid $faint-secondary-primary-10;
   .close {
     font-weight: normal;
     color: theme-color("dark");
     opacity: 1;
   }
-  .modal-title {
-    font-size: 1.25rem;
-    font-weight: normal;
-    line-height: 1.3;
-  }
 }
+
+.modal-body {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.modal-footer {
+  border-top: 1px solid $faint-secondary-primary-10;
+}
+
+#modal-reset .modal-body {
+  flex-direction: column;
+}
+
+#generate-csr .custom-select,
+#upload-certificate .custom-select,
+#modal-user .custom-select {
+  background-color: transparent;
+  border: 1px solid $on-surface-tretiatry;
+  border-radius: 4px;
+  background-image: url('~@/assets/images/icon-chevron.svg');
+}
+
+// file-input-modal
+.modal-file-body {
+  display: flex;
+  padding: 0;
+  justify-content: center;
+}
+
+.file-input_container > .custom-file {
+  width: 432px;
+  height: 357px;
+}
+
+.custom-file-input ~ .custom-file-label {
+  background-color: transparent;
+  border: 1px dashed rgba(12, 28, 41, 0.6);
+  box-sizing: border-box;
+  border-radius: 8px;
+  width: 432px;
+  height: 357px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  white-space: normal;
+  justify-content: center;
+}
+
+.custom-file-input ~ .custom-file-label::after {
+  display: none;
+}
\ 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 d86d40de..84dc5f99 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -17,9 +17,9 @@
 
     // Table action buttons
     .btn-link {
-      width: 40px;
-      height: 40px;
-      padding: 5px !important;
+      height: 20px;
+      border-radius: 2px;
+      padding: 4px !important;
       display: inline-flex;
       justify-content: center;
       align-items: center;
@@ -44,7 +44,7 @@
   }
 
   .status-icon svg {
-    width: 1rem;
+    width: 1.2rem;
     height: auto;
   }
 
@@ -79,10 +79,7 @@
     width: 50px;
     .btn {
       padding: 0;
-      width: 50px;
-    }
-    svg {
-      fill: theme-color("dark");
+      width: 27px;
     }
   }
   .b-table-sort-icon-left {
@@ -170,6 +167,10 @@
   // }
 }
 
+.b-table-details > td {
+  padding: 0px !important;
+}
+
 .indicators-Critical {
   color: $indicators-errors !important;
 }
@@ -318,35 +319,3 @@
   -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/assets/styles/bmc/custom/_toasts.scss b/src/assets/styles/bmc/custom/_toasts.scss
index 4e2ad7fa..a3480fda 100644
--- a/src/assets/styles/bmc/custom/_toasts.scss
+++ b/src/assets/styles/bmc/custom/_toasts.scss
@@ -1,5 +1,5 @@
 .b-toaster {
-  top: 75px!important; // make sure toasts do not hide top header
+  top: 95px!important; // make sure toasts do not hide top header
 }
 
 // Toast component and status icon style
diff --git a/src/assets/styles/bmc/helpers/_colors.scss b/src/assets/styles/bmc/helpers/_colors.scss
index e15aef87..028d962b 100644
--- a/src/assets/styles/bmc/helpers/_colors.scss
+++ b/src/assets/styles/bmc/helpers/_colors.scss
@@ -3,9 +3,9 @@ $black: #000;
 $white: #FFFFFF;
 
 $blue-500: #2d60e5;
-$green-500: #0a7d06;
-$red-500: #da1416;
-$yellow-500: #efc100;
+$green-500: #4EBF19;
+$red-500: #FF4141;
+$yellow-500: #F0AC0C;
 $dark-blue: #1A3E5B;
 
 $gray-100: #f4f4f4;
@@ -32,7 +32,7 @@ $dark: $dark-blue;
 $info: $blue;
 $light: $white;
 $primary: $dark-blue;
-$secondary: $gray-800;
+$secondary: #1A3E5B;
 $success: $green;
 $warning: $yellow;
 
@@ -57,9 +57,12 @@ $surface-secondary: #F3F4F5;
 $on-surface-secondary: rgba(4, 10, 15, 0.6);
 $on-surface-tretiatry: #040A0F4D;
 
+$faint-secondary-primary-1:  rgba(26, 62, 91, 0.01);
 $faint-secondary-primary-2:  rgba(26, 62, 91, 0.02);
+$faint-secondary-primary-2-hover:  rgba(26, 62, 91, 0.03);
+
 $faint-secondary-primary-5: rgba(26, 62, 91, 0.05);
-$faint-secondary-primary-5-hover:  rgba(20, 39, 53, 0.103);
+$faint-secondary-primary-5-hover:  rgba(20, 39, 53, 0.1);
 $faint-secondary-primary-10: rgba(26, 62, 91, 0.1);
 $faint-secondary-primary-20: rgba(26, 62, 91, 0.2);
 $faint-brand-primary-40:rgba(225, 23, 23, 0.4);
diff --git a/src/assets/styles/bmc/helpers/_variables.scss b/src/assets/styles/bmc/helpers/_variables.scss
index babb0b89..9e3a3aed 100644
--- a/src/assets/styles/bmc/helpers/_variables.scss
+++ b/src/assets/styles/bmc/helpers/_variables.scss
@@ -7,11 +7,18 @@ $transition-collapse:         height $duration--slow-01 $standard-easing--expres
 
 // OpenBMC Custom Variables
 $responsive-layout-bp: lg;
-$top-header-height: 56px;
-$header-height: 95px;
+$first-header-height: 48px;
+$second-header-height: 39px;
+$header-height: 87px;
+$headerHeight: 40px;
 $navigation-width: 320px;
+$toolbar-height: 60px;
 $form-label-font-size: .875rem;
 $form-line-height: 1.25rem;
 $box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
 $focus-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
 border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+// :export {
+//     headerHeight: $header-height;
+//   }
\ No newline at end of file
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 81287163..a577b452 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -32,7 +32,7 @@
         <b-navbar-nav>
           <b-navbar-brand
             class="mr-0 app-logo"
-            to="/"
+            to="/hardware-status/inventory"
             data-test-id="appHeader-container-overview"
           >
             <img
@@ -41,16 +41,18 @@
             />
           </b-navbar-brand>
           <div v-if="isNavTagPresent" :key="routerKey" class="pl-2 nav-tags">
-            <span>|</span>
-            <span class="pl-3 asset-tag">{{ assetTag }}</span>
-            <span class="pl-3">{{ modelType }}</span>
-            <span class="pl-3">{{ serialNumber }}</span>
+            <span style="color: white">|</span>
+            <span style="color: white" class="pl-2 asset-tag">{{
+              assetTag
+            }}</span>
+            <span style="color: white" class="pl-2">{{ modelType }}</span>
+            <span style="color: white" class="pl-2">{{ serialNumber }}</span>
           </div>
         </b-navbar-nav>
-        <!-- Right aligned nav items -->
-        <b-navbar-nav class="helper-menu">
+        <!-- Left nav items-->
+        <!--  <b-navbar-nav class="helper-menu">
           <b-nav-item
-            to="/"
+            to="/hardware-status/inventory"
             data-test-id="appHeader-container-health"
             class="nav-top-button"
             :class="{
@@ -77,7 +79,7 @@
             {{ $t('appHeader.informationAndFAQ') }}
           </b-nav-item>
 
-          <b-nav-item
+           <b-nav-item
             to="/support"
             data-test-id="appHeader-container-power"
             class="nav-top-button"
@@ -88,87 +90,67 @@
             }"
           >
             {{ $t('appHeader.support') }}
-          </b-nav-item>
-        </b-navbar-nav>
-        <!-- Left nav items-->
-        <img
-          class="header-clock__icon"
-          src="@/assets/images/header/header-clock.svg"
-        />
-        <span style="color: white">15:54:00</span>
-        <b-nav-item
-          to="/logs/event-logs"
-          data-test-id="appHeader-container-health"
-          style="display: block"
-        >
-          <status-icon :status="healthStatusIcon" />
-          {{ $t('appHeader.health') }}
-        </b-nav-item>
-        <b-nav-item
-          to="/operations/server-power-operations"
-          data-test-id="appHeader-container-power"
-          style="display: block"
-        >
-          <status-icon :status="serverStatusIcon" />
-          {{ $t('appHeader.power') }}
-        </b-nav-item>
-        <div class="nav-item">
-          <b-button
-            id="app-header-refresh"
-            variant="link"
-            data-test-id="appHeader-button-refresh"
-            @click="refresh"
-          >
-            <icon-renew :title="$t('appHeader.titleRefresh')" />
-            <span class="responsive-text">{{ $t('appHeader.refresh') }}</span>
-          </b-button>
-        </div>
-        <div class="nav-item">
-          <b-dropdown
-            id="app-header-user"
-            variant="link"
-            right
-            data-test-id="appHeader-container-user"
-          >
-            <template #button-content>
-              <icon-avatar :title="$t('appHeader.titleProfile')" />
-              <span class="responsive-text">{{ username }}</span>
-            </template>
-            <b-dropdown-item
-              to="/profile-settings"
-              data-test-id="appHeader-link-profile"
-              >{{ $t('appHeader.profileSettings') }}
-            </b-dropdown-item>
-            <b-dropdown-item
-              data-test-id="appHeader-link-logout"
-              @click="logout"
+          </b-nav-item> 
+        </b-navbar-nav> -->
+        <!-- Right aligned nav items -->
+        <b-navbar-nav class="ml-auto helper-menu">
+          <li class="nav-item">
+            <b-button
+              variant="link"
+              data-test-id="appHeader-container-health"
+              @click="toLogs"
             >
-              {{ $t('appHeader.logOut') }}
-            </b-dropdown-item>
-          </b-dropdown>
-        </div>
-        <!-- <img
-          style="margin-left: 20px"
-          class="header-avatar__icon"
-          src="@/assets/images/header/header-avatar.svg"
-        />
-        <span style="color: white">Маргарита тутова</span> -->
-        <b-button id="app-header-notification" class="app-header-notification">
-          <img
-            class="header-notification__icon"
-            src="@/assets/images/header/icon-notification.svg"
-          />
-        </b-button>
-        <b-button
-          id="app-header-logout"
-          class="app-header-logout"
-          @click="logout"
-        >
-          <img
-            class="header-logout__icon"
-            src="@/assets/images/header/logout-icon.svg"
-          />
-        </b-button>
+              <status-icon :status="healthStatusIcon" />
+              <span>{{ $t('appHeader.health') }}</span>
+            </b-button>
+          </li>
+          <li class="nav-item">
+            <b-button
+              variant="link"
+              data-test-id="appHeader-container-power"
+              @click="toOperations"
+            >
+              <status-icon :status="serverStatusIcon" />
+              <span>{{ $t('appHeader.power') }}</span>
+            </b-button>
+          </li>
+          <!-- Using LI elements instead of b-nav-item to support semantic button elements -->
+          <li class="nav-item">
+            <b-button
+              id="app-header-refresh"
+              variant="link"
+              data-test-id="appHeader-button-refresh"
+              @click="refresh"
+            >
+              <icon-renew :title="$t('appHeader.titleRefresh')" />
+              <span class="responsive-text">{{ $t('appHeader.refresh') }}</span>
+            </b-button>
+          </li>
+          <li class="nav-item">
+            <b-dropdown
+              id="app-header-user"
+              variant="link"
+              right
+              data-test-id="appHeader-container-user"
+            >
+              <template #button-content>
+                <icon-avatar :title="$t('appHeader.titleProfile')" />
+                <span class="responsive-text">{{ username }}</span>
+              </template>
+              <b-dropdown-item
+                to="/profile-settings"
+                data-test-id="appHeader-link-profile"
+                >{{ $t('appHeader.profileSettings') }}
+              </b-dropdown-item>
+              <b-dropdown-item
+                data-test-id="appHeader-link-logout"
+                @click="logout"
+              >
+                {{ $t('appHeader.logOut') }}
+              </b-dropdown-item>
+            </b-dropdown>
+          </li>
+        </b-navbar-nav>
       </b-navbar>
     </header>
   </div>
@@ -180,7 +162,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: {
@@ -188,7 +170,7 @@ export default {
     IconMenu,
     IconAvatar,
     IconRenew,
-    // StatusIcon,
+    StatusIcon,
   },
   mixins: [BVToastMixin],
   props: {
@@ -295,6 +277,12 @@ export default {
       event.preventDefault();
       this.$root.$emit('skip-navigation');
     },
+    toLogs() {
+      this.$router.push('/logs/event-logs').catch(() => {});
+    },
+    toOperations() {
+      this.$router.push('/operations/server-power-operations').catch(() => {});
+    },
   },
 };
 </script>
@@ -348,8 +336,16 @@ export default {
   .navbar {
     padding: 0;
     background-color: $navbar-color;
+    svg {
+      margin-right: 2px;
+    }
+    .status-icon {
+      svg {
+        vertical-align: text-bottom;
+      }
+    }
     @include media-breakpoint-up($responsive-layout-bp) {
-      height: $top-header-height;
+      height: $first-header-height;
     }
 
     .helper-menu {
@@ -395,8 +391,8 @@ export default {
 
   .nav-trigger {
     fill: theme-color('light');
-    width: $top-header-height;
-    height: $top-header-height;
+    width: $first-header-height;
+    height: $first-header-height;
     transition: none;
     display: inline-flex;
     flex: 0 0 20px;
@@ -437,7 +433,7 @@ export default {
 
 .navbar-brand {
   padding: $spacer/2;
-  height: $top-header-height;
+  height: $first-header-height;
   line-height: 1;
   &:focus {
     box-shadow: inset 0 0 0 3px $navbar-color, inset 0 0 0 5px color('white');
@@ -445,10 +441,6 @@ export default {
   }
 }
 
-.header-clock__icon {
-  margin-left: auto;
-}
-
 .app-header-logout,
 .app-header-notification {
   margin: 0 5px;
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 1cdb7120..481818c3 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -1,33 +1,6 @@
 <template>
   <div>
     <div class="nav-container" :class="{ open: isNavigationOpen }">
-      <div class="navbar__search_select_container">
-        <div class="server-form">
-          <img
-            class="server__icon"
-            src="@/assets/images/sila-server-navbar-icon.svg"
-          />
-          <b-form-group class="server-pagination-select">
-            <b-form-select
-              v-model="server"
-              class="server-select"
-              :options="servers"
-            />
-          </b-form-group>
-        </div>
-        <div class="nav-line"></div>
-        <div class="form-control server-search">
-          <button class="search-button">
-            <img class="server__icon" src="@/assets/images/search-icon.svg" />
-          </button>
-          <b-form-input
-            type="text"
-            class="nav-search__input"
-            placeholder="Поиск по серверу"
-          >
-          </b-form-input>
-        </div>
-      </div>
       <nav ref="nav" :aria-label="$t('appNavigation.primaryNavigation')">
         <b-nav vertical>
           <template v-for="(navItem, index) in sideBar">
@@ -110,9 +83,9 @@ export default {
   computed: {
     sideBar() {
       if (
-        this.$route.path === '/console-settings' ||
-        this.$route.path === '/console/serial-over-lan' ||
-        this.$route.path === '/console/kvm'
+        this.$route.path === '/console/settings' ||
+        this.$route.path === '/operations/serial-over-lan' ||
+        this.$route.path === '/operations/kvm'
       ) {
         return this.kvmNavigationItems;
       } else {
diff --git a/src/components/AppNavigation/AppNavigationMixin.js b/src/components/AppNavigation/AppNavigationMixin.js
index 241a8f3b..c51636d5 100644
--- a/src/components/AppNavigation/AppNavigationMixin.js
+++ b/src/components/AppNavigation/AppNavigationMixin.js
@@ -15,33 +15,18 @@ export const AppNavigationMixin = {
             {
               id: 'info',
               label: this.$t('appNavigation.overviewInfo'),
-              route: '/',
+              route: '/hardware-status/inventory',
             },
             {
               id: 'network',
               label: this.$t('appNavigation.networkParametrs'),
-              route: '/network-parametrs',
-            },
-            {
-              id: 'event-logs',
-              label: this.$t('appNavigation.eventLogs'),
-              route: '/event-logs',
-            },
-            {
-              id: 'server-parametrs',
-              label: this.$t('appNavigation.serverParam'),
-              route: '/server-parametrs',
+              route: '/settings/network',
             },
             {
               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',
-            },
           ],
         },
         {
@@ -54,185 +39,185 @@ export const AppNavigationMixin = {
               label: this.$t('appNavigation.config'),
               route: '/bmc-configuration',
             },
-            {
-              id: 'bmc-firmware',
-              label: this.$t('appNavigation.deviceFirmware'),
-              route: '/bmc-firmware',
-            },
-            {
-              id: 'bmc-settings',
-              label: this.$t('appNavigation.broadcast'),
-              route: '/bmc-settings',
-            },
-          ],
-        },
-        {
-          id: 'analytical-panel',
-          label: this.$t('appNavigation.analyticalPanel'),
-          route: '/analytical-panel',
-        },
-        {
-          id: 'RAID',
-          label: this.$t('appNavigation.raidControllers'),
-          icon: 'iconChevronUp',
-          children: [
-            {
-              id: 'raid-specification',
-              label: this.$t('appNavigation.specification'),
-              route: '/raid-specification',
-            },
-            {
-              id: 'raid-settings',
-              label: this.$t('appNavigation.settings'),
-              route: '/raid-settings',
-            },
-            {
-              id: 'raid-cache',
-              label: this.$t('RAID.cache'),
-              route: '/raid-cache',
-            },
-          ],
-        },
-        {
-          id: 'processors',
-          label: this.$t('appNavigation.processors'),
-          icon: 'iconChevronUp',
-          children: [
-            {
-              id: 'processors-specification',
-              label: this.$t('appNavigation.specification'),
-              route: '/processors-specification',
-            },
-            {
-              id: 'processors-dynamic-info',
-              label: this.$t('appNavigation.analyticalPanel'),
-              route: '/processors-dynamic-info',
-            },
-          ],
-        },
-        {
-          id: 'power',
-          label: this.$t('appNavigation.powerSupplies'),
-          icon: 'iconChevronUp',
-          children: [
-            {
-              id: 'power-specification',
-              label: this.$t('appNavigation.specification'),
-              route: '/power-specification',
-            },
-            {
-              id: 'power-dynamic-info',
-              label: this.$t('appNavigation.analyticalPanel'),
-              route: '/power-dynamic-info',
-            },
-          ],
-        },
-        {
-          id: 'memory',
-          label: this.$t('appNavigation.memoryModules'),
-          icon: 'iconChevronUp',
-          children: [
-            {
-              id: 'memory-specification',
-              label: this.$t('appNavigation.specification'),
-              route: '/memory-specification',
-            },
-            {
-              id: 'memory-dynamic-info',
-              label: this.$t('appNavigation.analyticalPanel'),
-              route: '/memory-dynamic-info',
-            },
-          ],
-        },
-        {
-          id: 'fans',
-          label: this.$t('appNavigation.fans'),
-          icon: 'iconChevronUp',
-          children: [
-            {
-              id: 'fans-static',
-              label: this.$t('appNavigation.statisticInformation'),
-              route: '/fans-static',
-            },
-            {
-              id: 'fans',
-              label: this.$t('appNavigation.dynamicInformation'),
-              route: '/fans',
-            },
+            // {
+            //   id: 'bmc-firmware',
+            //   label: this.$t('appNavigation.deviceFirmware'),
+            //   route: '/bmc-firmware',
+            // },
+            // {
+            //   id: 'bmc-settings',
+            //   label: this.$t('appNavigation.broadcast'),
+            //   route: '/bmc-settings',
+            // },
           ],
         },
-        {
-          id: 'physical-drives',
-          label: this.$t('appNavigation.physicalDrives'),
-          icon: 'iconChevronUp',
-          children: [
-            {
-              id: 'drivers-static',
-              label: this.$t('appNavigation.statisticInformation'),
-              route: '/drivers-static',
-            },
-            {
-              id: 'drivers',
-              label: this.$t('appNavigation.analyticalPanel'),
-              route: '/drivers',
-            },
-          ],
-        },
-        {
-          id: 'virtual-drivers',
-          label: this.$t('appNavigation.virtualDrivers'),
-          route: '/virtual-drivers',
-        },
-        {
-          id: 'motherboard',
-          label: this.$t('appNavigation.motherboard'),
-          icon: 'iconChevronUp',
-          children: [
-            {
-              id: 'motherboard-specification',
-              label: this.$t('appNavigation.specification'),
-              route: '/motherboard-specification',
-            },
-            {
-              id: 'motherboard-dynamic-info',
-              label: this.$t('appNavigation.analyticalPanel'),
-              route: '/motherboard-dynamic-info',
-            },
-          ],
-        },
-        {
-          id: 'network-adapters',
-          label: this.$t('appNavigation.networkAdapters'),
-          icon: 'iconChevronUp',
-          children: [
-            {
-              id: 'network-adapters-ethernet',
-              label: this.$t('appNavigation.ethernetAdapters'),
-              route: '/network-adapters-ethernet',
-            },
-            {
-              id: 'network-adapters-fc-hba',
-              label: this.$t('appNavigation.fcHbaAdapters'),
-              route: '/network-adapters-fc-hba',
-            },
-            {
-              id: 'network-adapters-pannel',
-              label: this.$t('appNavigation.analyticalPanel'),
-              route: '/network-adapters-pannel',
-            },
-          ],
-        },
-        {
-          id: 'pci-devices',
-          label: this.$t('appNavigation.pciDevices'),
-          route: '/pci-devices',
-        },
+        // {
+        //   id: 'analytical-panel',
+        //   label: this.$t('appNavigation.analyticalPanel'),
+        //   route: '/analytical-panel',
+        // },
+        // {
+        //   id: 'RAID',
+        //   label: this.$t('appNavigation.raidControllers'),
+        //   icon: 'iconChevronUp',
+        //   children: [
+        //     {
+        //       id: 'raid-specification',
+        //       label: this.$t('appNavigation.specification'),
+        //       route: '/raid-specification',
+        //     },
+        //     {
+        //       id: 'raid-settings',
+        //       label: this.$t('appNavigation.settings'),
+        //       route: '/raid-settings',
+        //     },
+        //     {
+        //       id: 'raid-cache',
+        //       label: this.$t('RAID.cache'),
+        //       route: '/raid-cache',
+        //     },
+        //   ],
+        // },
+        // {
+        //   id: 'processors',
+        //   label: this.$t('appNavigation.processors'),
+        //   icon: 'iconChevronUp',
+        //   children: [
+        //     {
+        //       id: 'processors-specification',
+        //       label: this.$t('appNavigation.specification'),
+        //       route: '/processors-specification',
+        //     },
+        //     {
+        //       id: 'processors-dynamic-info',
+        //       label: this.$t('appNavigation.analyticalPanel'),
+        //       route: '/processors-dynamic-info',
+        //     },
+        //   ],
+        // },
+        // {
+        //   id: 'power',
+        //   label: this.$t('appNavigation.powerSupplies'),
+        //   icon: 'iconChevronUp',
+        //   children: [
+        //     {
+        //       id: 'power-specification',
+        //       label: this.$t('appNavigation.specification'),
+        //       route: '/power-specification',
+        //     },
+        //     {
+        //       id: 'power-dynamic-info',
+        //       label: this.$t('appNavigation.analyticalPanel'),
+        //       route: '/power-dynamic-info',
+        //     },
+        //   ],
+        // },
+        // {
+        //   id: 'memory',
+        //   label: this.$t('appNavigation.memoryModules'),
+        //   icon: 'iconChevronUp',
+        //   children: [
+        //     {
+        //       id: 'memory-specification',
+        //       label: this.$t('appNavigation.specification'),
+        //       route: '/memory-specification',
+        //     },
+        //     {
+        //       id: 'memory-dynamic-info',
+        //       label: this.$t('appNavigation.analyticalPanel'),
+        //       route: '/memory-dynamic-info',
+        //     },
+        //   ],
+        // },
+        // {
+        //   id: 'fans',
+        //   label: this.$t('appNavigation.fans'),
+        //   icon: 'iconChevronUp',
+        //   children: [
+        //     {
+        //       id: 'fans-static',
+        //       label: this.$t('appNavigation.statisticInformation'),
+        //       route: '/fans-static',
+        //     },
+        //     {
+        //       id: 'fans',
+        //       label: this.$t('appNavigation.dynamicInformation'),
+        //       route: '/fans',
+        //     },
+        //   ],
+        // },
+        // {
+        //   id: 'physical-drives',
+        //   label: this.$t('appNavigation.physicalDrives'),
+        //   icon: 'iconChevronUp',
+        //   children: [
+        //     {
+        //       id: 'drivers-static',
+        //       label: this.$t('appNavigation.statisticInformation'),
+        //       route: '/drivers-static',
+        //     },
+        //     {
+        //       id: 'drivers',
+        //       label: this.$t('appNavigation.analyticalPanel'),
+        //       route: '/drivers',
+        //     },
+        //   ],
+        // },
+        // {
+        //   id: 'virtual-drivers',
+        //   label: this.$t('appNavigation.virtualDrivers'),
+        //   route: '/virtual-drivers',
+        // },
+        // {
+        //   id: 'motherboard',
+        //   label: this.$t('appNavigation.motherboard'),
+        //   icon: 'iconChevronUp',
+        //   children: [
+        //     {
+        //       id: 'motherboard-specification',
+        //       label: this.$t('appNavigation.specification'),
+        //       route: '/motherboard-specification',
+        //     },
+        //     {
+        //       id: 'motherboard-dynamic-info',
+        //       label: this.$t('appNavigation.analyticalPanel'),
+        //       route: '/motherboard-dynamic-info',
+        //     },
+        //   ],
+        // },
+        // {
+        //   id: 'network-adapters',
+        //   label: this.$t('appNavigation.networkAdapters'),
+        //   icon: 'iconChevronUp',
+        //   children: [
+        //     {
+        //       id: 'network-adapters-ethernet',
+        //       label: this.$t('appNavigation.ethernetAdapters'),
+        //       route: '/network-adapters-ethernet',
+        //     },
+        //     {
+        //       id: 'network-adapters-fc-hba',
+        //       label: this.$t('appNavigation.fcHbaAdapters'),
+        //       route: '/network-adapters-fc-hba',
+        //     },
+        //     {
+        //       id: 'network-adapters-pannel',
+        //       label: this.$t('appNavigation.analyticalPanel'),
+        //       route: '/network-adapters-pannel',
+        //     },
+        //   ],
+        // },
+        // {
+        //   id: 'pci-devices',
+        //   label: this.$t('appNavigation.pciDevices'),
+        //   route: '/pci-devices',
+        // },
         ///////////////////////////old tabs
-        {
-          id: 'overview',
-          label: 'Обзор',
-          route: '/Info',
-        },
+        // {
+        //   id: 'overview',
+        //   label: 'Обзор',
+        //   route: '/Info',
+        // },
         {
           id: 'logs',
           label: this.$t('appNavigation.logs'),
@@ -241,7 +226,7 @@ export const AppNavigationMixin = {
             {
               id: 'event-logs',
               label: this.$t('appNavigation.eventLogs'),
-              route: '/logs/event-logs-old',
+              route: '/logs/event-logs',
             },
             {
               id: 'post-code-logs',
@@ -250,23 +235,18 @@ export const AppNavigationMixin = {
             },
           ],
         },
-        {
-          id: 'hardware-status',
-          label: this.$t('appNavigation.hardwareStatus'),
-          icon: 'iconChevronUp',
-          children: [
-            {
-              id: 'inventory',
-              label: this.$t('appNavigation.inventory'),
-              route: '/hardware-status/inventory',
-            },
-            {
-              id: 'sensors',
-              label: this.$t('appNavigation.sensors'),
-              route: '/hardware-status/sensors',
-            },
-          ],
-        },
+        // {
+        //   id: 'hardware-status',
+        //   label: this.$t('appNavigation.hardwareStatus'),
+        //   icon: 'iconChevronUp',
+        //   children: [
+        //     {
+        //       id: 'sensors',
+        //       label: this.$t('appNavigation.sensors'),
+        //       route: '/hardware-status/sensors',
+        //     },
+        //   ],
+        // },
         {
           id: 'operations',
           label: this.$t('appNavigation.operations'),
@@ -304,25 +284,27 @@ export const AppNavigationMixin = {
             },
           ],
         },
-        {
-          id: 'settings',
-          label: this.$t('appNavigation.settings'),
-          children: [
-            {
-              id: 'network',
-              label: this.$t('appNavigation.network'),
-              route: '/settings/network',
-            },
-            {
-              id: 'power-restore-policy',
-              label: this.$t('appNavigation.powerRestorePolicy'),
-              route: '/settings/power-restore-policy',
-            },
-          ],
-        },
+        // {
+        //   id: 'settings',
+        //   label: this.$t('appNavigation.settings'),
+        //   icon: 'iconChevronUp',
+        //   children: [
+        //     {
+        //       id: 'network',
+        //       label: this.$t('appNavigation.network'),
+        //       route: '/settings/network',
+        //     },
+        //     {
+        //       id: 'power-restore-policy',
+        //       label: this.$t('appNavigation.powerRestorePolicy'),
+        //       route: '/settings/power-restore-policy',
+        //     },
+        //   ],
+        // },
         {
           id: 'security-and-access',
           label: this.$t('appNavigation.securityAndAccess'),
+          icon: 'iconChevronUp',
           children: [
             {
               id: 'sessions',
@@ -351,17 +333,18 @@ export const AppNavigationMixin = {
             },
           ],
         },
-        {
-          id: 'resource-management',
-          label: this.$t('appNavigation.resourceManagement'),
-          children: [
-            {
-              id: 'power',
-              label: this.$t('appNavigation.power'),
-              route: '/resource-management/power',
-            },
-          ],
-        },
+        // {
+        //   id: 'resource-management',
+        //   label: this.$t('appNavigation.resourceManagement'),
+        //   icon: 'iconChevronUp',
+        //   children: [
+        //     {
+        //       id: 'power',
+        //       label: this.$t('appNavigation.power'),
+        //       route: '/resource-management/power',
+        //     },
+        //   ],
+        // },
       ],
     };
   },
@@ -371,20 +354,20 @@ export const KvmNavigationMixin = {
   data() {
     return {
       kvmNavigationItems: [
+        // {
+        //   id: 'console-settings',
+        //   label: this.$t('appPageTitle.consoleSettings'),
+        //   route: '/console/settings',
+        // },
         {
-          id: 'console-settings',
-          label: this.$t('kvmNavigation.ConsoleSettings'),
-          route: '/console-settings',
+          id: 'kvm',
+          label: this.$t('appNavigation.kvm'),
+          route: '/operations/kvm',
         },
         {
           id: 'serial-over-lan',
-          label: this.$t('kvmNavigation.serialOverLan'),
-          route: '/console/serial-over-lan',
-        },
-        {
-          id: 'kvm',
-          label: this.$t('kvmNavigation.kvm'),
-          route: '/console/kvm',
+          label: this.$t('appPageTitle.serialOverLan'),
+          route: '/operations/serial-over-lan',
         },
       ],
     };
diff --git a/src/components/Global/Alert.vue b/src/components/Global/Alert.vue
index e8de9e27..0109e7d2 100644
--- a/src/components/Global/Alert.vue
+++ b/src/components/Global/Alert.vue
@@ -12,7 +12,7 @@
       <status-icon :status="variant" />
     </div>
     <div class="alert-content">
-      <div class="alert-msg">
+      <div class="alert-msg regular-14px">
         <slot />
       </div>
     </div>
diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue
index cf713acf..18c542c3 100644
--- a/src/components/Global/FormFile.vue
+++ b/src/components/Global/FormFile.vue
@@ -1,26 +1,38 @@
 <template>
   <div class="custom-form-file-container">
     <label>
-      <b-form-file
-        :id="id"
-        v-model="file"
-        :accept="accept"
-        :disabled="disabled"
-        :state="state"
-        plain
-        @input="$emit('input', file)"
+      <b-modal
+        :id="`modal-${id}`"
+        body-class="modal-file-body"
+        :title="$t('pageKvm.addImage_modal')"
+        hide-footer
       >
-      </b-form-file>
-      <span
-        class="add-file-btn btn"
+        <div class="file-input_container">
+          <b-form-file
+            :id="id"
+            v-model="file"
+            :accept="accept"
+            :disabled="disabled"
+            :state="state"
+            placeholder="Нажмите на область или перетащите в нее файл"
+            drop-placeholder="Отпустите, чтобы добавить файл"
+            @input="$emit('input', file)"
+          >
+          </b-form-file>
+        </div>
+      </b-modal>
+      <b-button
+        size="lg"
+        class="add-file-btn"
         :class="{
           disabled,
           'btn-secondary': isSecondary,
           'btn-primary': !isSecondary,
         }"
+        @click="$bvModal.show(`modal-${id}`)"
       >
         {{ $t('global.fileUpload.browseText') }}
-      </span>
+      </b-button>
       <slot name="invalid"></slot>
     </label>
     <div v-if="file" class="clear-selected-file px-3 py-2 mt-2">
@@ -78,9 +90,15 @@ export default {
       return this.variant === 'secondary';
     },
   },
+  watch: {
+    file() {
+      if (this.file) {
+        this.$bvModal.hide(`modal-${this.id}`);
+      }
+    },
+  },
 };
 </script>
-
 <style lang="scss" scoped>
 .form-control-file {
   opacity: 0;
@@ -116,4 +134,16 @@ export default {
     }
   }
 }
+
+.file-input_container {
+  width: 100%;
+  height: 400px;
+  background-color: $surface-secondary;
+  border-top: 1px solid #f3f4f5;
+  border-radius: 0 0 16px 16px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index ac8f9bfb..ce097fcb 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="search-global">
-    <b-form-group
-      :label="$t('global.form.search')"
+    <!--<b-form-group
+       :label="$t('global.form.search')"
       :label-for="`searchInput-${_uid}`"
       label-class="invisible"
-      class="mb-2"
-    >
+      class="mb-2" 
+    >-->
+    <b-form-group>
       <b-input-group size="md" class="align-items-center">
         <b-input-group-prepend>
           <icon-search class="search-icon" />
diff --git a/src/components/Global/SilaComponents/PopoverWithSlot.vue b/src/components/Global/SilaComponents/PopoverWithSlot.vue
index a9ec649b..44fb9640 100644
--- a/src/components/Global/SilaComponents/PopoverWithSlot.vue
+++ b/src/components/Global/SilaComponents/PopoverWithSlot.vue
@@ -135,7 +135,6 @@ export default {
       // updated & popover positioned first
       this.$nextTick(() => {
         this.$nextTick(() => {
-          console.log(ref);
           (ref.$el || ref).focus();
         });
       });
@@ -158,6 +157,7 @@ export default {
   margin: 0 28px 0 auto;
   background: none;
   border: none;
+  height: 25px;
   &:active {
     background-color: $faint-secondary-primary-5-hover !important;
     box-shadow: none !important;
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index fb818451..8f9e3d53 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -1,32 +1,28 @@
 <template>
   <span :class="['status-icon', status]">
     <icon-info v-if="status === 'info'" />
-    <img
-      v-else-if="status === 'success'"
-      class="status__img"
-      src="@/assets/images/status/on.svg"
-    />
+    <icon-success v-else-if="status === 'success'" />
     <icon-warning v-else-if="status === 'warning'" />
-    <img
-      v-else-if="status === 'danger'"
-      class="status__img"
-      src="@/assets/images/status/off.svg"
-    />
+    <icon-danger v-else-if="status === 'danger'" />
     <icon-secondary v-else />
   </span>
 </template>
 
 <script>
-import IconInfo from '@carbon/icons-vue/es/information--filled/20';
-import IconWarning from '@carbon/icons-vue/es/warning--filled/20';
-import IconError from '@carbon/icons-vue/es/error--filled/20';
+import IconInfo from '@carbon/icons-vue/es/information/20';
+import IconCheckmark from '@carbon/icons-vue/es/checkmark--outline/20';
+import IconWarning from '@carbon/icons-vue/es/warning/20';
+import IconError from '@carbon/icons-vue/es/error--outline/20';
+import IconMisuse from '@carbon/icons-vue/es/misuse--outline/20';
 
 export default {
   name: 'StatusIcon',
   components: {
     IconInfo: IconInfo,
+    iconSuccess: IconCheckmark,
     iconSecondary: IconError,
     iconWarning: IconWarning,
+    iconDanger: IconMisuse,
   },
   props: {
     status: {
diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue
index aa10cb5c..3094b6ea 100644
--- a/src/components/Global/TableDateFilter.vue
+++ b/src/components/Global/TableDateFilter.vue
@@ -1,9 +1,10 @@
 <template>
-  <b-row class="mb-2">
+  <b-row class="mb-2 mt-2">
     <b-col class="d-sm-flex">
       <b-form-group
         :label="$t('global.table.fromDate')"
         label-for="input-from-date"
+        label-class="caption-12px mb-0"
         class="mr-3 my-0 w-100"
       >
         <b-input-group>
@@ -12,7 +13,7 @@
             v-model="fromDate"
             placeholder="YYYY-MM-DD"
             :state="getValidationState($v.fromDate)"
-            class="form-control-with-button mb-3 mb-md-0"
+            class="form-control-with-button mb-md-0"
             @blur="$v.fromDate.$touch()"
           />
           <b-form-invalid-feedback role="alert">
@@ -50,6 +51,7 @@
       <b-form-group
         :label="$t('global.table.toDate')"
         label-for="input-to-date"
+        label-class="caption-12px mb-0"
         class="my-0 w-100"
       >
         <b-input-group>
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index eabe0c98..4137d98c 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -68,8 +68,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-$toolbar-height: 64px;
-
 .toolbar-container {
   width: calc(100vw - 320px);
   height: $toolbar-height;
diff --git a/src/components/SubHeader/SubHeader.vue b/src/components/SubHeader/SubHeader.vue
index 9d8a1b88..72bc955e 100644
--- a/src/components/SubHeader/SubHeader.vue
+++ b/src/components/SubHeader/SubHeader.vue
@@ -5,7 +5,7 @@
         <!-- top navigation menu -->
         <b-navbar-nav>
           <b-nav-item
-            to="/"
+            to="/hardware-status/inventory"
             data-test-id="appHeader-container-health"
             class="subheader-button"
             :class="{
@@ -15,6 +15,7 @@
                 'support',
                 'console-settings',
                 'console',
+                'operations',
                 'security-and-access',
               ].includes($route.path.split('/')[1]),
             }"
@@ -23,14 +24,16 @@
           </b-nav-item>
 
           <b-nav-item
-            to="/console-settings"
+            to="/operations/kvm"
             data-test-id="appHeader-container-health"
             class="subheader-button"
             :class="{
               'active-route-top':
-                ''.includes($route.path.split('/console-settings')[1]) ||
-                ''.includes($route.path.split('/console/serial-over-lan')[1]) ||
-                ''.includes($route.path.split('/console/kvm')[1]),
+                ''.includes($route.path.split('/console/settings')[1]) ||
+                ''.includes(
+                  $route.path.split('/operations/serial-over-lan')[1]
+                ) ||
+                ''.includes($route.path.split('/operations/kvm')[1]),
             }"
           >
             {{ $t('subHeader.console') }}
@@ -105,7 +108,7 @@ export default {
   box-shadow: inset 0 0 0 3px $padding-color, inset 0 0 0 5px $outline-color;
 }
 .sub-header {
-  height: 39px;
+  height: $second-header-height;
 
   .subheader-button {
     margin-left: 10px;
@@ -133,7 +136,7 @@ export default {
     padding: 0;
     background-color: $navbar-color;
     @include media-breakpoint-up($responsive-layout-bp) {
-      height: 39px;
+      height: $second-header-height;
     }
 
     .helper-menu {
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 3ecc9474..3444910f 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -2,8 +2,8 @@
   <div class="app-container">
     <app-header
       ref="focusTarget"
+      :key="routerKey"
       class="app-header"
-      :router-key="routerKey"
       @refresh="refresh"
     />
     <sub-header ref="focusTarget" class="sub-header" :router-key="routerKey" />
@@ -63,7 +63,7 @@ export default {
 .app-container {
   display: grid;
   grid-template-columns: 100%;
-  grid-template-rows: 56px 39px 1fr;
+  grid-template-rows: $first-header-height $second-header-height 1fr;
   grid-template-areas:
     'header'
     'subheader'
@@ -88,7 +88,7 @@ export default {
 .sub-header {
   grid-area: subheader;
   position: sticky;
-  top: 56px;
+  top: $first-header-height;
   z-index: $zindex-fixed - 1;
 }
 
diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json
index 407292fc..61a53843 100644
--- a/src/locales/ru-RU.json
+++ b/src/locales/ru-RU.json
@@ -95,8 +95,8 @@
       "emptySearchMessage": "Нет объектов, соответствующих поиску",
       "expandTableRow": "Развернуть",
       "fromDate": "Начиная с даты",
-      "items": "Всего объектов: %{count}",
-      "itemsPerPage": "Объектов на странице",
+      "items": "Всего записей: %{count}",
+      "itemsPerPage": "Записей на странице",
       "selectAll": "Выбрать всё",
       "selectItem": "Выбрать объект",
       "selectedItems": "%{filterCount} из %{count} объектов",
@@ -192,7 +192,7 @@
     "inventory": "@:appPageTitle.inventory",
     "kvm": "@:appPageTitle.kvm",
     "ldap": "@:appPageTitle.ldap",
-    "logs": "Логи",
+    "logs": "Журналы",
     "userManagement": "@:appPageTitle.userManagement",
     "network": "@:appPageTitle.network",
     "overview": "@:appPageTitle.overview",
@@ -202,7 +202,7 @@
     "rebootBmc": "@:appPageTitle.rebootBmc",
     "policies": "@:appPageTitle.policies",
     "sensors": "@:appPageTitle.sensors",
-    "serialOverLan": "Консоль SOL",
+    "serialOverLan": "Серийная консоль SOL",
     "serverPowerOperations": "@:appPageTitle.serverPowerOperations",
     "certificates": "@:appPageTitle.certificates",
     "virtualMedia": "@:appPageTitle.virtualMedia",
@@ -210,12 +210,7 @@
     "description": {
       "configuration": "Конфигурация"
     }
-  },  
-  "kvmNavigation": {
-    "ConsoleSettings": "Настройки консоли",
-    "serialOverLan": "Графическая консоль",
-    "kvm": "Командная строка"
-  },
+  }, 
 
   "appPageTitle": {
     "changePassword": "Изменить пароль",
@@ -227,7 +222,7 @@
     "factoryReset": "Сброс до заводских настроек",
     "firmware": "Встроенное ПО",
     "inventory": "Перечень оборудования и LED",
-    "kvm": "KVM",
+    "kvm": "Графическая консоль KVM",
     "ldap": "LDAP",
     "userManagement": "Управление пользователями",
     "login": "Логин",
@@ -244,7 +239,8 @@
     "serverPowerOperations": "Управление питанием и ОС сервера",
     "certificates": "Сертификаты",
     "keyClear": "Очистка ключа",
-    "virtualMedia": "Виртуальные носители"
+    "virtualMedia": "Виртуальные носители",
+    "consoleSettings": "Настройки консоли"
   },
   "pageChangePassword": {
     "changePassword": "Изменить пароль",
@@ -337,8 +333,7 @@
   },
   "pageEventLogs": {
     "additionalDataUri": "Загрузить дополнительные данные",
-    "resolve": "Разрешить",
-    "event_resolve": "Событие решено",
+    "resolve": "Событие решено",
     "archive": "Архивировать",
     "resolved": "Решено",
     "unresolve": "Отменить разрешение",
@@ -392,7 +387,7 @@
     "modal": {
       "resetBiosTitle": "Сбросить настройки встроенного ПО сервера",
       "resetBiosHeader": "Вы хотите сбросить настройки встроенного ПО сервера?",
-      "resetBiosSubmitText": "Сбросить настройки встроенного ПО сервера",
+      "resetBiosSubmitText": "Сбросить настройки встроенного ПО",
       "resetBiosSettingsList": {
         "item1": "Все ручные настройки будут удалены.",
         "item2": "Конфигурация разделов и хранилище ключей могут быть восстановлены, если существует резервная копия."
@@ -662,7 +657,7 @@
       "accountStatus": "Статус учётной записи",
       "automaticAfterTimeout": "Автоматически после истечения таймаута",
       "batchDeleteConfirmMessage": "Вы уверены, что хотите удалить %{count} пользователя? Это действие нельзя отменить. | Вы уверены, что хотите удалить %{count} пользователей? Это действие нельзя отменить.",
-      "cannotStartWithANumber": "Не может начинаться с цифры",
+      "cannotStartWithANumber": "Не начинается с цифры",
       "clickSaveToUnlockAccount": "Нажмите \"Сохранить\" для разблокировки учётной записи",
       "confirmUserPassword": "Подтвердите пароль пользователя",
       "deleteConfirmMessage": "Вы уверены, что хотите удалить пользователя '%{user}'? Это действие нельзя отменить.",
@@ -825,7 +820,8 @@
       "editIpv4": "Редактировать IPv4 адрес",
       "gateway": "Шлюз",
       "ipAddress": "IP адрес",
-      "subnet": "Маска подсети"
+      "subnet": "Маска подсети",
+      "actions": "Действия"
     },
     "toast": {
       "errorSaveNetworkSettings": "Ошибка обновления %{setting} настроек.",
@@ -863,7 +859,7 @@
     },
     "toast": {
       "errorRebootStart": "Ошибка перезапуска BMC.",
-      "successRebootStart": "Перезапуск BMC."
+      "successRebootStart": "Команда на перезагрузку отправлена."
     }
   },
   "pagePolicies": {
@@ -932,7 +928,8 @@
     "disconnected": "Отключено",
     "openNewTab": "Открыть в новом окне",
     "status": "Статус",
-    "subTitle": "SOL консоль перенаправляет вывод последовательного порта сервера в это окно."
+    "subTitle": "SOL консоль перенаправляет вывод последовательного порта сервера в это окно.",
+    "disconnectedAlertMessage": "Не подключено"
   },
   "pageServerPowerOperations": {
     "currentStatus": "Текущий статус",
diff --git a/src/router/routes.js b/src/router/routes.js
index 439815ae..7aae4ce2 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -7,7 +7,7 @@ import FactoryReset from '@/views/Operations/FactoryReset';
 import Firmware from '@/views/Operations/Firmware';
 import Inventory from '@/views/HardwareStatus/Inventory';
 import Kvm from '@/views/Operations/Kvm';
-// import KvmConsole from '@/views/Operations/Kvm/KvmConsole'; Full screen console
+import KvmConsole from '@/views/Operations/Kvm/KvmConsole';
 import Sessions from '../views/SecurityAndAccess/Sessions';
 import Ldap from '@/views/SecurityAndAccess/Ldap';
 import UserManagement from '@/views/SecurityAndAccess/UserManagement';
@@ -24,14 +24,14 @@ import Policies from '@/views/SecurityAndAccess/Policies';
 import KeyClear from '@/views/Operations/KeyClear';
 import Sensors from '@/views/HardwareStatus/Sensors';
 import SerialOverLan from '@/views/Operations/SerialOverLan';
-// import SerialOverLanConsole from '@/views/Operations/SerialOverLan/SerialOverLanConsole'; Full screen SOL
+import SerialOverLanConsole from '@/views/Operations/SerialOverLan/SerialOverLanConsole';
 import ServerPowerOperations from '@/views/Operations/ServerPowerOperations';
 import Certificates from '@/views/SecurityAndAccess/Certificates';
 import VirtualMedia from '@/views/Operations/VirtualMedia';
 import Power from '@/views/ResourceManagement/Power';
 import InformationAndFAQ from '@/views/InformationAndFAQ';
 
-import SystemDescription from '@/views/SystemDescription/Info';
+// import SystemDescription from '@/views/SystemDescription/Info';
 import SystemNetwork from '@/views/SystemDescription/Network';
 import ServerParametrs from '@/views/SystemDescription/ServerParametrs';
 // import SystemEventLogs from '@/views/SystemDescription/SystemEventLogs';
@@ -50,7 +50,6 @@ import MemoryStaticPage from '@/views/MemoryModules/Specification';
 import PowerStaticPage from '@/views/PowerSupplies/Specification';
 import PowerDynamicPage from '@/views/PowerSupplies/DynamicInfo';
 
-import SILAEventLogs from '@/views/SILA/EventLogs';
 import SILAAnalyticalPanel from '@/views/SILA/AnalyticalPanel';
 
 import SILARaidSpecification from '@/views/SILA/RAID/Specification';
@@ -99,22 +98,47 @@ const routes = [
     ],
   },
   {
-    path: '/',
+    path: '/console',
+    component: ConsoleLayout,
     meta: {
       requiresAuth: true,
     },
-    component: AppLayout,
     children: [
       {
-        path: '/console-settings',
+        path: 'serial-over-lan-console',
+        name: 'serial-over-lan-console',
+        component: SerialOverLanConsole,
+        meta: {
+          title: i18n.t('appPageTitle.serialOverLan'),
+        },
+      },
+      {
+        path: 'kvm',
+        name: 'kvm-console',
+        component: KvmConsole,
+        meta: {
+          title: i18n.t('appPageTitle.kvm'),
+        },
+      },
+      {
+        path: '/settings',
         name: 'console-settings',
         component: ConsoleSettings,
         meta: {
-          title: i18n.t('kvmNavigation.ConsoleSettings'),
+          title: i18n.t('appPageTitle.ConsoleSettings'),
         },
       },
+    ],
+  },
+  {
+    path: '/',
+    meta: {
+      requiresAuth: true,
+    },
+    component: AppLayout,
+    children: [
       {
-        path: '/console',
+        path: '/operations',
         component: ConsoleLayout,
         meta: {
           requiresAuth: true,
@@ -122,18 +146,18 @@ const routes = [
         children: [
           {
             path: 'serial-over-lan',
-            name: 'serial-over-lan-console',
+            name: 'serial-over-lan',
             component: SerialOverLan,
             meta: {
-              title: i18n.t('kvmNavigation.serialOverLan'),
+              title: i18n.t('appPageTitle.serialOverLan'),
             },
           },
           {
             path: 'kvm',
-            name: 'kvm-console',
+            name: 'kvm',
             component: Kvm,
             meta: {
-              title: i18n.t('kvmNavigation.kvm'),
+              title: i18n.t('appPageTitle.kvm'),
             },
           },
         ],
@@ -141,7 +165,7 @@ const routes = [
       {
         path: '/',
         name: 'info',
-        component: SystemDescription,
+        component: Inventory,
         meta: {
           title: i18n.t('appNavigation.systemInformaion'),
           description: i18n.t('appNavigation.overviewInfo'),
@@ -157,14 +181,6 @@ const routes = [
         },
       },
       {
-        path: '/event-logs',
-        name: 'event-logs',
-        component: SILAEventLogs,
-        meta: {
-          title: i18n.t('appNavigation.eventLogs'),
-        },
-      },
-      {
         path: '/server-parametrs',
         name: 'server-parametrs',
         component: ServerParametrs,
@@ -403,7 +419,7 @@ const routes = [
         },
       },
       {
-        path: '/logs/event-logs-old',
+        path: '/logs/event-logs',
         name: 'event-logs',
         component: EventLogs,
         meta: {
@@ -423,7 +439,8 @@ const routes = [
         name: 'inventory',
         component: Inventory,
         meta: {
-          title: i18n.t('appPageTitle.inventory'),
+          title: i18n.t('appNavigation.systemInformaion'),
+          description: i18n.t('appNavigation.overviewInfo'),
         },
       },
       {
@@ -554,14 +571,6 @@ const routes = [
           title: i18n.t('appPageTitle.rebootBmc'),
         },
       },
-      // {
-      //   path: '/operations/serial-over-lan',
-      //   name: 'serial-over-lan',
-      //   component: SerialOverLan,
-      //   meta: {
-      //     title: i18n.t('appPageTitle.serialOverLan'),
-      //   },
-      // },
       {
         path: '/operations/server-power-operations',
         name: 'server-power-operations',
diff --git a/src/views/HardwareStatus/Inventory/Inventory.vue b/src/views/HardwareStatus/Inventory/Inventory.vue
index 0e97f711..bfb930ab 100644
--- a/src/views/HardwareStatus/Inventory/Inventory.vue
+++ b/src/views/HardwareStatus/Inventory/Inventory.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-container fluid class="p-0 m-0">
+  <b-container id="page-inventory" fluid class="p-0 m-0">
     <page-title />
     <!-- Service indicators -->
     <service-indicator />
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue b/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue
index f7fef0e3..47edf3a5 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue
@@ -10,6 +10,7 @@
       responsive="md"
       :items="items"
       :fields="fields"
+      show-empty
       :empty-text="$t('global.table.emptyMessage')"
       :busy="isBusy"
     >
@@ -89,30 +90,44 @@ export default {
         {
           key: 'expandRow',
           label: '',
-          tdClass: 'table-row-expand',
+          thClass: 'bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'table-row-expand bootstrap-rounded-table__td',
         },
         {
           key: 'name',
           label: this.$t('pageInventory.table.id'),
           formatter: this.dataFormatter,
           sortable: true,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'partNumber',
           label: this.$t('pageInventory.table.partNumber'),
           formatter: this.dataFormatter,
           sortable: true,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'locationNumber',
           label: this.$t('pageInventory.table.locationNumber'),
           formatter: this.dataFormatter,
           sortable: true,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'identifyLed',
           label: this.$t('pageInventory.table.identifyLed'),
           formatter: this.dataFormatter,
+          thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: ' bootstrap-rounded-table__td',
         },
       ],
       expandRowLabel: expandRowLabel,
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
index 41a88c2e..21a07e5f 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
@@ -18,6 +18,7 @@
           variant="link"
           data-test-id="hardwareStatus-button-expandBmc"
           :title="expandRowLabel"
+          class="btn-icon-only"
           @click="toggleRowDetails(row)"
         >
           <icon-chevron />
@@ -183,27 +184,43 @@ export default {
         {
           key: 'expandRow',
           label: '',
-          tdClass: 'table-row-expand',
+          thStyle: { maxWidth: '27px' },
+          tdStyle: { maxWidth: '27px' },
+          thClass: 'bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'table-row-expand bootstrap-rounded-table__td',
         },
         {
           key: 'id',
           label: this.$t('pageInventory.table.id'),
           formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'health',
           label: this.$t('pageInventory.table.health'),
           formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'locationNumber',
           label: this.$t('pageInventory.table.locationNumber'),
           formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'identifyLed',
           label: this.$t('pageInventory.table.identifyLed'),
           formatter: this.dataFormatter,
+          thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: ' bootstrap-rounded-table__td',
         },
       ],
       expandRowLabel: expandRowLabel,
@@ -246,37 +263,37 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.row {
-  margin: 0px;
-  flex-wrap: nowrap;
-}
-.fans-table-col-first__cell {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: flex-start;
-}
+// .row {
+//   margin: 0px;
+//   flex-wrap: nowrap;
+// }
+// .fans-table-col-first__cell {
+//   display: flex;
+//   flex-flow: row nowrap;
+//   align-items: center;
+//   justify-content: flex-start;
+// }
 
-.status__img {
-  margin-right: 7px;
-}
+// .status__img {
+//   margin-right: 7px;
+// }
 
-.bold-12px__caps {
-  color: $text-secondary;
-}
+// .bold-12px__caps {
+//   color: $text-secondary;
+// }
 
-.attrib-names {
-  border-bottom: 1px solid $faint-secondary-primary-10;
-  color: $text-secondary !important;
-  font-weight: 600;
-}
+// .attrib-names {
+//   border-bottom: 1px solid $faint-secondary-primary-10;
+//   color: $text-secondary !important;
+//   font-weight: 600;
+// }
 
-.custom-switch {
-  margin: 0;
-}
+// .custom-switch {
+//   margin: 0;
+// }
 
-.btn-link {
-  width: 30px !important;
-  height: 20px !important;
-}
+// .btn-link {
+//   width: 30px !important;
+//   height: 20px !important;
+// }
 </style>
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue b/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue
index 60f593f4..c213aa97 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue
@@ -137,28 +137,41 @@ export default {
         {
           key: 'expandRow',
           label: '',
-          tdClass: 'table-row-expand',
+          thClass: 'bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'table-row-expand bootstrap-rounded-table__td',
         },
         {
           key: 'id',
           label: this.$t('pageInventory.table.id'),
           formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'health',
           label: this.$t('pageInventory.table.health'),
           formatter: this.dataFormatter,
-          tdClass: 'text-nowrap',
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'text-nowrap regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'locationNumber',
           label: this.$t('pageInventory.table.locationNumber'),
           formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'identifyLed',
           label: this.$t('pageInventory.table.identifyLed'),
           formatter: this.dataFormatter,
+          thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: ' bootstrap-rounded-table__td',
         },
       ],
       expandRowLabel: expandRowLabel,
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue b/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
index 020ab1f6..430e86af 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
@@ -190,28 +190,41 @@ export default {
         {
           key: 'expandRow',
           label: '',
-          tdClass: 'table-row-expand',
+          thClass: 'bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'table-row-expand bootstrap-rounded-table__td',
         },
         {
           key: 'id',
           label: this.$t('pageInventory.table.id'),
           formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'health',
           label: this.$t('pageInventory.table.health'),
           formatter: this.dataFormatter,
-          tdClass: 'text-nowrap',
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'text-nowrap regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'locationNumber',
           label: this.$t('pageInventory.table.locationNumber'),
           formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'identifyLed',
           label: this.$t('pageInventory.table.identifyLed'),
           formatter: this.dataFormatter,
+          thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: ' bootstrap-rounded-table__td',
         },
       ],
       searchFilter: searchFilter,
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
index 8706f498..e1932d53 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
@@ -129,32 +129,45 @@ export default {
         {
           key: 'expandRow',
           label: '',
-          tdClass: 'table-row-expand',
           sortable: false,
+          thClass: 'bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'table-row-expand bootstrap-rounded-table__td',
         },
         {
           key: 'id',
           label: this.$t('pageInventory.table.id'),
           formatter: this.dataFormatter,
           sortable: true,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'health',
           label: this.$t('pageInventory.table.health'),
           formatter: this.dataFormatter,
           sortable: true,
-          tdClass: 'text-nowrap',
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'text-nowrap regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'partNumber',
           label: this.$t('pageInventory.table.partNumber'),
           formatter: this.dataFormatter,
           sortable: true,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'serialNumber',
           label: this.$t('pageInventory.table.serialNumber'),
           formatter: this.dataFormatter,
+          thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: ' bootstrap-rounded-table__td',
         },
       ],
       searchFilter: searchFilter,
diff --git a/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue b/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
index 9417d9d6..7bb14a52 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
@@ -148,32 +148,45 @@ export default {
         {
           key: 'expandRow',
           label: '',
-          tdClass: 'table-row-expand',
           sortable: false,
+          thClass: 'bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'table-row-expand bootstrap-rounded-table__td',
         },
         {
           key: 'id',
           label: this.$t('pageInventory.table.id'),
           formatter: this.dataFormatter,
           sortable: true,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'health',
           label: this.$t('pageInventory.table.health'),
           formatter: this.dataFormatter,
           sortable: true,
-          tdClass: 'text-nowrap',
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'text-nowrap regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'locationNumber',
           label: this.$t('pageInventory.table.locationNumber'),
           formatter: this.dataFormatter,
           sortable: true,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'identifyLed',
           label: this.$t('pageInventory.table.identifyLed'),
           formatter: this.dataFormatter,
+          thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: ' bootstrap-rounded-table__td',
         },
       ],
       searchFilter: searchFilter,
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue b/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue
index 3e25747d..d81a0490 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue
@@ -183,33 +183,46 @@ export default {
         {
           key: 'expandRow',
           label: '',
-          tdClass: 'table-row-expand',
           sortable: false,
+          thClass: 'bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'table-row-expand bootstrap-rounded-table__td',
         },
         {
           key: 'id',
           label: this.$t('pageInventory.table.id'),
           formatter: this.dataFormatter,
           sortable: true,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'health',
           label: this.$t('pageInventory.table.health'),
           formatter: this.dataFormatter,
           sortable: true,
-          tdClass: 'text-nowrap',
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'text-nowrap regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'locationNumber',
           label: this.$t('pageInventory.table.locationNumber'),
           formatter: this.dataFormatter,
           sortable: true,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'identifyLed',
           label: this.$t('pageInventory.table.identifyLed'),
           formatter: this.dataFormatter,
           sortable: false,
+          thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: ' bootstrap-rounded-table__td',
         },
       ],
       processors: [
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue b/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue
index 1576c8d8..9ddcaa69 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue
@@ -29,7 +29,7 @@
       <!-- Health -->
       <template #cell(health)="{ value }">
         <status-icon :status="statusIcon(value)" />
-        {{ value }}
+        {{ statusIcon(value) }}
       </template>
 
       <template #cell(locationIndicatorActive)="{ item }">
@@ -171,34 +171,50 @@ export default {
         {
           key: 'expandRow',
           label: '',
-          tdClass: 'table-row-expand',
+          thStyle: { minWidth: '29px' },
+          thClass: 'bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'table-row-expand bootstrap-rounded-table__td',
         },
         {
           key: 'id',
           label: this.$t('pageInventory.table.id'),
           formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'hardwareType',
           label: this.$t('pageInventory.table.hardwareType'),
           formatter: this.dataFormatter,
-          tdClass: 'text-nowrap',
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'text-nowrap regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'health',
           label: this.$t('pageInventory.table.health'),
           formatter: this.dataFormatter,
-          tdClass: 'text-nowrap',
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'locationNumber',
           label: this.$t('pageInventory.table.locationNumber'),
           formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'locationIndicatorActive',
           label: this.$t('pageInventory.table.identifyLed'),
           formatter: this.dataFormatter,
+          thClass: ' semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: ' bootstrap-rounded-table__td',
         },
       ],
       expandRowLabel: expandRowLabel,
diff --git a/src/views/Logs/EventLogs/EventLogs.vue b/src/views/Logs/EventLogs/EventLogs.vue
index eb1c703a..441d8cfa 100644
--- a/src/views/Logs/EventLogs/EventLogs.vue
+++ b/src/views/Logs/EventLogs/EventLogs.vue
@@ -1,63 +1,95 @@
 <template>
-  <b-container fluid="xxl pt-0 m-2">
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+    class="logs-section"
+  >
     <page-title />
+    <div class="logs-head-container">
+      <div class="semi-bold-12px">
+        <table-cell-count
+          :filtered-items-count="filteredRows"
+          :total-number-of-cells="allLogs.length"
+        ></table-cell-count>
+      </div>
+      <search
+        :placeholder="$t('pageEventLogs.table.searchLogs')"
+        data-test-id="eventLogs-input-searchLogs"
+        style="margin: 13px; width: 35%"
+        @change-search="onChangeSearchInput"
+        @clear-search="onClearSearchInput"
+      />
+    </div>
     <b-row class="align-items-start">
-      <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4">
-        <search
-          :placeholder="$t('pageEventLogs.table.searchLogs')"
-          data-test-id="eventLogs-input-searchLogs"
-          @change-search="onChangeSearchInput"
-          @clear-search="onClearSearchInput"
-        />
-        <div class="ml-sm-4">
-          <table-cell-count
-            :filtered-items-count="filteredRows"
-            :total-number-of-cells="allLogs.length"
-          ></table-cell-count>
-        </div>
-      </b-col>
-      <b-col sm="8" md="7" xl="6">
+      <b-col md="12" xl="6">
         <table-date-filter @change="onChangeDateTimeFilter" />
       </b-col>
-    </b-row>
-    <b-row>
-      <b-col class="text-right">
+      <b-col
+        md="12"
+        xl="6"
+        class="d-flex align-items-end justify-content-between mt-3"
+      >
         <table-filter :filters="tableFilters" @filter-change="onFilterChange" />
-        <b-button
-          variant="link"
-          :disabled="allLogs.length === 0"
-          @click="deleteAllLogs"
+        <popover-with-slot
+          id="popover-delete"
+          :button-label="$t('pageEventLogs.clear')"
+          :popup-label="$t('pageEventLogs.clearLogs_popup')"
+          placement="left"
+          :action="deleteAllLogs"
         >
-          <icon-delete /> {{ $t('global.action.deleteAll') }}
-        </b-button>
+          <b-button
+            id="popover-delete"
+            ref="button"
+            variant="link"
+            style="color: $red-brand-primary"
+            :disabled="allLogs.length === 0"
+          >
+            <icon-delete /> {{ $t('pageEventLogs.clearLogs') }}
+          </b-button>
+        </popover-with-slot>
         <b-button
           variant="primary"
+          size="md"
           :class="{ disabled: allLogs.length === 0 }"
           :download="exportFileNameByDate()"
           :href="href"
         >
-          <icon-export /> {{ $t('global.action.exportAll') }}
+          <icon-download /> {{ $t('global.action.exportAll') }}
         </b-button>
       </b-col>
     </b-row>
     <b-row>
-      <b-col>
+      <b-col id="logs-table-wrapper" class="m-0 p-0">
         <table-toolbar
           ref="toolbar"
           :selected-items-count="selectedRows.length"
           :actions="batchActions"
           @clear-selected="clearSelectedRows($refs.table)"
-          @batch-action="onBatchAction"
         >
           <template #toolbar-buttons>
-            <b-button variant="primary" @click="resolveLogs">
+            <b-button
+              size="md"
+              variant="secondary"
+              style="margin-right: 1rem"
+              @click="resolveLogs"
+            >
+              <img
+                class="sourse__img"
+                src="@/assets/images/event-logs/resolved-button.svg"
+              />
               {{ $t('pageEventLogs.resolve') }}
             </b-button>
-            <b-button variant="primary" @click="unresolveLogs">
+            <b-button
+              size="md"
+              variant="primary"
+              style="margin-right: 1rem"
+              @click="unresolveLogs"
+            >
               {{ $t('pageEventLogs.unresolve') }}
             </b-button>
             <table-toolbar-export
               :data="batchExportData"
+              style="margin-right: 1rem"
               :file-name="exportFileNameByDate()"
             />
           </template>
@@ -66,6 +98,7 @@
           id="table-event-logs"
           ref="table"
           responsive="md"
+          class="logs-table"
           selectable
           no-select-on-click
           sort-icon-left
@@ -73,7 +106,9 @@
           no-sort-reset
           sort-desc
           show-empty
+          no-border-collapse
           sort-by="id"
+          :sticky-header="true"
           :fields="fields"
           :items="filteredLogs"
           :sort-compare="onSortCompare"
@@ -106,126 +141,123 @@
               <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
             </b-form-checkbox>
           </template>
-
-          <!-- Expand chevron icon -->
-          <template #cell(expandRow)="row">
-            <b-button
-              variant="link"
-              :aria-label="expandRowLabel"
-              :title="expandRowLabel"
-              class="btn-icon-only"
-              @click="toggleRowDetails(row)"
+          <!-- Description column -->
+          <template #cell(description)="data">
+            <b-row class="semi-bold-16px tretiatry">
+              {{ filteredLogs[data.index].name }}
+            </b-row>
+            <b-row
+              class="regular-12px tretiatry pointer"
+              @click="toggleRowDetails(data)"
             >
-              <icon-chevron />
-            </b-button>
+              {{ data.value }}
+            </b-row>
           </template>
 
           <template #row-details="{ item }">
-            <b-container fluid>
+            <b-container
+              fluid
+              style="border-bottom: 1px solid rgba(26, 62, 91, 0.1)"
+            >
               <b-row>
-                <b-col>
+                <b-col class="mt-1">
                   <dl>
                     <!-- Name -->
-                    <dt>{{ $t('pageEventLogs.table.name') }}:</dt>
-                    <dd>{{ dataFormatter(item.name) }}</dd>
+                    <dt class="semi-bold-12px">
+                      {{ $t('pageEventLogs.table.name') }}:
+                    </dt>
+                    <dd class="regular-12px">{{ dataFormatter(item.name) }}</dd>
                   </dl>
                   <dl>
-                    <!-- Type -->
-                    <dt>{{ $t('pageEventLogs.table.type') }}:</dt>
-                    <dd>{{ dataFormatter(item.type) }}</dd>
+                    <!-- Description -->
+                    <dt class="semi-bold-12px">
+                      {{ $t('pageEventLogs.table.description') }}:
+                    </dt>
+                    <dd class="regular-12px tretiatry">
+                      {{ dataFormatter(item.description) }}
+                    </dd>
                   </dl>
-                </b-col>
-                <b-col>
                   <dl>
-                    <!-- Modified date -->
-                    <dt>{{ $t('pageEventLogs.table.modifiedDate') }}:</dt>
-                    <dd v-if="item.modifiedDate">
-                      {{ item.modifiedDate | formatDate }}
-                      {{ item.modifiedDate | formatTime }}
+                    <!-- Type -->
+                    <dt class="semi-bold-12px">
+                      {{ $t('pageEventLogs.table.type') }}:
+                    </dt>
+                    <dd class="regular-12px tretiatry">
+                      {{ dataFormatter(item.type) }}
                     </dd>
-                    <dd v-else>--</dd>
                   </dl>
                 </b-col>
-                <b-col class="text-nowrap">
-                  <b-button
-                    class="btn btn-secondary float-right"
-                    :href="item.additionalDataUri"
-                    target="_blank"
-                  >
-                    <icon-download />{{ $t('pageEventLogs.additionalDataUri') }}
-                  </b-button>
-                </b-col>
               </b-row>
             </b-container>
           </template>
 
           <!-- Severity column -->
           <template #cell(severity)="{ value }">
-            <status-icon v-if="value" :status="statusIcon(value)" />
-            {{ value }}
+            <span
+              :class="`indicators-${value}`"
+              class="bold-12px__caps"
+              style="text-overflow: ellipsis; white-space: nowrap"
+            >
+              {{ value }}</span
+            >
           </template>
           <!-- Date column -->
           <template #cell(date)="{ value }">
-            <p class="mb-0">{{ value | formatDate }}</p>
-            <p class="mb-0">{{ value | formatTime }}</p>
+            <img
+              src="@/assets/images/event-logs/time.svg"
+              class="sourse__img"
+            />
+            <span v-if="value" class="regular-12px quaternary">
+              {{ value | formatDate }}
+            </span>
+            <span v-if="value" class="regular-12px quaternary">
+              в {{ value | formatTimeShort }}
+            </span>
           </template>
 
           <!-- Status column -->
-          <template #cell(status)="row">
-            <b-form-checkbox
-              v-model="row.item.status"
-              name="switch"
-              switch
-              @change="changelogStatus(row.item)"
-            >
-              <span v-if="row.item.status">
+          <template #cell(status)="{ value }">
+            <b-row v-if="value === true">
+              <img
+                class="sourse__img"
+                src="@/assets/images/event-logs/resolved.svg"
+              />
+              <span class="semi-bold-12px__caps resolved">
                 {{ $t('pageEventLogs.resolved') }}
               </span>
-              <span v-else> {{ $t('pageEventLogs.unresolved') }} </span>
-            </b-form-checkbox>
-          </template>
-          <template #cell(filterByStatus)="{ value }">
-            {{ value }}
-          </template>
-
-          <!-- Actions column -->
-          <template #cell(actions)="row">
-            <table-row-action
-              v-for="(action, index) in row.item.actions"
-              :key="index"
-              :value="action.value"
-              :title="action.title"
-              :row-data="row.item"
-              :export-name="exportFileNameByDate('export')"
-              :data-test-id="`eventLogs-button-deleteRow-${row.index}`"
-              @click-table-action="onTableRowAction($event, row.item)"
-            >
-              <template #icon>
-                <icon-export v-if="action.value === 'export'" />
-                <icon-trashcan v-if="action.value === 'delete'" />
-              </template>
-            </table-row-action>
+            </b-row>
+            <b-row v-else>
+              <img
+                class="sourse__img"
+                src="@/assets/images/event-logs/not-resolved.svg"
+              />
+              <span class="semi-bold-12px__caps not-resolved">
+                {{ $t('pageEventLogs.unresolved') }}</span
+              >
+            </b-row>
           </template>
         </b-table>
       </b-col>
     </b-row>
-
     <!-- Table pagination -->
-    <b-row>
-      <b-col sm="6">
+    <b-row class="logs-pagination-container">
+      <b-col sm="6" class="d-flex align-items-center justify-content-start">
         <b-form-group
           class="table-pagination-select"
           :label="$t('global.table.itemsPerPage')"
-          label-for="pagination-items-per-page"
+          label-class="semi-bold-16px mb-0"
+          label-for="pagination"
         >
           <b-form-select
-            id="pagination-items-per-page"
+            id="pagination"
             v-model="perPage"
+            class="select-per-page semi-bold-16px mb-0"
             :options="itemsPerPageOptions"
           />
         </b-form-group>
       </b-col>
-      <b-col sm="6">
+      <b-col sm="6" class="d-flex align-items-center justify-content-end">
+        <span class="semi-bold-16px"> Страницы </span>
         <b-pagination
           v-model="currentPage"
           first-number
@@ -241,21 +273,17 @@
 
 <script>
 import IconDelete from '@carbon/icons-vue/es/trash-can/20';
-import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
-import IconExport from '@carbon/icons-vue/es/document--export/20';
-import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
 import IconDownload from '@carbon/icons-vue/es/download/20';
 import { omit } from 'lodash';
 
 import PageTitle from '@/components/Global/PageTitle';
-import StatusIcon from '@/components/Global/StatusIcon';
 import Search from '@/components/Global/Search';
 import TableCellCount from '@/components/Global/TableCellCount';
 import TableDateFilter from '@/components/Global/TableDateFilter';
 import TableFilter from '@/components/Global/TableFilter';
-import TableRowAction from '@/components/Global/TableRowAction';
 import TableToolbar from '@/components/Global/TableToolbar';
 import TableToolbarExport from '@/components/Global/TableToolbarExport';
+import PopoverWithSlot from '@/components/Global/SilaComponents/PopoverWithSlot';
 
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
 import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
@@ -278,23 +306,20 @@ import TableRowExpandMixin, {
 import SearchFilterMixin, {
   searchFilter,
 } from '@/components/Mixins/SearchFilterMixin';
+// import { headerHeight } from '@/assets/styles/bmc/helpers/_variables';
 
 export default {
   components: {
     IconDelete,
-    IconExport,
-    IconTrashcan,
-    IconChevron,
     IconDownload,
     PageTitle,
     Search,
-    StatusIcon,
     TableCellCount,
     TableFilter,
-    TableRowAction,
     TableToolbar,
     TableToolbarExport,
     TableDateFilter,
+    PopoverWithSlot,
   },
   mixins: [
     BVPaginationMixin,
@@ -316,47 +341,54 @@ export default {
   data() {
     return {
       isBusy: true,
+      sortDesc: true,
+      // headerHeight,
+      // stickyHeader: 'calc(100vh - 200px - #{$header-height})',
       fields: [
         {
-          key: 'expandRow',
-          label: '',
-          tdClass: 'table-row-expand',
-        },
-        {
           key: 'checkbox',
           sortable: false,
+          thClass: ' logs-table__th',
+          tdClass: 'logs-table__td',
         },
         {
           key: 'id',
           label: this.$t('pageEventLogs.table.id'),
           sortable: true,
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'semi-bold-12px logs-table__td',
+        },
+        {
+          key: 'description',
+          label: this.$t('pageEventLogs.table.about_event'),
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td',
         },
         {
           key: 'severity',
           label: this.$t('pageEventLogs.table.severity'),
-          sortable: true,
-          tdClass: 'text-nowrap',
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td',
+        },
+        {
+          key: 'source',
+          label: this.$t('pageEventLogs.table.source'),
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td semi-bold-12px__caps tretiatry ',
         },
         {
           key: 'date',
           label: this.$t('pageEventLogs.table.date'),
           sortable: true,
-          tdClass: 'text-nowrap',
-        },
-        {
-          key: 'description',
-          label: this.$t('pageEventLogs.table.description'),
-          tdClass: 'text-break',
+          thClass: `bold-12px__caps logs-table__th`,
+          tdClass: 'logs-table__td',
         },
         {
           key: 'status',
+          sortable: true,
           label: this.$t('pageEventLogs.table.status'),
-        },
-        {
-          key: 'actions',
-          sortable: false,
-          label: '',
-          tdClass: 'text-right text-nowrap',
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td',
         },
       ],
       tableFilters: [
@@ -431,7 +463,7 @@ export default {
       return this.getFilteredTableData(
         this.filteredLogsByDate,
         this.activeFilters
-      );
+      ).filter((el) => el.description);
     },
   },
   created() {
@@ -454,21 +486,10 @@ export default {
         .catch(({ message }) => this.errorToast(message));
     },
     deleteAllLogs() {
-      this.$bvModal
-        .msgBoxConfirm(this.$t('pageEventLogs.modal.deleteAllMessage'), {
-          title: this.$t('pageEventLogs.modal.deleteAllTitle'),
-          okTitle: this.$t('global.action.delete'),
-          okVariant: 'danger',
-          cancelTitle: this.$t('global.action.cancel'),
-        })
-        .then((deleteConfirmed) => {
-          if (deleteConfirmed) {
-            this.$store
-              .dispatch('eventLog/deleteAllEventLogs', this.allLogs)
-              .then((message) => this.successToast(message))
-              .catch(({ message }) => this.errorToast(message));
-          }
-        });
+      this.$store
+        .dispatch('eventLog/deleteAllEventLogs', this.allLogs)
+        .then((message) => this.successToast(message))
+        .catch(({ message }) => this.errorToast(message));
     },
     deleteLogs(uris) {
       this.$store
@@ -602,3 +623,21 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.row {
+  margin: 0px;
+}
+
+.not-resolved {
+  color: $text-quaternary;
+}
+
+.table-pagination-select {
+  line-height: 1.8rem;
+}
+
+.form-group,
+.b-pagination {
+  margin: 0px !important;
+}
+</style>
diff --git a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
index d116d2ed..b13cef46 100644
--- a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
+++ b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
@@ -1,26 +1,29 @@
 <template>
-  <b-container fluid="xl">
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+    class="logs-section"
+  >
     <page-title />
-    <b-row class="align-items-start">
-      <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4">
-        <search
-          :placeholder="$t('pagePostCodeLogs.table.searchLogs')"
-          @change-search="onChangeSearchInput"
-          @clear-search="onClearSearchInput"
-        />
-        <div class="ml-sm-4">
-          <table-cell-count
-            :filtered-items-count="filteredRows"
-            :total-number-of-cells="allLogs.length"
-          ></table-cell-count>
-        </div>
-      </b-col>
-      <b-col sm="8" md="7" xl="6">
+    <div class="logs-head-container">
+      <div class="semi-bold-12px">
+        <table-cell-count
+          :filtered-items-count="filteredRows"
+          :total-number-of-cells="allLogs.length"
+        ></table-cell-count>
+      </div>
+      <search
+        :placeholder="$t('pagePostCodeLogs.table.searchLogs')"
+        style="margin: 13px; width: 35%"
+        @change-search="onChangeSearchInput"
+        @clear-search="onClearSearchInput"
+      />
+    </div>
+    <b-row class="align-items-start m-0 p-0">
+      <b-col sm="7" md="6" xl="5">
         <table-date-filter @change="onChangeDateTimeFilter" />
       </b-col>
-    </b-row>
-    <b-row>
-      <b-col xl="12" class="text-right">
+      <b-col class="d-flex justify-content-end mt-3">
         <b-button
           variant="primary"
           :disabled="allLogs.length === 0"
@@ -31,8 +34,8 @@
         </b-button>
       </b-col>
     </b-row>
-    <b-row>
-      <b-col>
+    <b-row class="m-0 p-0">
+      <b-col class="p-0">
         <table-toolbar
           ref="toolbar"
           :selected-items-count="selectedRows.length"
@@ -40,107 +43,116 @@
         >
           <template #toolbar-buttons>
             <table-toolbar-export
+              style="margin-right: 1rem"
               :data="batchExportData"
               :file-name="exportFileNameByDate()"
             />
           </template>
         </table-toolbar>
-        <b-table
-          id="table-post-code-logs"
-          ref="table"
-          responsive="md"
-          selectable
-          no-select-on-click
-          sort-icon-left
-          hover
-          no-sort-reset
-          sort-desc
-          show-empty
-          sort-by="id"
-          :fields="fields"
-          :items="filteredLogs"
-          :empty-text="$t('global.table.emptyMessage')"
-          :empty-filtered-text="$t('global.table.emptySearchMessage')"
-          :per-page="perPage"
-          :current-page="currentPage"
-          :filter="searchFilter"
-          :busy="isBusy"
-          @filtered="onFiltered"
-          @row-selected="onRowSelected($event, filteredLogs.length)"
-        >
-          <!-- Checkbox column -->
-          <template #head(checkbox)>
-            <b-form-checkbox
-              v-model="tableHeaderCheckboxModel"
-              data-test-id="postCode-checkbox-selectAll"
-              :indeterminate="tableHeaderCheckboxIndeterminate"
-              @change="onChangeHeaderCheckbox($refs.table)"
-            >
-              <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
-            </b-form-checkbox>
-          </template>
-          <template #cell(checkbox)="row">
-            <b-form-checkbox
-              v-model="row.rowSelected"
-              :data-test-id="`postCode-checkbox-selectRow-${row.index}`"
-              @change="toggleSelectRow($refs.table, row.index)"
-            >
-              <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
-            </b-form-checkbox>
-          </template>
-          <!-- Date column -->
-          <template #cell(date)="{ value }">
-            <p class="mb-0">{{ value | formatDate }}</p>
-            <p class="mb-0">{{ value | formatTime }}</p>
-          </template>
+        <div id="logs-table-wrapper">
+          <b-table
+            id="logs-table"
+            ref="table"
+            responsive="md"
+            class="logs-table"
+            selectable
+            no-select-on-click
+            sort-icon-left
+            hover
+            no-sort-reset
+            sort-desc
+            show-empty
+            sort-by="id"
+            :no-border-collapse="true"
+            :sticky-header="true"
+            :fields="fields"
+            :items="filteredLogs"
+            :empty-text="$t('global.table.emptyMessage')"
+            :empty-filtered-text="$t('global.table.emptySearchMessage')"
+            :per-page="perPage"
+            :current-page="currentPage"
+            :filter="searchFilter"
+            :busy="isBusy"
+            @filtered="onFiltered"
+            @row-selected="onRowSelected($event, filteredLogs.length)"
+          >
+            <!-- Checkbox column -->
+            <template #head(checkbox)>
+              <b-form-checkbox
+                v-model="tableHeaderCheckboxModel"
+                data-test-id="postCode-checkbox-selectAll"
+                :indeterminate="tableHeaderCheckboxIndeterminate"
+                @change="onChangeHeaderCheckbox($refs.table)"
+              >
+                <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+              </b-form-checkbox>
+            </template>
+            <template #cell(checkbox)="row">
+              <b-form-checkbox
+                v-model="row.rowSelected"
+                :data-test-id="`postCode-checkbox-selectRow-${row.index}`"
+                @change="toggleSelectRow($refs.table, row.index)"
+              >
+                <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+              </b-form-checkbox>
+            </template>
+            <!-- Date column -->
+            <template #cell(date)="{ value }">
+              <p class="mb-0">{{ value | formatDate }}</p>
+              <p class="mb-0">{{ value | formatTime }}</p>
+            </template>
 
-          <!-- Actions column -->
-          <template #cell(actions)="row">
-            <table-row-action
-              v-for="(action, index) in row.item.actions"
-              :key="index"
-              :value="action.value"
-              :title="action.title"
-              :row-data="row.item"
-              :btn-icon-only="true"
-              :export-name="exportFileNameByDate(action.value)"
-              :download-location="row.item.uri"
-              :download-in-new-tab="true"
-              :show-button="false"
-            >
-              <template #icon>
-                <icon-export v-if="action.value === 'export'" />
-                <icon-download v-if="action.value === 'download'" />
-              </template>
-            </table-row-action>
-          </template>
-        </b-table>
+            <!-- Actions column -->
+            <template #cell(actions)="row">
+              <table-row-action
+                v-for="(action, index) in row.item.actions"
+                :key="index"
+                :value="action.value"
+                :title="action.title"
+                :row-data="row.item"
+                :btn-icon-only="true"
+                :export-name="exportFileNameByDate(action.value)"
+                :download-location="row.item.uri"
+                :download-in-new-tab="true"
+                :show-button="false"
+              >
+                <template #icon>
+                  <icon-export v-if="action.value === 'export'" />
+                  <icon-download v-if="action.value === 'download'" />
+                </template>
+              </table-row-action>
+            </template>
+          </b-table>
+        </div>
       </b-col>
     </b-row>
 
     <!-- Table pagination -->
-    <b-row>
-      <b-col sm="6">
+    <b-row class="logs-pagination-container m-0">
+      <b-col sm="6" class="d-flex align-items-center justify-content-start">
         <b-form-group
           class="table-pagination-select"
           :label="$t('global.table.itemsPerPage')"
+          label-class="semi-bold-16px mb-0"
           label-for="pagination-items-per-page"
         >
           <b-form-select
             id="pagination-items-per-page"
             v-model="perPage"
+            class="select-per-page semi-bold-16px mb-0"
             :options="itemsPerPageOptions"
           />
         </b-form-group>
       </b-col>
-      <b-col sm="6">
+      <b-col sm="6" class="d-flex align-items-center justify-content-end">
+        <span class="semi-bold-16px"> Страницы </span>
         <b-pagination
           v-model="currentPage"
           first-number
           last-number
           :per-page="perPage"
           :total-rows="getTotalRowCount(filteredRows)"
-          aria-controls="table-post-code-logs"
+          aria-controls="table-event-logs"
         />
       </b-col>
     </b-row>
@@ -210,32 +222,44 @@ export default {
   data() {
     return {
       isBusy: true,
+      // stickyHeader: 'calc(100vh - 307px)',
       fields: [
         {
           key: 'checkbox',
           sortable: false,
+          thClass: ' logs-table__th',
+          tdClass: 'logs-table__td',
         },
         {
           key: 'date',
           label: this.$t('pagePostCodeLogs.table.created'),
           sortable: true,
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'semi-bold-12px logs-table__td',
         },
         {
           key: 'timeStampOffset',
           label: this.$t('pagePostCodeLogs.table.timeStampOffset'),
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td',
         },
         {
           key: 'bootCount',
           label: this.$t('pagePostCodeLogs.table.bootCount'),
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td',
         },
         {
           key: 'postCode',
           label: this.$t('pagePostCodeLogs.table.postCode'),
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'logs-table__td semi-bold-12px__caps',
         },
         {
           key: 'actions',
           label: '',
-          tdClass: 'text-right text-nowrap',
+          thClass: 'bold-12px__caps logs-table__th',
+          tdClass: 'text-right logs-table__td',
         },
       ],
       expandRowLabel,
@@ -345,3 +369,21 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.table-pagination-select {
+  line-height: 1.8rem;
+}
+
+.form-group,
+.b-pagination {
+  margin: 0px !important;
+}
+.items-per-page {
+  padding: 0 0 0 5px;
+  width: 55px;
+  height: 24px;
+  background-color: transparent;
+  border: 1px solid $on-surface-tretiatry;
+  border-radius: 4px;
+}
+</style>
diff --git a/src/views/Operations/Firmware/FirmwareFormUpdate.vue b/src/views/Operations/Firmware/FirmwareFormUpdate.vue
index ac4b23fc..a5e5ba97 100644
--- a/src/views/Operations/Firmware/FirmwareFormUpdate.vue
+++ b/src/views/Operations/Firmware/FirmwareFormUpdate.vue
@@ -59,6 +59,7 @@
         <b-btn
           data-test-id="firmware-button-startUpdate"
           type="submit"
+          size="md"
           variant="primary"
           :disabled="isPageDisabled"
         >
diff --git a/src/views/Operations/Kvm/ImagesModal.vue b/src/views/Operations/Kvm/ImagesModal.vue
deleted file mode 100644
index ce4e6ebf..00000000
--- a/src/views/Operations/Kvm/ImagesModal.vue
+++ /dev/null
@@ -1,296 +0,0 @@
-<template>
-  <b-modal id="modal-images" class="modal-images" hide-footer>
-    <template #modal-title>
-      <div class="popup-title">
-        <span class="semi-bold-20px">{{ $t('pageKvm.addImage_modal') }}</span>
-      </div>
-    </template>
-    <div class="popup-switch">
-      <span
-        class="medium-16px popup-item"
-        :class="{ 'switch-active': isImportFromPC }"
-        @click="switchExport"
-        >{{ $t('pageKvm.fromPC') }}</span
-      >
-      <span
-        class="medium-16px popup-item"
-        :class="{ 'switch-active': !isImportFromPC }"
-        @click="switchImport"
-        >{{ $t('pageKvm.fromServer') }}</span
-      >
-      <div class="slider" />
-    </div>
-    <div v-if="isImportFromPC" class="images-import_container">
-      <b-form-file
-        id="images-import__file-input"
-        placeholder="Нажмите на область или перетащите в нее файл образа"
-      ></b-form-file>
-    </div>
-    <div v-else class="popup-body">
-      <div class="connection-type-container">
-        <span class="regular-12px tretiatry select-label" for="username">{{
-          $t('pageKvm.urlAdress')
-        }}</span>
-        <b-form-select
-          v-model="connectionType"
-          :options="connectionTypes"
-          class="select-connection regular-14px"
-        />
-        <label class="regular-12px tretiatry" for="username">{{
-          $t('pageKvm.connectionType')
-        }}</label>
-        <b-form-input id="url" type="text" class="form-control url-input">
-        </b-form-input>
-        <b-form-group>
-          <label class="regular-12px tretiatry" for="username">{{
-            $t('pageLogin.username')
-          }}</label>
-          <b-form-input
-            id="username"
-            v-model="userInfo.username"
-            aria-describedby="login-error-alert username-required"
-            :state="getValidationState($v.userInfo.username)"
-            type="text"
-            data-test-id="login-input-username"
-            class="form-control image-username-input"
-            @input="$v.userInfo.username.$touch()"
-          >
-          </b-form-input>
-          <b-form-invalid-feedback id="username-required" role="alert">
-            <template v-if="!$v.userInfo.username.required">
-              {{ $t('global.form.fieldRequired') }}
-            </template>
-          </b-form-invalid-feedback>
-        </b-form-group>
-
-        <b-form-group>
-          <input-password-toggle>
-            <label class="regular-12px tretiatry" for="password">{{
-              $t('pageLogin.password')
-            }}</label>
-            <b-form-input
-              id="password"
-              v-model="userInfo.password"
-              aria-describedby="login-error-alert password-required"
-              :state="getValidationState($v.userInfo.password)"
-              type="password"
-              data-test-id="login-input-password"
-              class="form-control image-password-input"
-              @input="$v.userInfo.password.$touch()"
-            >
-            </b-form-input>
-            <b-form-invalid-feedback id="password-required" role="alert">
-              <template v-if="!$v.userInfo.password.required">
-                {{ $t('global.form.fieldRequired') }}
-              </template>
-            </b-form-invalid-feedback>
-          </input-password-toggle>
-        </b-form-group>
-        <b-button class="upload-button" variant="primary">
-          {{ $t('pageKvm.upload') }}
-        </b-button>
-      </div>
-    </div>
-  </b-modal>
-</template>
-<script>
-import { required } from 'vuelidate/lib/validators';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
-import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
-
-export default {
-  components: { InputPasswordToggle },
-  mixins: [VuelidateMixin],
-  data() {
-    return {
-      isImportFromPC: true,
-      userInfo: {
-        username: null,
-        password: null,
-      },
-      connectionType: 1,
-      connectionTypes: [
-        {
-          value: 1,
-          text: 'HTTPS',
-        },
-      ],
-    };
-  },
-  validations: {
-    userInfo: {
-      username: {
-        required,
-      },
-      password: {
-        required,
-      },
-    },
-  },
-  methods: {
-    switchExport() {
-      this.isImportFromPC = true;
-    },
-    switchImport() {
-      this.isImportFromPC = false;
-    },
-  },
-};
-</script>
-<style lang="scss">
-.modal-dialog {
-  margin: 25vh auto;
-}
-.modal-content {
-  border-radius: 16px;
-  width: 480px;
-}
-.modal-header {
-  border-bottom: none;
-}
-
-.images-import_container > .custom-file {
-  width: 432px;
-  height: 357px;
-}
-
-#images-import__file-input ~ .custom-file-label {
-  background-color: transparent;
-  border: 1px dashed rgba(12, 28, 41, 0.6);
-  box-sizing: border-box;
-  border-radius: 8px;
-  width: 432px;
-  height: 357px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  white-space: normal;
-  padding: 0 65px;
-}
-
-#images-import__file-input ~ .custom-file-label::after {
-  display: none;
-}
-</style>
-<style lang="scss" scoped>
-.popup-switch {
-  position: relative;
-  display: flex;
-  flex-flow: row nowrap;
-  border-bottom: 1px solid #f3f4f5;
-  width: 100%;
-  height: 36px;
-}
-
-.switch-active {
-  color: $red-brand-primary;
-  transition: ease-in 0.15s;
-}
-
-.medium-16px {
-  margin-left: 20px;
-}
-
-.slider {
-  position: absolute;
-  height: 0px;
-  border-bottom: 4px solid $red-brand-primary;
-  transition: ease-in 0.2s;
-  bottom: 0px;
-}
-
-.popup-item:nth-child(1).switch-active ~ .slider {
-  width: 110px;
-  left: 21px;
-}
-
-.popup-item:nth-child(2).switch-active ~ .slider {
-  left: 157px;
-  width: 82px;
-}
-
-.popup-body {
-  margin: 24px 0 0 0;
-}
-
-.images-import_container {
-  width: 478px;
-  height: 405px;
-  background-color: $surface-secondary;
-  margin: 0px 0px -16px -16px;
-  border-radius: 0 0 16px 16px;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.image-username-input,
-.image-password-input {
-  height: 56px;
-  margin: -30px 0 5px 0;
-  padding-top: 30px;
-  font-family: 'Inter', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  letter-spacing: 0em;
-}
-
-.url-input {
-  height: 56px;
-  padding-top: 30px;
-  font-family: 'Inter', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  letter-spacing: 0em;
-  margin: -30px 0 20px 0;
-}
-
-.connection-type-container {
-  width: 446px;
-}
-
-.caption-12px {
-  padding-left: 10px;
-}
-
-.text-input {
-  margin: 0 0 0 50px;
-  padding: 0 0 0 5px;
-}
-
-.login-button {
-  height: 36px;
-  width: 380px;
-}
-
-.select-connection {
-  height: 56px;
-  padding-top: 30px;
-  border: none;
-  border-radius: 8px;
-  margin: -0px 0 18px 0;
-  background-color: $surface-secondary;
-  background-image: url('../../../assets/images/icon-chevron.svg');
-}
-.select-label {
-  position: absolute;
-  top: 84px;
-}
-
-.form-background .custom-select,
-.form-background .form-control {
-  border-radius: 8px;
-  border: none;
-  background-color: rgba(26, 62, 91, 0.05);
-}
-
-.upload-button {
-  width: 100%;
-  height: 52px;
-  margin: 0 auto 10px;
-}
-</style>
diff --git a/src/views/Operations/Kvm/Kvm.vue b/src/views/Operations/Kvm/Kvm.vue
index 324d50d0..a3103453 100644
--- a/src/views/Operations/Kvm/Kvm.vue
+++ b/src/views/Operations/Kvm/Kvm.vue
@@ -1,114 +1,24 @@
 <template>
-  <b-container fluid="xxl pt-0 m-0">
-    <b-button
-      class="btn-primary semi-bold-16px images_add-image-button"
-      @click="$bvModal.show('modal-images')"
-    >
-      {{ $t('pageKvm.addImage') }}</b-button
-    >
+  <b-container fluid>
     <page-title />
-    <div class="images">
-      <div class="images_desc">
-        <span class="regular-12px tretiatry">Подключенные образы:</span>
-      </div>
-      <div class="images-container">
-        <div class="images-container_image">
-          <img src="@/assets/images/console-images.svg" class="images-image" />
-          <span class="semi-bold-12px">Win-11-2022</span>
-          <span class="light-12px">с носителя</span>
-        </div>
-        <div class="images-container_image">
-          <img src="@/assets/images/console-images.svg" class="images-image" />
-          <span class="semi-bold-12px">Win-10-2017</span>
-          <span class="light-12px">с сервера</span>
-        </div>
-        <div class="images-container_image">
-          <img src="@/assets/images/console-images.svg" class="images-image" />
-          <span class="semi-bold-12px">Win-7-2010</span>
-          <span class="light-12px">с сервера</span>
-        </div>
-      </div>
+    <div class="terminal-container">
+      <kvm-console :is-full-window="false" />
     </div>
-    <kvm-console :is-full-window="false" />
-    <images-modal />
   </b-container>
 </template>
 
 <script>
 import PageTitle from '@/components/Global/PageTitle';
-import ImagesModal from './ImagesModal';
 import KvmConsole from './KvmConsole';
 
 export default {
   name: 'Kvm',
-  components: {
-    PageTitle,
-    ImagesModal,
-    KvmConsole,
-  },
+  components: { PageTitle, KvmConsole },
 };
 </script>
-<style lang="scss" scoped>
-.images_add-image-button {
-  position: absolute;
-  top: calc(#{$header-height});
-  right: 0px;
-  border: none;
-  box-shadow: none;
-  background-color: $faint-secondary-primary-5;
-  color: $red-brand-primary;
-  border-radius: 8px;
-  margin: 12px 32px;
-  width: 236px;
-  height: 40px;
-  z-index: 1001;
-  &:active {
-    background-color: $faint-secondary-primary-5-hover !important;
-    color: $red-brand-primary-active !important;
-    border: none;
-  }
-  &:focus {
-    box-shadow: none !important;
-  }
-  &:focus-visible {
-    box-shadow: none !important;
-  }
-}
-
-.images {
-  display: flex;
-  flex-flow: row wrap;
-  height: 144px;
-}
 
-.images_desc {
-  margin: 16px 0 16px 32px;
+<style scoped>
+.terminal-container {
   width: 100%;
 }
-
-.images-container {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  margin: 0 0 16px 32px;
-}
-
-.images-container_image {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  margin-right: 24px;
-}
-
-.images-image {
-  width: 40px;
-  height: 40px;
-  margin-bottom: 8px;
-}
-
-.semi-bold-12px {
-  color: $text-primary;
-}
 </style>
diff --git a/src/views/Operations/RebootBmc/RebootBmc.vue b/src/views/Operations/RebootBmc/RebootBmc.vue
index 900619cd..34b22151 100644
--- a/src/views/Operations/RebootBmc/RebootBmc.vue
+++ b/src/views/Operations/RebootBmc/RebootBmc.vue
@@ -19,14 +19,22 @@
             </b-col>
           </b-row>
           {{ $t('pageRebootBmc.rebootInformation') }}
-          <b-button
-            variant="primary"
-            class="d-block mt-5"
-            data-test-id="rebootBmc-button-reboot"
-            @click="onClick"
+          <popover-with-slot
+            id="popover-reboot"
+            :button-label="$t('global.action.reload')"
+            :popup-label="$t('BMC.ReloadBmc_popup')"
+            placement="left"
+            :action="rebootBmc"
           >
-            {{ $t('pageRebootBmc.rebootBmc') }}
-          </b-button>
+            <b-button
+              id="popover-reboot"
+              variant="primary"
+              class="d-block mt-5"
+              data-test-id="rebootBmc-button-reboot"
+            >
+              {{ $t('pageRebootBmc.rebootBmc') }}
+            </b-button>
+          </popover-with-slot>
         </page-section>
       </b-col>
     </b-row>
@@ -38,10 +46,11 @@ import PageTitle from '@/components/Global/PageTitle';
 import PageSection from '@/components/Global/PageSection';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import PopoverWithSlot from '@/components/Global/SilaComponents/PopoverWithSlot';
 
 export default {
   name: 'RebootBmc',
-  components: { PageTitle, PageSection },
+  components: { PageTitle, PageSection, PopoverWithSlot },
   mixins: [BVToastMixin, LoadingBarMixin],
   beforeRouteLeave(to, from, next) {
     this.hideLoader();
@@ -59,17 +68,6 @@ export default {
       .finally(() => this.endLoader());
   },
   methods: {
-    onClick() {
-      this.$bvModal
-        .msgBoxConfirm(this.$t('pageRebootBmc.modal.confirmMessage'), {
-          title: this.$t('pageRebootBmc.modal.confirmTitle'),
-          okTitle: this.$t('global.action.confirm'),
-          cancelTitle: this.$t('global.action.cancel'),
-        })
-        .then((confirmed) => {
-          if (confirmed) this.rebootBmc();
-        });
-    },
     rebootBmc() {
       this.$store
         .dispatch('controls/rebootBmc')
diff --git a/src/views/Operations/SerialOverLan/SerialOverLan.vue b/src/views/Operations/SerialOverLan/SerialOverLan.vue
index 33533bf9..48a68345 100644
--- a/src/views/Operations/SerialOverLan/SerialOverLan.vue
+++ b/src/views/Operations/SerialOverLan/SerialOverLan.vue
@@ -1,47 +1,10 @@
 <template>
-  <b-container fluid="xxl pt-0 m-0">
-    <page-title />
-    <b-button
-      class="btn-primary semi-bold-16px images_add-image-button"
-      @click="$bvModal.show('modal-images')"
-    >
-      {{ $t('pageKvm.addImage') }}</b-button
-    >
+  <b-container fluid="xl">
+    <page-title class="mb-4" :description="$t('pageSerialOverLan.subTitle')" />
+
     <page-section class="mb-0">
-      <div class="images">
-        <div class="images_desc">
-          <span class="regular-12px tretiatry">Подключенные образы:</span>
-        </div>
-        <div class="images-container">
-          <div class="images-container_image">
-            <img
-              src="@/assets/images/console-images.svg"
-              class="images-image"
-            />
-            <span class="semi-bold-12px">Win-11-2022</span>
-            <span class="light-12px">с носителя</span>
-          </div>
-          <div class="images-container_image">
-            <img
-              src="@/assets/images/console-images.svg"
-              class="images-image"
-            />
-            <span class="semi-bold-12px">Win-10-2017</span>
-            <span class="light-12px">с сервера</span>
-          </div>
-          <div class="images-container_image">
-            <img
-              src="@/assets/images/console-images.svg"
-              class="images-image"
-            />
-            <span class="semi-bold-12px">Win-7-2010</span>
-            <span class="light-12px">с сервера</span>
-          </div>
-        </div>
-      </div>
       <serial-over-lan-console :is-full-window="false" />
     </page-section>
-    <images-modal />
   </b-container>
 </template>
 
@@ -49,78 +12,13 @@
 import PageTitle from '@/components/Global/PageTitle';
 import PageSection from '@/components/Global/PageSection';
 import SerialOverLanConsole from './SerialOverLanConsole';
-import ImagesModal from '../Kvm/ImagesModal';
 
 export default {
   name: 'SerialOverLan',
   components: {
     PageSection,
     PageTitle,
-    ImagesModal,
     SerialOverLanConsole,
   },
 };
 </script>
-<style lang="scss" scoped>
-.images_add-image-button {
-  position: absolute;
-  top: 95px;
-  right: 0px;
-  border: none;
-  box-shadow: none;
-  background-color: $faint-secondary-primary-5;
-  color: $red-brand-primary;
-  border-radius: 8px;
-  margin: 12px 32px;
-  width: 236px;
-  height: 40px;
-  z-index: 1001;
-  &:active {
-    background-color: $faint-secondary-primary-5-hover !important;
-    color: $red-brand-primary-active !important;
-    border: none;
-  }
-  &:focus {
-    box-shadow: none !important;
-  }
-  &:focus-visible {
-    box-shadow: none !important;
-  }
-}
-.images {
-  display: flex;
-  flex-flow: row wrap;
-  height: 144px;
-}
-
-.images_desc {
-  margin: 16px 0 16px 32px;
-  width: 100%;
-}
-
-.images-container {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  margin: 0 0 16px 32px;
-}
-
-.images-container_image {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  margin-right: 24px;
-}
-
-.images-image {
-  width: 40px;
-  height: 40px;
-  margin-bottom: 8px;
-}
-
-.semi-bold-12px {
-  color: $text-primary;
-}
-</style>
diff --git a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
index ce8549df..3fa9ae47 100644
--- a/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
+++ b/src/views/Operations/SerialOverLan/SerialOverLanConsole.vue
@@ -9,7 +9,7 @@
           class="mt-4"
         >
           <p class="col-form-label">
-            {{ $t('pageSerialOverLan.alert.disconnectedAlertMessage') }}
+            {{ $t('pageSerialOverLan.disconnectedAlertMessage') }}
           </p>
         </alert>
       </b-col>
@@ -85,37 +85,38 @@ export default {
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.resizeConsoleWindow);
+    this.closeTerminal();
   },
   methods: {
     openTerminal() {
       const token = this.$store.getters['authentication/token'];
 
-      const ws = new WebSocket(`wss://${window.location.host}/console0`, [
+      this.ws = new WebSocket(`wss://${window.location.host}/console0`, [
         token,
       ]);
 
       // Refer https://github.com/xtermjs/xterm.js/ for xterm implementation and addons.
 
-      const term = new Terminal({
+      this.term = new Terminal({
         fontSize: 15,
         fontFamily:
           'SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',
       });
 
-      const attachAddon = new AttachAddon(ws);
-      term.loadAddon(attachAddon);
+      const attachAddon = new AttachAddon(this.ws);
+      this.term.loadAddon(attachAddon);
 
       const fitAddon = new FitAddon();
-      term.loadAddon(fitAddon);
+      this.term.loadAddon(fitAddon);
 
       const SOL_THEME = {
         background: '#19273c',
         cursor: 'rgba(83, 146, 255, .5)',
         scrollbar: 'rgba(83, 146, 255, .5)',
       };
-      term.setOption('theme', SOL_THEME);
+      this.term.setOption('theme', SOL_THEME);
 
-      term.open(this.$refs.panel);
+      this.term.open(this.$refs.panel);
       fitAddon.fit();
 
       this.resizeConsoleWindow = throttle(() => {
@@ -124,10 +125,10 @@ export default {
       window.addEventListener('resize', this.resizeConsoleWindow);
 
       try {
-        ws.onopen = function () {
+        this.ws.onopen = function () {
           console.log('websocket console0/ opened');
         };
-        ws.onclose = function (event) {
+        this.ws.onclose = function (event) {
           console.log(
             'websocket console0/ closed. code: ' +
               event.code +
@@ -139,6 +140,13 @@ export default {
         console.log(error);
       }
     },
+    closeTerminal() {
+      console.log('closeTerminal');
+      this.term.dispose();
+      this.term = null;
+      this.ws.close();
+      this.ws = null;
+    },
     openConsoleWindow() {
       window.open(
         '#/console/serial-over-lan-console',
diff --git a/src/views/Operations/ServerPowerOperations/BootSettings.vue b/src/views/Operations/ServerPowerOperations/BootSettings.vue
index ab3c22b9..b5cbb4e0 100644
--- a/src/views/Operations/ServerPowerOperations/BootSettings.vue
+++ b/src/views/Operations/ServerPowerOperations/BootSettings.vue
@@ -1,8 +1,5 @@
 <template>
-  <div class="form-background p-3">
-    <label class="semi-bold-16px">{{
-      $t('pageServerPowerOperations.serverBootSettings')
-    }}</label>
+  <page-section class="m-0">
     <b-form novalidate @submit.prevent="handleSubmit">
       <b-form-group label-for="boot-option" class="mb-3 regular-12px">
         <label class="semi-bold-12px">{{
@@ -49,16 +46,18 @@
         {{ $t('global.action.save') }}
       </b-button>
     </b-form>
-  </div>
+  </page-section>
 </template>
 
 <script>
 import { mapState } from 'vuex';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import PageSection from '@/components/Global/PageSection';
 
 export default {
   name: 'BootSettings',
+  components: { PageSection },
   mixins: [BVToastMixin, LoadingBarMixin],
   data() {
     return {
diff --git a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
index a394a77f..823caa95 100644
--- a/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
+++ b/src/views/Operations/ServerPowerOperations/ServerPowerOperations.vue
@@ -1,15 +1,15 @@
 <template>
   <b-container fluid="xxl pt-0 m-0">
     <page-title />
-    <b-row class="m-2">
+    <page-section
+      :section-title="$t('pageServerPowerOperations.serverStatus')"
+      class="m-4"
+    >
       <b-col md="8" xl="6">
-        <page-section class="m-2 pt-2 pb-2">
+        <page-section class="pt-2 mb-0">
           <b-row>
             <b-col>
               <dl>
-                <dt class="semi-bold-16px">
-                  {{ $t('pageServerPowerOperations.serverStatus') }}
-                </dt>
                 <dd
                   v-if="serverStatus === 'on'"
                   style="margin-top: 10px"
@@ -60,13 +60,13 @@
           </b-row>
         </page-section>
       </b-col>
-    </b-row>
-    <b-row class="m-2">
+    </page-section>
+    <page-section
+      :section-title="$t('SystemDescription.title.Control')"
+      class="ml-4 mb-0"
+    >
       <b-col sm="8" md="6" xl="7">
-        <page-section class="m-2">
-          <b-row class="ml-0 mb-3">
-            <span class="semi-bold-16px">{{ 'Управление' }}</span>
-          </b-row>
+        <page-section>
           <alert :show="oneTimeBootEnabled" variant="warning">
             {{ $t('pageServerPowerOperations.oneTimeBootWarning') }}
           </alert>
@@ -177,14 +177,15 @@
           </template>
         </page-section>
       </b-col>
-    </b-row>
-    <b-row>
-      <b-col v-if="hasBootSourceOptions" class="m-2" sm="8" md="6" xl="4">
-        <page-section class="m-2">
-          <boot-settings />
-        </page-section>
+    </page-section>
+    <page-section
+      :section-title="$t('pageServerPowerOperations.serverBootSettings')"
+      class="m-4"
+    >
+      <b-col v-if="hasBootSourceOptions" sm="8" md="6" xl="4">
+        <boot-settings />
       </b-col>
-    </b-row>
+    </page-section>
   </b-container>
 </template>
 
diff --git a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
index b0bcfb2b..1a41a334 100644
--- a/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
+++ b/src/views/Operations/VirtualMedia/ModalConfigureConnection.vue
@@ -9,7 +9,7 @@
     <template #modal-title>
       {{ $t('pageVirtualMedia.modal.title') }}
     </template>
-    <b-form>
+    <b-form style="width: 100%">
       <b-form-group
         :label="$t('pageVirtualMedia.modal.serverUri')"
         label-for="serverUri"
@@ -43,12 +43,14 @@
         :label="$t('pageVirtualMedia.modal.password')"
         label-for="password"
       >
-        <b-form-input
-          id="password"
-          v-model="form.password"
-          type="password"
-          data-test-id="configureConnection-input-password"
-        />
+        <input-password-toggle>
+          <b-form-input
+            id="password"
+            v-model="form.password"
+            type="password"
+            data-test-id="configureConnection-input-password"
+          />
+        </input-password-toggle>
       </b-form-group>
       <b-form-group>
         <b-form-checkbox
@@ -72,8 +74,12 @@
 <script>
 import { required } from 'vuelidate/lib/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
 
 export default {
+  components: {
+    InputPasswordToggle,
+  },
   mixins: [VuelidateMixin],
   props: {
     connection: {
diff --git a/src/views/Operations/VirtualMedia/VirtualMedia.vue b/src/views/Operations/VirtualMedia/VirtualMedia.vue
index 8a3d5add..9f464138 100644
--- a/src/views/Operations/VirtualMedia/VirtualMedia.vue
+++ b/src/views/Operations/VirtualMedia/VirtualMedia.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid>
     <page-title />
     <b-row class="mb-4">
       <b-col md="12">
@@ -8,7 +8,7 @@
         >
           <b-row>
             <b-col v-for="(dev, $index) in proxyDevices" :key="$index" md="6">
-              <b-form-group :label="dev.id" label-class="bold">
+              <b-form-group :label="dev.id" label-class="regular-14px">
                 <form-file
                   v-if="!dev.isActive"
                   :id="concatId(dev.id)"
@@ -23,6 +23,7 @@
               </b-form-group>
               <b-button
                 v-if="!dev.isActive"
+                size="md"
                 variant="primary"
                 :disabled="!dev.file"
                 @click="startVM(dev)"
@@ -42,48 +43,52 @@
         </page-section>
       </b-col>
     </b-row>
-    <b-row v-if="loadImageFromExternalServer" class="mb-4">
+    <b-row v-if="!loadImageFromExternalServer" class="mb-4">
       <b-col md="12">
         <page-section
           :section-title="$t('pageVirtualMedia.virtualMediaSubTitleSecond')"
         >
           <b-row>
             <b-col
-              v-for="(device, $index) in legacyDevices"
+              v-for="(device, $index) in [
+                { id: 'device_1', isActive: false },
+                { id: 'device_2', isActive: false },
+              ]"
               :key="$index"
               md="6"
             >
               <b-form-group
                 :label="device.id"
                 :label-for="device.id"
-                label-class="bold"
+                label-class="regular-14px"
               >
                 <b-button
                   variant="primary"
+                  size="lg"
                   :disabled="device.isActive"
                   @click="configureConnection(device)"
                 >
                   {{ $t('pageVirtualMedia.configureConnection') }}
                 </b-button>
-
-                <b-button
-                  v-if="!device.isActive"
-                  variant="primary"
-                  class="float-right"
-                  :disabled="!device.serverUri"
-                  @click="startLegacy(device)"
-                >
-                  {{ $t('pageVirtualMedia.start') }}
-                </b-button>
-                <b-button
-                  v-if="device.isActive"
-                  variant="primary"
-                  class="float-right"
-                  @click="stopLegacy(device)"
-                >
-                  {{ $t('pageVirtualMedia.stop') }}
-                </b-button>
               </b-form-group>
+
+              <b-button
+                v-if="!device.isActive"
+                variant="primary"
+                size="md"
+                :disabled="!device.serverUri"
+                @click="startLegacy(device)"
+              >
+                {{ $t('pageVirtualMedia.start') }}
+              </b-button>
+              <b-button
+                v-if="device.isActive"
+                size="md"
+                variant="primary"
+                @click="stopLegacy(device)"
+              >
+                {{ $t('pageVirtualMedia.stop') }}
+              </b-button>
             </b-col>
           </b-row>
         </page-section>
@@ -107,7 +112,12 @@ import FormFile from '@/components/Global/FormFile';
 
 export default {
   name: 'VirtualMedia',
-  components: { PageTitle, PageSection, ModalConfigureConnection, FormFile },
+  components: {
+    PageTitle,
+    PageSection,
+    ModalConfigureConnection,
+    FormFile,
+  },
   mixins: [BVToastMixin, LoadingBarMixin],
   data() {
     return {
diff --git a/src/views/SILA/EventLogs/EventLogs.vue b/src/views/SILA/EventLogs/EventLogs.vue
deleted file mode 100644
index c7f65e8b..00000000
--- a/src/views/SILA/EventLogs/EventLogs.vue
+++ /dev/null
@@ -1,833 +0,0 @@
-<template>
-  <b-container
-    :style="{ display: 'flex', 'flex-direction': 'column' }"
-    fluid="xxl pt-0 m-0"
-    class="logs-section"
-  >
-    <page-title />
-    <div class="event-log-head-container">
-      <span class="regular-12px">Срок хранения событий:</span>
-      <span class="semi-bold-12px">42 дня</span>
-      <span class="regular-12px red" style="color: $red-brand-primary"
-        >Изменить</span
-      >
-      <div class="form-control event-log-search">
-        <button class="search-button">
-          <img
-            class="event-log-search__icon"
-            src="@/assets/images/search-icon.svg"
-          />
-        </button>
-        <b-form-input
-          v-model="searchInput"
-          type="text"
-          class="event-log-search__input"
-          placeholder="Поиск по журналу"
-          @input="onChangeSearchInput"
-          @clear-search="onClearSearchInput"
-        >
-        </b-form-input>
-      </div>
-    </div>
-    <div class="event-logs__section">
-      <div class="event-logs__filter-container">
-        <span class="caption-12px">{{ $t('pageEventLogs.eventFilter') }}</span>
-        <b-form-select
-          v-model="eventFilter"
-          :options="eventFilters"
-          class="event-logs__filter regular-14px"
-        />
-      </div>
-      <div class="event-logs__filter-container">
-        <span class="caption-12px">{{
-          $t('pageEventLogs.eventTypeFilter')
-        }}</span>
-        <b-form-select
-          v-model="eventTypeFilter"
-          :options="eventTypeFilters"
-          class="event-logs__filter regular-14px"
-        />
-      </div>
-      <div class="event-logs__filter-container">
-        <span class="caption-12px">{{
-          $t('pageEventLogs.eventSourseFilter')
-        }}</span>
-        <b-form-select
-          v-model="eventSourseFilter"
-          :options="eventSourseFilters"
-          class="event-logs__filter regular-14px"
-        />
-      </div>
-      <div class="event-logs__filter-container">
-        <span class="caption-12px">{{
-          $t('pageEventLogs.eventDateFilter')
-        }}</span>
-        <b-form-select
-          v-model="eventDateFilter"
-          :options="eventDateFilters"
-          class="event-logs__filter-date regular-14px"
-        />
-      </div>
-      <popover
-        id="popover-reactive-1"
-        description="pageEventLogs.clearLogs"
-        popup="pageEventLogs.clearLogs_popup"
-        button="pageEventLogs.clear"
-        placement="bottom"
-        :isclear="true"
-        class="clear-popover"
-        :action="deleteAllLogs"
-      />
-    </div>
-    <table-toolbar
-      ref="toolbar"
-      :selected-items-count="selectedRows.length"
-      :actions="batchActions"
-      @clear-selected="clearSelectedRows($refs.table)"
-    >
-      <template #toolbar-buttons>
-        <b-button
-          size="md"
-          variant="secondary"
-          style="margin-right: 1rem"
-          @click="resolveLogs"
-        >
-          <img
-            class="sourse__img"
-            src="@/assets/images/event-logs/resolved-button.svg"
-          />
-          {{ $t('pageEventLogs.event_resolve') }}
-        </b-button>
-        <b-button
-          size="md"
-          variant="primary"
-          style="margin-right: 1rem"
-          @click="unresolveLogs"
-        >
-          <img
-            class="sourse__img"
-            src="@/assets/images/event-logs/archive.svg"
-          />
-          {{ $t('pageEventLogs.archive') }}
-        </b-button>
-        <table-toolbar-export
-          :data="batchExportData"
-          style="margin-right: 1rem"
-          :file-name="exportFileNameByDate()"
-        />
-      </template>
-    </table-toolbar>
-    <div id="logs-table-wrapper">
-      <b-table
-        id="logs-table"
-        ref="table"
-        responsive="md"
-        class="logs-table"
-        selectable
-        :busy="isBusy"
-        no-select-on-click
-        sort-icon-left
-        :sticky-header="stickyHeader"
-        :no-border-collapse="true"
-        no-sort-reset
-        :sort-desc="sortDesc"
-        sort-by="id"
-        :current-page="currentPage"
-        :per-page="perPage"
-        :fields="fields"
-        :items="filteredLogs"
-        :sort-compare="onSortCompare"
-        :empty-text="$t('global.table.emptyMessage')"
-        :empty-filtered-text="$t('global.table.emptySearchMessage')"
-        :filter="searchFilter"
-        @filtered="onFiltered"
-        @row-selected="onRowSelected($event, filteredLogs.length)"
-      >
-        <!-- Checkbox column -->
-        <template #head(checkbox)>
-          <b-form-checkbox
-            v-model="tableHeaderCheckboxModel"
-            data-test-id="eventLogs-checkbox-selectAll"
-            :indeterminate="tableHeaderCheckboxIndeterminate"
-            @change="onChangeHeaderCheckbox($refs.table)"
-          >
-            <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
-          </b-form-checkbox>
-        </template>
-        <template #cell(checkbox)="row">
-          <b-form-checkbox
-            v-model="row.rowSelected"
-            :data-test-id="`eventLogs-checkbox-selectRow-${row.index}`"
-            @change="toggleSelectRow($refs.table, row.index)"
-          >
-            <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
-          </b-form-checkbox>
-        </template>
-        <template #cell(description)="data">
-          <b-row class="semi-bold-16px tretiatry">
-            {{ filteredLogs[data.index].name }}
-          </b-row>
-          <b-row
-            class="regular-12px tretiatry pointer"
-            @click="toggleRowDetails(data)"
-          >
-            {{ data.value }}
-          </b-row>
-        </template>
-        <!-- Severity column -->
-        <template #cell(severity)="{ value }">
-          <span
-            :class="`indicators-${value}`"
-            class="bold-12px__caps"
-            style="text-overflow: ellipsis; white-space: nowrap"
-          >
-            {{ value }}</span
-          >
-        </template>
-        <!-- Source column -->
-        <template #cell(source)="{ value }">
-          <b-row v-if="value === 'Процессоры'">
-            <img
-              class="sourse__img"
-              src="@/assets/images/event-logs/processor.svg"
-            />
-            <span>{{ value }}</span>
-          </b-row>
-          <b-row v-else-if="value === 'Вентиляторы'">
-            <img
-              class="sourse__img"
-              src="@/assets/images/event-logs/fans.svg"
-            />
-            <span class="pointer" @click="redirectFans">{{ value }}</span>
-          </b-row>
-          <b-row v-else-if="value === 'RAID-контролеры'">
-            <img
-              class="sourse__img"
-              src="@/assets/images/event-logs/raid-controllers.svg"
-            />
-            <span>{{ value }}</span>
-          </b-row>
-          <b-row v-else-if="value === 'Модули памяти'">
-            <img
-              src="@/assets/images/event-logs/memory-module.svg"
-              class="sourse__img"
-            />
-            <span>{{ value }}</span>
-          </b-row>
-          <b-row v-else>
-            <span>{{ value }}</span>
-          </b-row>
-        </template>
-        <!-- Date column -->
-        <template #cell(date)="{ value }">
-          <img src="@/assets/images/event-logs/time.svg" class="sourse__img" />
-          <span v-if="value" class="regular-12px quaternary">
-            {{ value | formatDate }}
-          </span>
-          <span v-if="value" class="regular-12px quaternary">
-            в {{ value | formatTimeShort }}
-          </span>
-        </template>
-
-        <!-- Status column -->
-        <template #cell(status)="{ value }">
-          <b-row v-if="value === true">
-            <img
-              class="sourse__img"
-              src="@/assets/images/event-logs/resolved.svg"
-            />
-            <span class="semi-bold-12px__caps resolved">
-              {{ $t('pageEventLogs.resolved') }}
-            </span>
-          </b-row>
-          <b-row v-else>
-            <img
-              class="sourse__img"
-              src="@/assets/images/event-logs/not-resolved.svg"
-            />
-            <span class="semi-bold-12px__caps not-resolved">
-              {{ $t('pageEventLogs.unresolved') }}</span
-            >
-          </b-row>
-        </template>
-        <template #row-details="{ item }">
-          <b-container
-            fluid
-            style="border-bottom: 1px solid rgba(26, 62, 91, 0.1)"
-          >
-            <b-col class="mt-1 mb-2 regular-12px tretiatry">
-              <span class="row-details">
-                {{ item.description }}
-              </span>
-            </b-col>
-          </b-container>
-        </template>
-      </b-table>
-    </div>
-    <div class="pagination-container">
-      <div style="margin-left: 10px" class="pagination-content">
-        <span class="semi-bold-16px"> Страницы </span>
-        <b-pagination
-          v-model="currentPage"
-          class="mt-2"
-          first-number
-          last-number
-          :per-page="perPage"
-          :total-rows="getTotalRowCount(filteredRows)"
-          aria-controls="table-event-logs"
-        />
-      </div>
-      <div class="pagination-items-limit">
-        <span class="semi-bold-16px"> Показывать по </span>
-        <b-form-select
-          v-model="perPage"
-          :options="itemsPerPageOptions"
-          class="event-logs__filter items-per-page semi-bold-16px"
-        />
-        <span class="semi-bold-16px"> записей на странице </span>
-        <b-button
-          size="md"
-          variant="primary"
-          :class="{ disabled: allLogs.length === 0 }"
-          :download="exportFileNameByDate()"
-          :href="href"
-        >
-          <icon-export /> {{ $t('global.action.exportAll') }}
-        </b-button>
-      </div>
-    </div>
-  </b-container>
-</template>
-
-<script>
-import { omit } from 'lodash';
-import IconExport from '@carbon/icons-vue/es/document--export/20';
-import PageTitle from '@/components/Global/PageTitle';
-import Popover from '@/components/Global/Popover';
-import TableToolbar from '@/components/Global/TableToolbar';
-import TableToolbarExport from '@/components/Global/TableToolbarExport';
-
-import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
-import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
-import TableSortMixin from '@/components/Mixins/TableSortMixin';
-import BVPaginationMixin, {
-  currentPage,
-  perPage,
-  itemsPerPageOptions,
-} from '@/components/Mixins/BVPaginationMixin';
-
-import BVTableSelectableMixin, {
-  selectedRows,
-  tableHeaderCheckboxModel,
-  tableHeaderCheckboxIndeterminate,
-} from '@/components/Mixins/BVTableSelectableMixin';
-import TableRowExpandMixin, {
-  expandRowLabel,
-} from '@/components/Mixins/TableRowExpandMixin';
-import SearchFilterMixin, {
-  searchFilter,
-} from '@/components/Mixins/SearchFilterMixin';
-
-export default {
-  components: {
-    PageTitle,
-    Popover,
-    TableToolbar,
-    TableToolbarExport,
-    IconExport,
-  },
-  mixins: [
-    BVTableSelectableMixin,
-    BVToastMixin,
-    LoadingBarMixin,
-    TableFilterMixin,
-    DataFormatterMixin,
-    TableSortMixin,
-    TableRowExpandMixin,
-    SearchFilterMixin,
-    BVPaginationMixin,
-  ],
-  beforeRouteLeave(to, from, next) {
-    // Hide loader if the user navigates to another page
-    // before request is fulfilled.
-    this.hideLoader();
-    next();
-  },
-  data() {
-    return {
-      isBusy: true,
-      perPage,
-      itemsPerPageOptions,
-      currentPage,
-      sortDesc: true,
-      stickyHeader: 'calc(100vh - 307px)',
-      fields: [
-        {
-          key: 'checkbox',
-          sortable: false,
-          thClass: ' logs-table__th',
-          tdClass: 'logs-table__td',
-        },
-        {
-          key: 'id',
-          label: this.$t('pageEventLogs.table.id'),
-          sortable: true,
-          thClass: 'bold-12px__caps logs-table__th',
-          tdClass: 'semi-bold-12px logs-table__td',
-        },
-        {
-          key: 'description',
-          label: this.$t('pageEventLogs.table.about_event'),
-          thClass: 'bold-12px__caps logs-table__th',
-          tdClass: 'logs-table__td',
-        },
-        {
-          key: 'severity',
-          label: this.$t('pageEventLogs.table.severity'),
-          thClass: 'bold-12px__caps logs-table__th',
-          tdClass: 'logs-table__td',
-        },
-        {
-          key: 'source',
-          label: this.$t('pageEventLogs.table.source'),
-          thClass: 'bold-12px__caps logs-table__th',
-          tdClass: 'logs-table__td semi-bold-12px__caps tretiatry ',
-        },
-        {
-          key: 'date',
-          label: this.$t('pageEventLogs.table.date'),
-          sortable: true,
-          thClass: `bold-12px__caps logs-table__th`,
-          tdClass: 'logs-table__td',
-        },
-        {
-          key: 'status',
-          sortable: true,
-          label: this.$t('pageEventLogs.table.status'),
-          thClass: 'bold-12px__caps logs-table__th',
-          tdClass: 'logs-table__td',
-        },
-      ],
-      eventFilter: 1,
-      eventFilters: [
-        {
-          value: 1,
-          text: 'Все события',
-        },
-      ],
-      eventTypeFilter: 'all',
-      eventTypeFilters: [
-        {
-          value: 'all',
-          text: 'Все события',
-        },
-        {
-          value: 'info',
-          text: 'Информационное',
-        },
-        {
-          value: 'Warning',
-          text: 'Предупреждения',
-        },
-        {
-          value: 'critical',
-          text: 'Критические',
-        },
-        {
-          value: 'ok',
-          text: 'ok',
-        },
-      ],
-      eventSourseFilter: 1,
-      eventSourseFilters: [
-        {
-          value: 1,
-          text: 'Все события',
-        },
-      ],
-      eventDateFilter: 1,
-      eventDateFilters: [
-        {
-          value: 1,
-          text: 'События за последний час',
-        },
-      ],
-      expandRowLabel,
-      activeFilters: [],
-      batchActions: [
-        {
-          value: 'delete',
-          label: this.$t('global.action.delete'),
-        },
-      ],
-      filterStartDate: null,
-      filterEndDate: null,
-      searchInput: null,
-      searchFilter: searchFilter,
-      searchTotalFilteredRows: 0,
-      selectedRows: selectedRows,
-      tableHeaderCheckboxModel: tableHeaderCheckboxModel,
-      tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
-    };
-  },
-  computed: {
-    href() {
-      return `data:text/json;charset=utf-8,${this.exportAllLogs()}`;
-    },
-    filteredRows() {
-      return this.searchFilter
-        ? this.searchTotalFilteredRows
-        : this.filteredLogs.length;
-    },
-    allLogs() {
-      return this.$store.getters['eventLog/allEvents'].map((event) => {
-        return {
-          ...event,
-          actions: [
-            {
-              value: 'export',
-              title: this.$t('global.action.export'),
-            },
-            {
-              value: 'delete',
-              title: this.$t('global.action.delete'),
-            },
-          ],
-        };
-      });
-    },
-    batchExportData() {
-      return this.selectedRows.map((row) => omit(row, 'actions'));
-    },
-    filteredLogsByDate() {
-      return this.getFilteredTableDataByDate(
-        this.allLogs,
-        this.filterStartDate,
-        this.filterEndDate
-      );
-    },
-    filteredLogs() {
-      return this.getFilteredTableData(
-        this.filteredLogsByDate,
-        this.activeFilters
-      ).filter((el) => el.description);
-    },
-  },
-  created() {
-    this.startLoader();
-    this.$store.dispatch('eventLog/getEventLogData').finally(() => {
-      this.endLoader();
-      this.isBusy = false;
-    });
-  },
-  methods: {
-    redirectFans() {
-      this.$router.push('/fans');
-    },
-    changelogStatus(row) {
-      this.$store
-        .dispatch('eventLog/updateEventLogStatus', {
-          uri: row.uri,
-          status: row.status,
-        })
-        .then((success) => {
-          this.successToast(success);
-        })
-        .catch(({ message }) => this.errorToast(message));
-    },
-    deleteAllLogs() {
-      this.$store
-        .dispatch('eventLog/deleteAllEventLogs', this.allLogs)
-        .then((message) => this.successToast(message))
-        .catch(({ message }) => this.errorToast(message));
-    },
-    deleteLogs(uris) {
-      this.$store
-        .dispatch('eventLog/deleteEventLogs', uris)
-        .then((messages) => {
-          messages.forEach(({ type, message }) => {
-            if (type === 'success') {
-              this.successToast(message);
-            } else if (type === 'error') {
-              this.errorToast(message);
-            }
-          });
-        });
-    },
-    exportAllLogs() {
-      {
-        return this.$store.getters['eventLog/allEvents'].map((eventLogs) => {
-          const allEventLogsString = JSON.stringify(eventLogs);
-          return allEventLogsString;
-        });
-      }
-    },
-    onFilterChange({ activeFilters }) {
-      this.activeFilters = activeFilters;
-    },
-    onSortCompare(a, b, key) {
-      if (key === 'severity') {
-        return this.sortStatus(a, b, key);
-      }
-    },
-    onTableRowAction(action, { uri }) {
-      if (action === 'delete') {
-        this.$bvModal
-          .msgBoxConfirm(this.$tc('pageEventLogs.modal.deleteMessage'), {
-            title: this.$tc('pageEventLogs.modal.deleteTitle'),
-            okTitle: this.$t('global.action.delete'),
-            cancelTitle: this.$t('global.action.cancel'),
-          })
-          .then((deleteConfirmed) => {
-            if (deleteConfirmed) this.deleteLogs([uri]);
-          });
-      }
-    },
-    onBatchAction(action) {
-      if (action === 'delete') {
-        const uris = this.selectedRows.map((row) => row.uri);
-        this.$bvModal
-          .msgBoxConfirm(
-            this.$tc(
-              'pageEventLogs.modal.deleteMessage',
-              this.selectedRows.length
-            ),
-            {
-              title: this.$tc(
-                'pageEventLogs.modal.deleteTitle',
-                this.selectedRows.length
-              ),
-              okTitle: this.$t('global.action.delete'),
-              cancelTitle: this.$t('global.action.cancel'),
-            }
-          )
-          .then((deleteConfirmed) => {
-            if (deleteConfirmed) {
-              if (this.selectedRows.length === this.allLogs.length) {
-                this.$store
-                  .dispatch(
-                    'eventLog/deleteAllEventLogs',
-                    this.selectedRows.length
-                  )
-                  .then((message) => this.successToast(message))
-                  .catch(({ message }) => this.errorToast(message));
-              } else {
-                this.deleteLogs(uris);
-              }
-            }
-          });
-      }
-    },
-    onChangeDateTimeFilter({ fromDate, toDate }) {
-      this.filterStartDate = fromDate;
-      this.filterEndDate = toDate;
-    },
-    onFiltered(filteredItems) {
-      this.searchTotalFilteredRows = filteredItems.length;
-    },
-    // Create export file name based on date
-    exportFileNameByDate(value) {
-      let date = new Date();
-      date =
-        date.toISOString().slice(0, 10) +
-        '_' +
-        date.toString().split(':').join('-').split(' ')[4];
-      let fileName;
-      if (value === 'export') {
-        fileName = 'event_log_';
-      } else {
-        fileName = 'all_event_logs_';
-      }
-      return fileName + date;
-    },
-    resolveLogs() {
-      this.$store
-        .dispatch('eventLog/resolveEventLogs', this.selectedRows)
-        .then((messages) => {
-          messages.forEach(({ type, message }) => {
-            if (type === 'success') {
-              this.successToast(message);
-            } else if (type === 'error') {
-              this.errorToast(message);
-            }
-          });
-        });
-    },
-    unresolveLogs() {
-      this.$store
-        .dispatch('eventLog/unresolveEventLogs', this.selectedRows)
-        .then((messages) => {
-          messages.forEach(({ type, message }) => {
-            if (type === 'success') {
-              this.successToast(message);
-            } else if (type === 'error') {
-              this.errorToast(message);
-            }
-          });
-        });
-    },
-  },
-};
-</script>
-<style lang="scss">
-.b-table-details > td {
-  padding: 0px !important;
-}
-</style>
-<style lang="scss" scoped>
-$toolbar-height: 64px;
-.row {
-  margin: 0px;
-}
-
-.clear-popover {
-  margin-left: auto;
-}
-
-.event-logs__section {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  height: 84px;
-  gap: 16px;
-  margin: 0 32px;
-}
-
-.event-log-head-container {
-  position: absolute;
-  top: calc(#{$header-height});
-  right: 0px;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 6px;
-  z-index: 1001;
-}
-
-.event-log-search {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  border: none;
-  box-shadow: none;
-  border-radius: 8px;
-  margin: 12px 32px 12px 16px;
-  width: 236px;
-  height: 40px;
-}
-
-.search-button {
-  border: none;
-  background: none;
-}
-
-.event-log-search__icon {
-  width: 20px;
-  height: 20px;
-}
-
-.event-log-search__input {
-  border: none;
-  background: none;
-  box-shadow: none;
-}
-
-.event-logs__filter-container {
-  width: 183px;
-}
-
-.event-logs__filter,
-.event-logs__filter-date {
-  height: 40px;
-  border: none;
-  border-radius: 8px;
-  background-image: url('../../../assets/images/icon-chevron.svg');
-}
-
-.caption-12px {
-  padding-left: 10px;
-}
-
-.event-logs__filter {
-  width: 171px;
-}
-
-.event-logs__filter-date {
-  width: 236px;
-}
-
-.custom-checkbox {
-  background-color: none;
-}
-
-.sourse__img {
-  padding-right: 8px;
-}
-
-.not-resolved {
-  color: $text-quaternary;
-}
-
-.pagination-container {
-  width: calc(100% - #{$navigation-width});
-  height: $toolbar-height;
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.06);
-  z-index: $zindex-dropdown;
-  background-color: $white;
-}
-
-.pagination-content {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-evenly;
-}
-
-.page-input {
-  display: inline-block;
-  width: 55px;
-  height: 24px;
-  border: 1px solid $on-surface-tretiatry;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pagination-items-limit {
-  margin-left: auto;
-  display: flex;
-  gap: 7px;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-evenly;
-  margin-right: 1rem;
-}
-
-.items-per-page {
-  padding: 0 0 0 5px;
-  width: 55px;
-  height: 24px;
-  background-color: transparent;
-  border: 1px solid $on-surface-tretiatry;
-  border-radius: 4px;
-}
-
-.row-details {
-  display: block;
-  height: auto;
-  width: 70vw;
-}
-</style>
diff --git a/src/views/SILA/EventLogs/index.js b/src/views/SILA/EventLogs/index.js
deleted file mode 100644
index 521efde4..00000000
--- a/src/views/SILA/EventLogs/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import EventLogs from './EventLogs.vue';
-export default EventLogs;
diff --git a/src/views/Settings/DateTime/DateTime.vue b/src/views/Settings/DateTime/DateTime.vue
index 7ab3ec0e..63570c39 100644
--- a/src/views/Settings/DateTime/DateTime.vue
+++ b/src/views/Settings/DateTime/DateTime.vue
@@ -1,67 +1,61 @@
 <template>
-  <b-container fluid="xxl" class="pt-0 m-0">
+  <b-container id="date-time" fluid="xxl" class="pt-0 m-0">
     <page-title />
-    <b-row class="m-4">
-      <b-col md="8" xl="12">
-        <alert variant="info">
-          <span class="regular-12px">
+    <b-row class="bootstrap-table__section">
+      <b-col md="8" xl="6">
+        <alert variant="info" class="mb-4">
+          <span>
             {{ $t('pageDateTime.alert.message') }}
-            <b-link class="semi-bold-12px" to="/profile-settings">
+            <b-link to="/profile-settings">
               {{ $t('pageDateTime.alert.link') }}</b-link
             >
           </span>
         </alert>
       </b-col>
     </b-row>
-    <page-section class="m-4">
+    <page-section class="bootstrap-table__section">
       <b-row>
-        <b-col sm="6" lg="5" xl="4" xxl="3">
+        <b-col lg="3">
           <dl>
-            <dt class="semi-bold-12px">{{ $t('pageDateTime.form.date') }}</dt>
-            <dd v-if="bmcTime" class="regular-12px">
-              {{ bmcTime | formatDate }}
-            </dd>
+            <dt>{{ $t('pageDateTime.form.date') }}</dt>
+            <dd v-if="bmcTime">{{ bmcTime | formatDate }}</dd>
             <dd v-else>--</dd>
           </dl>
         </b-col>
-        <b-col sm="6" lg="5" xl="4" xxl="3">
+        <b-col lg="3">
           <dl>
-            <dt class="semi-bold-12px">
-              {{ $t('pageDateTime.form.time.label') }}
-            </dt>
-            <dd v-if="bmcTime" class="regular-12px">
-              {{ bmcTime | formatTime }}
-            </dd>
+            <dt>{{ $t('pageDateTime.form.time.label') }}</dt>
+            <dd v-if="bmcTime">{{ bmcTime | formatTime }}</dd>
             <dd v-else>--</dd>
           </dl>
         </b-col>
       </b-row>
     </page-section>
-    <page-section class="m-4">
-      <label class="semi-bold-16px">{{
-        $t('pageDateTime.configureSettings')
-      }}</label>
+    <page-section
+      class="bootstrap-table__section"
+      :section-title="$t('pageDateTime.configureSettings')"
+    >
       <b-form novalidate @submit.prevent="submitForm">
         <b-form-group
           label="Configure date and time"
           :disabled="loading"
           label-sr-only
-          class="system-control__radio regular-12px"
         >
           <b-form-radio
             v-model="form.configurationSelected"
             value="manual"
             data-test-id="dateTime-radio-configureManual"
           >
-            {{ $t('SystemDescription.UseServerDatettime') }}
+            {{ $t('pageDateTime.form.manual') }}
           </b-form-radio>
           <b-row class="mt-3 ml-3">
-            <b-col sm="7" lg="5" xl="5" xxl="3">
+            <b-col sm="6" lg="4" xl="3">
               <b-form-group
                 :label="$t('pageDateTime.form.date')"
                 label-for="input-manual-date"
+                label-class="regular-14px"
               >
-                <span class="regular-12px">YYYY-MM-DD</span>
+                <b-form-text id="date-format-help">YYYY-MM-DD</b-form-text>
                 <b-input-group>
                   <b-form-input
                     id="input-manual-date"
@@ -105,12 +99,13 @@
                 </b-input-group>
               </b-form-group>
             </b-col>
-            <b-col sm="7" lg="5" xl="5" xxl="3">
+            <b-col sm="6" lg="4" xl="3">
               <b-form-group
                 :label="$t('pageDateTime.form.time.timezone', { timezone })"
                 label-for="input-manual-time"
+                label-class="regular-14px"
               >
-                <span class="regular-12px">HH:MM</span>
+                <b-form-text id="time-format-help">HH:MM</b-form-text>
                 <b-input-group>
                   <b-form-input
                     id="input-manual-time"
@@ -134,7 +129,6 @@
           </b-row>
           <b-form-radio
             v-model="form.configurationSelected"
-            class="system-control__radio regular-12px"
             value="ntp"
             data-test-id="dateTime-radio-configureNTP"
           >
@@ -145,6 +139,7 @@
               <b-form-group
                 :label="$t('pageDateTime.form.ntpServers.server1')"
                 label-for="input-ntp-1"
+                label-class="regular-14px"
               >
                 <b-input-group>
                   <b-form-input
@@ -167,6 +162,7 @@
               <b-form-group
                 :label="$t('pageDateTime.form.ntpServers.server2')"
                 label-for="input-ntp-2"
+                label-class="regular-14px"
               >
                 <b-input-group>
                   <b-form-input
@@ -182,6 +178,7 @@
               <b-form-group
                 :label="$t('pageDateTime.form.ntpServers.server3')"
                 label-for="input-ntp-3"
+                label-class="regular-14px"
               >
                 <b-input-group>
                   <b-form-input
@@ -195,7 +192,6 @@
             </b-col>
           </b-row>
           <b-button
-            size="md"
             variant="primary"
             type="submit"
             data-test-id="dateTime-button-saveSettings"
diff --git a/src/views/Settings/Network/ModalDns.vue b/src/views/Settings/Network/ModalDns.vue
index 7f127173..a1dc9cec 100644
--- a/src/views/Settings/Network/ModalDns.vue
+++ b/src/views/Settings/Network/ModalDns.vue
@@ -5,9 +5,9 @@
     :title="$t('pageNetwork.table.addDnsAddress')"
     @hidden="resetForm"
   >
-    <b-form id="form-dns" @submit.prevent="handleSubmit">
+    <b-form id="form-dns" style="width: 100%" @submit.prevent="handleSubmit">
       <b-row>
-        <b-col sm="6">
+        <b-col>
           <b-form-group
             :label="$t('pageNetwork.modal.staticDns')"
             label-for="staticDns"
diff --git a/src/views/Settings/Network/Network.vue b/src/views/Settings/Network/Network.vue
index 2abbcd7a..2d8fd61d 100644
--- a/src/views/Settings/Network/Network.vue
+++ b/src/views/Settings/Network/Network.vue
@@ -1,10 +1,9 @@
 <template>
-  <b-container fluid="xl">
+  <b-container fluid="m-0 p-0" class="page-network">
     <page-title :description="$t('pageNetwork.pageDescription')" />
-    <!-- Global settings for all interfaces -->
-    <network-global-settings />
-    <!-- Interface tabs -->
-    <page-section v-show="ethernetData">
+
+    <page-section v-show="ethernetData" class="m-4">
+      <network-global-settings class="m-4" />
       <b-row>
         <b-col>
           <b-card no-body>
diff --git a/src/views/Settings/Network/TableDns.vue b/src/views/Settings/Network/TableDns.vue
index 569109f1..1ad8f436 100644
--- a/src/views/Settings/Network/TableDns.vue
+++ b/src/views/Settings/Network/TableDns.vue
@@ -3,7 +3,7 @@
     <b-row>
       <b-col lg="6">
         <div class="text-right">
-          <b-button variant="primary" @click="initDnsModal()">
+          <b-button variant="primary" class="mb-2" @click="initDnsModal()">
             <icon-add />
             {{ $t('pageNetwork.table.addDnsAddress') }}
           </b-button>
@@ -14,7 +14,7 @@
           :fields="dnsTableFields"
           :items="form.dnsStaticTableItems"
           :empty-text="$t('global.table.emptyMessage')"
-          class="mb-0"
+          class="bootstrap-rounded-table mb-0"
           show-empty
         >
           <template #cell(actions)="{ item, index }">
@@ -82,8 +82,19 @@ export default {
         {
           key: 'address',
           label: this.$t('pageNetwork.table.ipAddress'),
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'actions',
+          thStyle: { width: '30%' },
+          label: this.$t('pageNetwork.table.actions'),
+          thClass:
+            'text-right semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'text-right bootstrap-rounded-table__td',
         },
-        { key: 'actions', label: '', tdClass: 'text-right' },
       ],
     };
   },
@@ -115,6 +126,10 @@ export default {
           address: server,
           actions: [
             {
+              value: 'edit',
+              title: this.$t('global.action.edit'),
+            },
+            {
               value: 'delete',
               title: this.$t('pageNetwork.table.deleteDns'),
             },
diff --git a/src/views/Settings/Network/TableIpv4.vue b/src/views/Settings/Network/TableIpv4.vue
index 75870031..7481dc7b 100644
--- a/src/views/Settings/Network/TableIpv4.vue
+++ b/src/views/Settings/Network/TableIpv4.vue
@@ -7,7 +7,7 @@
         </h3>
       </b-col>
       <b-col class="text-right">
-        <b-button variant="primary" @click="initAddIpv4Address()">
+        <b-button variant="primary" class="mb-2" @click="initAddIpv4Address()">
           <icon-add />
           {{ $t('pageNetwork.table.addIpv4Address') }}
         </b-button>
@@ -19,7 +19,7 @@
       :fields="ipv4TableFields"
       :items="form.ipv4TableItems"
       :empty-text="$t('global.table.emptyMessage')"
-      class="mb-0"
+      class="bootstrap-rounded-table mb-0"
       show-empty
     >
       <template #cell(actions)="{ item, index }">
@@ -86,20 +86,43 @@ export default {
         {
           key: 'Address',
           label: this.$t('pageNetwork.table.ipAddress'),
+          thStyle: { width: '20%' },
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'Gateway',
           label: this.$t('pageNetwork.table.gateway'),
+          thStyle: { width: '20%' },
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'SubnetMask',
           label: this.$t('pageNetwork.table.subnet'),
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
         {
           key: 'AddressOrigin',
           label: this.$t('pageNetwork.table.addressOrigin'),
+          thStyle: { width: '20%' },
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-center',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'actions',
+          label: this.$t('pageNetwork.table.actions'),
+          thStyle: { width: '10%' },
+          thClass:
+            'text-right semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'text-right bootstrap-rounded-table__td',
         },
-        { key: 'actions', label: '', tdClass: 'text-right' },
       ],
     };
   },
@@ -134,6 +157,10 @@ export default {
           AddressOrigin: ipv4.AddressOrigin,
           actions: [
             {
+              value: 'edit',
+              title: this.$t('pageNetwork.table.edit'),
+            },
+            {
               value: 'delete',
               title: this.$t('pageNetwork.table.deleteIpv4'),
             },