diff --git a/packages/web/docs/src/app/global.css b/packages/web/docs/src/app/global.css
new file mode 100644
index 0000000000..5cfd68ca14
--- /dev/null
+++ b/packages/web/docs/src/app/global.css
@@ -0,0 +1,16 @@
+.nextra-sidebar.nextra-sidebar {
+  width: 300px;
+
+  & ul {
+    padding-left: 4px;
+    margin-left: 9px;
+
+    & .x\:text-gray-500 {
+      @apply text-gray-700 dark:text-neutral-300;
+    }
+  }
+}
+
+article.x\:min-h-\[calc\(100vh-var\(--nextra-navbar-height\)\)\] {
+  @apply md:pl-6 md:pr-8;
+}
diff --git a/packages/web/docs/src/app/layout.tsx b/packages/web/docs/src/app/layout.tsx
index b08da5cf26..443a2f1be5 100644
--- a/packages/web/docs/src/app/layout.tsx
+++ b/packages/web/docs/src/app/layout.tsx
@@ -20,6 +20,7 @@ import '../selection-styles.css';
 import '../easing-functions.css';
 import '../mermaid.css';
 import { NarrowPages } from './narrow-pages';
+import './global.css';
 
 export const metadata = getDefaultMetadata({
   productName: PRODUCTS.HIVE.name,