diff --git a/src/app.css b/src/app.css
index 05b98672..d1e69bb0 100644
--- a/src/app.css
+++ b/src/app.css
@@ -277,8 +277,8 @@ html:has(#theme.catppuccin-darker) {
 	--sidebar-foreground: #cdd6f4;
 	--sidebar-primary: #cba6f7;
 	--sidebar-primary-foreground: #1e1e2e;
-	--sidebar-accent: #1e1e2e;
-	--sidebar-accent-foreground: #cdd6f4;
+	--sidebar-accent: #cba6f7;
+	--sidebar-accent-foreground: #1e1e2e;
 	--sidebar-border: #45475a;
 	--sidebar-ring: #cba6f7;
 	--radius: 0.9rem;
diff --git a/src/lib/components/app-sidebar.svelte b/src/lib/components/app-sidebar.svelte
index ab60f95f..15fb51d7 100644
--- a/src/lib/components/app-sidebar.svelte
+++ b/src/lib/components/app-sidebar.svelte
@@ -36,6 +36,8 @@
 	import Badge from './ui/badge/badge.svelte';
 	const ctx = useClerkContext();
 
+	import dayjs from 'dayjs';
+
 	// Props
 	let { ref = $bindable(null), ...restProps }: ComponentProps<typeof Sidebar.Root> = $props();
 
@@ -70,7 +72,7 @@
 <svelte:document onkeydown={handleKeydown} />
 
 <Sidebar.Root collapsible="icon" variant="floating" bind:ref {...restProps}>
-	<Sidebar.Header>
+	<Sidebar.Header class="rounded-lg bg-gradient-to-b from-white/10 to-transparent">
 		<Sidebar.Menu>
 			<Sidebar.MenuItem>
 				<Sidebar.MenuButton size="lg">
@@ -90,8 +92,10 @@
 								<img src="/edutools-white.svg" alt="" />
 							</div>
 							<div class="flex flex-col gap-0.5 leading-none">
-								<span class="font-semibold">EduTools</span>
-								{#if $preferencesStore.experimentalFeatures}<span>Experimental</span>{/if}
+								<span class="font-semibold"
+									>EduTools {#if $preferencesStore.experimentalFeatures}
+										Experimental{/if}</span
+								>
 							</div>
 						</a>
 					{/snippet}
@@ -259,7 +263,6 @@
 					{/snippet}
 				</Sidebar.MenuButton>
 			</Sidebar.MenuItem>
-			<Sidebar.MenuItem></Sidebar.MenuItem>
 			<Sidebar.MenuItem>
 				<Sidebar.MenuButton
 					onclick={() => {
diff --git a/src/lib/components/ui/sidebar/sidebar-trigger.svelte b/src/lib/components/ui/sidebar/sidebar-trigger.svelte
index 285e6c4f..6ae6fde4 100644
--- a/src/lib/components/ui/sidebar/sidebar-trigger.svelte
+++ b/src/lib/components/ui/sidebar/sidebar-trigger.svelte
@@ -20,9 +20,9 @@
 <Button
 	data-sidebar="trigger"
 	data-slot="sidebar-trigger"
-	variant="ghost"
+	variant="default"
 	size="icon"
-	class={cn('size-7', className)}
+	class={cn('fixed bottom-3 left-3 z-50 md:hidden', className)}
 	type="button"
 	onclick={(e) => {
 		onclick?.(e);
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d0643333..70d7d511 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -15,6 +15,7 @@
 	import Providers from '$lib/components/providers.svelte';
 	import TrackerDialog from '$lib/components/tracker-dialog.svelte';
 	import Identify from './identify.svelte';
+	import { useSidebar } from '$lib/components/ui/sidebar/index.js';
 
 	// Utilities
 	import clsx from 'clsx';
@@ -27,6 +28,8 @@
 	import { loadSlim } from '@tsparticles/slim'; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
 	import { particlesInit } from '@tsparticles/svelte';
 	import { buttonVariants } from '$lib/components/ui/button';
+	import Button from '$lib/components/ui/button/button.svelte';
+	import PanelLeftIcon from '@lucide/svelte/icons/panel-left';
 
 	// State
 	let trackerBlockerDialog = $state(false);
@@ -52,6 +55,8 @@
 	void particlesInit(async (engine) => {
 		await loadSlim(engine);
 	});
+
+	const sidebar = useSidebar();
 </script>
 
 <svelte:head>
@@ -74,13 +79,11 @@
 	<!-- Main layout -->
 	<Sidebar.Provider class="flex flex-col md:flex-row">
 		<AppSidebar />
-		<Sidebar.Trigger
-			class={clsx(
-				'fixed bottom-3 left-3 z-50 !rounded-lg md:hidden',
-				buttonVariants({ variant: 'default', size: 'icon' })
-			)}
-		/>
+		<Sidebar.Trigger />
 		<Sidebar.Inset>
+			<div
+				class="fixed -top-32 -left-32 hidden size-96 rounded-full bg-white/25 blur-3xl md:block"
+			></div>
 			{@render children()}
 		</Sidebar.Inset>
 	</Sidebar.Provider>