Add pages: BMC, Ipv4/6, console settings. Fix routes: add console mixin, disable fullscreen console, add global styles.

56 files changed, 3594 insertions, 174 deletions

diff --git a/src/assets/images/Radiobutton.svg b/src/assets/images/Radiobutton.svg
new file mode 100644
index 00000000..9647a19f
--- /dev/null
+++ b/src/assets/images/Radiobutton.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 12C10.2091 12 12 10.2091 12 8C12 5.79086 10.2091 4 8 4C5.79086 4 4 5.79086 4 8C4 10.2091 5.79086 12 8 12Z" fill="#E11717"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM14.4 8C14.4 11.5346 11.5346 14.4 8 14.4C4.46538 14.4 1.6 11.5346 1.6 8C1.6 4.46538 4.46538 1.6 8 1.6C11.5346 1.6 14.4 4.46538 14.4 8Z" fill="#E11717"/>
+</svg>
diff --git a/src/assets/images/edit-no.svg b/src/assets/images/edit-no.svg
new file mode 100644
index 00000000..4cb0d8e8
--- /dev/null
+++ b/src/assets/images/edit-no.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2496 0.258431C10.9246 -0.0665688 10.3996 -0.0665688 10.0746 0.258431L5.99961 4.3251L1.92461 0.250098C1.59961 -0.0749023 1.07461 -0.0749023 0.749609 0.250098C0.424609 0.575098 0.424609 1.1001 0.749609 1.4251L4.82461 5.5001L0.749609 9.5751C0.424609 9.9001 0.424609 10.4251 0.749609 10.7501C1.07461 11.0751 1.59961 11.0751 1.92461 10.7501L5.99961 6.6751L10.0746 10.7501C10.3996 11.0751 10.9246 11.0751 11.2496 10.7501C11.5746 10.4251 11.5746 9.9001 11.2496 9.5751L7.17461 5.5001L11.2496 1.4251C11.5663 1.10843 11.5663 0.575098 11.2496 0.258431Z" fill="#FF4141"/>
+</svg>
diff --git a/src/assets/images/edit-ok.svg b/src/assets/images/edit-ok.svg
new file mode 100644
index 00000000..2534daca
--- /dev/null
+++ b/src/assets/images/edit-ok.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.49993 9.0001L1.58327 6.08343C1.25827 5.75843 0.741602 5.75843 0.416602 6.08343C0.0916016 6.40843 0.0916016 6.9251 0.416602 7.2501L3.90827 10.7418C4.23327 11.0668 4.75827 11.0668 5.08327 10.7418L13.9166 1.91676C14.2416 1.59176 14.2416 1.0751 13.9166 0.750098C13.5916 0.425098 13.0749 0.425098 12.7499 0.750098L4.49993 9.0001Z" fill="#4EBF19"/>
+</svg>
diff --git a/src/assets/images/icon-edit.svg b/src/assets/images/icon-edit.svg
new file mode 100644
index 00000000..9897aacd
--- /dev/null
+++ b/src/assets/images/icon-edit.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.18244 11.25H0.75V9.81101L7.37231 3.1887L8.81106 4.62745L2.18244 11.25ZM9.87196 4.62769L2.59297 11.9C2.53298 11.9667 2.44633 12 2.35967 12H0.333287C0.146646 12 0 11.8534 0 11.6667V9.64033C0 9.54701 0.0333288 9.46702 0.0999862 9.40036L7.37231 2.12804L9.87196 4.62769ZM11.2143 2.22469L10.5852 2.8538L9.1462 1.4148L9.77531 0.785698L11.2143 2.22469ZM10.5852 3.91446L11.805 2.69463C12.065 2.43466 12.065 2.01472 11.805 1.75476L10.2452 0.194973C9.98528 -0.064991 9.56534 -0.064991 9.30537 0.194973L8.08554 1.4148L10.5852 3.91446Z" fill="#0C1C29" fill-opacity="0.6"/>
+</svg>
diff --git a/src/assets/images/icon-reload-red.svg b/src/assets/images/icon-reload-red.svg
new file mode 100644
index 00000000..c6e8e9ff
--- /dev/null
+++ b/src/assets/images/icon-reload-red.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="14" viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.0417 3.95837L12.7167 6.28337C12.45 6.55004 12.6333 7.00004 13.0083 7.00004H14.5C14.5 9.75837 12.2583 12 9.49998 12C8.84165 12 8.19998 11.875 7.62498 11.6334C7.32498 11.5084 6.98332 11.6 6.75832 11.825C6.33332 12.25 6.48332 12.9667 7.04165 13.1917C7.79998 13.5 8.63332 13.6667 9.49998 13.6667C13.1833 13.6667 16.1667 10.6834 16.1667 7.00004H17.6583C18.0333 7.00004 18.2167 6.55004 17.95 6.29171L15.625 3.96671C15.4667 3.80004 15.2 3.80004 15.0417 3.95837V3.95837ZM4.49998 7.00004C4.49998 4.24171 6.74165 2.00004 9.49998 2.00004C10.1583 2.00004 10.8 2.12504 11.375 2.36671C11.675 2.49171 12.0167 2.40004 12.2417 2.17504C12.6667 1.75004 12.5167 1.03337 11.9583 0.808374C11.2 0.500041 10.3667 0.333374 9.49998 0.333374C5.81665 0.333374 2.83332 3.31671 2.83332 7.00004H1.34165C0.966651 7.00004 0.783318 7.45004 1.04998 7.70837L3.37498 10.0334C3.54165 10.2 3.79998 10.2 3.96665 10.0334L6.29165 7.70837C6.54998 7.45004 6.36665 7.00004 5.99165 7.00004H4.49998V7.00004Z" fill="#E11717"/>
+</svg>
diff --git a/src/assets/images/popups/red-sign.svg b/src/assets/images/popups/red-sign.svg
new file mode 100644
index 00000000..fdc2e146
--- /dev/null
+++ b/src/assets/images/popups/red-sign.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.99992 0.333496C3.31992 0.333496 0.333252 3.32016 0.333252 7.00016C0.333252 10.6802 3.31992 13.6668 6.99992 13.6668C10.6799 13.6668 13.6666 10.6802 13.6666 7.00016C13.6666 3.32016 10.6799 0.333496 6.99992 0.333496ZM6.99992 10.3335C6.63325 10.3335 6.33325 10.0335 6.33325 9.66683V7.00016C6.33325 6.6335 6.63325 6.3335 6.99992 6.3335C7.36659 6.3335 7.66659 6.6335 7.66659 7.00016V9.66683C7.66659 10.0335 7.36659 10.3335 6.99992 10.3335ZM7.66659 4.3335C7.66659 4.70169 7.36811 5.00016 6.99992 5.00016C6.63173 5.00016 6.33325 4.70169 6.33325 4.3335C6.33325 3.96531 6.63173 3.66683 6.99992 3.66683C7.36811 3.66683 7.66659 3.96531 7.66659 4.3335Z" fill="#E11717"/>
+</svg>
diff --git a/src/assets/images/popups/x-icon.svg b/src/assets/images/popups/x-icon.svg
new file mode 100644
index 00000000..74d403f6
--- /dev/null
+++ b/src/assets/images/popups/x-icon.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2501 0.758431C10.9251 0.433431 10.4001 0.433431 10.0751 0.758431L6.0001 4.8251L1.9251 0.750098C1.6001 0.425098 1.0751 0.425098 0.750098 0.750098C0.425098 1.0751 0.425098 1.6001 0.750098 1.9251L4.8251 6.0001L0.750098 10.0751C0.425098 10.4001 0.425098 10.9251 0.750098 11.2501C1.0751 11.5751 1.6001 11.5751 1.9251 11.2501L6.0001 7.1751L10.0751 11.2501C10.4001 11.5751 10.9251 11.5751 11.2501 11.2501C11.5751 10.9251 11.5751 10.4001 11.2501 10.0751L7.1751 6.0001L11.2501 1.9251C11.5668 1.60843 11.5668 1.0751 11.2501 0.758431Z" fill="#040A0F" fill-opacity="0.6"/>
+</svg>
diff --git a/src/assets/images/textarea-buttons/button-icon-bold.svg b/src/assets/images/textarea-buttons/button-icon-bold.svg
new file mode 100644
index 00000000..53e67502
--- /dev/null
+++ b/src/assets/images/textarea-buttons/button-icon-bold.svg
@@ -0,0 +1,3 @@
+<svg width="11" height="14" viewBox="0 0 11 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.6 6.79C9.57 6.12 10.25 5.02 10.25 4C10.25 1.74 8.5 0 6.25 0H1C0.45 0 0 0.45 0 1V13C0 13.55 0.45 14 1 14H6.78C8.85 14 10.74 12.31 10.75 10.23C10.76 8.7 9.9 7.39 8.6 6.79ZM3 2.5H6C6.83 2.5 7.5 3.17 7.5 4C7.5 4.83 6.83 5.5 6 5.5H3V2.5ZM6.5 11.5H3V8.5H6.5C7.33 8.5 8 9.17 8 10C8 10.83 7.33 11.5 6.5 11.5Z" fill="#626773"/>
+</svg>
diff --git a/src/assets/images/textarea-buttons/button-icon-crossline.svg b/src/assets/images/textarea-buttons/button-icon-crossline.svg
new file mode 100644
index 00000000..347eee6f
--- /dev/null
+++ b/src/assets/images/textarea-buttons/button-icon-crossline.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 15C10.1 15 11 14.1 11 13V12H7V13C7 14.1 7.9 15 9 15ZM2 1.5C2 2.33 2.67 3 3.5 3H7V6H11V3H14.5C15.33 3 16 2.33 16 1.5C16 0.67 15.33 0 14.5 0H3.5C2.67 0 2 0.67 2 1.5ZM1 10H17C17.55 10 18 9.55 18 9C18 8.45 17.55 8 17 8H1C0.45 8 0 8.45 0 9C0 9.55 0.45 10 1 10Z" fill="#626773"/>
+</svg>
diff --git a/src/assets/images/textarea-buttons/button-icon-cursive.svg b/src/assets/images/textarea-buttons/button-icon-cursive.svg
new file mode 100644
index 00000000..4632587d
--- /dev/null
+++ b/src/assets/images/textarea-buttons/button-icon-cursive.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 1.5C4 2.33 4.67 3 5.5 3H6.21L2.79 11H1.5C0.67 11 0 11.67 0 12.5C0 13.33 0.67 14 1.5 14H6.5C7.33 14 8 13.33 8 12.5C8 11.67 7.33 11 6.5 11H5.79L9.21 3H10.5C11.33 3 12 2.33 12 1.5C12 0.67 11.33 0 10.5 0H5.5C4.67 0 4 0.67 4 1.5Z" fill="#626773"/>
+</svg>
diff --git a/src/assets/images/textarea-buttons/button-icon-link.svg b/src/assets/images/textarea-buttons/button-icon-link.svg
new file mode 100644
index 00000000..41e44097
--- /dev/null
+++ b/src/assets/images/textarea-buttons/button-icon-link.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="10" viewBox="0 0 21 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.95995 4.38C2.23995 2.91 3.61995 1.9 5.11995 1.9H8.04995C8.56995 1.9 8.99995 1.47 8.99995 0.95C8.99995 0.43 8.56995 0 8.04995 0H5.21995C2.60995 0 0.279953 1.91 0.0299532 4.51C-0.260047 7.49 2.07995 10 4.99995 10H8.04995C8.56995 10 8.99995 9.57 8.99995 9.05C8.99995 8.53 8.56995 8.1 8.04995 8.1H4.99995C3.08995 8.1 1.57995 6.36 1.95995 4.38ZM6.99995 6H13C13.55 6 14 5.55 14 5C14 4.45 13.55 4 13 4H6.99995C6.44995 4 5.99995 4.45 5.99995 5C5.99995 5.55 6.44995 6 6.99995 6ZM14.78 0H11.95C11.43 0 11 0.43 11 0.95C11 1.47 11.43 1.9 11.95 1.9H14.88C16.38 1.9 17.76 2.91 18.04 4.38C18.42 6.36 16.91 8.1 15 8.1H11.95C11.43 8.1 11 8.53 11 9.05C11 9.57 11.43 10 11.95 10H15C17.92 10 20.26 7.49 19.98 4.51C19.73 1.91 17.39 0 14.78 0Z" fill="#626773"/>
+</svg>
diff --git a/src/assets/images/textarea-buttons/button-icon-list.svg b/src/assets/images/textarea-buttons/button-icon-list.svg
new file mode 100644
index 00000000..4a3d56a5
--- /dev/null
+++ b/src/assets/images/textarea-buttons/button-icon-list.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 3H18C18.55 3 19 2.55 19 2C19 1.45 18.55 1 18 1H6C5.45 1 5 1.45 5 2C5 2.55 5.45 3 6 3ZM18 13H6C5.45 13 5 13.45 5 14C5 14.55 5.45 15 6 15H18C18.55 15 19 14.55 19 14C19 13.45 18.55 13 18 13ZM18 7H6C5.45 7 5 7.45 5 8C5 8.55 5.45 9 6 9H18C18.55 9 19 8.55 19 8C19 7.45 18.55 7 18 7ZM2.5 12H0.5C0.22 12 0 12.22 0 12.5C0 12.78 0.22 13 0.5 13H2V13.5H1.5C1.22 13.5 1 13.72 1 14C1 14.28 1.22 14.5 1.5 14.5H2V15H0.5C0.22 15 0 15.22 0 15.5C0 15.78 0.22 16 0.5 16H2.5C2.78 16 3 15.78 3 15.5V12.5C3 12.22 2.78 12 2.5 12ZM0.5 1H1V3.5C1 3.78 1.22 4 1.5 4C1.78 4 2 3.78 2 3.5V0.5C2 0.22 1.78 0 1.5 0H0.5C0.22 0 0 0.22 0 0.5C0 0.78 0.22 1 0.5 1ZM2.5 6H0.5C0.22 6 0 6.22 0 6.5C0 6.78 0.22 7 0.5 7H1.8L0.12 8.96C0.0399999 9.05 0 9.17 0 9.28V9.5C0 9.78 0.22 10 0.5 10H2.5C2.78 10 3 9.78 3 9.5C3 9.22 2.78 9 2.5 9H1.2L2.88 7.04C2.96 6.95 3 6.83 3 6.72V6.5C3 6.22 2.78 6 2.5 6Z" fill="#626773"/>
+</svg>
diff --git a/src/assets/images/textarea-buttons/button-icon-number-list.svg b/src/assets/images/textarea-buttons/button-icon-number-list.svg
new file mode 100644
index 00000000..01533066
--- /dev/null
+++ b/src/assets/images/textarea-buttons/button-icon-number-list.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 6.5C1.17 6.5 0.5 7.17 0.5 8C0.5 8.83 1.17 9.5 2 9.5C2.83 9.5 3.5 8.83 3.5 8C3.5 7.17 2.83 6.5 2 6.5ZM2 0.5C1.17 0.5 0.5 1.17 0.5 2C0.5 2.83 1.17 3.5 2 3.5C2.83 3.5 3.5 2.83 3.5 2C3.5 1.17 2.83 0.5 2 0.5ZM2 12.5C1.17 12.5 0.5 13.18 0.5 14C0.5 14.82 1.18 15.5 2 15.5C2.82 15.5 3.5 14.82 3.5 14C3.5 13.18 2.83 12.5 2 12.5ZM6 15H18C18.55 15 19 14.55 19 14C19 13.45 18.55 13 18 13H6C5.45 13 5 13.45 5 14C5 14.55 5.45 15 6 15ZM6 9H18C18.55 9 19 8.55 19 8C19 7.45 18.55 7 18 7H6C5.45 7 5 7.45 5 8C5 8.55 5.45 9 6 9ZM5 2C5 2.55 5.45 3 6 3H18C18.55 3 19 2.55 19 2C19 1.45 18.55 1 18 1H6C5.45 1 5 1.45 5 2Z" fill="#626773"/>
+</svg>
diff --git a/src/assets/images/textarea-buttons/button-icon-underline.svg b/src/assets/images/textarea-buttons/button-icon-underline.svg
new file mode 100644
index 00000000..61801b1b
--- /dev/null
+++ b/src/assets/images/textarea-buttons/button-icon-underline.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.79 13.95C10.82 13.56 13 10.84 13 7.79V1.25C13 0.56 12.44 0 11.75 0C11.06 0 10.5 0.56 10.5 1.25V7.9C10.5 9.57 9.37 11.09 7.73 11.42C5.48 11.89 3.5 10.17 3.5 8V1.25C3.5 0.56 2.94 0 2.25 0C1.56 0 1 0.56 1 1.25V8C1 11.57 4.13 14.42 7.79 13.95ZM0 17C0 17.55 0.45 18 1 18H13C13.55 18 14 17.55 14 17C14 16.45 13.55 16 13 16H1C0.45 16 0 16.45 0 17Z" fill="#626773"/>
+</svg>
diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss
index dcf563d6..8281ff52 100644
--- a/src/assets/styles/bmc/custom/_base.scss
+++ b/src/assets/styles/bmc/custom/_base.scss
@@ -1,26 +1,22 @@
-// dt,
-// legend,
-// label {
-//   color: gray("800");
-//   font-size: 14px;
-//   font-weight: 400;
-//   line-height: 1.4285;
-// }
-
-
-
-h1,
-.h1 {
-  font-size: 2.625rem;
-  font-weight: 300;
-  line-height: 1.238;
+body {
+  overflow-y: hidden;
 }
 
-h2,
-.h2 {
-  font-size: 2.25rem;
-  font-weight: 300;
-  line-height: 1.3333;
+.main-container {
+  overflow-y: overlay;
+  height: calc(100vh - 167px);
+  &::-webkit-scrollbar {
+    margin-top: $header-height;
+    position: absolute;
+    width: 10px;
+  }
+  &::-webkit-scrollbar-thumb {
+    margin-top: $header-height;
+    border: 4px solid transparent;
+    background: rgba(14, 32, 48, 0.384);
+    border-radius: 16px;
+    background-clip: content-box;
+  }
 }
 
 h3,
@@ -51,10 +47,109 @@ h6,
   line-height: 1.2857;
 }
 
-.text__h1 {
+.regular-12px {
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: $text-primary;
+    &.underline {
+      text-decoration: underline;
+    }
+    &.tretiatry {
+      color: $text-tretiatry;
+    }
+}
+
+.light-12px {
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: 16px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: $text-secondary;
+}
+
+.semi-bold-12px {
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 16px;
+  letter-spacing: 0em;
+  text-align: left;
+}
+
+.semi-bold-12px__caps {
+  font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 16px;
+    letter-spacing: 0em;
+    text-align: left;
+    text-transform: uppercase;
+    color: $text-primary !important;
+    &:hover {
+      color: $text-primary !important;
+    }
+}
+
+.bold-12px__caps {
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 16px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: $text-secondary;
+  text-transform: uppercase;
+}
+
+.medium-12px {
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: $text-primary;
+}
+
+.semi-bold-16px {
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  color: $text-primary;
+}
+
+.bold-16px__caps {
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+  letter-spacing: 0em;
+  text-align: left;
+  text-transform: uppercase;
+  color: $text-secondary;
+}
+
+
+.bold-24px {
   font-family: Inter;
   font-style: normal;
   font-weight: bold;
+  font-weight: 700;
   font-size: 24px;
   line-height: 28px;
   color: $text-primary;
@@ -78,4 +173,12 @@ h6,
   font-size: 12px;
   line-height: 16px;
   color: $login-page-description-color;
+}
+
+.icon-expand {
+  height: 1.2rem;
+  width: 1.2rem;
+  float: right;
+  transition: 0.3s linear;
+  margin: $spacer/4 35px 0 auto;
 }
\ 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 c80c62a6..1afcac0b 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -61,7 +61,7 @@
 
 // Global style for all button link
 .btn-link {
-  font-weight: $headings-font-weight;
+  // font-weight: $headings-font-weight;
   color: $text-primary;
   text-decoration: none !important;
   &:hover {
@@ -79,6 +79,12 @@
   &:disabled {
     box-shadow: $btn-focus-box-shadow;
   }
+  &.collapsed {
+    .icon-expand {
+      transform: rotate(180deg);
+      transition: 0.3s linear;
+    }
+  }
 }
 
 // Icon only buttons
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 693b5e0b..9e30359c 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -23,14 +23,14 @@
 
 .custom-select,
 .form-control {
-  &:active {
+  // &:active {
     // border: 1px solid $primary!important;
-  }
-  &:focus {
+  // }
+  // &:focus {
     // color: theme-color("dark");
     // background-color: gray("100");
     // box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px $primary !important;
-  }
+  // }
   &:disabled {
     background-color: gray("400");
     color: gray("600");
@@ -41,13 +41,13 @@
   }
 }
 
-.custom-select,
-.custom-control-label,
-.form-control {
-  color: theme-color("dark") !important;
-  font-size: 1rem;
-  border-radius: 8px;
-}
+// .custom-select,
+// .custom-control-label,
+// .form-control {
+  // color: theme-color("dark") !important;
+  // font-size: 1rem;
+  // border-radius: 8px;
+// }
 
 // Inverted form colors
 .form-background {
@@ -82,9 +82,13 @@
 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after,
 .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before,
 .custom-control-input:checked ~ .custom-control-label::before  {
-  background-color: $black;
-  border-color: $black;
+  border-radius: 3px;
+  background-color: $red-brand-primary;
+  border-color: $red-brand-primary;
   cursor: pointer;
+  &:focus {
+    box-shadow: none !important;
+  }
 }
 
 .custom-control {
@@ -97,8 +101,43 @@
   }
 }
 
-.custom-control-input:focus ~ .custom-control-label::before{
-  // box-shadow: 0 0 0 2px  theme-color("primary");
+.custom-switch {
+  width: 28px;
+  height: 16px;
+  margin: 0 0 0 auto;
+}
+
+.custom-switch
+.custom-control-input:focus ~ .custom-control-label::before {
+    box-shadow: none;
+}
+
+.custom-switch
+.custom-control-input ~ .custom-control-label::after {
+  border: 1px solid $faint-secondary-primary-20;
+  background: $white;
+}
+
+.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
+  border-color: $faint-secondary-primary-20;
+}
+
+.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+  background-color: rgba(4, 10, 15, 0.3);
+  border-color: $faint-secondary-primary-20;
+}
+
+.custom-switch
+.custom-control-input ~ .custom-control-label::before {
+  border: 1px solid $faint-secondary-primary-20;
+  background: rgba(4, 10, 15, 0.3);
+}
+
+.custom-switch
+.custom-control-input:checked ~ .custom-control-label::before {
+  background: $red-brand-primary;
+  border: 1px solid $faint-secondary-primary-20;
+  border-radius: 8px;
 }
 
 .custom-control-label::after {
@@ -133,3 +172,24 @@
     background-position: right 3rem bottom 50%;
   }
 }
+
+// Global style progress bar
+.progress {
+  width: 120px;
+  height: 8px;
+  border-radius: 4px;
+  background-color: $faint-secondary-primary-10;
+}
+
+.progress-bar {
+  background-color: $red-brand-primary;
+  border-radius: 4px;
+}
+
+.progress_bar_percent {
+  color: $red-brand-primary;
+}
+
+.system-control__radio label {
+  padding-top: 4px;
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_index.scss b/src/assets/styles/bmc/custom/_index.scss
index 74594e35..43b4e1a3 100644
--- a/src/assets/styles/bmc/custom/_index.scss
+++ b/src/assets/styles/bmc/custom/_index.scss
@@ -15,4 +15,5 @@
 @import "./section-divider";
 @import "./sol";
 @import "./tables";
-@import "./toasts";
\ No newline at end of file
+@import "./toasts";
+@import "./popover";
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_popover.scss b/src/assets/styles/bmc/custom/_popover.scss
new file mode 100644
index 00000000..681547d1
--- /dev/null
+++ b/src/assets/styles/bmc/custom/_popover.scss
@@ -0,0 +1,23 @@
+.b-popover {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background: $white;
+  box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  position: relative;
+  max-width: 389px;
+  width: 389px;
+  height: auto;
+}
+
+.popover-header {
+  background-color: transparent;
+  border: none;
+  padding: 24px 0px 0px 24px;
+  width: 389px;
+}
+
+.arrow {
+  visibility: hidden;
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_section-divider.scss b/src/assets/styles/bmc/custom/_section-divider.scss
index 620c9e56..79b14476 100644
--- a/src/assets/styles/bmc/custom/_section-divider.scss
+++ b/src/assets/styles/bmc/custom/_section-divider.scss
@@ -1,3 +1,7 @@
 .section-divider {
     border-bottom: 1px solid gray('400');
-  }
\ No newline at end of file
+  }
+
+.page-collapse-decorator {  
+  border-bottom: 1px solid $faint-secondary-primary-10;
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index e8b5a832..48d49b2b 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -1,16 +1,18 @@
 .table {
   position: relative;
   z-index: $zindex-dropdown;
+  border-radius: 10px;
 
   td {
-    border-top: 1px solid gray("300");
-    border-bottom: 1px solid gray("300");
-    &:first-of-type {
-      border-left: 1px solid gray("300");
-    }
-    &:last-of-type {
-      border-right: 1px solid gray("300");
-    }
+    // border-top: 1px solid gray("300");
+    // border-bottom: 1px solid gray("300");
+    // &:first-of-type {
+    //   border-left: 1px solid gray("300");
+      
+    // }
+    // &:last-of-type {
+    //   border-right: 1px solid gray("300");
+    // }
     vertical-align: middle;
 
     // Table action buttons
@@ -27,15 +29,15 @@
   // thead-light added for specificity
   .thead-light th {
     vertical-align: middle;
-    border-top: 1px solid gray("300");
+    // border-top: 1px solid gray("300");
     border-bottom: 1px solid gray("300");
-    &:first-of-type {
-      border-left: 1px solid gray("300");
-    }
-    &:last-of-type {
-      border-right: 1px solid gray("300");
-    }
-    color: theme-color("dark");
+    // &:first-of-type {
+      // border-left: 1px solid gray("300");
+    // }
+    // &:last-of-type {
+      // border-right: 1px solid gray("300");
+    // }
+    // color: theme-color("dark");
     &:focus {
       outline: none;
     }
@@ -109,7 +111,7 @@
     tr {
 
       &:not(:first-child) > td[aria-colindex='1'] {
-        border-top: 1px solid gray("300");
+        // border-top: 1px solid gray("300");
         padding-top: 0.625rem;
       }
 
@@ -165,7 +167,68 @@
     }
   }
 
-  .table.b-table.b-table-stacked-sm > tbody > tr > :first-child {
-    border-top-width: 1px;
+  // .table.b-table.b-table-stacked-sm > tbody > tr > :first-child {
+    // border-top-width: 1px;
+  // }
+}
+
+.bootstrap-table__section {
+  position: relative;
+  margin: 16px 2rem 0 2rem;
+  width: 90%;
+}
+
+.bootstrap-rounded-table {
+  border: 1px solid rgba(26, 62, 91, 0.3);
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px; 
+  border-radius: 10px; 
+}
+
+.bootstrap-rounded-table__column-first {
+  border-right: 1px solid rgba(26, 62, 91, 0.3) !important;
+  border-top: none !important;
+  border-radius: 10px 0 0 0;
+  -webkit-border-radius: 10px 0 0 0;
+  -moz-border-radius: 10px 0 0 0;
+}
+
+.bootstrap-rounded-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;
+}
+
+.bootstrap-rounded-table__column-center {
+  border-right: 1px solid rgba(26, 62, 91, 0.3) !important;
+  border-top: none !important;
+  border-radius: 0 0 0 0;
+  -webkit-border-radius: 0 0 0 0;
+  -moz-border-radius: 0 0 0 0;
+}
+
+.bootstrap-rounded-table__head_bg {
+  background-color: $faint-secondary-primary-10 !important;
+}
+
+.bootstrap-rounded-table__td {
+  border-top: 1px solid rgba(26, 62, 91, 0.3) !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;
   }
 }
+
+
+.bootstrap-table {
+  border-top: none !important;
+  border: 1px solid rgba(26, 62, 91, 0.1);
+  background-color: $faint-secondary-primary-5;
+}
+
diff --git a/src/assets/styles/bmc/helpers/_colors.scss b/src/assets/styles/bmc/helpers/_colors.scss
index 32e93260..584a7785 100644
--- a/src/assets/styles/bmc/helpers/_colors.scss
+++ b/src/assets/styles/bmc/helpers/_colors.scss
@@ -42,9 +42,15 @@ $navbar-color: $primary;
 $login-page-description-color: rgba(12, 28, 41, 0.6);
 
 $text-primary: #0C1C29;
+$text-secondary: #0C1C29E5;
+$text-tretiatry: rgba(12, 28, 41, 0.6);
+
+$surface-secondary: #F3F4F5;
 
 $faint-secondary-primary-5: rgba(26, 62, 91, 0.05);
 $faint-secondary-primary-5-hover:  rgba(20, 39, 53, 0.103);
+$faint-secondary-primary-10: rgba(26, 62, 91, 0.1);
+$faint-secondary-primary-20: rgba(26, 62, 91, 0.2);
 $faint-brand-primary-40:rgba(225, 23, 23, 0.4);
 
 $red-brand-primary: #E11717;
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index c8fbbf59..eca1e4c8 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -183,7 +183,6 @@
         </b-button>
       </b-navbar>
     </header>
-    
   </div>
 </template>
 
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 2aa61984..dc7a58d0 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -114,8 +114,9 @@ export default {
   computed: {
     sideBar() {
       if (
-        this.$route.path === '/operations/kvm' ||
-        this.$route.path === '/operations/serial-over-lan'
+        this.$route.path === '/console-settings' ||
+        this.$route.path === '/console/serial-over-lan' ||
+        this.$route.path === '/console/kvm'
       ) {
         return this.kvmNavigationItems;
       } else {
@@ -159,6 +160,7 @@ svg {
   align-items: center;
   padding-left: $spacer * 4;
   outline: none;
+  box-sizing: border-box;
   height: 68px;
   border-top: 1px solid rgba(26, 62, 91, 0.2);
   &:not(.nav-link--current) {
@@ -205,12 +207,6 @@ svg {
   border-top: 1px solid rgba(26, 62, 91, 0.2);
   font-weight: 600;
   line-height: 20px;
-  &.collapsed {
-    .icon-expand {
-      transform: rotate(180deg);
-      transition: 0.3s linear;
-    }
-  }
   &.not-collapsed {
     font-weight: 600;
     line-height: 20px;
@@ -218,9 +214,7 @@ svg {
 }
 
 .icon-expand {
-  float: right;
-  transition: 0.3s linear;
-  margin-top: $spacer / 4;
+  margin: 0;
 }
 
 .btn-link,
diff --git a/src/components/AppNavigation/AppNavigationMixin.js b/src/components/AppNavigation/AppNavigationMixin.js
index 6ba9ffe3..ad5f58b5 100644
--- a/src/components/AppNavigation/AppNavigationMixin.js
+++ b/src/components/AppNavigation/AppNavigationMixin.js
@@ -8,9 +8,220 @@ export const AppNavigationMixin = {
     return {
       navigationItems: [
         {
-          id: 'overview',
-          label: this.$t('appNavigation.overview'),
+          id: 'system',
+          label: this.$t('appNavigation.systemInformaion'),
+          icon: 'iconChevronUp',
+          children: [
+            {
+              id: 'info',
+              label: this.$t('appNavigation.overviewInfo'),
+              route: '/',
+            },
+            {
+              id: 'network',
+              label: this.$t('appNavigation.networkParametrs'),
+              route: '/network',
+            },
+            {
+              id: 'post-code-logs',
+              label: this.$t('appNavigation.eventLogs'),
+              route: '/logs/post-code-logs',
+            },
+            {
+              id: 'server-parametrs',
+              label: this.$t('appNavigation.serverParam'),
+              route: '/server-parametrs',
+            },
+          ],
+        },
+        {
+          id: 'bmc',
+          label: this.$t('appNavigation.bmc'),
+          icon: 'iconChevronUp',
+          children: [
+            {
+              id: 'configuration',
+              label: this.$t('appNavigation.config'),
+              route: '/bmc-configuration',
+            },
+            {
+              id: 'post-code-logs',
+              label: this.$t('appNavigation.deviceFirmware'),
+              route: '/logs/post-code-logs',
+            },
+            {
+              id: 'post-code-logs',
+              label: this.$t('appNavigation.broadcast'),
+              route: '/logs/post-code-logs',
+            },
+          ],
+        },
+        {
+          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: 'memoryModules',
+          label: this.$t('appNavigation.memoryModules'),
+          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: 'processors',
+          label: this.$t('appNavigation.processors'),
+          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: '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: 'fans',
+          label: this.$t('appNavigation.fans'),
+          icon: 'iconChevronUp',
+          children: [
+            {
+              id: 'overview-info',
+              label: this.$t('appNavigation.statisticInformation'),
+              route: '/logs/event-logs',
+            },
+            {
+              id: 'post-code-logs',
+              label: this.$t('appNavigation.dynamicInformation'),
+              route: '/logs/post-code-logs',
+            },
+          ],
+        },
+        {
+          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: 'motherboard',
+          label: this.$t('appNavigation.motherboard'),
+          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: 'pci-devises',
+          label: this.$t('appNavigation.pciDevises'),
+          route: '/',
+        },
+        //old tabs
+        {
+          id: 'overview',
+          label: 'СТАРЫЕ ВКЛАДКИ',
+          route: '/Info',
           icon: 'iconOverview',
         },
         {
@@ -58,11 +269,6 @@ export const AppNavigationMixin = {
               route: '/operations/factory-reset',
             },
             {
-              id: 'kvm',
-              label: this.$t('appNavigation.kvm'),
-              route: '/operations/kvm',
-            },
-            {
               id: 'key-clear',
               label: this.$t('appNavigation.keyClear'),
               route: '/operations/key-clear',
@@ -78,11 +284,6 @@ export const AppNavigationMixin = {
               route: '/operations/reboot-bmc',
             },
             {
-              id: 'serial-over-lan',
-              label: this.$t('appNavigation.serialOverLan'),
-              route: '/operations/serial-over-lan',
-            },
-            {
               id: 'server-power-operations',
               label: this.$t('appNavigation.serverPowerOperations'),
               route: '/operations/server-power-operations',
@@ -172,17 +373,17 @@ export const KvmNavigationMixin = {
         {
           id: 'console-settings',
           label: this.$t('kvmNavigation.ConsoleSettings'),
-          route: '/operations/kvm',
+          route: '/console-settings',
         },
         {
           id: 'serial-over-lan',
           label: this.$t('kvmNavigation.serialOverLan'),
-          route: '/operations/serial-over-lan',
+          route: '/console/serial-over-lan',
         },
         {
           id: 'kvm',
           label: this.$t('kvmNavigation.kvm'),
-          route: '/operations/kvm',
+          route: '/console/kvm',
         },
       ],
     };
diff --git a/src/components/AppNavigation/KmvNavigationMixin.js b/src/components/AppNavigation/KmvNavigationMixin.js
deleted file mode 100644
index a15b3d38..00000000
--- a/src/components/AppNavigation/KmvNavigationMixin.js
+++ /dev/null
@@ -1,25 +0,0 @@
-const KvmNavigationMixin = {
-  data() {
-    return {
-      navigationItems: [
-        {
-          id: 'console-settings',
-          label: this.$t('appNavigation.ConsoleSettings'),
-          route: '/operations/kvm',
-        },
-        {
-          id: 'serial-over-lan',
-          label: this.$t('appNavigation.serialOverLan'),
-          route: '/operations/serial-over-lan',
-        },
-        {
-          id: 'kvm',
-          label: this.$t('appNavigation.kvm'),
-          route: '/operations/kvm',
-        },
-      ],
-    };
-  },
-};
-
-export default KvmNavigationMixin;
diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue
index ab4adb63..71df8fae 100644
--- a/src/components/Global/PageContainer.vue
+++ b/src/components/Global/PageContainer.vue
@@ -20,18 +20,10 @@ export default {
 main {
   width: 100%;
   height: 100%;
-  padding-top: $spacer * 1.5;
-  padding-bottom: $spacer * 3;
-  padding-left: $spacer;
-  padding-right: $spacer;
 
   &:focus-visible {
     box-shadow: inset 0 0 0 2px theme-color('primary');
     outline: none;
   }
-
-  @include media-breakpoint-up($responsive-layout-bp) {
-    padding-left: $spacer * 2;
-  }
 }
 </style>
diff --git a/src/components/Global/PageTitle.vue b/src/components/Global/PageTitle.vue
index 45c75edb..12dde551 100644
--- a/src/components/Global/PageTitle.vue
+++ b/src/components/Global/PageTitle.vue
@@ -1,22 +1,17 @@
 <template>
   <div class="page-title">
-    <h1>{{ title }}</h1>
-    <p v-if="description">{{ description }}</p>
+    <h1 class="bold-24px text-title">{{ title }}</h1>
+    <p v-if="description" class="page-description">{{ description }}</p>
   </div>
 </template>
 
 <script>
 export default {
   name: 'PageTitle',
-  props: {
-    description: {
-      type: String,
-      default: '',
-    },
-  },
   data() {
     return {
       title: this.$route.meta.title,
+      description: this.$route.meta.description,
     };
   },
 };
@@ -24,9 +19,30 @@ export default {
 
 <style lang="scss" scoped>
 .page-title {
-  margin-bottom: $spacer * 2;
+  width: 100%;
+  height: 72px;
+  border-bottom: 1px solid $faint-secondary-primary-10;
+  background-color: $white;
+  z-index: 1001;
+
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.text-title {
+  margin-left: 2rem;
 }
-p {
-  max-width: 72ch;
+
+.page-description {
+  color: $text-secondary;
+  font-family: Inter;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+
+  margin: 4px 0 0 2rem;
+  padding: 0;
 }
 </style>
diff --git a/src/components/Global/Popover.vue b/src/components/Global/Popover.vue
new file mode 100644
index 00000000..b91aa08b
--- /dev/null
+++ b/src/components/Global/Popover.vue
@@ -0,0 +1,256 @@
+<template>
+  <div id="my-container">
+    <span
+      v-if="!microcode"
+      :id="id"
+      ref="button"
+      class="regular-12px underline pointer"
+      variant="primary"
+    >
+      {{ $t(description) }}
+    </span>
+    <div v-else :id="id" ref="button" variant="primary" class="pointer">
+      <img src="@/assets/images/icon-reload-red.svg" />
+      <span class="regular-12px microcode-reload-font">{{
+        $t(description)
+      }}</span>
+    </div>
+
+    <!-- Our popover title and content render container -->
+    <b-popover
+      ref="popover"
+      :target="id"
+      triggers="click"
+      :show.sync="popoverShow"
+      placement="auto"
+      container="my-container"
+      @show="onShow"
+      @shown="onShown"
+      @hidden="onHidden"
+    >
+      <template #title>
+        <div class="popup-title">
+          <span class="bold-16px__caps">{{ $t(popup) }}</span>
+          <b-button class="popup-title__button_close" @click="onClose">
+            <img src="@/assets/images/popups/x-icon.svg" />
+          </b-button>
+        </div>
+      </template>
+
+      <div class="popup-body">
+        <div>
+          <label class="light-12px" for="username">{{ 'HEX для ввода' }}</label>
+          <img
+            id="popover-target-1"
+            src="@/assets/images/popups/red-sign.svg"
+          />
+          <popover-info
+            id="popover-target-1"
+            description="Введите HEX в поле для подтверждения действия"
+          />
+          <div class="hex-form">
+            <span class="medium-12px"> 9c1735b3f819142393146a5d03314f0a </span>
+          </div>
+        </div>
+        <div class="popup-body__input-container">
+          <span class="regular-12px tretiatry">Поле для ввода</span>
+          <b-form-input
+            id="popover-input-1"
+            v-model="input1"
+            class="medium-12px"
+          ></b-form-input>
+        </div>
+        <b-button class="popover-button" variant="primary" @click="onClose">
+          {{ $t(button) }}
+        </b-button>
+      </div>
+    </b-popover>
+  </div>
+</template>
+
+<script>
+import PopoverInfo from './PopoverInfo';
+
+export default {
+  components: {
+    PopoverInfo,
+  },
+  props: {
+    description: {
+      type: String,
+      default: '',
+    },
+    id: {
+      type: String,
+      default: '',
+    },
+    button: {
+      type: String,
+      default: 'global.action.reload',
+    },
+    popup: {
+      type: String,
+      default: '',
+    },
+    microcode: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      input1: '',
+      input1state: null,
+      input1Return: '',
+      popoverShow: false,
+    };
+  },
+  watch: {
+    input1(val) {
+      if (val) {
+        this.input1state = true;
+      }
+    },
+  },
+  methods: {
+    onClose() {
+      this.popoverShow = false;
+    },
+    onOk() {
+      if (!this.input1) {
+        this.input1state = false;
+      }
+      if (this.input1) {
+        this.onClose();
+        // Return our popover form results
+        this.input1Return = this.input1;
+      }
+    },
+    onShow() {
+      this.$root.$emit('bv::hide::popover');
+      // This is called just before the popover is shown
+      // Reset our popover form variables
+      this.input1 = '';
+      this.input1state = null;
+      this.input1Return = '';
+    },
+    onShown() {
+      // Called just after the popover has been shown
+      // Transfer focus to the first input
+      this.focusRef(this.$refs.input1);
+    },
+    onHidden() {
+      // Called just after the popover has finished hiding
+      // Bring focus back to the button
+      this.focusRef(this.$refs.button);
+    },
+    focusRef(ref) {
+      // Some references may be a component, functional component, or plain element
+      // This handles that check before focusing, assuming a `focus()` method exists
+      // We do this in a double `$nextTick()` to ensure components have
+      // updated & popover positioned first
+      this.$nextTick(() => {
+        this.$nextTick(() => {
+          (ref.$el || ref).focus();
+        });
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.form-group {
+  margin: 0;
+}
+
+.popup-title {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: baseline;
+}
+
+.popup-title__button_close {
+  margin: 0 28px 0 auto;
+  background: none;
+  border: none;
+  &:active {
+    background-color: $faint-secondary-primary-5-hover !important;
+    box-shadow: none !important;
+    border-radius: 8px;
+  }
+  &:focus-visible {
+    border: none !important;
+    border-radius: 8px;
+  }
+  &:focus {
+    box-shadow: none;
+    border-radius: 8px;
+  }
+}
+
+.popup-body {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+}
+
+.form-control {
+  width: 341px;
+  height: 52px;
+  background: rgba(26, 62, 91, 0.05);
+  border-radius: 8px;
+  border: none;
+  margin: -25px auto;
+  padding-top: 30px;
+}
+
+.hex-form {
+  height: 32px;
+  width: 341px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(26, 62, 91, 0.05);
+  border-radius: 8px;
+  border: none;
+  margin: 0 auto;
+}
+
+.popover-button {
+  width: 341px;
+  height: 40px;
+  margin: 0 auto 10px;
+}
+
+.popup-body__input-container {
+  height: 52px;
+  margin: 24px auto 16px auto;
+}
+
+.tretiatry {
+  margin-left: 12px;
+}
+
+.light-12px {
+  margin: 0px 5px 0px 15px;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.popover-info {
+  background-color: #040a0f;
+  width: 168px;
+  height: 76px;
+  &.arrow {
+    display: block;
+  }
+}
+
+.microcode-reload-font {
+  padding-left: 5px;
+  color: $red-brand-primary;
+}
+</style>
diff --git a/src/components/Global/PopoverInfo.vue b/src/components/Global/PopoverInfo.vue
new file mode 100644
index 00000000..4b1b0b0d
--- /dev/null
+++ b/src/components/Global/PopoverInfo.vue
@@ -0,0 +1,40 @@
+<template>
+  <b-popover :target="id" triggers="hover" placement="top">
+    <span class="regular-12px">{{ description }}</span>
+  </b-popover>
+</template>
+
+<script>
+export default {
+  props: {
+    description: {
+      type: String,
+      default: '',
+    },
+    id: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.popover::v-deep {
+  background-color: #040a0f;
+  width: 168px;
+  height: 76px;
+}
+
+.popover::v-deep .arrow {
+  visibility: visible;
+}
+
+.popover::v-deep .arrow::after {
+  border-top-color: #040a0f;
+  border-bottom-color: #040a0f;
+}
+
+.regular-12px {
+  color: $white;
+}
+</style>
diff --git a/src/components/SubHeader/SubHeader.vue b/src/components/SubHeader/SubHeader.vue
index bbbdc6a8..dd99f0d3 100644
--- a/src/components/SubHeader/SubHeader.vue
+++ b/src/components/SubHeader/SubHeader.vue
@@ -14,12 +14,12 @@
           </b-nav-item>
 
           <b-nav-item
-            to="/operations/kvm"
+            to="/console-settings"
             data-test-id="appHeader-container-health"
             class="subheader-button"
             :class="{
               'active-route-top': ''.includes(
-                $route.path.split('operations/kvm')[1]
+                $route.path.split('/console-settings')[1]
               ),
             }"
           >
diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json
index 3d851591..d0cb9631 100644
--- a/src/locales/ru-RU.json
+++ b/src/locales/ru-RU.json
@@ -20,6 +20,8 @@
       "reset": "Сбросить",
       "save": "Сохранить",
       "saveSettings": "Сохранить настройки",
+      "reload": "Перезагрузить",
+      "off": "Выключить",
       "selected": "Выбрано"
     },
     "ariaLabel": {
@@ -161,7 +163,10 @@
     "serverPowerOperations": "@:appPageTitle.serverPowerOperations",
     "certificates": "@:appPageTitle.certificates",
     "virtualMedia": "@:appPageTitle.virtualMedia",
-    "power": "@:appPageTitle.power"
+    "power": "@:appPageTitle.power",
+    "description": {
+      "configuration": "Конфигурация"
+    }
   },  
   "kvmNavigation": {
     "ConsoleSettings": "Настройки консоли",
@@ -969,6 +974,54 @@
       "serverClosedWithErrors": "Соединение разорвано"
     }
   },
+
+  "BMC": {
+    "BmcTitle": "Конфигурация BMC",
+    "BmcTable": "BMC",
+    "ControlTitle": "Управление",
+    "Bios": "BIOS",
+    "BiosV": "Версия BIOS:",
+    "ControlBmc": "Управление ВМС",
+    "microcode": "Микрокод",
+    "ReloadBmc": "Перезагрузить ВМС",
+    "ReloadBmc_popup": "Перезагрузка BMC",
+    "ExportImport": "Экспорт / Импорт настроек",
+    "Parametrs": "Параметры сети",
+    "ReloadMicrocodeBios": "Обновить микрокод BIOS",
+    "ReloadicrocodeBmc": "Обновить микрокод BMC"
+  },
+
+  "SystemDescription": {
+    "title": {
+      "ServerConfig": "Конфигурация сервера",
+      "Control": "Управление",
+      "Notes": "Заметки администратора",
+      "ReloadServer": "Перезагрузка сервера",
+      "OnOffServer": "Включение и выключение сервера",
+      "setupDatetime": "Настройка даты и времени",
+      "Ipv4Settings": "Настроки IPv4",
+      "Ipv6Settings": "Настроки IPv6"
+    },
+    "ReloadOSAndServer": "Перезагрузить ОС и сервер",
+    "ReloadOSAndServer_popup": "Перезагрузка ОС и сервера",
+    "ReloadServer": "Перезагрузить сервер",
+    "ReloadServer_popup": "Перезагрузка сервера",
+    "ConnectToDesktop": "Подключиться к рабочему столу",
+    "status": "Статус:",
+    "NotRunning": "Не запущена",
+    "OffOsAndServer": "Выключить ОС и сервер",
+    "OffOsAndServer_popup": "Выключение ОС и сервера",
+    "OffServer": "Выключить сервер",
+    "OffServer_popup": "Выключение сервера",
+    "GetNtpFromServer": "Получать с NTP-сервера",
+    "UseServerDatettime": "Использовать дату и время сервера",
+    "NtpSettings": "Настройки NTP-сервера",
+    "Reload": "Перезагрузить",
+    "Off": "Выключить",
+    "LoadingQueue": "Последовательность загрузки",
+    "DiskParametrs": "Параметры выбранного диска"
+  },
+
   "countries": {
     "AF": "Афганистан",
     "AL": "Албания",
diff --git a/src/main.js b/src/main.js
index 0aae716f..6ee6525e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -37,6 +37,7 @@ import {
   TabsPlugin,
   ToastPlugin,
   TooltipPlugin,
+  PopoverPlugin,
 } from 'bootstrap-vue';
 import Vuelidate from 'vuelidate';
 import i18n from './i18n';
@@ -127,6 +128,7 @@ Vue.use(TablePlugin);
 Vue.use(TabsPlugin);
 Vue.use(ToastPlugin);
 Vue.use(TooltipPlugin);
+Vue.use(PopoverPlugin);
 Vue.use(Vuelidate);
 
 new Vue({
diff --git a/src/router/routes.js b/src/router/routes.js
index 5703e62a..3bb7c90b 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -7,7 +7,7 @@ import FactoryReset from '@/views/Operations/FactoryReset';
 import Firmware from '@/views/Operations/Firmware';
 import Inventory from '@/views/HardwareStatus/Inventory';
 import Kvm from '@/views/Operations/Kvm';
-import KvmConsole from '@/views/Operations/Kvm/KvmConsole';
+// import KvmConsole from '@/views/Operations/Kvm/KvmConsole'; Full screen console
 import Sessions from '../views/SecurityAndAccess/Sessions';
 import Ldap from '@/views/SecurityAndAccess/Ldap';
 import UserManagement from '@/views/SecurityAndAccess/UserManagement';
@@ -24,12 +24,20 @@ import Policies from '@/views/SecurityAndAccess/Policies';
 import KeyClear from '@/views/Operations/KeyClear';
 import Sensors from '@/views/HardwareStatus/Sensors';
 import SerialOverLan from '@/views/Operations/SerialOverLan';
-import SerialOverLanConsole from '@/views/Operations/SerialOverLan/SerialOverLanConsole';
+// import SerialOverLanConsole from '@/views/Operations/SerialOverLan/SerialOverLanConsole'; Full screen SOL
 import ServerPowerOperations from '@/views/Operations/ServerPowerOperations';
 import Certificates from '@/views/SecurityAndAccess/Certificates';
 import VirtualMedia from '@/views/Operations/VirtualMedia';
 import Power from '@/views/ResourceManagement/Power';
 import InformationAndFAQ from '@/views/InformationAndFAQ';
+
+import SystemDescription from '@/views/SystemDescription/Info';
+import SystemNetwork from '@/views/SystemDescription/Network';
+import ServerParametrs from '@/views/SystemDescription/ServerParametrs';
+import SystemEventLogs from '@/views/SystemDescription/SystemEventLogs';
+import BMCConfiguration from '@/views/BMC/Configuration';
+import ConsoleSettings from '@/views/Operations/ConsoleSettings';
+
 import Support from '@/views/Support';
 
 import i18n from '@/i18n';
@@ -59,39 +67,92 @@ const routes = [
     ],
   },
   {
-    path: '/console',
-    component: ConsoleLayout,
+    path: '/',
     meta: {
       requiresAuth: true,
     },
+    component: AppLayout,
     children: [
       {
-        path: 'serial-over-lan-console',
-        name: 'serial-over-lan-console',
-        component: SerialOverLanConsole,
+        path: '/console-settings',
+        name: 'console-settings',
+        component: ConsoleSettings,
         meta: {
-          title: i18n.t('appPageTitle.serialOverLan'),
+          title: i18n.t('kvmNavigation.ConsoleSettings'),
         },
       },
       {
-        path: 'kvm',
-        name: 'kvm-console',
-        component: KvmConsole,
+        path: '/console',
+        component: ConsoleLayout,
         meta: {
-          title: i18n.t('appPageTitle.kvm'),
+          requiresAuth: true,
         },
+        children: [
+          {
+            path: 'serial-over-lan',
+            name: 'serial-over-lan-console',
+            component: SerialOverLan,
+            meta: {
+              title: i18n.t('kvmNavigation.serialOverLan'),
+            },
+          },
+          {
+            path: 'kvm',
+            name: 'kvm-console',
+            component: Kvm,
+            meta: {
+              title: i18n.t('kvmNavigation.kvm'),
+            },
+          },
+        ],
       },
-    ],
-  },
-  {
-    path: '/',
-    meta: {
-      requiresAuth: true,
-    },
-    component: AppLayout,
-    children: [
       {
-        path: '',
+        path: '/',
+        name: 'info',
+        component: SystemDescription,
+        meta: {
+          title: i18n.t('appNavigation.systemInformaion'),
+          description: i18n.t('appNavigation.overviewInfo'),
+        },
+      },
+      {
+        path: '/network',
+        name: 'network',
+        component: SystemNetwork,
+        meta: {
+          title: i18n.t('appNavigation.systemInformaion'),
+          description: i18n.t('appNavigation.networkParametrs'),
+        },
+      },
+      {
+        path: '/event-logs',
+        name: 'event-logs',
+        component: SystemEventLogs,
+        meta: {
+          title: i18n.t('appNavigation.systemInformaion'),
+          description: i18n.t('appNavigation.eventLogs'),
+        },
+      },
+      {
+        path: '/server-parametrs',
+        name: 'server-parametrs',
+        component: ServerParametrs,
+        meta: {
+          title: i18n.t('appNavigation.systemInformaion'),
+          description: i18n.t('appNavigation.serverParam'),
+        },
+      },
+      {
+        path: '/bmc-configuration',
+        name: 'bmc-configuration',
+        component: BMCConfiguration,
+        meta: {
+          title: i18n.t('appNavigation.bmc'),
+          description: i18n.t('appNavigation.description.configuration'),
+        },
+      },
+      {
+        path: '/Info',
         name: 'overview',
         component: Overview,
         meta: {
@@ -219,14 +280,6 @@ const routes = [
         },
       },
       {
-        path: '/operations/kvm',
-        name: 'kvm',
-        component: Kvm,
-        meta: {
-          title: i18n.t('appPageTitle.kvm'),
-        },
-      },
-      {
         path: '/operations/firmware',
         name: 'firmware',
         component: Firmware,
@@ -266,14 +319,14 @@ const routes = [
           title: i18n.t('appPageTitle.rebootBmc'),
         },
       },
-      {
-        path: '/operations/serial-over-lan',
-        name: 'serial-over-lan',
-        component: SerialOverLan,
-        meta: {
-          title: i18n.t('appPageTitle.serialOverLan'),
-        },
-      },
+      // {
+      //   path: '/operations/serial-over-lan',
+      //   name: 'serial-over-lan',
+      //   component: SerialOverLan,
+      //   meta: {
+      //     title: i18n.t('appPageTitle.serialOverLan'),
+      //   },
+      // },
       {
         path: '/operations/server-power-operations',
         name: 'server-power-operations',
diff --git a/src/views/BMC/Configuration/BMCConfiguration.vue b/src/views/BMC/Configuration/BMCConfiguration.vue
new file mode 100644
index 00000000..92f4f051
--- /dev/null
+++ b/src/views/BMC/Configuration/BMCConfiguration.vue
@@ -0,0 +1,115 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <!-- BMC table -->
+    <div class="main-container">
+      <div class="page-collapse-decorator">
+        <b-button
+          v-b-toggle.toggle-collapse_1
+          variant="link"
+          class="bmc-collapse__button semi-bold-16px"
+        >
+          {{ $t('BMC.BmcTitle') }}
+          <component :is="iconChevronUp" class="icon-expand" />
+        </b-button>
+        <b-collapse id="toggle-collapse_1" class="nav-item__nav">
+          <span class="semi-bold-12px">{{ $t('BMC.BmcTable') }}</span>
+          <b-m-c-configuration-table />
+          <span class="semi-bold-12px">{{ $t('BMC.Bios') }}</span>
+          <div>
+            <span class="regular-12px bmc-configuration__bios-version">{{
+              $t('BMC.BiosV')
+            }}</span>
+            <span class="medium-12px">V 3.2.10.0</span>
+          </div>
+        </b-collapse>
+      </div>
+      <!-- Control -->
+      <div class="page-collapse-decorator">
+        <b-button
+          v-b-toggle.toggle-collapse_2
+          variant="link"
+          class="bmc-collapse__button semi-bold-16px"
+        >
+          {{ $t('BMC.ControlTitle') }}
+          <component :is="iconChevronUp" class="icon-expand" />
+        </b-button>
+        <b-collapse id="toggle-collapse_2" class="nav-item__nav">
+          <b-m-c-configuration-control />
+        </b-collapse>
+      </div>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import BMCConfigurationTable from './BMCConfigurationTable';
+import BMCConfigurationControl from './BMCConfigurationControl';
+import PageSection from '@/components/Global/PageSection';
+import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
+
+export default {
+  components: {
+    PageTitle,
+    BMCConfigurationControl,
+    BMCConfigurationTable,
+    PageSection,
+  },
+  data() {
+    return {
+      text: '',
+      iconChevronUp: iconChevronUp,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+//nav items style
+.nav-item,
+.nav-link {
+  padding: 0;
+}
+
+.bmc-collapse__button {
+  height: 56px;
+  width: 100%;
+  padding: 0 0 0 2rem;
+  margin: 0;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  &:active,
+  &:focus {
+    box-shadow: none;
+  }
+  &:hover {
+    color: $text-primary;
+  }
+}
+
+.nav-item {
+  list-style-type: none;
+}
+
+.semi-bold-12px {
+  display: inline-block;
+  padding: 16px 0 0 2rem;
+}
+
+.bmc-configuration__bios-version {
+  display: inline-block;
+  color: #0c1c29;
+  padding: 8px 2px 2rem 2rem;
+}
+
+a {
+  color: $text-primary !important;
+  &:hover {
+    color: $text-primary !important;
+  }
+}
+</style>
diff --git a/src/views/BMC/Configuration/BMCConfigurationControl.vue b/src/views/BMC/Configuration/BMCConfigurationControl.vue
new file mode 100644
index 00000000..cacd54ed
--- /dev/null
+++ b/src/views/BMC/Configuration/BMCConfigurationControl.vue
@@ -0,0 +1,103 @@
+<template>
+  <page-section class="bmc-control-section">
+    <div class="bmc-control__table">
+      <div class="bmc-control__table__cell">
+        <div>
+          <span class="semi-bold-12px"> {{ $t('BMC.ControlBmc') }} </span>
+        </div>
+        <popover
+          id="popover-reactive-1"
+          description="BMC.ReloadBmc"
+          popup="BMC.ReloadBmc_popup"
+          button="BMC.ReloadBmc"
+        />
+        <div>
+          <span class="regular-12px underline">{{
+            $t('BMC.ExportImport')
+          }}</span>
+        </div>
+        <div>
+          <span class="regular-12px underline">{{ $t('BMC.Parametrs') }}</span>
+        </div>
+      </div>
+
+      <div class="bmc-control__table__cell">
+        <div>
+          <span class="semi-bold-12px">{{ $t('BMC.microcode') }}</span>
+        </div>
+        <popover
+          id="popover-reactive-2"
+          description="BMC.ReloadMicrocodeBios"
+          popup="BMC.ReloadMicrocodeBios"
+          button="global.action.refresh"
+          :microcode="true"
+        />
+        <popover
+          id="popover-reactive-3"
+          description="BMC.ReloadicrocodeBmc"
+          popup="BMC.ReloadicrocodeBmc"
+          button="global.action.refresh"
+          :microcode="true"
+        />
+      </div>
+    </div>
+  </page-section>
+</template>
+
+<script>
+import PageSection from '@/components/Global/PageSection';
+import Popover from '@/components/Global/Popover';
+
+export default {
+  components: { PageSection, Popover },
+  data() {
+    return {
+      timeOption: 'resetBios',
+      picked: '',
+      options: [
+        { text: 'Toggle this custom radio', value: 'first' },
+        { text: 'Or toggle this other custom radio', value: 'second' },
+      ],
+      progress1: {
+        value: 90,
+      },
+      progress2: {
+        value: null,
+      },
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+a {
+  list-style-type: none;
+}
+
+.bmc-control-section {
+  position: relative;
+  margin: 16px 2rem 2rem;
+  width: 70%;
+}
+
+.bmc-control__table {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  width: 85%;
+}
+
+.bmc-control__table__cell {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: flex-start;
+  row-gap: 6px;
+}
+
+.semi-bold-12px {
+  display: inline-block;
+}
+
+label {
+  padding-top: 5px;
+}
+</style>
diff --git a/src/views/BMC/Configuration/BMCConfigurationTable.vue b/src/views/BMC/Configuration/BMCConfigurationTable.vue
new file mode 100644
index 00000000..dd0033e7
--- /dev/null
+++ b/src/views/BMC/Configuration/BMCConfigurationTable.vue
@@ -0,0 +1,67 @@
+<template>
+  <page-section class="bootstrap-table__section">
+    <b-table
+      responsive="md"
+      show-empty
+      class="bootstrap-rounded-table"
+      :items="systems"
+      :fields="fields"
+      :empty-text="$t('global.table.emptyMessage')"
+    >
+    </b-table>
+  </page-section>
+</template>
+
+<script>
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import PageSection from '@/components/Global/PageSection';
+
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+
+export default {
+  components: { PageSection },
+  mixins: [BVToastMixin, TableRowExpandMixin],
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'param',
+          label: 'Параметр',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: `bootstrap-rounded-table__column-first
+            bootstrap-rounded-table__column-first___bmc_conf`,
+          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',
+        },
+      ],
+      expandRowLabel: expandRowLabel,
+      systems: [
+        {
+          param: 'Время BMC',
+          value: '14:20',
+        },
+        { param: 'Версия прошивки', value: '1.214.248 beta' },
+        { param: 'MAC - адреса', value: '487566947' },
+        { param: 'IP - адреса', value: '192.168.48.1' },
+        { param: 'Имя ВМС', value: 'ВМС-007' },
+      ],
+    };
+  },
+};
+</script>
+<style lang="scss">
+.bootstrap-rounded-table__column-first___bmc_conf {
+  width: 50%;
+}
+</style>
diff --git a/src/views/BMC/Configuration/index.js b/src/views/BMC/Configuration/index.js
new file mode 100644
index 00000000..da796489
--- /dev/null
+++ b/src/views/BMC/Configuration/index.js
@@ -0,0 +1,2 @@
+import BMCConfiguration from './BMCConfiguration.vue';
+export default BMCConfiguration;
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 877f3891..520daf60 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -14,7 +14,7 @@
       ></b-form-select>
     </b-form-group> -->
     <b-form-group
-      class="text__h1"
+      class="bold-24px"
       label-for="auth"
       :label="$t('pageLogin.auth')"
     ></b-form-group>
diff --git a/src/views/Operations/ConsoleSettings/ConsoleSettings.vue b/src/views/Operations/ConsoleSettings/ConsoleSettings.vue
new file mode 100644
index 00000000..bd95fa46
--- /dev/null
+++ b/src/views/Operations/ConsoleSettings/ConsoleSettings.vue
@@ -0,0 +1,97 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <!-- BMC table -->
+    <div class="main-container">
+      <page-section class="bootstrap-table__section">
+        <b-table
+          responsive="md"
+          show-empty
+          class="bootstrap-rounded-table"
+          :items="systems"
+          :fields="fields"
+          :empty-text="$t('global.table.emptyMessage')"
+        >
+        </b-table>
+      </page-section>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+// import BMCConfigurationTable from './BMCConfigurationTable';
+// import BMCConfigurationControl from './BMCConfigurationControl';
+import PageSection from '@/components/Global/PageSection';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+// import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+
+export default {
+  components: {
+    PageTitle,
+    // BMCConfigurationControl,
+    // BMCConfigurationTable,
+    PageSection,
+  },
+  mixins: [BVToastMixin, TableRowExpandMixin],
+  data() {
+    return {
+      text: '',
+      isBusy: true,
+      fields: [
+        {
+          key: 'attributes',
+          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
+          bootstrap-rounded-table__column-last___console`,
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
+      expandRowLabel: expandRowLabel,
+      systems: [
+        { attributes: 'Включена', value: 'Включено' },
+        { attributes: 'Максимальное количество сеансов', value: '6' },
+        { attributes: 'Активные сеансы', value: '0' },
+        { attributes: 'Порт удаленного доступа', value: '5900' },
+        { attributes: 'Статус шифрования видео', value: 'Включено' },
+        { attributes: 'Видео с локального сервера', value: 'Включено' },
+        {
+          attributes:
+            'Действие по умолчанию при истечении времени ожидания запроса на общий доступ к сеансу',
+          value: 'Полный доступ',
+        },
+        {
+          attributes: 'Автоматическая блокировка системы',
+          value: 'Не включено',
+        },
+        {
+          attributes: 'Состояние подключения клавиатуры/мыши',
+          value: 'Автоматическое',
+        },
+      ],
+      // iconChevronUp: iconChevronUp,
+    };
+  },
+};
+</script>
+<style lang="scss">
+.bootstrap-rounded-table__column-last___console {
+  width: 30%;
+}
+</style>
diff --git a/src/views/Operations/ConsoleSettings/index.js b/src/views/Operations/ConsoleSettings/index.js
new file mode 100644
index 00000000..860ee595
--- /dev/null
+++ b/src/views/Operations/ConsoleSettings/index.js
@@ -0,0 +1,2 @@
+import ConsoleSettings from './ConsoleSettings.vue';
+export default ConsoleSettings;
diff --git a/src/views/Operations/SerialOverLan/SerialOverLan.vue b/src/views/Operations/SerialOverLan/SerialOverLan.vue
index 48a68345..08a67d84 100644
--- a/src/views/Operations/SerialOverLan/SerialOverLan.vue
+++ b/src/views/Operations/SerialOverLan/SerialOverLan.vue
@@ -1,7 +1,6 @@
 <template>
   <b-container fluid="xl">
-    <page-title class="mb-4" :description="$t('pageSerialOverLan.subTitle')" />
-
+    <page-title />
     <page-section class="mb-0">
       <serial-over-lan-console :is-full-window="false" />
     </page-section>
diff --git a/src/views/SystemDescription/Info/InventoryControlSystem.vue b/src/views/SystemDescription/Info/InventoryControlSystem.vue
new file mode 100644
index 00000000..f47b4868
--- /dev/null
+++ b/src/views/SystemDescription/Info/InventoryControlSystem.vue
@@ -0,0 +1,228 @@
+<template>
+  <page-section class="system-control-section">
+    <div class="system-control__table">
+      <div class="system-control__table__row">
+        <div class="system-control__table__cell">
+          <div>
+            <span class="semi-bold-12px">
+              {{ $t('SystemDescription.title.ReloadServer') }}
+            </span>
+          </div>
+          <popover
+            id="popover-reactive-1"
+            description="SystemDescription.ReloadOSAndServer"
+            popup="SystemDescription.ReloadOSAndServer_popup"
+          />
+          <popover
+            id="popover-reactive-2"
+            description="SystemDescription.ReloadServer"
+            popup="SystemDescription.ReloadServer_popup"
+          />
+          <div>
+            <span class="regular-12px underline">
+              {{ $t('SystemDescription.ConnectToDesktop') }}
+            </span>
+          </div>
+        </div>
+
+        <div class="system-control__table__cell system-control__table__cell__2">
+          <div class="reload-progress__container">
+            <span class="regular-12px">
+              {{ $t('SystemDescription.status') }}
+            </span>
+            <span class="semi-bold-12px progress_bar_percent"
+              >{{ progress1.value }}%</span
+            >
+            <b-progress
+              class="reload-progress"
+              :value="progress1.value"
+            ></b-progress>
+          </div>
+          <div class="reload-progress__container">
+            <span class="regular-12px">
+              {{ $t('SystemDescription.status') }}
+            </span>
+            <span
+              v-if="progress2.value === null"
+              class="semi-bold-12px progress_bar_percent"
+              >{{ $t('SystemDescription.NotRunning') }}</span
+            >
+            <span v-else class="semi-bold-12px progress_bar_percent"
+              >{{ progress2.value }}%</span
+            >
+            <b-progress
+              class="reload-progress"
+              :value="progress2.value"
+            ></b-progress>
+          </div>
+        </div>
+
+        <div class="system-control__table__cell">
+          <div>
+            <span class="semi-bold-12px">
+              {{ $t('SystemDescription.title.OnOffServer') }}
+            </span>
+          </div>
+          <div>
+            <popover
+              id="popover-reactive-3"
+              description="SystemDescription.OffOsAndServer"
+              popup="SystemDescription.OffOsAndServer_popup"
+              button="global.action.off"
+            />
+            <popover
+              id="popover-reactive-4"
+              description="SystemDescription.OffServer"
+              popup="SystemDescription.OffServer_popup"
+              button="global.action.off"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="system-control__table__row">
+        <div class="system-control__table__cell system-control__table__cell__4">
+          <div>
+            <span class="semi-bold-12px">
+              {{ $t('SystemDescription.title.setupDatetime') }}
+            </span>
+          </div>
+          <b-form @submit.prevent="onResetSubmit">
+            <b-form-radio-group
+              v-model="timeOption"
+              class="system-control__radio regular-12px"
+            >
+              <b-form-radio value="NTP">
+                {{ $t('SystemDescription.GetNtpFromServer') }}
+              </b-form-radio>
+              <b-form-radio value="serverDate">
+                {{ $t('SystemDescription.UseServerDatettime') }}
+              </b-form-radio>
+            </b-form-radio-group>
+          </b-form>
+          <ntp-popover
+            id="popover-reactive-5"
+            description="SystemDescription.NtpSettings"
+          />
+        </div>
+      </div>
+    </div>
+  </page-section>
+</template>
+
+<script>
+import PageSection from '@/components/Global/PageSection';
+import Popover from '@/components/Global/Popover';
+import NtpPopover from './NtpPopover';
+
+export default {
+  components: {
+    PageSection,
+    NtpPopover,
+    Popover,
+  },
+  data() {
+    return {
+      timeOption: 'resetBios',
+      picked: '',
+      options: [
+        { text: 'Toggle this custom radio', value: 'first' },
+        { text: 'Or toggle this other custom radio', value: 'second' },
+      ],
+      progress1: {
+        value: 90,
+      },
+      progress2: {
+        value: null,
+      },
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+a {
+  list-style-type: none;
+}
+
+.system-control-section {
+  position: relative;
+  margin: 16px 2rem 2rem !important;
+  width: 90%;
+}
+
+.system-control__table__row {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  width: 85%;
+}
+
+.system-control__table__cell {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: flex-start;
+  row-gap: 6px;
+}
+
+.system-control__table__cell__2 {
+  margin-top: 37px;
+  row-gap: 14px;
+}
+
+.reload-progress__container {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: baseline;
+  justify-content: space-between;
+  width: 100%;
+  column-gap: 4px;
+}
+
+.semi-bold-12px {
+  display: inline-block;
+}
+
+label {
+  padding-top: 5px;
+}
+.system-control__table__cell__4 {
+  margin-top: 26px;
+}
+
+.custom-radio ::before {
+  border: 1px solid $red-brand-primary;
+  background-color: #fff;
+  border-radius: 100%;
+}
+
+.system-control-section::v-deep
+  .custom-control-input:checked
+  ~ .custom-control-label::before {
+  border: 2px solid $red-brand-primary;
+  background-color: $red-brand-primary;
+  box-shadow: 0px 0px 0px 2.5px $white inset;
+  border-radius: 100%;
+}
+
+.system-control-section::v-deep
+  .custom-control-input:hover
+  ~ .custom-control-label::before {
+  background-color: $red-brand-primary-hover !important;
+  box-shadow: 0px 0px 0px 2.5px $white inset;
+  border-color: $red-brand-primary-hover;
+}
+
+.system-control-section::v-deep
+  .custom-control-input:checked
+  ~ .custom-control-label::after {
+  background-image: none !important;
+  border-radius: 100%;
+}
+
+.system-control-section::v-deep
+  .custom-control-input:active
+  ~ .custom-control-label::before {
+  background-color: $red-brand-primary-active !important;
+  box-shadow: 0px 0px 0px 2.5px $white inset;
+  border-color: $red-brand-primary-active;
+}
+</style>
diff --git a/src/views/SystemDescription/Info/InventoryTableSystem.vue b/src/views/SystemDescription/Info/InventoryTableSystem.vue
new file mode 100644
index 00000000..b022fd6d
--- /dev/null
+++ b/src/views/SystemDescription/Info/InventoryTableSystem.vue
@@ -0,0 +1,86 @@
+<template>
+  <page-section class="bootstrap-table__section">
+    <b-table
+      responsive="md"
+      show-empty
+      class="bootstrap-rounded-table"
+      :items="systems"
+      :fields="fields"
+      :empty-text="$t('global.table.emptyMessage')"
+      :busy="isBusy"
+    >
+    </b-table>
+  </page-section>
+</template>
+
+<script>
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import PageSection from '@/components/Global/PageSection';
+
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+
+export default {
+  components: { PageSection },
+  mixins: [BVToastMixin, TableRowExpandMixin],
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'param',
+          label: 'Параметр',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: `bootstrap-rounded-table__column-first
+            bootstrap-rounded-table__column-first___system-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',
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+      ],
+      expandRowLabel: expandRowLabel,
+      systems: [
+        {
+          param: 'UUID сервера',
+          value: '17583',
+        },
+        { param: 'Модель', value: '1.214.248 beta' },
+        { param: 'Производитель', value: 'Asus' },
+        { param: 'Операционная система', value: 'Linux' },
+        { param: 'Серийный номер', value: '741852963335' },
+        {
+          param: 'Свободное место на Flash-накопителе',
+          value: '1 024 000 Мб',
+        },
+      ],
+    };
+  },
+  created() {
+    this.$store.dispatch('system/getSystem').finally(() => {
+      // Emit initial data fetch complete to parent component
+      this.$root.$emit('hardware-status-system-complete');
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    toggleIdentifyLedSwitch(state) {
+      this.$store
+        .dispatch('system/changeIdentifyLedState', state)
+        .catch(({ message }) => this.errorToast(message));
+    },
+  },
+};
+</script>
+<style lang="scss">
+.bootstrap-rounded-table__column-first___system-table {
+  width: 50%;
+}
+</style>
diff --git a/src/views/SystemDescription/Info/NtpPopover.vue b/src/views/SystemDescription/Info/NtpPopover.vue
new file mode 100644
index 00000000..81e95e4d
--- /dev/null
+++ b/src/views/SystemDescription/Info/NtpPopover.vue
@@ -0,0 +1,141 @@
+<template>
+  <div id="my-container">
+    <span :id="id" class="regular-12px underline" variant="primary">
+      {{ $t(description) }}
+    </span>
+    <!-- Our popover title and content render container -->
+    <b-popover
+      :target="id"
+      placement="auto"
+      container="my-container"
+      :show.sync="popoverShow"
+      @show="onShow"
+      @shown="onShown"
+      @hidden="onHidden"
+    >
+      <template #title>
+        <div class="popup-title">
+          <span class="bold-16px__caps">{{ $t(description) }}</span>
+          <b-button class="popup-title__button_close" @click="onClose">
+            <img src="@/assets/images/popups/x-icon.svg" />
+          </b-button>
+        </div>
+      </template>
+
+      <div class="popup-body">
+        <div class="popup-body__input-container">
+          <span class="regular-12px tretiatry"
+            >Введите адрес сервера (IP, FQDM)</span
+          >
+          <b-form-input
+            id="popover-input-1"
+            v-model="input1"
+            class="medium-12px"
+          ></b-form-input>
+        </div>
+        <b-button class="popover-button" variant="primary" @click="onClose">
+          {{ $t('global.action.save') }}
+        </b-button>
+      </div>
+    </b-popover>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    description: {
+      type: String,
+      default: '',
+    },
+    id: {
+      type: String,
+      default: '',
+    },
+    button: {
+      type: String,
+      default: 'Reload',
+    },
+  },
+  data() {
+    return {
+      input1: '',
+      popoverShow: false,
+    };
+  },
+  methods: {
+    onShow() {
+      this.$root.$emit('bv::hide::popover');
+    },
+    onClose() {
+      this.popoverShow = false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.form-group {
+  margin: 0;
+}
+
+.popup-title {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: baseline;
+}
+
+.popup-title__button_close {
+  margin: 0 28px 0 auto;
+  background: none;
+  border: none;
+  &:active {
+    background-color: $faint-secondary-primary-5-hover !important;
+    box-shadow: none !important;
+    border-radius: 8px;
+  }
+  &:focus-visible {
+    border: none !important;
+    border-radius: 8px;
+  }
+  &:focus {
+    box-shadow: none;
+    border-radius: 8px;
+  }
+}
+
+.popup-body {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+}
+
+.form-control {
+  width: 341px;
+  height: 52px;
+  background: rgba(26, 62, 91, 0.05);
+  border-radius: 8px;
+  border: none;
+  margin: -25px auto;
+  padding-top: 30px;
+}
+
+.popover-button {
+  width: 341px;
+  height: 40px;
+  margin: 0 auto 10px;
+}
+
+.popup-body__input-container {
+  height: 52px;
+  margin: 24px auto 16px auto;
+}
+
+.tretiatry {
+  margin-left: 12px;
+}
+
+.underline {
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/SystemDescription/Info/SystemDescription.vue b/src/views/SystemDescription/Info/SystemDescription.vue
new file mode 100644
index 00000000..7322d03e
--- /dev/null
+++ b/src/views/SystemDescription/Info/SystemDescription.vue
@@ -0,0 +1,202 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <!-- System table -->
+    <div class="main-container">
+      <div class="page-collapse-decorator">
+        <b-button
+          v-b-toggle.toggle-collapse_1
+          variant="link"
+          class="server-info-collapse__button semi-bold-16px"
+        >
+          {{ $t('SystemDescription.title.ServerConfig') }}
+          <component :is="iconChevronUp" class="icon-expand" />
+        </b-button>
+        <b-collapse id="toggle-collapse_1" class="nav-item__nav">
+          <table-system ref="system" />
+          <!-- Notes Administration -->
+          <section class="notes-section">
+            <div class="semi-bold-12px textarea-description">
+              <span>{{ $t('SystemDescription.title.Notes') }}</span>
+            </div>
+            <div class="textarea-container">
+              <div class="buttons-container">
+                <button class="notes-button">
+                  <img
+                    src="@/assets/images/textarea-buttons/button-icon-bold.svg"
+                  />
+                </button>
+                <button class="notes-button">
+                  <img
+                    src="@/assets/images/textarea-buttons/button-icon-cursive.svg"
+                  />
+                </button>
+                <button class="notes-button">
+                  <img
+                    src="@/assets/images/textarea-buttons/button-icon-underline.svg"
+                  />
+                </button>
+                <button class="notes-button">
+                  <img
+                    src="@/assets/images/textarea-buttons/button-icon-crossline.svg"
+                  />
+                </button>
+                <button class="notes-button">
+                  <img
+                    src="@/assets/images/textarea-buttons/button-icon-link.svg"
+                  />
+                </button>
+                <div class="line"></div>
+                <button class="notes-button">
+                  <img
+                    src="@/assets/images/textarea-buttons/button-icon-list.svg"
+                  />
+                </button>
+                <button class="notes-button">
+                  <img
+                    src="@/assets/images/textarea-buttons/button-icon-number-list.svg"
+                  />
+                </button>
+              </div>
+              <textarea
+                id=""
+                name="area"
+                placeholder="Тут будет текст который ввел администратор и работать в качестве блокнота"
+                cols="30"
+                rows="10"
+                class="notes-textarea"
+              ></textarea>
+            </div>
+          </section>
+        </b-collapse>
+      </div>
+      <!-- Control -->
+      <div class="page-collapse-decorator">
+        <b-button
+          v-b-toggle.toggle-collapse_2
+          variant="link"
+          class="server-info-collapse__button semi-bold-16px"
+        >
+          {{ $t('SystemDescription.title.Control') }}
+          <component :is="iconChevronUp" class="icon-expand" />
+        </b-button>
+        <b-collapse id="toggle-collapse_2" class="nav-item__nav">
+          <control-system />
+        </b-collapse>
+      </div>
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import TableSystem from './InventoryTableSystem';
+import ControlSystem from './InventoryControlSystem';
+// import PageSection from '@/components/Global/PageSection';
+import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
+
+export default {
+  components: {
+    PageTitle,
+    ControlSystem,
+    TableSystem,
+    // PageSection,
+  },
+  data() {
+    return {
+      text: '',
+      iconChevronUp: iconChevronUp,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+//nav items style
+.nav-item,
+.nav-link {
+  padding: 0;
+}
+
+.server-info-collapse__button {
+  height: 56px;
+  width: 100%;
+  padding: 0 0 0 2rem;
+  margin: 0;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  &:active,
+  &:focus {
+    box-shadow: none;
+  }
+  &:hover {
+    color: $text-primary;
+  }
+}
+.nav-item {
+  list-style-type: none;
+}
+
+a {
+  color: $text-primary !important;
+  &:hover {
+    color: $text-primary !important;
+  }
+}
+//section style
+.notes-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.textarea-description {
+  margin: 5px 0 10px 2rem;
+}
+
+.buttons-container {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.notes-button {
+  width: 2rem;
+  height: 2rem;
+  margin: 22px 0 22px 25px;
+  background-color: $surface-secondary;
+  border: none;
+  &:hover {
+    border-radius: 8px;
+    background-color: $faint-secondary-primary-5-hover;
+  }
+}
+
+.line {
+  display: inline-block;
+  width: 1px;
+  height: 2rem;
+  margin: 22px 0 22px 25px;
+  border-left: 1px solid rgba(26, 62, 91, 0.2);
+}
+
+.textarea-container {
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  margin: 0 1rem 1rem 1rem;
+  background-color: $surface-secondary;
+}
+
+.notes-textarea {
+  resize: none;
+  border: none;
+  flex: 0 0 auto;
+  margin: 0 1rem 1rem 1rem;
+  border-radius: 8px;
+  background-color: $white;
+}
+</style>
diff --git a/src/views/SystemDescription/Info/index.js b/src/views/SystemDescription/Info/index.js
new file mode 100644
index 00000000..8b483f2d
--- /dev/null
+++ b/src/views/SystemDescription/Info/index.js
@@ -0,0 +1,2 @@
+import SystemDescription from './SystemDescription.vue';
+export default SystemDescription;
diff --git a/src/views/SystemDescription/Network/InventoryIPv4Settings.vue b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue
new file mode 100644
index 00000000..69807762
--- /dev/null
+++ b/src/views/SystemDescription/Network/InventoryIPv4Settings.vue
@@ -0,0 +1,275 @@
+<template>
+  <page-section class="bootstrap-table__section">
+    <b-table
+      responsive="md"
+      show-empty
+      class="bootstrap-rounded-table"
+      :items="systems"
+      :fields="fields"
+      :empty-text="$t('global.table.emptyMessage')"
+    >
+      <template #cell(value)="data">
+        <b-row v-if="!(typeof data.value === 'boolean')">
+          <b-form-input
+            v-if="systems[data.index].isEdit && selectedCell === 'value'"
+            ref="input"
+            v-model="systems[data.index].value"
+            class="regular-12px"
+            type="text"
+          ></b-form-input>
+          <b-col v-else>{{ data.value }}</b-col>
+          <b-col class="system-network-table__icon-col">
+            <b-row
+              v-if="systems[data.index].isEdit && selectedCell === 'value'"
+            >
+              <img
+                src="@/assets/images/edit-ok.svg"
+                class="system-network-table__icon pointer"
+                @click="clickOk"
+              />
+              <img
+                src="@/assets/images/edit-no.svg"
+                class="system-network-table__icon close_icon pointer"
+                @click="clickCancel"
+              />
+            </b-row>
+            <img
+              v-else
+              src="@/assets/images/icon-edit.svg"
+              class="system-network-table__icon pointer"
+              @click="editCellHandler(data, 'value')"
+            />
+          </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>
+</template>
+
+<script>
+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 TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+
+export default {
+  components: { PageSection },
+  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
+  data() {
+    return {
+      selectedCell: null,
+      isActive: false,
+      fields: [
+        {
+          key: 'param',
+          label: 'Параметр',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: `bootstrap-rounded-table__column-first
+            bootstrap-rounded-table__column-first___ipv-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
+            bootstrap-rounded-table__ipv-table___center`,
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'comment',
+          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',
+        },
+      ],
+      expandRowLabel: expandRowLabel,
+      iconChevron,
+      systems: [
+        {
+          param: 'DHCP Server (откуда получен IP)',
+          value: false,
+          comment: 'Когда DHPC Server включен параметры вводятся автоматически',
+        },
+        {
+          param: 'IP-адрес',
+          value: '192.168.1.1',
+          comment: 'Введите IP адрес',
+        },
+        {
+          param: 'Маска',
+          value: '192.168.0.1',
+          comment: 'Введите маску сети',
+        },
+        {
+          param: 'Сетевой шлюз',
+          value: '192.168.0.1',
+          comment: 'Введите сетевой шлюз',
+        },
+        {
+          param: 'DNS',
+          value: '8.8.8.8',
+          comment: 'Введите DNS',
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.systems = this.systems.map((item) => ({ ...item, isEdit: false }));
+  },
+  methods: {
+    editCellHandler(data, value) {
+      this.systems = this.systems.map((item) => ({ ...item, isEdit: false }));
+      this.systems[data.index].isEdit = true;
+      this.selectedCell = value;
+      this.$nextTick(() => this.$refs.input.focus());
+    },
+    clickOk(data) {
+      this.selectedCell = null;
+      this.systems[data.index].value = this.$refs.input.value;
+    },
+    clickCancel() {
+      this.selectedCell = null;
+    },
+    DHCPoff() {
+      this.systems[0].value = false;
+      this.isActive = false;
+    },
+    DHCPon() {
+      this.systems[0].value = true;
+      this.isActive = false;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.bootstrap-rounded-table__column-first___ipv-table {
+  width: 30%;
+}
+
+.bootstrap-rounded-table__ipv-table___center {
+  width: 20%;
+}
+
+.system-network-table__icon-col {
+  max-width: 20%;
+  margin: 0 5px 0 auto !important;
+}
+</style>
+
+<style lang="scss" scoped>
+.row {
+  align-items: baseline;
+  flex-wrap: nowrap;
+}
+.icon-expand {
+  margin: 0 !important;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.close_icon {
+  margin-left: 5px;
+}
+
+.form-control {
+  border: none;
+  max-height: 16px;
+  width: 60%;
+  border: none;
+  background-color: transparent;
+  &:focus {
+    box-shadow: none;
+  }
+}
+.popup-container {
+  position: relative;
+}
+
+.popup {
+  position: absolute;
+  top: -12px;
+  left: 3px;
+  width: 97%;
+  background: $white;
+  z-index: 1000;
+  border: 1px solid rgba(26, 62, 91, 0.1);
+  box-sizing: border-box;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  visibility: hidden;
+}
+
+.popup-button {
+  width: 96%;
+  height: 50px;
+  margin: 4px;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  &.popup-on {
+    color: $red-brand-primary;
+    border-radius: 8px;
+    &:hover {
+      background-color: $faint-secondary-primary-5-hover;
+    }
+    &:active {
+      background-color: $faint-secondary-primary-20;
+    }
+  }
+
+  &.popup-off {
+    background-color: $red-brand-primary;
+    color: $white;
+    &:hover {
+      background-color: $red-brand-primary-hover;
+    }
+    &:active {
+      background-color: $red-brand-primary-active;
+    }
+  }
+}
+
+.popup-text {
+  margin-left: 20px;
+}
+
+.popup_active {
+  visibility: visible;
+}
+</style>
diff --git a/src/views/SystemDescription/Network/InventoryIPv6Settings.vue b/src/views/SystemDescription/Network/InventoryIPv6Settings.vue
new file mode 100644
index 00000000..4ff0897a
--- /dev/null
+++ b/src/views/SystemDescription/Network/InventoryIPv6Settings.vue
@@ -0,0 +1,262 @@
+<template>
+  <page-section class="bootstrap-table__section">
+    <b-table
+      responsive="md"
+      show-empty
+      class="bootstrap-rounded-table"
+      :items="systems"
+      :fields="fields"
+      :empty-text="$t('global.table.emptyMessage')"
+    >
+      <template #cell(value)="data">
+        <b-row v-if="!(typeof data.value === 'boolean')">
+          <b-form-input
+            v-if="systems[data.index].isEdit && selectedCell === 'value'"
+            ref="input"
+            v-model="systems[data.index].value"
+            class="regular-12px"
+            type="text"
+          ></b-form-input>
+          <b-col v-else>{{ data.value }}</b-col>
+          <b-col class="system-network-table__icon-col">
+            <b-row
+              v-if="systems[data.index].isEdit && selectedCell === 'value'"
+            >
+              <img
+                src="@/assets/images/edit-ok.svg"
+                class="system-network-table__icon pointer"
+                @click="clickOk"
+              />
+              <img
+                src="@/assets/images/edit-no.svg"
+                class="system-network-table__icon close_icon pointer"
+                @click="clickCancel"
+              />
+            </b-row>
+            <img
+              v-else
+              src="@/assets/images/icon-edit.svg"
+              class="system-network-table__icon pointer"
+              @click="editCellHandler(data, 'value')"
+            />
+          </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>
+</template>
+
+<script>
+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 TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+
+export default {
+  components: { PageSection },
+  mixins: [BVToastMixin, TableRowExpandMixin, DataFormatterMixin],
+  data() {
+    return {
+      isBusy: true,
+      selectedCell: null,
+      isActive: false,
+      fields: [
+        {
+          key: 'param',
+          label: 'Параметр',
+          formatter: this.dataFormatter,
+          thClass: 'semi-bold-12px__caps bootstrap-rounded-table__head_bg',
+          class: `bootstrap-rounded-table__column-first___ipv-table
+              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-center
+            bootstrap-rounded-table__ipv-table___center`,
+          tdClass: 'regular-12px bootstrap-rounded-table__td',
+        },
+        {
+          key: 'comment',
+          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',
+        },
+      ],
+      expandRowLabel: expandRowLabel,
+      iconChevron,
+      systems: [
+        {
+          param: 'DHCP Server (откуда получен IP)',
+          value: false,
+          comment: 'Когда DHPC Server включен параметры вводятся автоматически',
+        },
+        {
+          param: 'IP-адрес',
+          value: '192.168.1.1',
+          comment: 'Введите IP адрес',
+        },
+        {
+          param: 'Маска',
+          value: '192.168.0.1',
+          comment: 'Введите маску сети',
+        },
+        {
+          param: 'Сетевой шлюз',
+          value: '192.168.0.1',
+          comment: 'Введите сетевой шлюз',
+        },
+        {
+          param: 'DNS',
+          value: '8.8.8.8',
+          comment: 'Введите DNS',
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.systems = this.systems.map((item) => ({ ...item, isEdit: false }));
+  },
+  methods: {
+    editCellHandler(data, value) {
+      this.systems = this.systems.map((item) => ({ ...item, isEdit: false }));
+      this.systems[data.index].isEdit = true;
+      this.selectedCell = value;
+      this.$nextTick(() => this.$refs.input.focus());
+    },
+    clickOk(data) {
+      this.selectedCell = null;
+      this.systems[data.index].value = this.$refs.input.value;
+    },
+    clickCancel() {
+      this.selectedCell = null;
+    },
+    DHCPoff() {
+      this.systems[0].value = false;
+      this.isActive = false;
+    },
+    DHCPon() {
+      this.systems[0].value = true;
+      this.isActive = false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.row {
+  align-items: baseline;
+  flex-wrap: nowrap;
+}
+.icon-expand {
+  margin: 0 !important;
+}
+
+.edit {
+  cursor: pointer;
+}
+
+.close_icon {
+  margin-left: 5px;
+}
+
+.form-control {
+  border: none;
+  max-height: 16px;
+  width: 60%;
+  border: none;
+  background-color: transparent;
+  &:focus {
+    box-shadow: none;
+  }
+}
+
+.popup-container {
+  position: relative;
+}
+
+.popup {
+  position: absolute;
+  top: -12px;
+  left: 3px;
+  width: 97%;
+  background: $white;
+  z-index: 1000;
+  border: 1px solid rgba(26, 62, 91, 0.1);
+  box-sizing: border-box;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  visibility: hidden;
+}
+
+.popup-button {
+  width: 96%;
+  height: 50px;
+  margin: 4px;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  &.popup-on {
+    color: $red-brand-primary;
+    border-radius: 8px;
+    &:hover {
+      background-color: $faint-secondary-primary-5-hover;
+    }
+    &:active {
+      background-color: $faint-secondary-primary-20;
+    }
+  }
+
+  &.popup-off {
+    background-color: $red-brand-primary;
+    color: $white;
+    &:hover {
+      background-color: $red-brand-primary-hover;
+    }
+    &:active {
+      background-color: $red-brand-primary-active;
+    }
+  }
+}
+
+.popup-text {
+  margin-left: 20px;
+}
+
+.popup_active {
+  visibility: visible;
+}
+</style>
diff --git a/src/views/SystemDescription/Network/SystemNetwork.vue b/src/views/SystemDescription/Network/SystemNetwork.vue
new file mode 100644
index 00000000..4cf264cf
--- /dev/null
+++ b/src/views/SystemDescription/Network/SystemNetwork.vue
@@ -0,0 +1,127 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <!-- IPv4 -->
+    <div class="main-container">
+      <div class="page-collapse-decorator">
+        <b-button
+          v-b-toggle.toggle-collapse_1
+          variant="link"
+          class="server-info-collapse__button semi-bold-16px"
+          @click="ipv4Handler"
+        >
+          {{ $t('SystemDescription.title.Ipv4Settings') }}
+          <b-form-checkbox
+            id="checkbox-1"
+            v-model="ipv4"
+            @click.native.prevent
+          ></b-form-checkbox>
+        </b-button>
+        <b-collapse id="toggle-collapse_1" class="nav-item__nav">
+          <i-pv4-settings ref="system" />
+        </b-collapse>
+      </div>
+      <!-- IPv6 -->
+      <div class="page-collapse-decorator">
+        <b-button
+          v-b-toggle.toggle-collapse_2
+          variant="link"
+          class="server-info-collapse__button semi-bold-16px"
+          @click="ipv6Handler"
+        >
+          {{ $t('SystemDescription.title.Ipv6Settings') }}
+          <b-form-checkbox
+            id="checkbox-2"
+            v-model="ipv6"
+            @click.native.prevent
+          ></b-form-checkbox>
+        </b-button>
+        <b-collapse id="toggle-collapse_2" class="nav-item__nav">
+          <i-pv6-settings ref="system" />
+        </b-collapse>
+      </div>
+      <modal-user @hidden="activeUser = null" />
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import IPv4Settings from './InventoryIPv4Settings';
+import IPv6Settings from './InventoryIPv6Settings';
+import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
+
+export default {
+  components: {
+    PageTitle,
+    IPv4Settings,
+    IPv6Settings,
+  },
+  data() {
+    return {
+      text: '',
+      iconChevronUp: iconChevronUp,
+      ipv4: false,
+      ipv6: false,
+    };
+  },
+  methods: {
+    ipv4Handler() {
+      this.ipv4 = !this.ipv4;
+    },
+    ipv6Handler() {
+      this.ipv6 = !this.ipv6;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+//nav items style
+.nav-item,
+.nav-link {
+  padding: 0;
+}
+
+.server-info-collapse__button {
+  height: 56px;
+  width: 100%;
+  padding: 0 0 0 2rem;
+  margin: 0;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  &:active,
+  &:focus {
+    box-shadow: none;
+  }
+  &:hover {
+    color: $text-primary;
+  }
+}
+
+.nav-item {
+  list-style-type: none;
+}
+
+a {
+  color: $text-primary !important;
+  &:hover {
+    color: $text-primary !important;
+  }
+}
+
+.custom-checkbox {
+  background-color: none;
+  margin: 0 20px 0 auto;
+}
+
+.custom-checkbox ::before {
+  box-shadow: none !important;
+  border: 2px solid rgba(4, 10, 15, 0.6);
+  background-color: #fff;
+  border-radius: 3px;
+}
+</style>
diff --git a/src/views/SystemDescription/Network/index.js b/src/views/SystemDescription/Network/index.js
new file mode 100644
index 00000000..25f85f3c
--- /dev/null
+++ b/src/views/SystemDescription/Network/index.js
@@ -0,0 +1,2 @@
+import SystemNetwork from './SystemNetwork.vue';
+export default SystemNetwork;
diff --git a/src/views/SystemDescription/ServerParametrs/ServerParametrs.vue b/src/views/SystemDescription/ServerParametrs/ServerParametrs.vue
new file mode 100644
index 00000000..bbc461eb
--- /dev/null
+++ b/src/views/SystemDescription/ServerParametrs/ServerParametrs.vue
@@ -0,0 +1,23 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <div class="main-container">
+      <servere-parametrs-section />
+    </div>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/Global/PageTitle';
+import ServereParametrsSection from './ServereParametrsSection';
+
+export default {
+  components: {
+    PageTitle,
+    ServereParametrsSection,
+  },
+};
+</script>
diff --git a/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue b/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue
new file mode 100644
index 00000000..e9868b05
--- /dev/null
+++ b/src/views/SystemDescription/ServerParametrs/ServereParametrsSection.vue
@@ -0,0 +1,169 @@
+<template>
+  <page-section class="bootstrap-table__section">
+    <span class="bold-12px__caps">
+      {{ $t('SystemDescription.LoadingQueue') }}
+    </span>
+    <b-table
+      responsive="md"
+      class="bootstrap-table bootstrap-table__stripes"
+      :items="queueItems"
+      :fields="fields"
+    >
+      <template #cell(active)="data">
+        <b-row>
+          <b-col>
+            <span v-if="queueItems[data.index].active">
+              {{ $t('global.status.enabled') }}
+            </span>
+            <span v-else>
+              {{ $t('global.status.disabled') }}
+            </span>
+          </b-col>
+          <b-col>
+            <b-form-checkbox
+              v-model="queueItems[data.index].active"
+              class="switch-input"
+              switch
+              @change="toggleLoad"
+            >
+            </b-form-checkbox>
+          </b-col>
+        </b-row>
+      </template>
+    </b-table>
+    <span class="bold-12px__caps">
+      {{ $t('SystemDescription.DiskParametrs') }}
+    </span>
+    <b-table
+      responsive="md"
+      class="bootstrap-table bootstrap-table__stripes"
+      :items="diskItems"
+      :fields="fields"
+    >
+    </b-table>
+  </page-section>
+</template>
+
+<script>
+import PageSection from '@/components/Global/PageSection';
+import iconChevron from '@carbon/icons-vue/es/chevron--down/16';
+
+export default {
+  components: { PageSection },
+  data() {
+    return {
+      selectedCell: null,
+      fields: [
+        {
+          key: 'param',
+          label: '',
+          formatter: this.dataFormatter,
+          thClass: 'bootstrap-table__head_bg',
+          class: 'bootstrap-table__column-first',
+          tdClass: 'regular-12px bootstrap-table__td',
+        },
+        {
+          key: 'active',
+          label: '',
+          formatter: this.dataFormatter,
+          thClass: 'bootstrap-table__head_bg',
+          class: `bootstrap-table__column-last
+            bootstrap-table__server-param`,
+          tdClass: 'regular-12px bootstrap-table__td',
+        },
+      ],
+      iconChevron,
+      queueItems: [
+        {
+          param: 'Hard Drive C:',
+          active: false,
+        },
+        {
+          param:
+            'Embedded NIC 2 Port 1 Partition 1: BRCM MBA Slot E101 v21.6.0',
+          active: false,
+        },
+        {
+          param: 'Virtual Floppy Drive',
+          active: false,
+        },
+        {
+          param: 'Virtual Optical Drive',
+          active: false,
+        },
+      ],
+      diskItems: [
+        {
+          param: 'Internal SD',
+          active: 'IDSM',
+        },
+        {
+          param: 'ACHI Controller in SL7',
+          active: 'A0S0 MTFDDAV480TDS',
+        },
+        {
+          param: 'ACHI Controller in SL7',
+          active: 'A0S1 MTFDDAV480TDS',
+        },
+        {
+          param: 'RAID Controller in SL8',
+          active: 'PERC H755 Front (bus 01 dev 00)',
+        },
+      ],
+    };
+  },
+  methods: {
+    toggleLoad(data, value) {
+      this.queueItems[data.index].value = !value;
+    },
+  },
+};
+</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%;
+}
+
+.system-network-table__icon-col {
+  max-width: 20%;
+  margin: 0 5px 0 auto !important;
+}
+</style>
+
+<style lang="scss" scoped>
+.row {
+  align-items: center;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+}
+.icon-expand {
+  margin: 0 !important;
+}
+
+.bold-12px__caps {
+  display: block;
+  margin: 16px 0 7px 0;
+}
+</style>
diff --git a/src/views/SystemDescription/ServerParametrs/index.js b/src/views/SystemDescription/ServerParametrs/index.js
new file mode 100644
index 00000000..5ce6ca74
--- /dev/null
+++ b/src/views/SystemDescription/ServerParametrs/index.js
@@ -0,0 +1,2 @@
+import ServerParametrs from './ServerParametrs.vue';
+export default ServerParametrs;
diff --git a/src/views/SystemDescription/SystemEventLogs/SystemEventLogs.vue b/src/views/SystemDescription/SystemEventLogs/SystemEventLogs.vue
new file mode 100644
index 00000000..e84d23db
--- /dev/null
+++ b/src/views/SystemDescription/SystemEventLogs/SystemEventLogs.vue
@@ -0,0 +1,624 @@
+<template>
+  <b-container
+    :style="{ display: 'flex', 'flex-direction': 'column' }"
+    fluid="xxl pt-0 m-0"
+  >
+    <page-title />
+    <b-row class="align-items-start">
+      <b-col sm="8" xl="6" class="d-sm-flex align-items-end mb-4">
+        <search
+          :placeholder="$t('pageEventLogs.table.searchLogs')"
+          data-test-id="eventLogs-input-searchLogs"
+          @change-search="onChangeSearchInput"
+          @clear-search="onClearSearchInput"
+        />
+        <div class="ml-sm-4">
+          <table-cell-count
+            :filtered-items-count="filteredRows"
+            :total-number-of-cells="allLogs.length"
+          ></table-cell-count>
+        </div>
+      </b-col>
+      <b-col sm="8" md="7" xl="6">
+        <table-date-filter @change="onChangeDateTimeFilter" />
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col class="text-right">
+        <table-filter :filters="tableFilters" @filter-change="onFilterChange" />
+        <b-button
+          variant="link"
+          :disabled="allLogs.length === 0"
+          @click="deleteAllLogs"
+        >
+          <icon-delete /> {{ $t('global.action.deleteAll') }}
+        </b-button>
+        <b-button
+          variant="primary"
+          :class="{ disabled: allLogs.length === 0 }"
+          :download="exportFileNameByDate()"
+          :href="href"
+        >
+          <icon-export /> {{ $t('global.action.exportAll') }}
+        </b-button>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <table-toolbar
+          ref="toolbar"
+          :selected-items-count="selectedRows.length"
+          :actions="batchActions"
+          @clear-selected="clearSelectedRows($refs.table)"
+          @batch-action="onBatchAction"
+        >
+          <template #toolbar-buttons>
+            <b-button variant="primary" @click="resolveLogs">
+              {{ $t('pageEventLogs.resolve') }}
+            </b-button>
+            <b-button variant="primary" @click="unresolveLogs">
+              {{ $t('pageEventLogs.unresolve') }}
+            </b-button>
+            <table-toolbar-export
+              :data="batchExportData"
+              :file-name="exportFileNameByDate()"
+            />
+          </template>
+        </table-toolbar>
+        <b-table
+          id="table-event-logs"
+          ref="table"
+          responsive="md"
+          selectable
+          no-select-on-click
+          sort-icon-left
+          hover
+          no-sort-reset
+          sort-desc
+          show-empty
+          sort-by="id"
+          :fields="fields"
+          :items="filteredLogs"
+          :sort-compare="onSortCompare"
+          :empty-text="$t('global.table.emptyMessage')"
+          :empty-filtered-text="$t('global.table.emptySearchMessage')"
+          :per-page="perPage"
+          :current-page="currentPage"
+          :filter="searchFilter"
+          :busy="isBusy"
+          @filtered="onFiltered"
+          @row-selected="onRowSelected($event, filteredLogs.length)"
+        >
+          <!-- Checkbox column -->
+          <template #head(checkbox)>
+            <b-form-checkbox
+              v-model="tableHeaderCheckboxModel"
+              data-test-id="eventLogs-checkbox-selectAll"
+              :indeterminate="tableHeaderCheckboxIndeterminate"
+              @change="onChangeHeaderCheckbox($refs.table)"
+            >
+              <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+            </b-form-checkbox>
+          </template>
+          <template #cell(checkbox)="row">
+            <b-form-checkbox
+              v-model="row.rowSelected"
+              :data-test-id="`eventLogs-checkbox-selectRow-${row.index}`"
+              @change="toggleSelectRow($refs.table, row.index)"
+            >
+              <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+            </b-form-checkbox>
+          </template>
+
+          <!-- Expand chevron icon -->
+          <template #cell(expandRow)="row">
+            <b-button
+              variant="link"
+              :aria-label="expandRowLabel"
+              :title="expandRowLabel"
+              class="btn-icon-only"
+              @click="toggleRowDetails(row)"
+            >
+              <icon-chevron />
+            </b-button>
+          </template>
+
+          <template #row-details="{ item }">
+            <b-container fluid>
+              <b-row>
+                <b-col>
+                  <dl>
+                    <!-- Name -->
+                    <dt>{{ $t('pageEventLogs.table.name') }}:</dt>
+                    <dd>{{ dataFormatter(item.name) }}</dd>
+                  </dl>
+                  <dl>
+                    <!-- Type -->
+                    <dt>{{ $t('pageEventLogs.table.type') }}:</dt>
+                    <dd>{{ dataFormatter(item.type) }}</dd>
+                  </dl>
+                </b-col>
+                <b-col>
+                  <dl>
+                    <!-- Modified date -->
+                    <dt>{{ $t('pageEventLogs.table.modifiedDate') }}:</dt>
+                    <dd v-if="item.modifiedDate">
+                      {{ item.modifiedDate | formatDate }}
+                      {{ item.modifiedDate | formatTime }}
+                    </dd>
+                    <dd v-else>--</dd>
+                  </dl>
+                </b-col>
+                <b-col class="text-nowrap">
+                  <b-button
+                    class="btn btn-secondary float-right"
+                    :href="item.additionalDataUri"
+                    target="_blank"
+                  >
+                    <icon-download />{{ $t('pageEventLogs.additionalDataUri') }}
+                  </b-button>
+                </b-col>
+              </b-row>
+            </b-container>
+          </template>
+
+          <!-- Severity column -->
+          <template #cell(severity)="{ value }">
+            <status-icon v-if="value" :status="statusIcon(value)" />
+            {{ value }}
+          </template>
+          <!-- Date column -->
+          <template #cell(date)="{ value }">
+            <p class="mb-0">{{ value | formatDate }}</p>
+            <p class="mb-0">{{ value | formatTime }}</p>
+          </template>
+
+          <!-- Status column -->
+          <template #cell(status)="row">
+            <b-form-checkbox
+              v-model="row.item.status"
+              name="switch"
+              switch
+              @change="changelogStatus(row.item)"
+            >
+              <span v-if="row.item.status">
+                {{ $t('pageEventLogs.resolved') }}
+              </span>
+              <span v-else> {{ $t('pageEventLogs.unresolved') }} </span>
+            </b-form-checkbox>
+          </template>
+          <template #cell(filterByStatus)="{ value }">
+            {{ value }}
+          </template>
+
+          <!-- Actions column -->
+          <template #cell(actions)="row">
+            <table-row-action
+              v-for="(action, index) in row.item.actions"
+              :key="index"
+              :value="action.value"
+              :title="action.title"
+              :row-data="row.item"
+              :export-name="exportFileNameByDate('export')"
+              :data-test-id="`eventLogs-button-deleteRow-${row.index}`"
+              @click-table-action="onTableRowAction($event, row.item)"
+            >
+              <template #icon>
+                <icon-export v-if="action.value === 'export'" />
+                <icon-trashcan v-if="action.value === 'delete'" />
+              </template>
+            </table-row-action>
+          </template>
+        </b-table>
+      </b-col>
+    </b-row>
+
+    <!-- Table pagination -->
+    <b-row>
+      <b-col sm="6">
+        <b-form-group
+          class="table-pagination-select"
+          :label="$t('global.table.itemsPerPage')"
+          label-for="pagination-items-per-page"
+        >
+          <b-form-select
+            id="pagination-items-per-page"
+            v-model="perPage"
+            :options="itemsPerPageOptions"
+          />
+        </b-form-group>
+      </b-col>
+      <b-col sm="6">
+        <b-pagination
+          v-model="currentPage"
+          first-number
+          last-number
+          :per-page="perPage"
+          :total-rows="getTotalRowCount(filteredRows)"
+          aria-controls="table-event-logs"
+        />
+      </b-col>
+    </b-row>
+  </b-container>
+</template>
+
+<script>
+import IconDelete from '@carbon/icons-vue/es/trash-can/20';
+import IconTrashcan from '@carbon/icons-vue/es/trash-can/20';
+import IconExport from '@carbon/icons-vue/es/document--export/20';
+import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
+import IconDownload from '@carbon/icons-vue/es/download/20';
+import { omit } from 'lodash';
+
+import PageTitle from '@/components/Global/PageTitle';
+import StatusIcon from '@/components/Global/StatusIcon';
+import Search from '@/components/Global/Search';
+import TableCellCount from '@/components/Global/TableCellCount';
+import TableDateFilter from '@/components/Global/TableDateFilter';
+import TableFilter from '@/components/Global/TableFilter';
+import TableRowAction from '@/components/Global/TableRowAction';
+import TableToolbar from '@/components/Global/TableToolbar';
+import TableToolbarExport from '@/components/Global/TableToolbarExport';
+
+import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
+import BVPaginationMixin, {
+  currentPage,
+  perPage,
+  itemsPerPageOptions,
+} from '@/components/Mixins/BVPaginationMixin';
+import BVTableSelectableMixin, {
+  selectedRows,
+  tableHeaderCheckboxModel,
+  tableHeaderCheckboxIndeterminate,
+} from '@/components/Mixins/BVTableSelectableMixin';
+import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
+import TableSortMixin from '@/components/Mixins/TableSortMixin';
+import TableRowExpandMixin, {
+  expandRowLabel,
+} from '@/components/Mixins/TableRowExpandMixin';
+import SearchFilterMixin, {
+  searchFilter,
+} from '@/components/Mixins/SearchFilterMixin';
+
+export default {
+  components: {
+    IconDelete,
+    IconExport,
+    IconTrashcan,
+    IconChevron,
+    IconDownload,
+    PageTitle,
+    Search,
+    StatusIcon,
+    TableCellCount,
+    TableFilter,
+    TableRowAction,
+    TableToolbar,
+    TableToolbarExport,
+    TableDateFilter,
+  },
+  mixins: [
+    BVPaginationMixin,
+    BVTableSelectableMixin,
+    BVToastMixin,
+    LoadingBarMixin,
+    TableFilterMixin,
+    DataFormatterMixin,
+    TableSortMixin,
+    TableRowExpandMixin,
+    SearchFilterMixin,
+  ],
+  beforeRouteLeave(to, from, next) {
+    // Hide loader if the user navigates to another page
+    // before request is fulfilled.
+    this.hideLoader();
+    next();
+  },
+  data() {
+    return {
+      isBusy: true,
+      fields: [
+        {
+          key: 'expandRow',
+          label: '',
+          tdClass: 'table-row-expand',
+        },
+        {
+          key: 'checkbox',
+          sortable: false,
+        },
+        {
+          key: 'id',
+          label: this.$t('pageEventLogs.table.id'),
+          sortable: true,
+        },
+        {
+          key: 'severity',
+          label: this.$t('pageEventLogs.table.severity'),
+          sortable: true,
+          tdClass: 'text-nowrap',
+        },
+        {
+          key: 'date',
+          label: this.$t('pageEventLogs.table.date'),
+          sortable: true,
+          tdClass: 'text-nowrap',
+        },
+        {
+          key: 'description',
+          label: this.$t('pageEventLogs.table.description'),
+          tdClass: 'text-break',
+        },
+        {
+          key: 'status',
+          label: this.$t('pageEventLogs.table.status'),
+        },
+        {
+          key: 'actions',
+          sortable: false,
+          label: '',
+          tdClass: 'text-right text-nowrap',
+        },
+      ],
+      allLogs: [
+        {
+          expandRow: 'expandRow',
+          checkbox: false,
+          id: 1,
+          severity: 'dfjgsdjlk',
+          date: '12-23-1220',
+          status: 'expandRow',
+          description: 'expandRow',
+          actions: [
+            {
+              value: 'export',
+              title: this.$t('global.action.export'),
+            },
+            {
+              value: 'delete',
+              title: this.$t('global.action.delete'),
+            },
+          ],
+        },
+      ],
+      tableFilters: [
+        {
+          key: 'severity',
+          label: this.$t('pageEventLogs.table.severity'),
+          values: ['OK', 'Warning', 'Critical'],
+        },
+        {
+          key: 'filterByStatus',
+          label: this.$t('pageEventLogs.table.status'),
+          values: ['Resolved', 'Unresolved'],
+        },
+      ],
+      expandRowLabel,
+      activeFilters: [],
+      batchActions: [
+        {
+          value: 'delete',
+          label: this.$t('global.action.delete'),
+        },
+      ],
+      currentPage: currentPage,
+      filterStartDate: null,
+      filterEndDate: null,
+      itemsPerPageOptions: itemsPerPageOptions,
+      perPage: perPage,
+      searchFilter: searchFilter,
+      searchTotalFilteredRows: 0,
+      selectedRows: selectedRows,
+      tableHeaderCheckboxModel: tableHeaderCheckboxModel,
+      tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
+    };
+  },
+  computed: {
+    href() {
+      return `data:text/json;charset=utf-8,${this.exportAllLogs()}`;
+    },
+    filteredRows() {
+      return this.searchFilter
+        ? this.searchTotalFilteredRows
+        : this.filteredLogs.length;
+    },
+    // allLogs() {
+    //   return this.$store.getters['eventLog/allEvents'].map((event) => {
+    //     return {
+    //       ...event,
+    //       actions: [
+    //         {
+    //           value: 'export',
+    //           title: this.$t('global.action.export'),
+    //         },
+    //         {
+    //           value: 'delete',
+    //           title: this.$t('global.action.delete'),
+    //         },
+    //       ],
+    //     };
+    //   });
+    // },
+    batchExportData() {
+      return this.selectedRows.map((row) => omit(row, 'actions'));
+    },
+    filteredLogsByDate() {
+      return this.getFilteredTableDataByDate(
+        this.allLogs,
+        this.filterStartDate,
+        this.filterEndDate
+      );
+    },
+    filteredLogs() {
+      return this.getFilteredTableData(
+        this.filteredLogsByDate,
+        this.activeFilters
+      );
+    },
+  },
+  created() {
+    this.startLoader();
+    this.$store.dispatch('eventLog/getEventLogData').finally(() => {
+      this.endLoader();
+      this.isBusy = false;
+    });
+  },
+  methods: {
+    changelogStatus(row) {
+      this.$store
+        .dispatch('eventLog/updateEventLogStatus', {
+          uri: row.uri,
+          status: row.status,
+        })
+        .then((success) => {
+          this.successToast(success);
+        })
+        .catch(({ message }) => this.errorToast(message));
+    },
+    deleteAllLogs() {
+      this.$bvModal
+        .msgBoxConfirm(this.$t('pageEventLogs.modal.deleteAllMessage'), {
+          title: this.$t('pageEventLogs.modal.deleteAllTitle'),
+          okTitle: this.$t('global.action.delete'),
+          okVariant: 'danger',
+          cancelTitle: this.$t('global.action.cancel'),
+        })
+        .then((deleteConfirmed) => {
+          if (deleteConfirmed) {
+            this.$store
+              .dispatch('eventLog/deleteAllEventLogs', this.allLogs)
+              .then((message) => this.successToast(message))
+              .catch(({ message }) => this.errorToast(message));
+          }
+        });
+    },
+    deleteLogs(uris) {
+      this.$store
+        .dispatch('eventLog/deleteEventLogs', uris)
+        .then((messages) => {
+          messages.forEach(({ type, message }) => {
+            if (type === 'success') {
+              this.successToast(message);
+            } else if (type === 'error') {
+              this.errorToast(message);
+            }
+          });
+        });
+    },
+    exportAllLogs() {
+      {
+        return this.$store.getters['eventLog/allEvents'].map((eventLogs) => {
+          const allEventLogsString = JSON.stringify(eventLogs);
+          return allEventLogsString;
+        });
+      }
+    },
+    onFilterChange({ activeFilters }) {
+      this.activeFilters = activeFilters;
+    },
+    onSortCompare(a, b, key) {
+      if (key === 'severity') {
+        return this.sortStatus(a, b, key);
+      }
+    },
+    onTableRowAction(action, { uri }) {
+      if (action === 'delete') {
+        this.$bvModal
+          .msgBoxConfirm(this.$tc('pageEventLogs.modal.deleteMessage'), {
+            title: this.$tc('pageEventLogs.modal.deleteTitle'),
+            okTitle: this.$t('global.action.delete'),
+            cancelTitle: this.$t('global.action.cancel'),
+          })
+          .then((deleteConfirmed) => {
+            if (deleteConfirmed) this.deleteLogs([uri]);
+          });
+      }
+    },
+    onBatchAction(action) {
+      if (action === 'delete') {
+        const uris = this.selectedRows.map((row) => row.uri);
+        this.$bvModal
+          .msgBoxConfirm(
+            this.$tc(
+              'pageEventLogs.modal.deleteMessage',
+              this.selectedRows.length
+            ),
+            {
+              title: this.$tc(
+                'pageEventLogs.modal.deleteTitle',
+                this.selectedRows.length
+              ),
+              okTitle: this.$t('global.action.delete'),
+              cancelTitle: this.$t('global.action.cancel'),
+            }
+          )
+          .then((deleteConfirmed) => {
+            if (deleteConfirmed) {
+              if (this.selectedRows.length === this.allLogs.length) {
+                this.$store
+                  .dispatch(
+                    'eventLog/deleteAllEventLogs',
+                    this.selectedRows.length
+                  )
+                  .then((message) => this.successToast(message))
+                  .catch(({ message }) => this.errorToast(message));
+              } else {
+                this.deleteLogs(uris);
+              }
+            }
+          });
+      }
+    },
+    onChangeDateTimeFilter({ fromDate, toDate }) {
+      this.filterStartDate = fromDate;
+      this.filterEndDate = toDate;
+    },
+    onFiltered(filteredItems) {
+      this.searchTotalFilteredRows = filteredItems.length;
+    },
+    // Create export file name based on date
+    exportFileNameByDate(value) {
+      let date = new Date();
+      date =
+        date.toISOString().slice(0, 10) +
+        '_' +
+        date.toString().split(':').join('-').split(' ')[4];
+      let fileName;
+      if (value === 'export') {
+        fileName = 'event_log_';
+      } else {
+        fileName = 'all_event_logs_';
+      }
+      return fileName + date;
+    },
+    resolveLogs() {
+      this.$store
+        .dispatch('eventLog/resolveEventLogs', this.selectedRows)
+        .then((messages) => {
+          messages.forEach(({ type, message }) => {
+            if (type === 'success') {
+              this.successToast(message);
+            } else if (type === 'error') {
+              this.errorToast(message);
+            }
+          });
+        });
+    },
+    unresolveLogs() {
+      this.$store
+        .dispatch('eventLog/unresolveEventLogs', this.selectedRows)
+        .then((messages) => {
+          messages.forEach(({ type, message }) => {
+            if (type === 'success') {
+              this.successToast(message);
+            } else if (type === 'error') {
+              this.errorToast(message);
+            }
+          });
+        });
+    },
+  },
+};
+</script>
diff --git a/src/views/SystemDescription/SystemEventLogs/index.js b/src/views/SystemDescription/SystemEventLogs/index.js
new file mode 100644
index 00000000..abe245ae
--- /dev/null
+++ b/src/views/SystemDescription/SystemEventLogs/index.js
@@ -0,0 +1,2 @@
+import SystemEventLogs from './SystemEventLogs.vue';
+export default SystemEventLogs;