diff --git a/ts/components/loading/bar/SessionProgressBar.tsx b/ts/components/loading/bar/SessionProgressBar.tsx
index 7bc8ae0f8..ef701e98c 100644
--- a/ts/components/loading/bar/SessionProgressBar.tsx
+++ b/ts/components/loading/bar/SessionProgressBar.tsx
@@ -1,5 +1,6 @@
 import { motion } from 'framer-motion';
 import styled from 'styled-components';
+import { THEME_GLOBALS } from '../../../themes/globals';
 import { Flex } from '../../basic/Flex';
 import { SpacerMD, SpacerXL } from '../../basic/Text';
 
@@ -76,7 +77,9 @@ export function SessionProgressBar(props: Props) {
           color={color}
           initial={{ width: `${initialValue}%` }}
           animate={{ width: `${progress}%` }}
-          transition={{ duration: 0.5 }}
+          transition={{
+            duration: THEME_GLOBALS['--duration-progress-bar'],
+          }}
         />
       </ProgressContainer>
     </Flex>
diff --git a/ts/components/registration/components/OnboardingContainer.tsx b/ts/components/registration/components/OnboardingContainer.tsx
index 3af3742d0..be37817a5 100644
--- a/ts/components/registration/components/OnboardingContainer.tsx
+++ b/ts/components/registration/components/OnboardingContainer.tsx
@@ -1,6 +1,7 @@
 import { motion } from 'framer-motion';
 import { ReactNode } from 'react';
 import styled from 'styled-components';
+import { THEME_GLOBALS } from '../../../themes/globals';
 
 const OnboardContainerInner = styled(motion.div)`
   width: 100%;
@@ -28,7 +29,9 @@ export const OnboardContainer = (props: OnboardContainerProps) => {
       initial={'initial'}
       animate={'animate'}
       exit={'exit'}
-      transition={{ duration: 1 }}
+      transition={{
+        duration: THEME_GLOBALS['--duration-onboarding-container'],
+      }}
     >
       {children}
     </OnboardContainerInner>