diff --git a/.github/workflows/all-dev-tn-new.yml b/.github/workflows/all-dev-tn-new.yml
new file mode 100644
index 00000000..481aff75
--- /dev/null
+++ b/.github/workflows/all-dev-tn-new.yml
@@ -0,0 +1,95 @@
+name: ALL tn new dev Deployment
+
+on:
+  push:
+    branches:
+      - all-1.3-tn-dev
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment: all-dev-tn
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v2
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.AWS_REGION }}
+
+      - name: Clean up node_modules and package-lock.json
+        run: |
+          rm -rf node_modules
+          rm -f package-lock.json
+
+      - name: Install Dependencies
+        run: npm install --legacy-peer-deps
+
+      - name: Run Husky Install
+        run: npm run prepare
+
+      - name: Build and Package Application
+        env:
+          SKIP_PREFLIGHT_CHECK: ${{ vars.SKIP_PREFLIGHT_CHECK }}
+          REACT_APP_MODE: ${{ vars.REACT_APP_MODE }}
+          REACT_APP_authToken: ${{ vars.REACT_APP_authToken }}
+          REACT_APP_PID: ${{ vars.REACT_APP_PID }}
+          REACT_APP_UID: ${{ vars.REACT_APP_UID }}
+          REACT_APP_ID: ${{ vars.REACT_APP_ID }}
+          REACT_APP_VER: ${{ vars.REACT_APP_VER }}
+          REACT_APP_TIMEDIFF: ${{ vars.REACT_APP_TIMEDIFF }}
+          REACT_APP_HOST: ${{ vars.REACT_APP_HOST }}
+          REACT_APP_ENDPOINT: ${{ vars.REACT_APP_ENDPOINT }}
+          REACT_APP_APISLUG: ${{ vars.REACT_APP_APISLUG }}
+          REACT_APP_CHANNEL: ${{ vars.REACT_APP_CHANNEL }}
+          REACT_APP_ENV: ${{ vars.REACT_APP_ENV }}
+          REACT_APP_BATCHSIZE: ${{ vars.REACT_APP_BATCHSIZE }}
+          REACT_APP_CONTENT_SIZE: ${{ vars.REACT_APP_CONTENT_SIZE }}
+          REACT_APP_LANGUAGE: ${{ vars.REACT_APP_LANGUAGE }}
+          REACT_APP_TELEMETRY_MODE: ${{ vars.REACT_APP_TELEMETRY_MODE }}
+          REACT_APP_VIRTUAL_ID_HOST: ${{ vars.REACT_APP_VIRTUAL_ID_HOST }}
+          REACT_APP_LEARNER_AI_ORCHESTRATION_HOST: ${{ vars.REACT_APP_LEARNER_AI_ORCHESTRATION_HOST }}
+          REACT_APP_LEARNER_AI_APP_HOST: ${{ vars.REACT_APP_LEARNER_AI_APP_HOST }}
+          REACT_APP_CONTENT_SERVICE_APP_HOST: ${{ vars.REACT_APP_CONTENT_SERVICE_APP_HOST }}
+          REACT_APP_CAPTURE_AUDIO: ${{ vars.REACT_APP_CAPTURE_AUDIO }}
+          REACT_APP_AWS_S3_BUCKET_NAME: ${{ vars.REACT_APP_AWS_S3_BUCKET_NAME }}
+          REACT_APP_AWS_S3_BUCKET_URL: ${{ vars.REACT_APP_AWS_S3_BUCKET_URL }}
+          REACT_APP_AWS_S3_REGION: ${{ vars.REACT_APP_AWS_S3_REGION }}
+          REACT_APP_AWS_S3_BUCKET_CONTENT_URL: ${{ vars.REACT_APP_AWS_S3_BUCKET_CONTENT_URL }}
+          REACT_APP_MIN_DECIBELS: ${{ vars.REACT_APP_MIN_DECIBELS }}
+          REACT_APP_IS_AUDIOPREPROCESSING: ${{ vars.REACT_APP_IS_AUDIOPREPROCESSING }}
+          REACT_APP_POST_LEARNER_PROGRESS: ${{ vars.REACT_APP_POST_LEARNER_PROGRESS }}
+          REACT_APP_IS_APP_IFRAME: ${{ vars.REACT_APP_IS_APP_IFRAME }}
+          REACT_APP_IS_IN_APP_AUTHORISATION: ${{ vars.REACT_APP_IS_IN_APP_AUTHORISATION }}
+          REACT_APP_LANGUAGES: ${{ vars.REACT_APP_LANGUAGES }}
+          REACT_APP_AWS_ACCESS_KEY_ID: ${{ secrets.REACT_APP_AWS_ACCESS_KEY_ID }}
+          REACT_APP_AWS_SECRET_ACCESS_KEY: ${{ secrets.REACT_APP_AWS_SECRET_ACCESS_KEY }}
+          CI: false # Disabling CI to not treat warnings as errors
+        run: npm run build
+
+      - name: Deploy to S3 Bucket
+        run: aws s3 sync ./build s3://all-tn-app-dev/assets/test-rig/
+
+      - name: Debug Environment Variables
+        run: |
+          echo "REACT_APP_AWS_S3_BUCKET_NAME: $REACT_APP_AWS_S3_BUCKET_NAME"
+          echo "AWS_REGION: $AWS_REGION"
+          echo "secrate": ${{ vars.REACT_APP_AWS_S3_BUCKET_NAME }}
+
+      - name: Cloudfront Invalidation
+        uses: chetan/invalidate-cloudfront-action@master
+        env:
+          DISTRIBUTION: ${{ secrets.AWS_DISTRIBUTION_NEW }}
+          PATHS: "/*"
+          AWS_REGION: ${{ secrets.AWS_REGION }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
diff --git a/src/components/Practice/Mechanics5.jsx b/src/components/Practice/Mechanics5.jsx
index 1a1f8dd7..c08d93cd 100644
--- a/src/components/Practice/Mechanics5.jsx
+++ b/src/components/Practice/Mechanics5.jsx
@@ -4,6 +4,9 @@ import MainLayout from "../Layouts.jsx/MainLayout";
 import { PlayAudioButton, StopAudioButton } from "../../utils/constants";
 import VoiceAnalyser from "../../utils/VoiceAnalyser";
 import PropTypes from "prop-types";
+import { Modal } from "@mui/material";
+import ZoomInIcon from "@mui/icons-material/ZoomIn";
+import CloseIcon from "@mui/icons-material/Close";
 
 const Mechanics5 = ({
   background,
@@ -54,6 +57,7 @@ const Mechanics5 = ({
   const audiosRef = useRef(
     new Array(options.length).fill(null).map(() => React.createRef())
   );
+  const [zoomOpen, setZoomOpen] = useState(false);
   const questionAudioRef = useRef();
   const [playingIndex, setPlayingIndex] = useState(null);
   const [selectedOption, setSelectedOption] = useState(null); // Add state to track selected radio button
@@ -179,13 +183,101 @@ const Mechanics5 = ({
         container
         sx={{ width: "80%", justifyContent: "center", mb: 2, mt: 8 }}
       >
-        <Grid item xs={4}>
-          <img
-            src={image}
-            style={{ borderRadius: "20px", maxWidth: "100%", height: "250px" }}
-            alt=""
-          />
+        <Grid item xs={4} position="relative">
+          {/* Image with full-width gradient overlay on top */}
+          <Box sx={{ position: "relative", cursor: "zoom-in" }}>
+            <img
+              src={image}
+              style={{
+                borderRadius: "20px",
+                maxWidth: "100%",
+                height: "250px",
+              }}
+              alt="contentImage"
+              onClick={() => setZoomOpen(true)} // Open modal on click
+            />
+
+            {/* Subtle gradient overlay across the top */}
+            <Box
+              sx={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                height: "40px", // Height of the gradient overlay
+                background:
+                  "linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent)",
+                borderTopLeftRadius: "20px",
+                borderTopRightRadius: "20px",
+                display: "flex",
+                alignItems: "center",
+                paddingLeft: "8px",
+              }}
+            >
+              {/* Zoom icon positioned in the top-left corner */}
+              <ZoomInIcon
+                onClick={() => setZoomOpen(true)}
+                sx={{ color: "white", fontSize: "22px", cursor: "pointer" }}
+              />
+            </Box>
+          </Box>
+
+          {/* Modal for zoomed image with gradient and close icon */}
+          <Modal
+            open={zoomOpen}
+            onClose={() => setZoomOpen(false)}
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <Box sx={{ position: "relative", outline: "none" }}>
+              {/* Subtle gradient overlay at the top of the zoomed image */}
+              <Box
+                sx={{
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  height: "40px", // Adjust height as needed
+                  background:
+                    "linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "flex-end",
+                  paddingRight: "8px",
+                  borderTopLeftRadius: "8px",
+                  borderTopRightRadius: "8px",
+                }}
+              >
+                {/* Close icon positioned within the gradient overlay */}
+                <CloseIcon
+                  onClick={() => setZoomOpen(false)}
+                  sx={{
+                    color: "white",
+                    fontSize: "24px",
+                    cursor: "pointer",
+                    backgroundColor: "rgba(0, 0, 0, 0.5)",
+                    borderRadius: "50%",
+                    padding: "4px",
+                  }}
+                />
+              </Box>
+
+              <img
+                src={image}
+                alt="Zoomed content"
+                style={{
+                  maxWidth: "90vw",
+                  maxHeight: "90vh",
+                  borderRadius: "8px",
+                }}
+              />
+            </Box>
+          </Modal>
         </Grid>
+
         <Grid item xs={8} paddingLeft={2}>
           <Box paddingBottom={3} sx={{ display: "flex" }}>
             <audio
diff --git a/src/utils/VoiceAnalyser.js b/src/utils/VoiceAnalyser.js
index e3bc3d02..ca9fa094 100644
--- a/src/utils/VoiceAnalyser.js
+++ b/src/utils/VoiceAnalyser.js
@@ -501,6 +501,17 @@ function VoiceAnalyser(props) {
       );
 
       setApiResponse(callUpdateLearner ? data.status : "success");
+
+      if (
+        callUpdateLearner &&
+        (props.pageName === "wordsorimage" || props.pageName === "m5")
+      ) {
+        const isMatching =
+          data?.createScoreData?.session?.error_rate?.character === 0;
+        if (typeof props.updateStoredData === "function") {
+          props.updateStoredData(recordedAudio, isMatching);
+        }
+      }
       if (props.handleNext) {
         props.handleNext();
         if (temp_audio !== null) {
@@ -712,12 +723,6 @@ function VoiceAnalyser(props) {
             <Box
               sx={{ cursor: "pointer" }}
               onClick={() => {
-                if (
-                  props.pageName === "wordsorimage" ||
-                  props.pageName === "m5"
-                ) {
-                  props.updateStoredData(recordedAudio, isMatching);
-                }
                 if (props.setIsNextButtonCalled) {
                   props.setIsNextButtonCalled(true);
                 } else {
diff --git a/src/views/Practice/Practice.jsx b/src/views/Practice/Practice.jsx
index a2bfe855..5fd15360 100644
--- a/src/views/Practice/Practice.jsx
+++ b/src/views/Practice/Practice.jsx
@@ -716,11 +716,11 @@ const Practice = () => {
           questions[currentQuestion]?.contentSourceData || [];
         const stringLengths = contentSourceData.map((item) => item.text.length);
         const length =
-          questions[currentQuestion]?.mechanics_data &&
-          (questions[currentQuestion]?.mechanics_data[0]?.mechanics_id ===
-            "mechanic_2" ||
+          (questions[currentQuestion]?.mechanics_data &&
             questions[currentQuestion]?.mechanics_data[0]?.mechanics_id ===
-              "mechanic_1")
+              "mechanic_2") ||
+          questions[currentQuestion]?.mechanics_data[0]?.mechanics_id ===
+            "mechanic_1"
             ? 500
             : stringLengths[0];
         window.parent.postMessage({ type: "stringLengths", length }, "*");