diff --git a/src/ui/pages/component/common/Header.jsx b/src/ui/pages/component/common/Header.jsx
index af78c399..5f272b6d 100644
--- a/src/ui/pages/component/common/Header.jsx
+++ b/src/ui/pages/component/common/Header.jsx
@@ -1139,14 +1139,6 @@ console.log(unseenNotifications,'uuu');
 
         />
       </Modal>
-
-      {/* {showRomanisedTransliterationModel && 
-        <RomanisedTransliteration 
-        open={showRomanisedTransliterationModel}
-        onClose={() => setShowRomanisedTransliterationModel(false)}
-        setShowRomanisedTransliterationModel = {setShowRomanisedTransliterationModel}
-        />
-      } */}
     </Grid>
   );
 };
diff --git a/src/ui/pages/container/Label-Studio/LSF.jsx b/src/ui/pages/container/Label-Studio/LSF.jsx
index 78ba92fb..df2a61cb 100644
--- a/src/ui/pages/container/Label-Studio/LSF.jsx
+++ b/src/ui/pages/container/Label-Studio/LSF.jsx
@@ -264,11 +264,6 @@ const LabelStudioWrapper = ({
       }));});
   }, []);
 
-  // useEffect(() => {
-  //   const showModel = localStorage.getItem("showRomanisedTransliterationModel") === "true";
-  //   setShowRomanisedTransliterationModel(showModel);
-  // }, [localStorage]);
-
   const tasksComplete = (id) => {
     if (id) {
       resetNotes();
@@ -1492,7 +1487,6 @@ export default function LSF() {
   useEffect(() => {
     fetchAnnotation(taskId).then((data) => {
       if (data && Array.isArray(data) && data.length > 0) {
-        // console.log(annotationNotesRef);
         annotationNotesRef.current.value = data[0].annotation_notes ?? "";
         reviewNotesRef.current.value = data[0].review_notes ?? "";
         try {
@@ -1500,7 +1494,6 @@ export default function LSF() {
             annotationNotesRef.current.value !== ""
               ? JSON.parse(annotationNotesRef.current.value)
               : "";
-          // console.log(newDelta2);
           annotationNotesRef.current.getEditor().setContents(newDelta2);
         } catch (err) {
           if (err instanceof SyntaxError) {
diff --git a/src/ui/pages/container/Label-Studio/ReviewLSF.jsx b/src/ui/pages/container/Label-Studio/ReviewLSF.jsx
index cdf5677b..e985f59a 100644
--- a/src/ui/pages/container/Label-Studio/ReviewLSF.jsx
+++ b/src/ui/pages/container/Label-Studio/ReviewLSF.jsx
@@ -58,7 +58,7 @@ import CustomButton from "../../component/common/Button";
 import CircularProgress from '@mui/material/CircularProgress';
 import LanguageCode from "../../../../utils/LanguageCode";
 import PostTransliterationForLogging from "../../../../redux/actions/api/Annotation/PostTransliterationForLogging";
-
+import RomanisedTransliteration from "../Transliteration/RomanisedTransliteration";
 const StyledMenu = styled((props) => (
   <Menu
     elevation={0}
@@ -265,7 +265,14 @@ const LabelStudioWrapper = ({
   const [filterMessage, setFilterMessage] = useState(null);
   const [disableButton, setDisableButton] = useState(false);
   const [assignedUsers, setAssignedUsers] = useState(null);
-  const [translitrationData, setTransliterationData] = useState([]);
+  const [romanisedTransliterationData, setRomanisedTransliterationData] = useState({
+    timestamp: '',
+    error: '',
+    input: '',
+    romanised_transliteration: '',
+    success: false
+  });
+  const [showRomanisedTransliterationModel, setShowRomanisedTransliterationModel] = useState(true);
   const [showSpinner , setShowSpinner] = useState(false);
   const [originalRomanisedText, setOriginalRomanisedText] = useState("");
   const [editedRomanisedText, setEditedRomanisedText] = useState("")
@@ -1174,14 +1181,13 @@ useEffect(() => {
     if (taskId) {
       fetchAnnotationTask();
     }
-  }, [taskId]);
-
+  }, [taskId]); 
   const fetchAnnotationTask = async () => {
     const res = await fetchAnnotation(taskId);
     // console.log(res);
     if(res[0]?.result[0])
     { 
-      setIndicText(res[0]?.result[0]?.value?.text);
+      setIndicText(res[0]?.result[0]?.value?.text[0]);
     }
     setTaskData(res);
     setAnnotations(res?.annotations);
@@ -1189,16 +1195,15 @@ useEffect(() => {
 
   // create a handleSubmitRomanisedText function
   const handleSubmitRomanisedText = async () => {
-    if(taskData?.data?.input_text && taskData?.data?.input_language && taskData?.data?.output_language){
+    if(taskData?.data?.input_text && taskData?.data?.output_language){
       const language = LanguageCode.languages 
       let output_lng_code = ''
 
       language.filter((lang) => {
-        if(lang.label === taskData?.data?.input_language){
+        if(lang.label === taskData?.data?.output_language){
           output_lng_code= lang.code
         }
       });
-
       // Create a new instance of the class
       const postTransliterationForLogging = new PostTransliterationForLogging(
         taskData?.data?.input_text, 
@@ -1210,7 +1215,15 @@ useEffect(() => {
 
       const res = dispatch(APITransport(postTransliterationForLogging));
       if(res){
-        setTransliterationData([]);
+        setRomanisedTransliterationData(
+          {
+            timestamp: '',
+            error: '',
+            input: '',
+            romanised_transliteration: '',
+            success: false
+          }
+        )
         setOriginalRomanisedText("");
         setEditedRomanisedText("");
         setSnackbarInfo({
@@ -1234,22 +1247,21 @@ useEffect(() => {
   const handleTranslitrationOnClick = async () => {
     setShowSpinner(true)
     const language = LanguageCode.languages 
-    let input_lng_code = ''
     let output_lng_code = ''
+
     language.filter((lang) => {
-      if(lang.label === taskData?.data?.input_language){
-        input_lng_code= lang.code
-      }
-      if(lang.label === taskData?.data?.output_language){
+      if(lang.label == taskData?.data?.output_language){
         output_lng_code = lang.code
       } 
     })
-    const res = await fetchTransliteration(taskData?.data?.input_text,input_lng_code, output_lng_code);
-    if(res && res?.output) {
-      setTransliterationData(res);
-      if(res?.output)
+    try {
+
+    const res = await fetchTransliteration(indicText, output_lng_code);
+    if(res?.success && res?.romanised_transliteration) {
+      setRomanisedTransliterationData(res);
+      if(res?.romanised_transliteration)
       {
-        setOriginalRomanisedText(res?.output.map((item) => item.target).join(" "));
+        setOriginalRomanisedText(res.romanised_transliteration);
       }
       setSnackbarInfo({
         open: true,
@@ -1258,6 +1270,16 @@ useEffect(() => {
       });
       setShowSpinner(false)
     }
+  }
+  catch (error) {
+    setSnackbarInfo({
+      open: true,
+      message: "Error in fetching romanised text",
+      variant: "error",
+    });
+    setShowSpinner(false)
+  }
+
   }
   useEffect(() => {
     if(originalRomanisedText) {
@@ -1265,9 +1287,41 @@ useEffect(() => {
     }
   }, [originalRomanisedText]);
 
+  useEffect(() => {
+    let annotation = lsfRef?.current?.store?.annotationStore?.selected;
+      let temp;
+      for (let i = 0; i < annotations?.length; i++) {
+        if (
+          !annotations[i]?.result?.length ||
+          annotation.serializeAnnotation()[0].id ===
+            annotations[i]?.result[0].id
+        ) {
+          temp = annotation.serializeAnnotation();
+          if (annotations[i]?.annotation_type !== 1) continue;
+          for (let i = 0; i < temp?.length; i++) {
+            if(temp[i].type === "relation"){
+              continue;
+            }else if (temp[i]?.value.text) {
+              temp[i].value.text = [temp[i].value.text[0]];
+            }
+          }          
+          if(temp[0]?.value?.text[0]?.length >0){
+            setIndicText(temp[0]?.value?.text[0])
+          }
+        }
+        }
+  }, [annotations, fetchTransliteration, handleSubmitRomanisedText]);
+
   const handleEditableRomanisedText =(e)=>{
     setEditedRomanisedText(e.target.value)
   }
+
+  // call the handleTransliteration for first time if the indic text is present 
+  useEffect(() => {
+    if(indicText){
+      handleTranslitrationOnClick()
+    }
+  }, [indicText]);
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event) => {
@@ -1518,41 +1572,22 @@ useEffect(() => {
         >
           {tagSuggestionList}
         </Popover>
-        {!loader&&  ProjectDetails?.project_type?.includes("ContextualTranslationEditing") && 
-        <Grid container spacing={2}  style={{
-          display: "flex", flexDirection: "column", justifyContent: "right", alignItems: "flex-end", padding:"1%", width:"100%", alignItems:"flex-end", zIndex:"10", marginTop:"-30px"
-        }}>
-          <Grid item xs={12}  style={{display:"flex", gap:"5px"}}>
-            <CustomButton
-              startIcon={showSpinner && <CircularProgress size="0.8rem" color="secondary" />}
-              onClick={handleTranslitrationOnClick}
-              label="Check Transliteration"
-              disabled={showSpinner}
-            />
-            {originalRomanisedText &&
-            <CustomButton
-              startIcon={showSpinner && <CircularProgress size="0.8rem" color="secondary" />}
-              onClick={handleSubmitRomanisedText}
-              label="Submit"
-            />
-            }
-          </Grid>
-
-          {translitrationData?.output && 
-          <Grid item xs={12} style={{width:"400px"}} className="ant-form-item-control-input-content">
-          <textarea rows="4" id="outlined-multiline-static"  
-            className="ant-input is-search"
-            label="Output tranliteration"
-            style={{width:"100%", height:"120px", lineHeight:"1.5715", maxWidth:"100%", minHeight:"32px", transition:"all .3s, height 0s", verticalAlign:"bottom"}}  
-            value={editedRomanisedText}
-            onChange = {handleEditableRomanisedText}
-          /> 
-
-
-
-          </Grid> 
-          }
-        </Grid>
+         
+        {!loader &&  showRomanisedTransliterationModel && 
+          <RomanisedTransliteration
+            open = {localStorage.getItem("showRomanisedTransliterationModel") == "true"}
+            onClose = {() => {
+              setShowRomanisedTransliterationModel(false) 
+            }}
+            setShowRomanisedTransliterationModel = {setShowRomanisedTransliterationModel}
+            indicText={indicText}
+            originalRomanisedText={originalRomanisedText}
+            editedRomanisedText={editedRomanisedText}
+            handleEditableRomanisedText={handleEditableRomanisedText}
+            handleTranslitrationOnClick={handleTranslitrationOnClick}
+            handleSubmitRomanisedText={handleSubmitRomanisedText}
+            showSpinner={showSpinner}
+          />
         }
       </Box>
       {!loader && ProjectDetails?.project_type?.includes("OCRSegmentCategorization") && 
diff --git a/src/ui/pages/container/Label-Studio/SuperCheckerLSF.jsx b/src/ui/pages/container/Label-Studio/SuperCheckerLSF.jsx
index b361981c..6fb67d28 100644
--- a/src/ui/pages/container/Label-Studio/SuperCheckerLSF.jsx
+++ b/src/ui/pages/container/Label-Studio/SuperCheckerLSF.jsx
@@ -57,7 +57,7 @@ import CustomButton from "../../component/common/Button";
 import CircularProgress from '@mui/material/CircularProgress';
 import LanguageCode from "../../../../utils/LanguageCode";
 import PostTransliterationForLogging from "../../../../redux/actions/api/Annotation/PostTransliterationForLogging";
-
+import RomanisedTransliteration from "../Transliteration/RomanisedTransliteration";
 const StyledMenu = styled((props) => (
   <Menu
     elevation={0}
@@ -188,11 +188,20 @@ const LabelStudioWrapper = ({
     useState(null);
   const [tagSuggestionList, setTagSuggestionList] = useState();
   const [assignedUsers, setAssignedUsers] = useState(null);
-  const [translitrationData, setTransliterationData] = useState([]);
+
+  const [romanisedTransliterationData, setRomanisedTransliterationData] = useState({
+    timestamp: '',
+    error: '',
+    input: '',
+    romanised_transliteration: '',
+    success: false
+  });
+  const [showRomanisedTransliterationModel, setShowRomanisedTransliterationModel] = useState(true);
   const [showSpinner , setShowSpinner] = useState(false);
   const [originalRomanisedText, setOriginalRomanisedText] = useState("");
   const [editedRomanisedText, setEditedRomanisedText] = useState("")
   const [indicText, setIndicText] = useState("");
+   //console.log("projectId, taskId", projectId, taskId);
 
   useEffect(() => {
     setPredictions(taskData?.data?.ocr_prediction_json);
@@ -883,13 +892,13 @@ useEffect(() => {
     if (taskId) {
       fetchAnnotationTask();
     }
-  }, [taskId]);
-
+  }, [taskId]); 
   const fetchAnnotationTask = async () => {
     const res = await fetchAnnotation(taskId);
+    // console.log(res);
     if(res[0]?.result[0])
     { 
-      setIndicText(res[0]?.result[0]?.value?.text);
+      setIndicText(res[0]?.result[0]?.value?.text[0]);
     }
     setTaskData(res);
     setAnnotations(res?.annotations);
@@ -897,16 +906,15 @@ useEffect(() => {
 
   // create a handleSubmitRomanisedText function
   const handleSubmitRomanisedText = async () => {
-    if(taskData?.data?.input_text && taskData?.data?.input_language && taskData?.data?.output_language){
+    if(taskData?.data?.input_text && taskData?.data?.output_language){
       const language = LanguageCode.languages 
       let output_lng_code = ''
 
       language.filter((lang) => {
-        if(lang.label === taskData?.data?.input_language){
+        if(lang.label === taskData?.data?.output_language){
           output_lng_code= lang.code
         }
       });
-
       // Create a new instance of the class
       const postTransliterationForLogging = new PostTransliterationForLogging(
         taskData?.data?.input_text, 
@@ -918,7 +926,15 @@ useEffect(() => {
 
       const res = dispatch(APITransport(postTransliterationForLogging));
       if(res){
-        setTransliterationData([]);
+        setRomanisedTransliterationData(
+          {
+            timestamp: '',
+            error: '',
+            input: '',
+            romanised_transliteration: '',
+            success: false
+          }
+        )
         setOriginalRomanisedText("");
         setEditedRomanisedText("");
         setSnackbarInfo({
@@ -942,22 +958,21 @@ useEffect(() => {
   const handleTranslitrationOnClick = async () => {
     setShowSpinner(true)
     const language = LanguageCode.languages 
-    let input_lng_code = ''
     let output_lng_code = ''
+
     language.filter((lang) => {
-      if(lang.label === taskData?.data?.input_language){
-        input_lng_code= lang.code
-      }
-      if(lang.label === taskData?.data?.output_language){
+      if(lang.label == taskData?.data?.output_language){
         output_lng_code = lang.code
       } 
     })
-    const res = await fetchTransliteration(taskData?.data?.input_text,input_lng_code, output_lng_code);
-    if(res && res?.output) {
-      setTransliterationData(res);
-      if(res?.output)
+    try {
+
+    const res = await fetchTransliteration(indicText, output_lng_code);
+    if(res?.success && res?.romanised_transliteration) {
+      setRomanisedTransliterationData(res);
+      if(res?.romanised_transliteration)
       {
-        setOriginalRomanisedText(res?.output.map((item) => item.target).join(" "));
+        setOriginalRomanisedText(res.romanised_transliteration);
       }
       setSnackbarInfo({
         open: true,
@@ -966,6 +981,16 @@ useEffect(() => {
       });
       setShowSpinner(false)
     }
+  }
+  catch (error) {
+    setSnackbarInfo({
+      open: true,
+      message: "Error in fetching romanised text",
+      variant: "error",
+    });
+    setShowSpinner(false)
+  }
+
   }
   useEffect(() => {
     if(originalRomanisedText) {
@@ -973,6 +998,38 @@ useEffect(() => {
     }
   }, [originalRomanisedText]);
 
+  useEffect(() => {
+    let annotation = lsfRef?.current?.store?.annotationStore?.selected;
+      let temp;
+      for (let i = 0; i < annotations?.length; i++) {
+        if (
+          !annotations[i]?.result?.length ||
+          annotation.serializeAnnotation()[0].id ===
+            annotations[i]?.result[0].id
+        ) {
+          temp = annotation.serializeAnnotation();
+          if (annotations[i]?.annotation_type !== 1) continue;
+          for (let i = 0; i < temp?.length; i++) {
+            if(temp[i].type === "relation"){
+              continue;
+            }else if (temp[i]?.value.text) {
+              temp[i].value.text = [temp[i].value.text[0]];
+            }
+          }          
+          if(temp[0]?.value?.text[0]?.length >0){
+            setIndicText(temp[0]?.value?.text[0])
+          }
+        }
+        }
+  }, [annotations, fetchTransliteration, handleSubmitRomanisedText]);
+
+
+  // call the handleTransliteration for first time if the indic text is present 
+  useEffect(() => {
+    if(indicText){
+      handleTranslitrationOnClick()
+    }
+  }, [indicText]);
   const handleEditableRomanisedText =(e)=>{
     setEditedRomanisedText(e.target.value)
   }
@@ -1260,38 +1317,21 @@ useEffect(() => {
           {tagSuggestionList}
         </Popover>
 
-        {!loader&&  ProjectDetails?.project_type?.includes("ContextualTranslationEditing") && 
-        <Grid container spacing={2}  style={{
-          display: "flex", flexDirection: "column", justifyContent: "right", alignItems: "flex-end", padding:"1%", width:"100%", alignItems:"flex-end", zIndex:"10", marginTop:"-30px"
-        }}>
-          <Grid item xs={12}  style={{display:"flex", gap:"5px"}}>
-            <CustomButton
-              startIcon={showSpinner && <CircularProgress size="0.8rem" color="secondary" />}
-              onClick={handleTranslitrationOnClick}
-              label="Check Transliteration"
-              disabled={showSpinner}
-            />
-            {originalRomanisedText &&
-            <CustomButton
-              startIcon={showSpinner && <CircularProgress size="0.8rem" color="secondary" />}
-              onClick={handleSubmitRomanisedText}
-              label="Submit"
-            />
-            }
-          </Grid>
-
-          {translitrationData?.output && 
-          <Grid item xs={12} style={{width:"400px"}} className="ant-form-item-control-input-content">
-          <textarea rows="4" id="outlined-multiline-static"  
-            className="ant-input is-search"
-            label="Output tranliteration"
-            style={{width:"100%", height:"120px", lineHeight:"1.5715", maxWidth:"100%", minHeight:"32px", transition:"all .3s, height 0s", verticalAlign:"bottom"}}  
-            value={editedRomanisedText}
-            onChange = {handleEditableRomanisedText}
-          /> 
-          </Grid> 
-          }
-        </Grid>
+        {!loader &&  showRomanisedTransliterationModel && 
+          <RomanisedTransliteration
+            open = {localStorage.getItem("showRomanisedTransliterationModel") == "true"}
+            onClose = {() => {
+              setShowRomanisedTransliterationModel(false) 
+            }}
+            setShowRomanisedTransliterationModel = {setShowRomanisedTransliterationModel}
+            indicText={indicText}
+            originalRomanisedText={originalRomanisedText}
+            editedRomanisedText={editedRomanisedText}
+            handleEditableRomanisedText={handleEditableRomanisedText}
+            handleTranslitrationOnClick={handleTranslitrationOnClick}
+            handleSubmitRomanisedText={handleSubmitRomanisedText}
+            showSpinner={showSpinner}
+          />
         }
       </Box>
       {!loader && ProjectDetails?.project_type?.includes("OCRSegmentCategorization") &&