diff --git a/plugins/docusaurus/src/theme/CodeBlock/index.jsx b/plugins/docusaurus/src/theme/CodeBlock/index.jsx
index f799d7bf1..5f50696b9 100644
--- a/plugins/docusaurus/src/theme/CodeBlock/index.jsx
+++ b/plugins/docusaurus/src/theme/CodeBlock/index.jsx
@@ -52,6 +52,7 @@ const RenderSandpack = (props) => {
               : { [file]: children }
             : undefined
         }
+        options={{ showConsoleButton: true }}
         template={template}
         theme={theme}
       />
diff --git a/sandpack-react/src/components/Console/SandpackConsole.tsx b/sandpack-react/src/components/Console/SandpackConsole.tsx
index 3d6b89a70..2ffa52fce 100644
--- a/sandpack-react/src/components/Console/SandpackConsole.tsx
+++ b/sandpack-react/src/components/Console/SandpackConsole.tsx
@@ -20,6 +20,14 @@ interface SandpackConsoleProps {
   onLogsChange?: (logs: SandpackConsoleData) => void;
 }
 
+/**
+ * @category Components
+ *
+ * `SandpackConsole` is a Sandpack devtool that allows printing 
+ * the console logs from a Sandpack client. It is designed to be 
+ * a light version of a browser console, which means that it's 
+ * limited to a set of common use cases you may encounter when coding.
+ */
 export const SandpackConsole: React.FC<
   React.HTMLAttributes<HTMLDivElement> & SandpackConsoleProps
 > = ({
diff --git a/sandpack-react/src/components/Console/useSandpackConsole.ts b/sandpack-react/src/components/Console/useSandpackConsole.ts
index 24fb552a6..6b5e358bb 100644
--- a/sandpack-react/src/components/Console/useSandpackConsole.ts
+++ b/sandpack-react/src/components/Console/useSandpackConsole.ts
@@ -9,6 +9,11 @@ import {
 } from "./utils/constraints";
 import type { SandpackConsoleData } from "./utils/getType";
 
+/**
+ * It provides an interface to consume the logs from a sandpack client.
+ *
+ * @category Hooks
+ */
 export const useSandpackConsole = (props?: {
   clientId?: string;
   maxMessageCount?: number;
diff --git a/website/docs/docs/advanced-usage/components.md b/website/docs/docs/advanced-usage/components.md
index 7a982afaa..3aeba5118 100644
--- a/website/docs/docs/advanced-usage/components.md
+++ b/website/docs/docs/advanced-usage/components.md
@@ -304,12 +304,22 @@ This is especially useful to get the cursor's current position, add custom decor
 For situations when you strictly want to show some code and run it in the browser, you can use the `SandpackCodeViewer` component. It looks similar to the code editor, but it renders a read-only version of `codemirror`, so users will not be able to edit the code.
 
 ```jsx
-<SandpackProvider template="react">
-  <SandpackLayout>
-    <SandpackCodeViewer />
-    <SandpackPreview />
-  </SandpackLayout>
-</SandpackProvider>
+import {
+  SandpackProvider,
+  SandpackLayout,
+  SandpackCodeEditor,
+  SandpackCodeViewer,
+  SandpackPreview
+} from "@codesandbox/sandpack-react";
+
+const CustomSandpack = () => (
+  <SandpackProvider template="react">
+    <SandpackLayout>
+      <SandpackCodeViewer />
+      <SandpackPreview />
+    </SandpackLayout>
+  </SandpackProvider>
+)
 ```
 
 <SandpackProvider template="react">
@@ -328,6 +338,50 @@ This API provides a way to draw or style a piece of code in the editor content.
 
 <SandpackDecorators />
 
+## Console
+
+`SandpackConsole` is a Sandpack devtool that allows printing the console logs from a Sandpack client. It is designed to be a light version of a browser console, which means that it's limited to a set of common use cases you may encounter when coding.
+
+Sandpack runs the console directly into the iframe. As a result, all console messages pass through the Sandpack protocol, where you can attach a listener to these messages in your own component or use the proper Sandpack React hook to consume them. 
+ 
+There are three ways to print the logs:
+- [`<Sandpack options={{ showConsole: true }} />`](/api/react/interfaces/SandpackOptions#showconsole): shows a panel right after the `SandpackPreview`;
+- [`<SandpackConsole />`](/api/react/#sandpackconsole): standalone component to render the logs;
+- [`useSandpackConsole`](/api/react/#usesandpackconsole): React hook to consume the console logs from a Sandpack client;
+
+```jsx
+import { Sandpack } from "@codesandbox/sandpack-react";
+
+<Sandpack 
+  options={{ 
+    showConsole: true, 
+    showConsoleButton: true 
+  }}
+/>
+```
+
+<Sandpack 
+  files={{ 
+    "/src/index.js": `console.log("Hello Sandpack")    \n
+document.getElementById("app").innerHTML = \`
+<h1>Check the logs 👇</h1>
+\`
+`
+  }} 
+  template="vanilla"
+  options={{ showConsole: true, showConsoleButton: true }} 
+/>
+
+**Limitation**
+
+Considering that `SandpackConsole` is meant to be a light version of browser console, there are a few limitations in its implementation in order to keep it modular and light:
+- It needs to have a Sandpack client running (iframe) to execute the logs.
+- It only supports four types of consoles: `info`, `warning`, `error`, and `clear`.
+- It doesn't render nested objects due to recursive issues.
+
+However, if you need to support more advanced cases, `useSandpackConsole` is compatible with [console-feed](https://www.npmjs.com/package/console-feed), which provides a closer browser-console experience without any of the limitations mentioned above.
+
+
 ## ReactDevTools
 
 Sandpack also provides a component that adds React DevTools, allowing you to inspect the React component hierarchies in the iframe. This is useful for `props` debugging and understanding the component tree. Our `SandpackReactDevTools` component has the same functionality as the React DevTools browser extensions, but it only shows what is in your Sandpack instance.
@@ -345,15 +399,16 @@ Sandpack also provides a component that adds React DevTools, allowing you to ins
   SandpackLayout,
   SandpackPreview,
   SandpackReactDevTools,
+  SandpackStack
 } from "@codesandbox/sandpack-react";
 export default function CustomSandpack() {
   return (
     <SandpackProvider template="react">
       <SandpackLayout>
-        <div style={{ display: "flex", width: "100%" }}>
-          <SandpackPreview />
+        <SandpackPreview />
+        <SandpackStack>
           <SandpackReactDevTools />
-        </div>
+         </SandpackStack> 
       </SandpackLayout>
     </SandpackProvider>
   )
diff --git a/website/docs/docs/intro.md b/website/docs/docs/intro.md
index d262ffac7..d227c8dc1 100644
--- a/website/docs/docs/intro.md
+++ b/website/docs/docs/intro.md
@@ -36,10 +36,12 @@ deeper into our ecosystem.
 ### Live coding environment in minutes
 
 ```js sandpack
+console.log("Sandpack 📦")
+
 export default function App() {
   return (
     <div className="App">
-      <h1>Hello Sandpack ✨</h1>
+      <h1>Hello World ✨</h1>
       <p>Start editing to see some magic happen!</p>
     </div>
   );
diff --git a/website/docs/src/scss/_code.scss b/website/docs/src/scss/_code.scss
index 12e22e44a..85530348d 100644
--- a/website/docs/src/scss/_code.scss
+++ b/website/docs/src/scss/_code.scss
@@ -5,7 +5,11 @@ pre {
 }
 
 .sp-code-editor {
-  border-radius: 6px;
+  border-radius: 0;
+}
+
+.sp-code-editor pre {    
+  border-radius: 0;
 }
 
 .sp-wrapper {
diff --git a/website/docs/src/scss/_heading.scss b/website/docs/src/scss/_heading.scss
index d838b08d2..277d77eff 100644
--- a/website/docs/src/scss/_heading.scss
+++ b/website/docs/src/scss/_heading.scss
@@ -21,9 +21,6 @@ body {
     font-size: 2.441rem;
   }
 
-  h3 {
-    font-size: 1.953rem;
-  }
 
   h4 {
     font-size: 1.563rem;