diff --git a/scss/email-recovery.scss b/scss/email-recovery.scss
index 40e81757b84825eeafee05e1064bc995d91611cc..aa010b6bdfb16990e034b0c495dc6b325ceeca8a 100644
--- a/scss/email-recovery.scss
+++ b/scss/email-recovery.scss
@@ -3,7 +3,6 @@
     position: absolute;
     top: 0px;
     width: 100%;
-    z-index: 1000;
     min-height: 50px;
     box-sizing: border-box;
     justify-content: center;
@@ -13,7 +12,7 @@
     font-size: 16px;
     font-weight: 400;
     line-height: 24px;
-    padding: 16px 7%;
+    padding: 16px 6%;
     #recovery-email-banner-container{
         display:inline-flex;
         img {
@@ -35,47 +34,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,24 +41,6 @@ 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;   
-    }     
 }
 [data-object-type="email-recovery-important"] a.external {
     background-color: var(--color-primary-element);
diff --git a/src/email-recovery.js b/src/email-recovery.js
index f8626937d698fe3592807d821004386c0abf8c14..d715cc287d20ff66bce9250fae695baa034f557a 100644
--- a/src/email-recovery.js
+++ b/src/email-recovery.js
@@ -13,8 +13,93 @@ 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'
+		setTopStyle('#header', bannerHeight)
+		setMarginTopAndHeight('#content', topHeight)
+		setMarginTopAndHeight('#content-vue', topHeight)
+		setTopStyleWhenElementAvailable('#header-menu-user-menu', topHeight)
+		setTopStyleWhenElementAvailable('#header-menu-notifications', topHeight)
+		setTopStyle('#header-menu-unified-search', topHeight)
+		banner.style.height = bannerHeight
+	}
+
 })
 
+/**
+ * Sets the 'top' style to an element once it becomes available in the DOM.
+ *
+ * @param {string} selector - The CSS selector for the element.
+ * @param {string} topValue - The value to be set for the 'top' property.
+ */
+
+function setTopStyleWhenElementAvailable(selector, topValue) {
+	// Function to check each node and apply style if it matches the selector
+	/**
+	 *
+	 * @param node
+	 */
+	function checkAndApplyStyle(node) {
+		if (node.nodeType === Node.ELEMENT_NODE) {
+			if (node.matches(selector)) {
+				node.style.top = topValue
+			}
+
+			// Check all child nodes
+			node.querySelectorAll(selector).forEach(childNode => {
+				childNode.style.top = topValue
+			})
+		}
+	}
+
+	// Set up a MutationObserver to watch for added nodes
+	const observer = new MutationObserver(mutations => {
+		mutations.forEach(mutation => {
+			mutation.addedNodes.forEach(checkAndApplyStyle)
+		})
+	})
+
+	// Start observing the document body for added nodes
+	observer.observe(document.body, { childList: true, subtree: true })
+}
+
+/**
+ * Sets the 'top' style property of an element.
+ * The element is selected based on the provided CSS selector.
+ *
+ * @param {string}  selector
+ * @param {string}  topValue
+ */
+function setTopStyle(selector, topValue) {
+	const element = document.querySelector(selector)
+	if (element) {
+		element.style.top = topValue
+	}
+}
+
+/**
+ * Apply a margin-top style with !important and calculate a new height for the element.
+ *
+ * @param {string} selector - The CSS selector for the element.
+ * @param {string} topValue - The value for the margin-top property.
+ */
+
+/**
+ *
+ * @param selector
+ * @param topValue
+ */
+function setMarginTopAndHeight(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