diff --git a/documentation/docs/components/matrix-link.tsx b/documentation/docs/components/matrix-link.tsx
new file mode 100644
index 0000000000..8b1ab22208
--- /dev/null
+++ b/documentation/docs/components/matrix-link.tsx
@@ -0,0 +1,15 @@
+import { Box } from "@mui/material";
+import Image from "next/image";
+import Link from "next/link";
+import matrixLogo from "../images/matrix-logo.png";
+export const Matrix = () => {
+  return (
+    <Link
+      href={"https://matrix.to/#/#dev:nymtech.chat"}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <Image src={matrixLogo} alt={"Matrix Logo"} width={20} height={24} />
+    </Link>
+  );
+};
diff --git a/documentation/docs/images/matrix-logo.png b/documentation/docs/images/matrix-logo.png
new file mode 100644
index 0000000000..7b7f368200
Binary files /dev/null and b/documentation/docs/images/matrix-logo.png differ
diff --git a/documentation/docs/pages/styles.css b/documentation/docs/pages/styles.css
index 689cb2701f..bdf55b1473 100644
--- a/documentation/docs/pages/styles.css
+++ b/documentation/docs/pages/styles.css
@@ -1,32 +1,36 @@
 body {
-    --colorPrimary: #fb6e4e;
-    --textPrimary: #121726;
+  --colorPrimary: #fb6e4e;
+  --textPrimary: #121726;
 }
 
 div.nextra-code-block > div {
-    background: var(--colorPrimary) !important;
+  background: var(--colorPrimary) !important;
 }
 
 .nextra-code-block > pre {
-    /* max-height: 350px !important; */
-    max-height: none !important;
-    scroll-y: auto !important;
+  /* max-height: 350px !important; */
+  max-height: none !important;
+  scroll-y: auto !important;
 }
 
 /* Code blocks*/
 .nx-absolute.nx-top-0 {
-    background: var(--colorPrimary) !important;
-    color: var(--textPrimary) !important;
+  background: var(--colorPrimary) !important;
+  color: var(--textPrimary) !important;
 }
 
 :is(html[class~="dark"] .dark\:nx-bg-primary-300\/10) {
-    background-color: hsl(var(black) 100% 77%/0.1) !important;
+  background-color: hsl(var(black) 100% 77%/0.1) !important;
 }
 
 /* Sidebar buttons */
 :is(html .dark\:nx-bg-primary-400\/10) {
-    background: var(--colorPrimary) !important;
-    color: var(--textPrimary) !important;
+  background: var(--colorPrimary) !important;
+  color: var(--textPrimary) !important;
+}
+
+.nextra-sidebar-container {
+  border-right: 1px solid #262626;
 }
 
 /* aside ul > li > a:hover{
@@ -39,68 +43,68 @@ div.nextra-code-block > div {
 
 /* Links*/
 .nx-text-primary-600.nx-underline.nx-decoration-from-font {
-    color: var(--colorPrimary) !important;
+  color: var(--colorPrimary) !important;
 }
 
 .MuiTypography-root.MuiTypography-inherit.MuiLink-root.MuiLink-underlineAlways.css-1xr3c94-MuiTypography-root-MuiLink-root {
-    color: var(--colorPrimary) !important;
+  color: var(--colorPrimary) !important;
 }
 
 /* Callouts */
 .nextra-callout {
-    background-color: #fb6e4e21 !important;
+  background-color: #fb6e4e21 !important;
 }
 
 .nx-mt-6 .nx-leading-7 > p {
-    color: var(--colorPrimary) !important;
+  color: var(--colorPrimary) !important;
 }
 
 /* Callout Secondary */
 :is(html .dark\:nx-border-yellow-200\/30) {
-    border-color: transparent !important;
+  border-color: transparent !important;
 }
 
 /* Callout Primary */
 :is(html .dark\:nx-border-blue-200\/30) {
-    border-color: var(--colorPrimary) !important;
+  border-color: var(--colorPrimary) !important;
 }
 
 /* Chips*/
 .chipContained {
-    background-color: var(--colorPrimary) !important;
+  background-color: var(--colorPrimary) !important;
 }
 
 /* Buttons */
 .MuiButton-root {
-    color: var(--colorPrimary) !important;
-    border-color: var(--colorPrimary) !important;
+  color: var(--colorPrimary) !important;
+  border-color: var(--colorPrimary) !important;
 }
 
 .MuiButton-root:hover {
-    color: white !important;
-    background-color: var(--colorPrimary) !important;
+  color: white !important;
+  background-color: var(--colorPrimary) !important;
 }
 
 .MuiCircularProgress-root {
-    color: var(--colorPrimary) !important;
+  color: var(--colorPrimary) !important;
 }
 
 .nextra-scrollbar.nx-sticky {
-    color: var(--colorPrimary) !important;
+  color: var(--colorPrimary) !important;
 }
 
 .nx-text-primary-600 {
-    color: var(--colorPrimary) !important;
+  color: var(--colorPrimary) !important;
 }
 
 input:focus-visible {
-    --tw-ring-shadow: var(--colorPrimary) !important;
+  --tw-ring-shadow: var(--colorPrimary) !important;
 }
 
 .Mui-focused > fieldset {
-    border-color: var(--colorPrimary) !important;
+  border-color: var(--colorPrimary) !important;
 }
 
 a.MuiLink-root {
-    color: var(--colorPrimary) !important;
+  color: var(--colorPrimary) !important;
 }
diff --git a/documentation/docs/theme.config.tsx b/documentation/docs/theme.config.tsx
index 1535011f34..aa12c789ce 100644
--- a/documentation/docs/theme.config.tsx
+++ b/documentation/docs/theme.config.tsx
@@ -1,31 +1,41 @@
 import React from "react";
 import { DocsThemeConfig } from "nextra-theme-docs";
 import { Footer } from "./components/footer";
+import { Matrix } from "./components/matrix-link";
 
 const config: DocsThemeConfig = {
   logo: <span>Nym Docs</span>,
   project: {
     link: "https://github.com/nymtech/nym",
   },
-  // chat: {
-  //   link: "https://matrix.to/#/#dev:nymtech.chat",
-  // },
   docsRepositoryBase:
-    "https://github.com/nymtech/nym/tree/develop/documentation/",
+    "https://github.com/nymtech/nym/tree/develop/documentation/docs/",
   footer: {
     text: Footer,
   },
   darkMode: true,
-  // nextThemes: {
-  //   forcedTheme: "dark",
-  // },
   primaryHue: {
     dark: 30,
     light: 30,
   },
+  primarySaturation: 68,
   sidebar: {
     defaultMenuCollapseLevel: 1,
     autoCollapse: true,
+    toggleButton: true,
+  },
+  navbar: {
+    extraContent: <Matrix />,
+  },
+  toc: {
+    float: false,
+  },
+  // gitTimestamp: TODO ,
+  editLink: {
+    component: null,
+  },
+  feedback: {
+    content: null,
   },
 };