diff --git a/src/lib/docs/NavBarItem.svelte b/src/lib/docs/NavBarItem.svelte
index 6ea7506..90ea58e 100644
--- a/src/lib/docs/NavBarItem.svelte
+++ b/src/lib/docs/NavBarItem.svelte
@@ -1,12 +1,13 @@
 <script>
 	import CrossfadeProvider from '$lib/components/generic/crossfade/CrossfadeProvider.svelte';
 	import { createEventDispatcher, getContext } from 'svelte';
+	import { base } from '$app/paths';
 
 	const page = getContext('navbar');
 	const dispatch = createEventDispatcher();
 
 	export let href;
-	export let isActive = (path) => path === href;
+	export let isActive = (path) => `${base}${path}` === href;
 
 	const click = (evt) => dispatch('click', evt);
 
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index d864eee..91af44e 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -16,7 +16,7 @@
 		{ href: `${base}/docs/examples`, text: 'Examples' },
 		{
 			href: `${base}/docs/theme-editor/light`,
-			isActive: (p) => p.startsWith(`${base}/docs/theme-editor`),
+			isActive: (p) => p.startsWith(`/docs/theme-editor`),
 			text: 'Theme Editor'
 		}
 	];
@@ -57,15 +57,6 @@
 			</NavBar>
 			<div class="route-wrapper">
 				<slot />
-				<!-- Can consider re-adding this but would want to avoid transition between theme pages -->
-				<!-- <Swappable
-					magnitude={0.06}
-					vertical={true}
-					value={$page.path}
-					getId={(path) => links.findIndex(({ href }) => path === href)}
-				>
-          <slot />
-				</Swappable> -->
 			</div>
 		</div>
 	</div>