diff --git a/src/components/CameraScannerLayout.tsx b/src/components/CameraScannerLayout.tsx
index 0684c7e7b..2318d34d0 100644
--- a/src/components/CameraScannerLayout.tsx
+++ b/src/components/CameraScannerLayout.tsx
@@ -36,6 +36,8 @@ export const CameraScannerLayout = () => {
       bottom={0}
       justifyContent="center"
       alignItems="center"
+      opacity={0.5}
+      backgroundColor="primaryBackground"
     >
       <Box
         position="relative"
diff --git a/src/components/DaynamicQrScanner.tsx b/src/components/DaynamicQrScanner.tsx
index 04d3e6e37..90e49a347 100644
--- a/src/components/DaynamicQrScanner.tsx
+++ b/src/components/DaynamicQrScanner.tsx
@@ -76,20 +76,18 @@ const DaynamicQrScanner = ({ onBarCodeScanned, progress }: Props) => {
       />
       <CameraScannerLayout />
 
-      {progress > 0 && (
-        <Box position="relative" bottom="30%" width="70%" alignSelf="center">
-          <ProgressBar progress={progress} />
-        </Box>
-      )}
+      <Box position="absolute" bottom="20%" width="70%" alignSelf="center">
+        <ProgressBar progress={progress} />
+      </Box>
 
       <Box
-        position="relative"
-        bottom="30%"
+        position="absolute"
+        bottom="10%"
         alignSelf="center"
         paddingHorizontal="s"
       >
         <Text variant="subtitle3" marginTop="xxxl" textAlign="center">
-          {t('keystone.payment.scanTxQrcodeScreenSubtitle3666')}
+          {t('keystone.payment.scanTxQrcodeScreenSubtitle3')}
         </Text>
       </Box>
     </BackScreen>