Styles refactoring (#1278)

32 files changed, 2505 insertions, 165 deletions

diff --git a/docs/_static/css/breadcrumbs.css b/docs/_static/css/breadcrumbs.css
new file mode 100644
index 00000000..bdc91993
--- /dev/null
+++ b/docs/_static/css/breadcrumbs.css
@@ -0,0 +1,165 @@
+.wy-breadcrumbs {
+
+  & > li,
+  & > li a {
+    color: #636A6D;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 500;
+    letter-spacing: -0.5px;
+    height: 26px;
+  }
+
+  & > li a {
+    padding: 0 5px 0 0;
+  }
+
+  & > li:nth-child(1) {
+    visibility: hidden;
+    position: relative;
+    padding-left: 0;
+  }
+
+  & > li > .icon-home::after {
+    content: url('../images/breadcrumbs-icon.svg');
+    visibility: visible;
+    top: 6px;
+    position: absolute;
+  }
+
+  & > li > .icon-home::before {
+    padding-right: 0;
+    content: 'Home';
+    visibility: visible;
+    font-family: 'Roboto', sans-serif;
+    letter-spacing: -0.5px;
+    font-weight: 500;
+  }
+
+  & > li:nth-child(n + 1) {
+    font-weight: 500;
+    position: relative;
+  }
+
+  & > li:nth-child(n + 1)::before {
+    display: none;
+  }
+
+  & > li:nth-last-child(2) {
+    color: #121010;
+  }
+
+  & > li:nth-last-child(2)::after,
+  & > li:nth-last-child(1)::after {
+    display: none !important
+  }
+
+  & > li:nth-child(n + 1)::after {
+    content: url('../images/breadcrumbs-icon.svg');
+    top: 0;
+    position: absolute;
+    width: 20px;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #fff;
+  }
+  
+  & > li:last-of-type:has(a),
+  & > li:last-of-type:has(a) a {
+    font-family: 'Archivo', sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    color: #fff;
+    background-color: #121010;
+    display: flex;
+    align-items: center;
+  }
+  
+  & > li:last-of-type:has(a) {
+    padding: 7px 10px;
+    border-radius: 4px;
+    height: 30px;
+  }
+  
+  & > li:last-of-type:has(a) a {
+    max-height: 100%;
+  }
+  
+  & > li:last-of-type:has(a) a::before {
+    content: url('../images/github.svg');
+    margin-right: 4px;
+    display: flex;
+    align-items: center;
+  }
+  
+  & > li:last-of-type::before {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 375px) {
+
+  .wy-breadcrumbs {
+    & > li > .icon-home::after {
+      right: -2px;
+    }
+
+    & > li:nth-child(n + 1)::after {
+      right: -13px;
+    }
+  }
+
+  .wy-breadcrumbs > li {
+    padding: 5px 5px 5px 0;
+  }
+
+  .wy-breadcrumbs > li,
+  .wy-breadcrumbs > li a {
+    font-size: 14px;
+  }
+
+  .wy-breadcrumbs > li > .icon-home::before {
+    font-size: 14px;
+  }
+}
+
+@media screen and (min-width: 376px) {
+  .wy-breadcrumbs {
+    & > li > .icon-home::after {
+      right: -8px;
+    }
+
+    & > li:nth-child(n + 1)::after {
+      right: -13px;
+    }
+  }
+
+  .wy-breadcrumbs > li {
+    padding: 5px 5px 5px 10px;
+  }
+
+  .wy-breadcrumbs > li,
+  .wy-breadcrumbs > li a {
+    font-size: 16px;
+  }
+
+  .wy-breadcrumbs > li > .icon-home::before {
+    font-size: 16px;
+  }
+}
+
+@media screen and (max-width: 991px) {
+  li.wy-breadcrumbs-aside {
+    display: none !important;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  ul.wy-breadcrumbs:has(li + li + li + li) li.wy-breadcrumbs-aside {
+    margin: 24px 0 16px;
+    max-width: 140px;
+    float: none;
+  }
+}
diff --git a/docs/_static/css/code-snippets.css b/docs/_static/css/code-snippets.css
new file mode 100644
index 00000000..0ae5464d
--- /dev/null
+++ b/docs/_static/css/code-snippets.css
@@ -0,0 +1,229 @@
+.rst-content {
+  & div[class^=highlight],
+  & pre.literal-block {
+    border: none;
+    background: linear-gradient(#FF9000, #FFBF12);
+    border-radius: 8px;
+    padding-left: 5px;
+  }
+
+  & div[class^=highlight] div[class^=highlight],
+  & pre.literal-block div[class^=highlight] {
+    background: #525659 !important;
+    border-radius: 0;
+    border: none;
+    padding: 0;
+    position: relative;
+  }
+
+  & .linenodiv pre, 
+  & div[class^=highlight] pre, 
+  & pre.literal-block {
+    font-size: 16px;
+    font-family: 'Roboto Mono', monospace;
+    font-weight: 400;
+    letter-spacing: -0.04em;
+    color: #fff;
+    line-height: 1.2;
+    overflow-x: scroll;
+    scroll-behavior: smooth;
+  }
+
+  & .linenodiv pre::-webkit-scrollbar, 
+  & div[class^=highlight] pre::-webkit-scrollbar, 
+  & pre.literal-block::-webkit-scrollbar {
+    height: 3px;
+    color: #99A0A5 transparent;
+  }
+
+  & .linenodiv pre::-webkit-scrollbar-track, 
+  & div[class^=highlight] pre::-webkit-scrollbar-track, 
+  & pre.literal-block::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 8px;
+    margin: 0 18px;
+  }
+
+  & .linenodiv pre::-webkit-scrollbar-thumb, 
+  & div[class^=highlight] pre::-webkit-scrollbar-thumb, 
+  & pre.literal-block::-webkit-scrollbar-thumb {
+    background-color: #99A0A5;
+    border-radius: 8px;
+    margin: 0 10px;
+  }
+
+}
+
+/* copy code div */
+.highlight > .copyDiv {
+  display: flex;
+  align-items: center;
+  transition: transform linear 250ms, width linear 250ms;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  padding: 5px 12px;
+  justify-content: end;
+  background-color: #393C3F;
+  height: 32px;
+  margin-top: 4px;
+}
+
+.copiedNotifier > span {
+  font-size: 14px !important;
+  color: #fff !important;
+  text-align: center;
+  margin-bottom: 0;
+}
+
+.highlight {
+
+  & .kn {
+    color: #ccffda;
+  }
+  
+  & .nn {
+    color: #d0eefb;
+  }
+  
+  & .o {
+    color: #e6e6e6;
+  }
+  
+  & .s2 {
+    color: #dbe6f0;
+  }
+  
+  & .s1 {
+    color: #dbe6f0;
+  }
+  
+  & .nb {
+    color: #ccffda;
+  }
+  
+  & .c1 {
+    color: #dcebef;
+    font-style: italic;
+  }
+  
+  & .nt {
+    color: #8db1fe;
+    font-weight: bold;
+  }
+  
+  & .k {
+    color: #ccffda;
+    font-weight: bold;
+  }
+  
+  & .se {
+    color: #dbe6f0;
+    font-weight: bold;
+  }
+  
+  & .nv {
+    color: #eed7f4;
+  }
+  
+  & .gh {
+    color: #ccccff;
+    font-weight: bold;
+  }
+  
+  & .gd {
+    color: #ffcccc;
+  }
+  
+  & .gi {
+    color: #ccffcc;
+  }
+  
+  & .gu {
+    color: #ffc2ff;
+    font-weight: bold;
+  }
+  
+  & .na {
+    color: #81c0ff;
+  }
+  
+  & .s {
+    color: #dbe6f0;
+  }
+  
+  & .ni {
+    color: #f4d4cd;
+    font-weight: bold;
+  }
+  
+  & .cm {
+    color: #d5e7ec;
+    font-style: italic;
+  }
+  
+  & .cp {
+    color: #c2ffd3;
+  }
+  
+  & .mi {
+    color: #cef3e0;
+  }
+  
+  & .nf {
+    color: #c5d4fc;
+  }
+  
+  & .kc {
+    color: #c2ffd3;
+    font-weight: bold;
+  }
+  
+  & .ch {
+    color: #d5e7ec;
+    font-style: italic;
+  }
+  
+  & .mf {
+    color: #d6f5e6;
+  }
+  
+  & .go {
+    color: #e6e6e6;
+  }
+  
+  & .m {
+    color: #d6f5e6;
+  }
+}
+
+.rst-content blockquote {
+  margin: 0
+}
+
+@media screen and (max-width: 991px) {
+  .rst-content .linenodiv pre, 
+  .rst-content div[class^=highlight] pre, 
+  .rst-content pre.literal-block {
+    padding: 16px 20px;
+  }
+
+  .copyDiv > p {
+    margin: 0 10px 0 0;
+    color: #fff;
+    font-family: 'Roboto', sans-serif;
+    font-size: 14px;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .rst-content .linenodiv pre, 
+  .rst-content div[class^=highlight] pre, 
+  .rst-content pre.literal-block {
+    padding: 24px 36px 18px;
+  }
+
+  .copyDiv > p {
+    display: none;
+  }
+}
diff --git a/docs/_static/css/configuration/index.css b/docs/_static/css/configuration/index.css
new file mode 100644
index 00000000..a759ea45
--- /dev/null
+++ b/docs/_static/css/configuration/index.css
@@ -0,0 +1,23 @@
+#configuration-guide > div > ul > li {
+  list-style: none !important;
+  position: relative;
+}
+
+#configuration-guide > div > ul > li::before {
+  content: '';
+  position: absolute;
+  top: 9px;
+  left: -15px;
+  width: 6px;
+  height: 6px;
+  background-color: #000;
+  border-radius: 50%;
+}
+
+#configuration-guide .toctree-l1 > a {
+  color: #FD8F01;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: -0.5px;
+}
\ No newline at end of file
diff --git a/docs/_static/css/custom.css b/docs/_static/css/custom.css
index e934fb54..cdb036d2 100644
--- a/docs/_static/css/custom.css
+++ b/docs/_static/css/custom.css
@@ -1,215 +1,535 @@
-div.card-header {
-  font-weight: bold;
-  background: #fdab10;
-}
-
-span.opcmd,
-span.cfgcmd {
-    font-weight: bold;
-    background-color: transparent;
-    border: none;
-    padding: 0;
-    font-size: 100% !important;
-    max-width: 100%;
-    color: #000;
-    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",Courier,monospace;
-}
-
-span.cfgcmd:before {
-  content: "#";
-  margin-right: 0px;
-}
-
-td a.cmdlink span.cfgcmd:before,
-td a.cmdlink span.opcmd:before  {
-  content: "";
+p.devwarning {
+	top: 10px;
+	position: sticky;
+	margin: 10px 10px 10px 310px;
+	padding: 5px 10px;
+	border-radius: 4px;
+	letter-spacing: 1px;
+	color: #000;
+	text-align: center;
+	background: #d40
+		repeating-linear-gradient(
+			135deg,
+			transparent,
+			transparent 56px,
+			rgba(255, 255, 255, 0.2) 56px,
+			rgba(255, 255, 255, 0.2) 112px
+		);
+	background-color: #fdab10;
+}
+
+/* main page */
+.wy-body-for-nav {
+	background: #fff;
+  overflow-y: hidden
+}
+
+.wy-grid-for-nav {
+	margin: 0 auto;
+	position: relative;
+	padding-top: 80px;
+	display: flex;
+
+	&:has(nav.wy-nav-side.shift) {
+		background: #E7E7E7;
+	}
+
+	&:not(:has(nav.shift)) > section > div.overlay {
+		background-color: transparent
+	}
+	
+	&:not(:has(nav.shift)) section > div.overlay > div .wy-breadcrumbs > li a::before,
+	&:not(:has(nav.shift)) section > div.overlay > div .wy-breadcrumbs > li a::after,
+	&:not(:has(nav.shift)) section > div.overlay > div .wy-breadcrumbs > li::before,
+	&:not(:has(nav.shift)) section > div.overlay > div .wy-breadcrumbs > li::after {
+		background-color: #fff;
+	}
+}
+
+.wy-nav-content-wrap {
+	width: 100%;
+	margin-left: auto;
+	background-color: transparent;
 }
 
-td a.cmdlink,
-td a.cmdlink {
-  margin-left: 0px;
-}
+.wy-nav-content {
+	max-width: 100%;
+	background-color: transparent;
+
+	&.overlay > div > div[role=navigation] .wy-breadcrumbs > li a::before,
+	&.overlay > div > div[role=navigation] .wy-breadcrumbs > li a::after,
+	&.overlay > div > div[role=navigation] .wy-breadcrumbs > li::before,
+	&.overlay > div > div[role=navigation] .wy-breadcrumbs > li::after,
+	&.overlay > div > div.document div.sd-card,
+	&.overlay > div > div.document div.sd-card-title {
+		background-color: #E7E7E7;
+	} 
+
+	&.overlay > div.rst-content > footer > .rst-footer-buttons > a {
+		background-color: #E7E7E7 !important;
+	}
+
+}
+
+/* main-page content */
+#vyos-user-guide {
+	& .sd-container-fluid {
+		padding-left: 0;
+		padding-right: 0;
+	}
+	
+	& .sd-container-fluid > .docutils > .sd-col {
+		max-width: 387px;
+		box-shadow: none;
+		flex: none;
+		width: 100% !important;
+		padding: 0 !important;
+		margin-top: 0 !important;
+	
+		& .sd-card-body .sd-card-text {
+			min-height: 120px;
+		}
+	}
+	
+	& > div.sd-container-fluid {
+		margin-top: 30px;
+
+		& > div.docutils {
+			margin: 0;
+			display: grid;
+		}
+	}
+	
+	& > .pb-4 {
+		padding-bottom: 1.4rem !important;
+	}
+}
+
+div.sd-card-title {
+	font-weight: bold;
+	background: #fff;
+	border: none;
+	font-family: 'Archivo', sans-serif;
+}
+
+.sd-card {
+	background: #fff;
+	border: none;
+	border-bottom: 1px solid #ffae12;
+	border-radius: 0;
+	box-shadow: none !important;
+}
+
+.sd-card-body {
+	padding: 0;
+}
+
+.sd-card-title,
+.sd-card-text {
+	padding: 0;
+}
+
+.internal > .std-ref,
+.line > .external {
+	color: #fd8f01;
+	font-family: 'Roboto', sans-serif;
+	font-size: 16px;
+	letter-spacing: -0.5px;
+	font-weight: 400;
+}
+
+img {
+	height: auto !important;
+	border: 1px solid #C4C9CC;
+	margin-bottom: 20px !important;
+	border-radius: 8px;
+}
+
+footer {
+	text-align: center;
+	font-family: 'Roboto', sans-serif;
+	font-size: 16px;
+	font-weight: 400;
+	letter-spacing: -0.5px;
+	color: #636a6d;
+
+	& > a {
+		color: #fd8f01;
+		font-family: 'Roboto', sans-serif;
+		font-size: 16px;
+		letter-spacing: -0.5px;
+		font-weight: 400;
+	}
+
+	& > hr {
+		display: none;
+	}
+	
+	& p {
+		margin-top: 105px;
+		text-align: center;
+		font-family: 'Roboto', sans-serif;
+		font-size: 16px;
+		font-weight: 400;
+		letter-spacing: -0.5px;
+		color: #636a6d;
+
+		&:has(a) > a,
+		&:has(a) > a:visited {
+			color: #636a6d;
+		}
+	}
+	
+}
+
+.rst-versions {
+	position: static;
+	background: transparent;
+	width: 262px;
+	display: block;
+
+	&.shift-up {
+		background: #525659;
+		z-index: 100;
+		position: absolute;
+		left: 19px;
+		bottom: 30px;
+		border-radius: 6px;
+		overflow: hidden;
+	}
+	
+	& .rst-current-version {
+		background-color: #525659;
+		color: #01D38E; 
+		border-radius: 6px;
+		width: 264px;
+		font-family: 'Roboto', sans-serif;
+		letter-spacing: -0.5px;
+	}
+
+	& .rst-current-version span.fa-book {
+		color: #fff !important;
+		font-family: 'Roboto', sans-serif;
+		letter-spacing: -0.5px;
+	}
+}
+
+.rst-other-versions {
+	& dt {
+		color: #808080;
+		font-family: 'Roboto', sans-serif;
+		font-size: 16px;
+		letter-spacing: -0.5px;
+	}
+	
+	& small {
+		font-family: 'Roboto', sans-serif;
+		color: #fff;
+
+		& a {
+			font-family: 'Roboto', sans-serif;
+			letter-spacing: -0.5px;
+			color: #fd8f01;
+		}
+	}
+	
+}
+
+div#rtd-sidebar {
+	display: none;
+}
+
+.wy-nav-content-opened-sidebar {
+	padding: 25px 0 27px 40px;
+}
+
+.wy-nav-content-wrap-opened-sidebar {
+	max-width: calc(100% - 294px);
+	margin-left: 294px;
+}
+
+.wy-nav-content-closed-sidebar {
+	padding: 26px 0 !important;
+}
+
+.wy-nav-content-wrap-closed-sidebar {
+	max-width: 100% !important;
+	width: 100% !important;
+}
+
+html {
+  scroll-padding-top: 90px !important;
+}
+
+.overlayDiv {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 111;
+	background-color: #121010;
+	opacity: 0.1;
+}
+
+.iframe-container {
+  position: relative;
+  width: 100%;
+  background-color: #f0f0f0; 
+	z-index: 201;
+	overflow: hidden;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+	
+	& iframe {
+		width: 100%;
+		height: 100%;
+		border: none;
+		overflow: hidden;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+	}
+	
+}
+
+@media screen and (min-width: 320px) and (max-width: 575px) {
+	#vyos-user-guide .container > .row {
+		grid-gap: 0px 15px
+	}
+}
+
+@media screen and (max-width: 575px) {
+	.wy-nav-content-wrap,
+	.wy-nav-content-wrap.shift {
+		max-width: 100%;
+		width: 100%
+	}
+
+	.wy-nav-content-wrap.shift {
+		padding: 70px 15px 0;
+		overflow: auto;
+	}
+
+	.wy-nav-side {
+		display: none;
+		min-height: unset;
+	}
+
+	.wy-nav-side.shift {
+		display: inherit;
+		width: 100%;
+		max-width: 320px;
+	}
 
-tr td p {
-  margin-bottom:0px
- }
+	#vyos-user-guide .container > .docutils > .p-2 {
+		max-width: 100%;
+		&:nth-child(2n) {
+			margin-left: 0;
+		}
 
-span.opcmd:before {
-  content: "$";
-  margin-right: 0px;
-}
+		& .card-body .card-text {
+			min-height: 80px;
+		}
+	}
 
-.cfgcmd-heading {
-    display: inline-block;
-    margin: 6px 0;
-    font-size: 90%;
-    line-height: normal;
-    background: #f0d481;
-    color: #2980B9;
-    border-top: solid 3px #6ab0de;
-    border-top-width: 3px;
-    border-top-style: solid;
-    border-top-color: #FF9302;
-    padding: 6px;
-}
+	.wy-nav-content-wrap-opened-sidebar {
+		max-width: 100%;
+		margin-left: unset;
+	}
 
-.opcmd-heading {
-    display: inline-block;
-    margin: 6px 0;
-    font-size: 90%;
-    line-height: normal;
-    background: #e7f2fa;
-    color: #2980B9;
-    border-top: solid 3px #6ab0de;
-    border-top-width: 3px;
-    border-top-style: solid;
-    border-top-color: rgb(106, 176, 222);
-    padding: 6px;
-}
+	dl.footnote > dt {
+		padding-left: 0 !important;
+	}
 
-.opcmd-body,
-.cfgcmd-body {
-    margin: 6px 0;
-    padding-left: 12px;
+	.wy-grid-for-nav {
+		padding: 80px 20px 0;
+		max-width: 738px;
+	}
+}
+
+@media screen and (min-width: 575px) and (max-width: 768px) {
+	.wy-nav-content-wrap,
+	.wy-nav-content-wrap.shift {
+		max-width: 100%;
+		width: 100%
+	}
+
+	.wy-nav-content-wrap.shift {
+		padding: 70px 15px 0;
+		overflow: auto;
+		width: calc(100% - 294px);
+
+	}
+
+	.wy-nav-side {
+		display: none;
+		min-height: unset;
+	}
+
+	.wy-nav-side.shift {
+		display: inherit;
+		width: 294px;
+	}
+}
+
+@media screen and (min-width: 575px) {
+	#vyos-user-guide div.sd-container-fluid > div.docutils {
+		grid-gap: 30px;
+		grid-template-columns: 1fr 1fr;
+	}
 }
 
+@media screen and (max-width: 767px) {
+	.wy-nav-content-wrap,
+	.wy-nav-content-wrap.shift {
+		margin: 0 auto;
+	}
 
+	.wy-nav-top {
+		background-color: #fdab10;
+	}
 
-.cfgcmd-heading .cmdlink:after,
-.opcmd-heading .cmdlink:after{
-    content: "";
-    font-family: FontAwesome
-}
-
+	p.devwarning {
+		margin: 10px 10px 10px 10px;
+	}
 
-.cfgcmd-heading:not(:hover) .cmdlink,
-.opcmd-heading:not(:hover) .cmdlink {
-    display: none;
-}
+	#vyos-user-guide .container {
+		max-width: none;
+	}
 
-.defaultvalue{
-  font-size: 90%;
-  color: gray;
-  margin-bottom: 5px;
+	.wy-nav-content-wrap .wy-nav-content {
+		padding: 0 0 26px 0;
+	}
 
-}
+	.wy-grid-for-nav {
+		padding: 80px 15px 0;
+		max-width: 738px;
+	}
 
-a.cmdlink {
-    font-size: 80%;
-    margin-left: 6px;
+	.rst-content > div > hr {
+		display: none;
+	}
 }
 
-a.cmdlink span{
-    color: #2980B9;
-}
+@media screen and (min-width: 768px) {
+	.wy-nav-content-wrap {
+		width: calc(100% - 292px);
+	}
 
-a.cmdlink span:hover{
-    color: #3091d1;
+	.rst-content > div > hr {
+		margin: 16px 0 26px 0;
+	}
 }
 
-.wy-nav-content {
-  max-width : none;
-}
+@media screen and (min-width: 768px) and (max-width: 991px) {
+	.wy-nav-content {
+		padding: 25px 0 27px 40px;
+	}
 
-.wy-tray-container li.wy-tray-item-info {
-  background : #409ad5;
-}
+	.wy-nav-content-wrap {
+		max-width: calc(100% - 294px);
+	}
 
-.wy-table-responsive {
-  overflow : visible !important;
+	.wy-grid-for-nav {
+		max-width: 738px;
+		padding: 70px 15px 0;
+	}
 }
 
-.wy-table-responsive table td {
-  white-space : normal !important;
-}
+@media screen and (min-width: 992px) and (max-width: 1266px) {
+	.wy-nav-content {
+		padding: 25px 0 27px 40px;
+	}
 
-.wy-menu-vertical header,
-.wy-menu-vertical p.caption {
-  color : #ffcc00 !important;
-}
+	.wy-nav-content-wrap {
+		max-width: calc(100% - 294px);
+	}
 
-.wy-menu-vertical li.current a {
-  color : #040077 !important;
+	.wy-grid-for-nav {
+		max-width: calc(100% - 130px);
+	}
 }
 
-.wy-menu-vertical li ul li a {
-  color : #ffffff !important;
-}
+@media screen and (min-width: 1266px) {
+	.wy-nav-content {
+		padding: 25px 0 27px 40px;
+	}
 
-.wy-menu-vertical a {
-  color : #ffffff !important;
-}
+	.wy-nav-content-wrap {
+		max-width: calc(100% - 294px);
+	}
 
-.wy-menu-vertical a:active {
-  background-color : #409ad5 !important;
+	.wy-grid-for-nav {
+		max-width: 1140px;
+	}
 }
 
-.wy-side-nav-search {
-  background-color : #ffffff !important;
-}
+@media screen and (min-width: 1500px) {
+	.wy-nav-content {
+		padding: 25px 0 27px 40px;
+	}
 
-.wy-side-nav-search img {
-  background-color : #ffffff !important;
-}
+	.wy-nav-content-wrap {
+		max-width: calc(100% - 294px);
+	}
 
-.wy-side-nav-search > div.version {
-  color : #000000 !important;
+	.wy-grid-for-nav {
+		max-width: 1340px;
+	}
 }
 
-.wy-side-nav-search>a,
-.wy-side-nav-search .wy-dropdown>a {
- color:#000000;
- font-size:100%;
- font-weight:bold;
- display:inline-block;
- padding:4px 6px;
- margin-bottom:.809em
-}
+@media screen and (max-height: 500px) {
+	.rst-versions {
+		margin-top: 10px;
+	}
 
-.wy-nav-top {
-  background-color : #ffffff;
+	.closeButtonDivLine {
+		bottom: 45px;
+	}
 }
 
-.wy-nav-top img {
-  background-color : #000000 !important;
-}
+@media screen and (min-height: 501px) and (max-height: 1000px) {
+	.rst-versions {
+		margin-top: 10px;
+	}
 
-.rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td.coverage-ok,
-.rst-content table.docutils td.coverage-ok {
-  color: green;
-  text-align: center;
+	.closeButtonDivLine {
+		bottom: 55px;
+	}
 }
 
-.rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td.coverage-fail,
-.rst-content table.docutils td.coverage-fail {
-  color: red;
-  text-align: center;
+@media screen and (min-height: 1001px) and (max-height: 1300px) {
+	.rst-versions {
+		margin-top: 10px;
+	}
 
+	.closeButtonDivLine {
+		bottom: 60px;
+	}
 }
 
+@media screen and (min-height: 1301px) and (max-height: 1600px) {
+	.rst-versions {
+		margin-top: 25px;
+	}
 
-p.devwarning {
-	top: 10px;
-	position: sticky;
-	margin: 10px 10px 10px 310px;
-	padding: 5px 10px;
-	border-radius: 4px;
-	letter-spacing: 1px;
-	color: #000;
-	text-align: center;
-	background: #d40 repeating-linear-gradient( 135deg, transparent, transparent 56px, rgba(255, 255, 255, 0.2) 56px, rgba(255, 255, 255, 0.2) 112px );
-  background-color: #fdab10;
+	.closeButtonDivLine {
+		bottom: 75px;
+	}
 }
 
+@media screen and (min-height: 1601px) {
+	.rst-versions {
+		margin-top: 35px;
+	}
 
-@media screen and (max-width: 768px) {
-  .wy-nav-top{
-    background-color: #fdab10;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  p.devwarning {
-    margin: 10px 10px 10px 10px;
-  }
+	.closeButtonDivLine {
+		bottom: 85px;
+	}
 }
\ No newline at end of file
diff --git a/docs/_static/css/headers.css b/docs/_static/css/headers.css
new file mode 100644
index 00000000..48b78a41
--- /dev/null
+++ b/docs/_static/css/headers.css
@@ -0,0 +1,134 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-family: 'Archivo', sans-serif !important;
+  font-weight: 700 !important;
+  letter-spacing: -0.02em !important;
+  display: flex;
+  color: #121010;
+  margin-bottom: 15px !important;
+}
+
+h2,
+h3,
+h4,
+h5 {
+  margin-top: 15px !important;
+}
+
+h1:has(a) > a,
+h2:has(a) > a,
+h3:has(a) > a,
+h4:has(a) > a,
+h5:has(a) > a {
+  display: flex !important;
+  position: relative;
+  padding-left: 5px;
+} 
+
+@media screen and (max-width: 767px) {
+  h1 {
+    font-size: 28px !important;
+  }
+  
+  h2 {
+    font-size: 22px !important;
+  }
+  
+  h3 {
+    font-size: 20px !important;
+  }
+  
+  h4 {
+    font-size: 18px !important;
+  } 
+  
+  h5 {
+    font-size: 16px !important;
+  } 
+}
+
+@media screen and (min-width: 768px) {
+  h1 {
+    font-size: 48px !important;
+  }
+  
+  h2 {
+    font-size: 34px !important;
+  }
+  
+  h3 {
+    font-size: 24px !important;
+  }
+  
+  h4 {
+    font-size: 22px !important;
+  } 
+
+  h5 {
+    font-size: 20px !important;
+  }
+}
+
+@media screen and (max-width: 991px) {
+  h1 {
+    margin-top: 15px;
+  } 
+
+  a.headerlink {
+    opacity: 1 !important;
+    color: transparent;
+  }
+
+  h1:has(a):hover > a::after,
+  h2:has(a):hover > a::after,
+  h3:has(a):hover > a::after,
+  h4:has(a):hover > a::after,
+  h5:has(a):hover > a::after {
+    content: none !important;
+    display: none !important;
+  }
+
+  h1:has(a) > a::before,
+  h2:has(a) > a::before,
+  h3:has(a) > a::before,
+  h4:has(a) > a::before,
+  h5:has(a) > a::before {
+    content: url('../images/cmnd-link-icon.svg');
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 25%;
+    height: 100%;
+    width: 20px;
+    z-index: 2;
+    background-color: transparent;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  h1:has(a):hover > a::after,
+  h2:has(a):hover > a::after,
+  h3:has(a):hover > a::after,
+  h4:has(a):hover > a::after,
+  h5:has(a):hover > a::after {
+    content: url('../images/cmnd-link-icon.svg');
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 20px;
+    z-index: 2;
+    background-color: transparent;
+  }
+
+  a.headerlink {
+    color: transparent;
+  }
+}
+
diff --git a/docs/_static/css/hints.css b/docs/_static/css/hints.css
new file mode 100644
index 00000000..fd7553f5
--- /dev/null
+++ b/docs/_static/css/hints.css
@@ -0,0 +1,123 @@
+div {
+  &.note,
+  &.hint,
+  &.warning,
+  &.error,
+  &.seealso,
+  &.tip {
+    border-radius: 8px;
+
+    & > .admonition-title {
+      padding: 5px 8px;
+      border-radius: 6px;
+      font-family: 'Archivo', sans-serif !important;
+      font-size: 14px !important;
+      letter-spacing: -0.02em !important;
+      font-weight: 600 !important;
+      margin: -12px -16px 12px;
+    }
+
+    & > .admonition-title::before {
+      content: url('../images/note-icon.svg');
+    }
+
+    & > .highlight-none {
+      margin-top: 10px;
+    }
+
+    & > p:nth-child(1n+2) {
+      font-family: 'Roboto', sans-serif;
+      font-size: 16px;
+      letter-spacing: -0.5px;
+      color: #525659;
+      font-weight: 400;
+      margin: 10px 0 0 0  !important;
+    }
+  }
+
+  &.note,
+  &.seealso {
+    background-color: #F5FCFF !important;
+  }
+
+  &.note:has(a.reference),
+  &.hint:has(a.reference),
+  &.warning:has(a.reference),
+  &.error:has(a.reference),
+  &.seealso:has(a.reference),
+  &.tip:has(a.reference) {
+    & a.reference,
+    & a.reference span {
+      color: #508EEB !important;
+    }
+  }
+
+  &.note,
+  &.seealso {
+    & > .admonition-title {
+      background-color: #CCEFFB !important;
+      color: #356E81 !important;
+    }
+  }
+
+  &.hint,
+  &.tip {
+    background-color: #F7FDFB !important;
+
+    & > .admonition-title {
+      background-color: #C6F0E3 !important;
+      color: #3F6461 !important;
+    }
+  }
+
+  &.warning,
+  &.error {
+    background-color: #FDF7F7 !important;
+
+    & > .admonition-title {
+      background-color: #F0C6C6 !important;
+      color: #8E2F2F !important;
+    }
+  }
+
+}
+
+#running-on-bare-metal div.note > p:nth-child(2) {
+  padding: 8px 12px 0 12px;
+}
+
+@media screen and (max-width: 575px) {
+  div.note,
+  div.hint,
+  div.warning,
+  div.error,
+  div.seealso,
+  div.tip {
+    padding: 24px 32px !important;
+    border-radius: 8px;
+  }
+}
+
+@media screen and (min-width: 576px) and (max-width: 991px) {
+  div.note,
+  div.hint,
+  div.warning,
+  div.error,
+  div.seealso,
+  div.tip {
+    padding: 24px 32px !important;
+    border-radius: 8px;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  div.note,
+  div.hint,
+  div.warning,
+  div.error,
+  div.seealso,
+  div.tip {
+    padding: 24px 32px !important;
+    border-radius: 8px;
+  }
+}
diff --git a/docs/_static/css/installation/running-on-bare-metal.css b/docs/_static/css/installation/running-on-bare-metal.css
new file mode 100644
index 00000000..25ad7bbb
--- /dev/null
+++ b/docs/_static/css/installation/running-on-bare-metal.css
@@ -0,0 +1,11 @@
+.toctree-l1 {
+  background-color: transparent;
+}
+
+.current > .current > .internal {
+  background-color: #fff;
+  color: #FD8F01;
+  border: transparent;
+  padding: 11px 12px 11px 28px;
+  border: none !important;
+}
\ No newline at end of file
diff --git a/docs/_static/css/leftSidebar.css b/docs/_static/css/leftSidebar.css
new file mode 100644
index 00000000..87112121
--- /dev/null
+++ b/docs/_static/css/leftSidebar.css
@@ -0,0 +1,371 @@
+nav.wy-nav-side {
+  padding-bottom: 1em !important;
+}
+
+.wy-nav-side {
+  padding: 20px 19px;
+  width: 294px;
+  height: calc(100vh - 50px);
+}
+
+.wy-form input {
+  height: 32px;
+}
+
+.wy-form input::placeholder {
+  font-family: 'Archivo', sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  letter-spacing: -0.02em;
+}
+
+.wy-side-nav-search {
+  width: 100%;
+  padding: 0;
+  margin-bottom: 0;
+
+  & > .icon-home,
+  & > .version {
+    display: none
+  }
+
+  & input {
+    border-color: #C4C9CC;
+
+    &::placeholder {
+      color: #8D9499;
+    }
+  }
+}
+
+.wy-nav-side,
+.wy-nav-side .wy-side-nav-search {
+  background-color: #F6F7F7
+}
+
+ul.current > li.toctree-l1[aria-expanded=false] > a.current {
+  padding-left: 25px;
+  color: #FD8F01;
+
+  & button.toctree-expand::before {
+    content: '+';
+    color: #FD8F01;
+  }
+}
+
+ul.current > li.toctree-l1[aria-expanded=false] > a.internal:has( + ul[aria-expanded=false]) {
+  padding-left: 25px;
+  color: #FD8F01;
+
+  & button.toctree-expand::before {
+    content: '+';
+    color: #FD8F01;
+  }
+}
+
+ul.current > li.toctree-l1.current > ul > li.toctree-l2[aria-expanded=false]:has(ul > li > a.current) > a.internal {
+  color: #FD8F01;
+  padding-top: 11px;
+  padding-bottom: 11px;
+  padding-right: 12px;
+}
+
+ul.current > li.toctree-l1.current > 
+  ul > li.toctree-l2.current > ul > li.toctree-l3[aria-expanded=false]
+  > a.current {
+  color: #FD8F01;
+  padding-top: 11px;
+  padding-bottom: 11px;
+  padding-right: 12px;
+}
+
+ul.current > li.toctree-l1.current > 
+  ul > li.toctree-l2.current > ul > li.toctree-l3[aria-expanded=false]:has(ul > li.toctree-l4 > a.current)
+  > a.internal {
+  color: #FD8F01;
+  padding-top: 11px;
+  padding-bottom: 11px;
+  padding-right: 12px;
+}
+
+.toctree-l2 > ul > li.toctree-l3.current {
+  padding-left: 0 !important;
+  background-color: #fff;
+}
+
+.wy-menu-vertical {
+  width: 100%;
+  max-width: 292px;
+
+  & a {
+    color: #121010;
+    font-family: 'Archivo', sans-serif;
+    font-weight: 500;
+    font-size: 14px;
+    letter-spacing: -0.02em;
+    padding: 11px 12px;
+  }
+
+  & p.caption {
+    color: #8D9499;
+    font-family: 'Archivo', sans-serif;
+    font-weight: 600;
+    font-size: 14px;
+    letter-spacing: -0.02em;
+    padding: 5px 12px;
+    margin-top: 6px;
+    margin-bottom: 4px;
+    text-transform: none;
+  }
+  
+  & li.toctree-l1.current > a {
+    background-color: #fff;
+    color: #FD8F01;
+    border: transparent;
+    padding: 11px 12px;
+  }
+  
+  & > ul.current > li.toctree-l1.current > a.internal:has(+ ul) {
+    padding-left: 25px !important;
+  }
+  
+  & > ul.current > li.toctree-l1.current > a.current {
+    padding-left: 12px;
+  }
+  
+  & li.toctree-l1.current .toctree-l2 > a {
+    background-color: #fff;
+    border: transparent;
+  }
+  
+  & li.toctree-l1.current .toctree-l2 > a.internal {
+    padding-left: 35px !important;
+  }
+  
+  & li.toctree-l1.current .toctree-l2.current > a.internal:first-of-type {
+    color: #fdab10;
+  }
+  
+  & li.toctree-l1.current .toctree-l2 > a:hover {
+    background-color: #E1E4E5;
+  }
+  
+  & li.toctree-l1.current .toctree-l2 > a.current {
+    color: #fdab10;
+    padding: 11px 12px 11px 35px;
+  }
+  
+  & li.toctree-l1.current .toctree-l2 > a:hover {
+    background-color: #E1E4E5;
+  }
+  
+  & li.toctree-l2.current > a, 
+  & li.toctree-l2.current li.toctree-l3 > a {
+    background: #fff;
+    border: none;
+    padding-left: 50px;
+  }
+  
+  & li.toctree-l2.current li.toctree-l3 > a.current,
+  & li.toctree-l2.current li.toctree-l3.current > a.internal {
+    padding-left: 50px !important;
+    color: #fdab10;
+  }
+
+  & li.toctree-l3.current li.toctree-l4 > a {
+    background: #fff;
+    padding-left: 65px !important;
+    border-right: none;
+  }
+  
+  & li.toctree-l3.current li.toctree-l4 > a.current {
+    color: #fdab10;
+  }
+}
+
+.wy-menu-vertical a:hover,
+.wy-menu-vertical > ul.current > li.toctree-l1.current > a:hover,
+.wy-menu-vertical li.toctree-l1.current .toctree-l2 > a:hover,
+.wy-menu-vertical li.toctree-l2.current li.toctree-l3 > a:hover,
+.wy-menu-vertical li.toctree-l3.current li.toctree-l4 > a:hover {
+  background-color: #E1E4E5;
+}
+
+.wy-menu-vertical ul li .current > a {
+  padding: 11px 12px !important;
+}
+
+.wy-menu-vertical > ul.current[aria-expanded=true] > li.toctree-l1:has(a[aria-expanded=false]) > a {
+  padding-left: 25px;
+}
+
+.wy-menu-vertical > ul.current[aria-expanded=true] > li.toctree-l1:not(:has( ~ li:only-child a)) > a:has(.toctree-expand) {
+  padding-left: 25px;
+}
+
+.wy-side-scroll {
+  /* that makes scroll possible to the end of div */
+  height: 94%;
+}
+
+.wy-nav-top {
+  display: none;
+}
+
+.openLeftSidebarMenuButton {
+	width: 24px;
+	height: 24px;
+	cursor: pointer;
+	transition: transform 250ms linear;
+}
+
+.openLeftSidebarMenuButton:hover,
+.closeLeftSidebarMenuButton:hover {
+	transform: scale(1.05);
+}
+
+div.wy-nav-content > div.rst-content > div:has(div.openLeftSidebarMenuButton) {
+	display: flex;
+}
+
+div.wy-nav-content
+	> div.rst-content
+	> div:has(div.openLeftSidebarMenuButton)
+	> .wy-breadcrumbs {
+	margin-left: 20px;
+	width: 100%;
+}
+
+.closeButtonDivLine {
+	width: 100%;
+	display: flex;
+	position: sticky;
+	height: 30px;
+	justify-content: flex-end;
+}
+
+.closeLeftSidebarMenuButton {
+  width: 83px;
+  height: 32px;
+  margin-right: -6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #FFBF12;
+  border-radius: 4px;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  letter-spacing: -0.5px;
+  font-weight: 400;
+  color: #FFF;
+  cursor: pointer;
+  align-self: flex-end;
+	transition: transform 250ms linear;
+
+  &::before {
+    content: url('../images/close-sidebar-icon.svg');
+    height: 100%;
+    display: flex;
+    align-items: center;
+    width: 14px;
+    margin-right: 10px;
+    margin-top: 3px;
+  }
+}
+
+.additionalStylesForShift {
+  display: block !important;
+  padding-bottom: 10px !important;
+}
+
+.overlay {
+	background-color: #E7E7E7;
+}
+
+.wy-body-for-nav:has(.overlay) {
+  background-color: rgb(209,209,209);
+}
+
+.display_none {
+	display: none !important;
+}
+
+@media screen and (max-width: 575px) {
+  .wy-menu-vertical {
+    padding: 10px 0 0 0;
+  }
+}
+
+@media screen and (min-width: 576px) {
+  .wy-side-nav-search {
+    max-width: 256px;
+  }
+
+  .wy-menu-vertical {
+    padding: 10px 35px 0 0;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .wy-nav-side {
+    border-radius: 0;
+    position: fixed;
+    top: 60px;
+  }
+
+  .wy-side-scroll::-webkit-scrollbar {
+    display: none
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .wy-nav-side {
+    border-radius: 16px;
+    position: fixed;
+    left: unset;
+    top: 70px;
+    min-height: unset;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .wy-nav-side {
+    height: calc(100vh - 60px);
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .wy-nav-side {
+    height: calc(100vh - 73px);
+  }
+}
+
+@media screen and (max-height: 300px) {
+  .wy-side-scroll {
+    height: 78%;
+  }
+}
+
+@media screen and (min-height: 301px) and (max-height: 400px) {
+  .wy-side-scroll {
+    height: 82%;
+  }
+}
+
+@media screen and (min-height: 401px) and (max-height: 500px) {
+  .wy-side-scroll {
+    height: 88%;
+  }
+}
+
+@media screen and (min-height: 501px) and (max-height: 700px) {
+  .wy-side-scroll {
+    height: 90%;
+  }
+}
+
+@media screen and (min-height: 701px) {
+  .wy-side-scroll {
+    height: 94%;
+  }
+}
\ No newline at end of file
diff --git a/docs/_static/css/linkButtons.css b/docs/_static/css/linkButtons.css
new file mode 100644
index 00000000..11a48e64
--- /dev/null
+++ b/docs/_static/css/linkButtons.css
@@ -0,0 +1,57 @@
+.rst-footer-buttons {
+  .fa-arrow-circle-left {
+    padding-left: 25px;
+  } 
+
+  .fa-arrow-circle-left::before {
+    content: url('../images/arrow-left.svg');
+    position: absolute;
+    top: 10px;
+    left: 15px;
+  }
+
+  & > .btn-neutral {
+    background: #fff !important;
+    min-width: 90px;
+    height: 40px;
+    border: 2px solid #FD8F01;
+    color: #121010 !important;
+    font-family: 'Archivo', sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    position: relative;
+    text-align: left;
+    box-shadow: none;
+    transition: transform 250ms linear;
+    display: flex;
+    align-items: center;
+    padding-top: 0;
+    padding-bottom: 0;
+    border-radius: 4px;
+
+    &:hover,
+    &:active {
+      transform: scale(1.05);
+      /* padding-left: 16px; */
+    }
+
+    &:focus {
+      outline: none;  
+    }
+
+    .fa-arrow-circle-right::before {
+      content: url('../images/arrow-right.svg');
+      position: absolute;
+      top: 10px;
+      right: 15px;
+    }
+  }
+}
+
+p > a.reference.external,
+p > a,
+#partaker-i5 > p > a.external {
+  color: #FD8F01;
+  word-break: break-word;
+}
diff --git a/docs/_static/css/lists.css b/docs/_static/css/lists.css
new file mode 100644
index 00000000..140663c9
--- /dev/null
+++ b/docs/_static/css/lists.css
@@ -0,0 +1,56 @@
+.simple > li,
+.compound > ul > li,
+.simple > li > ul > li,
+#installation-and-image-management > div > ul > li.toctree-l1 > ul > li.toctree-l2,
+#running-vyos-in-virtual-environments > div > ul > li.toctree-l1 > ul > li.toctree-l2,
+#running-vyos-in-virtual-environments > div > ul > li.toctree-l1 > ul > li.toctree-l2 > ul > li.toctree-l3,
+#running-vyos-in-cloud-environments > div > ul > li.toctree-l1 > ul > li.toctree-l2,
+#running-vyos-in-cloud-environments > div > ul > li.toctree-l1 > ul > li.toctree-l2 > ul > li.toctree-l3,
+#configuration-blueprints > div > ul > li.toctree-l1 > ul > li.toctree-l2,
+#configuration-blueprints > div > ul > li.toctree-l1 > ul > li.toctree-l2 > ul > li.toctree-l3,
+#contributing > div > ul > li.toctree-l1 > ul > li.toctree-l2,
+#contributing > div > ul > li.toctree-l1 > ul > li.toctree-l2 > ul > li.toctree-l3 {
+  list-style: none !important;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 8px;
+    left: -15px;
+    width: 6px;
+    height: 6px;
+    background-color: #000;
+    border-radius: 50%;
+  }
+}
+
+.simple > li a,
+.compound > ul > li a,
+.simple > li > ul > li a {
+  color: #FD8F01;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: -0.5px;
+  height: 26px;
+}
+
+.simple > li > ul > li p {
+  color: #525659;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: -0.5px;
+  height: 26px;
+}
+
+#site-to-site ul,
+#troubleshooting ol,
+#troubleshooting ul {
+  margin-bottom: 0 !important;
+}
+
+.rst-content:has(#troubleshooting) .rst-footer-buttons {
+  margin-top: 20px !important;
+}
\ No newline at end of file
diff --git a/docs/_static/css/scrolls.css b/docs/_static/css/scrolls.css
new file mode 100644
index 00000000..26cfe413
--- /dev/null
+++ b/docs/_static/css/scrolls.css
@@ -0,0 +1,20 @@
+.wy-table-responsive {
+  scrollbar-color: #99A0A5 transparent;
+  scroll-behavior: smooth;
+
+  &::-webkit-scrollbar {
+    height: 5px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 8px;
+    margin: 0 10px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background-color: #99A0A5;
+    border-radius: 8px;
+    margin: 0 10px;
+  }
+}
diff --git a/docs/_static/css/separate-commands.css b/docs/_static/css/separate-commands.css
new file mode 100644
index 00000000..5547c4ad
--- /dev/null
+++ b/docs/_static/css/separate-commands.css
@@ -0,0 +1,116 @@
+.rst-content code.literal {
+  border: unset;
+  background-color: unset;
+  border: 1px solid rgba(253, 143, 1, 0.2);
+  background-color: #FFF4E6;
+  font-family: 'Archivo', sans-serif !important;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  color: #121010 !important;
+  border-radius: 4px;
+  padding: 3px 6px;
+  word-break: break-all;
+
+  & > span.pre:nth-child(n+ 2) {
+    padding-left: 5px;
+  }
+}
+
+div.opcmd-heading,
+div.cfgcmd-heading,
+table .opcmd,
+table .cfgcmd {
+  padding: 0;
+  display: flex;
+  background-color: unset;
+  border: none;
+  border-radius: 8px 0 0 8px;
+}
+
+div.opcmd-heading,
+div.cfgcmd-heading {
+  margin-bottom: 15px;
+}
+
+div.opcmd-heading,
+table .opcmd {
+  border-left: 5px solid #B8E9F9;
+}
+
+div.cfgcmd-heading,
+table .cfgcmd {
+  border-left: 5px solid #FD8F01;
+}
+
+span {
+  &.opcmd,
+  &.cfgcmd {
+    display: flex;
+    padding: 4px 8px 8px 30px;
+    align-items: center;
+    color: #121010 !important;
+    font-family: 'Roboto Mono', monospace !important;
+    letter-spacing: -0.04em !important;
+    font-weight: 500 !important;
+    position: relative;
+    word-break: break-all;
+
+    &::before {
+      content: url('../images/cmnd-link-dollar-icon.svg');
+      display: flex;
+      padding-right: 8px;
+      align-items: center;
+      position: absolute;
+      top: 6px;
+      left: 8px;
+    }
+  }
+
+  &.opcmd {
+    background-color: #EBF9FF;
+  }
+  
+  &.cfgcmd {
+    background-color: #FFF4E6;
+  }
+}
+
+span.opcmd,
+span.cfgcmd {
+  font-size: 16px !important;
+}
+
+table span.opcmd,
+table span.cfgcmd {
+  font-size: 13px !important;
+}
+
+.opcmd-heading > a.cmdlink,
+.cfgcmd-heading > a.cmdlink {
+  display: flex;
+
+  &::after {
+    display: flex;
+    align-items: center;
+    content: '';
+    height: 100%;
+    align-items: center;
+    padding-right: 12px;
+    padding-top: 3px;
+    border-radius: 0 8px 8px 0;
+  }
+}
+
+.opcmd-heading:hover a.cmdlink:after,
+.cfgcmd-heading:hover a.cmdlink:after {
+  content: url('../images/cmnd-link-icon.svg');
+  padding-right: 10px;
+}
+
+.opcmd-heading a.cmdlink:after {
+  background-color: #EBF9FF;
+}
+
+.cfgcmd-heading a.cmdlink:after {
+  background-color: #FFF4E6;
+}
\ No newline at end of file
diff --git a/docs/_static/css/tables.css b/docs/_static/css/tables.css
new file mode 100644
index 00000000..7a106d56
--- /dev/null
+++ b/docs/_static/css/tables.css
@@ -0,0 +1,231 @@
+.wy-table-responsive {
+  overflow : auto !important ;
+  width: 100%;
+
+  & table {
+    border: none !important;
+
+
+    & td {
+      white-space : normal  !important;
+    }
+
+    & > caption:hover a {
+      position: relative;
+
+      &::after {
+        content: url('../images/cmnd-link-icon.svg');
+        position: absolute;
+        top: 0;
+        right: -3px;
+        z-index: 2;
+        background-color: #fff;
+        width: 20px;
+        height: 100%;
+      }
+    }
+  }
+}
+
+#coverage table.docutils td.coverage-ok p {
+  color: green;
+  text-align: center;
+}
+
+#coverage table.docutils:not(.field-list) tr:nth-child(2n-1) td.coverage-fail p,
+#coverage table.docutils td.coverage-fail p {
+  color: red;
+  text-align: center;
+}
+
+#coverage a.paginate_button.current,
+#coverage a.paginate_button.next,
+#coverage a.paginate_button.previous {
+  color: #FD8F01 !important;
+  background-color: none;
+  background: none;
+}
+
+#coverage a.paginate_button {
+  margin-left: 0;
+  border: unset;
+  border-radius: 8px;
+  transition: background-color 250ms linear, color 250ms linear;
+}
+
+#coverage a.paginate_button:hover,
+#coverage a.paginate_button.current:hover,
+#coverage a.paginate_button.next:hover,
+#coverage a.paginate_button.previous:hover {
+  background-color: #E1E4E5 !important;
+  background: none;
+  border: unset;
+  color: #121010 !important;
+}
+
+.selectDiv {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 11111;
+  background-color: red;
+}
+
+#table-cfgcmd_wrapper,
+#table-opcmd_wrapper {
+  & label {
+    color: #121010 !important;
+    font-family: 'Archivo', sans-serif;
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+  } 
+
+  & option {
+    color: #8D9499 !important;
+    font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    letter-spacing: -0.02em;
+  }
+
+  & select {
+    height: 40px;
+    width: 80px;
+    padding: 10px 14px;
+    margin: 0 10px;
+    border-radius: 4px;
+    border: 1px solid #C6C9CC !important;
+    color: #8D9499;
+    font-size: 16px;
+    position: relative;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-image: url("../images/select-arrow.svg");
+    background-repeat: no-repeat;
+    background-position: right 18px top 50%;
+  }
+
+  & input {
+    margin-left: 16px;
+    height: 40px;
+    padding: 10px 14px;
+    width: 245px;
+    border: 1px solid #C6C9CC !important;
+    color: #8D9499;
+    font-size: 16px;
+  }
+
+  & .wy-table-responsive {
+    padding-top: 24px;
+  }
+}
+
+@media screen and (max-width: 575px) {
+  #table-cfgcmd_wrapper,
+  #table-opcmd_wrapper {
+    & label {
+      & input {
+        margin-top: 10px
+      }
+    }
+  }
+}
+
+thead tr th {
+  padding: 10px 16px !important;
+  border-top: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  max-height: 40px;
+
+  & p {
+    color: #121010 !important;
+    font-family: 'Archivo', sans-serif;
+    font-size: 14px !important;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    margin-right: 3px;
+  }
+}
+
+.rst-content table.docutils td, 
+.wy-table-bordered-all td {
+  border-left: none !important;
+}
+
+.rst-content table.docutils th:nth-child(2n), 
+.rst-content table.field-list th:nth-child(2n), 
+.wy-table td, .wy-table th:nth-child(2n) {
+  border-radius: 8px 8px 0 0 ;
+}
+
+.wy-grid-for-nav:has(nav.display_none) .rst-content table.docutils td:nth-child(2n), 
+.wy-grid-for-nav:has(nav.display_none) .rst-content table.docutils th:nth-child(2n), 
+.wy-grid-for-nav:has(nav.display_none) .rst-content table.field-list td:nth-child(2n), 
+.wy-grid-for-nav:has(nav.display_none) .rst-content table.field-list th:nth-child(2n), 
+.wy-grid-for-nav:has(nav.display_none) .wy-table td, 
+.wy-grid-for-nav:has(nav.display_none) .wy-table th:nth-child(2n) {
+  background-color: #FAFAFA !important; 
+}
+
+.wy-grid-for-nav:has(nav.shift) .wy-nav-content-wrap-closed-sidebar .rst-content table th,
+.wy-grid-for-nav:has(nav.shift) .wy-nav-content-wrap-closed-sidebar .rst-content table td {
+	background-color: #E7E7E7 !important;
+}
+
+.rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td, 
+.wy-table-backed, 
+.wy-table-odd td, 
+.wy-table-striped tr:nth-child(2n-1) td {
+  background-color: unset;
+}
+
+tbody tr td {
+  & p {
+    color: #525659 !important;
+    font-family: 'Roboto', sans-serif;
+    font-size: 14px !important;
+    font-weight: 400;
+    letter-spacing: -0.02em;
+  }
+
+  &.coverage-ok {
+    & p {
+      color: transparent !important;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      position: relative;
+
+      &::before {
+        content: url('../images/check.svg');
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+      }
+    }
+  }
+}
+
+.dataTables_info {
+  color: #121010 !important;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px !important;
+  font-weight: 400;
+  letter-spacing: -0.5px;
+}
+
+.paginate_button {
+  font-family: 'Archivo', sans-serif;
+  font-size: 16px !important;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+}
\ No newline at end of file
diff --git a/docs/_static/css/text.css b/docs/_static/css/text.css
new file mode 100644
index 00000000..f1179534
--- /dev/null
+++ b/docs/_static/css/text.css
@@ -0,0 +1,120 @@
+.docutils .card-header p {
+  font-family: 'Archivo', sans-serif;
+  font-weight: 600;
+  font-size: 18px;
+  letter-spacing: -0.05em;
+  padding-bottom: 18px;
+  color: #121010;
+}
+
+p,
+blockquote > div > dl,
+blockquote > div > dd,
+#container dl,
+#firewall dl,
+#high-availability dl,
+#development td,
+#development th,
+caption.caption-text,
+.simple > dt,
+div.line-block,
+.paginate_button,
+.dataTables_info,
+#operational-commands label,
+.card-body .card-text,
+#search-results a {
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  letter-spacing: -0.5px;
+  font-weight: 400;
+  color: #525659;
+  line-height: 1.6;
+}
+
+p > strong {
+  color: #121010;
+}
+
+.card-body .card-text {
+  padding-bottom: 22px;
+  display: block;
+}
+
+.simple > dt {
+  font-weight: 600;
+}
+
+#dual-hub-dmvpn-with-vyos td > p,
+#route-based-redundant-site-to-site-vpn-to-azure-bgp-over-ikev2-ipsec td > p,
+#route-based-site-to-site-vpn-to-azure-bgp-over-ikev2-ipsec td > p,
+#development td p,
+#development th p {
+  font-size: 14px !important;
+}
+
+#development #writing-good-commit-messages > ul.simple > li > ul {
+
+  & > li:nth-child(2) {
+    padding-bottom: 23px;
+  }
+
+  & > li:nth-child(2) {
+    padding-bottom: 53px;
+  }
+}
+
+#installation-and-image-management > div > p > span {
+  font-family: 'Archivo', sans-serif;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  font-size: 24px;
+  color: #121010;
+}
+
+.caption-text {
+  text-align: left;
+  font-family: 'Roboto', sans-serif;
+}
+
+p .caption-text {
+  color: #8D9499;
+  font-family: 'Roboto', sans-serif;
+}
+
+aside.footnote  .label {
+  & > a[role=doc-backlink] {
+    color: #fd8f01;
+    font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+  }
+}
+
+aside.footnote > p {
+  padding-bottom: 15px !important;
+}
+
+#about a .external,
+#a-note-on-copyright > dl.brackets > dt,
+#a-note-on-copyright > dl.brackets > dt > .brackets > a,
+a.footnote-reference.brackets,
+#search-results a {
+  color: #FD8F01;
+}
+
+#history p {
+  padding-bottom: 22px;
+  margin-bottom: 0;
+  font-size: 16px;
+}
+
+#a-note-on-copyright > dl p {
+  padding-bottom: 12px;
+}
+
+#search-results a {
+  font-size: 19px;
+}
+
+#specify-custom-config-file {
+  padding-top: 15px;
+}
\ No newline at end of file
diff --git a/docs/_static/images/IPSec_close_action_settings.jpg b/docs/_static/images/IPSec_close_action_settings.jpg
index a4e258cc..6996f857 100644
--- a/docs/_static/images/IPSec_close_action_settings.jpg
+++ b/docs/_static/images/IPSec_close_action_settings.jpg
diff --git a/docs/_static/images/VyOS_Dual-Hub_DMVPN.png b/docs/_static/images/VyOS_Dual-Hub_DMVPN.png
new file mode 100644
index 00000000..9c25a308
--- /dev/null
+++ b/docs/_static/images/VyOS_Dual-Hub_DMVPN.png
diff --git a/docs/_static/images/arrow-left.svg b/docs/_static/images/arrow-left.svg
new file mode 100644
index 00000000..16d6750b
--- /dev/null
+++ b/docs/_static/images/arrow-left.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 10.5L5.32396 10.5L10.1836 16.0076L7.93407 17.9924L-0.000432575 9L7.93406 0.0075688L10.1836 1.99243L5.32396 7.5L18 7.5L18 10.5Z" fill="#FFAE12"/>
+</svg>
diff --git a/docs/_static/images/arrow-right.svg b/docs/_static/images/arrow-right.svg
new file mode 100644
index 00000000..15ab0eb4
--- /dev/null
+++ b/docs/_static/images/arrow-right.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-4.58639e-07 10.5L12.676 10.5L7.81642 16.0076L10.0659 17.9924L18.0004 9L10.0659 0.0075688L7.81642 1.99243L12.676 7.5L-3.27505e-07 7.5L-4.58639e-07 10.5Z" fill="#FFAE12"/>
+</svg>
diff --git a/docs/_static/images/breadcrumbs-icon.svg b/docs/_static/images/breadcrumbs-icon.svg
new file mode 100644
index 00000000..6420468b
--- /dev/null
+++ b/docs/_static/images/breadcrumbs-icon.svg
@@ -0,0 +1,3 @@
+<svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1L5 5L1 9" stroke="#8D9499" stroke-width="2"/>
+</svg>
diff --git a/docs/_static/images/check.svg b/docs/_static/images/check.svg
new file mode 100644
index 00000000..fcec28a1
--- /dev/null
+++ b/docs/_static/images/check.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 6L8 12L18 2" stroke="#FFAE12" stroke-width="3"/>
+</svg>
diff --git a/docs/_static/images/close-sidebar-icon.svg b/docs/_static/images/close-sidebar-icon.svg
new file mode 100644
index 00000000..e630ce27
--- /dev/null
+++ b/docs/_static/images/close-sidebar-icon.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 10.5L5.32396 10.5L10.1836 16.0076L7.93407 17.9924L-0.000432575 9L7.93406 0.0075688L10.1836 1.99243L5.32396 7.5L18 7.5L18 10.5Z" fill="#FFF"/>
+</svg>
\ No newline at end of file
diff --git a/docs/_static/images/cmnd-link-dollar-icon.svg b/docs/_static/images/cmnd-link-dollar-icon.svg
new file mode 100644
index 00000000..b0e4a74b
--- /dev/null
+++ b/docs/_static/images/cmnd-link-dollar-icon.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.36 2.992V0.877999H4.06V2.992H3.36ZM3.36 11.686V9.46H4.06V11.686H3.36ZM3.654 10.048C3.14067 10.048 2.688 9.99667 2.296 9.894C1.904 9.782 1.57733 9.628 1.316 9.432C1.05467 9.22667 0.854 8.98867 0.714 8.718C0.583333 8.438 0.518 8.13 0.518 7.794C0.518 7.74733 0.518 7.70533 0.518 7.668C0.527333 7.63067 0.532 7.598 0.532 7.57H1.974C1.974 7.598 1.974 7.626 1.974 7.654C1.974 7.67267 1.974 7.696 1.974 7.724C1.974 8.01333 2.05333 8.24667 2.212 8.424C2.37067 8.592 2.58067 8.71333 2.842 8.788C3.11267 8.85333 3.40667 8.886 3.724 8.886C4.004 8.886 4.26067 8.85333 4.494 8.788C4.73667 8.72267 4.93267 8.62 5.082 8.48C5.24067 8.33067 5.32 8.14867 5.32 7.934C5.32 7.654 5.222 7.43933 5.026 7.29C4.83 7.14067 4.57333 7.024 4.256 6.94C3.93867 6.84667 3.60733 6.75333 3.262 6.66C2.954 6.576 2.646 6.48267 2.338 6.38C2.03933 6.27733 1.76867 6.15133 1.526 6.002C1.28333 5.84333 1.08733 5.64267 0.938 5.4C0.788667 5.148 0.714 4.84 0.714 4.476C0.714 4.13067 0.788667 3.82733 0.938 3.566C1.08733 3.30467 1.29267 3.08533 1.554 2.908C1.82467 2.73067 2.142 2.59533 2.506 2.502C2.87933 2.40867 3.28533 2.362 3.724 2.362C4.18133 2.362 4.58733 2.41333 4.942 2.516C5.29667 2.60933 5.59533 2.74933 5.838 2.936C6.09 3.11333 6.28133 3.32333 6.412 3.566C6.54267 3.80867 6.608 4.07 6.608 4.35C6.608 4.41533 6.60333 4.476 6.594 4.532C6.594 4.588 6.594 4.62533 6.594 4.644H5.166V4.518C5.166 4.33133 5.11467 4.16333 5.012 4.014C4.90933 3.86467 4.746 3.74333 4.522 3.65C4.30733 3.55667 4.018 3.51 3.654 3.51C3.41133 3.51 3.19667 3.53333 3.01 3.58C2.82333 3.61733 2.66933 3.678 2.548 3.762C2.42667 3.83667 2.33333 3.92533 2.268 4.028C2.212 4.12133 2.184 4.23333 2.184 4.364C2.184 4.57867 2.25867 4.74667 2.408 4.868C2.56667 4.98 2.772 5.078 3.024 5.162C3.276 5.23667 3.54667 5.32067 3.836 5.414C4.172 5.50733 4.51267 5.60533 4.858 5.708C5.20333 5.80133 5.52067 5.92267 5.81 6.072C6.10867 6.22133 6.34667 6.43133 6.524 6.702C6.71067 6.96333 6.804 7.30867 6.804 7.738C6.804 8.14867 6.72467 8.50333 6.566 8.802C6.40733 9.09133 6.18333 9.32933 5.894 9.516C5.614 9.70267 5.28267 9.838 4.9 9.922C4.51733 10.006 4.102 10.048 3.654 10.048Z" fill="#121010"/>
+</svg>
diff --git a/docs/_static/images/cmnd-link-icon.svg b/docs/_static/images/cmnd-link-icon.svg
new file mode 100644
index 00000000..4602fadf
--- /dev/null
+++ b/docs/_static/images/cmnd-link-icon.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="M11.2426 9.12076L10.1821 8.06026L11.2426 6.99976C11.5212 6.72118 11.7421 6.39045 11.8929 6.02646C12.0437 5.66248 12.1213 5.27236 12.1213 4.87838C12.1213 4.48441 12.0437 4.09429 11.8929 3.7303C11.7421 3.36632 11.5212 3.03559 11.2426 2.75701C10.964 2.47843 10.6333 2.25744 10.2693 2.10667C9.9053 1.95591 9.51518 1.87831 9.1212 1.87831C8.72723 1.87831 8.33711 1.95591 7.97312 2.10667C7.60914 2.25744 7.27841 2.47843 6.99983 2.75701L5.93933 3.81751L4.87883 2.75701L5.93933 1.69651C6.78556 0.863948 7.9265 0.3995 9.11361 0.404334C10.3007 0.409168 11.4378 0.882891 12.2773 1.72232C13.1167 2.56174 13.5904 3.69886 13.5953 4.88597C13.6001 6.07309 13.1356 7.21403 12.3031 8.06026L11.2426 9.12076ZM9.12083 11.2425L8.06033 12.303C7.64372 12.7265 7.14739 13.0632 6.59998 13.2939C6.05256 13.5246 5.46489 13.6446 4.87086 13.647C4.27684 13.6494 3.68821 13.5342 3.13893 13.308C2.58966 13.0818 2.0906 12.7491 1.67056 12.329C1.25051 11.909 0.917792 11.4099 0.691584 10.8607C0.465375 10.3114 0.350158 9.72275 0.352576 9.12872C0.354995 8.5347 0.475003 7.94703 0.705677 7.39961C0.936351 6.85219 1.27313 6.35587 1.69658 5.93926L2.75708 4.87876L3.81758 5.93926L2.75708 6.99976C2.47849 7.27834 2.25751 7.60907 2.10674 7.97305C1.95597 8.33704 1.87837 8.72716 1.87837 9.12113C1.87837 9.51511 1.95597 9.90523 2.10674 10.2692C2.25751 10.6332 2.47849 10.9639 2.75708 11.2425C3.03566 11.5211 3.36639 11.7421 3.73037 11.8928C4.09436 12.0436 4.48448 12.1212 4.87845 12.1212C5.27243 12.1212 5.66255 12.0436 6.02653 11.8928C6.39052 11.7421 6.72124 11.5211 6.99983 11.2425L8.06033 10.182L9.12083 11.2425ZM9.12083 3.81751L10.1821 4.87876L4.87883 10.1813L3.81758 9.12076L9.12083 3.81751Z" fill="#8D9499"/>
+</svg>
diff --git a/docs/_static/images/copy-code-icon.svg b/docs/_static/images/copy-code-icon.svg
new file mode 100644
index 00000000..3417dfe5
--- /dev/null
+++ b/docs/_static/images/copy-code-icon.svg
@@ -0,0 +1,4 @@
+<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4.95605" y="4.5" width="7" height="7" rx="1.5" stroke="#FD8F01"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.456055 2C0.456055 0.895431 1.35149 0 2.45605 0H6.45605C7.56062 0 8.45605 0.895431 8.45605 2V3H7.45605V2C7.45605 1.44772 7.00834 1 6.45605 1H2.45605C1.90377 1 1.45605 1.44772 1.45605 2V6C1.45605 6.55228 1.90377 7 2.45605 7H3.45605V8H2.45605C1.35149 8 0.456055 7.10457 0.456055 6V2Z" fill="#FD8F01"/>
+</svg>
diff --git a/docs/_static/images/github.svg b/docs/_static/images/github.svg
new file mode 100644
index 00000000..cb3d30ef
--- /dev/null
+++ b/docs/_static/images/github.svg
@@ -0,0 +1,10 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_17762_41)">
+<path d="M3.93172 10.8809C3.75672 10.7642 3.60622 10.6155 3.43005 10.4049C3.33861 10.293 3.248 10.1804 3.15822 10.0672C2.88813 9.73174 2.7178 9.57716 2.54163 9.51358C2.39598 9.46128 2.27706 9.35327 2.21103 9.2133C2.14501 9.07333 2.1373 8.91286 2.18959 8.7672C2.24188 8.62154 2.3499 8.50262 2.48987 8.4366C2.62984 8.37058 2.79031 8.36287 2.93597 8.41516C3.37463 8.57266 3.67155 8.84391 4.07172 9.34149C4.01688 9.27324 4.27005 9.59058 4.3243 9.65591C4.43513 9.78833 4.5168 9.86883 4.58097 9.91141C4.69997 9.99133 4.92338 10.0257 5.2518 9.99308C5.26522 9.77024 5.30663 9.55383 5.36963 9.35433C3.6383 8.93083 2.6583 7.81433 2.6583 5.62333C2.6583 4.89999 2.87413 4.24899 3.27547 3.70299C3.1483 3.18149 3.16755 2.55091 3.45163 1.84099C3.48387 1.76069 3.53358 1.68856 3.59714 1.62984C3.6607 1.57112 3.73653 1.52728 3.81913 1.50149C3.86638 1.48749 3.89322 1.48108 3.94047 1.47408C4.40888 1.40233 5.07038 1.57324 5.93255 2.11341C6.44635 1.99329 6.97232 1.933 7.49997 1.93374C8.03197 1.93374 8.56047 1.99441 9.06563 2.11341C9.92722 1.56916 10.5899 1.39824 11.0618 1.47408C11.1114 1.48166 11.1534 1.49158 11.189 1.50324C11.27 1.52995 11.3441 1.57408 11.4062 1.63253C11.4683 1.69099 11.5168 1.76235 11.5483 1.84158C11.8324 2.55091 11.8516 3.18149 11.7245 3.70241C12.1276 4.24841 12.3416 4.89533 12.3416 5.62333C12.3416 7.81491 11.3651 8.92791 9.6338 9.35199C9.70672 9.59408 9.74463 9.86474 9.74463 10.157C9.74469 10.6851 9.74235 11.2132 9.73763 11.7413C9.86864 11.7699 9.9858 11.8427 10.0694 11.9476C10.153 12.0524 10.1979 12.1828 10.1966 12.3169C10.1953 12.451 10.1479 12.5805 10.0622 12.6837C9.97663 12.7869 9.85808 12.8575 9.72655 12.8835C9.06213 13.0165 8.5698 12.5732 8.5698 11.9939L8.57097 11.7337L8.57388 11.3225C8.5768 10.9095 8.57797 10.542 8.57797 10.157C8.57797 9.75041 8.47122 9.48499 8.33005 9.36366C7.94447 9.03116 8.13988 8.39824 8.64505 8.34166C10.3758 8.14741 11.175 7.47716 11.175 5.62333C11.175 5.06624 10.993 4.60599 10.6424 4.22099C10.5685 4.14005 10.5189 4.03994 10.4993 3.93213C10.4797 3.82432 10.4909 3.71317 10.5316 3.61141C10.6284 3.36991 10.6698 3.05316 10.5876 2.66991L10.5817 2.67166C10.2953 2.75274 9.93422 2.92833 9.49788 3.22524C9.42752 3.27299 9.34758 3.30478 9.26364 3.31838C9.1797 3.33199 9.09381 3.32708 9.01197 3.30399C8.51958 3.16766 8.01088 3.09917 7.49997 3.10041C6.9808 3.10041 6.4663 3.16983 5.98797 3.30458C5.90643 3.32748 5.82088 3.33235 5.73727 3.31885C5.65366 3.30535 5.57399 3.27381 5.5038 3.22641C5.06513 2.93066 4.7023 2.75566 4.41413 2.67399C4.33013 3.05491 4.37155 3.37049 4.4678 3.61141C4.50852 3.71312 4.51978 3.82424 4.50028 3.93205C4.48078 4.03985 4.43132 4.13999 4.35755 4.22099C4.0093 4.60249 3.82497 5.07149 3.82497 5.62333C3.82497 7.47366 4.62472 8.14799 6.34613 8.34166C6.85072 8.39824 7.04672 9.02824 6.66347 9.36133C6.55147 9.45933 6.41322 9.78833 6.41322 10.157V11.9945C6.41322 12.5697 5.92613 13.0007 5.26988 12.8858C5.13675 12.8624 5.01586 12.7936 4.92789 12.6909C4.83991 12.5883 4.79031 12.4583 4.78755 12.3232C4.7848 12.188 4.82906 12.0561 4.91278 11.95C4.9965 11.8439 5.11448 11.7701 5.24655 11.7413V11.1638C4.71572 11.1994 4.27705 11.1125 3.93172 10.8809Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_17762_41">
+<rect width="14" height="14" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/docs/_static/images/hamburger-icon.svg b/docs/_static/images/hamburger-icon.svg
new file mode 100644
index 00000000..9fad3003
--- /dev/null
+++ b/docs/_static/images/hamburger-icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 5.3335H24M0 12.0002H24M0 18.6668H24" stroke="#FFAE12" stroke-width="3"/>
+</svg>
diff --git a/docs/_static/images/note-icon.svg b/docs/_static/images/note-icon.svg
new file mode 100644
index 00000000..fd4f05c3
--- /dev/null
+++ b/docs/_static/images/note-icon.svg
@@ -0,0 +1,5 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.58341 8.91675V7.75008H5.41675V8.91675H6.58341Z" fill="#356E81"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.00008 0.166748C9.22008 0.166748 11.8334 2.78008 11.8334 6.00008C11.8334 9.22008 9.22008 11.8334 6.00008 11.8334C2.78008 11.8334 0.166748 9.22008 0.166748 6.00008C0.166748 2.78008 2.78008 0.166748 6.00008 0.166748ZM6.00008 10.6667C8.57841 10.6667 10.6667 8.57841 10.6667 6.00008C10.6667 3.42175 8.57841 1.33341 6.00008 1.33341C3.42175 1.33341 1.33341 3.42175 1.33341 6.00008C1.33341 8.57841 3.42175 10.6667 6.00008 10.6667Z" fill="#356E81"/>
+<path d="M5.41675 6.87508H6.58341V3.08341H5.41675V6.87508Z" fill="#356E81"/>
+</svg>
diff --git a/docs/_static/images/wireguard_site2site_diagram.jpg b/docs/_static/images/wireguard_site2site_diagram.jpg
index fc305952..4a7a95e4 100644
--- a/docs/_static/images/wireguard_site2site_diagram.jpg
+++ b/docs/_static/images/wireguard_site2site_diagram.jpg
diff --git a/docs/_static/images/zone-policy-diagram.png b/docs/_static/images/zone-policy-diagram.png
index 49e3e046..cfde4af6 100644
--- a/docs/_static/images/zone-policy-diagram.png
+++ b/docs/_static/images/zone-policy-diagram.png
diff --git a/docs/_static/js/codecopier.js b/docs/_static/js/codecopier.js
new file mode 100644
index 00000000..bf0b3b4d
--- /dev/null
+++ b/docs/_static/js/codecopier.js
@@ -0,0 +1,67 @@
+const hamburgerIcon = `
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 5.3335H24M0 12.0002H24M0 18.6668H24" stroke="#FFAE12" stroke-width="3"/>
+  </svg>
+`
+
+const innersOfCopyDiv = `
+  <p>Copy</p>
+  <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="4.95605" y="4.5" width="7" height="7" rx="1.5" stroke="#FD8F01"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0.456055 2C0.456055 0.895431 1.35149 0 2.45605 0H6.45605C7.56062 0 8.45605 0.895431 8.45605 2V3H7.45605V2C7.45605 1.44772 7.00834 1 6.45605 1H2.45605C1.90377 1 1.45605 1.44772 1.45605 2V6C1.45605 6.55228 1.90377 7 2.45605 7H3.45605V8H2.45605C1.35149 8 0.456055 7.10457 0.456055 6V2Z" fill="#FD8F01"/>
+  </svg>
+`
+
+function formDiv(id) {
+  return `
+  <div class='copyDiv' data-identifier='${id}'>
+    ${innersOfCopyDiv}
+  </div>
+`
+}
+
+$(document).ready(async function () {
+  const codeSnippets = $(
+    '.rst-content div[class^=highlight] div[class^=highlight], .rst-content pre.literal-block div[class^=highlight], .rst-content pre.literal-block div[class^=highlight]'
+  )
+
+  codeSnippets.each((index, el) => {
+    el.insertAdjacentHTML('beforeend', formDiv(index))
+  })
+
+  const copyButton = $('.copyDiv')
+
+  copyButton.click(async ({
+    currentTarget
+  }) => {
+    // we obtain text and copy it
+    const id = currentTarget.dataset.identifier
+
+    try {
+      await navigator.clipboard.writeText(currentTarget.offsetParent.innerText)
+    } catch (error) {
+      console.log('Copiing text failed, please try again', {
+        error
+      })
+    }
+
+    // we edit the copyDiv connected to copied text
+    const divWithNeededId = $(`div[data-identifier='${id}']`)
+    divWithNeededId.addClass('copiedNotifier')
+    divWithNeededId.html('<span>Copied!</span>')
+
+    setTimeout(() => {
+      divWithNeededId.html(innersOfCopyDiv)
+      divWithNeededId.removeClass('copiedNotifier')
+
+    }, 2000)
+  })
+
+  // we edit the button that is added by readthedocs portal
+  const readTheDocsButton = $('div.rst-versions')
+  const navbar = $('nav[data-toggle=wy-nav-shift]')
+
+  navbar.append(readTheDocsButton)
+
+});
+
diff --git a/docs/_static/js/footer.js b/docs/_static/js/footer.js
new file mode 100644
index 00000000..5f135768
--- /dev/null
+++ b/docs/_static/js/footer.js
@@ -0,0 +1,92 @@
+$(document).ready(function() {
+  insertIframe()
+
+  const options = {
+    threshold: 0.01,
+  }
+  const divDoc = document.querySelector('.iframe-container')
+  const innerSidebar = $('.wy-side-scroll')
+
+  intersectionObserver(options, divDoc, innerSidebar)
+
+  $(window).resize(function() {
+    intersectionObserver(options, divDoc, innerSidebar)
+  })
+
+  $(window).scroll(function() {
+    intersectionObserver(options, divDoc, innerSidebar)
+  })
+});
+
+function intersectionObserver(options, divDoc, innerSidebar) {
+  // we delete any inline-styles from innerSidebar
+  if($(innerSidebar).attr('style')) {
+    innerSidebar.removeAttr('style')
+  }
+  const screenWidth = $(window).width()
+  const sidebar = $('.wy-nav-side')
+  const documentHeight = $(document).height()
+  const iframeHeight = $('.iframe-container').height()
+  const currentPosition = $(document).scrollTop()
+  const additionalPaddingFromSidebar = screenWidth > 991 ? 70 : 83
+  const heightThatIsAddedByPaddings = 36
+  const resultOfSums = documentHeight - 
+    iframeHeight - 
+    currentPosition - 
+    additionalPaddingFromSidebar - 
+    heightThatIsAddedByPaddings
+  const heightOfAdditionalButton = 50
+
+  const onEntry = (entries, observer) => {
+    entries.forEach(entry => {
+      if(entry.isIntersecting) {
+        if(resultOfSums <= 70) {
+          $(sidebar).hide()
+          return 
+        }
+        $(sidebar).show()
+        $(sidebar).height(resultOfSums)
+        $(sidebar).css('margin-bottom', '20px')
+        $(innerSidebar).removeAttr('style')
+        $(innerSidebar).height(resultOfSums - heightOfAdditionalButton)
+        return
+      } else {
+        $(sidebar).removeAttr('style')
+        $(innerSidebar).removeAttr('style')
+      }
+    })
+  }
+  const observer = new IntersectionObserver(onEntry, options);
+  observer.observe(divDoc)
+
+  if($(innerSidebar).attr('style')) {
+    observer.unobserve(divDoc)
+  }
+
+  determineHeightOfFooterContainer()
+
+}
+
+function determineHeightOfFooterContainer() {
+  const iframeFooter= $('#vyos-footer-iframe');
+  const title = window.document.getElementsByTagName('title')?.[0]?.text;
+  const iframeContainer = $('.iframe-container')
+  const href = window.location.href;
+
+  window.addEventListener('message',function(message){
+    if(message.data.footerIframeHeight){
+      $(iframeFooter).css('min-height', `${message.data.footerIframeHeight + 1}px`)
+      $(iframeContainer).height(message.data.footerIframeHeight + 1)
+      iframeFooter[0].contentWindow.postMessage({title, href},'*');
+    }
+  })
+}
+
+function insertIframe() {
+  const body = $('.wy-body-for-nav')
+  body.append(divWithIframe)
+}
+
+const divWithIframe = `<div class="iframe-container">
+  <iframe src='https://vyos.io/iframes/footer' id='vyos-footer-iframe'></iframe>
+</div>`
diff --git a/docs/_static/js/sidebar.js b/docs/_static/js/sidebar.js
new file mode 100644
index 00000000..8b5c029d
--- /dev/null
+++ b/docs/_static/js/sidebar.js
@@ -0,0 +1,162 @@
+$(document).ready(function () {
+  removeOverlayAndCloseSidebar()
+  documentLoaded()
+
+  $(window).on("resize", function () {
+    const screenWidth = window.innerWidth
+
+    if (screenWidth <= 991) return userIsInTabletScreenWidth(screenWidth)
+    return removeOverlayAndButtons(screenWidth)
+  })
+
+})
+
+function removeButtons() {
+  const alreadyCreatedOpenButtonCheck = $('.openLeftSidebarMenuButton')
+  const alreadyCreatedCloseButtonCheck = $('.closeButtonDivLine')
+
+  if(alreadyCreatedOpenButtonCheck[0]) alreadyCreatedOpenButtonCheck[0].remove()
+  if(alreadyCreatedCloseButtonCheck[0]) alreadyCreatedCloseButtonCheck[0].remove()
+}
+
+function documentLoaded() {
+  const screenWidth = window.innerWidth
+
+  if (screenWidth <= 991) return userIsInTabletScreenWidth(screenWidth)
+  return
+}
+
+function userIsInTabletScreenWidth(screenWidth) {
+  const alreadyCreatedButtonCheck = $('.openLeftSidebarMenuButton')
+  if (alreadyCreatedButtonCheck[0]) return
+  createOpenSidebarButton(screenWidth)
+  createCloseSidebarButton(screenWidth)
+  removeOverlayAndCloseSidebar()
+}
+
+function createOverlay(screenWidth) {
+  const contentContainer = $('.wy-nav-content')
+  contentContainer.addClass('overlay')
+
+  const overlayDiv = `
+    <div class='overlayDiv' />
+  `
+
+  contentContainer.append(overlayDiv)
+
+  $('.wy-nav-content.overlay').on('click', onOverlayClickHandler)
+}
+
+function onOverlayClickHandler() {
+  removeOverlayAndCloseSidebar()
+}
+
+function removeOverlayAndCloseSidebar() {
+  const screenWidth = window.innerWidth
+
+  const contentContainer = $('.wy-nav-content')
+  contentContainer.removeClass('overlay')
+
+  const overlayDiv = $('.overlayDiv')
+  overlayDiv.remove()
+
+  const leftSidebarOpened = $('nav.wy-nav-side.shift')
+  leftSidebarOpened.removeClass('shift')
+
+  const leftSidebar = $('nav.wy-nav-side')
+
+  // that's working don't touch
+  if(screenWidth > 991) {
+    // when user is not in tablet -> we add classes on opened sidebar and remove classes on closed sidebar
+    const contentSection = $('section.wy-nav-content-wrap')
+    const contentDiv = $('div.wy-nav-content')
+    contentSection.addClass('wy-nav-content-wrap-opened-sidebar')
+    contentDiv.addClass('wy-nav-content-opened-sidebar')
+    contentSection.removeClass('wy-nav-content-wrap-closed-sidebar')
+    contentDiv.removeClass('wy-nav-content-closed-sidebar')
+    leftSidebar.removeClass('display_none')
+    return 
+  }
+
+  if(screenWidth <= 991) {
+    // I add closed classes to make contentContainer 100% width
+    const contentSection = $('section.wy-nav-content-wrap')
+    const contentDiv = $('div.wy-nav-content')
+    contentSection.removeClass('wy-nav-content-wrap-opened-sidebar')
+    contentDiv.removeClass('wy-nav-content-opened-sidebar')
+    contentSection.addClass('wy-nav-content-wrap-closed-sidebar')
+    contentDiv.addClass('wy-nav-content-closed-sidebar')
+    leftSidebar.addClass('display_none')
+  }
+  
+}
+
+function createOpenSidebarButton() {
+  const divToInsert = $('div[role=navigation][aria-label="Page navigation"]')
+  divToInsert[0].insertAdjacentHTML('afterbegin', formOpenSidebarButton())
+ 
+  const newlyCreatedButton = $('.openLeftSidebarMenuButton')
+
+  newlyCreatedButton.on('click', onOpenLeftSidebarMenuButtonClickHandler)
+}
+
+function onOpenLeftSidebarMenuButtonClickHandler(e) {
+  e.stopPropagation()
+  const leftSidebar = $('nav.wy-nav-side')
+  const leftSidebarOpened = $('nav.wy-nav-side.shift')
+  if(leftSidebarOpened[0]) {
+    // leftSidebarOpened.removeClass('shift')
+    removeOverlayAndCloseSidebar()
+  }
+
+  createOverlay()
+  if(leftSidebar.hasClass('display_none')) leftSidebar.removeClass('display_none')
+  if(leftSidebar.hasClass('.additionalStylesForShift')) leftSidebar.removeClass('.additionalStylesForShift')
+  // here I add classes to contentSection and contentDiv to make them margined left and remove closed classes if any
+  const contentSection = $('section.wy-nav-content-wrap')
+  const contentDiv = $('div.wy-nav-content')
+  // contentSection.removeClass('wy-nav-content-wrap-closed-sidebar')
+  // contentDiv.removeClass('wy-nav-content-closed-sidebar')
+  // contentSection.addClass('wy-nav-content-wrap-opened-sidebar')
+  // contentDiv.addClass('wy-nav-content-opened-sidebar')
+  return leftSidebar.addClass('shift')
+}
+
+function createCloseSidebarButton(screenWidth) {
+  const updatedLeftSidebarScrollDiv = $('nav.wy-nav-side')
+
+  const alreadyCreatedButtonCheck = $('div.closeLeftSidebarMenuButton')
+  if(alreadyCreatedButtonCheck[0]) return 
+
+  updatedLeftSidebarScrollDiv[0].insertAdjacentHTML('beforeend', formCloseLeftSidebarButton())
+  updatedLeftSidebarScrollDiv.addClass('additionalStylesForShift')
+
+  const createdCloseSidebarButton = $('.closeButtonDivLine')
+
+  createdCloseSidebarButton.on('click', function () {
+    removeOverlayAndCloseSidebar()
+  })
+}
+
+function formOpenSidebarButton() {
+  return `
+    <div class='openLeftSidebarMenuButton'>
+      ${hamburgerIcon}
+    </div>
+  `
+}
+
+function formCloseLeftSidebarButton() {
+  return `
+    <div class='closeButtonDivLine'>
+      <div class='closeLeftSidebarMenuButton'>
+        Close
+      </div>
+    </div>
+  `
+}
+
+function removeOverlayAndButtons(screenWidth) {
+  removeOverlayAndCloseSidebar()
+  removeButtons()
+}