diff --git a/content/100-getting-started/02-setup-prisma/200-add-to-existing-project/110-relational-databases/300-next-steps.mdx b/content/100-getting-started/02-setup-prisma/200-add-to-existing-project/110-relational-databases/300-next-steps.mdx
index d7f85a172a..6ce766ccb4 100644
--- a/content/100-getting-started/02-setup-prisma/200-add-to-existing-project/110-relational-databases/300-next-steps.mdx
+++ b/content/100-getting-started/02-setup-prisma/200-add-to-existing-project/110-relational-databases/300-next-steps.mdx
@@ -96,7 +96,7 @@ To evolve the app, you need to follow the same flow of the tutorial:
 
 The [`prisma-examples`](https://github.com/prisma/prisma-examples/) repository contains a number of ready-to-run examples:
 
-<TabbedContent>
+<TabbedContent fullWidth>
 
 <TabItem value="TypeScript">
 
diff --git a/content/100-getting-started/index.mdx b/content/100-getting-started/index.mdx
index 654c58c605..b16fcc0d07 100644
--- a/content/100-getting-started/index.mdx
+++ b/content/100-getting-started/index.mdx
@@ -69,7 +69,7 @@ _These options don't require you to have your own database running._
 
 _Select one of these options if you want to connect Prisma ORM to your own database._
 
-<TabbedContent gettingStarted>
+<TabbedContent>
   <TabItem value="New database">
     <p>
       Set up Prisma ORM <b>from scratch</b> with your favorite database and
diff --git a/src/theme/Tabs/index.tsx b/src/theme/Tabs/index.tsx
index 890eafbb32..9ff4c9c043 100644
--- a/src/theme/Tabs/index.tsx
+++ b/src/theme/Tabs/index.tsx
@@ -1,4 +1,4 @@
-import React, { cloneElement } from "react";
+import React, { cloneElement, useEffect } from "react";
 import clsx from "clsx";
 import {
   useScrollPositionBlocker,
@@ -74,7 +74,7 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
     </ul>
   );
 }
-function TabContent({ lazy, children, selectedValue, transparent, code, terminal, customStyles }) {
+function TabContent({ lazy, children, selectedValue, transparent, code, terminal, fullWidth, customStyles }) {
   const childTabs = (Array.isArray(children) ? children : [children]).filter(Boolean);
   if (lazy) {
     const selectedTabItem = childTabs.find((tabItem) => tabItem.props.value === selectedValue);
@@ -87,7 +87,7 @@ function TabContent({ lazy, children, selectedValue, transparent, code, terminal
 
   return (
     <div
-      className={clsx("margin-top--md", transparent && styles.transparent, code && styles.code)}
+      className={clsx("margin-top--md", transparent && styles.transparent, code && styles.code, fullWidth && styles[`full-width`])}
       style={customStyles ? customStyles : {}}
     >
       {childTabs.map((tabItem, i) =>
@@ -112,6 +112,7 @@ function TabsComponent(props) {
 }
 export default function Tabs(props) {
   const isBrowser = useIsBrowser();
+  console.log(props)
   return (
     <TabsComponent
       // Remount tabs after hydration
diff --git a/src/theme/Tabs/styles.module.scss b/src/theme/Tabs/styles.module.scss
index 5a16225632..79493a2ca1 100644
--- a/src/theme/Tabs/styles.module.scss
+++ b/src/theme/Tabs/styles.module.scss
@@ -23,3 +23,10 @@
     }
   }
 }
+
+.full-width {
+  display: block;
+  > div > div {
+    width: 100%;
+  }
+}