diff --git a/new-docs/layout.tsx b/new-docs/layout.tsx
new file mode 100644
index 00000000..d6679ab6
--- /dev/null
+++ b/new-docs/layout.tsx
@@ -0,0 +1,10 @@
+import { ReactElement, ReactNode } from "react";
+
+/**
+ * Moai components require className "light" for styling so we create a custom
+ * layout that wrap outside all documents with className "light"
+ * https://vocs.dev/docs/structure#layout-component
+ */
+export default function Layout(props: { children: ReactNode }): ReactElement {
+	return <div className="light">{props.children}</div>;
+}