diff --git a/resources/js/components/ui/Header.vue b/resources/js/components/ui/Header.vue
index fe0d19aa90..5ccc96640c 100644
--- a/resources/js/components/ui/Header.vue
+++ b/resources/js/components/ui/Header.vue
@@ -10,7 +10,7 @@ const props = defineProps({
 </script>
 
 <template>
-    <header class="flex flex-wrap items-center justify-between gap-4 px-2 sm:px-0 py-6 max-md:pb-8 md:py-8" data-ui-header>
+    <header class="relative flex flex-wrap items-center justify-between gap-4 px-2 sm:px-0 py-6 max-md:pb-8 md:py-8" data-ui-header>
         <h1 class="text-[25px] leading-[1.25] st-text-legibility font-medium antialiased flex items-center gap-2.5 md:flex-1">
             <!-- Wrap icon in a fixed size div (the same size as the icon) to prevent layout shift once it loads -->
             <div v-if="icon" class="size-5 relative">