diff --git a/src/lib/layouts/Sidebar.svelte b/src/lib/layouts/Sidebar.svelte
index bb47e85892..ef6e6e421c 100644
--- a/src/lib/layouts/Sidebar.svelte
+++ b/src/lib/layouts/Sidebar.svelte
@@ -46,18 +46,11 @@
 		</button>
 		<div class="aw-side-nav-scroll">
 			{#if parent}
-				<section
-					style:padding-bottom="16px"
-					style:border-bottom="1px solid #232325"
-					style:display="flex"
-					style:align-items="baseline"
-				>
+				<section class="aw-side-nav-wrapper-parent">
 					<a href={parent.href}>
 						<span class="icon-cheveron-left" aria-hidden="true" />
 					</a>
-
-					<span class="aw-eyebrow" style:width="100%" style:text-align="center">{parent.label}</span
-					>
+					<span class="aw-side-nav-wrapper-parent-title aw-eyebrow">{parent.label}</span>
 				</section>
 			{/if}
 			{#each navigation as navGroup}
diff --git a/src/routes/docs/references/+layout.svelte b/src/routes/docs/references/+layout.svelte
index 3b20545a99..afbdbd074c 100644
--- a/src/routes/docs/references/+layout.svelte
+++ b/src/routes/docs/references/+layout.svelte
@@ -16,7 +16,7 @@
 				{
 					label: 'Overview',
 					href: '/docs/references',
-					icon: 'icon-book'
+					icon: 'icon-view-grid'
 				}
 			]
 		},
diff --git a/src/routes/docs/tutorials/+layout.svelte b/src/routes/docs/tutorials/+layout.svelte
index 108265296a..e82604ef79 100644
--- a/src/routes/docs/tutorials/+layout.svelte
+++ b/src/routes/docs/tutorials/+layout.svelte
@@ -1,9 +1,14 @@
 <script lang="ts">
-	import Docs from '$lib/layouts/Docs.svelte';
+	import { page } from '$app/stores';
+	import Docs, { type DocsLayoutVariant } from '$lib/layouts/Docs.svelte';
 	import Sidebar from '../Sidebar.svelte';
+
+	$: variant = $page.url.pathname.endsWith('/tutorials')
+		? 'default'
+		: ('two-side-navs' as DocsLayoutVariant);
 </script>
 
-<Docs variant="default">
+<Docs {variant}>
 	<Sidebar />
 	<slot />
 </Docs>
diff --git a/src/routes/docs/tutorials/+page.svelte b/src/routes/docs/tutorials/+page.svelte
index f5efb96043..34392306f8 100644
--- a/src/routes/docs/tutorials/+page.svelte
+++ b/src/routes/docs/tutorials/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Docs from '$lib/layouts/Docs.svelte';
+	import Sidebar from '../Sidebar.svelte';
 	import { MainFooter } from '$lib/components';
 </script>
 
@@ -521,7 +523,6 @@
 				</ul>
 			</section>
 		</div>
-		
 	</article>
 
 	<MainFooter variant="docs" />
diff --git a/src/scss/7-components/_side-nav.scss b/src/scss/7-components/_side-nav.scss
index 620e532774..047a7b527d 100644
--- a/src/scss/7-components/_side-nav.scss
+++ b/src/scss/7-components/_side-nav.scss
@@ -27,7 +27,17 @@
     padding:pxToRem(16); padding-block-end:pxToRem(32);
     background-color:hsl(var(--p-side-nav-bg-color)); transition:var(--transition);
     
-    
+    &-parent {
+      padding-bottom: 16px;
+      border-block-end: 1px solid hsl(var(--aw-color-smooth));
+      display: flex;
+      align-items: baseline;
+
+      &-title {
+        width: 100%;
+        text-align: center;
+      }
+    }
   }
   &-scroll {
     flex:1; overflow-y:scroll; overflow-x:hidden;