diff --git a/ui/src/App.vue b/ui/src/App.vue
index 8c55a33..d27efcd 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -22,7 +22,10 @@ const environment = import.meta.env.VITE_ENVIRONMENT;
 </script>
 
 <template>
-  <div class="flex flex-col min-h-screen" style="background-image: url('/ui/public/bg.jpg'); background-size: cover; background-attachment: fixed;">
+  <div class="flex flex-col min-h-screen" style="background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('/bg.jpg'); 
+      background-size: contain; 
+      background-attachment: fixed;
+      background-position: center;">
     <div class="sticky top-0 bg-background z-50">
       <Navbar class="flex"></Navbar>
       <Alert v-if="environment == 'dev'" class="m-2 mx-auto w-5xl" variant="info">
@@ -32,8 +35,10 @@ const environment = import.meta.env.VITE_ENVIRONMENT;
       </Alert>
       <Alert v-if="userStore.user?.LOAs?.[0]" class="m-2 mx-auto w-5xl" variant="info">
         <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
-          <p>You are on LOA until <strong>{{ formatDate(userStore.user?.LOAs?.[0].extended_till || userStore.user?.LOAs?.[0].end_date) }}</strong></p>
-          <Button variant="secondary" @click="async () => { await cancelLOA(userStore.user.LOAs?.[0].id); userStore.loadUser(); }">End
+          <p>You are on LOA until <strong>{{ formatDate(userStore.user?.LOAs?.[0].extended_till ||
+            userStore.user?.LOAs?.[0].end_date) }}</strong></p>
+          <Button variant="secondary"
+            @click="async () => { await cancelLOA(userStore.user.LOAs?.[0].id); userStore.loadUser(); }">End
             LOA</Button>
         </AlertDescription>
       </Alert>