diff --git a/src/common/PreviewDialog.jsx b/src/common/PreviewDialog.jsx
index 43782a28..a3ec5744 100644
--- a/src/common/PreviewDialog.jsx
+++ b/src/common/PreviewDialog.jsx
@@ -1,6 +1,5 @@
 import {
   Dialog,
-  DialogActions,
   DialogContent,
   DialogContentText,
   Box,
@@ -8,15 +7,47 @@ import {
   DialogTitle,
   Typography,
 } from "@mui/material";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import CloseIcon from "@mui/icons-material/Close";
+import { FetchpreviewTaskAPI, setSnackBar } from "redux/actions";
+import { useDispatch } from "react-redux";
 
-const PreviewDialog = ({ openPreviewDialog, handleClose, data, task_type }) => {
-  const [Previewdata, setPreviewdata] = useState();
+const PreviewDialog = ({
+  openPreviewDialog,
+  handleClose,
+  videoId,
+  taskType,
+  targetLanguage,
+}) => {
+  const dispatch = useDispatch();
+
+  const [previewdata, setPreviewdata] = useState([]);
+
+  const fetchPreviewData = useCallback(async () => {
+    const taskObj = new FetchpreviewTaskAPI(videoId, taskType, targetLanguage);
+    try {
+      const res = await fetch(taskObj.apiEndPoint(), {
+        method: "GET",
+        headers: taskObj.getHeaders().headers,
+      });
+
+      const response = await res.json();
+      setPreviewdata(response.data.payload);
+    } catch (error) {
+      dispatch(
+        setSnackBar({
+          open: true,
+          message: "Something went wrong!!",
+          variant: "error",
+        })
+      );
+    }
+  }, [dispatch, videoId, taskType, targetLanguage]);
 
   useEffect(() => {
-    setPreviewdata(data);
-  }, [data]);
+    fetchPreviewData();
+  }, [fetchPreviewData]);
+
   return (
     <Dialog
       open={openPreviewDialog}
@@ -38,53 +69,27 @@ const PreviewDialog = ({ openPreviewDialog, handleClose, data, task_type }) => {
 
       <DialogContent sx={{ height: "410px" }}>
         <DialogContentText id="alert-dialog-description">
-          {Previewdata?.data?.payload &&
-          Previewdata?.data?.payload.length > 0 ? (
-            Previewdata?.data?.payload.map((el, i) => {
-              return (
-                <Box
-                  key={i}
-                  id={`sub_${i}`}
-                  textAlign={"start"}
-                  sx={{
-                    mb: 2,
-                    padding: 2,
-                    border: "1px solid #000000",
-                    borderRadius: 2,
-                    width: "90%",
-                  }}
-                >
-                  {task_type === "TRANSCRIPTION_EDIT" ||
-                  task_type === "TRANSCRIPTION_REVIEW"
-                    ? el.text
-                    : el.target_text}
-                </Box>
-              );
-            })
-          ) : (
-            <Box
-              sx={{
-                // marginY: 2,
-                padding: 3,
-                border: "1px solid #000000",
-                borderRadius: 2,
-                width: "80%",
-              }}
-            ></Box>
-          )}
+          {previewdata.map((el, i) => {
+            return (
+              <Box
+                key={`sub-${i}`}
+                textAlign={"start"}
+                sx={{
+                  mb: 2,
+                  padding: 2,
+                  border: "1px solid #000000",
+                  borderRadius: 2,
+                  width: "90%",
+                }}
+              >
+                {taskType.includes("TRANSCRIPTION") ? el.text : el.target_text}
+              </Box>
+            );
+          })}
         </DialogContentText>
       </DialogContent>
-      <DialogActions sx={{ p: "20px" }}>
-        {/* <Button
-          variant="text"
-          onClick={handleClose}
-          sx={{ lineHeight: "1", borderRadius: "6px" }}
-        >
-          Close
-        </Button> */}
-      </DialogActions>
     </Dialog>
   );
 };
 
-export default PreviewDialog;
\ No newline at end of file
+export default PreviewDialog;
diff --git a/src/containers/Organization/OrgLevelTaskList.jsx b/src/containers/Organization/OrgLevelTaskList.jsx
index 8ce843c4..02c52f0c 100644
--- a/src/containers/Organization/OrgLevelTaskList.jsx
+++ b/src/containers/Organization/OrgLevelTaskList.jsx
@@ -79,7 +79,6 @@ import {
   FetchTranscriptExportTypesAPI,
   FetchTranslationExportTypesAPI,
   FetchVoiceoverExportTypesAPI,
-  FetchpreviewTaskAPI,
   GenerateTranslationOutputAPI,
   RegenerateResponseAPI,
   ReopenTaskAPI,
@@ -168,7 +167,6 @@ const OrgLevelTaskList = () => {
   const orgId = userData?.organization?.id;
 
   const apiStatus = useSelector((state) => state.apiStatus);
-  const previewData = useSelector((state) => state.getPreviewData?.data);
 
   //Fiters and Search
   const orgSelectedFilters = useSelector(
@@ -488,9 +486,6 @@ const OrgLevelTaskList = () => {
 
   const handlePreviewTask = async (id, taskType, targetlanguage) => {
     handleDialogOpen("previewDialog");
-
-    const taskObj = new FetchpreviewTaskAPI(id, taskType, targetlanguage);
-    dispatch(APITransport(taskObj));
   };
 
   const handleShowSearch = (col, event) => {
@@ -594,7 +589,7 @@ const OrgLevelTaskList = () => {
     const { tableData: data, rowIndex } = tableMeta;
     const selectedTask = data[rowIndex];
 
-    const { id, task_type, status, video, target_language } = selectedTask;
+    const { id, task_type, status } = selectedTask;
     setCurrentTaskDetails(selectedTask);
 
     switch (action) {
@@ -635,7 +630,7 @@ const OrgLevelTaskList = () => {
         break;
 
       case "Preview":
-        handlePreviewTask(video, task_type, target_language);
+        handlePreviewTask();
         break;
 
       case "Delete":
@@ -1241,8 +1236,9 @@ const OrgLevelTaskList = () => {
         <PreviewDialog
           openPreviewDialog={openDialogs.previewDialog}
           handleClose={() => handleDialogClose("previewDialog")}
-          data={previewData}
-          task_type={currentTaskDetails?.task_type}
+          taskType={currentTaskDetails?.task_type}
+          videoId={currentTaskDetails?.video}
+          targetLanguage={currentTaskDetails?.target_language}
         />
       )}
 
diff --git a/src/containers/Organization/Project/TaskList.jsx b/src/containers/Organization/Project/TaskList.jsx
index 2d3d95b4..c26a4dff 100644
--- a/src/containers/Organization/Project/TaskList.jsx
+++ b/src/containers/Organization/Project/TaskList.jsx
@@ -80,7 +80,6 @@ import {
   FetchTranscriptExportTypesAPI,
   FetchTranslationExportTypesAPI,
   FetchVoiceoverExportTypesAPI,
-  FetchpreviewTaskAPI,
   GenerateTranslationOutputAPI,
   RegenerateResponseAPI,
   ReopenTaskAPI,
@@ -178,7 +177,6 @@ const TaskList = () => {
   );
   const userData = useSelector((state) => state.getLoggedInUserDetails.data);
   const apiStatus = useSelector((state) => state.apiStatus);
-  const previewData = useSelector((state) => state.getPreviewData?.data);
   const selectedFilters = useSelector(
     (state) => state.taskFilters.selectedFilters
   );
@@ -588,11 +586,8 @@ const TaskList = () => {
     handleDialogClose("TaskReopenDialog");
   };
 
-  const handlePreviewTask = async (videoId, taskType, targetlanguage) => {
+  const handlePreviewTask = () => {
     handleDialogOpen("previewDialog");
-
-    const taskObj = new FetchpreviewTaskAPI(videoId, taskType, targetlanguage);
-    dispatch(APITransport(taskObj));
   };
 
   const generateTranslationCall = async (id, taskStatus) => {
@@ -695,7 +690,7 @@ const TaskList = () => {
     const { tableData: data, rowIndex } = tableMeta;
     const selectedTask = data[rowIndex];
 
-    const { id, task_type, status, video, target_language } = selectedTask;
+    const { id, task_type, status } = selectedTask;
     setCurrentTaskDetails(selectedTask);
 
     switch (action) {
@@ -736,7 +731,7 @@ const TaskList = () => {
         break;
 
       case "Preview":
-        handlePreviewTask(video, task_type, target_language);
+        handlePreviewTask();
         break;
 
       case "Delete":
@@ -1287,8 +1282,9 @@ const TaskList = () => {
         <PreviewDialog
           openPreviewDialog={openDialogs.previewDialog}
           handleClose={() => handleDialogClose("previewDialog")}
-          data={previewData}
-          task_type={currentTaskDetails?.task_type}
+          taskType={currentTaskDetails?.task_type}
+          videoId={currentTaskDetails?.video}
+          targetLanguage={currentTaskDetails?.target_language}
         />
       )}
 
diff --git a/src/containers/Organization/Video/components/SettingsButtonComponent.jsx b/src/containers/Organization/Video/components/SettingsButtonComponent.jsx
index 6395b178..9a79459b 100644
--- a/src/containers/Organization/Video/components/SettingsButtonComponent.jsx
+++ b/src/containers/Organization/Video/components/SettingsButtonComponent.jsx
@@ -1,4 +1,4 @@
-import React, { memo, useState, useEffect } from "react";
+import React, { memo, useState } from "react";
 import { useSelector } from "react-redux";
 import { fontMenu } from "utils";
 
@@ -26,8 +26,9 @@ import CheckIcon from "@mui/icons-material/Check";
 import UndoIcon from "@mui/icons-material/Undo";
 import RedoIcon from "@mui/icons-material/Redo";
 import SplitscreenIcon from "@mui/icons-material/Splitscreen";
-import { FindAndReplace } from "common";
+import { FindAndReplace, PreviewDialog } from "common";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import VisibilityIcon from "@mui/icons-material/Visibility";
 
 const anchorOrigin = {
   vertical: "top",
@@ -48,8 +49,6 @@ const SettingsButtonComponent = ({
   enableRTL_Typing,
   currentIndexToSplitTextBlock,
   setFontSize,
-  selection,
-  setselection,
   fontSize,
   saveTranscriptHandler,
   setOpenConfirmDialog,
@@ -66,12 +65,10 @@ const SettingsButtonComponent = ({
   handleInfoButtonClick,
 }) => {
   const classes = VideoLandingStyle();
-  // const dispatch = useDispatch();
 
   const [anchorElSettings, setAnchorElSettings] = useState(null);
   const [anchorElFont, setAnchorElFont] = useState(null);
-
-  // const [anchorElLimit, setAnchorElLimit] = useState(null);
+  const [openPreviewDialog, setOpenPreviewDialog] = useState(false);
 
   const taskData = useSelector((state) => state.getTaskDetails.data);
   const transcriptPayload = useSelector(
@@ -84,27 +81,6 @@ const SettingsButtonComponent = ({
     (state) => state.commonReducer.totalSentences
   );
 
-  // useEffect(()=>{
-  //   // if(textVal){
-  //   const textVal = document.getElementsByClassName(classes.boxHighlight)[0];
-  //     let cursorStart = textVal.selectionStart;
-  //     let cursorEnd = textVal.selectionEnd;
-  //     let selectedText = textVal.value.substring(cursorStart, cursorEnd)
-  //     if(selectedText!=""){
-  //       setselection(true)
-  //     }
-  //     else{
-  //       setselection(false)
-  //     }
-  //   // }
-  //  },[])
-
-  //  console.log(selection);
-
-   
-   
-
-
   const getDisbled = (flag) => {
     if (!transcriptPayload?.payload?.payload?.length) {
       return true;
@@ -135,6 +111,22 @@ const SettingsButtonComponent = ({
     return false;
   };
 
+  const handleScript = () => {
+    setAnchorElSettings(null);
+    setsubsuper(!subsuper);
+
+    if (taskData.task_type === "TRANSCRIPTION_EDIT") {
+      localStorage.setItem(
+        "subscriptSuperscriptPreferenceTranscript",
+        !subsuper
+      );
+    }
+
+    if (taskData.task_type === "TRANSLATION_EDIT") {
+      localStorage.setItem("subscriptSuperscriptPreferenceTanslate", !subsuper);
+    }
+  };
+
   return (
     <>
       {!taskData?.task_type?.includes("VOICEOVER") && showSplit && (
@@ -212,53 +204,42 @@ const SettingsButtonComponent = ({
             }
           />
         </MenuItem>
+
         <MenuItem>
           <FormControlLabel
             label="Subscript/Superscript"
-            control={
-              <Checkbox
-                checked={subsuper}
-                onChange={() => {
-                  setAnchorElSettings(null);
-                 // console.log(subsuper);
-                  setsubsuper(!subsuper);
-                  if(taskData.task_type=="TRANSCRIPTION_EDIT"){
-                  localStorage.setItem('subscriptSuperscriptPreferenceTranscript', !subsuper);
-                  }
-                  if(taskData.task_type=="TRANSLATION_EDIT"){
-                    localStorage.setItem('subscriptSuperscriptPreferenceTanslate', !subsuper);
-                    }
-                //  console.log(subsuper);
-                }}
-              />
-            }
+            control={<Checkbox checked={subsuper} onChange={handleScript} />}
           />
         </MenuItem>
       </Menu>
-      {subsuper === true  ? (
-        <Divider orientation="vertical" className={classes.rightPanelDivider} />
-      ) : null}
 
-      {subsuper === true  ? (
-        <Tooltip title="SubScript" placement="bottom">
-          <IconButton
-            className={classes.rightPanelBtnGrp}
-            onClick={() => handleSubscript()}
-          >
-            <SubscriptIcon className={classes.rightPanelSvg} />
-          </IconButton>
-        </Tooltip>
-      ) : null}
+      {subsuper && (
+        <>
+          <Divider
+            orientation="vertical"
+            className={classes.rightPanelDivider}
+          />
 
-      {subsuper===true?<Tooltip title="SuperScript" placement="bottom">
-        <IconButton
-          className={classes.rightPanelBtnGrp}
-          sx={{ marginLeft: "5px" }}
-          onClick={() => handleSuperscript(currentIndexToSplitTextBlock)}
-        >
-          <SuperscriptIcon className={classes.rightPanelSvg}  />
-        </IconButton>
-      </Tooltip>:null}
+          <Tooltip title="SubScript" placement="bottom">
+            <IconButton
+              className={classes.rightPanelBtnGrp}
+              onClick={() => handleSubscript()}
+            >
+              <SubscriptIcon className={classes.rightPanelSvg} />
+            </IconButton>
+          </Tooltip>
+
+          <Tooltip title="SuperScript" placement="bottom">
+            <IconButton
+              className={classes.rightPanelBtnGrp}
+              sx={{ marginLeft: "5px" }}
+              onClick={() => handleSuperscript(currentIndexToSplitTextBlock)}
+            >
+              <SuperscriptIcon className={classes.rightPanelSvg} />
+            </IconButton>
+          </Tooltip>
+        </>
+      )}
 
       <Divider orientation="vertical" className={classes.rightPanelDivider} />
 
@@ -324,6 +305,17 @@ const SettingsButtonComponent = ({
         </IconButton>
       </Tooltip>
 
+      {!taskData?.task_type?.includes("VOICEOVER") && (
+        <Tooltip title="Subtitle Preview" placement="bottom">
+          <IconButton
+            className={classes.rightPanelBtnGrp}
+            onClick={() => setOpenPreviewDialog(true)}
+          >
+            <VisibilityIcon className={classes.rightPanelSvg} />
+          </IconButton>
+        </Tooltip>
+      )}
+
       <Tooltip title="Complete" placement="bottom">
         <IconButton
           className={classes.rightPanelBtnGrp}
@@ -359,6 +351,16 @@ const SettingsButtonComponent = ({
           </IconButton>
         </Tooltip>
       )}
+
+      {openPreviewDialog && (
+        <PreviewDialog
+          openPreviewDialog={openPreviewDialog}
+          handleClose={() => setOpenPreviewDialog(false)}
+          taskType={taskData?.task_type}
+          videoId={taskData?.video}
+          targetLanguage={taskData?.target_language}
+        />
+      )}
     </>
   );
 };
diff --git a/src/redux/actions/api/Project/FetchPreviewTask.js b/src/redux/actions/api/Project/FetchPreviewTask.js
index 77dbe183..a77aab7d 100644
--- a/src/redux/actions/api/Project/FetchPreviewTask.js
+++ b/src/redux/actions/api/Project/FetchPreviewTask.js
@@ -3,12 +3,22 @@ import ENDPOINTS from "../../../../config/apiendpoint";
 import C from "../../../constants";
 
 export default class FetchpreviewTaskAPI extends API {
-  constructor( videoId,Task_type,targetLanguage,timeout = 2000) {
+  constructor(videoId, taskType, targetLanguage, timeout = 2000) {
     super("GET", timeout, false);
+
     this.type = C.GET_PREVIEW_TASK;
-    this.payloadEndpoint = (Task_type === "TRANSCRIPTION_EDIT" || Task_type === "TRANSCRIPTION_REVIEW") ? ENDPOINTS.transcript : ENDPOINTS.translation
-    this.queryString = (Task_type === "TRANSCRIPTION_EDIT" || Task_type === "TRANSCRIPTION_REVIEW") ? " ":`&target_language=${targetLanguage}`;
-    this.endpoint = `${super.apiEndPointAuto()}${this.payloadEndpoint}?video_id=${videoId}${this.queryString}`
+
+    this.payloadEndpoint = taskType.includes("TRANSCRIPTION")
+      ? ENDPOINTS.transcript
+      : ENDPOINTS.translation;
+
+    this.queryString = taskType.includes("TRANSCRIPTION")
+      ? ""
+      : `&target_language=${targetLanguage}`;
+
+    this.endpoint = `${super.apiEndPointAuto()}${
+      this.payloadEndpoint
+    }?video_id=${videoId}${this.queryString}`;
   }
 
   processResponse(res) {