diff --git a/src/app/core/components/navigation-bar/navigation-bar.html b/src/app/core/components/navigation-bar/navigation-bar.html
index f465b4a..c290c1d 100644
--- a/src/app/core/components/navigation-bar/navigation-bar.html
+++ b/src/app/core/components/navigation-bar/navigation-bar.html
@@ -73,5 +73,4 @@
     <div class="block md:hidden w-full h-full fixed top-0 left-0 z-40 backdrop-blur-md"></div>
 }
 
-<div class="blur blur1"></div>
-<div class="blur blur2"></div>
+<div class="z-10 backdrop-blur-xl fixed top-0 left-0 w-full h-[200px] mask-b-from-50%"></div>
diff --git a/src/app/core/components/navigation-bar/navigation-bar.scss b/src/app/core/components/navigation-bar/navigation-bar.scss
index 18ad858..ad79550 100644
--- a/src/app/core/components/navigation-bar/navigation-bar.scss
+++ b/src/app/core/components/navigation-bar/navigation-bar.scss
@@ -35,33 +35,6 @@ ul li a {
 }
 
 .mobile-menu ul li a {
-    font-size: 1.3rem;
+    font-size: 1rem;
     padding: 15px 30px;
 }
-
-.blur {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 120px;
-    pointer-events: none;
-}
-
-.blur1 {
-    z-index: 10;
-    backdrop-filter: blur(3px);
-    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
-    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
-}
-
-.blur2 {
-    z-index: 20;
-    backdrop-filter: blur(5px);
-    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 1) 100%);
-    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 1) 100%);
-}
-
-.blurred {
-    backdrop-filter: blur(5px);
-}
\ No newline at end of file
diff --git a/src/app/pages/home/home.html b/src/app/pages/home/home.html
index 8618f0d..a4e2d48 100644
--- a/src/app/pages/home/home.html
+++ b/src/app/pages/home/home.html
@@ -1,16 +1,12 @@
-<main class="flex flex-row flex-wrap justify-center items-center gap-10 py-10">
-    <div class="lg:w-[40%] w-[80%] text-center lg:text-left"
-            pAnimateOnScroll
-            enterClass="animate-enter fade-in-10 slide-in-from-{{ isMobile() ? 't' : 'l' }}-8 animate-duration-1000"
-            leaveClass="animate-leave fade-out-0">
+<main class="flex flex-row flex-wrap justify-center items-center gap-10 py-10"
+        pAnimateOnScroll
+        enterClass="animate-enter fade-in-10 slide-in-from-t-8 animate-duration-1000">
+    <div class="lg:w-[40%] w-[80%] text-center lg:text-left">
         <span class="block text-[3rem]/[1.1] lg:text-[4rem]/[1.1] font-bold mb-4" [innerHTML]="'home.header' | translate"></span>
         <span class="block text-[1rem]/[1.3] lg:text-[1.5rem]/[1.3] text-gray">{{ 'home.subheader' | translate }}</span>
         <a class="block mt-5" href="https://www.google.com/maps/place/Dobersberg,+Nieder%C3%B6sterreich" target="_blank"><p-chip label="Dobersberg, Niederösterreich" icon="fa-solid fa-location-dot"/></a>
     </div>
-    <div class="lg:w-[30%] w-[80%] text-center"
-            pAnimateOnScroll
-            enterClass="animate-enter fade-in-10 slide-in-from-{{ isMobile() ? 'b' : 'r' }}-8 animate-duration-1000"
-            leaveClass="animate-leave fade-out-0">
+    <div class="lg:w-[30%] w-[80%] text-center">
         <img src="img/me.png" alt="">
         <div class="pt-5 p-3 flex gap-3 flex-wrap justify-center">
             <a pButton outlined severity="secondary" label="nico@td-haider.at" icon="fa-solid fa-envelope" href="mailto:nico@td-haider.at"></a>
diff --git a/src/app/pages/home/home.ts b/src/app/pages/home/home.ts
index 2bf1c29..2b34183 100644
--- a/src/app/pages/home/home.ts
+++ b/src/app/pages/home/home.ts
@@ -13,8 +13,4 @@ import { AnimateOnScrollModule } from 'primeng/animateonscroll';
 })
 export class Home {
 
-  isMobile() {
-    return window.innerWidth < 1024;
-  }
-
 }