diff --git a/src/assets/archive-very-bright.jpg b/src/assets/archive-very-bright.jpg
new file mode 100644
index 0000000..56601f1
Binary files /dev/null and b/src/assets/archive-very-bright.jpg differ
diff --git a/src/index.css b/src/index.css
index 3a55f51..7eda8a5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -24,3 +24,13 @@
     @apply text-gray-700 flex items-center justify-between px-4 py-2 rounded-t border-b
         bg-gray-100
 }
+/* custom classes with breakpoints (responsive classes dependend on width) don't work in component-scoped-styles */
+@layer utilities {
+  .home-img {
+    background-image: url("@/assets/archive.jpg");
+  }
+
+  .home-img-bright {
+    background-image: url("@/assets/archive-very-bright.jpg");
+  }
+}
diff --git a/src/layout/main/index.vue b/src/layout/main/index.vue
index a42d762..6ca46a4 100644
--- a/src/layout/main/index.vue
+++ b/src/layout/main/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div
     id="search-header"
-    class="h-96 bg-cover bg-gray-400 bg-center p-12 home-img"
+    class="h-96 bg-cover bg-gray-400 bg-center p-12 xl:home-img home-img-bright"
   >
-    <h1 class="flex justify-center m-5 text-4xl font-bold text-blue-600">
+    <h1 class="text-center m-5 text-4xl font-bold text-blue-600">
       OLA-HD
     </h1>
-    <h2 class="flex justify-center m-5 text-2xl" >OCR Long-Term Archive</h2>
+    <h2 class="text-center m-5 text-2xl" >OCR Long-Term Archive</h2>
     <div class="mx-auto">
       <form @submit.prevent="submit" class="float">
         <div class="grid grid-cols-7">
@@ -86,9 +86,7 @@ export default {
 </script>
 
 <style scoped>
-.home-img {
-  background-image: url("@/assets/archive.jpg");
-}
+
 
 :deep(.p-multiselect-label), :deep(.p-icon) {
   margin: -4px;