diff --git a/package.json b/package.json
index 7048869..6494c8c 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "query-string": "^7.1.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.8.0",
-    "react-content-loader": "^6.2.1",
+    "react-content-loader": "^7.0.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "18",
     "react-toastify": "^9.1.3",
diff --git a/src/AnalyticsNext/index.tsx b/src/AnalyticsNext/index.tsx
index 7ff1516..acf7d3a 100644
--- a/src/AnalyticsNext/index.tsx
+++ b/src/AnalyticsNext/index.tsx
@@ -11,11 +11,20 @@ const ConsentComponentCustom = dynamic(() => import('../Components/ConsentCustom
 interface AnalyticsNext {
   router: NextRouter;
   attributes: any;
-  customLayout?: boolean;
+  oldLayout?: boolean;
+  loginApp?: any;
+  isLoggedApp?: boolean;
   children?: ReactNode;
 }
 
-const AnalyticsNext = ({ router, attributes, customLayout = false, children }: AnalyticsNext) => {
+const AnalyticsNext = ({
+  router,
+  attributes,
+  oldLayout = false,
+  loginApp,
+  isLoggedApp,
+  children,
+}: AnalyticsNext) => {
   return (
     <>
       <AnalyticsContextProvider>
@@ -23,17 +32,21 @@ const AnalyticsNext = ({ router, attributes, customLayout = false, children }: A
           {children}
           {process.env.NEXT_PUBLIC_DISABLE_ANALYTICS_CONSENT !== 'true' && (
             <>
-              {customLayout ? (
-                <ConsentComponentCustom
+              {oldLayout ? (
+                <ConsentComponent
                   endpoint={process.env.NEXT_PUBLIC_ENDPOINT_ANALYTICS_URL}
                   networkEnv={process.env.NEXT_PUBLIC_CONCORDIUM_NETWORK}
                   aesirXEndpoint={process.env.NEXT_PUBLIC_ENDPOINT_URL ?? 'https://api.aesirx.io'}
+                  loginApp={loginApp}
+                  isLoggedApp={isLoggedApp}
                 />
               ) : (
-                <ConsentComponent
+                <ConsentComponentCustom
                   endpoint={process.env.NEXT_PUBLIC_ENDPOINT_ANALYTICS_URL}
                   networkEnv={process.env.NEXT_PUBLIC_CONCORDIUM_NETWORK}
                   aesirXEndpoint={process.env.NEXT_PUBLIC_ENDPOINT_URL ?? 'https://api.aesirx.io'}
+                  loginApp={loginApp}
+                  isLoggedApp={isLoggedApp}
                 />
               )}
             </>
diff --git a/src/AnalyticsReact/index.tsx b/src/AnalyticsReact/index.tsx
index bee4e34..c96663c 100644
--- a/src/AnalyticsReact/index.tsx
+++ b/src/AnalyticsReact/index.tsx
@@ -4,25 +4,35 @@ import AnalyticsContextProvider from '../utils/AnalyticsContextProvider';
 import AnalyticsHandle from './handle';
 
 const ConsentComponent = React.lazy(() => import('../Components/Consent'));
+const ConsentComponentCustom = React.lazy(() => import('../Components/ConsentCustom'));
 
 interface AnalyticsReact {
   location: { search: string; pathname: string };
   history: { replace: (_: object) => void };
   children?: ReactNode;
+  oldLayout?: boolean;
 }
 
-const AnalyticsReact = ({ location, history, children }: AnalyticsReact) => {
+const AnalyticsReact = ({ location, history, oldLayout = false, children }: AnalyticsReact) => {
   return (
     <AnalyticsContextProvider>
       <AnalyticsHandle location={location} history={history}>
         {children}
         {process.env.REACT_APP_DISABLE_ANALYTICS_CONSENT !== 'true' && (
           <Suspense fallback={<></>}>
-            <ConsentComponent
-              endpoint={process.env.REACT_APP_ENDPOINT_ANALYTICS_URL}
-              networkEnv={process.env.REACT_APP_CONCORDIUM_NETWORK}
-              aesirXEndpoint={process.env.REACT_APP_ENDPOINT_URL ?? 'https://api.aesirx.io'}
-            />
+            {oldLayout ? (
+              <ConsentComponent
+                endpoint={process.env.REACT_APP_ENDPOINT_ANALYTICS_URL}
+                networkEnv={process.env.REACT_APP_CONCORDIUM_NETWORK}
+                aesirXEndpoint={process.env.REACT_APP_ENDPOINT_URL ?? 'https://api.aesirx.io'}
+              />
+            ) : (
+              <ConsentComponentCustom
+                endpoint={process.env.NEXT_PUBLIC_ENDPOINT_ANALYTICS_URL}
+                networkEnv={process.env.NEXT_PUBLIC_CONCORDIUM_NETWORK}
+                aesirXEndpoint={process.env.NEXT_PUBLIC_ENDPOINT_URL ?? 'https://api.aesirx.io'}
+              />
+            )}
           </Suspense>
         )}
       </AnalyticsHandle>
diff --git a/src/Components/Consent.tsx b/src/Components/Consent.tsx
index cdc2770..2f0bb35 100644
--- a/src/Components/Consent.tsx
+++ b/src/Components/Consent.tsx
@@ -48,14 +48,22 @@ interface WalletConnectionPropsExtends extends WalletConnectionProps {
   endpoint: string;
   aesirXEndpoint: string;
   networkEnv?: string;
+  loginApp?: any;
+  isLoggedApp?: boolean;
 }
-const ConsentComponent = ({ endpoint, aesirXEndpoint, networkEnv }: any) => {
+const ConsentComponent = ({ endpoint, aesirXEndpoint, networkEnv, loginApp, isLoggedApp }: any) => {
   return (
     <WithWalletConnector network={networkEnv === 'testnet' ? TESTNET : MAINNET}>
       {(props) => (
         <div className="aesirxconsent">
           <SSOEthereumProvider>
-            <ConsentComponentApp {...props} endpoint={endpoint} aesirXEndpoint={aesirXEndpoint} />
+            <ConsentComponentApp
+              {...props}
+              endpoint={endpoint}
+              aesirXEndpoint={aesirXEndpoint}
+              loginApp={loginApp}
+              isLoggedApp={isLoggedApp}
+            />
           </SSOEthereumProvider>
         </div>
       )}
@@ -66,6 +74,8 @@ const ConsentComponentApp = (props: WalletConnectionPropsExtends) => {
   const {
     endpoint,
     aesirXEndpoint,
+    loginApp,
+    isLoggedApp,
     activeConnectorType,
     activeConnector,
     activeConnectorError,
@@ -227,6 +237,7 @@ const ConsentComponentApp = (props: WalletConnectionPropsExtends) => {
                     );
                     sessionStorage.setItem('aesirx-analytics-jwt', data?.jwt);
                     jwt = data?.jwt;
+                    loginApp && !isLoggedApp && loginApp(data);
                     setLoadingCheckAccount(false);
                   }
                 } else {
@@ -398,6 +409,7 @@ const ConsentComponentApp = (props: WalletConnectionPropsExtends) => {
           setLoading('done');
         }
       }
+      loginApp && !isLoggedApp && loginApp(response);
     } catch (error) {
       console.log(error);
       setShow(false);
diff --git a/src/Components/ConsentCustom.tsx b/src/Components/ConsentCustom.tsx
index f3de5d9..438d2ee 100644
--- a/src/Components/ConsentCustom.tsx
+++ b/src/Components/ConsentCustom.tsx
@@ -50,8 +50,16 @@ interface WalletConnectionPropsExtends extends WalletConnectionProps {
   endpoint: string;
   aesirXEndpoint: string;
   networkEnv?: string;
+  loginApp?: any;
+  isLoggedApp: boolean;
 }
-const ConsentComponentCustom = ({ endpoint, aesirXEndpoint, networkEnv }: any) => {
+const ConsentComponentCustom = ({
+  endpoint,
+  aesirXEndpoint,
+  networkEnv,
+  loginApp,
+  isLoggedApp,
+}: any) => {
   return (
     <WithWalletConnector network={networkEnv === 'testnet' ? TESTNET : MAINNET}>
       {(props) => (
@@ -61,6 +69,8 @@ const ConsentComponentCustom = ({ endpoint, aesirXEndpoint, networkEnv }: any) =
               {...props}
               endpoint={endpoint}
               aesirXEndpoint={aesirXEndpoint}
+              loginApp={loginApp}
+              isLoggedApp={isLoggedApp}
             />
           </SSOEthereumProvider>
         </div>
@@ -72,6 +82,8 @@ const ConsentComponentCustomApp = (props: WalletConnectionPropsExtends) => {
   const {
     endpoint,
     aesirXEndpoint,
+    loginApp,
+    isLoggedApp,
     activeConnectorType,
     activeConnector,
     activeConnectorError,
@@ -236,6 +248,7 @@ const ConsentComponentCustomApp = (props: WalletConnectionPropsExtends) => {
                     );
                     sessionStorage.setItem('aesirx-analytics-jwt', data?.jwt);
                     jwt = data?.jwt;
+                    loginApp && !isLoggedApp && loginApp(data);
                     setLoadingCheckAccount(false);
                   }
                 } else {
@@ -407,6 +420,7 @@ const ConsentComponentCustomApp = (props: WalletConnectionPropsExtends) => {
           setLoading('done');
         }
       }
+      loginApp && !isLoggedApp && loginApp(response);
     } catch (error) {
       console.log(error);
       setShow(false);
@@ -741,6 +755,7 @@ const ConsentComponentCustomApp = (props: WalletConnectionPropsExtends) => {
                   />
                   <div
                     className="minimize-shield"
+                    ref={analyticsContext?.ref}
                     onClick={() => {
                       setShowExpandConsent(true);
                       sessionStorage.removeItem('aesirx-analytics-rejected');
@@ -760,7 +775,7 @@ const ConsentComponentCustomApp = (props: WalletConnectionPropsExtends) => {
                         <div className="bg-white rounded p-3 w-100">
                           {loading === 'done' ? (
                             <>
-                              <p className="mb-3">{t('txt_upgrade_consent_text')}</p>
+                              <p className="mb-2 mb-lg-3">{t('txt_upgrade_consent_text')}</p>
                               <p className="fw-semibold text-dark">{t('txt_your_current_level')}</p>
                               <ConsentLevelUprade
                                 level={level}
@@ -889,14 +904,14 @@ const ConsentComponentCustomApp = (props: WalletConnectionPropsExtends) => {
                                     onClick={() => {
                                       setUpgradeLayout(true);
                                     }}
-                                    className="d-flex align-items-center justify-content-center fs-14 w-100 me-3 mb-2 mb-lg-0 rounded-pill py-3 text-dark"
+                                    className="d-flex align-items-center justify-content-center fs-14 w-100 me-3 mb-2 mb-lg-0 rounded-pill py-2 py-lg-3 text-dark"
                                   >
                                     {t('txt_change_consent')}
                                   </Button>{' '}
                                   <Button
                                     variant="outline-success"
                                     onClick={handleNotAllow}
-                                    className="d-flex align-items-center justify-content-center fs-14 w-100 me-3 mb-2 mb-lg-0 rounded-pill py-3 text-dark"
+                                    className="d-flex align-items-center justify-content-center fs-14 w-100 me-3 mb-2 mb-lg-0 rounded-pill py-2 py-lg-3 text-dark"
                                   >
                                     {t('txt_reject_consent')}
                                   </Button>
@@ -908,7 +923,7 @@ const ConsentComponentCustomApp = (props: WalletConnectionPropsExtends) => {
                                     }`}
                                   >
                                     <SSOButton
-                                      className="btn btn-success text-white d-flex align-items-center justify-content-center loginSSO rounded-pill py-3 w-100"
+                                      className="btn btn-success text-white d-flex align-items-center justify-content-center loginSSO rounded-pill py-2 py-lg-3 w-100"
                                       text={
                                         <>
                                           <img src={yes} className="me-1" />
@@ -926,7 +941,7 @@ const ConsentComponentCustomApp = (props: WalletConnectionPropsExtends) => {
                                     <Button
                                       variant="success"
                                       onClick={handleAgree}
-                                      className="w-100 me-3 text-white d-flex align-items-center justify-content-center fs-14 rounded-pill py-3"
+                                      className="w-100 me-3 text-white d-flex align-items-center justify-content-center fs-14 rounded-pill py-2 py-lg-3"
                                     >
                                       {loadingCheckAccount ? (
                                         <span
diff --git a/src/Components/Terms.tsx b/src/Components/Terms.tsx
index 21255e7..c9315bf 100644
--- a/src/Components/Terms.tsx
+++ b/src/Components/Terms.tsx
@@ -77,13 +77,12 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
           term.level === level && (
             <Fragment key={key}>
               <div
-                className={`rounded-top d-flex align-items-center justify-content-between p-3 fw-medium flex-wrap  ${
-                  isCustom ? 'py-3 px-4' : 'p-3 border-bottom bg-white'
+                className={`rounded-top d-flex align-items-center justify-content-between p-2 p-lg-3 fw-medium flex-wrap  ${
+                  isCustom
+                    ? 'py-2 py-lg-3 px-4 header-consent-bg'
+                    : 'p-2 p-lg-3 border-bottom bg-white'
                 }`}
                 style={{
-                  ...(isCustom && {
-                    backgroundColor: '#F8F9FD',
-                  }),
                   ...(isCustom && {
                     borderBottom: '1px solid #DEDEDE',
                   }),
@@ -116,31 +115,31 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
                   )}
                 </div>
               </div>
-              <div className={`p-3 ${isCustom ? 'pt-0' : ''} bg-white`}>
+              <div className={`pb-3 ${isCustom ? 'pt-0' : ''} bg-white`}>
                 {isCustom ? (
                   <>
                     <Tabs
                       id="consent_info_tab"
                       activeKey={activeTab}
                       onSelect={(k) => setActiveTab(k)}
-                      className="mb-3 w-100 flex-nowrap consent_info_tab"
+                      className="mb-2 mb-lg-3 w-100 flex-nowrap consent_info_tab"
                     >
-                      <Tab eventKey="consent" title="Consent" className="w-100">
-                        <p className="mb-3">{t('txt_consent_to_data')}</p>
+                      <Tab eventKey="consent" title="Consent" className="w-100 px-3">
+                        <p className="mb-2 mb-lg-3">{t('txt_consent_to_data')}</p>
                         <div className="d-flex align-items-center flex-wrap">
                           <div className="me-10px">{t('txt_ethical_compliant')}</div>
                           <div className="d-flex align-items-center">
-                            <div className="item_compliant fw-semibold d-flex align-items-center text-dark">
+                            <div className="item_compliant fw-semibold d-flex align-items-center">
                               <img src={check_line} width={24} height={24} />
                               GDPR
                             </div>
-                            <div className="item_compliant fw-semibold d-flex align-items-center text-dark ms-10px">
+                            <div className="item_compliant fw-semibold d-flex align-items-center ms-10px">
                               <img src={check_line} width={24} height={24} />
                               CCPA
                             </div>
                           </div>
                         </div>
-                        <div className="fw-semibold mt-3 mb-0 text-dark">
+                        <div className="fw-semibold mt-2 mt-lg-3 mb-0 text-dark">
                           {t('txt_your_current_level')}
                         </div>
                         <ConsentLevel
@@ -151,7 +150,7 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
                           content_custom={t(term.content_custom)}
                         />
                       </Tab>
-                      <Tab eventKey="detail" title="Detail">
+                      <Tab eventKey="detail" title="Detail" className="px-3">
                         <div className="about_section">
                           <div className="d-flex align-items-start">
                             <span>
@@ -229,7 +228,7 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
                           />
                         </div>
                       </Tab>
-                      <Tab eventKey="about" title="About">
+                      <Tab eventKey="about" title="About" className="px-3">
                         <div className="d-flex align-items-start">
                           <span>
                             <img src={check_circle} width={'14px'} height={'15px'} />
@@ -289,11 +288,11 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
                         <div className="d-flex align-items-center mt-3 flex-wrap">
                           <div className="me-10px">{t('txt_ethical_compliant')}</div>
                           <div className="d-flex align-items-center">
-                            <div className="item_compliant fw-semibold d-flex align-items-center text-dark">
+                            <div className="item_compliant fw-semibold d-flex align-items-center">
                               <img src={check_line} width={24} height={24} />
                               GDPR
                             </div>
-                            <div className="item_compliant fw-semibold d-flex align-items-center text-dark ms-10px">
+                            <div className="item_compliant fw-semibold d-flex align-items-center ms-10px">
                               <img src={check_line} width={24} height={24} />
                               CCPA
                             </div>
@@ -331,7 +330,7 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
               </div>
               {isCustom ? (
                 <div className="rounded-bottom position-relative overflow-hidden text-white bg-white">
-                  <div className="position-relative p-3">
+                  <div className="position-relative pt-2 pt-lg-3 p-3">
                     <div className="d-flex align-items-center justify-content-between flex-wrap">
                       {children}
                     </div>
@@ -344,7 +343,7 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
                     className="position-absolute h-100 w-100 object-fit-cover lightning flash-effect"
                     src={bg}
                   />
-                  <div className="position-relative p-3">
+                  <div className="position-relative pt-2 pt-lg-3 p-3">
                     {showReadmore && (
                       <>
                         <div className="mb-3">
@@ -372,7 +371,7 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
 
 const ConsentLevel = ({ level, tier, levelname, term_custom, content_custom }: any) => {
   return (
-    <div className="consent_level mt-3">
+    <div className="consent_level mt-2 mt-lg-3">
       <div className="d-flex align-items-center justify-content-between flex-wrap mb-2">
         <div className="d-flex align-items-center">
           <div className={`status-tier tier-${level} rounded-circle`}></div>
diff --git a/src/Hooks/useConsentStatus.ts b/src/Hooks/useConsentStatus.ts
index 631375f..59dec25 100644
--- a/src/Hooks/useConsentStatus.ts
+++ b/src/Hooks/useConsentStatus.ts
@@ -120,7 +120,8 @@ const useConsentStatus = (endpoint?: string, props?: WalletConnectionProps) => {
       if (
         isDesktop &&
         sessionStorage.getItem('aesirx-analytics-revoke') !== '1' &&
-        sessionStorage.getItem('aesirx-analytics-revoke') !== '2'
+        sessionStorage.getItem('aesirx-analytics-revoke') !== '2' &&
+        sessionStorage.getItem('aesirx-analytics-rejected') !== 'true'
       ) {
         if (window['concordium']) {
           const address = (await window['concordium']?.requestAccounts()) ?? [];
@@ -138,7 +139,7 @@ const useConsentStatus = (endpoint?: string, props?: WalletConnectionProps) => {
       }
     };
     initConnector();
-  }, []);
+  }, [window['concordium']]);
 
   useEffect(() => {
     if (activeConnector) {
diff --git a/src/analytics.tsx b/src/analytics.tsx
index 5417632..48c9419 100644
--- a/src/analytics.tsx
+++ b/src/analytics.tsx
@@ -31,17 +31,18 @@ const ConsentPopup = ({ visitor_uuid, event_uuid }: any) => {
         visitor_uuid: visitor_uuid,
         setEventID: undefined,
         setUUID: undefined,
+        ref: undefined,
       }}
     >
       <AesirXI18nextProvider appLanguages={appLanguages}>
-        {window['customLayoutConsent'] === 'true' ? (
-          <ConsentComponentCustom
+        {window['oldLayoutConsent'] === 'true' ? (
+          <ConsentComponent
             endpoint={window['aesirx1stparty'] ?? ''}
             networkEnv={window['concordiumNetwork'] ?? ''}
             aesirXEndpoint={window['aesirxEndpoint'] ?? 'https://api.aesirx.io'}
           />
         ) : (
-          <ConsentComponent
+          <ConsentComponentCustom
             endpoint={window['aesirx1stparty'] ?? ''}
             networkEnv={window['concordiumNetwork'] ?? ''}
             aesirXEndpoint={window['aesirxEndpoint'] ?? 'https://api.aesirx.io'}
diff --git a/src/styles/color-mode.scss b/src/styles/color-mode.scss
index f98edb3..a2b25e0 100644
--- a/src/styles/color-mode.scss
+++ b/src/styles/color-mode.scss
@@ -18,7 +18,8 @@
       background-color: var(--#{$prefix}dark-bg-subtle);
     }
     .bg-white {
-      background-color: var(--#{$prefix}light-bg-subtle);
+      // background-color: #1B233F !important;
+      background-color: var(--#{$prefix}dark) !important;
     }
     .bg-light {
       background-color: var(--#{$prefix}light-bg-subtle);
@@ -36,5 +37,16 @@
         color: $white;
       }
     }
+    .header-consent-bg {
+      background-color: var(--#{$prefix}light-bg-subtle);
+    }
+    .toast.custom .consent_info_tab .nav-item button.active {
+      color: $white;
+      background-color: #1B233F;
+    }
+    .item_compliant {
+      background-color: #F0F3FB;
+      color: #222328;
+    }
   }
 }
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 4fb4051..081e3c9 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -96,6 +96,11 @@ $dark: #222328;
   .btn-success:hover {
     color: var(--#{$prefix}white);
   }
+  .nav {
+    @include media-breakpoint-down(lg) {
+      --aesirxconsent-nav-link-padding-y: 5px;
+    }
+  }
   .toast {
     --#{$prefix}toast-zindex: 1049;
     --#{$prefix}toast-font-size: 16px;
@@ -105,6 +110,11 @@ $dark: #222328;
       border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
       box-shadow: var(--#{$prefix}toast-box-shadow);
       border-radius: var(--#{$prefix}toast-border-radius);
+      max-height: 100vh;
+      overflow-y: auto;
+      @include media-breakpoint-down(lg) {
+        font-size: 14px;
+      }
       button {
         @include media-breakpoint-down(lg) {
           font-size: 14px;
@@ -150,16 +160,16 @@ $dark: #222328;
       }
       .status-tier {
         &.tier-1 {
-          background-color: #c8192e;
+          background-color: #F1C40F;
         }
         &.tier-2 {
-          background-color: #e67e22;
+          background-color: #E67E22;
         }
         &.tier-3 {
-          background-color: #ffc700;
+          background-color: #9B59B6;
         }
         &.tier-4 {
-          background-color: #1c9678;
+          background-color: #C8192E;
         }
       }
     }
@@ -397,6 +407,9 @@ $dark: #222328;
       opacity: 0;
     }
   }
+  .header-consent-bg {
+    background-color: #f8f9fd;
+  }
 }
 body.modal-open,
 body.modal-sso-open {
diff --git a/src/utils/AnalyticsContextProvider.tsx b/src/utils/AnalyticsContextProvider.tsx
index cf4a2f7..b52c103 100644
--- a/src/utils/AnalyticsContextProvider.tsx
+++ b/src/utils/AnalyticsContextProvider.tsx
@@ -3,7 +3,7 @@
  * @license     GNU General Public License version 3, see LICENSE.
  */
 
-import React, { Dispatch, ReactNode, SetStateAction, useState } from 'react';
+import React, { Dispatch, ReactNode, SetStateAction, useRef, useState } from 'react';
 import { appLanguages } from '../translations';
 import { AesirXI18nextProvider } from './I18nextProvider';
 
@@ -16,6 +16,7 @@ interface AnalyticsContextType {
   visitor_uuid: string;
   setEventID: Dispatch<SetStateAction<string>>;
   setUUID: Dispatch<SetStateAction<string>>;
+  ref: any;
 }
 
 export const AnalyticsContext = React.createContext<AnalyticsContextType>({
@@ -23,11 +24,13 @@ export const AnalyticsContext = React.createContext<AnalyticsContextType>({
   visitor_uuid: undefined,
   setEventID: undefined,
   setUUID: undefined,
+  ref: undefined,
 });
 
 const AnalyticsContextProvider: React.FC<Props> = ({ children }) => {
   const [eventID, setEventID] = useState();
   const [UUID, setUUID] = useState();
+  const ref = useRef();
   return (
     <AnalyticsContext.Provider
       value={{
@@ -35,6 +38,7 @@ const AnalyticsContextProvider: React.FC<Props> = ({ children }) => {
         visitor_uuid: UUID,
         setEventID: setEventID,
         setUUID: setUUID,
+        ref: ref,
       }}
     >
       <AesirXI18nextProvider appLanguages={appLanguages}>{children}</AesirXI18nextProvider>
diff --git a/yarn.lock b/yarn.lock
index eb71065..ae0ed09 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8015,10 +8015,10 @@ react-bootstrap@^2.8.0:
     uncontrollable "^7.2.1"
     warning "^4.0.3"
 
-react-content-loader@^6.2.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-6.2.1.tgz#8feb733c2d2495002e1b216f13707f2b5f2a8ead"
-  integrity sha512-6ONbFX+Hi3SHuP66JB8CPvJn372pj+qwltJV0J8z/8MFrq98I1cbFdZuhDWeQXu3CFxiiDTXJn7DFxx2ZvrO7g==
+react-content-loader@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-7.0.0.tgz#785780d10ff40bb5f54ba220ed51e4ad76f13507"
+  integrity sha512-xaBwpO7eiJyEc4ndym+g6wcruV9W2y3DKqbw4U48QFBsv0IeAVZO+aCUb8GptlDLWM8n5zi2HcFSGlj5r+53Tg==
 
 react-device-detect@^2.2.3:
   version "2.2.3"