diff --git a/docs/data/joy/getting-started/tutorial/LoginFinal.js b/docs/data/joy/getting-started/tutorial/LoginFinal.js
new file mode 100644
index 00000000000000..ee7b6c45e6f741
--- /dev/null
+++ b/docs/data/joy/getting-started/tutorial/LoginFinal.js
@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
+import Sheet from '@mui/joy/Sheet';
+import Typography from '@mui/joy/Typography';
+import TextField from '@mui/joy/TextField';
+import Button from '@mui/joy/Button';
+import Link from '@mui/joy/Link';
+
+const ModeToggle = () => {
+  const { mode, setMode } = useColorScheme();
+  const [mounted, setMounted] = React.useState(false);
+
+  // necessary for server-side rendering
+  // because mode is undefined on the server
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <Button
+      variant="outlined"
+      onClick={() => {
+        if (mode === 'light') {
+          setMode('dark');
+        } else {
+          setMode('light');
+        }
+      }}
+    >
+      {mode === 'light' ? 'Turn dark' : 'Turn light'}
+    </Button>
+  );
+};
+
+export default function App() {
+  return (
+    <CssVarsProvider>
+      <main>
+        <ModeToggle />
+        <Sheet
+          sx={{
+            maxWidth: 400,
+            mx: 'auto', // margin left & right
+            my: 4, // margin top & botom
+            py: 3, // padding top & bottom
+            px: 2, // padding left & right
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+            borderRadius: 'sm',
+            boxShadow: 'md',
+          }}
+          variant="outlined"
+        >
+          <div>
+            <Typography level="h4" component="h1">
+              <b>Welcome!</b>
+            </Typography>
+            <Typography level="body2">Sign in to continue.</Typography>
+          </div>
+          <TextField
+            // html input attribute
+            name="email"
+            type="email"
+            placeholder="johndoe@email.com"
+            // pass down to FormLabel as children
+            label="Email"
+          />
+          <TextField
+            name="password"
+            type="password"
+            placeholder="password"
+            label="Password"
+          />
+          <Button
+            sx={{
+              mt: 1, // margin top
+            }}
+          >
+            Log in
+          </Button>
+          <Typography
+            endDecorator={<Link href="/sign-up">Sign up</Link>}
+            fontSize="sm"
+            sx={{ alignSelf: 'center' }}
+          >
+            Don&apos;t have an account?
+          </Typography>
+        </Sheet>
+      </main>
+    </CssVarsProvider>
+  );
+}
diff --git a/docs/data/joy/getting-started/tutorial/tutorial.md b/docs/data/joy/getting-started/tutorial/tutorial.md
index d9082c1cfca2ce..e6bd133873ad1b 100644
--- a/docs/data/joy/getting-started/tutorial/tutorial.md
+++ b/docs/data/joy/getting-started/tutorial/tutorial.md
@@ -1,53 +1,65 @@
-# Tutorial
+# Introductory tutorial
 
-<p class="description">Quickly learn how to create a login page using Joy UI components.</p>
+<p class="description">Learn how to import and style Joy UI components to build a simple login page with light and dark modes.</p>
 
-In this small tutorial, you'll learn how to:
+This tutorial will walk you through how to assemble the UI for a basic login page using Joy UI.
+You'll be introduced to several common components as well as some of the props you can use to control their styles.
+You'll also encounter key features of Joy UI such as global variants, the `sx` prop, and the `useColorScheme` hook.
 
-1. Import Joy UI components.
-2. Build a basic login page with them.
-3. Toggle light and dark mode.
+By the end, you should understand how to:
 
-The only **prerequesite** is [having Joy UI installed](/joy-ui/getting-started/installation/).
+1. import and customize Joy UI components
+2. add styles to Joy UI components with `sx`
+3. override default HTML elements with `component`
+4. toggle light and dark mode with `useColorScheme`
 
-:::warning
-⚠️ **Note:** We won't cover theming and general component customization at this moment.
-Learn more about [the different customization approaches](/joy-ui/customization/approaches/) later.
-:::
+## Interactive demo
+
+Here's what the final product looks like—click on the **< >** icon underneath the demo to see the full source code:
+
+{{"demo": "LoginFinal.js", "hideToolbar": false, "bg": true}}
+
+## Prerequisites
 
-## Building the login page
+This tutorial assumes that you've already:
 
-### 1. Creating the basic layout
+- set up a React app—try [Create React App](https://create-react-app.dev/) if you need a boilerplate
+- installed Joy UI in your app—see [Installation](/joy-ui/getting-started/installation/) for instructions
 
-To create the structure for the login page, we'll use the `Sheet` component, which is simply an HTML div that supports the global variant feature.
+## Import the Sheet component for structure
 
-Try playing around with different variant values to see how they look like.
-You can use `solid`, `soft`, `outlined`, or `plain`.
+The [Sheet](/joy-ui/react-sheet/) component is a `<div>` container that supports Joy UI's [global variants feature](/joy-ui/main-features/global-variants/), helping to ensure consistency across your app.
+
+Import Sheet and add it to your app as shown below.
+(If you're using Create React App, for example, all of this code should go in `App.js`.)
+Notice that Joy UI components must be nested within `<CssVarsProvider />`:
 
 ```jsx
+import * as React from 'react';
 import { CssVarsProvider } from '@mui/joy/styles';
 import Sheet from '@mui/joy/Sheet';
 
-function App() {
+export default function App() {
   return (
     <CssVarsProvider>
       <Sheet variant="outlined">Welcome!</Sheet>
     </CssVarsProvider>
   );
 }
-
-export default App;
 ```
 
-:::info
-**Don't forget:** always render Joy UI components inside the `<CssVarsProvider/>` component.
+:::success
+Try playing around with different `variant` values to see the available styles.
+In addition to `outlined`, you can also use `solid`, `soft`, or `plain`—these are Joy UI's [global variants](/joy-ui/main-features/global-variants/), and they're available on all components.
 :::
 
-### 2. Using the `sx` prop for quick styling
+### Add styles with the sx prop
 
-Every Joy UI component accepts the `sx` prop, which allows a shorthand syntax for writing CSS.
+All Joy UI components accept [the `sx` prop](/system/getting-started/the-sx-prop/), which gives you access to a shorthand syntax for writing CSS.
 It's great for creating one-off customizations or rapidly experimenting with different styles.
 
+Replace your basic Sheet from the previous step with the following `sx`-styled Sheet:
+
 ```jsx
 <Sheet
   sx={{
@@ -67,116 +79,119 @@ It's great for creating one-off customizations or rapidly experimenting with dif
 </Sheet>
 ```
 
-Don't worry if you're confused about the `sx` prop's syntax at this moment.
-You'll get the hang of it as you use it more.
-Check the [MUI System's documentation](/system/getting-started/the-sx-prop/) to learn more about its foundation.
+:::success
+Try changing some of the values for the CSS properties above based on the patterns you observe.
+To go deeper, read about the `sx` prop in the [MUI System documentation](/system/getting-started/the-sx-prop/).
+:::
+
+## Add text with the Typography component
+
+The [Typography](/joy-ui/react-typography/) component replaces HTML header, paragraph, and span tags to help maintain a consistent hierarchy of text on the page.
+
+:::info
+The `level` prop gives you access to a pre-defined scale of typographic values.
+Joy UI provides 13 typographic levels out of the box:
 
-### 3. Using `Typography` to create a welcome text
+`display1 | display2 | h1 | h2 | h3 | h4 | h5 | h6 | body1 | body2 | body3 | body4 | body5`
 
-The `Typography` component supports the `level` prop, allowing you to choose between a pre-defined scale of typography values.
-Joy UI provides 13 typography levels out of the box: `display 1 | display 2 | h1 | h2 | h3 | h4 | h5 | h6 | body1 | body2 | body3 | body4 | body5`.
+:::
 
-You can also change which HTML tag gets rendered in each `Typography` component using the `component` prop.
+Add an import for Typography with the rest of your imports:
 
 ```jsx
-// ...other imports
 import Typography from '@mui/joy/Typography';
+```
 
-<Sheet
-  sx={...}
->
-  <div>
-    <Typography level="h4" component="h1">
-      <b>Welcome!</b>
-    </Typography>
-    <Typography level="body2">Sign in to continue</Typography>
-  </div>
-</Sheet>;
+Replace `Welcome!` inside your Sheet component with this `<div>`:
+
+```jsx
+<div>
+  <Typography level="h4" component="h1">
+    Welcome!
+  </Typography>
+  <Typography level="body2">Sign in to continue.</Typography>
+</div>
 ```
 
-### 4. Using `TextField` to create user name and password inputs
+:::success
+Try changing the values for the `level` and `component` props to see how they affect the typographic values and the elements rendered.
+(Note that while `level` only accepts the 13 values listed above, you can pass any HTML tag to `component`, as well as custom React components.)
+:::
+
+## Add Text Field for user inputs
 
-The `TextField` component is made of the `FormLabel`, `Input` and `FormHelperText` components.
+The [Text Field](/joy-ui/react-text-field/) component bundles together the Form Control, Form Label, Input, and Form Helper Text components to provide you with a sophisticated field for user input.
+
+Add an import for Text Field with the rest of your imports:
 
 ```jsx
-// ...other imports
 import TextField from '@mui/joy/TextField';
+```
 
-<Sheet
-  sx={
-    {
-      // ...
-    }
-  }
->
-  ...typography
-  <TextField
-    // html input attribute
-    name="email"
-    type="email"
-    placeholder="johndoe@email.com"
-    // pass down to FormLabel as children
-    label="Email"
-  />
-  <TextField
-    name="password"
-    type="password"
-    placeholder="password"
-    label="Password"
-  />
-</Sheet>;
+Insert these two Text Fields below the `<div>` from the previous step, inside the Sheet:
+
+```jsx
+<TextField
+  // html input attribute
+  name="email"
+  type="email"
+  placeholder="johndoe@email.com"
+  // pass down to FormLabel as children
+  label="Email"
+/>
+<TextField
+  name="password"
+  type="password"
+  placeholder="password"
+  label="Password"
+/>
 ```
 
-### 5. Using `Button` and `Link` for actions
+## Import Button and Link for user actions
 
-The `Button` component has `solid` and `primary` as its default variant and color, respectively.
-Play around with changing their values to see how each variant differs from one another.
-Try `plain`, `outlined`, or `soft`.
+The [Button](/joy-ui/react-button/) and [Link](/joy-ui/react-link/) components replace the HTML `<button>` and `<a>` tags, respectively, giving you access to global variants, the `sx` and `component` props, and more.
 
-We'll also use a `Link` component inside the `endDecorator` prop of the `Typography` component to pull off the sign up anchor link.
+Add the following imports with the rest in your app:
 
 ```jsx
-// ...other imports
 import Button from '@mui/joy/Button';
 import Link from '@mui/joy/Link';
+```
 
-<Sheet
-  sx={
-    {
-      // ...
-    }
-  }
+Add the following Button, Typography, and Link components after the Text Fields from the previous step, still nested inside the Sheet.
+Notice that the Link is appended to the Typography inside of [the `endDecorator` prop](/joy-ui/react-typography/#decorators):
+
+```jsx
+<Button
+  sx={{
+    mt: 1, // margin top
+  }}
 >
-  ...typography and text-fields
-  <Button
-    sx={{
-      mt: 1, // margin top
-    }}
-  >
-    Log in
-  </Button>
-  <Typography
-    endDecorator={<Link href="/sign-up">Sign up</Link>}
-    fontSize="sm"
-    sx={{ alignSelf: 'center' }}
-  >
-    Don't have an account?
-  </Typography>
-</Sheet>;
+  Log in
+</Button>
+<Typography
+  endDecorator={<Link href="/sign-up">Sign up</Link>}
+  fontSize="sm"
+  sx={{ alignSelf: 'center' }}
+>
+  Don't have an account?
+</Typography>
 ```
 
-<!-- TODO: Add the result image -->
+## 🎁 Bonus: Build a toggle for light and dark mode
 
-## 🎁 Bonus: Setting up dark mode
+The `useColorScheme` hook aids in the implementation of a toggle button for switching between light and dark mode in an app.
+It also enables Joy UI to ensure that the user-selected mode (which is stored in `localStorage` by default) stays in sync across browser tabs.
 
-Joy UI provides an effortless way to toggle between modes by using the React hook `useColorScheme`.
-All you need to do is create a component that uses the hook and then render it under the `CssVarsProvider` component.
+Add `useColorScheme` to your import from `@mui/joy/styles`:
 
 ```jsx
-import React from 'react';
 import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
-// ...other imports
+```
+
+Next, create a light/dark mode toggle button by adding the following code snippet in between your imports and your `App()`:
 
+```jsx
 const ModeToggle = () => {
   const { mode, setMode } = useColorScheme();
   const [mounted, setMounted] = React.useState(false);
@@ -205,19 +220,46 @@ const ModeToggle = () => {
     </Button>
   );
 };
+```
 
-export default function App() {
+Finally, add your newly built `<ModeToggle />` button above `<Sheet />`:
+
+```diff
+ export default function App() {
   return (
     <CssVarsProvider>
-      <ModeToggle />
++      <ModeToggle />
       <Sheet>...</Sheet>
     </CssVarsProvider>
   );
 }
 ```
 
-:::info
-💡 **Note:** With the `useColorScheme` hook, Joy UI ensures that the user selected mode (stored in localStorage by default) is in-sync across browser tabs.
-:::
+Your app should now look like the [interactive demo](#interactive-demo) at the top of the page.
+Great job making it all the way to the end!
+
+## Summary
+
+Here's a recap of the components used:
+
+- [Sheet](/joy-ui/react-sheet/)
+- [Typography](/joy-ui/react-typography/)
+- [Button](/joy-ui/react-button/)
+- [Link](/joy-ui/react-link/)
+- [Text Field](/joy-ui/react-text-field/)
+
+Here are some of the major features introduced:
+
+- [global variants](/joy-ui/main-features/global-variants/)
+- [the `sx` prop](/system/getting-started/the-sx-prop/)
+- [dark mode](/joy-ui/guides/applying-dark-mode/)
+
+## Next steps
+
+This tutorial does not cover theming or general component customization.
+Learn more about [different customization approaches](/joy-ui/customization/approaches/) and when to apply them.
+
+To see some more sophisticated examples of Joy UI in action, check out our [collection of templates](/joy-ui/getting-started/templates/).
 
-Congratulations 🎉! You've built your first good looking UI with Joy UI!
+Are you migrating from Material UI?
+Learn how to work with [Joy UI and Material UI together in one app](/joy-ui/guides/using-joy-ui-and-material-ui-together/).