diff --git a/src/lib/components/bottom-nav.svelte b/src/lib/components/bottom-nav.svelte
index fd2a03cecd..710cf00a05 100644
--- a/src/lib/components/bottom-nav.svelte
+++ b/src/lib/components/bottom-nav.svelte
@@ -161,11 +161,13 @@
       <div
         class="flex aspect-square w-[32px] min-w-[32px] items-center justify-center"
       >
-        <img
-          src="/ziggy-full-face.png"
-          alt={translate('common.user-profile')}
-          class="h-[32px] w-[32px]"
-        />
+        <slot name="profile-picture">
+          <img
+            src="/ziggy-full-face.png"
+            alt={translate('common.user-profile')}
+            class="h-[32px] w-[32px]"
+          />
+        </slot>
       </div>
     {/if}
   </button>
diff --git a/src/lib/components/top-nav.svelte b/src/lib/components/top-nav.svelte
index fc2b30a2fb..89d137ee5a 100644
--- a/src/lib/components/top-nav.svelte
+++ b/src/lib/components/top-nav.svelte
@@ -1,14 +1,20 @@
 <script lang="ts">
   import { MediaQuery } from 'svelte/reactivity';
 
+  import type { Snippet } from 'svelte';
   import { type ClassNameValue, twMerge as merge } from 'tailwind-merge';
 
   import DataEncoderStatus from '$lib/components/data-encoder-status.svelte';
   import TimezoneSelect from '$lib/components/timezone-select.svelte';
   import { translate } from '$lib/i18n/translate';
 
-  let className: ClassNameValue = '';
-  export { className as class };
+  interface Props {
+    class?: ClassNameValue;
+    left?: Snippet;
+    children?: Snippet;
+  }
+
+  let { class: className = '', children, left }: Props = $props();
 
   const md = new MediaQuery('min-width:768px');
 </script>
@@ -30,12 +36,12 @@
     aria-label={translate('common.main')}
   >
     <div class="flex grow items-center">
-      <slot name="left" />
+      {@render left?.()}
     </div>
     <div class="flex items-center gap-2">
       <TimezoneSelect />
       <DataEncoderStatus />
-      <slot />
+      {@render children?.()}
     </div>
   </nav>
 {/if}
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index a3db5211be..fae37206af 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -267,11 +267,11 @@
   <MainContentContainer>
     <DataEncoderSettings />
     <TopNavigation>
-      <svelte:fragment slot="left">
+      {#snippet left()}
         {#if showNamespacePicker}
           <NamespacePicker {namespaceList} />
         {/if}
-      </svelte:fragment>
+      {/snippet}
       <UserMenu {logout} />
     </TopNavigation>
     <div