diff --git a/frontend/src/editor/player.tsx b/frontend/src/editor/player.tsx
index f5ee23ed..88a46ca2 100644
--- a/frontend/src/editor/player.tsx
+++ b/frontend/src/editor/player.tsx
@@ -146,7 +146,7 @@ export function PlayerBar({ documentId, editor }: { documentId: string; editor:
 
       <div
         className={clsx(
-          'fixed bottom-0 inset-x-6 mx-auto z-30',
+          'fixed bottom-0 inset-x-6 mx-auto z-20',
           'max-w-screen-xl height-8 my-2',
           'flex',
           'p-2',
diff --git a/frontend/src/editor/transcription_editor.tsx b/frontend/src/editor/transcription_editor.tsx
index 5e29f343..46688bb6 100644
--- a/frontend/src/editor/transcription_editor.tsx
+++ b/frontend/src/editor/transcription_editor.tsx
@@ -266,7 +266,7 @@ export function TranscriptionEditor({
         <>
           <div
             className={clsx(
-              'grow-[2] fixed left-0 top-0 flex items-center justify-center w-full h-full bg-white dark:bg-neutral-900 z-50',
+              'grow-[2] fixed left-0 top-0 flex items-center justify-center w-full h-full bg-white dark:bg-neutral-900 z-30',
             )}
           >
             <LoadingBee size={200} />
diff --git a/frontend/src/pages/document.tsx b/frontend/src/pages/document.tsx
index f3d76ca3..9b6da10a 100644
--- a/frontend/src/pages/document.tsx
+++ b/frontend/src/pages/document.tsx
@@ -135,7 +135,7 @@ export function DocumentPage({
       <Helmet>
         <title>{data?.name}</title>
       </Helmet>
-      <TopBar className="!items-start">
+      <TopBar className="!items-start z-40 relative">
         <TopBarPart className={isLoggedIn ? 'sticky left-4 -ml-12 !items-start' : ''}>
           {isLoggedIn && (
             <IconButton