diff --git a/src/components/banners/ActivateCompany.tsx b/src/components/banners/ActivateCompany.tsx
index ff04a4c1b..75e86e2e6 100644
--- a/src/components/banners/ActivateCompany.tsx
+++ b/src/components/banners/ActivateCompany.tsx
@@ -9,12 +9,14 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { Banner } from '../Banner';
 import { Link } from 'react-router-dom';
-import { buttonStyles } from './VerifyEmail';
+import { Popover } from '@headlessui/react';
 import { useCurrentCompany } from '$app/common/hooks/useCurrentCompany';
 import { useCurrentUser } from '$app/common/hooks/useCurrentUser';
 
+export const buttonStyles =
+  'font-medium text-xs md:text-sm underline cursor-pointer';
+
 export function ActivateCompany() {
   const [t] = useTranslation();
   const company = useCurrentCompany();
@@ -29,17 +31,19 @@ export function ActivateCompany() {
   }
 
   return (
-    <Banner variant="orange">
-      <div className="flex space-x-1">
-        <span>{t('company_disabled_warning')}.</span>
+    <Popover className="relative">
+      <div className="max-w-max rounded-lg bg-[#FCD34D] px-6 py-4 shadow-lg">
+        <div className="flex items-center justify-center space-x-1">
+          <span className="text-sm">{t('company_disabled_warning')}.</span>
 
-        <Link
-          className={buttonStyles}
-          to="/settings/account_management/overview"
-        >
-          {t('activate_company')}
-        </Link>
+          <Link
+            className="cursor-pointer text-sm font-semibold underline hover:no-underline"
+            to="/settings/account_management/overview"
+          >
+            {t('activate_company')}
+          </Link>
+        </div>
       </div>
-    </Banner>
+    </Popover>
   );
 }
diff --git a/src/components/banners/EInvoiceCredits.tsx b/src/components/banners/EInvoiceCredits.tsx
index 9947fee8b..2994aed72 100644
--- a/src/components/banners/EInvoiceCredits.tsx
+++ b/src/components/banners/EInvoiceCredits.tsx
@@ -10,8 +10,6 @@
 
 import { useCurrentCompany } from '$app/common/hooks/useCurrentCompany';
 import { useTranslation } from 'react-i18next';
-import { Banner } from '../Banner';
-import { buttonStyles } from './VerifyEmail';
 import { Link, useLocation } from 'react-router-dom';
 import {
   useEInvoiceHealthCheck,
@@ -25,17 +23,19 @@ import { useQueryClient } from 'react-query';
 import { request } from '$app/common/helpers/request';
 import { endpoint } from '$app/common/helpers';
 import { atom, useAtom } from 'jotai';
+import { Popover } from '@headlessui/react';
 
 export const EINVOICE_CREDITS_MIN_THRESHOLD = 15;
 
 export function EInvoiceCredits() {
-  const company = useCurrentCompany();
-  const quota = useQuota();
+  const [t] = useTranslation();
 
-  const [isVisible, setVisible] = useState(false);
+  const quota = useQuota();
+  const company = useCurrentCompany();
 
   const { data: healthcheck } = useEInvoiceHealthCheck();
-  const { t } = useTranslation();
+
+  const [isVisible, setVisible] = useState<boolean>(false);
 
   if (
     !company.legal_entity_id ||
@@ -58,15 +58,20 @@ export function EInvoiceCredits() {
           text={t('notification_no_credits')}
         />
 
-        <Banner variant="red">
-          <div className="flex space-x-1">
-            <span>{t('notification_no_credits')}</span>
-
-            <span className={buttonStyles} onClick={() => setVisible(true)}>
-              {t('learn_more')}
-            </span>
+        <Popover className="relative">
+          <div className="max-w-max rounded-lg bg-red-300 px-6 py-4 shadow-lg">
+            <div className="flex items-center justify-center space-x-1">
+              <span className="text-sm">{t('notification_no_credits')}</span>
+
+              <span
+                className="cursor-pointer text-sm font-semibold underline hover:no-underline"
+                onClick={() => setVisible(true)}
+              >
+                {t('learn_more')}
+              </span>
+            </div>
           </div>
-        </Banner>
+        </Popover>
       </>
     );
   }
@@ -80,15 +85,20 @@ export function EInvoiceCredits() {
           text={t('notification_credits_low')}
         />
 
-        <Banner variant="orange">
-          <div className="flex space-x-1">
-            <span>{t('notification_credits_low')}</span>
-
-            <span className={buttonStyles} onClick={() => setVisible(true)}>
-              {t('learn_more')}
-            </span>
+        <Popover className="relative">
+          <div className="max-w-max rounded-lg bg-[#FCD34D] px-6 py-4 shadow-lg">
+            <div className="flex items-center justify-center space-x-1">
+              <span className="text-sm">{t('notification_credits_low')}</span>
+
+              <span
+                className="cursor-pointer text-sm font-semibold underline hover:no-underline"
+                onClick={() => setVisible(true)}
+              >
+                {t('learn_more')}
+              </span>
+            </div>
           </div>
-        </Banner>
+        </Popover>
       </>
     );
   }
@@ -105,9 +115,9 @@ interface DialogProps {
 function Dialog({ isVisible, setVisible, text }: DialogProps) {
   const { t } = useTranslation();
 
-  const accentColor = useAccentColor();
   const quota = useQuota();
   const location = useLocation();
+  const accentColor = useAccentColor();
 
   useEffect(() => {
     setVisible(false);
@@ -136,11 +146,12 @@ const retriesAtom = atom(0);
 const statusAtom = atom<'pending' | 'error' | 'success'>('pending');
 
 function RegenerateToken() {
-  const { t } = useTranslation();
+  const [t] = useTranslation();
 
-  const refresh = useRefreshCompanyUsers();
   const queryClient = useQueryClient();
 
+  const refresh = useRefreshCompanyUsers();
+
   const [status, setStatus] = useAtom(statusAtom);
   const [retries, setRetries] = useAtom(retriesAtom);
 
@@ -185,10 +196,12 @@ function RegenerateToken() {
   }
 
   return (
-    <Banner variant="red">
-      <div className="flex space-x-1">
-        <span>{t('einvoice_token_not_found')}</span>
+    <Popover className="relative">
+      <div className="max-w-max rounded-lg bg-[#FCD34D] px-6 py-4 shadow-lg">
+        <div className="flex items-center justify-center space-x-1">
+          <span className="text-sm">{t('einvoice_token_not_found')}</span>
+        </div>
       </div>
-    </Banner>
+    </Popover>
   );
 }
diff --git a/src/components/banners/VerifyEmail.tsx b/src/components/banners/VerifyEmail.tsx
index 26ee38b2d..27974c9ad 100644
--- a/src/components/banners/VerifyEmail.tsx
+++ b/src/components/banners/VerifyEmail.tsx
@@ -9,11 +9,11 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { Banner } from '../Banner';
 import { useCurrentUser } from '$app/common/hooks/useCurrentUser';
 import { toast } from '$app/common/helpers/toast/toast';
 import { request } from '$app/common/helpers/request';
 import { endpoint, isHosted } from '$app/common/helpers';
+import { Popover } from '@headlessui/react';
 
 export const buttonStyles =
   'font-medium text-xs md:text-sm underline cursor-pointer';
@@ -42,14 +42,22 @@ export function VerifyEmail() {
   }
 
   return (
-    <Banner variant="orange">
-      <div className="flex space-x-1">
-        <span>{t('confirm_your_email_address')}.</span>
-
-        <button className={buttonStyles} onClick={resend}>
-          {t('resend_email')}
-        </button>
+    <Popover className="relative">
+      <div className="max-w-max rounded-lg bg-[#FCD34D] px-6 py-4 shadow-lg">
+        <div className="flex items-center justify-center space-x-1">
+          <span className="text-sm">{t('confirm_your_email_address')}.</span>
+
+          <div
+            className="cursor-pointer text-sm font-semibold underline hover:no-underline"
+            onClick={(event) => {
+              event.stopPropagation();
+              resend();
+            }}
+          >
+            {t('resend_email')}
+          </div>
+        </div>
       </div>
-    </Banner>
+    </Popover>
   );
 }
diff --git a/src/components/banners/VerifyPhone.tsx b/src/components/banners/VerifyPhone.tsx
index 12d6ed0f2..e7aedf947 100644
--- a/src/components/banners/VerifyPhone.tsx
+++ b/src/components/banners/VerifyPhone.tsx
@@ -9,8 +9,6 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { Banner } from '../Banner';
-import { buttonStyles } from './VerifyEmail';
 import { Modal } from '../Modal';
 import { useEffect, useState } from 'react';
 import { ValidationBag } from '$app/common/interfaces/validation-bag';
@@ -32,6 +30,7 @@ import { useCurrentUser } from '$app/common/hooks/useCurrentUser';
 import { useCurrentCompany } from '$app/common/hooks/useCurrentCompany';
 import { $refetch } from '$app/common/hooks/useRefetch';
 import { useColorScheme } from '$app/common/colors';
+import { Popover } from '@headlessui/react';
 
 interface VerificationProps {
   visible: boolean;
@@ -146,8 +145,13 @@ function Verification({ visible, onClose }: VerificationProps) {
         visible={visible}
         onClose={onClose}
       >
-        <div className="flex flex-col mb-1"
-          style={{ backgroundColor: colors.$2, color: colors.$3, colorScheme: colors.$0 }}
+        <div
+          className="flex flex-col mb-1"
+          style={{
+            backgroundColor: colors.$2,
+            color: colors.$3,
+            colorScheme: colors.$0,
+          }}
         >
           <PhoneInput
             international
@@ -189,7 +193,8 @@ function Verification({ visible, onClose }: VerificationProps) {
 
 export function VerifyPhone() {
   const [t] = useTranslation();
-  const [isVerificationVisible, setIsVerificationVisible] = useState(false);
+  const [isVerificationVisible, setIsVerificationVisible] =
+    useState<boolean>(false);
 
   const user = useCurrentUser();
   const account = useCurrentAccount();
@@ -213,18 +218,20 @@ export function VerifyPhone() {
 
   return (
     <>
-      <Banner variant="orange">
-        <div className="flex space-x-1">
-          <span>{t('verify_phone_number_help')}.</span>
-
-          <button
-            className={buttonStyles}
-            onClick={() => setIsVerificationVisible(true)}
-          >
-            {t('verify_phone_number')}
-          </button>
+      <Popover className="relative">
+        <div className="max-w-max rounded-lg bg-[#FCD34D] px-6 py-4 shadow-lg">
+          <div className="flex items-center justify-center space-x-1">
+            <span className="text-sm">{t('verify_phone_number_help')}.</span>
+
+            <button
+              className="cursor-pointer text-sm font-semibold underline hover:no-underline"
+              onClick={() => setIsVerificationVisible(true)}
+            >
+              {t('verify_phone_number')}
+            </button>
+          </div>
         </div>
-      </Banner>
+      </Popover>
 
       <Verification
         visible={isVerificationVisible}
diff --git a/src/components/layouts/Default.tsx b/src/components/layouts/Default.tsx
index 8fb02aecb..7be736e6e 100644
--- a/src/components/layouts/Default.tsx
+++ b/src/components/layouts/Default.tsx
@@ -407,10 +407,12 @@ export function Default(props: Props) {
 
   return (
     <div>
-      <ActivateCompany />
-      <VerifyEmail />
-      <VerifyPhone />
-      <EInvoiceCredits />
+      <div className="fixed bottom-4 right-4 z-50 flex items-end flex-col-reverse space-y-4 space-y-reverse">
+        <ActivateCompany />
+        <VerifyEmail />
+        <VerifyPhone />
+        <EInvoiceCredits />
+      </div>
 
       <MobileSidebar
         navigation={navigation}