diff --git a/frontend/src/css/styles.css b/frontend/src/css/styles.css
index 8eed50fc..f8d4ef9d 100644
--- a/frontend/src/css/styles.css
+++ b/frontend/src/css/styles.css
@@ -269,7 +269,7 @@ main .spinner .bounce2 {
 #previewer .pdf {
   width: 100%;
   height: 100%;
-  margin-top: 4em;
+  padding-top: 4em;
 }
 
 #previewer h2.message {
diff --git a/frontend/src/views/files/Preview.vue b/frontend/src/views/files/Preview.vue
index 879ca69d..3e63768b 100644
--- a/frontend/src/views/files/Preview.vue
+++ b/frontend/src/views/files/Preview.vue
@@ -6,7 +6,7 @@
     @mousemove="toggleNavigation"
     @touchstart="toggleNavigation"
   >
-    <header-bar v-if="showNav">
+    <header-bar v-if="isPdf || showNav">
       <action icon="close" :label="$t('buttons.close')" @action="close()" />
       <title>{{ name }}</title>
       <action
@@ -74,11 +74,7 @@
           :options="videoOptions"
         >
         </VideoPlayer>
-        <object
-          v-else-if="fileStore.req?.extension.toLowerCase() == '.pdf'"
-          class="pdf"
-          :data="raw"
-        ></object>
+        <object v-else-if="isPdf" class="pdf" :data="raw"></object>
         <div v-else-if="fileStore.req?.type == 'blob'" class="info">
           <div class="title">
             <i class="material-icons">feedback</i>
@@ -189,6 +185,8 @@ const raw = computed(() => {
   return downloadUrl.value;
 });
 
+const isPdf = computed(() => fileStore.req?.extension.toLowerCase() == ".pdf");
+
 const isResizeEnabled = computed(() => resizePreview);
 
 const subtitles = computed(() => {