diff --git a/documentation/docs/pages/styles.css b/documentation/docs/pages/styles.css
index bdf55b1473..63fcca6d49 100644
--- a/documentation/docs/pages/styles.css
+++ b/documentation/docs/pages/styles.css
@@ -1,6 +1,8 @@
 body {
   --colorPrimary: #fb6e4e;
   --textPrimary: #121726;
+  /* padding: 5px 5px 10px;
+  margin: 0 auto; */
 }
 
 div.nextra-code-block > div {
@@ -13,6 +15,17 @@ div.nextra-code-block > div {
   scroll-y: auto !important;
 }
 
+/* whole div */
+.nx-mx-auto.nx-flex.nx-max-w-\[90rem\] {
+  max-width: 110rem;
+  padding: 0%;
+}
+
+.nextra-toc {
+  width: 400px !important;
+  padding-right: 0px;
+}
+
 /* Code blocks*/
 .nx-absolute.nx-top-0 {
   background: var(--colorPrimary) !important;
@@ -31,6 +44,11 @@ div.nextra-code-block > div {
 
 .nextra-sidebar-container {
   border-right: 1px solid #262626;
+  width: 300px !important;
+}
+
+.nextra-sidebar {
+  column-width: 500px;
 }
 
 /* aside ul > li > a:hover{
diff --git a/documentation/docs/theme.config.tsx b/documentation/docs/theme.config.tsx
index aa12c789ce..f891ab01c4 100644
--- a/documentation/docs/theme.config.tsx
+++ b/documentation/docs/theme.config.tsx
@@ -14,21 +14,15 @@ const config: DocsThemeConfig = {
     text: Footer,
   },
   darkMode: true,
-  primaryHue: {
-    dark: 30,
-    light: 30,
-  },
-  primarySaturation: 68,
   sidebar: {
     defaultMenuCollapseLevel: 1,
     autoCollapse: true,
-    toggleButton: true,
   },
   navbar: {
     extraContent: <Matrix />,
   },
   toc: {
-    float: false,
+    float: true, // TODO would be nice to set this to false so the TOC is in the left sidebar but this doesn't seem to work with pages that are also the top of directories: fix
   },
   // gitTimestamp: TODO ,
   editLink: {