diff --git a/docs/site.json b/docs/site.json
index 4d3ddaa1ba1..008d6c84d99 100644
--- a/docs/site.json
+++ b/docs/site.json
@@ -30,4 +30,4 @@
     "message": "Site Update."
   },
   "timeZone": "Asia/Singapore"
-}
\ No newline at end of file
+}
diff --git a/docs/stylesheets/main.css b/docs/stylesheets/main.css
index e69de29bb2d..1074ade42dd 100644
--- a/docs/stylesheets/main.css
+++ b/docs/stylesheets/main.css
@@ -0,0 +1,144 @@
+mark {
+  background-color: #ff0;
+  border-radius: 5px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.indented {
+  padding-left: 20px;
+}
+
+.theme-card img {
+  width: 100%;
+}
+
+/* Scrollbar */
+
+.slim-scroll::-webkit-scrollbar {
+  width: 5px;
+}
+
+.slim-scroll::-webkit-scrollbar-thumb {
+  background: #808080;
+  border-radius: 20px;
+}
+
+.slim-scroll::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 20px;
+}
+
+.slim-scroll-blue::-webkit-scrollbar {
+  width: 5px;
+}
+
+.slim-scroll-blue::-webkit-scrollbar-thumb {
+  background: #00b0ef;
+  border-radius: 20px;
+}
+
+.slim-scroll-blue::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 20px;
+}
+
+/* Layout containers */
+
+#flex-body {
+  display: flex;
+  flex: 1;
+  align-items: start;
+}
+
+#content-wrapper {
+  flex: 1;
+  margin: 0 auto;
+  min-width: 0;
+  max-width: 1000px;
+  overflow-x: auto;
+  padding: 0.8rem 20px 0 20px;
+  transition: 0.4s;
+  -webkit-transition: 0.4s;
+}
+
+#site-nav,
+#page-nav {
+  display: flex;
+  flex-direction: column;
+  position: sticky;
+  top: var(--sticky-header-height);
+  flex: 0 0 auto;
+  max-width: 300px;
+  max-height: calc(100vh - var(--sticky-header-height));
+  width: 300px;
+}
+
+#site-nav {
+  border-right: 1px solid lightgrey;
+  padding-bottom: 20px;
+  z-index: 999;
+}
+
+.site-nav-top {
+  margin: 0.8rem 0;
+  padding: 0 12px 12px 12px;
+}
+
+.nav-component {
+  overflow-y: auto;
+}
+
+#page-nav {
+  border-left: 1px solid lightgrey;
+}
+
+@media screen and (max-width: 1299.98px) {
+  #page-nav {
+    display: none;
+  }
+}
+
+/* Bootstrap medium(md) responsive breakpoint */
+@media screen and (max-width: 991.98px) {
+  #site-nav {
+    display: none;
+  }
+}
+
+/* Bootstrap small(sm) responsive breakpoint */
+@media (max-width: 767.98px) {
+  .indented {
+    padding-left: 10px;
+  }
+
+  #content-wrapper {
+    padding: 0 10px;
+  }
+}
+
+/* Bootstrap extra small(xs) responsive breakpoint */
+@media screen and (max-width: 575.98px) {
+  #site-nav {
+    display: none;
+  }
+}
+
+/* Hide site navigation when printing */
+@media print {
+  #site-nav {
+    display: none;
+  }
+
+  #page-nav {
+    display: none;
+  }
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: #e46c0a;
+}
diff --git a/docs/stylesheets/userguide.css b/docs/stylesheets/userguide.css
index e69de29bb2d..61b0ec22a76 100644
--- a/docs/stylesheets/userguide.css
+++ b/docs/stylesheets/userguide.css
@@ -0,0 +1,18 @@
+.bordered-table {
+    border-collapse: collapse;
+}
+
+.bordered-table th {
+    border: 1px solid black;
+    border-bottom: 2px solid black;
+}
+
+.bordered-table td {
+    border: 1px solid black;
+    padding: 6px;
+}
+
+.bordered-table tr:nth-child(even) {
+    background-color: rgba(0, 0, 0, 0.05);
+
+}