diff --git a/apps/docs/content/guides/getting-started/tutorials/with-svelte.mdx b/apps/docs/content/guides/getting-started/tutorials/with-svelte.mdx
index 9146ada103c..59de68988c9 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-svelte.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-svelte.mdx
@@ -17,11 +17,11 @@ If you get stuck while working through this guide, refer to the [full example on
## Building the app
-Let's start building the Svelte app from scratch.
+Start building the Svelte app from scratch.
### Initialize a Svelte app
-We can use the Vite Svelte TypeScript Template to initialize an app called `supabase-svelte`:
+You can use the Vite Svelte TypeScript Template to initialize an app called `supabase-svelte`:
```bash
npm create vite@latest supabase-svelte -- --template svelte-ts
@@ -29,14 +29,14 @@ cd supabase-svelte
npm install
```
-Then let's install the only additional dependency: [supabase-js](https://github.com/supabase/supabase-js)
+Install the only additional dependency: [supabase-js](https://github.com/supabase/supabase-js)
```bash
npm install @supabase/supabase-js
```
-And finally we want to save the environment variables in a `.env`.
-All we need are the API URL and the `anon` key that you copied [earlier](#get-the-api-keys).
+Finally, save the environment variables in a `.env`.
+All you need are the API URL and the `anon` key that you copied [earlier](#get-the-api-keys).
<$CodeTabs>
@@ -47,221 +47,46 @@ VITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
-Now that we have the API credentials in place, let's create a helper file to initialize the Supabase client. These variables will be exposed
-on the browser, and that's completely fine since we have [Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database.
+Now you have the API credentials in place, create a helper file to initialize the Supabase client. These variables will be exposed on the browser, and that's fine since you have [Row Level Security](/docs/guides/auth#row-level-security) enabled on the Database.
-<$CodeTabs>
-
-```js name=src/supabaseClient.ts
-import { createClient } from '@supabase/supabase-js'
-
-const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
-const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
-
-export const supabase = createClient(supabaseUrl, supabaseAnonKey)
-```
-
-
+<$CodeSample
+path="user-management/svelte-user-management/src/supabaseClient.ts"
+meta="name=src/supabaseClient.ts"
+/>
### App styling (optional)
-An optional step is to update the CSS file `src/app.css` to make the app look nice.
-You can find the full contents of this file [here](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/svelte-user-management/src/app.css).
+Optionally, update the CSS file `src/app.css` to make the app look nice.
+You can find the full contents of this file [on GitHub](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/svelte-user-management/src/app.css).
### Set up a login component
-Let's set up a Svelte component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords.
+Set up a Svelte component to manage logins and sign ups. It uses Magic Links, so users can sign in with their email without using passwords.
-<$CodeTabs>
-
-```html name=src/lib/Auth.svelte
-
-
-
-
-
Supabase + Svelte
-
Sign in via magic link with your email below
-
-
-
-```
-
-
+<$CodeSample
+path="user-management/svelte-user-management/src/lib/Auth.svelte"
+meta="name=src/lib/Auth.svelte"
+/>
### Account page
-After a user is signed in we can allow them to edit their profile details and manage their account.
-Let's create a new component for that called `Account.svelte`.
+After a user is signed in, allow them to edit their profile details and manage their account.
+Create a new component for that called `Account.svelte`.
-<$CodeTabs>
-
-```tsx name=src/lib/Account.svelte
-
-
-
-```
-
-
+<$CodeSample
+path="/user-management/svelte-user-management/src/lib/Account.svelte"
+lines={[[1, 4], [7, 11], [14, 33], [34,53], [55,73], [75,-1]]}
+meta="src/lib/Account.svelte"
+/>
### Launch!
-Now that we have all the components in place, let's update `App.svelte`:
+Now that you have all the components in place, update `App.svelte`:
-<$CodeTabs>
-
-```html name=src/App.svelte
-
-
-
- {#if !session}
-
- {:else}
-
- {/if}
-
-```
-
-
+<$CodeSample
+path="user-management/svelte-user-management/src/App.svelte"
+meta="name=src/App.svelte"
+/>
Once that's done, run this in a terminal window:
@@ -273,7 +98,7 @@ And then open the browser to [localhost:5173](http://localhost:5173) and you sho
-Svelte uses Vite and the default port is `5173`, Supabase uses `port 3000`. To change the redirection port for Supabase go to: `Authentication > Settings` and change the `Site Url` to `http://localhost:5173/`
+Svelte uses Vite and the default port is `5173`, Supabase uses `port 3000`. To change the redirection port for Supabase go to: **Authentication > URL Configuration** and change the **Site URL** to `http://localhost:5173/`
@@ -285,118 +110,21 @@ Every Supabase project is configured with [Storage](/docs/guides/storage) for ma
### Create an upload widget
-Let's create an avatar for the user so that they can upload a profile photo. We can start by creating a new component:
+Create an avatar for the user so that they can upload a profile photo. Start by creating a new component:
-<$CodeTabs>
-
-```html name=src/lib/Avatar.svelte
-
-
-