diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.js b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.js
index c0d31e6780..10391d040e 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.js
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.js
@@ -1,17 +1,23 @@
 import { memo, Suspense } from 'react'
+import classNames from 'classnames'
 import PdfLogsViewer from './pdf-logs-viewer'
 import PdfViewer from './pdf-viewer'
 import LoadingSpinner from '../../../shared/components/loading-spinner'
 import PdfHybridPreviewToolbar from './pdf-preview-hybrid-toolbar'
 import PdfPreviewToolbar from './pdf-preview-toolbar'
+import { useCompileContext } from '../../../shared/context/compile-context'
 
 const newPreviewToolbar = new URLSearchParams(window.location.search).has(
   'new_preview_toolbar'
 )
 
 function PdfPreviewPane() {
+  const { pdfUrl } = useCompileContext()
+  const classes = classNames('pdf', 'full-size', {
+    'pdf-empty': !pdfUrl,
+  })
   return (
-    <div className="pdf full-size">
+    <div className={classes}>
       {newPreviewToolbar ? <PdfPreviewToolbar /> : <PdfHybridPreviewToolbar />}
       <Suspense fallback={<LoadingPreview />}>
         <div className="pdf-viewer">
diff --git a/services/web/frontend/stylesheets/app/editor.less b/services/web/frontend/stylesheets/app/editor.less
index 67da942dd0..e9069cd9b0 100644
--- a/services/web/frontend/stylesheets/app/editor.less
+++ b/services/web/frontend/stylesheets/app/editor.less
@@ -93,7 +93,7 @@
   top: @editor-toolbar-height;
 }
 
-.pdf,
+.pdf-empty,
 .no-history-available,
 .no-file-selection,
 .multi-selection-ongoing {