Add global popovers. Add pages: pci, adapters, raid, drivers, virtual drivers. Fix: analytical pannel, bmc-settings popovers. fix global styles

70 files changed, 5709 insertions, 532 deletions

diff --git a/src/assets/images/icon-chevron-red.svg b/src/assets/images/icon-chevron-red.svg
new file mode 100644
index 00000000..7fcd68d4
--- /dev/null
+++ b/src/assets/images/icon-chevron-red.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.4134 1.19329L4.00006 3.77996L6.58673 1.19329C6.84673 0.933291 7.26673 0.933291 7.52673 1.19329C7.78673 1.45329 7.78673 1.87329 7.52673 2.13329L4.46673 5.19329C4.20673 5.45329 3.78673 5.45329 3.52673 5.19329L0.466729 2.13329C0.206729 1.87329 0.206729 1.45329 0.466729 1.19329C0.726729 0.939958 1.1534 0.933291 1.4134 1.19329V1.19329Z" fill="#E11717"/>
+</svg>
diff --git a/src/assets/images/clear-icon.svg b/src/assets/images/icon-clear-red.svg
index 2f50ed01..2f50ed01 100644
--- a/src/assets/images/clear-icon.svg
+++ b/src/assets/images/icon-clear-red.svg
diff --git a/src/assets/images/icon-options.svg b/src/assets/images/icon-options.svg
new file mode 100644
index 00000000..b9ab31bb
--- /dev/null
+++ b/src/assets/images/icon-options.svg
@@ -0,0 +1,3 @@
+<svg width="4" height="14" viewBox="0 0 4 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.00004 3.66683C2.91671 3.66683 3.66671 2.91683 3.66671 2.00016C3.66671 1.0835 2.91671 0.333496 2.00004 0.333496C1.08337 0.333496 0.333374 1.0835 0.333374 2.00016C0.333374 2.91683 1.08337 3.66683 2.00004 3.66683ZM2.00004 5.3335C1.08337 5.3335 0.333374 6.0835 0.333374 7.00016C0.333374 7.91683 1.08337 8.66683 2.00004 8.66683C2.91671 8.66683 3.66671 7.91683 3.66671 7.00016C3.66671 6.0835 2.91671 5.3335 2.00004 5.3335ZM2.00004 10.3335C1.08337 10.3335 0.333374 11.0835 0.333374 12.0002C0.333374 12.9168 1.08337 13.6668 2.00004 13.6668C2.91671 13.6668 3.66671 12.9168 3.66671 12.0002C3.66671 11.0835 2.91671 10.3335 2.00004 10.3335Z" fill="#040A0F" fill-opacity="0.6"/>
+</svg>
diff --git a/src/assets/images/icon-settings-red.svg b/src/assets/images/icon-settings-red.svg
new file mode 100644
index 00000000..8ed9156a
--- /dev/null
+++ b/src/assets/images/icon-settings-red.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.1917 9.8165C15.225 9.54984 15.25 9.28317 15.25 8.99984C15.25 8.7165 15.225 8.44984 15.1917 8.18317L16.95 6.80817C17.1083 6.68317 17.15 6.45817 17.05 6.27484L15.3833 3.3915C15.2833 3.20817 15.0583 3.1415 14.875 3.20817L12.8 4.0415C12.3667 3.70817 11.9 3.43317 11.3917 3.22484L11.075 1.0165C11.05 0.816504 10.875 0.666504 10.6667 0.666504H7.33332C7.12499 0.666504 6.94999 0.816504 6.92499 1.0165L6.60832 3.22484C6.09999 3.43317 5.63332 3.7165 5.19999 4.0415L3.12499 3.20817C2.93332 3.13317 2.71666 3.20817 2.61666 3.3915L0.949988 6.27484C0.841655 6.45817 0.891655 6.68317 1.04999 6.80817L2.80832 8.18317C2.77499 8.44984 2.74999 8.72484 2.74999 8.99984C2.74999 9.27484 2.77499 9.54984 2.80832 9.8165L1.04999 11.1915C0.891655 11.3165 0.849988 11.5415 0.949988 11.7248L2.61666 14.6082C2.71666 14.7915 2.94165 14.8582 3.12499 14.7915L5.19999 13.9582C5.63332 14.2915 6.09999 14.5665 6.60832 14.7748L6.92499 16.9832C6.94999 17.1832 7.12499 17.3332 7.33332 17.3332H10.6667C10.875 17.3332 11.05 17.1832 11.075 16.9832L11.3917 14.7748C11.9 14.5665 12.3667 14.2832 12.8 13.9582L14.875 14.7915C15.0667 14.8665 15.2833 14.7915 15.3833 14.6082L17.05 11.7248C17.15 11.5415 17.1083 11.3165 16.95 11.1915L15.1917 9.8165ZM8.99999 11.9165C7.39165 11.9165 6.08332 10.6082 6.08332 8.99984C6.08332 7.3915 7.39165 6.08317 8.99999 6.08317C10.6083 6.08317 11.9167 7.3915 11.9167 8.99984C11.9167 10.6082 10.6083 11.9165 8.99999 11.9165Z" fill="#E11717"/>
+</svg>
diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss
index 6009774c..0e555455 100644
--- a/src/assets/styles/bmc/custom/_base.scss
+++ b/src/assets/styles/bmc/custom/_base.scss
@@ -19,6 +19,17 @@ body {
   }
 }
 
+.pointer {
+  cursor: pointer;
+}
+
+.icon-edit,
+.icon-options {
+  display: block;
+  margin: 2px 12px 0 auto;
+  cursor: pointer;
+}
+
 h3,
 .h3 {
   font-size: 1.75rem;
@@ -56,8 +67,12 @@ h6,
   letter-spacing: 0em;
   text-align: left;
   color: $text-primary;
+    &.red {
+      color: $red-brand-primary
+     }
     &.underline {
       text-decoration: underline;
+      cursor: pointer;
     }
     &.tretiatry {
       color: $text-tretiatry;
@@ -242,4 +257,12 @@ h6,
   float: right;
   transition: 0.3s linear;
   margin: $spacer/4 35px 0 auto;
+}
+
+.icon-expand-right {
+  height: 1.2rem;
+  width: 1.2rem;
+  float: right;
+  transition: 0.3s linear;
+  margin: $spacer/4 5px 0 0;
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index e128a6db..04c612ec 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -1,14 +1,7 @@
 .btn {
-  // padding-top: $spacer / 2;
-  // padding-right: $spacer;
-  // padding-bottom: $spacer / 2;
-  // padding-left: $spacer;
   display: inline-flex;
   align-items: center;
   justify-content: space-around;
-  svg {
-    // margin-right: $spacer / 4;
-  }
   &:disabled {
     color: gray("600");
     fill: currentColor;
@@ -24,6 +17,7 @@
   background-color: $red-brand-primary;
   border-radius: 8px;
   border: none;
+  box-shadow: 1px 2px 2px -1px rgb(79 37 37 / 40%) inset;
   font-family: 'Inter', sans-serif;
   font-style: normal;
   font-weight: 600;
@@ -55,6 +49,7 @@
   color: $red-brand-primary;
   border-radius: 8px;
   border: none;
+  box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 10%) inset;
   font-family: 'Inter', sans-serif;
   font-style: normal;
   font-weight: 600;
@@ -79,7 +74,57 @@
   }
 }
 
-// Global style for all button link
+.btn-unstiled {
+  border: none;
+  &:focus {
+    box-shadow: none;
+  }
+  &:active {
+    box-shadow: none;
+  }
+}
+
+.btn-popover {
+  border: none;
+  color: $red-brand-primary;
+  height: 28px;
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 12px;
+  transition: ease-in 0.2s;
+  &:hover {
+    color: $white;
+    transition: ease-in 0.2s;
+  }
+  &:focus {
+    box-shadow: none;
+  }
+  &:active {
+    box-shadow: none;
+  }
+  &.selected-unit-button {
+    transition: ease-in 0.2s;
+    color: $white;
+  }
+  &.selected-choice-button {
+    transition: ease-in 0.2s;
+    color: $white;
+  }
+}
+
+.btn-toogle-popover {
+  justify-content: flex-start;
+  width: 25px;
+  height: 16px;
+  padding: 0;
+  &:focus {
+    box-shadow: none;
+  }
+  &:active {
+    box-shadow: none;
+  }
+}
+
 .btn-link {
   // font-weight: $headings-font-weight;
   color: $text-primary;
@@ -104,6 +149,10 @@
       transform: rotate(180deg);
       transition: 0.3s linear;
     }
+    .icon-expand-right {
+      transform: rotate(180deg);
+      transition: 0.3s linear;
+    }
   }
 }
 
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 7c0a0bd6..51dc0ed6 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -123,7 +123,7 @@
 .custom-switch {
   width: 28px;
   height: 16px;
-  margin: 0 0 0 auto;
+  margin: -4px 0 -4px auto;
 }
 
 .custom-switch
diff --git a/src/assets/styles/bmc/custom/_popover.scss b/src/assets/styles/bmc/custom/_popover.scss
index f539ef54..a33f108f 100644
--- a/src/assets/styles/bmc/custom/_popover.scss
+++ b/src/assets/styles/bmc/custom/_popover.scss
@@ -6,8 +6,8 @@
   box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.05);
   border-radius: 4px;
   position: relative;
-  max-width: 389px;
-  width: 389px;
+  max-width: 400px;
+  width: 400px;
   height: auto;
 }
 
@@ -20,4 +20,52 @@
 
 .arrow {
   visibility: hidden;
-}
\ No newline at end of file
+}
+
+.popover-heigth-100 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  background: $white;
+  border: 1px solid $faint-secondary-primary-10;
+  box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.05);
+  padding: 5px;
+  border-radius: 8px;
+  max-width: 100px;
+}
+
+.popover-heigth-100 .popover-body {
+  padding: 0px;
+
+}
+
+.apply-reload-popover {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  background: $white;
+  border: 1px solid $faint-secondary-primary-10;
+  box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.05);
+  padding: 5px;
+  border-radius: 8px;
+  max-width: 250px;
+}
+
+.apply-reload-popover .popover-body {
+  padding: 0px;
+}
+
+.boot-popover {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  background: $white;
+  border: 1px solid $faint-secondary-primary-10;
+  box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.05);
+  padding: 5px;
+  border-radius: 8px;
+  max-width: 200px;
+}
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index bc3be1b2..d76d4982 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -171,6 +171,34 @@
   // }
 }
 
+.bootstrap-table__stripes tr:nth-of-type(even) {
+  background-color: rgb(255 255 255);
+}
+
+
+////// не работает
+.bootstrap-table__stripes_odd tr:nth-of-type(odd) {
+  background-color: rgb(255 255 255);
+}
+
+.bootstrap-table__head_bg {
+  border-top: none;
+  display: none;
+}
+
+.bootstrap-table__column-first {
+  border-right: 1px solid rgba(26, 62, 91, 0.1);
+  border-top: none;
+}
+
+.bootstrap-table__column-last {
+  border-top: none;
+}
+
+.bootstrap-table__td {
+  border-top: 1px solid rgba(26, 62, 91, 0.1);
+}
+
 .bootstrap-table__section {
   position: relative;
   margin: 16px 2rem 0 2rem;
@@ -245,23 +273,24 @@
   border-radius: 4px; 
 }
 
-.bootstrap-analytical-table__head_bg {
-  background-color: transparent !important;
+.bootstrap-analytical-th {
+  border-bottom: 1px solid rgba(26, 62, 91, 0.3) !important;
+  background-color: $white !important;
   color: $text-primary !important;
 }
 
 .bootstrap-analytical-table__column-first {
   border-top: none !important;
-  border-radius: 10px 0 0 0;
-  -webkit-border-radius: 10px 0 0 0;
-  -moz-border-radius: 10px 0 0 0;
+  border-radius: 4px 0 0 0;
+  -webkit-border-radius: 4px 0 0 0;
+  -moz-border-radius: 4px 0 0 0;
 }
 
 .bootstrap-analytical-table__column-last {
   border-top: none !important;
-  border-radius: 0 10px 0 0;
-  -webkit-border-radius: 0 10px 0 0;
-  -moz-border-radius: 0 10px 0 0;
+  border-radius: 0 4px 0 0;
+  -webkit-border-radius: 0 4px 0 0;
+  -moz-border-radius: 0 4px 0 0;
 }
 
 .bootstrap-analytical-table__column-center {
@@ -272,13 +301,11 @@
 }
 
 .bootstrap-analytical-table__td {
+  padding: 10px !important;
   border-radius: 0;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   -ms-border-radius: 0;
   -o-border-radius: 0;
   -khtml-border-radius: 0;
-  &:hover {
-    background-color: $faint-secondary-primary-5;
-  }
 }
\ No newline at end of file
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 84b81ac6..1cdb7120 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -268,7 +268,7 @@ svg {
   top: $header-height;
   bottom: 0;
   left: 0;
-  z-index: $zindex-fixed;
+  z-index: 10;
   overflow-y: overlay;
   background-color: theme-color('light');
   transform: translateX(-$navigation-width);
diff --git a/src/components/AppNavigation/AppNavigationMixin.js b/src/components/AppNavigation/AppNavigationMixin.js
index 7c981ec6..c58553a2 100644
--- a/src/components/AppNavigation/AppNavigationMixin.js
+++ b/src/components/AppNavigation/AppNavigationMixin.js
@@ -56,50 +56,33 @@ export const AppNavigationMixin = {
             },
           ],
         },
-        // {
-        //   id: 'analytical-panel',
-        //   label: this.$t('appNavigation.analyticalPanel'),
-        //   route: '/',
-        // },
-        // {
-        //   id: 'RAID',
-        //   label: this.$t('appNavigation.raidControllers'),
-        //   icon: 'iconChevronUp',
-        //   children: [
-        //     {
-        //       id: 'overview-info',
-        //       label: this.$t('appNavigation.specifications'),
-        //       route: '/logs/event-logs',
-        //     },
-        //     {
-        //       id: 'post-code-logs',
-        //       label: this.$t('appNavigation.settings'),
-        //       route: '/logs/post-code-logs',
-        //     },
-        //     {
-        //       id: 'post-code-logs',
-        //       label: this.$t('appNavigation.cachRaid'),
-        //       route: '/logs/post-code-logs',
-        //     },
-        //   ],
-        // },
-        // {
-        //   id: 'power-supplies',
-        //   label: this.$t('appNavigation.powerSupplies'),
-        //   icon: 'iconChevronUp',
-        //   children: [
-        //     {
-        //       id: 'overview-info',
-        //       label: this.$t('appNavigation.specifications'),
-        //       route: '/logs/event-logs',
-        //     },
-        //     {
-        //       id: 'post-code-logs',
-        //       label: this.$t('appNavigation.analyticalPanel'),
-        //       route: '/logs/post-code-logs',
-        //     },
-        //   ],
-        // },
+        {
+          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'),
@@ -169,6 +152,28 @@ export const AppNavigationMixin = {
           ],
         },
         {
+          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',
@@ -185,59 +190,37 @@ export const AppNavigationMixin = {
             },
           ],
         },
-        // {
-        //   id: 'physical-drives',
-        //   label: this.$t('appNavigation.physicalDrives'),
-        //   icon: 'iconChevronUp',
-        //   children: [
-        //     {
-        //       id: 'overview-info',
-        //       label: this.$t('appNavigation.specifications'),
-        //       route: '/logs/event-logs',
-        //     },
-        //     {
-        //       id: 'post-code-logs',
-        //       label: this.$t('appNavigation.analyticalPanel'),
-        //       route: '/logs/post-code-logs',
-        //     },
-        //   ],
-        // },
-        // {
-        //   id: 'virtual-drives',
-        //   label: this.$t('appNavigation.virtualDrives'),
-        //   route: '/',
-        // },
-        // {
-        //   id: 'network-adapters',
-        //   label: this.$t('appNavigation.networkAdapters'),
-        //   icon: 'iconChevronUp',
-        //   children: [
-        //     {
-        //       id: 'overview-info',
-        //       label: this.$t('appNavigation.ethernetAdapters'),
-        //       route: '/logs/event-logs',
-        //     },
-        //     {
-        //       id: 'post-code-logs',
-        //       label: this.$t('appNavigation.fcHbaAdapters'),
-        //       route: '/logs/post-code-logs',
-        //     },
-        //     {
-        //       id: 'post-code-logs',
-        //       label: this.$t('appNavigation.analyticalPanel'),
-        //       route: '/logs/post-code-logs',
-        //     },
-        //   ],
-        // },
-        // {
-        //   id: 'pci-devises',
-        //   label: this.$t('appNavigation.pciDevises'),
-        //   route: '/',
-        // },
-        //old tabs
+        {
+          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: 'Страницы BMC webui-vue',
+          label: 'Обзор',
           route: '/Info',
         },
         {
diff --git a/src/components/Global/Popover.vue b/src/components/Global/Popover.vue
index bae121c3..f0b4063f 100644
--- a/src/components/Global/Popover.vue
+++ b/src/components/Global/Popover.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="my-container">
     <div v-if="isclear" :id="id" ref="button" variant="primary" class="pointer">
-      <img src="@/assets/images/clear-icon.svg" />
+      <img src="@/assets/images/icon-clear-red.svg" />
       <span class="regular-12px red-font">{{ $t(description) }}</span>
     </div>
     <div
@@ -15,11 +15,22 @@
       <span class="regular-12px red-font">{{ $t(description) }}</span>
     </div>
 
+    <div
+      v-else-if="isMicrocodeDrivers"
+      :id="id"
+      ref="button"
+      variant="primary"
+      class="pointer"
+    >
+      <img src="@/assets/images/icon-reload-red.svg" />
+      <span class="semi-bold-16px red-font">{{ $t(description) }}</span>
+    </div>
+
     <span
       v-else
       :id="id"
       ref="button"
-      class="regular-12px underline pointer"
+      class="regular-12px underline"
       variant="primary"
     >
       {{ $t(description) }}
@@ -104,6 +115,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isMicrocodeDrivers: {
+      type: Boolean,
+      default: false,
+    },
     isclear: {
       type: Boolean,
       default: false,
@@ -245,10 +260,6 @@ export default {
   margin: 0px 5px 0px 15px;
 }
 
-.pointer {
-  cursor: pointer;
-}
-
 .popover-info {
   background-color: $on-surface-primary;
   // border: 1px solid $text-primary;
diff --git a/src/components/Global/SilaComponents/ApplySettingsPopover.vue b/src/components/Global/SilaComponents/ApplySettingsPopover.vue
new file mode 100644
index 00000000..57e0844c
--- /dev/null
+++ b/src/components/Global/SilaComponents/ApplySettingsPopover.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="popover-applay-container">
+    <span class="apply-label regular-12px tretiatry">
+      {{ $t('global.applySettings.apply') }}</span
+    >
+    <b-button :id="`popover-apply-ractive${id}`" variant="unstiled">
+      <span class="regular-12px apply-variant">
+        {{ $t(`global.applySettings.${applyType}`) }}</span
+      >
+      <img class="apply-chevron" src="@/assets/images/icon-chevron-red.svg" />
+    </b-button>
+    <b-popover
+      placement="bottom"
+      triggers="focus"
+      :show.sync="show"
+      custom-class="apply-reload-popover"
+      :target="`popover-apply-ractive${id}`"
+      @hidden="onHidden"
+    >
+      <b-button
+        id="popover-apply-button"
+        variant="popover"
+        :class="{ 'hovered-apply-button': scale === topPosition }"
+        @mouseover="scale = topPosition"
+        @click="
+          () => {
+            show = false;
+            appalyOnReload();
+          }
+        "
+      >
+        При перезагрузке
+      </b-button>
+      <b-button
+        id="popover-apply-button"
+        variant="popover"
+        :class="{ 'hovered-apply-button': scale === middlePosition }"
+        @mouseover="scale = middlePosition"
+        @click="
+          () => {
+            show = false;
+            appalyOption1();
+          }
+        "
+      >
+        Опция 1
+      </b-button>
+      <b-button
+        id="popover-apply-button"
+        variant="popover"
+        :class="{ 'hovered-apply-button': scale === bottomPosition }"
+        @mouseover="scale = bottomPosition"
+        @click="
+          () => {
+            show = false;
+            appalyOption2();
+          }
+        "
+      >
+        Опция 2
+      </b-button>
+      <div class="slider" :style="`left: 5px; top: ${scale}px;`"></div>
+    </b-popover>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: Number,
+      default: 1,
+    },
+    appalyOnReload: {
+      type: Function,
+      default: null,
+    },
+    appalyOption1: {
+      type: Function,
+      default: null,
+    },
+    appalyOption2: {
+      type: Function,
+      default: null,
+    },
+    applyType: {
+      type: String,
+      default: 'reload',
+    },
+  },
+  data() {
+    return {
+      topPosition: 5,
+      middlePosition: 33,
+      bottomPosition: 60,
+      show: false,
+      scale: 5,
+    };
+  },
+  methods: {
+    onHidden() {
+      if (this.applyType === 'reload') {
+        this.scale = this.topPosition;
+      } else if (this.applyType === 'option1') {
+        this.scale = this.middlePosition;
+      } else {
+        this.scale = this.bottomPosition;
+      }
+    },
+  },
+};
+</script>
+<style lang="scss">
+.popover-applay-container {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  margin-left: auto;
+}
+
+#popover-apply-ractive {
+  padding-left: 5px;
+}
+
+.hovered-apply-button {
+  color: $white;
+}
+</style>
+<style lang="scss" scoped>
+.apply-label {
+  margin-left: auto;
+}
+
+.apply-chevron {
+  margin: 0 10px 0 5px;
+  cursor: pointer;
+}
+
+#popover-apply-ractive {
+  padding-left: 5px;
+}
+
+.apply-variant {
+  cursor: pointer;
+  color: $red-brand-primary;
+}
+
+#popover-apply-button {
+  justify-content: flex-start;
+  width: 240px;
+}
+
+.slider {
+  width: 240px;
+  height: 28px;
+  border-radius: 8px;
+  background-color: $red-brand-primary;
+  box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 40%) inset;
+  position: absolute;
+  transition: ease-in 0.2s;
+  z-index: -1;
+}
+</style>
diff --git a/src/views/MemoryModules/Specification/MemorySwitch.vue b/src/components/Global/SilaComponents/DataTabs.vue
index 27101daa..49afbbfb 100644
--- a/src/views/MemoryModules/Specification/MemorySwitch.vue
+++ b/src/components/Global/SilaComponents/DataTabs.vue
@@ -1,23 +1,22 @@
 <template>
-  <div
-    ref="content"
-    class="memory-switch"
-    @wheel.prevent="wheelItBetter($event)"
-  >
-    <span
-      v-for="item in slots"
-      :key="item.id"
-      class="medium-12px scale-item"
-      :class="{ 'switch-active': currentMemory === item.id }"
-      @click="switchMemory(item.id)"
-      >{{ $t(item.name) }}</span
-    >
+  <div>
     <div
-      class="slider"
-      :style="`width: 98px; left: ${
-        ((currentMemory ? currentMemory : 1) - 1) * 120 + 32
-      }px`"
-    />
+      ref="content"
+      :class="'tabs-switch'"
+      :style="gridStyle"
+      @wheel.prevent="wheelItBetter($event)"
+    >
+      <span
+        v-for="item in slots"
+        :key="item.id"
+        class="medium-12px scale-item"
+        :class="{ 'tab-active': currentTab === item.id }"
+        :style="`width: ${slotWidth}px`"
+        @click="switchTab(item.id)"
+        >{{ $t(item.name) }}</span
+      >
+      <div class="slider" :style="sliderStyle" />
+    </div>
   </div>
 </template>
 
@@ -28,14 +27,22 @@ export default {
       type: Array,
       default: null,
     },
-    currentMemory: {
+    currentTab: {
       type: Number,
       default: 1,
     },
-    switchMemory: {
+    switchTab: {
       type: Function,
       required: true,
     },
+    slotWidth: {
+      type: Number,
+      default: null,
+    },
+    sliderWidth: {
+      type: Number,
+      default: null,
+    },
   },
   data() {
     return {
@@ -43,6 +50,21 @@ export default {
       container: this.$refs.content,
     };
   },
+  computed: {
+    sliderStyle() {
+      return {
+        width: `${this.sliderWidth}px`,
+        left: `${
+          ((this.currentTab ? this.currentTab : 1) - 1) * this.slotWidth
+        }px`,
+      };
+    },
+    gridStyle() {
+      return {
+        gridTemplateColumns: `repeat(${this.slots.length}, ${this.slotWidth}px)`,
+      };
+    },
+  },
   methods: {
     wheelItBetter(event) {
       if (event.deltaY < 0) {
@@ -55,14 +77,13 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.memory-switch {
+.tabs-switch {
   position: relative;
-  width: calc(93vw - 320px);
-  height: 50px;
-  padding: 0 16px 0 32px;
+  width: calc(95vw - 320px);
+  height: 45px;
+  margin-left: 32px;
   display: grid;
   grid-auto-flow: column;
-  grid-auto-columns: 120px;
   grid-template-rows: 32px;
   align-items: end;
   border-bottom: 1px solid $faint-secondary-primary-10;
@@ -79,7 +100,7 @@ export default {
   }
 }
 
-.switch-active {
+.tab-active {
   color: $red-brand-primary;
   transition: ease-in 0.15s;
 }
@@ -94,9 +115,12 @@ export default {
 
 .scale-item {
   display: inline-block;
-  width: 120px;
   margin-right: 6px;
   cursor: pointer;
+  &:hover {
+    transition: ease-in 0.2s;
+    color: #e11717;
+  }
 }
 
 .date-picker {
diff --git a/src/components/Global/SilaComponents/DateSwitch.vue b/src/components/Global/SilaComponents/DateSwitch.vue
index 0769c734..4df70ba4 100644
--- a/src/components/Global/SilaComponents/DateSwitch.vue
+++ b/src/components/Global/SilaComponents/DateSwitch.vue
@@ -37,7 +37,7 @@
         $t('global.date.selectDate')
       }}</span>
     </div>
-    <img class="date-clear" src="@/assets/images/clear-icon.svg" />
+    <img class="date-clear" src="@/assets/images/icon-clear-red.svg" />
   </div>
 </template>
 
diff --git a/src/components/Global/SilaComponents/InventoryControlSystem.vue b/src/components/Global/SilaComponents/InventoryControlSystem.vue
index 9760f24f..de5432e1 100644
--- a/src/components/Global/SilaComponents/InventoryControlSystem.vue
+++ b/src/components/Global/SilaComponents/InventoryControlSystem.vue
@@ -19,10 +19,7 @@
             popup="SystemDescription.ReloadServer_popup"
           />
           <div>
-            <span
-              class="regular-12px underline pointer"
-              @click="redirectConsole"
-            >
+            <span class="regular-12px underline" @click="redirectConsole">
               {{ $t('SystemDescription.ConnectToDesktop') }}
             </span>
           </div>
@@ -151,10 +148,6 @@ a {
   list-style-type: none;
 }
 
-.pointer {
-  cursor: pointer;
-}
-
 .system-control-section {
   position: relative;
   margin: 16px 2rem 2rem !important;
diff --git a/src/components/Global/SilaComponents/NtpPopover.vue b/src/components/Global/SilaComponents/NtpPopover.vue
index 918b1220..c94c1cc8 100644
--- a/src/components/Global/SilaComponents/NtpPopover.vue
+++ b/src/components/Global/SilaComponents/NtpPopover.vue
@@ -129,8 +129,4 @@ export default {
 .tretiatry {
   margin-left: 12px;
 }
-
-.underline {
-  cursor: pointer;
-}
 </style>
diff --git a/src/components/Global/SilaComponents/TwoChiocePopover.vue b/src/components/Global/SilaComponents/TwoChiocePopover.vue
new file mode 100644
index 00000000..c89c5a81
--- /dev/null
+++ b/src/components/Global/SilaComponents/TwoChiocePopover.vue
@@ -0,0 +1,117 @@
+<template>
+  <b-popover
+    :placement="placement"
+    triggers="focus"
+    :show.sync="show"
+    custom-class="popover-heigth-100"
+    :target="`popover-choice-${id}`"
+    @hidden="onHidden"
+  >
+    <b-button
+      id="popover-choice-button"
+      variant="popover"
+      :class="{ 'selected-choice-button': scale === topPosition }"
+      @mouseover="scale = topPosition"
+      @click="
+        () => {
+          show = false;
+          firstAction();
+        }
+      "
+    >
+      {{ fitstOption }}
+    </b-button>
+    <b-button
+      id="popover-choice-button"
+      variant="popover"
+      :class="{ 'selected-choice-button': scale === bottomPosition }"
+      @mouseover="scale = bottomPosition"
+      @click="
+        () => {
+          show = false;
+          secondAction();
+        }
+      "
+    >
+      {{ secondOption }}
+    </b-button>
+    <div class="slider" :style="`left: 5px; top: ${scale}px;`"></div>
+  </b-popover>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: Number,
+      default: null,
+    },
+    fitstOption: {
+      type: String,
+      default: null,
+    },
+    secondOption: {
+      type: String,
+      default: null,
+    },
+    chosenOption: {
+      type: String,
+      default: null,
+    },
+    firstAction: {
+      type: Function,
+      default: null,
+    },
+    secondAction: {
+      type: Function,
+      default: null,
+    },
+    placement: {
+      type: String,
+      default: 'bottom',
+    },
+  },
+  data() {
+    return {
+      topPosition: 5,
+      bottomPosition: 33,
+      show: false,
+      scale: 5,
+    };
+  },
+  methods: {
+    onHidden() {
+      if (this.secondOption === this.chosenOption) {
+        this.scale = this.bottomPosition;
+      } else {
+        this.scale = this.topPosition;
+      }
+    },
+  },
+};
+</script>
+<style lang="scss">
+#popover-unit-ractive {
+  padding-left: 5px;
+}
+
+.hovered-unit-button {
+  color: $white;
+}
+</style>
+<style lang="scss" scoped>
+#popover-choice-button {
+  width: 89px;
+}
+
+.slider {
+  width: 89px;
+  height: 28px;
+  border-radius: 8px;
+  background-color: $red-brand-primary;
+  box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 40%) inset;
+  position: absolute;
+  transition: ease-in 0.2s;
+  z-index: -1;
+}
+</style>
diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json
index 512631e6..e6753ea6 100644
--- a/src/locales/ru-RU.json
+++ b/src/locales/ru-RU.json
@@ -26,7 +26,9 @@
       "reload": "Перезагрузить",
       "off": "Выключить",
       "selected": "Выбрано",
-      "acceptChanges": "Применить изменения"
+      "acceptChanges": "Применить изменения",
+      "events": "События",
+      "addTome": "Добавить том"
     },
     "ariaLabel": {
       "clearSearch": "Очистить поле поиска",
@@ -70,6 +72,9 @@
     },
     "status": {
       "status":"Статус",
+      "serverStatus": "Состояние сервера",
+      "inWork": "Работоспособен",
+      "outWorking": "Не работоспособен",
       "copied": "Скопировано",
       "disabled": "Выключено",
       "enabled": "Включено",
@@ -105,6 +110,17 @@
     "toast": {
       "unAuthTitle": "Недоступно",
       "unAuthDescription": "Действие недоступно из текущей учётной записи. Свяжитесь с Вашим системным администратором для проверки прав доступа."
+    },
+    "units": {
+      "unit": "Единица:",
+      "amper": "Ампераж",
+      "volt": "Вольтаж"
+    },
+    "applySettings": {
+      "apply": "Применить:",
+      "reload": "При перезагрузке",
+      "option1": "Опция 1",
+      "option2": "Опция 2"
     }
   },
   "appHeader": {
@@ -1045,6 +1061,7 @@
     "testMessage": "Тестовое сообщение",
     "smnp": "Настройки SNMP",
     "smnpWarning": "Предупреждения SNMP",
+    "smtpWarning": "Предупреждения SMTP",
     "system": "Расположение системы",
     "contacts": "Контакты системы",
     "community": "Community String",
@@ -1081,8 +1098,6 @@
     "GetNtpFromServer": "Получать с NTP-сервера",
     "UseServerDatettime": "Использовать дату и время сервера",
     "NtpSettings": "Настройки NTP-сервера",
-    "Reload": "Перезагрузить",
-    "Off": "Выключить",
     "LoadingQueue": "Последовательность загрузки",
     "DiskParametrs": "Параметры выбранного диска",
     "FansDynamicInformation": "Динамические показатели",
@@ -1092,23 +1107,20 @@
     "offBootRom": "Выключить boot ROM",
     "offBootRom_popup": "ВЫключение boot ROM",
     "microcodeDrivers": "Микрокод накопителя",
-    "reloadMicrocodeDrivers": "Обновить микрокод накопителя"
+    "reloadMicrocodeDrivers": "Обновить микрокод накопителя",
+    "microcodeAdapter": "Микрокод адаптера"
   },
   "fansPage": {
     "speedDescription": "Показатели скорости",
     "speedWarhihg": "Пороговое значение предупреждения, об/мин",
     "speedShutdown": "Пороговое значение отказа, об/мин",
-    "valueIndicators": "Значения Показателей",
-    "inWork": "Работоспособен",
-    "notWorking": "Не работоспособен"
+    "valueIndicators": "Значения Показателей"
   },
   "tablesDescription": {
     "speedWarhihg": "Пороговое значение предупреждения, об/мин",
     "speedShutdown": "Пороговое значение отказа, об/мин",
     "valueIndicators": "Значения Показателей",
     "installedFans": "Установленные вентиляторы",
-    "inWork": "Работоспособен",
-    "notWorking": "Не работоспособен",
     "temperatureWarning": "Пороговое значениe предупреждения, С°",
     "nonNormalMode": "Не штатный режим, С°",
     "criticalMode": "Критический режим, С°",
@@ -1136,6 +1148,16 @@
       "microcode_popoveer": "Обновление микрокода контроллера",
       "lun": "Настройки LUN"
   },
+  "adapters": {
+    "wwnAddres": "WWN адрес",
+    "settings": "Настройки и возможности",
+    "microcodeUpdate": "Обновить микрокод адаптера",
+    "microcodeUpdate_popup": "Обновление микрокода адаптера",
+    "propherties": "Опубликованые Свойства",
+    "PXE": "PXE для Ethernet-адаптеров",
+    "links": "Состояние линков",
+    "transceivers": "Приемопередатчики"
+},
 
   "countries": {
     "AF": "Афганистан",
diff --git a/src/router/routes.js b/src/router/routes.js
index 10d4c5dc..d6a2d694 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -51,9 +51,25 @@ 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';
+import SILARaidSettins from '@/views/SILA/RAID/Settings';
+import SILARaidCache from '@/views/SILA/RAID/Cache';
+
+import DriversStaticPage from '@/views/SILA/PhysicalDrivers/StaticInfo';
+import DriversDynamicPage from '@/views/SILA/PhysicalDrivers/DynamicInfo';
+import VirtualDriversPage from '@/views/SILA/VirtualDrivers/';
+
 import MotherboardSpecificationPage from '@/views/Motherboard/Specification';
 import MotherboardDynamicPage from '@/views/Motherboard/DynamicInfo';
 
+import NetworkPannel from '@/views/SILA/NetworkAdapters/Dynamic';
+import EthernetAdapters from '@/views/SILA/NetworkAdapters/EthernetAdapters';
+import FcHbaAdapters from '@/views/SILA/NetworkAdapters/FcHbaAdapters';
+
+import PciDevices from '@/views/SILA/PciDevices';
+
 import Support from '@/views/Support';
 
 import i18n from '@/i18n';
@@ -185,6 +201,41 @@ const routes = [
         },
       },
       {
+        path: '/analytical-panel',
+        name: 'analytical-panel',
+        component: SILAAnalyticalPanel,
+        meta: {
+          title: i18n.t('appNavigation.analyticalPanel'),
+        },
+      },
+      {
+        path: '/raid-specification',
+        name: 'raid-specification',
+        component: SILARaidSpecification,
+        meta: {
+          title: i18n.t('appNavigation.raidControllers'),
+          description: i18n.t('appNavigation.specification'),
+        },
+      },
+      {
+        path: '/raid-settings',
+        name: 'raid-settings',
+        component: SILARaidSettins,
+        meta: {
+          title: i18n.t('appNavigation.raidControllers'),
+          description: i18n.t('appNavigation.settings'),
+        },
+      },
+      {
+        path: '/raid-cache',
+        name: 'raid-cache',
+        component: SILARaidCache,
+        meta: {
+          title: i18n.t('appNavigation.raidControllers'),
+          description: i18n.t('RAID.cache'),
+        },
+      },
+      {
         path: '/processors-specification',
         name: 'processors-specification',
         component: ProcessorsSpecificationPage,
@@ -257,6 +308,32 @@ const routes = [
         },
       },
       {
+        path: '/drivers-static',
+        name: 'drivers-static',
+        component: DriversStaticPage,
+        meta: {
+          title: i18n.t('appNavigation.physicalDrives'),
+          description: i18n.t('appNavigation.statisticInformation'),
+        },
+      },
+      {
+        path: '/drivers',
+        name: 'drivers',
+        component: DriversDynamicPage,
+        meta: {
+          title: i18n.t('appNavigation.physicalDrives'),
+          description: i18n.t('appNavigation.dynamicInformation'),
+        },
+      },
+      {
+        path: '/virtual-drivers',
+        name: 'virtual-drivers',
+        component: VirtualDriversPage,
+        meta: {
+          title: i18n.t('appNavigation.virtualDrivers'),
+        },
+      },
+      {
         path: '/motherboard-specification',
         name: 'motherboard-specification',
         component: MotherboardSpecificationPage,
@@ -275,6 +352,41 @@ const routes = [
         },
       },
       {
+        path: '/network-adapters-ethernet',
+        name: 'network-adapters-ethernet',
+        component: EthernetAdapters,
+        meta: {
+          title: i18n.t('appNavigation.networkAdapters'),
+          description: i18n.t('appNavigation.ethernetAdapters'),
+        },
+      },
+      {
+        path: '/network-adapters-fc-hba',
+        name: 'network-adapters-fc-hba',
+        component: FcHbaAdapters,
+        meta: {
+          title: i18n.t('appNavigation.networkAdapters'),
+          description: i18n.t('appNavigation.fcHbaAdapters'),
+        },
+      },
+      {
+        path: '/network-adapters-pannel',
+        name: 'network-adapters-pannel',
+        component: NetworkPannel,
+        meta: {
+          title: i18n.t('appNavigation.networkAdapters'),
+          description: i18n.t('appNavigation.analyticalPanel'),
+        },
+      },
+      {
+        path: '/pci-devices',
+        name: 'pci-devices',
+        component: PciDevices,
+        meta: {
+          title: i18n.t('appNavigation.pciDevices'),
+        },
+      },
+      {
         path: '/Info',
         name: 'overview',
         component: Overview,
diff --git a/src/views/BMC/Configuration/BMCConfigurationControl.vue b/src/views/BMC/Configuration/BMCConfigurationControl.vue
index 7f3de021..0eb8bfc9 100644
--- a/src/views/BMC/Configuration/BMCConfigurationControl.vue
+++ b/src/views/BMC/Configuration/BMCConfigurationControl.vue
@@ -19,7 +19,7 @@
         />
         <div>
           <span
-            class="regular-12px underline pointer"
+            class="regular-12px underline"
             @click="redirectNetworkParametrs"
             >{{ $t('BMC.Parametrs') }}</span
           >
@@ -115,8 +115,4 @@ a {
 label {
   padding-top: 5px;
 }
-
-.pointer {
-  cursor: pointer;
-}
 </style>
diff --git a/src/views/BMC/Configuration/SettingsImportPopup.vue b/src/views/BMC/Configuration/SettingsImportPopup.vue
index c7309ba3..748518bc 100644
--- a/src/views/BMC/Configuration/SettingsImportPopup.vue
+++ b/src/views/BMC/Configuration/SettingsImportPopup.vue
@@ -3,7 +3,7 @@
     <span
       :id="id"
       ref="button"
-      class="regular-12px underline pointer"
+      class="regular-12px underline"
       variant="primary"
     >
       {{ $t(description) }}
@@ -227,10 +227,6 @@ export default {
   justify-content: center;
 }
 
-.pointer {
-  cursor: pointer;
-}
-
 .medium-16px {
   display: inline-block;
   height: 45px;
diff --git a/src/views/BMC/Settings/SettingsPage.vue b/src/views/BMC/Settings/SettingsPage.vue
index c9a0df8d..a5b6cd76 100644
--- a/src/views/BMC/Settings/SettingsPage.vue
+++ b/src/views/BMC/Settings/SettingsPage.vue
@@ -6,7 +6,7 @@
     <page-title />
     <!-- BMC table -->
     <div class="main-container">
-      <div class="smnp-section">
+      <div class="bmc-settings-section">
         <div class="smnp-settings-container">
           <span class="bold-12px__caps section-label">{{
             $t('BMC.smnp')
@@ -49,8 +49,8 @@
               $t('global.status.status')
             }}</label>
             <b-form-select
-              v-model="connectionType"
-              :options="connectionTypes"
+              v-model="smnpStatus"
+              :options="smnpStatuses"
               class="select-connection medium-16px"
             />
           </b-form-group>
@@ -83,7 +83,7 @@
           </div>
         </div>
       </div>
-      <div class="smnp-section">
+      <div class="bmc-settings-section">
         <div class="smnp-settings-container">
           <span class="bold-12px__caps section-label">{{
             $t('BMC.smnpWarning')
@@ -125,7 +125,79 @@
         </div>
       </div>
 
-      <div class="smnp-section">
+      <div class="bmc-settings-section">
+        <div class="smnp-settings-container">
+          <span class="bold-12px__caps section-label">{{
+            $t('BMC.smtpWarning')
+          }}</span>
+          <div class="table-section">
+            <b-table
+              responsive="md"
+              show-empty
+              class="bootstrap-rounded-table"
+              :items="items2"
+              :fields="fields2"
+            >
+              <template #cell(value)="data">
+                <b-row v-if="data.index === 0">
+                  <b-col>
+                    <span v-if="items2[data.index].value">
+                      {{ $t('global.status.enabled') }}
+                    </span>
+                    <span v-else>
+                      {{ $t('global.status.disabled') }}
+                    </span>
+                  </b-col>
+                  <b-col>
+                    <b-form-checkbox v-model="items2[data.index].value" switch>
+                    </b-form-checkbox>
+                  </b-col>
+                </b-row>
+                <b-row v-else-if="data.index === 4">
+                  <b-col>
+                    <span>
+                      {{ data.value ? 'Да' : 'Нет' }}
+                    </span>
+                  </b-col>
+                  <b-col>
+                    <b-button
+                      :id="`popover-choice-${data.index}`"
+                      class="popover-option-ractive"
+                      variant="toogle-popover"
+                    >
+                      <img :is="iconChevron" class="icon-chevron" />
+                    </b-button>
+                    <two-chioce-popover
+                      :id="data.index"
+                      fitst-option="Да"
+                      second-option="Нет"
+                      :chosen-option="chosenOption"
+                      :first-action="setYes"
+                      :second-action="setNo"
+                      placement="leftbottom"
+                    />
+                  </b-col>
+                </b-row>
+                <b-row v-else>
+                  <b-col>
+                    <span>
+                      {{ data.value }}
+                    </span>
+                  </b-col>
+                  <b-col>
+                    <img
+                      src="@/assets/images/icon-edit.svg"
+                      class="icon-chevron icon-edit"
+                    />
+                  </b-col>
+                </b-row>
+              </template>
+            </b-table>
+          </div>
+        </div>
+      </div>
+
+      <div class="bmc-settings-section last">
         <div class="smnp-settings-container">
           <span class="bold-12px__caps section-label">{{
             $t('BMC.syslogSettings')
@@ -135,8 +207,8 @@
               $t('global.status.status')
             }}</label>
             <b-form-select
-              v-model="connectionType"
-              :options="connectionTypes"
+              v-model="syslogStatus"
+              :options="syslogStatuses"
               class="select-connection medium-16px"
             />
           </b-form-group>
@@ -177,15 +249,17 @@
 
 <script>
 import PageTitle from '@/components/Global/PageTitle';
-// import PageSection from '@/components/Global/PageSection';
+import TwoChiocePopover from '@/components/Global/SilaComponents/TwoChiocePopover';
+import iconChevron from '@carbon/icons-vue/es/chevron--down/16';
 
 export default {
   components: {
     PageTitle,
-    // PageSection,
+    TwoChiocePopover,
   },
   data() {
     return {
+      iconChevron,
       text: '',
       system: '2КА04.02_г17',
       community: 'public',
@@ -193,6 +267,29 @@ export default {
       smnpPort: '161',
       syslogIp: '0.0.0.0',
       syslogPort: '161',
+      chosenOption: 'Да',
+      smnpStatus: true,
+      smnpStatuses: [
+        {
+          value: true,
+          text: 'Включена',
+        },
+        {
+          value: false,
+          text: 'Выключена',
+        },
+      ],
+      syslogStatus: true,
+      syslogStatuses: [
+        {
+          value: true,
+          text: 'Включена',
+        },
+        {
+          value: false,
+          text: 'Выключена',
+        },
+      ],
       fields: [
         {
           key: 'name',
@@ -213,6 +310,26 @@ export default {
           tdClass: 'regular-12px bootstrap-rounded-table__td',
         },
       ],
+      fields2: [
+        {
+          key: 'attributes',
+          label: 'Атрибуты',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: `bootstrap-rounded-table__column-first
+            bootstrap-table_smnp-table`,
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'value',
+          label: 'Значение',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: `bootstrap-rounded-table__column-last 
+            smnp-table-col-last`,
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
       items: [
         {
           name: 'SNMPv1',
@@ -227,8 +344,44 @@ export default {
           value: true,
         },
       ],
+      items2: [
+        {
+          attributes: 'Авторизация',
+          value: true,
+        },
+        {
+          attributes: 'Логин пользователя',
+          value: 'admin',
+        },
+        {
+          attributes: 'Пароль',
+          value: '******',
+        },
+        {
+          attributes: 'SMTP-сервер',
+          value: 'smtp.domian.ru',
+        },
+        {
+          attributes: 'Поддержка SSI',
+          value: true,
+        },
+        {
+          attributes: 'SMTP-порт',
+          value: 465,
+        },
+      ],
     };
   },
+  methods: {
+    setYes() {
+      this.chosenOption = 'Да';
+      this.items2[4].value = true;
+    },
+    setNo() {
+      this.chosenOption = 'Нет';
+      this.items2[4].value = false;
+    },
+  },
 };
 </script>
 <style lang="scss">
@@ -243,8 +396,12 @@ export default {
 .main-container {
   margin-top: 16px;
 }
-.smnp-section {
+
+.bmc-settings-section {
   border-bottom: 1px solid $faint-secondary-primary-10;
+  &.last {
+    margin-bottom: 40px;
+  }
 }
 .smnp-settings-container {
   display: flex;
@@ -305,4 +462,9 @@ export default {
   width: 100%;
   margin: 0 20px 0 0;
 }
+
+.popover-option-ractive {
+  display: block;
+  margin: -6px 6px 0 auto;
+}
 </style>
diff --git a/src/views/Fans/StaticInformation/FansStaticPage.vue b/src/views/Fans/StaticInformation/FansStaticPage.vue
index 45bd1914..85b5191f 100644
--- a/src/views/Fans/StaticInformation/FansStaticPage.vue
+++ b/src/views/Fans/StaticInformation/FansStaticPage.vue
@@ -21,7 +21,7 @@
               src="@/assets/images/fans-page/working.svg"
             />
             <span>
-              {{ $t('fansPage.inWork') }}
+              {{ $t('global.status.inWork') }}
             </span>
           </div>
           <div v-else class="fans-table-col-first__cell">
@@ -30,7 +30,7 @@
               src="@/assets/images/fans-page/notWorking.svg"
             />
             <span>
-              {{ $t('fansPage.notWorking') }}
+              {{ $t('global.status.outWorking') }}
             </span>
           </div>
         </template>
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 244fdcd7..f01cdd52 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -165,6 +165,9 @@ export default {
 };
 </script>
 <style scoped>
+.regular-12px {
+  margin-left: 10px;
+}
 .username-input,
 .password-input {
   height: 56px;
diff --git a/src/views/MemoryModules/Specification/MemoryStaticPage.vue b/src/views/MemoryModules/Specification/MemoryStaticPage.vue
index 09ef7f23..a40bd2ea 100644
--- a/src/views/MemoryModules/Specification/MemoryStaticPage.vue
+++ b/src/views/MemoryModules/Specification/MemoryStaticPage.vue
@@ -18,10 +18,12 @@
         </b-table>
         <span class="bold-16px">{{ $t('global.table.memorySlots') }}</span>
       </page-section>
-      <memory-switch
+      <data-tabs
         :slots="memorySlots"
-        :switch-memory="switchMemorySlot"
-        :current-memory="currentMemorySlot"
+        :switch-tab="switchMemorySlot"
+        :current-tab="currentMemorySlot"
+        :slot-width="120"
+        :slider-width="97"
       />
       <page-section class="bootstrap-table__section">
         <b-table
@@ -93,10 +95,10 @@
 <script>
 import PageTitle from '@/components/Global/PageTitle';
 import PageSection from '@/components/Global/PageSection';
-import MemorySwitch from './MemorySwitch';
+import DataTabs from '@/components/Global/SilaComponents/DataTabs';
 
 export default {
-  components: { PageTitle, PageSection, MemorySwitch },
+  components: { PageTitle, PageSection, DataTabs },
   data() {
     return {
       currentMemorySlot: 1,
diff --git a/src/views/PowerSupplies/Specification/PowerStaticPage.vue b/src/views/PowerSupplies/Specification/PowerStaticPage.vue
index 463e9ea2..8ff1aa1b 100644
--- a/src/views/PowerSupplies/Specification/PowerStaticPage.vue
+++ b/src/views/PowerSupplies/Specification/PowerStaticPage.vue
@@ -8,10 +8,12 @@
       <page-section class="bootstrap-table__section info_section">
         <span class="bold-16px">{{ $t('pageInventory.powerSources') }}</span>
       </page-section>
-      <power-switch
-        :slots="memorySlots"
-        :switch-memory="switchMemorySlot"
-        :current-memory="currentMemorySlot"
+      <data-tabs
+        :slots="sourceSlots"
+        :switch-tab="switchSourceSlot"
+        :current-tab="currentSourceSlot"
+        :slot-width="100"
+        :slider-width="68"
       />
       <page-section class="bootstrap-table__section">
         <b-table
@@ -51,14 +53,14 @@
 <script>
 import PageTitle from '@/components/Global/PageTitle';
 import PageSection from '@/components/Global/PageSection';
-import PowerSwitch from './PowerSwitch';
+import DataTabs from '@/components/Global/SilaComponents/DataTabs';
 
 export default {
-  components: { PageTitle, PageSection, PowerSwitch },
+  components: { PageTitle, PageSection, DataTabs },
   data() {
     return {
-      currentMemorySlot: 1,
-      memorySlots: [
+      currentSourceSlot: 1,
+      sourceSlots: [
         { id: 1, name: 'Источник 1' },
         { id: 2, name: 'Источник 2' },
         { id: 3, name: 'Источник 3' },
@@ -127,8 +129,8 @@ export default {
     };
   },
   methods: {
-    switchMemorySlot(period) {
-      this.currentMemorySlot = period;
+    switchSourceSlot(period) {
+      this.currentSourceSlot = period;
     },
   },
 };
diff --git a/src/views/PowerSupplies/Specification/PowerSwitch.vue b/src/views/PowerSupplies/Specification/PowerSwitch.vue
deleted file mode 100644
index 824c2549..00000000
--- a/src/views/PowerSupplies/Specification/PowerSwitch.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <div
-    ref="content"
-    class="memory-switch"
-    @wheel.prevent="wheelItBetter($event)"
-  >
-    <span
-      v-for="item in slots"
-      :key="item.id"
-      class="medium-12px scale-item"
-      :class="{ 'switch-active': currentMemory === item.id }"
-      @click="switchMemory(item.id)"
-      >{{ $t(item.name) }}</span
-    >
-    <div
-      class="slider"
-      :style="`width: 68px; left: ${
-        ((currentMemory ? currentMemory : 1) - 1) * 100 + 30
-      }px`"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    slots: {
-      type: Array,
-      default: null,
-    },
-    currentMemory: {
-      type: Number,
-      default: 1,
-    },
-    switchMemory: {
-      type: Function,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      upHere: false,
-      container: this.$refs.content,
-    };
-  },
-  methods: {
-    wheelItBetter(event) {
-      if (event.deltaY < 0) {
-        this.$refs.content.scrollLeft -= 25;
-      } else {
-        this.$refs.content.scrollLeft += 25;
-      }
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.memory-switch {
-  position: relative;
-  width: calc(100vw - 320px);
-  height: 50px;
-  padding: 0 16px 0 32px;
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 100px;
-  grid-template-rows: 32px;
-  align-items: end;
-  border-bottom: 1px solid $faint-secondary-primary-10;
-  overflow-x: auto;
-  white-space: nowrap;
-  &::-webkit-scrollbar {
-    height: 2px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: rgba(26, 62, 91, 0.2);
-    border-radius: 16px;
-    background-clip: content-box;
-    height: 10px;
-  }
-}
-
-.switch-active {
-  color: $red-brand-primary;
-  transition: ease-in 0.15s;
-}
-
-.slider {
-  position: absolute;
-  height: 0px;
-  border-bottom: 4px solid $red-brand-primary;
-  transition: ease-in 0.2s;
-  bottom: 0px;
-}
-
-.scale-item {
-  display: inline-block;
-  width: 100px;
-  margin-right: 6px;
-  cursor: pointer;
-}
-
-.date-picker {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-}
-
-.date-clear {
-  margin-left: auto;
-  cursor: pointer;
-}
-</style>
diff --git a/src/views/Processors/Specification/AcceleratorSpecificationTable.vue b/src/views/Processors/Specification/AcceleratorSpecificationTable.vue
index 2baa7d5d..1be41ac2 100644
--- a/src/views/Processors/Specification/AcceleratorSpecificationTable.vue
+++ b/src/views/Processors/Specification/AcceleratorSpecificationTable.vue
@@ -20,7 +20,7 @@
       <div v-if="value" class="fans-table-col-first__cell">
         <img class="status__img" src="@/assets/images/fans-page/working.svg" />
         <span>
-          {{ $t('fansPage.inWork') }}
+          {{ $t('global.status.inWork') }}
         </span>
       </div>
       <div v-else class="fans-table-col-first__cell">
@@ -29,7 +29,7 @@
           src="@/assets/images/fans-page/notWorking.svg"
         />
         <span>
-          {{ $t('fansPage.notWorking') }}
+          {{ $t('global.status.outWorking') }}
         </span>
       </div>
     </template>
@@ -44,7 +44,7 @@ import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
 
-import { Accelerators } from './mock';
+import { Accelerators } from './helpers';
 export default {
   components: { IconChevron },
   mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
diff --git a/src/views/Processors/Specification/ProcessorsSpecificationPage.vue b/src/views/Processors/Specification/ProcessorsSpecificationPage.vue
index 3f9525ae..7baa7e67 100644
--- a/src/views/Processors/Specification/ProcessorsSpecificationPage.vue
+++ b/src/views/Processors/Specification/ProcessorsSpecificationPage.vue
@@ -10,6 +10,63 @@
           $t('pageInventory.installedProcessors')
         }}</span>
         <!-- Processors Specification Table -->
+        <div class="capability-info">
+          <b-row>
+            <b-col class="mt-0 mb-2 p-0 bold-12px__caps">
+              {{ $t('pageInventory.table.processorCapabilityInfo') }}
+            </b-col>
+          </b-row>
+          <b-row>
+            <b-col class="mt-2 p-0" sm="3" xl="3">
+              <dl class="light-12px">
+                <dd class="attrib-names">
+                  {{ $t('global.table.attributes') }}
+                </dd>
+                <dd>{{ 'Многопоточность' }}</dd>
+                <dd>{{ 'Виртуализация' }}</dd>
+                <dd>{{ 'Турбо режим' }}</dd>
+              </dl>
+            </b-col>
+            <b-col class="mt-2 p-0" sm="3" xl="3">
+              <dl class="light-12px">
+                <dd class="attrib-names">{{ 'Состояние присутсвия' }}</dd>
+                <dd
+                  v-for="item in processors[0].presence_status"
+                  :key="item.presence_status"
+                >
+                  {{ item }}
+                </dd>
+              </dl>
+            </b-col>
+            <b-col class="mt-2 p-0" sm="3" xl="3">
+              <dl class="light-12px">
+                <!-- Status state -->
+                <dd class="attrib-names">{{ 'Включен' }}</dd>
+                <dd>
+                  <b-form-checkbox
+                    v-model="processors[0].statuses.multithreading"
+                    switch
+                  >
+                  </b-form-checkbox>
+                </dd>
+                <dd>
+                  <b-form-checkbox
+                    v-model="processors[0].statuses.virtualization"
+                    switch
+                  >
+                  </b-form-checkbox>
+                </dd>
+                <dd>
+                  <b-form-checkbox
+                    v-model="processors[0].statuses.turbo"
+                    switch
+                  >
+                  </b-form-checkbox>
+                </dd>
+              </dl>
+            </b-col>
+          </b-row>
+        </div>
         <processors-specification-table />
         <span class="bold-16px">{{
           $t('pageInventory.installedAccelerator')
@@ -24,6 +81,7 @@
 <script>
 import PageTitle from '@/components/Global/PageTitle';
 import PageSection from '@/components/Global/PageSection';
+import { processors } from './helpers';
 
 import ProcessorsSpecificationTable from './ProcessorsSpecificationTable';
 import AcceleratorSpecificationTable from './AcceleratorSpecificationTable';
@@ -34,6 +92,11 @@ export default {
     ProcessorsSpecificationTable,
     AcceleratorSpecificationTable,
   },
+  data() {
+    return {
+      processors,
+    };
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -41,4 +104,18 @@ export default {
   display: block;
   margin: 25px 0 16px 0;
 }
+
+.capability-info {
+  padding-left: 1rem;
+}
+
+.attrib-names {
+  border-bottom: 1px solid $faint-secondary-primary-10;
+  color: $text-secondary !important;
+  font-weight: 600;
+}
+
+.custom-switch {
+  margin: 0;
+}
 </style>
diff --git a/src/views/Processors/Specification/ProcessorsSpecificationTable.vue b/src/views/Processors/Specification/ProcessorsSpecificationTable.vue
index 6efc2e21..1d026f1b 100644
--- a/src/views/Processors/Specification/ProcessorsSpecificationTable.vue
+++ b/src/views/Processors/Specification/ProcessorsSpecificationTable.vue
@@ -27,7 +27,7 @@
       <div v-if="value" class="fans-table-col-first__cell">
         <img class="status__img" src="@/assets/images/fans-page/working.svg" />
         <span>
-          {{ $t('fansPage.inWork') }}
+          {{ $t('global.status.inWork') }}
         </span>
       </div>
       <div v-else class="fans-table-col-first__cell">
@@ -36,7 +36,7 @@
           src="@/assets/images/fans-page/notWorking.svg"
         />
         <span>
-          {{ $t('fansPage.notWorking') }}
+          {{ $t('global.status.outWorking') }}
         </span>
       </div>
     </template>
@@ -45,59 +45,6 @@
       <b-container fluid>
         <!-- ProcessorCapabilityInfo -->
         <b-row>
-          <b-col class="mt-0 mb-2 p-0 bold-12px__caps">
-            {{ $t('pageInventory.table.processorCapabilityInfo') }}
-          </b-col>
-        </b-row>
-        <b-row>
-          <b-col class="mt-2 p-0" sm="3" xl="3">
-            <dl class="light-12px">
-              <dd class="attrib-names">{{ $t('global.table.attributes') }}</dd>
-              <dd>{{ 'Многопоточность' }}</dd>
-              <dd>{{ 'Виртуализация' }}</dd>
-              <dd>{{ 'Турбо режим' }}</dd>
-            </dl>
-          </b-col>
-          <b-col class="mt-2 p-0" sm="3" xl="3">
-            <dl class="light-12px">
-              <dd class="attrib-names">{{ 'Состояние присутсвия' }}</dd>
-              <dd
-                v-for="item in processors[index].presence_status"
-                :key="item.presence_status"
-              >
-                {{ dataFormatter(item) }}
-              </dd>
-            </dl>
-          </b-col>
-          <b-col class="mt-2 p-0" sm="3" xl="3">
-            <dl class="light-12px">
-              <!-- Status state -->
-              <dd class="attrib-names">{{ 'Включен' }}</dd>
-              <dd>
-                <b-form-checkbox
-                  v-model="processors[index].statuses.multithreading"
-                  switch
-                >
-                </b-form-checkbox>
-              </dd>
-              <dd>
-                <b-form-checkbox
-                  v-model="processors[index].statuses.virtualization"
-                  switch
-                >
-                </b-form-checkbox>
-              </dd>
-              <dd>
-                <b-form-checkbox
-                  v-model="processors[index].statuses.turbo"
-                  switch
-                >
-                </b-form-checkbox>
-              </dd>
-            </dl>
-          </b-col>
-        </b-row>
-        <b-row>
           <b-col class="mt-3 mb-2 p-0 bold-12px__caps">
             {{ $t('pageInventory.table.processorCacheInfo') }}
           </b-col>
@@ -202,7 +149,7 @@ import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
 
-import { Processors } from './mock';
+import { processors } from './helpers';
 export default {
   components: { IconChevron },
   mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
@@ -210,7 +157,7 @@ export default {
     return {
       isBusy: true,
       isAddersСolon: false,
-      processors: Processors,
+      processors,
       fields: [
         {
           key: 'expandRow',
diff --git a/src/views/Processors/Specification/mock.js b/src/views/Processors/Specification/helpers.js
index 42ca1c30..6227e4b8 100644
--- a/src/views/Processors/Specification/mock.js
+++ b/src/views/Processors/Specification/helpers.js
@@ -1,4 +1,4 @@
-export const Processors = [
+export const processors = [
   {
     expandRow: false,
     status: true,
diff --git a/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue b/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue
index b736f026..ed4ee19c 100644
--- a/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue
+++ b/src/views/SILA/AnalyticalPanel/AnalyticalPanelPage.vue
@@ -4,16 +4,18 @@
     <div class="main-container">
       <div class="tables-container">
         <div class="server-table">
-          <span class="semi-bold-16px">Состояние сервера</span>
+          <span class="semi-bold-16px">{{
+            $t('global.status.serverStatus')
+          }}</span>
           <b-table
             show-empty
             responsive="md"
             class="bootstrap-analytical-table"
-            :items="server_items"
+            :items="serverItems"
             :fields="server_fields"
           >
             <template #cell(value)="{ value }">
-              <b-col v-if="value" col="1">
+              <b-col v-if="value">
                 <img
                   src="@/assets/images/icon-ok.svg"
                   class="system-network-table__icon"
@@ -29,37 +31,144 @@
           </b-table>
         </div>
         <div class="events-table">
-          <span class="semi-bold-16px">События</span>
-          <b-table
-            show-empty
-            responsive="md"
-            class="bootstrap-analytical-table"
-            :items="events_items"
-            :fields="events_fields"
-          >
-          </b-table>
+          <span class="semi-bold-16px">{{ $t('global.action.events') }}</span>
+          <div id="events-table-wrapper">
+            <b-table
+              show-empty
+              :sticky-header="stickyHeader"
+              responsive="md"
+              class="bootstrap-analytical-table"
+              :no-border-collapse="true"
+              :items="eventsItems"
+              :fields="events_fields"
+            >
+              <template #cell(date)="{ value }">
+                <img
+                  src="@/assets/images/event-logs/time.svg"
+                  class="sourse__img"
+                />
+                <span class="regular-12px quaternary"> {{ value }} </span>
+              </template>
+              <template #cell(type)="{ value }">
+                <span
+                  v-if="value === 'Критические'"
+                  class="bold-12px__caps errors"
+                  >{{ value }}</span
+                >
+                <span
+                  v-else-if="value === 'Предупреждения'"
+                  class="bold-12px__caps warning"
+                >
+                  {{ value }}
+                </span>
+                <span v-else class="bold-12px__caps information">{{
+                  value
+                }}</span>
+              </template>
+              <template #cell(description)="data">
+                <b-row class="semi-bold-16px tretiatry">
+                  {{ data.item.description.name }}
+                </b-row>
+                <b-row
+                  class="regular-12px tretiatry pointer"
+                  @click="toggleRowDetails(data)"
+                >
+                  {{ data.item.description.description }}</b-row
+                >
+              </template>
+              <template #row-details="{ index }">
+                <b-container fluid>
+                  <b-col class="mt-1 mb-2 regular-12px tretiatry">
+                    <span class="row-details">
+                      {{
+                        `Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.
+                   Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.Краткое описание ошибки или сообщение которое состоит из текста указывающего на предмет ошибки.`
+                      }}
+                      {{ $t(eventsItems[index].description.description) }}
+                    </span>
+                  </b-col>
+                </b-container>
+              </template>
+            </b-table>
+          </div>
         </div>
       </div>
+      <div class="indicators-container">
+        <span class="bold-16px">{{ $t('global.status.indicators') }}</span>
+        <span class="indicators-units regular-12px tretiatry">
+          {{ $t('global.units.unit') }}</span
+        >
+        <b-button id="popover-choice-1" variant="unstiled">
+          <span class="regular-12px units-label">
+            {{
+              $t(`global.units.${unit === 'Ампераж' ? 'amper' : 'volt'}`)
+            }}</span
+          >
+          <img class="units__icon" src="@/assets/images/icon-chevron-red.svg" />
+        </b-button>
+      </div>
+      <two-chioce-popover
+        :id="1"
+        fitst-option="Ампераж"
+        second-option="Вольтаж"
+        :chosen-option="unit"
+        :first-action="selectAmper"
+        :second-action="selectVolt"
+      />
+      <!-- <unit-popover
+        :select-amper="selectAmper"
+        :select-volt="selectVolt"
+        :unit="unit"
+      /> -->
+      <date-switch
+        :switch-time-scale="switchTimeScale"
+        :time-scale="timeScale"
+      />
+      <accessory-table :records="accessoryData.power" />
+      <power-table :time-scale="timeScale" />
+      <div class="tables-container">
+        <span class="semi-bold-16px">Управление</span>
+      </div>
+      <control-system />
     </div>
   </b-container>
 </template>
 
 <script>
 import PageTitle from '@/components/Global/PageTitle';
+import TableRowExpandMixin from '@/components/Mixins/TableRowExpandMixin';
+import DateSwitch from '@/components/Global/SilaComponents/DateSwitch';
+import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTableWithLabel';
+import ControlSystem from '@/components/Global/SilaComponents/InventoryControlSystem';
+import TwoChiocePopover from '@/components/Global/SilaComponents/TwoChiocePopover';
 
+import PowerTable from './PowerTable';
+import { AccessoryData, ServerItems, EventsItems } from './helpers';
 export default {
   components: {
     PageTitle,
+    DateSwitch,
+    AccessoryTable,
+    PowerTable,
+    ControlSystem,
+    TwoChiocePopover,
   },
-
+  mixins: [TableRowExpandMixin],
   data() {
     return {
+      unit: 'Ампераж',
+      isActive: false,
+      timeScale: 'hour',
+      stickyHeader: '511px',
+      accessoryData: AccessoryData,
+      serverItems: ServerItems,
+      eventsItems: EventsItems,
       server_fields: [
         {
           key: 'param',
           label: 'Раздел',
           formatter: this.dataFormatter,
-          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-th',
           class: 'bootstrap-analytical-table__column-first',
           tdClass: 'regular-12px bootstrap-analytical-table__td',
         },
@@ -67,33 +176,18 @@ export default {
           key: 'value',
           label: 'Статус',
           formatter: this.dataFormatter,
-          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-th',
           class:
             'bootstrap-rounded-table__column-last analytical-table__status',
           tdClass: 'regular-12px bootstrap-analytical-table__td',
         },
       ],
-      server_items: [
-        { param: 'Сервер №1', value: true },
-        { param: 'ВМС', value: true },
-        { param: 'Аналитическая панель', value: true },
-        { param: 'RAID-контроллеры', value: false },
-        { param: 'Модули памяти', value: true },
-        { param: 'Процессоры', value: true },
-        { param: 'Источники питания', value: true },
-        { param: 'Вентиляторы', value: true },
-        { param: 'Физические накопители', value: true },
-        { param: 'Виртуальные накопители', value: true },
-        { param: 'Материнская плата', value: true },
-        { param: 'Сетевые адаптеры', value: true },
-        { param: 'PCI устройства', value: true },
-      ],
       events_fields: [
         {
-          key: 'time',
+          key: 'date',
           label: 'Время',
           formatter: this.dataFormatter,
-          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-th',
           class: 'bootstrap-analytical-table__column-first',
           tdClass: 'regular-12px bootstrap-analytical-table__td',
         },
@@ -101,53 +195,59 @@ export default {
           key: 'type',
           label: 'Тип события',
           formatter: this.dataFormatter,
-          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-th',
+          class: 'bootstrap-analytical-table__column-center',
           tdClass: 'regular-12px bootstrap-analytical-table__td',
         },
         {
-          key: 'info',
+          key: 'description',
           label: 'О событии',
           formatter: this.dataFormatter,
-          thClass: 'semi-bold-12px__caps bootstrap-analytical-table__head_bg',
-          class: 'bootstrap-rounded-table__column-last',
+          thClass: 'semi-bold-12px__caps bootstrap-analytical-th',
+          class: 'bootstrap-analytical-table__column-last',
           tdClass: 'regular-12px bootstrap-analytical-table__td',
         },
       ],
-      events_items: [
-        { time: 'Сервер №1', type: 'Критические', info: 'true' },
-        { time: 'ВМС', type: 'Критические', info: 'true' },
-        {
-          time: 'Аналитическая панель',
-          type: 'Критические',
-          info: 'true',
-        },
-        {
-          time: 'RAID-контроллеры',
-          type: 'Критические',
-          info: 'false',
-        },
-        {
-          time: 'Модули памяти',
-          type: 'Критические',
-          info: 'true',
-        },
-        { time: 'Процессоры', type: 'Критические', info: 'true' },
-        {
-          time: 'Источники питания',
-          type: 'Критические',
-          info: 'true',
-        },
-        { time: 'Вентиляторы', type: 'Критические', info: 'true' },
-        { time: 'Физические накопители', type: 'Критические', info: 'true' },
-      ],
     };
   },
+  methods: {
+    switchTimeScale(period) {
+      this.timeScale = period;
+    },
+    selectAmper() {
+      this.unit = 'Ампераж';
+    },
+    selectVolt() {
+      this.unit = 'Вольтаж';
+    },
+  },
 };
 </script>
 <style lang="scss">
 .analytical-table__status {
   width: 10%;
 }
+
+#popover-unit-ractive {
+  padding-left: 5px;
+}
+
+#popover-unit-ampere {
+  width: 89px;
+  height: 28px;
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 12px;
+}
+
+#popover-unit-volt {
+  width: 89px;
+  height: 28px;
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 12px;
+  // color: $red-brand-primary;
+}
 </style>
 <style lang="scss" scoped>
 .tables-container {
@@ -164,4 +264,59 @@ export default {
 .events-table {
   width: 65%;
 }
+
+#events-table-wrapper div {
+  overflow-y: overlay;
+  overflow-x: hidden;
+  &::-webkit-scrollbar {
+    position: absolute;
+    width: 10px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border: 4px solid transparent;
+    border-top: 43px solid transparent;
+    background: $faint-secondary-primary-20;
+    border-radius: 16px;
+    background-clip: content-box;
+  }
+}
+
+.row-details {
+  display: block;
+  height: auto;
+  width: 30vw;
+}
+
+.errors {
+  color: $indicators-errors !important;
+}
+
+.warning {
+  color: $indicators-warning !important;
+}
+
+.information {
+  color: $indicators-complementary !important;
+}
+
+.indicators-container {
+  margin-left: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.indicators-units {
+  margin-left: auto;
+}
+
+.units__icon {
+  margin: 0 32px 0 5px;
+  cursor: pointer;
+}
+
+.units-label {
+  cursor: pointer;
+  color: $red-brand-primary;
+}
 </style>
diff --git a/src/views/SILA/AnalyticalPanel/PowerTable.vue b/src/views/SILA/AnalyticalPanel/PowerTable.vue
new file mode 100644
index 00000000..27bb4efa
--- /dev/null
+++ b/src/views/SILA/AnalyticalPanel/PowerTable.vue
@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <highcharts :options="chartOptions.line" />
+  </div>
+</template>
+
+<script>
+import { setTime, Series, setCategories } from './helpers';
+import { Chart } from 'highcharts-vue';
+
+export default {
+  components: {
+    highcharts: Chart,
+  },
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+  },
+  computed: {
+    chartOptions() {
+      return {
+        line: {
+          chart: {
+            type: 'areaspline',
+            margin: [12, 50, 32, 60],
+            height: '320px',
+          },
+          title: null,
+          xAxis: {
+            categories: setTime(6, this.timeScale),
+            title: null,
+            labels: {
+              step: 1,
+            },
+            minorGridLineColor: '#1A3E5B1A',
+          },
+          yAxis: {
+            categories: setCategories(2.5, 'A'),
+            min: 0,
+            max: 4,
+            title: null,
+            tickInterval: 1,
+            minorGridLineColor: '#1A3E5B1A',
+          },
+          series: Series['power'].map((item) => ({
+            ...item,
+            marker: {
+              enabled: false,
+            },
+          })),
+          legend: {
+            enabled: false,
+          },
+          tooltip: {
+            enabled: false,
+            crosshairs: false,
+          },
+          plotOptions: {
+            series: {
+              showInLegend: true,
+            },
+            areaspline: {
+              fillOpacity: 0,
+            },
+          },
+        },
+      };
+    },
+  },
+};
+</script>
+<style lang="scss">
+.highcharts-credits {
+  display: none;
+}
+
+.highcharts-plot-line-label {
+  transform: translate(-15px, 0) !important;
+}
+</style>
diff --git a/src/views/SILA/AnalyticalPanel/TemperatureTable.vue b/src/views/SILA/AnalyticalPanel/TemperatureTable.vue
new file mode 100644
index 00000000..ae52062a
--- /dev/null
+++ b/src/views/SILA/AnalyticalPanel/TemperatureTable.vue
@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <highcharts :options="chartOptions.line" />
+  </div>
+</template>
+
+<script>
+import { setTime, Series, setCategories } from './helpers';
+import { Chart } from 'highcharts-vue';
+
+export default {
+  components: {
+    highcharts: Chart,
+  },
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+    warning: {
+      type: Number,
+      default: 70,
+    },
+    nonNormal: {
+      type: Number,
+      default: 70,
+    },
+    criticalStart: {
+      type: Number,
+      default: 70,
+    },
+  },
+  computed: {
+    chartOptions() {
+      return {
+        line: {
+          chart: {
+            type: 'areaspline',
+            margin: [12, 50, 32, 60],
+            height: '320px',
+          },
+          title: null,
+          xAxis: {
+            categories: setTime(60, 'hour'),
+            title: null,
+            labels: {
+              step: 6,
+            },
+            minorGridLineColor: '#1A3E5B1A',
+          },
+          yAxis: {
+            categories: setCategories(101, 'С°'),
+            min: 0,
+            max: 100,
+            title: null,
+            minTickInterval: 25,
+            minorGridLineColor: '#1A3E5B1A',
+            plotLines: [
+              {
+                color: '#E11717',
+                dashStyle: 'solid',
+                value: this.warning,
+                zIndex: '1000',
+                width: 2,
+                label: {
+                  text: 'Пороговое значение предупреждения, С°',
+                  align: 'right',
+                  style: {
+                    fontFamily: 'Inter, sans-serif',
+                    fontSize: '12px',
+                    fontStyle: 'normal',
+                    fontWeight: '400',
+                    lineHeight: '16px',
+                    color: '#0C1C2999',
+                  },
+                },
+              },
+            ],
+          },
+          series: Series['temperature'].map((item) => ({
+            ...item,
+            marker: {
+              enabled: false,
+            },
+          })),
+          legend: {
+            enabled: false,
+          },
+          tooltip: {
+            enabled: false,
+            crosshairs: false,
+          },
+          plotOptions: {
+            series: {
+              showInLegend: true,
+            },
+            areaspline: {
+              fillOpacity: 0,
+            },
+          },
+        },
+      };
+    },
+  },
+};
+</script>
+<style lang="scss">
+.highcharts-credits {
+  display: none;
+}
+
+.highcharts-plot-line-label {
+  transform: translate(-15px, 0) !important;
+}
+</style>
diff --git a/src/views/SILA/AnalyticalPanel/helpers.js b/src/views/SILA/AnalyticalPanel/helpers.js
new file mode 100644
index 00000000..8655afc3
--- /dev/null
+++ b/src/views/SILA/AnalyticalPanel/helpers.js
@@ -0,0 +1,200 @@
+export const colors = [
+  '#CB32F1',
+  '#F18638',
+  '#139BB9',
+  '#E1AB17',
+  '#175AE1',
+  '#13B937',
+];
+
+export const Series = {
+  power: [
+    {
+      name: 'Sean',
+      data: [1, 1, 2.7, 0.5, 0.2, 1],
+      color: '#CB32F1',
+    },
+    {
+      name: 'Ivan',
+      data: [0.4, 0.3, 1, 1.4, 2, 0.4],
+      color: '#F18638',
+    },
+    {
+      name: 'Brendan',
+      data: [0.5, 2.5, 1, 0.4, 1, 3],
+      color: '#139BB9',
+    },
+  ],
+};
+
+export const setTime = (count) => {
+  const arr = [...new Array(count)].map(() => '');
+  for (let i = 0; i < arr.length; i++) {
+    arr[i] = `15:${i}0`;
+  }
+  return arr;
+};
+
+export const setCategories = (count, desc) => {
+  const arr = [];
+  for (let i = 0; i < count; i += 0.5) {
+    arr.push(`${i} ${desc}`);
+  }
+  return arr;
+};
+
+export const AccessoryData = {
+  power: {
+    fields: [
+      {
+        key: 'name',
+        label: 'Наименование',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'power',
+        label: 'Текущее значение тока, А',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+    ],
+    items: [
+      {
+        name: 'Источникк питания 1',
+        power: '1,3 A',
+      },
+      {
+        name: 'Источникк питания 2',
+        power: '1,8 A',
+      },
+      {
+        name: 'Источникк питания 3',
+        power: '1,6 A',
+      },
+    ],
+  },
+};
+
+export const ServerItems = [
+  { param: 'Сервер №1', value: true },
+  { param: 'ВМС', value: true },
+  { param: 'Аналитическая панель', value: true },
+  { param: 'RAID-контроллеры', value: false },
+  { param: 'Модули памяти', value: true },
+  { param: 'Процессоры', value: true },
+  { param: 'Источники питания', value: true },
+  { param: 'Вентиляторы', value: true },
+  { param: 'Физические накопители', value: true },
+  { param: 'Виртуальные накопители', value: true },
+  { param: 'Материнская плата', value: true },
+  { param: 'Сетевые адаптеры', value: true },
+  { param: 'PCI устройства', value: true },
+];
+
+export const EventsItems = [
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+  {
+    date: '23.11.2021 в 13.36',
+    type: 'Критические',
+    description: {
+      name: 'Имя источника событий',
+      description: 'Краткое описание ошибки или сообщени....',
+    },
+  },
+];
diff --git a/src/views/SILA/EventLogs/EventLogs.vue b/src/views/SILA/EventLogs/EventLogs.vue
index 0d5ce428..36ec9802 100644
--- a/src/views/SILA/EventLogs/EventLogs.vue
+++ b/src/views/SILA/EventLogs/EventLogs.vue
@@ -5,22 +5,29 @@
     class="event-logs-section"
   >
     <page-title />
-    <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"
+    <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
       >
-      </b-form-input>
+      <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">
@@ -890,7 +897,7 @@ $toolbar-height: 64px;
   margin: 0 32px;
 }
 
-.event-log-search {
+.event-log-head-container {
   position: absolute;
   top: calc(#{$header-height});
   right: 0px;
@@ -898,13 +905,21 @@ $toolbar-height: 64px;
   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;
+  margin: 12px 32px 12px 16px;
   width: 236px;
   height: 40px;
-  z-index: 1001;
 }
 
 .search-button {
@@ -1014,10 +1029,6 @@ $toolbar-height: 64px;
   color: $text-quaternary;
 }
 
-.pointer {
-  cursor: pointer;
-}
-
 .pagination-container {
   width: calc(100% - #{$navigation-width});
   height: $toolbar-height;
@@ -1075,8 +1086,4 @@ $toolbar-height: 64px;
   height: auto;
   width: 70vw;
 }
-
-.pointer {
-  cursor: pointer;
-}
 </style>
diff --git a/src/views/SILA/NetworkAdapters/Dynamic/NetworkDynamicPage.vue b/src/views/SILA/NetworkAdapters/Dynamic/NetworkDynamicPage.vue
new file mode 100644
index 00000000..95267ece
--- /dev/null
+++ b/src/views/SILA/NetworkAdapters/Dynamic/NetworkDynamicPage.vue
@@ -0,0 +1,140 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="main-container">
+      <date-switch
+        :switch-time-scale="switchTimeScale"
+        :time-scale="timeScale"
+      />
+      <div class="limit-container">
+        <div class="trmperature-limt">
+          <img src="@/assets/images/labels/warning.svg" />
+          <span class="semi-bold-12px">{{
+            $t('tablesDescription.temperatureWarning')
+          }}</span>
+          <b-form-input
+            v-model="temperatureWarningInput"
+            type="number"
+            :min="0"
+            :max="100"
+            class="form-control medium-12px"
+          >
+          </b-form-input>
+        </div>
+        <b-button
+          class="save-button"
+          variant="primary"
+          @click="updateTemperature"
+        >
+          {{ $t('global.action.save') }}
+        </b-button>
+      </div>
+      <!-- Temperature Table -->
+      <temperature-table
+        :time-scale="timeScale"
+        :warning="temperatureWarning"
+        :non-normal="temperatureNonNormal"
+        :critical-start="temperatureCriticalStart"
+      />
+      <accessory-table :records="accessoryData.temperatureTable" />
+    </div>
+  </b-container>
+</template>
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import DateSwitch from '@/components/Global/SilaComponents/DateSwitch';
+import TemperatureTable from './TemperatureTable';
+import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTableWithLabel';
+import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
+
+import { AccessoryData } from './helpers';
+
+export default {
+  components: {
+    PageTitle,
+    DateSwitch,
+    TemperatureTable,
+    AccessoryTable,
+  },
+  data() {
+    return {
+      timeScale: 'hour',
+      temperatureWarning: 72,
+      temperatureWarningInput: 72,
+      notificationInput: 42,
+      accessoryData: AccessoryData,
+      iconChevronUp: iconChevronUp,
+    };
+  },
+  methods: {
+    switchTimeScale(period) {
+      this.timeScale = period;
+    },
+    updateTemperature() {
+      this.temperatureWarning = +this.temperatureWarningInput;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+//nav items style
+.nav-item,
+.nav-link {
+  padding: 0;
+}
+.nav-item {
+  list-style-type: none;
+}
+
+a {
+  color: $text-primary !important;
+  &:hover {
+    color: $text-primary !important;
+  }
+}
+
+.notification-button {
+  border: none;
+  background: none;
+}
+
+.semi-bold-12px {
+  z-index: 1001;
+}
+
+// temperature limit comtainer
+.limit-container {
+  height: 85px;
+  width: 100%;
+  padding: 0 32px 10px 32px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-end;
+  gap: 24px;
+}
+
+.trmperature-limt {
+  height: 60px;
+  width: 100%;
+  max-width: 270px;
+  display: flex;
+  align-items: baseline;
+  flex-flow: row wrap;
+  gap: 8px;
+}
+
+.form-control {
+  height: 36px;
+  &.non-normal {
+    width: 125px;
+  }
+}
+.save-button {
+  width: 151px;
+  height: 36px;
+}
+</style>
diff --git a/src/views/SILA/NetworkAdapters/Dynamic/TemperatureTable.vue b/src/views/SILA/NetworkAdapters/Dynamic/TemperatureTable.vue
new file mode 100644
index 00000000..1bbf7e08
--- /dev/null
+++ b/src/views/SILA/NetworkAdapters/Dynamic/TemperatureTable.vue
@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <highcharts :options="chartOptions.line" />
+  </div>
+</template>
+
+<script>
+import { setTime, Series, setCategories } from './helpers';
+import { Chart } from 'highcharts-vue';
+
+export default {
+  components: {
+    highcharts: Chart,
+  },
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+    warning: {
+      type: Number,
+      default: 70,
+    },
+    nonNormal: {
+      type: Number,
+      default: 70,
+    },
+    criticalStart: {
+      type: Number,
+      default: 70,
+    },
+  },
+  computed: {
+    chartOptions() {
+      return {
+        line: {
+          chart: {
+            type: 'line',
+            margin: [12, 50, 32, 60],
+            height: '320px',
+          },
+          title: null,
+          xAxis: {
+            categories: setTime(60, 'hour'),
+            title: null,
+            labels: {
+              step: 6,
+            },
+            minorGridLineColor: '#1A3E5B1A',
+          },
+          yAxis: {
+            categories: setCategories(101, 'С°'),
+            min: 0,
+            max: 100,
+            title: null,
+            minTickInterval: 25,
+            minorGridLineColor: '#1A3E5B1A',
+            plotLines: [
+              {
+                color: '#E11717',
+                dashStyle: 'solid',
+                value: this.warning,
+                zIndex: '1000',
+                width: 2,
+                label: {
+                  text: 'Пороговое значение предупреждения, С°',
+                  align: 'right',
+                  style: {
+                    fontFamily: 'Inter, sans-serif',
+                    fontSize: '12px',
+                    fontStyle: 'normal',
+                    fontWeight: '400',
+                    lineHeight: '16px',
+                    color: '#0C1C2999',
+                  },
+                },
+              },
+            ],
+          },
+          series: Series['temperature'].map((item) => ({
+            ...item,
+            marker: {
+              enabled: false,
+            },
+          })),
+          legend: {
+            enabled: false,
+          },
+          tooltip: {
+            enabled: false,
+            crosshairs: false,
+          },
+          plotOptions: {
+            series: {
+              showInLegend: true,
+            },
+          },
+        },
+      };
+    },
+  },
+};
+</script>
+<style lang="scss">
+.highcharts-credits {
+  display: none;
+}
+
+.highcharts-plot-line-label {
+  transform: translate(-15px, 0) !important;
+}
+</style>
diff --git a/src/views/SILA/NetworkAdapters/Dynamic/helpers.js b/src/views/SILA/NetworkAdapters/Dynamic/helpers.js
new file mode 100644
index 00000000..2be5ce24
--- /dev/null
+++ b/src/views/SILA/NetworkAdapters/Dynamic/helpers.js
@@ -0,0 +1,370 @@
+export const colors = ['#CB32F1', '#F18638', '#139BB9', '#E1AB17'];
+
+export const Series = {
+  temperature: [
+    {
+      name: 'Sean',
+      data: [
+        7,
+        7,
+        7,
+        17,
+        7,
+        27,
+        7,
+        7,
+        47,
+        7,
+        7,
+        7,
+        37,
+        7,
+        7,
+        7,
+        27,
+        7,
+        7,
+        7,
+        27,
+        7,
+        7,
+        7,
+        47,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        27,
+        7,
+        7,
+        7,
+        7,
+        7,
+        27,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        37,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+        7,
+      ],
+      color: '#CB32F1',
+    },
+    {
+      name: 'Ivan',
+      data: [
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        20,
+        10,
+        10,
+        30,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        50,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        20,
+        10,
+        10,
+        10,
+        10,
+        10,
+        30,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        19,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+        10,
+      ],
+      color: '#F18638',
+    },
+    {
+      name: 'Brendan',
+      data: [
+        13,
+        13,
+        13,
+        13,
+        23,
+        13,
+        33,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        23,
+        13,
+        43,
+        13,
+        53,
+        13,
+        13,
+        13,
+        53,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        53,
+        13,
+        43,
+        13,
+        13,
+        63,
+        13,
+        43,
+        13,
+        23,
+        13,
+        43,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+      ],
+      color: '#139BB9',
+    },
+    {
+      name: 'Matteo',
+      data: [
+        24,
+        14,
+        44,
+        14,
+        14,
+        14,
+        14,
+        14,
+        34,
+        14,
+        14,
+        14,
+        14,
+        34,
+        14,
+        24,
+        14,
+        34,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        44,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        44,
+        14,
+        54,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        84,
+        14,
+        94,
+        14,
+        14,
+        14,
+        54,
+        14,
+        44,
+        14,
+        44,
+        14,
+        14,
+        44,
+        14,
+      ],
+      color: '#E1AB17',
+    },
+  ],
+};
+
+export const setTime = (count) => {
+  const arr = [...new Array(count)].map(() => '');
+  for (let i = 0; i < arr.length; i++) {
+    arr[i] = `15:${String(i).padStart(2, '0')}`;
+  }
+  return arr;
+};
+
+export const setCategories = (count, desc) => {
+  const arr = [...new Array(count)].map((i, k) => `${k} ${desc}`);
+  return arr;
+};
+
+export const AccessoryData = {
+  temperatureTable: {
+    fields: [
+      {
+        key: 'name',
+        label: 'Имя модуля',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'currentTemperature',
+        label: 'Текущее, С°',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'middleTemperature',
+        label: 'Среднее, С°',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'minTemperature',
+        label: 'Минимальное, С°',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'minDate',
+        label: 'Дата минимального',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'maxTemperature',
+        label: 'Максимальное, С°',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'maxDate',
+        label: 'Дата максимального',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+    ],
+    items: [
+      {
+        name: 'Приемопередитчик 1',
+        currentTemperature: 19,
+        middleTemperature: 40,
+        minTemperature: 31,
+        minDate: { time: '15:15', date: '11.11.2021' },
+        maxTemperature: 88,
+        maxDate: { time: '10:26', date: '15.11.2021' },
+      },
+      {
+        name: 'Приемопередитчик 2',
+        currentTemperature: 29,
+        middleTemperature: 40,
+        minTemperature: 20,
+        minDate: { time: '15:45', date: '11.11.2021' },
+        maxTemperature: 76,
+        maxDate: { time: '16:59', date: '16.11.2021' },
+      },
+      {
+        name: 'Приемопередитчик 3',
+        currentTemperature: 48,
+        middleTemperature: 46,
+        minTemperature: 31,
+        minDate: { time: '15:23', date: '11.11.2021' },
+        maxTemperature: 69,
+        maxDate: { time: '15:26', date: '15.11.2021' },
+      },
+      {
+        name: 'Приемопередитчик 4',
+        currentTemperature: 48,
+        middleTemperature: 45,
+        minTemperature: 5,
+        minDate: { time: '16:45', date: '25.11.2021' },
+        maxTemperature: 75,
+        maxDate: { time: '11:26', date: '16.11.2021' },
+      },
+    ],
+  },
+};
diff --git a/src/views/SILA/NetworkAdapters/Dynamic/index.js b/src/views/SILA/NetworkAdapters/Dynamic/index.js
new file mode 100644
index 00000000..081b5560
--- /dev/null
+++ b/src/views/SILA/NetworkAdapters/Dynamic/index.js
@@ -0,0 +1 @@
+export { default } from './NetworkDynamicPage.vue';
diff --git a/src/views/SILA/NetworkAdapters/EthernetAdapters/EthernetAdaptersPage.vue b/src/views/SILA/NetworkAdapters/EthernetAdapters/EthernetAdaptersPage.vue
new file mode 100644
index 00000000..74e7ee2c
--- /dev/null
+++ b/src/views/SILA/NetworkAdapters/EthernetAdapters/EthernetAdaptersPage.vue
@@ -0,0 +1,434 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="main-container">
+      <data-tabs
+        :slots="adaptersSlots"
+        :switch-tab="switchAdapterSlot"
+        :current-tab="currentAdapterSlot"
+        :slot-width="85"
+        :slider-width="60"
+        style="margin-top: 16px"
+      />
+      <page-section class="bootstrap-table__section">
+        <div class="settings-container">
+          <span class="bold-16px">{{ $t('appNavigation.settings') }}</span>
+          <apply-settings-popover
+            :appaly-on-reload="appalyOnReload"
+            :appaly-option1="appalyOption1"
+            :appaly-option2="appalyOption2"
+            :apply-type="applyType"
+          />
+          <b-button variant="primary" class="apply-button">
+            {{ $t('global.action.acceptChanges') }}
+          </b-button>
+        </div>
+        <span class="bold-12px__caps">
+          {{ $t('pageNetwork.macAddress') }}
+        </span>
+        <b-table
+          responsive="md"
+          class="bootstrap-table bootstrap-table__stripes_odd"
+          :items="items"
+          :fields="fields"
+        >
+          <template #cell(value)="data">
+            <b-row>
+              <b-col>
+                <span>
+                  {{ data.value }}
+                </span>
+              </b-col>
+              <b-col>
+                <img
+                  src="@/assets/images/icon-edit.svg"
+                  class="icon-chevron icon-edit"
+                />
+              </b-col>
+            </b-row>
+          </template>
+        </b-table>
+        <span class="bold-12px__caps">
+          {{ $t('adapters.settings') }}
+        </span>
+        <b-table
+          responsive="md"
+          class="bootstrap-table bootstrap-table__stripes_odd"
+          :items="items_2"
+          :fields="fields"
+        >
+          <template #cell(value)="data">
+            <b-row v-if="data.index === 3" class="multiple-select-container">
+              <b-col v-if="selected.length" class="chip-column">
+                <b-row class="chip-container">
+                  <div
+                    v-for="item in selected"
+                    :key="item.value"
+                    class="custom-chip"
+                  >
+                    <span> {{ item.text }} </span>
+                    <img
+                      class="clear-icon"
+                      src="@/assets/images/popups/x-icon.svg"
+                      @click="optionRemove(item.value)"
+                    />
+                  </div>
+                </b-row>
+              </b-col>
+              <b-col v-else>
+                {{ 'Не выбрано ' }}
+              </b-col>
+              <b-col class="icon-container">
+                <b-button id="popover-boot" variant="toogle-popover">
+                  <img :is="iconChevron" class="icon-chevron" />
+                </b-button>
+                <b-popover
+                  placement="left"
+                  triggers="focus"
+                  :show.sync="show"
+                  custom-class="boot-popover"
+                  target="popover-boot"
+                >
+                  <b-form-group
+                    v-slot="{ ariaDescribedby }"
+                    class="checkbox-group"
+                  >
+                    <b-form-checkbox-group
+                      v-model="selected"
+                      :options="options"
+                      :aria-describedby="ariaDescribedby"
+                      class="regular-14px checkbox-container"
+                      stacked
+                    ></b-form-checkbox-group>
+                  </b-form-group>
+                </b-popover>
+              </b-col>
+            </b-row>
+            <b-row v-else>
+              <b-col>
+                <span>
+                  {{ data.value ? 'Возможно' : 'Не возможно' }}
+                </span>
+              </b-col>
+              <b-col>
+                <img :is="iconChevron" class="icon-chevron icon-options" />
+              </b-col>
+            </b-row>
+          </template>
+        </b-table>
+        <span class="bold-12px__caps">
+          {{ $t('adapters.propherties') }}
+        </span>
+        <b-table
+          responsive="md"
+          class="bootstrap-table bootstrap-table__stripes"
+          :items="items_3"
+          :fields="fields"
+        >
+        </b-table>
+        <div class="settings-container">
+          <span class="bold-16px">{{ $t('adapters.PXE') }}</span>
+          <apply-settings-popover
+            :id="2"
+            :appaly-on-reload="appalyOnReload"
+            :appaly-option1="appalyOption1"
+            :appaly-option2="appalyOption2"
+            :apply-type="applyType"
+          />
+        </div>
+        <b-table
+          responsive="md"
+          class="bootstrap-table bootstrap-table__stripes_odd"
+          :items="items_4"
+          :fields="fields"
+        >
+          <template #cell(value)="data">
+            <b-row class="flex-row">
+              <b-col>
+                <span>
+                  {{ data.value ? 'Включено' : 'Выключено' }}
+                </span>
+              </b-col>
+              <b-col>
+                <b-form-checkbox v-model="items_4[data.index].value" switch>
+                </b-form-checkbox>
+              </b-col>
+            </b-row>
+          </template>
+        </b-table>
+        <div class="settings-container">
+          <span class="bold-16px">{{ $t('adapters.links') }}</span>
+        </div>
+        <b-table
+          responsive="md"
+          class="bootstrap-table bootstrap-table__stripes"
+          :items="items_5"
+          :fields="fields"
+        >
+        </b-table>
+        <div class="settings-container">
+          <span class="bold-16px">{{ $t('adapters.transceivers') }}</span>
+        </div>
+        <b-table
+          responsive="md"
+          show-empty
+          class="bootstrap-rounded-table"
+          :items="items_6"
+          :fields="fields_2"
+          :empty-text="$t('global.table.emptyMessage')"
+        >
+        </b-table>
+        <div class="microcode-container">
+          <span class="bold-16px">{{
+            $t('SystemDescription.microcodeAdapter')
+          }}</span>
+          <popover
+            id="popover-reactive-1"
+            description="adapters.microcodeUpdate"
+            popup="adapters.microcodeUpdate_popup"
+            button="global.action.refresh"
+            :is-microcode-drivers="true"
+          />
+        </div>
+      </page-section>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import Popover from '@/components/Global/Popover';
+import ApplySettingsPopover from '@/components/Global/SilaComponents/ApplySettingsPopover';
+import DataTabs from '@/components/Global/SilaComponents/DataTabs';
+
+import iconChevron from '@carbon/icons-vue/es/chevron--down/16';
+import { items, items_2, items_3, items_4, items_5, items_6 } from './helpers';
+
+export default {
+  components: {
+    PageTitle,
+    PageSection,
+    DataTabs,
+    Popover,
+    ApplySettingsPopover,
+  },
+  data() {
+    return {
+      items,
+      items_2,
+      items_3,
+      items_4,
+      items_5,
+      items_6,
+      iconChevron,
+      selected: [],
+      show: false,
+      options: [
+        { text: 'PXE', value: { text: 'PXE', value: 'pxe' } },
+        { text: 'ISCSI-PXE', value: { text: 'ISCSI-PXE', value: 'iscsi-pxe' } },
+        { text: 'ISCSI', value: { text: 'ISCSI', value: 'iscsi' } },
+        { text: 'PXE2', value: { text: 'PXE2', value: 'pxe2' } },
+        { text: 'ISCSI 2', value: { text: 'ISCSI 2', value: 'iscsi2' } },
+        {
+          text: 'ISCSI-PXE 2',
+          value: { text: 'ISCSI-PXE 2', value: 'iscsi-pxe2' },
+        },
+      ],
+      applyType: 'reload',
+      currentAdapterSlot: 1,
+      adaptersSlots: [
+        { id: 1, name: 'Адаптер 1' },
+        { id: 2, name: 'Адаптер 2' },
+        { id: 3, name: 'Адаптер 3' },
+      ],
+      fields: [
+        {
+          key: 'param',
+          label: '',
+          formatter: this.dataFormatter,
+          thClass: 'bootstrap-table__head_bg',
+          class: 'bootstrap-table__column-first',
+          tdClass: 'regular-12px bootstrap-table__td',
+        },
+        {
+          key: 'value',
+          label: '',
+          formatter: this.dataFormatter,
+          thClass: 'bootstrap-table__head_bg',
+          class: `bootstrap-table__column-last
+            bootstrap-table__server-param`,
+          tdClass: 'regular-12px bootstrap-table__td',
+        },
+      ],
+      fields_2: [
+        {
+          key: 'name',
+          label: 'Параметр',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'model',
+          label: 'Модель',
+          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: 'number',
+          label: 'Серийный номер',
+          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: 'type',
+          label: 'Тип устройства',
+          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: 'firmware',
+          label: 'Прошивка',
+          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: 'status',
+          label: 'Статус',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
+    };
+  },
+  methods: {
+    switchAdapterSlot(period) {
+      this.currentAdapterSlot = period;
+    },
+    appalyOnReload() {
+      this.applyType = 'reload';
+    },
+    appalyOption1() {
+      this.applyType = 'option1';
+    },
+    appalyOption2() {
+      this.applyType = 'option2';
+    },
+    optionRemove(value) {
+      this.selected.splice(
+        this.selected.findIndex((el) => el.value === value),
+        1
+      );
+      console.log(value);
+    },
+  },
+};
+</script>
+<style lang="scss">
+.bootstrap-table__section {
+  width: auto;
+}
+
+.bootstrap-table__server-param {
+  width: 30%;
+}
+</style>
+
+<style lang="scss" scoped>
+.bootstrap-table__section {
+  margin-bottom: 24px;
+}
+
+.bold-16px {
+  display: block;
+  margin: 25px 0 16px 0;
+}
+
+.settings-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.apply-button {
+  width: 245px;
+  height: 36px;
+}
+
+.microcode-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.bold-12px__caps {
+  display: block;
+  margin: 20px 0 8px 0;
+}
+
+.flex-row {
+  align-items: center;
+}
+
+.multiple-select-container {
+  justify-content: flex-end;
+}
+
+.chip-column {
+  padding-right: 0px;
+}
+
+.chip-container {
+  margin-left: -5px;
+}
+
+.custom-chip {
+  display: flex;
+  align-items: center;
+  height: 24px;
+  margin: 2px 3px;
+  padding: 0 10px;
+  background-color: $faint-secondary-primary-10;
+  border-radius: 94px;
+}
+
+.icon-container {
+  flex-grow: 0;
+  padding: 0px;
+  margin: 0 11px 0 5px;
+}
+
+.clear-icon {
+  width: 10px;
+  margin-left: 6px;
+  cursor: pointer;
+}
+
+.checkbox-group {
+  margin: 0;
+}
+
+.checkbox-container {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  gap: 7px;
+}
+</style>
diff --git a/src/views/SILA/NetworkAdapters/EthernetAdapters/helpers.js b/src/views/SILA/NetworkAdapters/EthernetAdapters/helpers.js
new file mode 100644
index 00000000..918f5b4e
--- /dev/null
+++ b/src/views/SILA/NetworkAdapters/EthernetAdapters/helpers.js
@@ -0,0 +1,99 @@
+export const items = [
+  {
+    param: 'MAC адрес',
+    value: 'D0:94:66:2A:77:33',
+  },
+  {
+    param: 'Виртуальный MAC адрес',
+    value: 'D0:94:66:2A:77:33',
+  },
+];
+export const items_2 = [
+  {
+    param: 'Пробуждение по локальной сети',
+    value: true,
+  },
+  {
+    param: 'Менеджмент проходит через',
+    value: true,
+  },
+  {
+    param: 'Энергоэффективный Ethernet',
+    value: true,
+  },
+  {
+    param: 'Поддерживаемый boot протокол',
+    value: true,
+  },
+  {
+    param: 'Способность политики сохранения',
+    value: true,
+  },
+];
+export const items_3 = [
+  {
+    param: 'Версия прошивки',
+    value: '20.6.6.2',
+  },
+  {
+    param: 'Версия драйвера',
+    value: '3.134',
+  },
+  {
+    param: 'PCI device ID',
+    value: '165F',
+  },
+];
+
+export const items_4 = [
+  {
+    param: 'Встроенные порты PXE',
+    value: true,
+  },
+];
+
+export const items_5 = [
+  {
+    param: 'Статус',
+    value: 'Подключено',
+  },
+  {
+    param: 'Скорость',
+    value: '1000 Mbps',
+  },
+];
+
+export const items_6 = [
+  {
+    name: 'Приемопередатчик 1',
+    model: 'A0507',
+    number: '789578456698',
+    type: 'Плата',
+    firmware: 'v 21.6.0',
+    status: 'Link',
+  },
+  {
+    name: 'Приемопередатчик 2',
+    model: 'A0507',
+    number: '543636577755',
+    type: 'Плата',
+    firmware: 'v 21.6.0',
+    status: 'Receiver Signal Averange Optical Power',
+  },
+  {
+    name: 'Приемопередатчик 3',
+    model: 'A0408',
+    number: '789578456698',
+    type: 'Плата',
+    firmware: 'v 21.6.0',
+    status: 'Laser Output Power',
+  },
+  {
+    name: 'Приемопередатчик 4',
+    model: 'A0408',
+    number: '123456789087',
+    type: 'Плата',
+    firmware: 'v 21.6.0',
+    status: 'Laser Output Power',
+  },
+];
diff --git a/src/views/SILA/NetworkAdapters/EthernetAdapters/index.js b/src/views/SILA/NetworkAdapters/EthernetAdapters/index.js
new file mode 100644
index 00000000..47f49789
--- /dev/null
+++ b/src/views/SILA/NetworkAdapters/EthernetAdapters/index.js
@@ -0,0 +1 @@
+export { default } from './EthernetAdaptersPage.vue';
diff --git a/src/views/SILA/NetworkAdapters/FcHbaAdapters/FcHbaAdaptersPage.vue b/src/views/SILA/NetworkAdapters/FcHbaAdapters/FcHbaAdaptersPage.vue
new file mode 100644
index 00000000..8184349d
--- /dev/null
+++ b/src/views/SILA/NetworkAdapters/FcHbaAdapters/FcHbaAdaptersPage.vue
@@ -0,0 +1,231 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="main-container">
+      <data-tabs
+        :slots="adaptersSlots"
+        :switch-tab="switchAdapterSlot"
+        :current-tab="currentAdapterSlot"
+        :slot-width="85"
+        :slider-width="60"
+        style="margin-top: 16px"
+      />
+      <page-section class="bootstrap-table__section">
+        <div class="settings-container">
+          <span class="bold-16px">{{ $t('appNavigation.settings') }}</span>
+          <apply-settings-popover
+            :appaly-on-reload="appalyOnReload"
+            :appaly-option1="appalyOption1"
+            :appaly-option2="appalyOption2"
+            :apply-type="applyType"
+          />
+          <b-button variant="primary" class="apply-button">
+            {{ $t('global.action.acceptChanges') }}
+          </b-button>
+        </div>
+        <span class="bold-12px__caps">
+          {{ $t('adapters.wwnAddres') }}
+        </span>
+        <b-table
+          responsive="md"
+          class="bootstrap-table bootstrap-table__stripes_odd"
+          :items="items"
+          :fields="fields"
+        >
+          <template #cell(value)="data">
+            <b-row>
+              <b-col>
+                <span>
+                  {{ data.value }}
+                </span>
+              </b-col>
+              <b-col>
+                <img
+                  src="@/assets/images/icon-edit.svg"
+                  class="icon-chevron icon-edit"
+                />
+              </b-col>
+            </b-row>
+          </template>
+        </b-table>
+        <span class="bold-12px__caps">
+          {{ $t('adapters.settings') }}
+        </span>
+        <b-table
+          responsive="md"
+          class="bootstrap-table bootstrap-table__stripes_odd"
+          :items="items_2"
+          :fields="fields"
+        >
+          <template #cell(value)="data">
+            <b-row v-if="data.index === 0 || data.index === 3">
+              <b-col>
+                <span>
+                  {{ data.value }}
+                </span>
+              </b-col>
+            </b-row>
+            <b-row v-else-if="data.index === 4">
+              <b-col>
+                <span>
+                  {{ data.value ? 'Включено' : 'Выключено' }}
+                </span>
+              </b-col>
+              <b-col>
+                <img :is="iconChevron" class="icon-chevron icon-options" />
+              </b-col>
+            </b-row>
+            <b-row v-else>
+              <b-col>
+                <span>
+                  {{ data.value }}
+                </span>
+              </b-col>
+              <b-col>
+                <img :is="iconChevron" class="icon-chevron icon-options" />
+              </b-col>
+            </b-row>
+          </template>
+        </b-table>
+        <span class="bold-12px__caps">
+          {{ $t('adapters.propherties') }}
+        </span>
+        <b-table
+          responsive="md"
+          class="bootstrap-table bootstrap-table__stripes"
+          :items="items_3"
+          :fields="fields"
+        >
+        </b-table>
+        <div class="microcode-container">
+          <span class="bold-16px">{{
+            $t('SystemDescription.microcodeAdapter')
+          }}</span>
+          <popover
+            id="popover-reactive-1"
+            description="adapters.microcodeUpdate"
+            popup="adapters.microcodeUpdate_popup"
+            button="global.action.refresh"
+            :is-microcode-drivers="true"
+          />
+        </div>
+      </page-section>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import Popover from '@/components/Global/Popover';
+import ApplySettingsPopover from '@/components/Global/SilaComponents/ApplySettingsPopover';
+import DataTabs from '@/components/Global/SilaComponents/DataTabs';
+
+import iconChevron from '@carbon/icons-vue/es/chevron--down/16';
+import { items, items_2, items_3 } from './helpers';
+
+export default {
+  components: {
+    PageTitle,
+    PageSection,
+    DataTabs,
+    Popover,
+    ApplySettingsPopover,
+  },
+  data() {
+    return {
+      items,
+      items_2,
+      items_3,
+      iconChevron,
+      applyType: 'reload',
+      currentAdapterSlot: 1,
+      adaptersSlots: [
+        { id: 1, name: 'Адаптер 1' },
+        { id: 2, name: 'Адаптер 2' },
+        { id: 3, name: 'Адаптер 3' },
+      ],
+      fields: [
+        {
+          key: 'param',
+          label: '',
+          formatter: this.dataFormatter,
+          thClass: 'bootstrap-table__head_bg',
+          class: 'bootstrap-table__column-first',
+          tdClass: 'regular-12px bootstrap-table__td',
+        },
+        {
+          key: 'value',
+          label: '',
+          formatter: this.dataFormatter,
+          thClass: 'bootstrap-table__head_bg',
+          class: `bootstrap-table__column-last
+            bootstrap-table__server-param`,
+          tdClass: 'regular-12px bootstrap-table__td',
+        },
+      ],
+    };
+  },
+  methods: {
+    switchAdapterSlot(period) {
+      this.currentAdapterSlot = period;
+    },
+    appalyOnReload() {
+      this.applyType = 'reload';
+    },
+    appalyOption1() {
+      this.applyType = 'option1';
+    },
+    appalyOption2() {
+      this.applyType = 'option2';
+    },
+  },
+};
+</script>
+<style lang="scss">
+.bootstrap-table__server-param {
+  width: 30%;
+}
+</style>
+
+<style lang="scss" scoped>
+.bootstrap-table__section {
+  width: auto;
+}
+
+.bootstrap-table__section {
+  margin-bottom: 24px;
+}
+
+.bold-16px {
+  display: block;
+  margin: 25px 0 16px 0;
+}
+
+.settings-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.apply-button {
+  width: 245px;
+  height: 36px;
+}
+
+.microcode-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.bold-12px__caps {
+  display: block;
+  margin: 20px 0 8px 0;
+}
+</style>
diff --git a/src/views/SILA/NetworkAdapters/FcHbaAdapters/helpers.js b/src/views/SILA/NetworkAdapters/FcHbaAdapters/helpers.js
new file mode 100644
index 00000000..a2ace22f
--- /dev/null
+++ b/src/views/SILA/NetworkAdapters/FcHbaAdapters/helpers.js
@@ -0,0 +1,42 @@
+export const items = [
+  {
+    param: 'WWN адрес',
+    value: 'D0:94:66:2A:77:33',
+  },
+];
+export const items_2 = [
+  {
+    param: 'Boot WWPN',
+    value: 'Имя порта контроллера (WWPN)',
+  },
+  {
+    param: 'Select Boot Enable',
+    value: 'Boot Lun',
+  },
+  {
+    param: 'Boot LUN',
+    value: 'Том 1',
+  },
+  {
+    param: 'WWPN',
+    value: 'Имя порта HBA (WWPN)',
+  },
+  {
+    param: 'Host Adapter Bios Enable',
+    value: false,
+  },
+];
+export const items_3 = [
+  {
+    param: 'Версия прошивки',
+    value: '20.6.6.2',
+  },
+  {
+    param: 'Версия драйвера',
+    value: '3.134',
+  },
+  {
+    param: 'PCI device ID',
+    value: '165F',
+  },
+];
diff --git a/src/views/SILA/NetworkAdapters/FcHbaAdapters/index.js b/src/views/SILA/NetworkAdapters/FcHbaAdapters/index.js
new file mode 100644
index 00000000..8f5636c3
--- /dev/null
+++ b/src/views/SILA/NetworkAdapters/FcHbaAdapters/index.js
@@ -0,0 +1 @@
+export { default } from './FcHbaAdaptersPage.vue';
diff --git a/src/views/SILA/PciDevices/PciDevicesPage.vue b/src/views/SILA/PciDevices/PciDevicesPage.vue
new file mode 100644
index 00000000..09734a4a
--- /dev/null
+++ b/src/views/SILA/PciDevices/PciDevicesPage.vue
@@ -0,0 +1,172 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="main-container">
+      <page-section class="bootstrap-table__section">
+        <b-table
+          responsive="md"
+          show-empty
+          class="bootstrap-rounded-table"
+          :items="items"
+          :fields="fields"
+          :empty-text="$t('global.table.emptyMessage')"
+        >
+          <template #cell(status)>
+            <b-row>
+              <b-col>
+                <img
+                  src="@/assets/images/fans-page/working.svg"
+                  class="icon-chevron"
+                />
+                <span>
+                  {{ 'Работоспособен' }}
+                </span>
+              </b-col>
+            </b-row>
+          </template>
+        </b-table>
+      </page-section>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+
+export default {
+  components: { PageTitle, PageSection },
+  data() {
+    return {
+      fields: [
+        {
+          key: 'status',
+          label: 'Статус',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'name',
+          label: 'Имя',
+          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: 'type',
+          label: 'Тип устройства',
+          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: 'model',
+          label: 'Модель',
+          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: 'serial_number',
+          label: 'Серийный номер',
+          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: 'producer',
+          label: 'Производитель',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
+      items: [
+        {
+          status: true,
+          name: 'PCI-устройство 1',
+          type: 'Плата',
+          model: 'A0407',
+          serial_number: '789578456698',
+          producer: 'ASUS',
+        },
+        {
+          status: true,
+          name: 'PCI-устройство 2',
+          type: 'Плата',
+          model: 'A4897',
+          serial_number: '758496877563',
+          producer: 'ASUS',
+        },
+        {
+          status: true,
+          name: 'PCI-устройство 3',
+          type: 'Плата',
+          model: 'A0147',
+          serial_number: '247856889654',
+          producer: 'ASUS',
+        },
+      ],
+    };
+  },
+  methods: {
+    switchMemorySlot(period) {
+      this.currentMemorySlot = period;
+    },
+    redirectDrivers() {
+      this.$router.push('/drivers-static');
+    },
+    redirectVirtual() {
+      this.$router.push('/virtual-drivers');
+    },
+  },
+};
+</script>
+<style lang="scss">
+.bootstrap-table__stripes tr:nth-of-type(even) {
+  background-color: rgb(255 255 255);
+}
+.bootstrap-table__head_bg {
+  border-top: none;
+  display: none;
+}
+
+.bootstrap-table__column-first {
+  border-right: 1px solid rgba(26, 62, 91, 0.1);
+  border-top: none;
+}
+
+.bootstrap-table__column-last {
+  border-top: none;
+}
+
+.bootstrap-table__td {
+  border-top: 1px solid rgba(26, 62, 91, 0.1);
+}
+</style>
+
+<style lang="scss" scoped>
+.bootstrap-table__section {
+  margin-bottom: 24px;
+}
+
+.bold-16px {
+  display: block;
+  margin: 25px 0 16px 0;
+}
+
+.pointer {
+  color: $red-brand-primary;
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/SILA/PciDevices/index.js b/src/views/SILA/PciDevices/index.js
new file mode 100644
index 00000000..20092914
--- /dev/null
+++ b/src/views/SILA/PciDevices/index.js
@@ -0,0 +1 @@
+export { default } from './PciDevicesPage.vue';
diff --git a/src/views/SILA/PhysicalDrivers/DynamicInfo/DriversDynamicPage.vue b/src/views/SILA/PhysicalDrivers/DynamicInfo/DriversDynamicPage.vue
new file mode 100644
index 00000000..cd148f7d
--- /dev/null
+++ b/src/views/SILA/PhysicalDrivers/DynamicInfo/DriversDynamicPage.vue
@@ -0,0 +1,209 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="notification__container">
+      <span class="semi-bold-12px">{{
+        $t('global.ariaLabel.notificationTime')
+      }}</span>
+      <div class="form-control notification">
+        <b-form-input
+          v-model="notificationInput"
+          type="number"
+          class="notification__input"
+        >
+        </b-form-input>
+        <button class="notification_button">
+          <img class="notification__icon" src="@/assets/images/refresh.svg" />
+        </button>
+      </div>
+    </div>
+    <div class="main-container">
+      <date-switch
+        :switch-time-scale="switchTimeScale"
+        :time-scale="timeScale"
+      />
+      <div class="limit-container">
+        <div class="trmperature-limt">
+          <img src="@/assets/images/labels/non-normal.svg" />
+          <span class="semi-bold-12px">{{
+            $t('tablesDescription.nonNormalMode')
+          }}</span>
+          <b-form-input
+            v-model="temperatureNonNormalInput"
+            type="number"
+            :min="0"
+            :max="temperatureCritical"
+            class="form-control medium-12px"
+          >
+          </b-form-input>
+        </div>
+        <div class="trmperature-limt">
+          <img src="@/assets/images/labels/critical.svg" />
+          <span class="semi-bold-12px">{{
+            $t('tablesDescription.criticalMode')
+          }}</span>
+          <b-form-input
+            v-model="temperatureCritical"
+            type="number"
+            :min="temperatureNonNormalInput"
+            :max="temperatureWarningInput"
+            class="form-control medium-12px"
+          >
+          </b-form-input>
+        </div>
+        <div class="trmperature-limt">
+          <img src="@/assets/images/labels/warning.svg" />
+          <span class="semi-bold-12px">{{
+            $t('tablesDescription.temperatureWarning')
+          }}</span>
+          <b-form-input
+            v-model="temperatureWarningInput"
+            type="number"
+            :min="temperatureCritical"
+            :max="100"
+            class="form-control medium-12px"
+          >
+          </b-form-input>
+        </div>
+        <b-button
+          class="save-button"
+          variant="primary"
+          @click="updateTemperatureLimits"
+        >
+          {{ $t('global.action.save') }}
+        </b-button>
+      </div>
+      <!-- Temperature Table -->
+      <temperature-table
+        :time-scale="timeScale"
+        :warning="temperatureWarning"
+        :non-normal="temperatureNonNormal"
+        :critical-start="temperatureCriticalStart"
+      />
+      <accessory-table-drivers :records="accessoryData.table" />
+      <accessory-table :records="accessoryData.temperatureTable" />
+    </div>
+  </b-container>
+</template>
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import DateSwitch from '@/components/Global/SilaComponents/DateSwitch';
+import TemperatureTable from './TemperatureTable';
+import AccessoryTable from '@/components/Global/SilaComponents/Tables/AccessoryTable';
+import AccessoryTableDrivers from '@/components/Global/SilaComponents/Tables/AccessoryTableDrivers';
+import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
+
+import { AccessoryData } from './helpers';
+
+export default {
+  components: {
+    PageTitle,
+    DateSwitch,
+    TemperatureTable,
+    AccessoryTable,
+    AccessoryTableDrivers,
+  },
+  data() {
+    return {
+      timeScale: 'hour',
+      temperatureWarning: 72,
+      temperatureWarningInput: 72,
+      temperatureNonNormal: 44,
+      temperatureNonNormalInput: 44,
+      temperatureCriticalStart: 55,
+      temperatureCritical: 55,
+      notificationInput: 42,
+      accessoryData: AccessoryData,
+      iconChevronUp: iconChevronUp,
+    };
+  },
+  methods: {
+    switchTimeScale(period) {
+      this.timeScale = period;
+    },
+    updateTemperatureLimits() {
+      this.temperatureWarning = +this.temperatureWarningInput;
+      this.temperatureNonNormal = +this.temperatureNonNormalInput;
+      this.temperatureCriticalStart = +this.temperatureCritical;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.notification__container {
+  position: absolute;
+  top: calc(#{$header-height});
+  right: 0px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.notification {
+  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 8px;
+  width: 236px;
+  height: 40px;
+  z-index: 1001;
+}
+
+.notification__icon {
+  width: 20px;
+  height: 20px;
+}
+
+.notification__input {
+  border: none;
+  background: none;
+  box-shadow: none;
+}
+
+.notification_button {
+  border: none;
+  background: none;
+}
+
+.semi-bold-12px {
+  z-index: 1001;
+}
+
+// temperature limit comtainer
+.limit-container {
+  height: 85px;
+  width: 100%;
+  padding: 0 32px 10px 32px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-end;
+  gap: 24px;
+}
+
+.trmperature-limt {
+  height: 60px;
+  width: 100%;
+  max-width: 270px;
+  display: flex;
+  align-items: baseline;
+  flex-flow: row wrap;
+  gap: 8px;
+}
+
+.form-control {
+  height: 36px;
+}
+.save-button {
+  width: 151px;
+  height: 36px;
+}
+</style>
diff --git a/src/views/SILA/PhysicalDrivers/DynamicInfo/TemperatureTable.vue b/src/views/SILA/PhysicalDrivers/DynamicInfo/TemperatureTable.vue
new file mode 100644
index 00000000..f9c149c3
--- /dev/null
+++ b/src/views/SILA/PhysicalDrivers/DynamicInfo/TemperatureTable.vue
@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <highcharts :options="chartOptions.line" />
+  </div>
+</template>
+
+<script>
+import { setTime, Series, setCategories } from './helpers';
+import { Chart } from 'highcharts-vue';
+
+export default {
+  components: {
+    highcharts: Chart,
+  },
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+    warning: {
+      type: Number,
+      default: 70,
+    },
+    nonNormal: {
+      type: Number,
+      default: 70,
+    },
+    criticalStart: {
+      type: Number,
+      default: 70,
+    },
+  },
+  computed: {
+    chartOptions() {
+      return {
+        line: {
+          chart: {
+            type: 'line',
+            margin: [12, 50, 32, 60],
+            height: '320px',
+          },
+          title: null,
+          xAxis: {
+            categories: setTime(60, 'hour'),
+            title: null,
+            labels: {
+              step: 6,
+            },
+            minorGridLineColor: '#1A3E5B1A',
+          },
+          yAxis: {
+            categories: setCategories(101, 'С°'),
+            min: 0,
+            max: 100,
+            title: null,
+            minTickInterval: 25,
+            minorGridLineColor: '#1A3E5B1A',
+            plotLines: [
+              {
+                color: '#E11717',
+                dashStyle: 'solid',
+                value: this.warning,
+                zIndex: '1000',
+                width: 2,
+                label: {
+                  text: 'Пороговое значение предупреждения, С°',
+                  align: 'right',
+                  style: {
+                    fontFamily: 'Inter, sans-serif',
+                    fontSize: '12px',
+                    fontStyle: 'normal',
+                    fontWeight: '400',
+                    lineHeight: '16px',
+                    color: '#0C1C2999',
+                  },
+                },
+              },
+            ],
+            plotBands: [
+              {
+                color: '#F0AC0C1A',
+                dashStyle: 'solid',
+                from: this.nonNormal,
+                to: this.criticalStart,
+              },
+              {
+                color: '#FF41411A',
+                dashStyle: 'solid',
+                from: this.criticalStart,
+                to: this.warning,
+              },
+            ],
+          },
+          series: Series['temperature'].map((item) => ({
+            ...item,
+            marker: {
+              enabled: false,
+            },
+          })),
+          legend: {
+            enabled: false,
+          },
+          tooltip: {
+            enabled: false,
+            crosshairs: false,
+          },
+          plotOptions: {
+            series: {
+              showInLegend: true,
+            },
+          },
+        },
+      };
+    },
+  },
+};
+</script>
+<style lang="scss">
+.highcharts-credits {
+  display: none;
+}
+
+.highcharts-plot-line-label {
+  transform: translate(-15px, 0) !important;
+}
+</style>
diff --git a/src/views/SILA/PhysicalDrivers/DynamicInfo/helpers.js b/src/views/SILA/PhysicalDrivers/DynamicInfo/helpers.js
new file mode 100644
index 00000000..5bb87b84
--- /dev/null
+++ b/src/views/SILA/PhysicalDrivers/DynamicInfo/helpers.js
@@ -0,0 +1,584 @@
+export const colors = [
+  '#CB32F1',
+  '#F18638',
+  '#139BB9',
+  '#E1AB17',
+  '#175AE1',
+  '#13B937',
+];
+
+export const Series = {
+  temperature: [
+    {
+      name: 'Sean',
+      data: [
+        15,
+        15,
+        45,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        55,
+        15,
+        25,
+        15,
+        15,
+        15,
+        55,
+        15,
+        75,
+        15,
+        35,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        15,
+        45,
+        15,
+        25,
+        15,
+        45,
+        15,
+        15,
+        15,
+        35,
+        35,
+        35,
+        15,
+        55,
+        15,
+        15,
+        35,
+        15,
+        25,
+        15,
+        35,
+        15,
+      ],
+      color: '#CB32F1',
+    },
+    {
+      name: 'Ivan',
+      data: [
+        12,
+        12,
+        12,
+        12,
+        12,
+        12,
+        12,
+        12,
+        12,
+        12,
+        12,
+        12,
+        22,
+        12,
+        42,
+        12,
+        12,
+        12,
+        72,
+        12,
+        52,
+        12,
+        62,
+        12,
+        72,
+        12,
+        12,
+        12,
+        12,
+        42,
+        12,
+        12,
+        52,
+        12,
+        42,
+        12,
+        12,
+        62,
+        12,
+        12,
+        12,
+        22,
+        12,
+        42,
+        12,
+        62,
+        12,
+        12,
+        32,
+        12,
+        12,
+        12,
+        52,
+        12,
+        32,
+        12,
+        22,
+        12,
+        12,
+        12,
+      ],
+      color: '#175AE1',
+    },
+    {
+      name: 'Brendan',
+      data: [
+        13,
+        13,
+        13,
+        13,
+        23,
+        13,
+        33,
+        13,
+        63,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        23,
+        13,
+        43,
+        13,
+        53,
+        13,
+        13,
+        13,
+        53,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        13,
+        53,
+        13,
+        43,
+        13,
+        13,
+        63,
+        13,
+        13,
+        13,
+        23,
+        13,
+        43,
+        13,
+        63,
+        13,
+        13,
+        13,
+        53,
+        13,
+        53,
+      ],
+      color: '#B98D13',
+    },
+    {
+      name: 'Matteo',
+      data: [
+        24,
+        14,
+        44,
+        14,
+        14,
+        14,
+        64,
+        14,
+        14,
+        14,
+        54,
+        14,
+        14,
+        34,
+        14,
+        24,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        44,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        14,
+        44,
+        14,
+        54,
+        14,
+        14,
+        14,
+        54,
+        14,
+        14,
+        14,
+        14,
+        14,
+        84,
+        14,
+        14,
+        14,
+        54,
+        14,
+        14,
+        14,
+        44,
+        14,
+        44,
+        64,
+        14,
+        44,
+        14,
+      ],
+      color: '#13B937',
+    },
+    {
+      name: 'Joan',
+      data: [
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        36,
+        16,
+        26,
+        16,
+        36,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        26,
+        16,
+        46,
+        16,
+        16,
+        16,
+        16,
+        16,
+        56,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        16,
+        96,
+        16,
+        16,
+        16,
+        56,
+        16,
+        16,
+        16,
+        46,
+        16,
+      ],
+      color: '#F18638',
+    },
+    {
+      name: 'Avinash',
+      data: [
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        69,
+        19,
+        19,
+        19,
+        19,
+        19,
+        59,
+        19,
+        19,
+        39,
+        19,
+        29,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        49,
+        19,
+        19,
+        19,
+        59,
+        19,
+        29,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+        19,
+      ],
+      color: '#139BB9',
+    },
+  ],
+};
+
+export const setTime = (count) => {
+  const arr = [...new Array(count)].map(() => '');
+  for (let i = 0; i < arr.length; i++) {
+    arr[i] = `15:${String(i).padStart(2, '0')}`;
+  }
+  return arr;
+};
+
+export const setCategories = (count, desc) => {
+  const arr = [...new Array(count)].map((i, k) => `${k} ${desc}`);
+  return arr;
+};
+
+export const AccessoryData = {
+  temperatureTable: {
+    fields: [
+      {
+        key: 'name',
+        label: 'Имя модуля',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'currentTemperature',
+        label: 'Текущее, С°',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'middleTemperature',
+        label: 'Среднее, С°',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'minTemperature',
+        label: 'Минимальное, С°',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'minDate',
+        label: 'Дата минимального',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'maxTemperature',
+        label: 'Максимальное, С°',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'maxDate',
+        label: 'Дата максимального',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+    ],
+    items: [
+      {
+        name: 'Накопитель 1',
+        currentTemperature: 19,
+        middleTemperature: 40,
+        minTemperature: 31,
+        minDate: { time: '15:15', date: '11.11.2021' },
+        maxTemperature: 88,
+        maxDate: { time: '10:26', date: '15.11.2021' },
+      },
+      {
+        name: 'Накопитель 2',
+        currentTemperature: 29,
+        middleTemperature: 40,
+        minTemperature: 20,
+        minDate: { time: '15:45', date: '11.11.2021' },
+        maxTemperature: 76,
+        maxDate: { time: '16:59', date: '16.11.2021' },
+      },
+      {
+        name: 'Накопитель 3',
+        currentTemperature: 48,
+        middleTemperature: 46,
+        minTemperature: 31,
+        minDate: { time: '15:23', date: '11.11.2021' },
+        maxTemperature: 69,
+        maxDate: { time: '15:26', date: '15.11.2021' },
+      },
+      {
+        name: 'Накопитель 4',
+        currentTemperature: 48,
+        middleTemperature: 45,
+        minTemperature: 5,
+        minDate: { time: '16:45', date: '25.11.2021' },
+        maxTemperature: 75,
+        maxDate: { time: '11:26', date: '16.11.2021' },
+      },
+      {
+        name: 'Накопитель 5',
+        currentTemperature: 39,
+        middleTemperature: 44,
+        minTemperature: 30,
+        minDate: { time: '15:23', date: '11.11.2021' },
+        maxTemperature: 80,
+        maxDate: { time: '15:26', date: '17.11.2021' },
+      },
+      {
+        name: 'Накопитель 6',
+        currentTemperature: 39,
+        middleTemperature: 44,
+        minTemperature: 5,
+        minDate: { time: '16:45', date: '25.11.2021' },
+        maxTemperature: 80,
+        maxDate: { time: '15:26', date: '15.11.2021' },
+      },
+    ],
+  },
+  table: {
+    fields: [
+      {
+        key: 'name',
+        label: 'Имя модуля',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        class: 'SMART-table-col-first',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'SMART',
+        label: 'Текущие значения атрибутов SMART',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        class: 'SMART-table-col-second',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+      {
+        key: 'resource',
+        label: 'Оставшийся ресурс для SSD, Мб',
+        thClass: 'bootstrap-fans-table__th semi-bold-12px',
+        class: 'SMART-table-col-last',
+        tdClass: 'bootstrap-fans-table__td light-12px',
+      },
+    ],
+    items: [
+      {
+        name: 'Накопитель 1',
+        SMART: 88,
+        resource: '1 024 000',
+      },
+      {
+        name: 'Накопитель 2',
+        SMART: 76,
+        resource: '512 000',
+      },
+      {
+        name: 'Накопитель 3',
+        SMART: 69,
+        resource: '256 000',
+      },
+      {
+        name: 'Накопитель 4',
+        SMART: 75,
+        resource: '128 000',
+      },
+      {
+        name: 'Накопитель 5',
+        SMART: 69,
+        resource: '256 000',
+      },
+      {
+        name: 'Накопитель 6',
+        SMART: 75,
+        resource: '128 000',
+      },
+    ],
+  },
+};
diff --git a/src/views/SILA/PhysicalDrivers/DynamicInfo/index.js b/src/views/SILA/PhysicalDrivers/DynamicInfo/index.js
new file mode 100644
index 00000000..ed9033ab
--- /dev/null
+++ b/src/views/SILA/PhysicalDrivers/DynamicInfo/index.js
@@ -0,0 +1 @@
+export { default } from './DriversDynamicPage.vue';
diff --git a/src/views/SILA/PhysicalDrivers/StaticInfo/DriversStaticPage.vue b/src/views/SILA/PhysicalDrivers/StaticInfo/DriversStaticPage.vue
new file mode 100644
index 00000000..452abf88
--- /dev/null
+++ b/src/views/SILA/PhysicalDrivers/StaticInfo/DriversStaticPage.vue
@@ -0,0 +1,149 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="main-container">
+      <page-section class="bootstrap-table__section info_section">
+        <span class="bold-16px">{{ $t('global.table.info') }}</span>
+      </page-section>
+      <data-tabs
+        :slots="memorySlots"
+        :switch-tab="switchMemorySlot"
+        :current-tab="currentMemorySlot"
+        :slot-width="100"
+        :slider-width="81"
+      />
+      <page-section class="bootstrap-table__section info_section">
+        <b-table
+          responsive="md"
+          show-empty
+          class="bootstrap-rounded-table"
+          :items="items"
+          :fields="fields"
+          :empty-text="$t('global.table.emptyMessage')"
+        >
+        </b-table>
+        <div class="microcode-container">
+          <span class="bold-16px">{{
+            $t('SystemDescription.microcodeDrivers')
+          }}</span>
+          <popover
+            id="popover-reactive-1"
+            description="SystemDescription.reloadMicrocodeDrivers"
+            popup="SystemDescription.reloadMicrocodeDrivers"
+            button="global.action.refresh"
+            :is-microcode-drivers="true"
+          />
+        </div>
+      </page-section>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import DataTabs from '@/components/Global/SilaComponents/DataTabs';
+import Popover from '@/components/Global/Popover';
+
+export default {
+  components: { PageTitle, PageSection, DataTabs, Popover },
+  data() {
+    return {
+      currentMemorySlot: 1,
+      memorySlots: [
+        { id: 1, name: 'Накопитель 1' },
+        { id: 2, name: 'Накопитель 2' },
+        { id: 3, name: 'Накопитель 3' },
+        { id: 4, name: 'Накопитель 4' },
+        { id: 5, name: 'Накопитель 5' },
+        { id: 6, name: 'Накопитель 6' },
+        { id: 7, name: 'Накопитель 7' },
+        { id: 8, name: 'Накопитель 8' },
+        { id: 9, name: 'Накопитель 9' },
+        { id: 10, name: 'Накопитель 10' },
+        { id: 11, name: 'Накопитель 11' },
+        { id: 12, name: 'Накопитель 12' },
+        { id: 13, name: 'Накопитель 13' },
+        { id: 14, name: 'Накопитель 14' },
+        { id: 15, name: 'Накопитель 15' },
+      ],
+      fields: [
+        {
+          key: 'parametr',
+          label: 'Параметр',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: `bootstrap-rounded-table__column-first
+            memory-table-col-first`,
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'value',
+          label: 'Значение',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
+      items: [
+        {
+          parametr: 'Протокол',
+          value: '4590',
+        },
+        {
+          parametr: 'Номинальная ёмкость',
+          value: '1 024 000 Мб',
+        },
+        {
+          parametr: 'Номинальная скорость вращения HDD',
+          value: '2000 об./мин.',
+        },
+        {
+          parametr: 'Номинальный ресурс для SDD',
+          value: '10 000',
+        },
+        {
+          parametr: 'Слот в бэкплейне или номер порта',
+          value: '25',
+        },
+      ],
+    };
+  },
+  methods: {
+    switchMemorySlot(period) {
+      this.currentMemorySlot = period;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.memory-table-col-first {
+  width: 50%;
+}
+</style>
+
+<style lang="scss" scoped>
+.bootstrap-table__section {
+  margin-bottom: 24px;
+}
+.info_section {
+  margin-bottom: 0px;
+}
+
+.bold-16px {
+  display: block;
+  margin: 25px 0 16px 0;
+}
+
+.microcode-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/views/SILA/PhysicalDrivers/StaticInfo/index.js b/src/views/SILA/PhysicalDrivers/StaticInfo/index.js
new file mode 100644
index 00000000..2c06b5a2
--- /dev/null
+++ b/src/views/SILA/PhysicalDrivers/StaticInfo/index.js
@@ -0,0 +1 @@
+export { default } from './DriversStaticPage.vue';
diff --git a/src/views/SILA/RAID/Cache/RAIDCachePage.vue b/src/views/SILA/RAID/Cache/RAIDCachePage.vue
new file mode 100644
index 00000000..f41cd787
--- /dev/null
+++ b/src/views/SILA/RAID/Cache/RAIDCachePage.vue
@@ -0,0 +1,124 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="main-container">
+      <data-tabs
+        :slots="raidSlots"
+        :switch-tab="switchRaidSlot"
+        :current-tab="currentRaidSlot"
+        :slot-width="100"
+        :slider-width="79"
+        style="margin-top: 16px"
+      />
+      <page-section class="bootstrap-table__section info_section">
+        <span class="bold-16px">{{ $t('RAID.cache_info') }}</span>
+        <b-table
+          responsive="md"
+          show-empty
+          class="bootstrap-rounded-table"
+          :items="items"
+          :fields="fields"
+          :empty-text="$t('global.table.emptyMessage')"
+        >
+        </b-table>
+      </page-section>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import DataTabs from '@/components/Global/SilaComponents/DataTabs';
+
+export default {
+  components: { PageTitle, PageSection, DataTabs },
+  data() {
+    return {
+      currentRaidSlot: 1,
+      raidSlots: [
+        { id: 1, name: 'Контроллер 1' },
+        { id: 2, name: 'Контроллер 2' },
+        { id: 3, name: 'Контроллер 3' },
+      ],
+      fields: [
+        {
+          key: 'parametr',
+          label: 'Параметр',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: `bootstrap-rounded-table__column-first
+            cache-table-col-first`,
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'value',
+          label: 'Значение',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
+      items: [
+        {
+          parametr: 'Статус наличия',
+          value: 'Есть',
+        },
+        {
+          parametr: 'Текущее значение занятой емкости',
+          value: '1 024 000 Мб',
+        },
+        {
+          parametr: 'Текущее значение свободной емкости',
+          value: '1 004 256 Мб',
+        },
+        {
+          parametr: 'Статус наличия BBU',
+          value: 'Есть',
+        },
+        {
+          parametr: 'Статус наличия FBU',
+          value: 'Нет',
+        },
+        {
+          parametr: 'Состояние BBU',
+          value: 'Готов',
+        },
+        {
+          parametr: 'Состояние FBU',
+          value: 'Заряжается',
+        },
+        {
+          parametr: 'Номинальная емкость',
+          value: '1 004 256 Мб',
+        },
+      ],
+    };
+  },
+  methods: {
+    switchRaidSlot(period) {
+      this.currentRaidSlot = period;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.cache-table-col-first {
+  width: 50%;
+}
+</style>
+
+<style lang="scss" scoped>
+.bootstrap-table__section {
+  margin-bottom: 24px;
+}
+
+.bold-16px {
+  display: block;
+  margin: 0 0 16px 0;
+}
+</style>
diff --git a/src/views/SILA/RAID/Cache/index.js b/src/views/SILA/RAID/Cache/index.js
new file mode 100644
index 00000000..76acfcbe
--- /dev/null
+++ b/src/views/SILA/RAID/Cache/index.js
@@ -0,0 +1 @@
+export { default } from './RAIDCachePage.vue';
diff --git a/src/views/SILA/RAID/Settings/ActionSettingsPopover.vue b/src/views/SILA/RAID/Settings/ActionSettingsPopover.vue
new file mode 100644
index 00000000..2f3093ab
--- /dev/null
+++ b/src/views/SILA/RAID/Settings/ActionSettingsPopover.vue
@@ -0,0 +1,131 @@
+<template>
+  <b-popover
+    placement="left"
+    triggers="focus"
+    :show.sync="show"
+    custom-class="apply-reload-popover"
+    :target="`popover-action-${id}`"
+    @hidden="onHidden"
+  >
+    <b-button
+      id="popover-apply-button"
+      variant="popover"
+      :class="{ 'hovered-apply-button': scale === topPosition }"
+      @mouseover="scale = topPosition"
+      @click="
+        () => {
+          show = false;
+          appalyOnReload();
+        }
+      "
+    >
+      При перезагрузке
+    </b-button>
+    <b-button
+      id="popover-apply-button"
+      variant="popover"
+      :class="{ 'hovered-apply-button': scale === middlePosition }"
+      @mouseover="scale = middlePosition"
+      @click="
+        () => {
+          show = false;
+          appalyOption1();
+        }
+      "
+    >
+      Опция 1
+    </b-button>
+    <b-button
+      id="popover-apply-button"
+      variant="popover"
+      :class="{ 'hovered-apply-button': scale === bottomPosition }"
+      @mouseover="scale = bottomPosition"
+      @click="
+        () => {
+          show = false;
+          appalyOption2();
+        }
+      "
+    >
+      Опция 2
+    </b-button>
+    <div class="slider" :style="`left: 5px; top: ${scale}px;`"></div>
+  </b-popover>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: Number,
+      default: null,
+    },
+    appalyOnReload: {
+      type: Function,
+      default: null,
+    },
+    appalyOption1: {
+      type: Function,
+      default: null,
+    },
+    appalyOption2: {
+      type: Function,
+      default: null,
+    },
+    applyType: {
+      type: String,
+      default: 'reload',
+    },
+  },
+  data() {
+    return {
+      topPosition: 5,
+      middlePosition: 33,
+      bottomPosition: 60,
+      show: false,
+      scale: 5,
+    };
+  },
+  methods: {
+    onHidden() {
+      if (this.applyType === 'reload') {
+        this.scale = this.topPosition;
+      } else if (this.applyType === 'option1') {
+        this.scale = this.middlePosition;
+      } else {
+        this.scale = this.bottomPosition;
+      }
+    },
+  },
+};
+</script>
+<style lang="scss">
+.analytical-table__status {
+  width: 10%;
+}
+
+#popover-apply-ractive {
+  padding-left: 5px;
+}
+
+.hovered-apply-button {
+  color: $white;
+}
+</style>
+<style lang="scss" scoped>
+#popover-apply-button {
+  justify-content: flex-start;
+  width: 240px;
+}
+
+.slider {
+  width: 240px;
+  height: 28px;
+  border-radius: 8px;
+  background-color: $red-brand-primary;
+  box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 40%) inset;
+  position: absolute;
+  transition: ease-in 0.2s;
+  z-index: -1;
+}
+</style>
diff --git a/src/views/SILA/RAID/Settings/OptionsPopover.vue b/src/views/SILA/RAID/Settings/OptionsPopover.vue
new file mode 100644
index 00000000..d1b85754
--- /dev/null
+++ b/src/views/SILA/RAID/Settings/OptionsPopover.vue
@@ -0,0 +1,87 @@
+<template>
+  <b-popover
+    placement="left"
+    triggers="focus"
+    :show.sync="show"
+    custom-class="popover-heigth-100"
+    :target="`popover-option-${id}`"
+  >
+    <b-button
+      id="popover-option-button"
+      variant="popover"
+      @click="
+        () => {
+          show = false;
+          openModal();
+        }
+      "
+    >
+      <img
+        src="@/assets/images/icon-settings-red.svg"
+        class="icon-chevron icon-settings"
+      />
+      Настройки
+    </b-button>
+    <b-button
+      id="popover-option-button"
+      class="delete"
+      variant="popover"
+      @click="show = false"
+    >
+      <img
+        src="@/assets/images/icon-clear-red.svg"
+        class="icon-chevron icon-delete"
+      />
+      Удалить
+    </b-button>
+  </b-popover>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: Number,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      show: false,
+    };
+  },
+  methods: {
+    openModal() {
+      this.$bvModal.show(`edit-tome${this.id}`);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.popover-heigth-100 {
+  max-width: 120px;
+}
+
+#popover-option-button {
+  padding: 0 9px 0 10px;
+  font-size: 12px;
+  &:hover {
+    color: $red-brand-primary;
+    box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 25%) inset;
+  }
+  &:active {
+    box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 50%) inset;
+  }
+  &.delete {
+    padding: 0 26px 0 13px;
+  }
+}
+
+.icon-settings {
+  padding-right: 5px;
+}
+
+.icon-delete {
+  padding-right: 10px;
+}
+</style>
diff --git a/src/views/SILA/RAID/Settings/RAIDSettingsPage.vue b/src/views/SILA/RAID/Settings/RAIDSettingsPage.vue
new file mode 100644
index 00000000..614c06d1
--- /dev/null
+++ b/src/views/SILA/RAID/Settings/RAIDSettingsPage.vue
@@ -0,0 +1,318 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="main-container">
+      <data-tabs
+        :slots="raidSlots"
+        :switch-tab="switchRaidSlot"
+        :current-tab="currentRaidSlot"
+        :slot-width="100"
+        :slider-width="79"
+        style="margin-top: 16px"
+      />
+      <page-section class="bootstrap-table__section" style="margin-top: 0px">
+        <div class="settings-container">
+          <span class="bold-16px">{{ $t('appNavigation.settings') }}</span>
+          <apply-settings-popover
+            :appaly-on-reload="appalyOnReload"
+            :appaly-option1="appalyOption1"
+            :appaly-option2="appalyOption2"
+            :apply-type="applyType"
+          />
+          <b-button variant="primary" class="apply-button">
+            {{ $t('global.action.acceptChanges') }}
+          </b-button>
+        </div>
+        <b-table
+          responsive="md"
+          show-empty
+          class="bootstrap-rounded-table"
+          :items="items"
+          :fields="fields"
+          :empty-text="$t('global.table.emptyMessage')"
+        >
+          <template #cell(action)="data">
+            <b-row v-if="data.index <= 5">
+              <b-col>
+                <span>
+                  {{ data.value }}
+                </span>
+              </b-col>
+              <b-col>
+                <b-button
+                  :id="`popover-action-${data.index}`"
+                  class="popover-action-ractive"
+                  variant="toogle-popover"
+                >
+                  <img :is="iconChevron" class="icon-chevron" />
+                </b-button>
+                <action-settings-popover
+                  :id="data.index"
+                  :appaly-on-reload="appalyOnReload"
+                  :appaly-option1="appalyOption1"
+                  :appaly-option2="appalyOption2"
+                  :apply-type="applyType"
+                />
+              </b-col>
+            </b-row>
+            <b-row v-else>
+              <b-col>
+                <span>
+                  {{ data.value }}
+                </span>
+              </b-col>
+              <b-col>
+                <img
+                  src="@/assets/images/icon-edit.svg"
+                  class="icon-chevron icon-edit"
+                />
+              </b-col>
+            </b-row>
+          </template>
+        </b-table>
+      </page-section>
+      <page-section class="bootstrap-table__section">
+        <div class="settings-container">
+          <span class="bold-16px">{{ $t('RAID.lun') }}</span>
+          <b-button
+            variant="primary"
+            class="apply-button apply-button__lun"
+            @click="$bvModal.show('add-tome-images')"
+          >
+            {{ $t('global.action.addNew') }}
+          </b-button>
+        </div>
+        <b-table
+          responsive="md"
+          show-empty
+          class="bootstrap-rounded-table"
+          :items="items_2"
+          :fields="fields_2"
+          :empty-text="$t('global.table.emptyMessage')"
+        >
+          <template #cell(action)="data">
+            <b-row>
+              <b-col>
+                <span>
+                  {{ data.value }}
+                </span>
+              </b-col>
+              <b-col>
+                <b-button
+                  :id="`popover-option-${data.index}`"
+                  class="popover-option-ractive"
+                  variant="toogle-popover"
+                >
+                  <img
+                    src="@/assets/images/icon-options.svg"
+                    class="icon-chevron icon-options"
+                  />
+                </b-button>
+                <options-popover :id="data.index" />
+                <tome-modal
+                  :id="`edit-tome${data.index}`"
+                  :title="'Настройка виртуального тома'"
+                  :action="editTome"
+                  :index="data.index"
+                  :item="items_2[data.index]"
+                />
+              </b-col>
+            </b-row>
+          </template>
+        </b-table>
+        <div class="microcode-container">
+          <span class="bold-16px">{{ $t('RAID.microcode') }}</span>
+          <popover
+            id="popover-reactive-1"
+            description="RAID.microcode_update"
+            popup="RAID.microcode_popoveer"
+            button="global.action.refresh"
+            :is-microcode-drivers="true"
+          />
+        </div>
+      </page-section>
+    </div>
+    <tome-modal
+      :id="'add-tome-images'"
+      :title="'Новый виртуальный том'"
+      :action="createTome"
+    />
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import Popover from '@/components/Global/Popover';
+import ApplySettingsPopover from '@/components/Global/SilaComponents/ApplySettingsPopover';
+import DataTabs from '@/components/Global/SilaComponents/DataTabs';
+
+import iconChevron from '@carbon/icons-vue/es/chevron--down/16';
+import ActionSettingsPopover from './ActionSettingsPopover';
+import OptionsPopover from './OptionsPopover';
+import TomeModal from './TomeModal';
+import { items, items_2 } from './helpers';
+
+export default {
+  components: {
+    PageTitle,
+    PageSection,
+    DataTabs,
+    Popover,
+    ApplySettingsPopover,
+    ActionSettingsPopover,
+    OptionsPopover,
+    TomeModal,
+  },
+  data() {
+    return {
+      items,
+      items_2,
+      iconChevron,
+      applyType: 'reload',
+      currentRaidSlot: 1,
+      titleModal: '',
+      editIndex: null,
+      raidSlots: [
+        { id: 1, name: 'Контроллер 1' },
+        { id: 2, name: 'Контроллер 2' },
+        { id: 3, name: 'Контроллер 3' },
+      ],
+      fields: [
+        {
+          key: 'parametr',
+          label: 'Имя',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: `bootstrap-rounded-table__column-first
+              settings-table`,
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'value',
+          label: 'Текущее значение',
+          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: 'action',
+          label: 'Действие',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
+      fields_2: [
+        {
+          key: 'name',
+          label: 'Параметр',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-first',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'type',
+          label: 'Значение',
+          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: 'size',
+          label: 'Значение',
+          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: 'action',
+          label: 'Значение',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
+    };
+  },
+  methods: {
+    switchRaidSlot(period) {
+      this.currentRaidSlot = period;
+    },
+    appalyOnReload() {
+      this.applyType = 'reload';
+    },
+    appalyOption1() {
+      this.applyType = 'option1';
+    },
+    appalyOption2() {
+      this.applyType = 'option2';
+    },
+    createTome() {
+      console.log('Новый том создан');
+    },
+    editTome(index) {
+      console.log('Том изменен');
+      console.log(index);
+    },
+  },
+};
+</script>
+<style lang="scss">
+.settings-table {
+  width: 35%;
+}
+</style>
+
+<style lang="scss" scoped>
+.bootstrap-table__section {
+  margin-bottom: 24px;
+}
+
+.bold-16px {
+  display: block;
+  margin: 25px 0 16px 0;
+}
+
+.settings-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.apply-button {
+  width: 245px;
+  height: 36px;
+}
+
+.popover-action-ractive {
+  margin: 0 0 0 83%;
+}
+
+.popover-option-ractive {
+  margin: 0 0 0 70%;
+}
+
+.apply-button__lun {
+  width: 245px;
+  height: 36px;
+  margin-left: auto;
+}
+
+.microcode-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/views/SILA/RAID/Settings/TomeModal.vue b/src/views/SILA/RAID/Settings/TomeModal.vue
new file mode 100644
index 00000000..c77f4c13
--- /dev/null
+++ b/src/views/SILA/RAID/Settings/TomeModal.vue
@@ -0,0 +1,179 @@
+<template>
+  <b-modal :id="id" class="modal-images" hide-footer>
+    <template #modal-title>
+      <span class="semi-bold-20px">{{ title }}</span>
+    </template>
+    <div class="modal-body">
+      <label class="regular-12px tretiatry" for="name"> Имя </label>
+      <b-form-input
+        id="name"
+        v-model="tomeName"
+        placeholder="Название тома"
+        type="text"
+        class="form-control form-input"
+      >
+      </b-form-input>
+
+      <form-control>
+        <label class="regular-12px tretiatry type-select-label" for="type"
+          >Тип</label
+        >
+        <b-form-select
+          id="type"
+          v-model="tomeType"
+          :options="tomeTypes"
+          class="select-connection regular-14px"
+        />
+      </form-control>
+
+      <form-control>
+        <label class="regular-12px tretiatry driver-select-label" for="driver"
+          >Физический накопитель</label
+        >
+        <b-form-select
+          id="driver"
+          v-model="tomeDriver"
+          :options="tomeDrivers"
+          class="select-connection regular-14px"
+        />
+      </form-control>
+
+      <label class="regular-12px tretiatry" for="size"> Размер Мб </label>
+      <b-form-input
+        id="size"
+        v-model="tomeSize"
+        placeholder="Размер Тома"
+        type="text"
+        class="form-control form-input"
+      >
+      </b-form-input>
+      <b-button class="upload-button" variant="primary" @click="action(index)">
+        {{ item ? $t('global.action.save') : $t('global.action.addTome') }}
+      </b-button>
+    </div>
+  </b-modal>
+</template>
+<script>
+import { required } from 'vuelidate/lib/validators';
+import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+
+export default {
+  mixins: [VuelidateMixin],
+  props: {
+    id: {
+      type: String,
+      default: null,
+    },
+    title: {
+      type: String,
+      default: null,
+    },
+    index: {
+      type: Number,
+      default: null,
+    },
+    action: {
+      type: Function,
+      default: null,
+    },
+    item: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      tomeName: '',
+      tomeSize: '',
+      tomeType: 1,
+      tomeTypes: [
+        { value: 1, text: 'RAID-0' },
+        { value: 2, text: 'RAID-1' },
+      ],
+      tomeDriver: 1,
+      tomeDrivers: [
+        { value: 1, text: 'Накопитель 1' },
+        { value: 2, text: 'Накопитель 2' },
+      ],
+    };
+  },
+  mounted() {
+    this.tomeName = this.item.name;
+    this.tomeSize = this.item.size;
+  },
+  validations: {
+    userInfo: {
+      username: {
+        required,
+      },
+      password: {
+        required,
+      },
+    },
+  },
+};
+</script>
+<style lang="scss">
+.modal-content {
+  border-radius: 16px;
+  width: 480px;
+}
+.modal-header {
+  border-bottom: none;
+}
+</style>
+<style lang="scss" scoped>
+.form-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;
+}
+
+.modal-body {
+  width: 446px;
+}
+
+.caption-12px,
+.regular-12px {
+  padding-left: 10px;
+}
+
+.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');
+}
+
+.type-select-label {
+  position: absolute;
+  top: 25%;
+}
+
+.driver-select-label {
+  position: absolute;
+  top: 44%;
+  left: 4%;
+}
+
+.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: 40px;
+  margin: 0 auto 10px;
+}
+</style>
diff --git a/src/views/SILA/RAID/Settings/helpers.js b/src/views/SILA/RAID/Settings/helpers.js
new file mode 100644
index 00000000..5727102a
--- /dev/null
+++ b/src/views/SILA/RAID/Settings/helpers.js
@@ -0,0 +1,62 @@
+export const items = [
+  {
+    parametr: 'Режим контроллера',
+    value: 'RAID',
+    action: 'Автоматически',
+  },
+  {
+    parametr: 'Режим чтения патруля',
+    value: 'Автоматически',
+    action: 'Действие',
+  },
+  {
+    parametr: 'Действие в режиме ручного патрулирования',
+    value: 'Запущен',
+    action: 'Действие',
+  },
+  {
+    parametr: 'Название атрибута',
+    value: 'Запущен',
+    action: 'Действие',
+  },
+  {
+    parametr: 'Название атрибута',
+    value: 'Запущен',
+    action: 'Действие',
+  },
+  {
+    parametr: 'Название атрибута',
+    value: 'Запущен',
+    action: 'Действие',
+  },
+  {
+    parametr: 'Название атрибута',
+    value: '30%',
+    action: '30',
+  },
+  {
+    parametr: 'Название атрибута',
+    value: '30%',
+    action: '30',
+  },
+  {
+    parametr: 'Название атрибута',
+    value: '30%',
+    action: '30',
+  },
+];
+
+export const items_2 = [
+  {
+    name: 'Том 1',
+    type: 'RAID-0',
+    size: '100 125 Мб',
+    action: 'Загружен',
+  },
+  {
+    name: 'Том 2',
+    type: 'RAID-1',
+    size: '200 250 Мб',
+    action: 'Загружен',
+  },
+];
diff --git a/src/views/SILA/RAID/Settings/index.js b/src/views/SILA/RAID/Settings/index.js
new file mode 100644
index 00000000..535dbe3a
--- /dev/null
+++ b/src/views/SILA/RAID/Settings/index.js
@@ -0,0 +1 @@
+export { default } from './RAIDSettingsPage.vue';
diff --git a/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue b/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue
new file mode 100644
index 00000000..db2407d5
--- /dev/null
+++ b/src/views/SILA/RAID/Specification/RAIDSpecificationPage.vue
@@ -0,0 +1,267 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="main-container">
+      <data-tabs
+        :slots="raidSlots"
+        :switch-tab="switchRaidSlot"
+        :current-tab="currentRaidSlot"
+        :slot-width="100"
+        :slider-width="79"
+        style="margin-top: 16px"
+      />
+      <page-section class="bootstrap-table__section">
+        <b-table
+          responsive="md"
+          show-empty
+          class="bootstrap-rounded-table"
+          :items="items"
+          :fields="fields"
+          :empty-text="$t('global.table.emptyMessage')"
+        >
+          <template #cell(value)="{ index, value }">
+            <b-row v-if="index === 0">
+              <b-col>
+                <img
+                  src="@/assets/images/fans-page/working.svg"
+                  class="icon-chevron"
+                />
+                <span>
+                  {{ 'Работоспособен' }}
+                </span>
+              </b-col>
+            </b-row>
+            <b-row v-else-if="index === 7">
+              <b-col>
+                <span class="regular-12px pointer" @click="redirectDrivers">
+                  {{ value }}
+                </span>
+              </b-col>
+            </b-row>
+            <b-row v-else-if="index === 8">
+              <b-col>
+                <span class="regular-12px pointer" @click="redirectVirtual">
+                  {{ value }}
+                </span>
+              </b-col>
+            </b-row>
+            <b-row v-else>
+              <b-col>
+                <span>{{ value }}</span>
+              </b-col>
+            </b-row>
+          </template>
+        </b-table>
+      </page-section>
+      <b-button
+        v-b-toggle.toggle-collapse
+        variant="link"
+        class="collapse-button semi-bold-16px"
+      >
+        <component :is="iconChevronUp" class="icon-expand-right" />
+        {{ $t('RAID.extraParam') }}
+      </b-button>
+      <b-collapse id="toggle-collapse" class="nav-item__nav">
+        <page-section class="bootstrap-table__section">
+          <b-table
+            responsive="md"
+            class="bootstrap-table bootstrap-table__stripes"
+            :items="items_2"
+            :fields="fields_2"
+          >
+            <template #cell(value)="{ index, value }">
+              <b-row v-if="index === 0">
+                <b-col>
+                  <img
+                    src="@/assets/images/fans-page/working.svg"
+                    class="icon-chevron"
+                  />
+                  <span>
+                    {{ 'Работоспособен' }}
+                  </span>
+                </b-col>
+              </b-row>
+              <b-row v-else>
+                <b-col>
+                  <span>{{ value }}</span>
+                </b-col>
+              </b-row>
+            </template>
+          </b-table>
+        </page-section>
+      </b-collapse>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import DataTabs from '@/components/Global/SilaComponents/DataTabs';
+
+import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
+
+export default {
+  components: { PageTitle, PageSection, DataTabs },
+  data() {
+    return {
+      iconChevronUp: iconChevronUp,
+      currentRaidSlot: 1,
+      raidSlots: [
+        { id: 1, name: 'Контроллер 1' },
+        { id: 2, name: 'Контроллер 2' },
+        { id: 3, name: 'Контроллер 3' },
+      ],
+      fields: [
+        {
+          key: 'parametr',
+          label: 'Параметр',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: `bootstrap-rounded-table__column-first`,
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'value',
+          label: 'Значение',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
+      items: [
+        {
+          parametr: 'Статус',
+          value: true,
+        },
+        {
+          parametr: 'Имя',
+          value: 'RAID-контроллер 1',
+        },
+        {
+          parametr: 'Описание',
+          value: 'Встроенный',
+        },
+        {
+          parametr: 'PCI слот',
+          value: 'Информация недоступна',
+        },
+        {
+          parametr: 'Версия прошивки',
+          value: 'Информация недоступна',
+        },
+        {
+          parametr: 'Версия драйвера',
+          value: 'Информация недоступна',
+        },
+        {
+          parametr: 'Объем cache памяти, Мб',
+          value: '8 096',
+        },
+        {
+          parametr: 'Виртуальные накопители',
+          value: 'Перейти к накопителям',
+        },
+        {
+          parametr: 'Физические накопители',
+          value: 'Перейти к накопителям',
+        },
+      ],
+      fields_2: [
+        {
+          key: 'param',
+          label: '',
+          formatter: this.dataFormatter,
+          thClass: 'bootstrap-table__head_bg',
+          class: 'bootstrap-table__column-first',
+          tdClass: 'regular-12px bootstrap-table__td',
+        },
+        {
+          key: 'value',
+          label: '',
+          formatter: this.dataFormatter,
+          thClass: 'bootstrap-table__head_bg',
+          class: `bootstrap-table__column-last
+            bootstrap-table__server-param`,
+          tdClass: 'regular-12px bootstrap-table__td',
+        },
+      ],
+      items_2: [
+        {
+          param: 'Статус',
+          value: true,
+        },
+        {
+          param: 'Скорость',
+          value: 'Информация недоступна',
+        },
+        {
+          param: 'PCI Vendor ID',
+          value: 'Информация недоступна',
+        },
+        {
+          param: 'Скорость',
+          value: 'Информация недоступна',
+        },
+        {
+          param: 'PCI Vendor ID',
+          value: 'Информация недоступна',
+        },
+      ],
+    };
+  },
+  methods: {
+    switchRaidSlot(period) {
+      this.currentRaidSlot = period;
+    },
+    redirectDrivers() {
+      this.$router.push('/drivers-static');
+    },
+    redirectVirtual() {
+      this.$router.push('/virtual-drivers');
+    },
+  },
+};
+</script>
+<style lang="scss">
+.bootstrap-table__stripes tr:nth-of-type(even) {
+  background-color: rgb(255 255 255);
+}
+.bootstrap-table__head_bg {
+  border-top: none;
+  display: none;
+}
+
+.bootstrap-table__column-first {
+  border-right: 1px solid rgba(26, 62, 91, 0.1);
+  border-top: none;
+}
+
+.bootstrap-table__column-last {
+  border-top: none;
+}
+
+.bootstrap-table__td {
+  border-top: 1px solid rgba(26, 62, 91, 0.1);
+}
+</style>
+
+<style lang="scss" scoped>
+.bootstrap-table__section {
+  margin-bottom: 24px;
+}
+
+.bold-16px {
+  display: block;
+  margin: 25px 0 16px 0;
+}
+
+.pointer {
+  color: $red-brand-primary;
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/SILA/RAID/Specification/index.js b/src/views/SILA/RAID/Specification/index.js
new file mode 100644
index 00000000..a040cff4
--- /dev/null
+++ b/src/views/SILA/RAID/Specification/index.js
@@ -0,0 +1 @@
+export { default } from './RAIDSpecificationPage.vue';
diff --git a/src/views/SILA/VirtualDrivers/VirtualDriversPage.vue b/src/views/SILA/VirtualDrivers/VirtualDriversPage.vue
new file mode 100644
index 00000000..bd82757f
--- /dev/null
+++ b/src/views/SILA/VirtualDrivers/VirtualDriversPage.vue
@@ -0,0 +1,138 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="main-container">
+      <page-section class="bootstrap-table__section info_section">
+        <span class="bold-16px">{{ $t('global.table.info') }}</span>
+      </page-section>
+      <data-tabs
+        :slots="memorySlots"
+        :switch-tab="switchMemorySlot"
+        :current-tab="currentMemorySlot"
+        :slot-width="180"
+        :slider-width="156"
+      />
+      <page-section class="bootstrap-table__section info_section">
+        <b-table
+          responsive="md"
+          show-empty
+          class="bootstrap-rounded-table"
+          :items="items"
+          :fields="fields"
+          :empty-text="$t('global.table.emptyMessage')"
+        >
+        </b-table>
+        <div class="microcode-container">
+          <span class="bold-16px">{{
+            $t('SystemDescription.microcodeDrivers')
+          }}</span>
+          <popover
+            id="popover-reactive-1"
+            description="SystemDescription.reloadMicrocodeDrivers"
+            popup="SystemDescription.reloadMicrocodeDrivers"
+            button="global.action.refresh"
+            :is-microcode-drivers="true"
+          />
+        </div>
+      </page-section>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import PageSection from '@/components/Global/PageSection';
+import DataTabs from '@/components/Global/SilaComponents/DataTabs';
+import Popover from '@/components/Global/Popover';
+
+export default {
+  components: { PageTitle, PageSection, DataTabs, Popover },
+  data() {
+    return {
+      currentMemorySlot: 1,
+      memorySlots: [
+        { id: 1, name: 'Виртуальный накопитель 1' },
+        { id: 2, name: 'Виртуальный накопитель 2' },
+        { id: 3, name: 'Виртуальный накопитель 3' },
+        { id: 4, name: 'Виртуальный накопитель 4' },
+        { id: 5, name: 'Виртуальный накопитель 5' },
+        { id: 6, name: 'Виртуальный накопитель 6' },
+        { id: 7, name: 'Виртуальный накопитель 7' },
+        { id: 8, name: 'Виртуальный накопитель 8' },
+      ],
+      fields: [
+        {
+          key: 'parametr',
+          label: 'Параметр',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: `bootstrap-rounded-table__column-first
+            memory-table-col-first`,
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'value',
+          label: 'Значение',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: 'bootstrap-rounded-table__column-last',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
+      items: [
+        {
+          parametr: 'Текущий статус',
+          value: 'Готов',
+        },
+        {
+          parametr: 'Номинальная емкость',
+          value: '1 024 000 Мб',
+        },
+        {
+          parametr: 'Тип избыточности',
+          value: 'RAID',
+        },
+        {
+          parametr: 'Входящие в состав физические накопители',
+          value: 'Накопитель 1, Накопитель 2, Накопитель 3',
+        },
+      ],
+    };
+  },
+  methods: {
+    switchMemorySlot(period) {
+      this.currentMemorySlot = period;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.memory-table-col-first {
+  width: 50%;
+}
+</style>
+
+<style lang="scss" scoped>
+.bootstrap-table__section {
+  margin-bottom: 24px;
+}
+.info_section {
+  margin-bottom: 0px;
+}
+
+.bold-16px {
+  display: block;
+  margin: 25px 0 16px 0;
+}
+
+.microcode-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/views/SILA/VirtualDrivers/index.js b/src/views/SILA/VirtualDrivers/index.js
new file mode 100644
index 00000000..23cd6fe1
--- /dev/null
+++ b/src/views/SILA/VirtualDrivers/index.js
@@ -0,0 +1 @@
+export { default } from './VirtualDriversPage.vue';
diff --git a/src/views/SystemDescription/Network/InventoryIPv4Settings.vue b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue
index b96c9251..94845854 100644
--- a/src/views/SystemDescription/Network/InventoryIPv4Settings.vue
+++ b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue
@@ -9,7 +9,32 @@
       :empty-text="$t('global.table.emptyMessage')"
     >
       <template #cell(value)="data">
-        <b-row v-if="!(typeof data.value === 'boolean')">
+        <b-row v-if="data.index === 0">
+          <b-col>
+            <span>
+              {{ data.value ? 'Включен' : 'Выключен' }}
+            </span>
+          </b-col>
+          <b-col>
+            <b-button
+              :id="`popover-choice-${data.index}`"
+              class="popover-option-ractive"
+              variant="toogle-popover"
+            >
+              <img :is="iconChevron" class="icon-chevron" />
+            </b-button>
+            <two-chioce-popover
+              :id="data.index"
+              fitst-option="Включен"
+              second-option="Выключен"
+              :chosen-option="chosenOption"
+              :first-action="setOn"
+              :second-action="setOff"
+              placement="leftbottom"
+            />
+          </b-col>
+        </b-row>
+        <b-row v-else>
           <b-form-input
             v-if="systems[data.index].isEdit"
             ref="input"
@@ -37,34 +62,11 @@
             <img
               v-else
               src="@/assets/images/icon-edit.svg"
-              class="system-network-table__icon pointer"
+              class="system-network-table__icon icon-edit pointer"
               @click="editCellHandler(data)"
             />
           </b-col>
         </b-row>
-        <b-row v-else class="popup-container">
-          <b-col v-if="data.value">{{ 'Включен' }}</b-col>
-          <b-col v-else>{{ 'Выключен' }}</b-col>
-          <div
-            v-if="isActive"
-            class="popup"
-            :class="{ popup_active: isActive }"
-          >
-            <button class="popup-button popup-on medium-12px" @click="DHCPon">
-              <span class="popup-text">Включен</span>
-            </button>
-            <button class="popup-button popup-off medium-12px" @click="DHCPoff">
-              <span class="popup-text">Выключен</span>
-            </button>
-          </div>
-          <b-col class="system-network-table__icon-col">
-            <img
-              :is="iconChevron"
-              class="pointer"
-              @click="isActive = !isActive"
-            />
-          </b-col>
-        </b-row>
       </template>
     </b-table>
   </page-section>
@@ -75,18 +77,20 @@ import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import PageSection from '@/components/Global/PageSection';
 import iconChevron from '@carbon/icons-vue/es/chevron--down/16';
+import TwoChiocePopover from '@/components/Global/SilaComponents/TwoChiocePopover';
 import TableRowExpandMixin, {
   expandRowLabel,
 } from '@/components/Mixins/TableRowExpandMixin';
 
 export default {
-  components: { PageSection },
+  components: { PageSection, TwoChiocePopover },
   mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
   data() {
     return {
       selectedCell: null,
       isActive: false,
       isIpInvalid: false,
+      chosenOption: 'Выключен',
       fields: [
         {
           key: 'param',
@@ -174,6 +178,14 @@ export default {
         ipCheck
       );
     },
+    setOn() {
+      this.chosenOption = 'Включен';
+      this.systems[0].value = true;
+    },
+    setOff() {
+      this.chosenOption = 'Выключен';
+      this.systems[0].value = false;
+    },
     DHCPoff() {
       this.systems[0].value = false;
       this.isActive = false;
@@ -196,10 +208,8 @@ export default {
 
 .system-network-table__icon-col {
   max-width: 20%;
-  margin: 0 5px 0 auto !important;
 }
 </style>
-
 <style lang="scss" scoped>
 .row {
   align-items: baseline;
@@ -209,10 +219,6 @@ export default {
   margin: 0 !important;
 }
 
-.pointer {
-  cursor: pointer;
-}
-
 .close_icon {
   margin-left: 5px;
 }
@@ -252,7 +258,6 @@ export default {
   margin: 4px;
   border-radius: 8px;
   border: none;
-  cursor: pointer;
 
   display: flex;
   align-items: center;
@@ -286,4 +291,9 @@ export default {
 .popup_active {
   visibility: visible;
 }
+
+.popover-option-ractive {
+  display: block;
+  margin: -6px 9px 0 auto;
+}
 </style>
diff --git a/src/views/SystemDescription/Network/InventoryIPv6Settings.vue b/src/views/SystemDescription/Network/InventoryIPv6Settings.vue
index 3de1c414..3f47b1fd 100644
--- a/src/views/SystemDescription/Network/InventoryIPv6Settings.vue
+++ b/src/views/SystemDescription/Network/InventoryIPv6Settings.vue
@@ -195,10 +195,6 @@ export default {
   margin: 0 !important;
 }
 
-.edit {
-  cursor: pointer;
-}
-
 .close_icon {
   margin-left: 5px;
 }
diff --git a/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue b/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue
index a40edb41..03cd1356 100644
--- a/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue
+++ b/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue
@@ -119,28 +119,6 @@ export default {
 };
 </script>
 <style lang="scss">
-.bootstrap-table__stripes tr:nth-of-type(even) {
-  background-color: rgb(255 255 255);
-}
-
-.bootstrap-table__head_bg {
-  border-top: none;
-  display: none;
-}
-
-.bootstrap-table__column-first {
-  border-right: 1px solid rgba(26, 62, 91, 0.1);
-  border-top: none;
-}
-
-.bootstrap-table__column-last {
-  border-top: none;
-}
-
-.bootstrap-table__td {
-  border-top: 1px solid rgba(26, 62, 91, 0.1);
-}
-
 .bootstrap-table__server-param {
   width: 30%;
 }