diff --git a/packages/web/src/javascripts/Components/FileView/FileView.tsx b/packages/web/src/javascripts/Components/FileView/FileView.tsx
index ceffe5508..5e6ea5626 100644
--- a/packages/web/src/javascripts/Components/FileView/FileView.tsx
+++ b/packages/web/src/javascripts/Components/FileView/FileView.tsx
@@ -28,16 +28,12 @@ const FileView = ({ application, viewControllerManager, file }: FileViewProps) =
   }, [application, file])
 
   return shouldShowProtectedOverlay ? (
-    <div aria-label="Note" className="section editor sn-component">
-      <div className="flex h-full items-center justify-center">
-        <ProtectedItemOverlay
-          viewControllerManager={viewControllerManager}
-          hasProtectionSources={application.hasProtectionSources()}
-          onViewItem={dismissProtectedOverlay}
-          itemType={'note'}
-        />
-      </div>
-    </div>
+    <ProtectedItemOverlay
+      viewControllerManager={viewControllerManager}
+      hasProtectionSources={application.hasProtectionSources()}
+      onViewItem={dismissProtectedOverlay}
+      itemType={'file'}
+    />
   ) : (
     <FileViewWithoutProtection application={application} viewControllerManager={viewControllerManager} file={file} />
   )
diff --git a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
index 7217bf64a..1ce01253d 100644
--- a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
@@ -874,18 +874,12 @@ class NoteView extends PureComponent<NoteViewProps, State> {
   override render() {
     if (this.state.showProtectedWarning) {
       return (
-        <div aria-label="Note" className="section editor sn-component">
-          {this.state.showProtectedWarning && (
-            <div className="flex h-full items-center justify-center">
-              <ProtectedItemOverlay
-                viewControllerManager={this.viewControllerManager}
-                hasProtectionSources={this.application.hasProtectionSources()}
-                onViewItem={this.dismissProtectedWarning}
-                itemType={'note'}
-              />
-            </div>
-          )}
-        </div>
+        <ProtectedItemOverlay
+          viewControllerManager={this.viewControllerManager}
+          hasProtectionSources={this.application.hasProtectionSources()}
+          onViewItem={this.dismissProtectedWarning}
+          itemType={'note'}
+        />
       )
     }
 
diff --git a/packages/web/src/javascripts/Components/ProtectedItemOverlay/ProtectedItemOverlay.tsx b/packages/web/src/javascripts/Components/ProtectedItemOverlay/ProtectedItemOverlay.tsx
index 3e4cd564d..f7617ec56 100644
--- a/packages/web/src/javascripts/Components/ProtectedItemOverlay/ProtectedItemOverlay.tsx
+++ b/packages/web/src/javascripts/Components/ProtectedItemOverlay/ProtectedItemOverlay.tsx
@@ -1,5 +1,6 @@
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import Button from '@/Components/Button/Button'
+import MobileItemsListButton from '../NoteGroupView/MobileItemsListButton'
 
 type Props = {
   viewControllerManager: ViewControllerManager
@@ -14,24 +15,31 @@ const ProtectedItemOverlay = ({ viewControllerManager, onViewItem, hasProtection
     : `Add a passcode or create an account to require authentication to view this ${itemType}.`
 
   return (
-    <div className="flex max-w-md flex-col items-center justify-center text-center">
-      <h1 className="m-0 w-full text-2xl font-bold">This {itemType} is protected</h1>
-      <p className="mt-2 w-full text-lg">{instructionText}</p>
-      <div className="mt-4 flex gap-3">
-        {!hasProtectionSources && (
-          <Button
-            primary
-            small
-            onClick={() => {
-              viewControllerManager.accountMenuController.setShow(true)
-            }}
-          >
-            Open account menu
-          </Button>
-        )}
-        <Button small onClick={onViewItem}>
-          {hasProtectionSources ? 'Authenticate' : `View ${itemType}`}
-        </Button>
+    <div aria-label="Protected overlay" className="section editor sn-component">
+      <div className="flex h-full flex-grow flex-col justify-center md:flex-row md:items-center">
+        <div className="mb-auto p-4 md:hidden">
+          <MobileItemsListButton />
+        </div>
+        <div className="mb-auto flex max-w-md flex-col items-center justify-center text-center md:mb-0">
+          <h1 className="m-0 w-full text-2xl font-bold">This {itemType} is protected</h1>
+          <p className="mt-2 w-full text-lg">{instructionText}</p>
+          <div className="mt-4 flex gap-3">
+            {!hasProtectionSources && (
+              <Button
+                primary
+                small
+                onClick={() => {
+                  viewControllerManager.accountMenuController.setShow(true)
+                }}
+              >
+                Open account menu
+              </Button>
+            )}
+            <Button small onClick={onViewItem}>
+              {hasProtectionSources ? 'Authenticate' : `View ${itemType}`}
+            </Button>
+          </div>
+        </div>
       </div>
     </div>
   )