diff --git a/scss/email-recovery.scss b/scss/email-recovery.scss
index 4fbf9ae0111c983d1dcad2b158d119a89fbe0d70..c71c9a67a803c221c677a8a64804e59171661727 100644
--- a/scss/email-recovery.scss
+++ b/scss/email-recovery.scss
@@ -35,47 +35,6 @@
    
 }
 
-body#body-user #header,
-body#body-settings #header,
-body#body-public #header {
-    top: 56px;
-}
-#header .header-right .header-menu__wrapper{
-  top:106px;   
-}
-
-#body-user #content,
-#body-settings #content,
-#body-public #content,
-#body-public #content,
-#body-user #content-vue {
-    margin-top: 100px !important;
-    height: calc(100% - env(safe-area-inset-bottom) - 106px - var(--body-container-margin));
-    @media only screen and (min-width: 769px) and (max-width: 1024) {
-        margin-top: 130px !important;
-        height: calc(100% - env(safe-area-inset-bottom) - 130px - var(--body-container-margin));
-    }
-    @media only screen and (min-width: 481px) and (max-width: 768px) {
-        margin-top: 162px !important;
-        height: calc(100% - env(safe-area-inset-bottom) - 162px - var(--body-container-margin));
-    }
-    @media only screen and (max-width: 399px) {
-        margin-top: 186px !important;
-        height: calc(100% - env(safe-area-inset-bottom) - 186px - var(--body-container-margin));
-    }
-
-    
-}
-@media only screen and (max-width: 1024px) {
-    body#body-user #header,
-    body#body-settings #header,
-    body#body-public #header {
-        top: 80px;
-    }
-    #header .header-right .header-menu__wrapper{
-        top:130px;   
-    }    
-}
 @media only screen and (max-width: 768px) {
     .recovery-email-banner {
         display: block;
@@ -83,22 +42,5 @@ body#body-public #header {
             padding: 8px 0 0 30px;
         }
     }
-    body#body-user #header,
-    body#body-settings #header,
-    body#body-public #header {
-        top: 112px;
-    }
-    #header .header-right .header-menu__wrapper{
-        top:162px;   
-    }     
-}
-@media only screen and (max-width: 399px) {
-    body#body-user #header,
-    body#body-settings #header,
-    body#body-public #header {
-        top: 136px;
-    }
-    #header .header-right .header-menu__wrapper{
-        top:186px;   
-    }     
 }
+
diff --git a/src/email-recovery.js b/src/email-recovery.js
index f8626937d698fe3592807d821004386c0abf8c14..05911a8569bc2741ddf65ba8c713f3655ddc2e56 100644
--- a/src/email-recovery.js
+++ b/src/email-recovery.js
@@ -13,8 +13,68 @@ document.addEventListener('DOMContentLoaded', function() {
 	newDiv.appendChild(contentDiv)
 	newDiv.appendChild(link)
 	insertIntoDOM(newDiv)
+	// Measure the height after the element is inserted into the DOM
+	const banner = document.getElementById('recovery-email-banner')
+	if (banner) {
+		const bannerHeight = banner.clientHeight + 'px'
+		const topHeight = (banner.clientHeight + 50) + 'px'
+		setHeaderTopStyle('body#body-user #header', bannerHeight)
+		setHeaderTopStyle('body#body-settings #header', bannerHeight)
+		setHeaderTopStyle('body#body-public #header', bannerHeight)
+		setContentStyle('body#body-user #content', topHeight)
+		setContentStyle('body#body-settings #content', topHeight)
+		setContentStyle('body#body-public #content', topHeight)
+		setContentStyle('body#body-user #content-vue', topHeight)
+		setMenuTopStyle('body #header #user-menu #header-menu-user-menu', topHeight)
+		banner.style.height = bannerHeight
+	}
+
 })
 
+/**
+ *
+ * @param selector
+ * @param topValue
+ */
+function setMenuTopStyle(selector, topValue) {
+	const interval = setInterval(function() {
+		const element = document.querySelector(selector)
+		if (element) {
+			clearInterval(interval) // Stop the interval
+			element.style.top = topValue
+		}
+	}, 1000) // Interval set to 1 second (1000 milliseconds)
+}
+
+/**
+ *
+ * @param selector
+ * @param topValue
+ */
+function setHeaderTopStyle(selector, topValue) {
+	const element = document.querySelector(selector)
+	if (element) {
+		element.style.top = topValue
+	}
+}
+
+/*
+* @param selector
+* @param topValue
+*/
+/**
+ *
+ * @param selector
+ * @param topValue
+ */
+function setContentStyle(selector, topValue) {
+	const element = document.querySelector(selector)
+	if (element) {
+		element.style.cssText += `margin-top: ${topValue} !important;`
+		const heightValue = `calc(100% - env(safe-area-inset-bottom) - ${topValue} - var(--body-container-margin)) !important`
+		element.style.cssText += `height: ${heightValue};`
+	}
+}
 /**
  *
  * @param className