diff --git a/src/app/new-project/newproject.js b/src/app/new-project/newproject.js
index 9efbe322..a0b685bb 100644
--- a/src/app/new-project/newproject.js
+++ b/src/app/new-project/newproject.js
@@ -134,6 +134,7 @@ const CreateProject = () => {
   const [tableData, setTableData] = useState([]);
   const [searchAnchor, setSearchAnchor] = useState(null);
   const [is_published, setIsPublished] = useState(false);
+  const [conceal, setconceal] = useState(false);
   const [selectedFilters, setsSelectedFilters] = useState({});
   const [createannotationsAutomatically, setsCreateannotationsAutomatically] =
     useState("none");
@@ -393,6 +394,10 @@ const CreateProject = () => {
   const handleChangeIsPublished = (event) => {
     setIsPublished(event.target.checked);
   };
+  const handleChangeconceal = (event) => {
+    setconceal(event.target.checked);
+  };
+
 
   useEffect(() => {
     setTotalDataitems(DataItems.count);
@@ -571,6 +576,7 @@ const CreateProject = () => {
       is_published: is_published,
       password: passwordForProjects,
       metadata_json: questionsJSON,
+      conceal:conceal
     };
     console.log(newProject);
 
@@ -606,6 +612,7 @@ const CreateProject = () => {
     is_published: is_published,
     password: passwordForProjects,
     metadata_json: questionsJSON,
+    conceal:conceal
   };
   console.log(newProject);
 
@@ -1502,7 +1509,20 @@ const CreateProject = () => {
                       sx={{ mt: 2, ml: 2, mb: 2 }}
                     />
                   </Grid>
-                ) : null}
+                ) :null
+                }
+                            <Grid container direction="row" alignItems="center">
+                <Typography gutterBottom components="div">
+                  Hide Details :
+                </Typography>
+                <Switch
+                  checked={conceal}
+                  onChange={handleChangeconceal}
+                  inputProps={{ "aria-label": "controlled" }}
+                  sx={{ mt: 2, ml: 2, mb: 2 }}
+                />
+              </Grid>
+
               </>
             )}
             <Grid
diff --git a/src/app/ui/pages/chat/AnnotatePage.jsx b/src/app/ui/pages/chat/AnnotatePage.jsx
index dd098a95..deb27ec3 100644
--- a/src/app/ui/pages/chat/AnnotatePage.jsx
+++ b/src/app/ui/pages/chat/AnnotatePage.jsx
@@ -1,6 +1,6 @@
 "use client";
 import "./chat.css";
-import { useState, useRef, useEffect, LegacyRef,memo } from "react";
+import { useState, useRef, useEffect, LegacyRef, memo } from "react";
 import {
   Grid,
   Box,
@@ -161,8 +161,8 @@ const AnnotatePage = () => {
     "script",
   ];
 
-  const formatResponse = (response,isLast) => {
-    if (ProjectDetails?.metadata_json?.blank_response==true && isLast) {
+  const formatResponse = (response) => {
+    if (!response) {
       return [
         {
           type: "text",
@@ -170,13 +170,11 @@ const AnnotatePage = () => {
         },
       ];
     }
+  
     response = String(response);
     const output = [];
     let count = 0;
     
-  
-console.log(output,"kk");
-
     while (response) {
       response = response.trim();
       let index = response.indexOf("```");
@@ -444,14 +442,13 @@ console.log(output,"kk");
       clear_conversation: value === "delete",
     };
 
-
     if (
       ["draft", "skipped", "delete", "labeled", "delete-pair"].includes(value)
     ) {
       if (!["draft", "skipped", "delete", "delete-pair"].includes(value)) {
         console.log("answered variable: ");
         console.log(chatHistory.length);
-        
+
         if (
           (ProjectDetails.project_type == "ModelInteractionEvaluation" ||
             ProjectDetails.project_type == "MultipleInteractionEvaluation") &&
@@ -466,10 +463,12 @@ console.log(output,"kk");
           setLoading(false);
           setShowNotes(false);
           return;
-        }
-        else if(ProjectDetails.project_type == "InstructionDrivenChat"&&chatHistory.length==0) {
+        } else if (
+          ProjectDetails.project_type == "InstructionDrivenChat" &&
+          chatHistory.length == 0
+        ) {
           console.log(chatHistory);
-          
+
           setSnackbarInfo({
             open: true,
             message: "Please enter prompt",
@@ -478,7 +477,6 @@ console.log(output,"kk");
           setLoading(false);
           setShowNotes(false);
           return;
-
         }
       }
       const TaskObj = new PatchAnnotationAPI(id, PatchAPIdata);
@@ -512,13 +510,12 @@ console.log(output,"kk");
         }
         value === "delete"
           ? (setSnackbarInfo({
-            open: true,
-            message: "Chat history has been cleared successfully!",
-            variant: "success",
-          }),
-          await getAnnotationsTaskData(taskId),
-          await getTaskData(taskId)
-          )
+              open: true,
+              message: "Chat history has been cleared successfully!",
+              variant: "success",
+            }),
+            await getAnnotationsTaskData(taskId),
+            await getTaskData(taskId))
           : value === "delete-pair"
             ? setSnackbarInfo({
                 open: true,
@@ -530,7 +527,7 @@ console.log(output,"kk");
                 message: resp?.message,
                 variant: "success",
               });
-              setLoading(false);
+        setLoading(false);
       } else {
         setAutoSave(true);
         setSnackbarInfo({
@@ -579,7 +576,7 @@ console.log(output,"kk");
     };
   }, [taskId]);
   const filterAnnotations = (annotations, user) => {
-    setLoading(true)
+    setLoading(true);
     let disableSkip = false;
     let disableUpdate = false;
     let disableDraft = false;
@@ -675,7 +672,7 @@ console.log(output,"kk");
     setDisableUpdateButton(disableUpdate);
     setdisableSkipButton(disableSkip);
     setFilterMessage(Message);
-    setLoading(false)
+    setLoading(false);
 
     return [
       filteredAnnotations,
@@ -724,9 +721,12 @@ console.log(output,"kk");
     case "InstructionDrivenChat":
       componentToRender = (
         <InstructionDrivenChatPage
-        key={`annotations-${annotations?.length}-${
-          annotations?.[0]?.id || "default"
-        }`}          handleClick={handleAnnotationClick}
+          key={
+            annotations?.length > 0
+              ? `annotations-${annotations[0]?.id}`
+              : "annotations-default"
+          }
+          handleClick={handleAnnotationClick}
           chatHistory={chatHistory}
           setChatHistory={setChatHistory}
           formatResponse={formatResponse}
@@ -745,9 +745,11 @@ console.log(output,"kk");
     case "ModelInteractionEvaluation":
       componentToRender = (
         <ModelInteractionEvaluation
-          key={`annotations-${annotations?.length}-${
-            annotations?.[0]?.id || "default"
-          }`}
+          key={
+            annotations?.length > 0
+              ? `annotations-${annotations[0]?.id}`
+              : "annotations-default"
+          }
           setCurrentInteraction={setCurrentInteraction}
           currentInteraction={currentInteraction}
           interactions={interactions}
@@ -766,9 +768,11 @@ console.log(output,"kk");
     case "MultipleInteractionEvaluation":
       componentToRender = (
         <PreferenceRanking
-          key={`annotations-${annotations?.length}-${
-            annotations?.[0]?.id || "default"
-          }`}
+          key={
+            annotations?.length > 0
+              ? `annotations-${annotations[0]?.id}`
+              : "annotations-default"
+          }
           setCurrentInteraction={setCurrentInteraction}
           currentInteraction={currentInteraction}
           interactions={interactions}
@@ -823,14 +827,12 @@ console.log(output,"kk");
     <>
       {loading && <Spinner />}
       <div id="top" ref={topref}></div>
-      <Grid container spacing={2}>
+      <Grid container>
         {renderSnackBar()}
         <Grid item>
           <Box
             sx={{
-              // borderRadius: "20px",
-              padding: "10px",
-              marginLeft: "5px",
+              padding: "0px 10px",
             }}
           >
             <Button
@@ -838,7 +840,12 @@ console.log(output,"kk");
               startIcon={<ArrowBackIcon />}
               variant="contained"
               color="primary"
-              sx={{ mt: 2 }}
+              sx={{
+                px: { xs: 2, sm: 3, md: 4 },
+                py: { xs: 1, sm: 1.5, md: 2 },
+                fontSize: { xs: "0.75rem", sm: "0.875rem", md: "1rem" },
+                minWidth: { xs: "120px", sm: "150px", md: "180px" },
+              }}
               onClick={() => {
                 if (typeof window !== "undefined") {
                   localStorage.removeItem("labelAll");
@@ -854,19 +861,21 @@ console.log(output,"kk");
         <Grid item xs={12}>
           <Box
             sx={{
-              // borderRadius: "20px",
-              padding: "10px",
-              marginTop: "5px",
-              marginBottom: "5px",
-              marginLeft: "5px",
+              padding: "0px 10px",
             }}
           >
-            {/* ( */}
             <Button
               endIcon={showNotes ? <ArrowRightIcon /> : <ArrowDropDown />}
               variant="contained"
               color={reviewtext.trim().length === 0 ? "primary" : "success"}
               onClick={handleCollapseClick}
+              sx={{
+                mt: 2,
+                px: { xs: 2, sm: 3, md: 4 },
+                py: { xs: 1, sm: 1.5, md: 2 },
+                fontSize: { xs: "0.75rem", sm: "0.875rem", md: "1rem" },
+                minWidth: { xs: "120px", sm: "150px", md: "180px" },
+              }}
               style={{
                 backgroundColor:
                   reviewtext.trim().length === 0 ? "#bf360c" : "green",
@@ -922,24 +931,24 @@ console.log(output,"kk");
               }}
             >
               {/* <Glossary taskData={taskData} /> */}
-            {/* </div> */} 
+            {/* </div> */}
           </Box>
           <Grid
             container
             justifyContent="center"
-            spacing={3}
             style={{
               display: "flex",
               width: "100%",
-              marginTop: "3px",
-              marginBottom: "25px",
+              padding: "16px",
+              gap: "0.5rem",
             }}
           >
             <Grid item>
-              <LightTooltip                 title={
+              <LightTooltip
+                title={
                   <div>
                     <div>
-                      {Array.isArray(assignedUsers)
+                      {ProjectDetails?.conceal==false&&Array.isArray(assignedUsers)
                         ? assignedUsers.join(", ")
                         : assignedUsers || "No assigned users"}
                     </div>
@@ -950,14 +959,16 @@ console.log(output,"kk");
                         textAlign: "center",
                       }}
                     >
-                          {annotations[0]?.annotation_type ==1 && `ANNOTATION ID: ${annotations[0]?.id}`}
-    {annotations[0]?.annotation_type ==2 && `REVIEW ID: ${annotations[0]?.id}`}
-    {annotations[0]?.annotation_type ==3 && `SUPERCHECK ID: ${annotations[0]?.id}`}
-
+                      {annotations[0]?.annotation_type == 1 &&
+                        `ANNOTATION ID: ${annotations[0]?.id}`}
+                      {annotations[0]?.annotation_type == 2 &&
+                        `REVIEW ID: ${annotations[0]?.id}`}
+                      {annotations[0]?.annotation_type == 3 &&
+                        `SUPERCHECK ID: ${annotations[0]?.id}`}
                     </div>
                   </div>
                 }
->
+              >
                 <Button
                   type="default"
                   className="lsf-button"
@@ -1001,7 +1012,7 @@ console.log(output,"kk");
                         )
                       }
                       style={{
-                        minWidth: "150px",
+                        // minWidth: "150px",
                         color: "black",
                         borderRadius: "5px",
                         border: "0px",
@@ -1033,13 +1044,13 @@ console.log(output,"kk");
                           Annotation.lead_time,
                         )
                       }
+                      sx={{
+                        fontSize: { xs: "0.75rem", sm: "0.875rem", md: "1rem" },
+                      }}
                       style={{
-                        minWidth: "150px",
                         color: "black",
                         borderRadius: "5px",
                         border: "0px",
-                        paddingTop: 2,
-                        paddingBottom: 2,
                         backgroundColor: "#ffe0b2",
                       }}
                     >
@@ -1056,7 +1067,7 @@ console.log(output,"kk");
                   type="default"
                   onClick={() => onNextAnnotation("next", getNextTask?.id)}
                   style={{
-                    minWidth: "150px",
+                    // minWidth: "150px",
                     color: "black",
                     borderRadius: "5px",
                     border: "0px",
@@ -1080,13 +1091,13 @@ console.log(output,"kk");
                   value="Next"
                   type="default"
                   onClick={() => onNextAnnotation("next", getNextTask?.id)}
+                  sx={{
+                    fontSize: { xs: "0.75rem", sm: "0.875rem", md: "1rem" },
+                  }}
                   style={{
-                    minWidth: "150px",
                     color: "black",
                     borderRadius: "5px",
                     border: "0px",
-                    paddingTop: 2,
-                    paddingBottom: 2,
                     backgroundColor: "#ffe0b2",
                   }}
                 >
@@ -1112,7 +1123,7 @@ console.log(output,"kk");
                         )
                       }
                       style={{
-                        minWidth: "150px",
+                        // minWidth: "150px",
                         color: "black",
                         borderRadius: "5px",
                         border: "0px",
@@ -1128,7 +1139,7 @@ console.log(output,"kk");
                   <Tooltip
                     title={
                       <span style={{ fontFamily: "Roboto, sans-serif" }}>
-                        skip to next task
+                        Skip to next task
                       </span>
                     }
                   >
@@ -1143,13 +1154,13 @@ console.log(output,"kk");
                           Annotation.lead_time,
                         )
                       }
+                      sx={{
+                        fontSize: { xs: "0.75rem", sm: "0.875rem", md: "1rem" },
+                      }}
                       style={{
-                        minWidth: "150px",
                         color: "black",
                         borderRadius: "5px",
                         border: "0px",
-                        paddingTop: 2,
-                        paddingBottom: 2,
                         backgroundColor: "#ffe0b2",
                       }}
                     >
@@ -1176,7 +1187,7 @@ console.log(output,"kk");
                         )
                       }
                       style={{
-                        minWidth: "150px",
+                        // minWidth: "150px",
                         color: "black",
                         borderRadius: "5px",
                         border: "0px",
@@ -1190,14 +1201,15 @@ console.log(output,"kk");
                     </Button>
                   </Tooltip> */}
 
-                  {ProjectDetails?.project_type=="InstructionDrivenChat"?(<Tooltip
-                    title={
-                      <span style={{ fontFamily: "Roboto, sans-serif" }}>
-                        clear the entire chat history
-                      </span>
-                    }
-                  >
-                     <Button
+                  {ProjectDetails?.project_type == "InstructionDrivenChat" ? (
+                    <Tooltip
+                      title={
+                        <span style={{ fontFamily: "Roboto, sans-serif" }}>
+                          clear the entire chat history
+                        </span>
+                      }
+                    >
+                      <Button
                         value="Clear Chats"
                         type="default"
                         variant="outlined"
@@ -1208,25 +1220,33 @@ console.log(output,"kk");
                             Annotation.lead_time,
                           )
                         }
+                        sx={{
+                          fontSize: {
+                            xs: "0.75rem",
+                            sm: "0.875rem",
+                            md: "1rem",
+                          },
+                        }}
                         style={{
-                          minWidth: "150px",
                           color: "black",
                           borderRadius: "5px",
                           border: "0px",
-                          paddingTop: 2,
-                          paddingBottom: 2,
                           backgroundColor: "#ffe0b2",
                         }}
                       >
                         Clear Chats
                       </Button>
-                  </Tooltip>):            (<Tooltip
-                    title={
-                      <span style={{ fontFamily: "Roboto, sans-serif" }}>
-                        Reset the entire chat history
-                      </span>
-                    }
-                  >          <Button
+                    </Tooltip>
+                  ) : (
+                    <Tooltip
+                      title={
+                        <span style={{ fontFamily: "Roboto, sans-serif" }}>
+                          Reset the entire chat history
+                        </span>
+                      }
+                    >
+                      {" "}
+                      <Button
                         value="Reset All Forms"
                         type="default"
                         variant="outlined"
@@ -1237,21 +1257,27 @@ console.log(output,"kk");
                             Annotation.lead_time,
                           )
                         }
+                        sx={{
+                          fontSize: {
+                            xs: "0.75rem",
+                            sm: "0.875rem",
+                            md: "1rem",
+                          },
+                        }}
                         style={{
-                          minWidth: "150px",
                           color: "black",
                           borderRadius: "5px",
                           border: "0px",
-                          paddingTop: 2,
-                          paddingBottom: 2,
                           backgroundColor: "#ffe0b2",
                         }}
                       >
                         {" "}
                         Reset All
                       </Button>
-</Tooltip>)}
-                </Grid>)}
+                    </Tooltip>
+                  )}
+                </Grid>
+              )}
             {!disableUpdateButton &&
               taskData?.annotation_users?.some(
                 (users) => users === userData.id,
@@ -1269,13 +1295,13 @@ console.log(output,"kk");
                           Annotation.lead_time,
                         )
                       }
+                      sx={{
+                        fontSize: { xs: "0.75rem", sm: "0.875rem", md: "1rem" },
+                      }}
                       style={{
-                        minWidth: "150px",
                         color: "black",
                         borderRadius: "5px",
                         border: "0px",
-                        pt: 2,
-                        pb: 2,
                         backgroundColor: "#ee6633",
                       }}
                     >
@@ -1291,10 +1317,10 @@ console.log(output,"kk");
             </Alert>
           )}
         </Grid>
-          <Grid item container>
-            {" "}
-            {componentToRender}{" "}
-          </Grid>
+        <Grid item container sx={{ width: "100%" }}>
+          {" "}
+          {componentToRender}{" "}
+        </Grid>
       </Grid>
     </>
   );
diff --git a/src/app/ui/pages/chat/InstructionDrivenChatPage.js b/src/app/ui/pages/chat/InstructionDrivenChatPage.js
index 1a55aa91..47b3afe5 100644
--- a/src/app/ui/pages/chat/InstructionDrivenChatPage.js
+++ b/src/app/ui/pages/chat/InstructionDrivenChatPage.js
@@ -129,21 +129,19 @@ const InstructionDrivenChatPage = ({
     );
   };
 
-  
-const orange = {
-  200: "pink",
-  400: "#EE6633",
-  600: "#EE663366",
-};
-
-const grey = {
-  50: "#F3F6F9",
-  200: "#DAE2ED",
-  300: "#C7D0DD",
-  700: "#434D5B",
-  900: "#1C2025",
-};
+  const orange = {
+    200: "pink",
+    400: "#EE6633",
+    600: "#EE663366",
+  };
 
+  const grey = {
+    50: "#F3F6F9",
+    200: "#DAE2ED",
+    300: "#C7D0DD",
+    700: "#434D5B",
+    900: "#1C2025",
+  };
 
   const copyToClipboard = async (code) => {
     try {
@@ -161,40 +159,27 @@ const grey = {
       });
     }
   };
- 
 
   useEffect(() => {
     let modifiedChatHistory = [];
     if (
       annotation &&
       Array.isArray(annotation[0]?.result) &&
-      [...annotation[0]?.result]?.length
+      annotation[0]?.result.length > 0
     ) {
-      // if (ProjectDetails?.metadata_json?.blank_response == true) {
-      //   modifiedChatHistory = annotation[0]?.result?.map((interaction) => ({
-      //     ...interaction,
-      //     output: [],
-      //   }));
-      //   console.log(modifiedChatHistory);
-
-      //   setChatHistory(modifiedChatHistory);
-      // }
-      // else {
-        modifiedChatHistory = annotation[0]?.result?.map((interaction,index) => {
-          const isLastInteraction = index === annotation[0]?.result?.length - 1;
-          return {
-            ...interaction,
-            output: formatResponse(interaction.output,isLastInteraction),
-          };
-        });
-      // }
-      setChatHistory([...modifiedChatHistory]);
+      modifiedChatHistory = annotation[0]?.result.map((interaction, index) => {
+        return {
+          ...interaction,
+          output: formatResponse(interaction.output),
+        };
+      });
+      setChatHistory(modifiedChatHistory);
     } else {
       setChatHistory([]);
     }
     setAnnotationId(annotation[0]?.id);
-    if (annotation[0]?.result) setShowChatContainer(true);
-  }, []);
+    setShowChatContainer(!!annotation[0]?.result);
+  }, [annotation]);
 
   const cleanMetaInfo = (value) =>
     value.replace(/\(for example:.*?\)/gi, "").trim();
@@ -248,7 +233,7 @@ const grey = {
 
   const handleButtonClick = async () => {
     console.log(inputValue);
-    
+
     if (inputValue) {
       setLoading(true);
       const body = {
@@ -292,15 +277,15 @@ const grey = {
       setChatHistory((prevChatHistory) => {
         data && data.result && setLoading(false);
         if (data && data.result) {
-            modifiedChatHistory = data.result.map((interaction,index) => {
-              const isLastInteraction = index === data?.result?.length - 1; 
-              return {
-                ...interaction,
-                output: formatResponse(interaction.output,isLastInteraction),
-              };
-            });
+          modifiedChatHistory = data.result.map((interaction, index) => {
+            const isLastInteraction = index === data?.result?.length - 1;
+            return {
+              ...interaction,
+              output: formatResponse(interaction.output, isLastInteraction),
+            };
+          });
         } else {
-          setLoading(false)
+          setLoading(false);
           setSnackbarInfo({
             open: true,
             message: data?.message,
@@ -311,9 +296,7 @@ const grey = {
           ? [...modifiedChatHistory]
           : [...prevChatHistory];
       });
-    } 
-    
-    else {
+    } else {
       setSnackbarInfo({
         open: true,
         message: "Please provide a prompt",
@@ -328,10 +311,8 @@ const grey = {
   console.log(chatHistory, ProjectDetails?.metadata_json);
 
   const handleOnchange = (prompt) => {
-
     inputValue = prompt;
-    console.log(inputValue,chatHistory);
-
+    console.log(inputValue, chatHistory);
   };
   const [text, setText] = useState("");
   const [targetLang, setTargetLang] = useState("");
@@ -342,7 +323,9 @@ const grey = {
     setIsMounted(true);
 
     if (typeof window !== "undefined") {
-      const storedGlobalTransliteration = localStorage.getItem("globalTransliteration");
+      const storedGlobalTransliteration = localStorage.getItem(
+        "globalTransliteration",
+      );
       const storedLanguage = localStorage.getItem("language");
 
       if (storedGlobalTransliteration !== null) {
@@ -352,7 +335,11 @@ const grey = {
         setTargetLang(storedLanguage);
       }
 
-      console.log(globalTransliteration, "lll", localStorage.getItem("globalTransliteration"));
+      console.log(
+        globalTransliteration,
+        "lll",
+        localStorage.getItem("globalTransliteration"),
+      );
     }
   }, [chatHistory]);
 
@@ -405,17 +392,14 @@ const grey = {
     transition: "border-color 0.2s, box-shadow 0.2s",
   };
 
-
   if (!isMounted) {
     return null;
   }
   const handleTextChange = (e, index, message, fieldType) => {
-    if(globalTransliteration){
+    if (globalTransliteration) {
       var updatedValue = e;
-
-    }else{
+    } else {
       var updatedValue = e.target.value;
-
     }
 
     const updatedChatHistory = [...chatHistory];
@@ -442,69 +426,77 @@ const grey = {
         direction="column"
         justifyContent="center"
         alignItems="center"
-        style={{ padding: '1.5rem',margin:"auto" }}
+        style={{ padding: "1.5rem", margin: "auto" }}
       >
         <Grid
           item
           style={{
-            backgroundColor: 'rgba(247, 184, 171, 0.2)',
-            padding: '1.5rem',
-            borderRadius: '0.5rem',
-            position: 'relative',
+            backgroundColor: "rgba(247, 184, 171, 0.2)",
+            padding: "1.5rem",
+            borderRadius: "0.5rem",
+            position: "relative",
+            width: "100%",
           }}
         >
           <Grid container alignItems="center" spacing={2}>
             <Grid item>
               <Avatar
                 alt="user_profile_pic"
-                src={loggedInUserData?.profile_photo || ''}
-                style={{ marginRight: '1rem' }}
+                src={loggedInUserData?.profile_photo || ""}
+                style={{ marginRight: "1rem" }}
               />
             </Grid>
-            <Grid item xs>
+            <Grid item xs className="w-full">
               {ProjectDetails?.metadata_json?.editable_prompt ? (
                 globalTransliteration ? (
                   <IndicTransliterate
                     customApiURL={`${configs.BASE_URL_AUTO}/tasks/xlit-api/generic/transliteration/`}
-                    apiKey={`JWT ${localStorage.getItem('anudesh_access_token')}`}
+                    apiKey={`JWT ${localStorage.getItem(
+                      "anudesh_access_token",
+                    )}`}
                     renderComponent={(props) => (
                       <textarea
                         maxRows={10}
-                        placeholder={translate('chat_placeholder')}
+                        placeholder={translate("chat_placeholder")}
                         {...props}
+                        className=""
                         style={{
-                          fontSize: '1rem',
-                          width: '100%',
-                          padding: '12px',
-                          borderRadius: '12px 12px 0 12px',
+                          fontSize: "1rem",
+                          width: "100%",
+                          padding: "12px",
+                          borderRadius: "12px 12px 0 12px",
                           color: grey[900],
-                          background: '#ffffff',
+                          background: "#ffffff",
                           border: `1px solid ${grey[200]}`,
                           boxShadow: `0px 2px 2px ${grey[50]}`,
-                          minHeight: '5rem',
-                          resize: 'none',
+                          minHeight: "5rem",
+                          resize: "none",
                         }}
                       />
                     )}
                     value={message.prompt}
-                    onChangeText={(e) => handleTextChange(e, null, message, 'prompt')}
+                    onChangeText={(e) =>
+                      handleTextChange(e, null, message, "prompt")
+                    }
                     lang={targetLang}
                   />
                 ) : (
                   <textarea
                     value={message.prompt}
-                    onChange={(e) => handleTextChange(e, null, message, 'prompt')}
+                    onChange={(e) =>
+                      handleTextChange(e, null, message, "prompt")
+                    }
                     style={{
-                      fontSize: '1rem',
-                      width: '100%',
-                      padding: '12px',
-                      borderRadius: '12px 12px 0 12px',
+                      fontSize: "1rem",
+                      width: "100%",
+                      padding: "12px",
+                      borderRadius: "12px 12px 0 12px",
                       color: grey[900],
-                      background: '#ffffff',
+                      background: "#ffffff",
                       border: `1px solid ${grey[200]}`,
                       boxShadow: `0px 2px 2px ${grey[50]}`,
-                      minHeight: '5rem',
-                      resize: 'none',
+                      minHeight: "5rem",
+                      resize: "none",
                     }}
                     rows={1}
                   />
@@ -512,105 +504,114 @@ const grey = {
               ) : (
                 <ReactMarkdown
                   className="flex-col"
-                  children={message?.prompt?.replace(/\n/gi, '&nbsp; \n')}
+                  children={message?.prompt?.replace(/\n/gi, "&nbsp; \n")}
                 />
               )}
             </Grid>
-            {index === chatHistory.length - 1 && stage !== 'Alltask' && !disableUpdateButton && (
-              <IconButton
-                size="large"
-                style={{
-                  position: 'absolute',
-                  bottom: 0,
-                  right: 0,
-                  marginTop: '1rem',
-                  borderRadius: '50%',
-
-                }}
-                onClick={() => handleClick('delete-pair', id?.id, 0.0)}
-              >
-                <DeleteOutlinedIcon style={{ color: '#EE6633', fontSize: '1.2rem' }} />
-              </IconButton>
-            )}
+            {index === chatHistory.length - 1 &&
+              stage !== "Alltask" &&
+              !disableUpdateButton && (
+                <IconButton
+                  size="large"
+                  style={{
+                    position: "absolute",
+                    bottom: 0,
+                    right: 0,
+                    marginTop: "1rem",
+                    borderRadius: "50%",
+                  }}
+                  onClick={() => handleClick("delete-pair", id?.id, 0.0)}
+                >
+                  <DeleteOutlinedIcon
+                    style={{ color: "#EE6633", fontSize: "1.2rem" }}
+                  />
+                </IconButton>
+              )}
           </Grid>
         </Grid>
-  
+
         <Grid
-  item
-  xs={12}
-  style={{
-    textAlign: 'left', 
-    position: 'relative',
-
-  }}
->
-
-  <Grid
-container alignItems="start" spacing={2} 
-justifyContent="flex-start"
-style={{
-  padding: '1.5rem',
-  borderRadius: '0.5rem',
-}}
->
-
-    <Grid
-      item
-      xs={3}
-      style={{
-        display: 'flex',
-        justifyContent: 'flex-end', 
-        alignItems: 'center',    
-        minWidth: '50px',         
-      }}
-    >
-      <img
-        width={50}
-        height={50}
-        src="https://i.imgur.com/56Ut9oz.png"
-        alt="Bot Avatar"
-      />
-    </Grid>
+          item
+          xs={12}
+          style={{
+            textAlign: "left",
+            position: "relative",
+            width: "100%",
+          }}
+        >
+          <Grid
+            container
+            alignItems="start"
+            spacing={2}
+            justifyContent="flex-start"
+            style={{
+              padding: "1.5rem",
+              borderRadius: "0.5rem",
+              width: "100%",
+            }}
+          >
+            <Grid
+              item
+              xs={3}
+              style={{
+                display: "flex",
+                // justifyContent: "flex-end",
+                alignItems: "center",
+                minWidth: "50px",
+              }}
+            >
+              <img
+                width={50}
+                height={50}
+                src="https://i.imgur.com/56Ut9oz.png"
+                alt="Bot Avatar"
+              />
+            </Grid>
 
     <Grid item  xs={6}  >
 
-              {message?.output?.map((segment, index) =>
+              {message?.output.map((segment, index) =>
                 segment.type === 'text' ? (
-                  ProjectDetails?.metadata_json?.editable_response ? (
+                  (ProjectDetails?.metadata_json?.editable_response )||segment.value==""  ? (
                     globalTransliteration ? (
                       <IndicTransliterate
                         key={index}
                         value={segment.value}
-                        onChangeText={(e) => handleTextChange(e, index, message, 'output')}
+                        onChangeText={(e) =>
+                          handleTextChange(e, index, message, "output")
+                        }
                         lang={targetLang}
                         style={{
-                          fontSize: '1rem',
-                          padding: '12px',
-                          borderRadius: '12px 12px 0 12px',
+                          fontSize: "1rem",
+                          padding: "12px",
+                          borderRadius: "12px 12px 0 12px",
                           color: grey[900],
-                          background: '#ffffff',
+                          background: "#ffffff",
                           border: `1px solid ${grey[200]}`,
                           boxShadow: `0px 2px 2px ${grey[50]}`,
-                          minHeight: '5rem',
-                          resize: 'none',
+                          minHeight: "5rem",
+                          // resize: "none",
+                          width: "100%",
                         }}
                       />
                     ) : (
                       <textarea
                         key={index}
                         value={segment.value}
-                        onChange={(e) => handleTextChange(e, index, message, 'output')}
+                        onChange={(e) =>
+                          handleTextChange(e, index, message, "output")
+                        }
                         style={{
-                          fontSize: '1rem',
-                          width: '100%',
-                          padding: '12px',
-                          borderRadius: '12px 12px 0 12px',
+                          fontSize: "1rem",
+                          width: "100%",
+                          padding: "12px",
+                          borderRadius: "12px 12px 0 12px",
                           color: grey[900],
-                          background: '#ffffff',
+                          background: "#ffffff",
                           border: `1px solid ${grey[200]}`,
                           boxShadow: `0px 2px 2px ${grey[50]}`,
-                          minHeight: '5rem',
-                          resize: 'none',
+                          minHeight: "5rem",
+                          resize: "none",
                         }}
                         rows={1}
                       />
@@ -618,7 +619,7 @@ style={{
                   ) : (
                     <ReactMarkdown
                       key={index}
-                      children={segment?.value?.replace(/\n/gi, '&nbsp; \n')}
+                      children={segment?.value?.replace(/\n/gi, "&nbsp; \n")}
                     />
                   )
                 ) : (
@@ -626,21 +627,21 @@ style={{
                     key={index}
                     language={segment.language}
                     style={gruvboxDark}
-                    customStyle={{ padding: '1rem', borderRadius: '5px' }}
+                    customStyle={{ padding: "1rem", borderRadius: "5px" }}
                   >
                     {segment.value}
                   </SyntaxHighlighter>
-                )
+                ),
               )}
             </Grid>
           </Grid>
         </Grid>
       </Grid>
     ));
-  
+
     return chatElements;
   };
-  
+
   const ChildModal = () => {
     const [open, setOpen] = useState(false);
 
@@ -722,15 +723,34 @@ style={{
   return (
     <>
       {renderSnackBar()}
-      <Grid container spacing={2} id="top">
-        <Grid item xs={12}>
+      <Grid
+        container
+        sx={{
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "100%",
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
           <Box
             sx={{
-              borderRadius: "20px",
+              borderRadius: "10px",
               padding: "10px",
-              marginTop: "1.5rem",
               backgroundColor: "rgba(247, 184, 171, 0.2)",
-              marginLeft: "1rem",
+              display: "flex",
+              flexDirection: "column",
+              width: "100%",
+              alignItems: "center",
+              justifyContent: "center",
+              margin: "1rem",
             }}
           >
             <Box
@@ -738,6 +758,7 @@ style={{
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center",
+                // padding: "1rem",
               }}
             >
               <Typography
@@ -745,14 +766,18 @@ style={{
                 align="center"
                 sx={{
                   color: "#636363",
-                  fontSize: "2rem",
+                  fontSize: {
+                    xs: "0.8125rem", // Small screens (mobile)
+                    sm: "1rem", // Medium screens (tablet)
+                    md: "1.5rem", // Large screens (laptops)
+                    lg: "2rem", // Extra-large screens (desktops)
+                  },
                   fontWeight: "800",
-                  marginRight: "0.5rem",
+                  // marginRight: "0.5rem",
                 }}
               >
                 {translate("typography.instructions")}
               </Typography>
-
               <Tooltip
                 title={
                   <span style={{ fontFamily: "Roboto, sans-serif" }}>
@@ -769,33 +794,37 @@ style={{
             <Typography
               paragraph={true}
               sx={{
-                fontSize: "1.2rem",
-                padding: "0.5rem 1rem 0",
-                minHeight: "6rem",
-                maxHeight: "6rem",
-                overflowY: "auto",
+                fontSize: {
+                  xs: "0.5rem", // Small screens (mobile)
+                  sm: "0.75rem", // Medium screens (tablet)
+                  md: ".8125rem", // Large screens (laptops)
+                  lg: "1rem", // Extra-large screens (desktops)
+                },
+                padding: "0.5rem 1rem ",
+                height: "auto",
                 display: "flex",
-                // alignItems: "center",
-                alignItems: "flex-start",
+                alignItems: "center",
+                // alignItems: "flex-start",
                 justifyContent: "center",
               }}
             >
               {info.instruction_data}
             </Typography>
           </Box>
-        </Grid>
+        </Box>
         <Grid
           item
           xs={12}
           sx={{
             margin: "0.8rem 0",
             overflowY: "scroll",
-            minHeight: "39rem",
-            maxHeight: "39rem",
+            // minHeight: "39rem",
+            // maxHeight: "39rem",
             borderRadius: "20px",
             backgroundColor: "#FFF",
             paddingLeft: "0px !important",
             boxSizing: "border-box",
+            width: "100%",
           }}
         >
           <Box
@@ -803,26 +832,39 @@ style={{
               display: "flex",
               flexDirection: "column",
               alignItems: "center !important",
-              padding: "1rem 0 4rem",
+              padding: "1rem 0",
             }}
           >
             {showChatContainer ? renderChatHistory() : null}
           </Box>
           <div ref={bottomRef} />
+          {stage !== "Alltask" && !disableUpdateButton ? (
+            <Grid
+              item
+              xs={12}
+              sx={{
+                boxSizing: "border-box",
+                width: "100%",
+                height: "5rem",
+                display: "flex",
+                justifyContent: "center",
+              }}
+            >
+              <Textarea
+                handleButtonClick={handleButtonClick}
+                handleOnchange={handleOnchange}
+                // grid_size={"100vw"}
+                size={12}
+                sx={{
+                  width: "100vw",
+                }}
+                class_name={"w-full"}
+                loading={loading}
+                inputValue={inputValue}
+              />
+            </Grid>
+          ) : null}
         </Grid>
-        {stage !== "Alltask" && !disableUpdateButton ? (
-          <Grid item xs={12} sx={{ boxSizing: "border-box" }}>
-            <Textarea
-              handleButtonClick={handleButtonClick}
-              handleOnchange={handleOnchange}
-              size={12}
-              grid_size={"80.6rem"}
-              class_name={""}
-              loading={loading}
-              inputValue={inputValue}
-            />
-          </Grid>
-        ) : null}
       </Grid>
 
       <Modal
@@ -843,7 +885,6 @@ style={{
           <Typography variant="subtitle1" id="parent-modal-description">
             {info.hint}
           </Typography>
-
           <Typography
             color={"#F18359"}
             fontWeight={"bold"}
@@ -855,7 +896,6 @@ style={{
           <Typography variant="subtitle1" id="parent-modal-description">
             {info.examples}
           </Typography>
-
           <ChildModal />
         </Box>
       </Modal>
diff --git a/src/app/ui/pages/chat/ReviewPage.jsx b/src/app/ui/pages/chat/ReviewPage.jsx
index b8a36738..3d954e46 100644
--- a/src/app/ui/pages/chat/ReviewPage.jsx
+++ b/src/app/ui/pages/chat/ReviewPage.jsx
@@ -183,6 +183,15 @@ const ReviewPage = () => {
   };
 
   const formatResponse = (response) => {
+    if (!response) {
+      return [
+        {
+          type: "text",
+          value: "",
+        },
+      ];
+    }
+
     response = String(response);
     const output = [];
     let count = 0;
@@ -1240,7 +1249,7 @@ const ReviewPage = () => {
                 title={
                   <div>
                     <div>
-                      {Array.isArray(assignedUsers)
+                      {ProjectDetails?.conceal==false&&Array.isArray(assignedUsers)
                         ? assignedUsers.join(", ")
                         : assignedUsers || "No assigned users"}
                     </div>
diff --git a/src/app/ui/pages/chat/SuperCheckerPage.jsx b/src/app/ui/pages/chat/SuperCheckerPage.jsx
index e88e9acb..894dbac6 100644
--- a/src/app/ui/pages/chat/SuperCheckerPage.jsx
+++ b/src/app/ui/pages/chat/SuperCheckerPage.jsx
@@ -351,6 +351,15 @@ const SuperCheckerPage = () => {
   };
 
   const formatResponse = (response) => {
+    if (!response) {
+      return [
+        {
+          type: "text",
+          value: "",
+        },
+      ];
+    }
+
     response = String(response);
     const output = [];
     let count = 0;
@@ -564,14 +573,14 @@ const SuperCheckerPage = () => {
     const PatchAPIdata = {
       annotation_status:
         typeof window !== "undefined" &&
-        (value === "delete" || value === "delete-pair")
+          (value === "delete" || value === "delete-pair")
           ? localStorage.getItem("labellingMode")
           : value,
       supercheck_notes:
         typeof window !== "undefined"
           ? JSON.stringify(
-              superCheckerNotesRef?.current?.getEditor().getContents(),
-            )
+            superCheckerNotesRef?.current?.getEditor().getContents(),
+          )
           : null,
       lead_time:
         (new Date() - loadtime) / 1000 + Number(lead_time?.lead_time ?? 0),
@@ -601,7 +610,7 @@ const SuperCheckerPage = () => {
       ) ||
       ["validated", "validated_with_changes"].includes(value)
     ) {
-      if (!["draft", "skipped", "delete", "delete-pair","to_be_revised"].includes(value)) {
+      if (!["draft", "skipped", "delete", "delete-pair", "to_be_revised"].includes(value)) {
         console.log("answered variable: ");
         if (
           (ProjectDetails.project_type == "ModelInteractionEvaluation" ||
@@ -618,7 +627,7 @@ const SuperCheckerPage = () => {
           setShowNotes(false);
           return;
         }
-        else if (chatHistory.length==0){
+        else if (chatHistory.length == 0) {
           setAutoSave(true);
           setSnackbarInfo({
             open: true,
@@ -661,21 +670,21 @@ const SuperCheckerPage = () => {
         }
         value === "delete"
           ? setSnackbarInfo({
+            open: true,
+            message: "Chat history has been cleared successfully!",
+            variant: "success",
+          })
+          : value === "delete-pair"
+            ? setSnackbarInfo({
               open: true,
-              message: "Chat history has been cleared successfully!",
+              message: "Selected conversation is deleted",
               variant: "success",
             })
-          : value === "delete-pair"
-            ? setSnackbarInfo({
-                open: true,
-                message: "Selected conversation is deleted",
-                variant: "success",
-              })
             : setSnackbarInfo({
-                open: true,
-                message: resp?.message,
-                variant: "success",
-              });
+              open: true,
+              message: resp?.message,
+              variant: "success",
+            });
       } else {
         setAutoSave(true);
         setSnackbarInfo({
@@ -735,10 +744,10 @@ const SuperCheckerPage = () => {
           userAnnotation.result.length > 0
             ? [userAnnotation]
             : annotations.filter(
-                (annotation) =>
-                  annotation.id === userAnnotation.parent_annotation &&
-                  annotation.annotation_type === 2,
-              );
+              (annotation) =>
+                annotation.id === userAnnotation.parent_annotation &&
+                annotation.annotation_type === 2,
+            );
       } else if (
         ["validated", "validated_with_changes", "draft"].includes(
           userAnnotation.annotation_status,
@@ -813,68 +822,65 @@ const SuperCheckerPage = () => {
     case "InstructionDrivenChat":
       componentToRender = (
         <InstructionDrivenChatPage
-        key={`annotations-${annotations?.length}-${
-          annotations?.[0]?.id || "default"
-        }`}
-        handleClick={handleSuperCheckerClick}
-        chatHistory={chatHistory}
-        setChatHistory={setChatHistory}
-        formatResponse={formatResponse}
-        formatPrompt={formatPrompt}
-        id={SuperChecker}
-        stage={"SuperChecker"}
-        notes={superCheckerNotesRef}
-      info={info}
-        disableUpdateButton={disableUpdateButton}
-        annotation={annotations}
-        setLoading={setLoading}
-        loading={loading}
+          key={`annotations-${annotations?.length}-${annotations?.[0]?.id || "default"
+            }`}
+          handleClick={handleSuperCheckerClick}
+          chatHistory={chatHistory}
+          setChatHistory={setChatHistory}
+          formatResponse={formatResponse}
+          formatPrompt={formatPrompt}
+          id={SuperChecker}
+          stage={"SuperChecker"}
+          notes={superCheckerNotesRef}
+          info={info}
+          disableUpdateButton={disableUpdateButton}
+          annotation={annotations}
+          setLoading={setLoading}
+          loading={loading}
         />
       );
       break;
-      case "ModelInteractionEvaluation":
-        componentToRender = (
-          <ModelInteractionEvaluation
-            key={`annotations-${annotations?.length}-${
-              annotations?.[0]?.id || "default"
+    case "ModelInteractionEvaluation":
+      componentToRender = (
+        <ModelInteractionEvaluation
+          key={`annotations-${annotations?.length}-${annotations?.[0]?.id || "default"
             }`}
-            setCurrentInteraction={setCurrentInteraction}
-            currentInteraction={currentInteraction}
-            interactions={interactions}
-            setInteractions={setInteractions}
-            forms={forms}
-            setForms={setForms}
-            stage={"SuperChecker"}
-            answered={answered}
-            setAnswered={setAnswered}
-            annotation={annotations}
-            setLoading={setLoading}
-            loading={loading}
-          />
-        );
-        break;
-      case "MultipleInteractionEvaluation":
-        componentToRender = (
-          <PreferenceRanking
-            key={`annotations-${annotations?.length}-${
-              annotations?.[0]?.id || "default"
+          setCurrentInteraction={setCurrentInteraction}
+          currentInteraction={currentInteraction}
+          interactions={interactions}
+          setInteractions={setInteractions}
+          forms={forms}
+          setForms={setForms}
+          stage={"SuperChecker"}
+          answered={answered}
+          setAnswered={setAnswered}
+          annotation={annotations}
+          setLoading={setLoading}
+          loading={loading}
+        />
+      );
+      break;
+    case "MultipleInteractionEvaluation":
+      componentToRender = (
+        <PreferenceRanking
+          key={`annotations-${annotations?.length}-${annotations?.[0]?.id || "default"
             }`}
-            setCurrentInteraction={setCurrentInteraction}
-            currentInteraction={currentInteraction}
-            interactions={interactions}
-            setInteractions={setInteractions}
-            forms={forms}
-            setForms={setForms}
-            stage={"SuperChecker"}
-            notes={superCheckerNotesRef}
-            answered={answered}
-            setAnswered={setAnswered}
-            annotation={annotations}
-            setLoading={setLoading}
-            loading={loading}
-          />
-        );
-        break;
+          setCurrentInteraction={setCurrentInteraction}
+          currentInteraction={currentInteraction}
+          interactions={interactions}
+          setInteractions={setInteractions}
+          forms={forms}
+          setForms={setForms}
+          stage={"SuperChecker"}
+          notes={superCheckerNotesRef}
+          answered={answered}
+          setAnswered={setAnswered}
+          annotation={annotations}
+          setLoading={setLoading}
+          loading={loading}
+        />
+      );
+      break;
     default:
       componentToRender = null;
       break;
@@ -979,44 +985,44 @@ const SuperCheckerPage = () => {
                 placeholder="Superchecker Notes"
               ></ReactQuill>
             </div>
-            
+
             {ProjectDetails.revision_loop_count >
-            taskData?.revision_loop_count?.super_check_count
+              taskData?.revision_loop_count?.super_check_count
               ? false
               : true && (
-                  <div
-                    style={{
-                      textAlign: "left",
-                      marginBottom: "5px",
-                      marginLeft: "40px",
-                      marginTop: "5px",
-                    }}
-                  >
-                    <Typography variant="body" color="#f5222d">
-                      Note: The 'Revision Loop Count' limit has been reached for
-                      this task.
-                    </Typography>
-                  </div>
-                )}
+                <div
+                  style={{
+                    textAlign: "left",
+                    marginBottom: "5px",
+                    marginLeft: "40px",
+                    marginTop: "5px",
+                  }}
+                >
+                  <Typography variant="body" color="#f5222d">
+                    Note: The 'Revision Loop Count' limit has been reached for
+                    this task.
+                  </Typography>
+                </div>
+              )}
 
             {ProjectDetails.revision_loop_count -
               taskData?.revision_loop_count?.super_check_count !==
               0 && (
-              <div
-                style={{
-                  textAlign: "left",
-                  marginLeft: "40px",
-                  marginTop: "8px",
-                }}
-              >
-                <Typography variant="body" color="#f5222d">
-                  Note: This task can be rejected{" "}
-                  {ProjectDetails.revision_loop_count -
-                    taskData?.revision_loop_count?.super_check_count}{" "}
-                  more times.
-                </Typography>
-              </div>
-            )}
+                <div
+                  style={{
+                    textAlign: "left",
+                    marginLeft: "40px",
+                    marginTop: "8px",
+                  }}
+                >
+                  <Typography variant="body" color="#f5222d">
+                    Note: This task can be rejected{" "}
+                    {ProjectDetails.revision_loop_count -
+                      taskData?.revision_loop_count?.super_check_count}{" "}
+                    more times.
+                  </Typography>
+                </div>
+              )}
           </Box>
           <Grid
             container
@@ -1030,7 +1036,25 @@ const SuperCheckerPage = () => {
             }}
           >
             <Grid item>
-              <LightTooltip title={assignedUsers ? assignedUsers : ""}>
+              <LightTooltip title={<div>
+                <div>
+                  {ProjectDetails?.conceal == false && Array.isArray(assignedUsers)
+                    ? assignedUsers.join(", ")
+                    : assignedUsers || "No assigned users"}
+                </div>
+                <div
+                  style={{
+                    marginTop: "4px",
+                    fontWeight: "bold",
+                    textAlign: "center",
+                  }}
+                >
+                  {annotations[0]?.annotation_type == 1 && `ANNOTATION ID: ${review?.id}`}
+                  {annotations[0]?.annotation_type == 2 && `REVIEW ID: ${annotations[0]?.id}`}
+                  {annotations[0]?.annotation_type == 3 && `SUPERCHECK ID: ${annotations[0]?.id}`}
+                </div>
+              </div>
+              }>
                 <Button
                   type="default"
                   className="lsf-button"
@@ -1079,7 +1103,7 @@ const SuperCheckerPage = () => {
                       pb: 2,
                       backgroundColor: "#ffe0b2",
                     }}
-                    // className="lsf-button"
+                  // className="lsf-button"
                   >
                     Draft
                   </Button>
@@ -1131,7 +1155,7 @@ const SuperCheckerPage = () => {
                       pb: 2,
                       backgroundColor: "#ffe0b2",
                     }}
-                    // className="lsf-button"
+                  // className="lsf-button"
                   >
                     Skip
                   </Button>
@@ -1161,7 +1185,7 @@ const SuperCheckerPage = () => {
                       pb: 2,
                       backgroundColor: "#ffe0b2",
                     }}
-                    // className="lsf-button"
+                  // className="lsf-button"
                   >
                     Clear Chats
                   </Button>
@@ -1185,7 +1209,7 @@ const SuperCheckerPage = () => {
                     }
                     disabled={
                       ProjectData.revision_loop_count >
-                      taskData?.revision_loop_count?.super_check_count
+                        taskData?.revision_loop_count?.super_check_count
                         ? false
                         : true
                     }
diff --git a/src/app/ui/pages/chat/chat.js b/src/app/ui/pages/chat/chat.js
index edce1714..6c288321 100644
--- a/src/app/ui/pages/chat/chat.js
+++ b/src/app/ui/pages/chat/chat.js
@@ -35,14 +35,14 @@ const codeStyle = {
 const Chat = () => {
   /* eslint-disable react-hooks/exhaustive-deps */
   const tooltipStyle = useStyles();
-  let inputValue = "";
+  const [inputValue, setInputValue] = useState("");
   const classes = headerStyle();
   const navigate = useNavigate();
   const bottomRef = useRef(null);
   const [loading, setLoading] = useState(false);
-  const [chatHistory, setChatHistory] = useState(() => {
-    return JSON.parse(sessionStorage.getItem("interaction_json")) || [];
-  });
+  const [chatHistory, setChatHistory] = useState([]);
+
+
   const [showChatContainer, setShowChatContainer] = useState(
     chatHistory.length > 0 ? true : false,
   );
@@ -54,12 +54,24 @@ const Chat = () => {
   const loggedInUserData = useSelector((state) => state.getLoggedInData.data);
 
   useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-    window.sessionStorage.setItem(
-      "interaction_json",
-      JSON.stringify(chatHistory),
-    );
-  }, [chatHistory]);
+    const storedHistory = sessionStorage.getItem("interaction_json");
+    if (storedHistory) {
+      console.log("Stored History found in sessionStorage:", storedHistory);
+      setChatHistory(JSON.parse(storedHistory));
+      setShowChatContainer(true);
+    } else {
+      console.log("No stored history found in sessionStorage.");
+    }
+  }, []); 
+
+  useEffect(() => {
+    console.log("chatHistory updated:", chatHistory);
+    if (chatHistory.length > 0) {
+      sessionStorage.setItem("interaction_json", JSON.stringify(chatHistory));
+      console.log("sessionStorage updated with new chat history");
+    }
+  }, [chatHistory]); 
+
 
   const formatResponse = (response) => {
     response = String(response);
@@ -147,7 +159,7 @@ const Chat = () => {
   };
 
   const handleOnchange = (prompt) => {
-    inputValue = prompt;
+    setInputValue(prompt);
   };
 
   const renderSnackBar = () => {
diff --git a/src/app/ui/pages/dataset/DatasetCardList.jsx b/src/app/ui/pages/dataset/DatasetCardList.jsx
index 56552c08..cf851ca5 100644
--- a/src/app/ui/pages/dataset/DatasetCardList.jsx
+++ b/src/app/ui/pages/dataset/DatasetCardList.jsx
@@ -7,6 +7,7 @@ import tableTheme from "@/themes/tableTheme";
 import { useSelector } from "react-redux";
 import FilterListIcon from "@mui/icons-material/FilterList";
 import DatasetFilterList from "./DatasetFilterList";
+import useMediaQuery from "@mui/material/useMediaQuery";
 
 const DatasetCardList = (props) => {
     /* eslint-disable react-hooks/exhaustive-deps */
@@ -161,6 +162,35 @@ const DatasetCardList = (props) => {
     jumpToPage: true,
     customToolbar: renderToolBar,
   };
+  const isXLarge = useMediaQuery("(min-width: 1280px)");
+  const isLarge = useMediaQuery("(min-width: 769px) and (max-width: 1279px)");
+  const isMedium = useMediaQuery("(min-width: 481px) and (max-width: 768px)");
+  const isSmall = useMediaQuery("(max-width: 480px)");
+
+  // Adjust columns based on screen size
+  const responsiveColumns = React.useMemo(() => {
+    if (isXLarge) {
+      return columns; // Full set of columns
+    }
+    if (isLarge) {
+      return columns.slice(0, Math.max(columns.length - 1, 2)); // Slightly reduced
+    }
+    if (isMedium) {
+      return columns.slice(0, 2); // Limited columns
+    }
+    if (isSmall) {
+      return columns.slice(0, 1); // Minimal columns
+    }
+    return columns; // Default
+  }, [isXLarge, isLarge, isMedium, isSmall, columns]);
+
+  // Adjust options based on screen size
+  const responsiveOptions = {
+    ...options,
+    rowsPerPage: isSmall ? 5 : 10,
+    rowsPerPageOptions: isSmall ? [5] : [10, 25, 50],
+    responsive: "standard", // Can also use "vertical" or "simple" for better small screen support
+  };
 
   return (
     <div>
@@ -168,8 +198,8 @@ const DatasetCardList = (props) => {
         <MUIDataTable
           title={""}
           data={data}
-          columns={columns}
-          options={options}
+          columns={responsiveColumns}
+          options={responsiveOptions}
         />
       </ThemeProvider>
       <DatasetFilterList
diff --git a/src/app/ui/pages/projects/project.js b/src/app/ui/pages/projects/project.js
index b041fec5..6d825bf1 100644
--- a/src/app/ui/pages/projects/project.js
+++ b/src/app/ui/pages/projects/project.js
@@ -1,6 +1,7 @@
 'use client'
 import  { React,useEffect, useState } from "react";
 import { Radio, Box, Grid, Typography, ThemeProvider } from "@mui/material";
+import { useTheme } from '@mui/material/styles';
 import RadioGroup from "@mui/material/RadioGroup";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import FormControl from "@mui/material/FormControl";
@@ -19,9 +20,12 @@ export default function ProjectList({data}) {
          /* eslint-disable react-hooks/exhaustive-deps */
            /* eslint-disable-next-line react/jsx-key */
 
+           
 const dispatch = useDispatch();
 const [radiobutton, setRadiobutton] = useState(true);
 console.log(data);
+const theme = useTheme();
+
 
   // const [loading, setLoading] = useState(true);
   const [selectedFilters, setsSelectedFilters] = useState({
@@ -63,10 +67,10 @@ console.log(data?.length,"hel");
     <ThemeProvider theme={themeDefault}>
       {apiLoading ? <Spinner /> :  
       <>
-      {/* <Grid container direction="row" columnSpacing={3} rowSpacing={2} sx={{ position: "static", bottom: "-51px", left: "20px" }} > */}
-      <Grid container className="root">
-        <Grid item style={{ flexGrow: "0" }}>
-          <Typography variant="h6" sx={{ paddingBottom: "7px" }}>
+      <Grid container className="root" >
+
+        <Grid item style={{ flexGrow: "0" }} >
+          <Typography variant="h6" sx={{ paddingBottom: "7px" ,paddingLeft: "15px"}}>
             View :{" "}
           </Typography>
         </Grid>
@@ -94,13 +98,22 @@ console.log(data?.length,"hel");
           </FormControl>
         </Grid>
 
-        <Grid xs={3} item className="fixedWidthContainer">
-          <Search />
-        </Grid> 
-      </Grid>
+            <Grid
+              item
+              xs={12}
+              sm={6}
+              md={3}
+              className="fixedWidthContainer"
+              sx={{
+                paddingX: { xs: 2, sm: 3, md: 0 },
+              }}
+            >
+              <Search />
+            </Grid>
+          </Grid>
 
       <Box>
-        <Box sx={{ marginTop: "20px" }}>
+        <Box sx={{ margin: "20px" }}>
           {radiobutton ? (
             <ProjectCardList
               projectData={displayedProjects}
diff --git a/src/app/ui/pages/projects/projectDetails.js b/src/app/ui/pages/projects/projectDetails.js
index 3e3ee45e..d446e569 100644
--- a/src/app/ui/pages/projects/projectDetails.js
+++ b/src/app/ui/pages/projects/projectDetails.js
@@ -405,6 +405,9 @@ import {
           direction="row"
           justifyContent="center"
           alignItems="center"
+          sx={{
+            padding: { xs: 2, sm: 3, md: 5 },
+          }}
         >
           <Card
             sx={{
@@ -419,21 +422,47 @@ import {
               direction="row"
               justifyContent="center"
               alignItems="center"
-              sx={{ mb: 3 }}
+              sx={{ mb: { xs: 2, md: 3 } }}
             >
-  <Grid item xs={12} sm={12} md={loggedInUserData?.role && (userRole.WorkspaceManager === loggedInUserData.role || userRole.OrganizationOwner === loggedInUserData.role || userRole.Admin === loggedInUserData.role) ? 10 : 12} lg={loggedInUserData?.role && (userRole.WorkspaceManager === loggedInUserData.role || userRole.OrganizationOwner === loggedInUserData.role || userRole.Admin === loggedInUserData.role) ? 10 : 12} xl={loggedInUserData?.role && (userRole.WorkspaceManager === loggedInUserData.role || userRole.OrganizationOwner === loggedInUserData.role || userRole.Admin === loggedInUserData.role) ? 10 : 12}>
-  <Typography variant="h3">{ProjectDetails.title}</Typography>
+              <Grid
+                item
+                xs={12}
+                md={
+                  loggedInUserData?.role &&
+                  (userRole.WorkspaceManager === loggedInUserData.role ||
+                    userRole.OrganizationOwner === loggedInUserData.role ||
+                    userRole.Admin === loggedInUserData.role)
+                    ? 10
+                    : 12
+                }
+                sx={{
+                  textAlign: { xs: "center", md: "left" },
+                  mb: { xs: 2, md: 0 },
+                }}
+              >
+                <Typography
+                  variant="h5"
+                  sx={{ fontSize: { xs: "1.5rem", md: "2rem" } }}
+                >
+                  {ProjectDetails.title}
+                </Typography>
               </Grid>
 
               {(userRole.WorkspaceManager === loggedInUserData?.role ||
-              userRole.OrganizationOwner === loggedInUserData?.role ||
-              userRole.Admin === loggedInUserData?.role) && (
-                <Grid item xs={12} sm={12} md={2} lg={2} xl={2}>
+                userRole.OrganizationOwner === loggedInUserData?.role ||
+                userRole.Admin === loggedInUserData?.role) && (
+                <Grid
+                  item
+                  xs={12}
+                  md={2}
+                  sx={{
+                    display: "flex",
+                    justifyContent: { xs: "center", md: "flex-end" },
+                    mt: { xs: 2, md: 0 },
+                  }}
+                >
                   <Tooltip title={translate("label.showProjectSettings")}>
-                    <IconButton
-                      onClick={handleOpenSettings}
-                      sx={{ marginLeft: "140px" }}
-                    >
+                    <IconButton onClick={handleOpenSettings}>
                       <SettingsOutlinedIcon
                         color="primary.dark"
                         fontSize="large"
@@ -442,8 +471,15 @@ import {
                   </Tooltip>
                 </Grid>
               )}
-          </Grid>
-            <Grid item xs={12} sm={12} md={12} lg={12} xl={12} sx={{ mb: 2 }}>
+            </Grid>
+
+            <Grid
+              item
+              xs={12}
+              sx={{
+                mb: { xs: 2, md: 3 },
+              }}
+            >
               <Grid container spacing={2}>
                 {projectFilterData?.map((des, i) => (
                   <Grid key={i} item xs={isSuperChecker?3:4} sm={isSuperChecker?3:4} md={isSuperChecker?3:4} lg={isSuperChecker?3:4} xl={isSuperChecker?3:4}>
diff --git a/src/app/ui/pages/workspace/DetailsViewPage.js b/src/app/ui/pages/workspace/DetailsViewPage.js
index 574953b4..7713ffd8 100644
--- a/src/app/ui/pages/workspace/DetailsViewPage.js
+++ b/src/app/ui/pages/workspace/DetailsViewPage.js
@@ -13,6 +13,8 @@ import {
   Menu,
   MenuItem,
 } from "@mui/material";
+import { useMediaQuery } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import React, { useState, useEffect } from "react";
@@ -258,6 +260,10 @@ const DetailsViewPage = (props) => {
     setbtn(null);
     setUserType(Object.keys(UserRolesList)[0]);
   };
+
+  const theme = useTheme();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
+
   return (
     <ThemeProvider theme={themeDefault}>
       {apiLoading ? (
@@ -340,6 +346,7 @@ const DetailsViewPage = (props) => {
                 TabIndicatorProps={{
                   style: { display: "none" },
                 }}
+                orientation={isSmallScreen ? "vertical" : "horizontal"}
               >
                 {pageType === componentType.Type_Workspace && (
                   <Tab
@@ -349,6 +356,7 @@ const DetailsViewPage = (props) => {
                       fontWeight: "700",
                       bgcolor: value === 0 ? "#d3d3d3" : "#F5F5F5",
                       color: value === 0 ? "black" : "text.primary",
+                      margin: isSmallScreen ? "0 0 1rem 0" : "0 1rem 0 0", 
                       borderRadius: 1,
                       "&:hover": {
                         bgcolor: "#e0e0e0",
@@ -364,6 +372,7 @@ const DetailsViewPage = (props) => {
                       fontWeight: "700",
                       bgcolor: value === 0 ? "#d3d3d3" : "#F5F5F5",
                       color: value === 0 ? "black" : "text.primary",
+                      margin: isSmallScreen ? "0 0 1rem 0" : "0 1rem 0 0", 
                       borderRadius: 1,
                       "&:hover": {
                         bgcolor: "#e0e0e0",
@@ -380,6 +389,7 @@ const DetailsViewPage = (props) => {
                       fontWeight: "700",
                       bgcolor: value === 1 ? "#d3d3d3" : "#F5F5F5",
                       color: value === 1 ? "black" : "text.primary",
+                      margin: isSmallScreen ? "0 0 1rem 0" : "0 1rem 0 0", 
                       borderRadius: 1,
                       "&:hover": {
                         bgcolor: "#e0e0e0",
@@ -395,6 +405,7 @@ const DetailsViewPage = (props) => {
                       fontWeight: "700",
                       bgcolor: value === 1 ? "#d3d3d3" : "#F5F5F5",
                       color: value === 1 ? "black" : "text.primary",
+                      margin: isSmallScreen ? "0 0 1rem 0" : "0 1rem 0 0", 
                       borderRadius: 1,
                       "&:hover": {
                         bgcolor: "#e0e0e0",
@@ -411,6 +422,7 @@ const DetailsViewPage = (props) => {
                       fontWeight: "700",
                       bgcolor: value === 2 ? "#d3d3d3" : "#F5F5F5",
                       color: value === 2 ? "black" : "text.primary",
+                      margin: isSmallScreen ? "0 0 1rem 0" : "0 1rem 0 0", 
                       borderRadius: 1,
                       "&:hover": {
                         bgcolor: "#e0e0e0",
@@ -426,6 +438,7 @@ const DetailsViewPage = (props) => {
                       fontWeight: "700",
                       bgcolor: value === 2 ? "#d3d3d3" : "#F5F5F5",
                       color: value === 2 ? "black" : "text.primary",
+                      margin: isSmallScreen ? "0 0 1rem 0" : "0 1rem 0 0", 
                       borderRadius: 1,
                       "&:hover": {
                         bgcolor: "#e0e0e0",
@@ -442,6 +455,7 @@ const DetailsViewPage = (props) => {
                       fontWeight: "700",
                       bgcolor: value === 3 ? "#d3d3d3" : "#F5F5F5",
                       color: value === 3 ? "black" : "text.primary",
+                      margin: isSmallScreen ? "0 0 1rem 0" : "0 1rem 0 0", 
                       borderRadius: 1,
                       "&:hover": {
                         bgcolor: "#e0e0e0",
@@ -457,6 +471,7 @@ const DetailsViewPage = (props) => {
                       fontWeight: "700",
                       bgcolor: value === 3 ? "#d3d3d3" : "#F5F5F5",
                       color: value === 3 ? "black" : "text.primary",
+                      margin: isSmallScreen ? "0 0 1rem 0" : "0 1rem 0 0", 
                       borderRadius: 1,
                       "&:hover": {
                         bgcolor: "#e0e0e0",
@@ -484,6 +499,7 @@ const DetailsViewPage = (props) => {
                       fontWeight: "700",
                       bgcolor: value === 4 ? "#d3d3d3" : "#F5F5F5",
                       color: value === 4 ? "black" : "text.primary",
+                      margin: isSmallScreen ? "0 0 1rem 0" : "0 1rem 0 0", 
                       borderRadius: 1,
                       "&:hover": {
                         bgcolor: "#e0e0e0",
@@ -500,6 +516,7 @@ const DetailsViewPage = (props) => {
                       fontWeight: "700",
                       bgcolor: value === 4 ? "#d3d3d3" : "#F5F5F5",
                       color: value === 4 ? "black" : "text.primary",
+                      margin: isSmallScreen ? "0 0 1rem 0" : "0 1rem 0 0", 
                       borderRadius: 1,
                       "&:hover": {
                         bgcolor: "#e0e0e0",
diff --git a/src/components/Chat/TextArea.jsx b/src/components/Chat/TextArea.jsx
index 687d661c..e08b7e14 100644
--- a/src/components/Chat/TextArea.jsx
+++ b/src/components/Chat/TextArea.jsx
@@ -1,6 +1,6 @@
 import "./textarea.css";
 import { useEffect, useState } from "react";
-import { styled } from "@mui/system";
+import { styled, width } from "@mui/system";
 import { Grid } from "@mui/material";
 import { translate } from "@/config/localisation";
 import IconButton from "@mui/material/IconButton";
@@ -46,7 +46,9 @@ export default function Textarea({
     setIsMounted(true);
 
     if (typeof window !== "undefined") {
-      const storedGlobalTransliteration = localStorage.getItem("globalTransliteration");
+      const storedGlobalTransliteration = localStorage.getItem(
+        "globalTransliteration",
+      );
       const storedLanguage = localStorage.getItem("language");
 
       if (storedGlobalTransliteration !== null) {
@@ -56,7 +58,11 @@ export default function Textarea({
         setTargetLang(storedLanguage);
       }
 
-      console.log(globalTransliteration, "lll", localStorage.getItem("globalTransliteration"));
+      console.log(
+        globalTransliteration,
+        "lll",
+        localStorage.getItem("globalTransliteration"),
+      );
     }
   }, [text]);
 
@@ -64,7 +70,6 @@ export default function Textarea({
     if (text !== "") {
       handleOnchange(text);
     }
-  
   }, [text]);
 
   const handleMouseEnter = (event) => {
@@ -108,9 +113,8 @@ export default function Textarea({
     outline: 0,
     transition: "border-color 0.2s, box-shadow 0.2s",
   };
-  
 
-  const StyledTextarea  = styled(BaseTextareaAutosize)(
+  const StyledTextarea = styled(BaseTextareaAutosize)(
     ({ theme }) => `
     resize: none;
     margin-right: 5px;
@@ -146,13 +150,13 @@ export default function Textarea({
   if (!isMounted) {
     return null;
   }
-console.log(text,"llm",inputValue);
+  console.log(text, "llm", inputValue);
 
   return (
     <Grid
       item
-      xs={size}
-      backgroundColor="#FFF"
+      // xs={size}
+      backgroundColor="#FFf"
       justifyContent={"center"}
       alignItems={"center"}
       display={"flex"}
@@ -160,16 +164,17 @@ console.log(text,"llm",inputValue);
       bottom={0}
       width={grid_size}
       className={class_name}
+      sx={{ width: "100%" }}
     >
       {globalTransliteration ? (
         <IndicTransliterate
           customApiURL={`${configs.BASE_URL_AUTO}/tasks/xlit-api/generic/transliteration/`}
-          apiKey={`JWT ${localStorage.getItem('anudesh_access_token')}`}
+          apiKey={`JWT ${localStorage.getItem("anudesh_access_token")}`}
           renderComponent={(props) => (
             <textarea
-              xs={size}
+              // xs={size}
               sx={{
-                whiteSpace: 'pre-wrap',
+                whiteSpace: "pre-wrap",
               }}
               maxRows={10}
               aria-label="empty textarea"
@@ -206,7 +211,7 @@ console.log(text,"llm",inputValue);
         />
       ) : (
         <TextareaAutosize
-          xs={size}
+          // xs={size}
           maxRows={10}
           aria-label="empty textarea"
           placeholder={translate("chat_placeholder")}
@@ -217,7 +222,8 @@ console.log(text,"llm",inputValue);
           }}
           onKeyDown={handleKeyDown}
           sx={{
-            whiteSpace: 'pre-wrap',
+            whiteSpace: "pre-wrap",
+            width: "100%",
           }}
           onFocus={handleFocus}
           onBlur={handleBlur}
@@ -231,7 +237,6 @@ console.log(text,"llm",inputValue);
           handleButtonClick();
         }}
         disabled={!text?.trim()}
-
       >
         <SendRoundedIcon style={{ color: "#EE6633", height: "4rem" }} />
       </IconButton>
diff --git a/src/components/Project/ProjectSettings.jsx b/src/components/Project/ProjectSettings.jsx
index 181a6899..19c666e1 100644
--- a/src/components/Project/ProjectSettings.jsx
+++ b/src/components/Project/ProjectSettings.jsx
@@ -53,45 +53,65 @@ const ProjectSetting = () => {
     }, [])
     return (
         <Card
-        sx={{
-            // width: window.innerWidth * 0.8,
-            width: "100%",
-            minHeight: 500,
-            padding: 5
-        }}
-    >
-      
-        <Box >
-              <Grid
-                        item
-                        xs={12}
-                        sm={12}
-                        md={12}
-                        lg={12}
-                        xl={12}
-                        sx={{mb:3,}}
-                    >
-                        <Typography variant="h3" gutterBottom component="div"sx={{fontWeight: '1.6875rem'}}>
-                            Project Settings
-                        </Typography>
-                    </Grid>
-            <Box sx={{mb:2,}} >
-                <Tabs value={tabValue} onChange={handleTabChange} aria-label="user-tabs">
-                    <Tab label="Basic " sx={{ fontSize: 17, fontWeight: '700', marginRight: '28px !important' }} />
-                    <Tab label=" Advanced " sx={{ fontSize: 17, fontWeight: '700' }} />
-                    <Tab label=" Read-only " sx={{ fontSize: 17, fontWeight: '700' }} />
-                    <Tab label=" Logs " sx={{ fontSize: 17, fontWeight: '700' }} />
-                </Tabs>
-            </Box>
-            <Divider/>
-            <Box sx={{ p: 1 }}>
-                <TabPanel value={tabValue} index={0}>
-                <BasicSettings   ProjectDetails={ProjectDetails}/>  
-                </TabPanel>
-                <TabPanel value={tabValue} index={1}>
-                    <AdvancedOperation />
-                </TabPanel>
-                <TabPanel value={tabValue} index={2}>
+    sx={{
+        width: "100%",
+        minHeight: 500,
+        padding: 5,
+        '@media (max-width: 600px)': {
+            padding: 2, 
+        },
+    }}
+>
+    <Box>
+        <Grid
+            item
+            xs={12}
+            sx={{
+                mb: 3,
+                textAlign: {
+                    xs: "center", 
+                    sm: "left", 
+                },
+            }}
+        >
+            <Typography
+                variant="h3"
+                gutterBottom
+                component="div"
+                sx={{
+                    fontWeight: 500,
+                    fontSize: {
+                        xs: "1.5rem", 
+                        sm: "1.6875rem", 
+                    },
+                }}
+            >
+                Project Settings
+            </Typography>
+        </Grid>
+        <Box sx={{ mb: 2 }}>
+            <Tabs
+                value={tabValue}
+                onChange={handleTabChange}
+                aria-label="user-tabs"
+                variant="scrollable" 
+                scrollButtons="auto"
+            >
+                <Tab label="Basic" sx={{ fontSize: 15, fontWeight: 700, marginRight: 1 }} />
+                <Tab label="Advanced" sx={{ fontSize: 15, fontWeight: 700, marginRight: 1 }} />
+                <Tab label="Read-only" sx={{ fontSize: 15, fontWeight: 700, marginRight: 1 }} />
+                <Tab label="Logs" sx={{ fontSize: 15, fontWeight: 700 }} />
+            </Tabs>
+        </Box>
+        <Divider />
+        <Box sx={{ p: 1 }}>
+            <TabPanel value={tabValue} index={0}>
+                <BasicSettings ProjectDetails={ProjectDetails} />
+            </TabPanel>
+            <TabPanel value={tabValue} index={1}>
+                <AdvancedOperation />
+            </TabPanel>
+            <TabPanel value={tabValue} index={2}>
                 <ReadonlyConfigurations />
                 </TabPanel>
                 <TabPanel value={tabValue} index={3}>
diff --git a/src/components/Project/ReadOnlyConfigurations.jsx b/src/components/Project/ReadOnlyConfigurations.jsx
index 09785166..7d30d751 100644
--- a/src/components/Project/ReadOnlyConfigurations.jsx
+++ b/src/components/Project/ReadOnlyConfigurations.jsx
@@ -25,224 +25,205 @@ const workspaceDetails = useSelector(state => state.getWorkspaceDetails.data);
 
   return (
     <ThemeProvider theme={themeDefault}>
-      <Grid
-        container
-        direction="row"
-        // justifyContent='center'
-        // alignItems='center'
-      >
-        {/* <Grid
-                        item
-                        xs={12}
-                        md={12}
-                        lg={12}
-                        xl={12}
-                        sm={12}
-                    >
-                        <Typography variant="h5"   >
-                            Read-only Configurations
-                        </Typography>
-                    </Grid> */}
-        {ProjectDetails && ProjectDetails.sampling_mode && (
-          <div>
-            <Grid
-              item
-              xs={12}
-              md={12}
-              lg={12}
-              xl={12}
-              sm={12}
-              // sx={{mt:2}}
+  <Grid
+    container
+    direction="row"
+    sx={{
+      padding: { xs: 2, md: 4 }, // Adjust padding for smaller screens
+    }}
+  >
+    {ProjectDetails && ProjectDetails.sampling_mode && (
+      <div>
+        {/* Sampling Parameters Section */}
+        <Grid item xs={12} sx={{ mb: 2 }}>
+          <Typography
+            variant="h6"
+            sx={{
+              fontSize: { xs: "1rem", md: "1.25rem" }, // Adjust font size
+              textAlign: { xs: "center", md: "left" }, // Center-align on mobile
+            }}
+          >
+            Sampling Parameters
+          </Typography>
+        </Grid>
+
+        {/* Sampling Mode */}
+        <Grid
+          item
+          xs={12}
+          sx={{
+            display: "flex",
+            flexDirection: { xs: "column", md: "row" },
+            alignItems: { xs: "flex-start", md: "center" },
+            mb: 2,
+          }}
+        >
+          <Typography variant="subtitle1">Sampling Mode:</Typography>
+          <Typography
+            variant="subtitle1"
+            sx={{ ml: { xs: 0, md: 3 }, mt: { xs: 1, md: 0 } }}
+          >
+            {ProjectDetails.sampling_mode === "f" && "Full"}
+            {ProjectDetails.sampling_mode === "b" && "Batch"}
+            {ProjectDetails.sampling_mode === "r" && "Random"}
+          </Typography>
+        </Grid>
+
+        {/* Batch Size */}
+        {ProjectDetails?.sampling_parameters_json?.batch_size && (
+          <Grid
+            item
+            xs={12}
+            sx={{
+              display: "flex",
+              flexDirection: { xs: "column", md: "row" },
+              alignItems: { xs: "flex-start", md: "center" },
+              mb: 2,
+            }}
+          >
+            <Typography variant="subtitle1">Batch Size:</Typography>
+            <Typography
+              variant="subtitle1"
+              sx={{ ml: { xs: 0, md: 3 }, mt: { xs: 1, md: 0 } }}
             >
-              <Typography variant="h6">Sampling Parameters</Typography>
-            </Grid>
+              {ProjectDetails.sampling_parameters_json.batch_size}
+            </Typography>
+          </Grid>
+        )}
 
-            <Grid
-              item
-              xs={12}
-              md={12}
-              lg={12}
-              xl={12}
-              sm={12}
-              sx={{ mt: 2, display: "flex" }}
+        {/* Dataset Instances */}
+        {ProjectDetails.datasets.map((dataset, i) => (
+          <Grid
+            container
+            item
+            xs={12}
+            key={i}
+            sx={{
+              display: "flex",
+              flexDirection: { xs: "column", md: "row" },
+              alignItems: { xs: "flex-start", md: "center" },
+              mb: 2,
+            }}
+          >
+            <Typography variant="subtitle1">Dataset Instance:</Typography>
+            <Typography
+              variant="subtitle1"
+              sx={{ ml: { xs: 0, md: 3 }, mt: { xs: 1, md: 0 } }}
             >
-              <Typography
-                variant="subtitle1"
-                style={{ flexDirection: "column" }}
-              >
-                Sampling Mode :
-              </Typography>
-
-              <Typography variant="subtitle1" style={{ marginLeft: 25 }}>
-                {ProjectDetails.sampling_mode == "f" && "Full"}
-                {ProjectDetails.sampling_mode == "b" && "Batch"}
-                {ProjectDetails.sampling_mode == "r" && "Random"}
-              </Typography>
-              
-            </Grid>
-            {ProjectDetails && ProjectDetails?.sampling_parameters_json?.batch_size  && ( 
-            <Grid
-              item
-              xs={12}
-              md={12}
-              lg={12}
-              xl={12}
-              sm={12}
-              sx={{ mt: 2, display: "flex" }}
+              {dataset?.instance_name}
+            </Typography>
+            <Link
+              to={`/datasets/${dataset?.instance_id}`}
+              style={{ textDecoration: "none", marginTop: { xs: 8, md: 0 } }}
             >
-              <Typography
-                variant="subtitle1"
-                style={{ flexDirection: "column" }}
-              >
-                Batch Size  :
-              </Typography>
-
-              <Typography variant="subtitle1" style={{ marginLeft: 25 }}>
-              {ProjectDetails.sampling_parameters_json?.batch_size}
-              </Typography>
-              
-            </Grid>)}
-            {ProjectDetails && ProjectDetails?.sampling_parameters_json?.batch_size  && ( 
-            <Grid
-              item
-              xs={12}
-              md={12}
-              lg={12}
-              xl={12}
-              sm={12}
-              sx={{ mt: 2, display: "flex" }}
+              <CustomButton
+                sx={{
+                  borderRadius: 2,
+                  ml: { xs: 0, md: 2 },
+                  mt: { xs: 1, md: 0 },
+                }}
+                label="View Dataset"
+              />
+            </Link>
+          </Grid>
+        ))}
+
+        {/* Workspace Name */}
+        <Grid
+          container
+          item
+          xs={12}
+          sx={{
+            display: "flex",
+            flexDirection: { xs: "column", md: "row" },
+            alignItems: { xs: "flex-start", md: "center" },
+            mb: 2,
+          }}
+        >
+          <Typography variant="subtitle1">Workspace Name:</Typography>
+          <Typography
+            variant="subtitle1"
+            sx={{ ml: { xs: 0, md: 3 }, mt: { xs: 1, md: 0 } }}
+          >
+            {workspaceDetails.workspace_name}
+          </Typography>
+          <Link
+            to={`/workspaces/${ProjectDetails.workspace_id}`}
+            style={{ textDecoration: "none" }}
+          >
+            <CustomButton
+              sx={{
+                borderRadius: 2,
+                ml: { xs: 0, md: 2 },
+                mt: { xs: 1, md: 0 },
+              }}
+              label="View Workspace"
+            />
+          </Link>
+        </Grid>
+
+        {/* Filter String */}
+        {ProjectDetails.filter_string && (
+          <Grid
+            item
+            xs={12}
+            sx={{
+              display: "flex",
+              flexDirection: { xs: "column", md: "row" },
+              alignItems: { xs: "flex-start", md: "center" },
+              mb: 2,
+            }}
+          >
+            <Typography variant="subtitle1">Filter String:</Typography>
+            <Typography
+              variant="subtitle1"
+              sx={{ ml: { xs: 0, md: 3 }, mt: { xs: 1, md: 0 } }}
             >
-              <Typography
-                variant="subtitle1"
-                style={{ flexDirection: "column" }}
-              >
-                 Batch Number  :
-              </Typography>
-
-              <Typography variant="subtitle1" style={{ marginLeft: 25 }}>
-              {ProjectDetails.sampling_parameters_json?.batch_number}
-              </Typography>
-            </Grid>)}
-
-            {ProjectDetails.datasets.map((dataset,i) => (
-              <Grid
-                item
-                xs={12}
-                md={12}
-                lg={12}
-                xl={12}
-                sm={12}
-                sx={{ mt: 2, display: "flex" }}
-                key={i}
-              >
-                <Typography
-                  variant="subtitle1"
-                  style={{ flexDirection: "column" }}
-                >
-                  Dataset Instance :
-                </Typography>
-
-                <Typography variant="subtitle1" style={{ marginLeft: 25 }}>
-                  {dataset?.instance_name}
-                </Typography>
-                <Link
-                    to={`/datasets/${dataset?.instance_id}`}
-                    style={{ textDecoration: "none" }}
-                    >
-                    <CustomButton
-                        sx={{ borderRadius: 2,marginLeft:2 ,marginRight: 2 }}
-                        label="View Dataset"
-                    />
-                </Link>
-              </Grid>
-            ))}
-
-             <Grid
-                item
-                xs={12}
-                md={12}
-                lg={12}
-                xl={12}
-                sm={12}
-                sx={{ mt: 2, display: "flex" }}
-              >
-                <Typography
-                  variant="subtitle1"
-                  style={{ flexDirection: "column" }}
-                >
-                  Workspace Name :
-                </Typography>
-
-                <Typography variant="subtitle1" style={{ marginLeft: 25 }}>
-                {workspaceDetails.workspace_name}
-                </Typography>
-                <Link
-                    to={`/workspaces/${ProjectDetails.workspace_id}`}
-                    style={{ textDecoration: "none" }}
-                    >
-                    <CustomButton
-                        sx={{ borderRadius: 2,marginLeft:2 ,marginRight: 2 }}
-                        label="View Workspace"
-                    />
-                </Link>
-              </Grid>
-
-            {ProjectDetails.filter_string && (
-              <Grid
-                item
-                xs={12}
-                md={12}
-                lg={12}
-                xl={12}
-                sm={12}
-                sx={{ mt: 2, display: "flex" }}
-              >
-                <Typography
-                  variant="subtitle1"
-                  style={{ flexDirection: "column" }}
-                >
-                  Filter String :
-                </Typography>
-
-                <Typography variant="subtitle1" style={{ marginLeft: 25 }}>
-                  {ProjectDetails.filter_string}
-                </Typography>
-              </Grid>
-            )}
-          </div>
+              {ProjectDetails.filter_string}
+            </Typography>
+          </Grid>
         )}
-      </Grid>
+      </div>
+    )}
+  </Grid>
+
+  {/* Variable Parameters Section */}
+  <Grid container direction="row" sx={{ mt: 4 }}>
+    {ProjectDetails?.variable_parameters?.output_language && (
+      <div>
+        <Grid item xs={12} sx={{ mb: 2 }}>
+          <Typography
+            variant="h6"
+            sx={{ fontSize: { xs: "1rem", md: "1.25rem" } }}
+          >
+            Variable Parameters
+          </Typography>
+        </Grid>
+
+        {/* Output Language */}
+        <Grid
+          item
+          xs={12}
+          sx={{
+            display: "flex",
+            flexDirection: { xs: "column", md: "row" },
+            alignItems: { xs: "flex-start", md: "center" },
+            mb: 2,
+          }}
+        >
+          <Typography variant="subtitle1">Output Language:</Typography>
+          <Typography
+            variant="subtitle1"
+            sx={{ ml: { xs: 0, md: 3 }, mt: { xs: 1, md: 0 } }}
+          >
+            {ProjectDetails?.variable_parameters?.output_language}
+          </Typography>
+        </Grid>
+      </div>
+    )}
+  </Grid>
+</ThemeProvider>
 
-      <Grid container direction="row">
-        {ProjectDetails && ProjectDetails?.variable_parameters?.output_language && (
-          <div>
-            <Grid item xs={12} md={12} lg={12} xl={12} sm={12} sx={{ mt: 2 }}>
-              <Typography variant="h6">Variable Parameters</Typography>
-            </Grid>
-
-            <Grid
-              item
-              xs={12}
-              md={12}
-              lg={12}
-              xl={12}
-              sm={12}
-              sx={{ mt: 2, display: "flex" }}
-            >
-              <Typography
-                variant="subtitle1"
-                style={{ flexDirection: "column" }}
-              >
-                Output Language :
-              </Typography>
-              <Typography variant="subtitle1" style={{ marginLeft: 25 }}>
-                {ProjectDetails?.variable_parameters?.output_language}
-              </Typography>
-            </Grid>
-          </div>
-        )}
-      </Grid>
-    </ThemeProvider>
   );
 };
 
diff --git a/src/components/common/Header.jsx b/src/components/common/Header.jsx
index 3d8ec4c4..56063007 100644
--- a/src/components/common/Header.jsx
+++ b/src/components/common/Header.jsx
@@ -233,9 +233,9 @@ const handleopenproject=(id,type)=>{
     setAnchorElHelp(event.currentTarget);
   };
 
-  const handleInfo = (event) => {
-    console.log('Information button clicked!')
-  }
+  const handleInfo = () => {
+    window.open('https://github.com/AI4Bharat/Anudesh/wiki', '_blank'); 
+  };
 
   const handleCloseHelpMenu = () => {
     setAnchorElHelp(null);
diff --git a/src/components/common/MobileNavbar.jsx b/src/components/common/MobileNavbar.jsx
index c3e4fc03..e5d16ba9 100644
--- a/src/components/common/MobileNavbar.jsx
+++ b/src/components/common/MobileNavbar.jsx
@@ -61,152 +61,226 @@ function MobileNavbar(props) {
 
   return (
     <>
-      <Drawer open={openDrawer} onClose={() => setOpenDrawer(false)} PaperProps={{
-        style: {
-            padding: "16px"
-        }
-      }}>
+      <Drawer
+        open={openDrawer}
+        onClose={() => setOpenDrawer(false)}
+        PaperProps={{
+          sx: {
+            padding: 2,
+            width: { xs: "75%", sm: "50%", md: "30%" }, 
+          },
+        }}
+      >
         <Box
-            style={{
-                display: "flex",
-                flexDirection: "column",
-                justifyContent: "space-between",
-                height: "100%",
-                paddingBottom: "16px"
-            }}
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+            height: "100%",
+            pb: 2,
+          }}
         >
-            <Box>
-                <Link href="/profile" onClick={() => setOpenDrawer(false)} style={{
-                    textDecoration: "none"
-                }}>
-                    <Box
-                        style={{
-                            display: "flex",
-                            flexDirection: "row",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            columnGap: "16px",
-                            paddingBottom: "16px",
-                        }}
-                    >
-                        <Avatar
-                            alt="user_profile_pic"
-                            variant="contained"
-                            className="avatar"
-                        >
-                            {loggedInUserData && loggedInUserData.username && loggedInUserData.username.split("")[0]}
-                        </Avatar>
-                        <Typography variant="h6" sx={{ p: 0, ml : 1 }} style={{
-                            color: "black"
-                        }}>
-                            {loggedInUserData.username}
-                        </Typography>
-                    </Box>
-                </Link>
-                <Divider />
-            </Box>
-            <Box>
-                <List>
-                    {tabs.map((tab,i) => (
-                        <ListItem key={i} onClick={() => setOpenDrawer(false)}>
-                            {tab}
-                        </ListItem>
-                    ))}
-                </List>
-            </Box>
-            <Box>
-                <Typography variant="h6" align="center" style={{
-                    fontSize: "1.1rem"
-                }}>
-                    App Settings
+          <Box>
+            <Link
+              href="/profile"
+              onClick={() => setOpenDrawer(false)}
+              style={{ textDecoration: "none" }}
+            >
+              <Box
+                sx={{
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: 2,
+                  pb: 2,
+                }}
+              >
+                <Avatar
+                  alt="user_profile_pic"
+                  className="avatar"
+                  sx={{ bgcolor: "primary.main" }}
+                >
+                  {loggedInUserData?.username?.[0]}
+                </Avatar>
+                <Typography
+                  variant="h6"
+                  sx={{
+                    ml: 1,
+                    color: "text.primary",
+                    fontSize: { xs: "1rem", sm: "1.25rem" },
+                  }}
+                >
+                  {loggedInUserData.username}
                 </Typography>
-                <Divider />
-                <List>
-                    {appSettings.map((setting,index) => (
-                        <ListItem key={index}  style={{cursor:"pointer"}} onClick={setting.onclick}>
-                            {setting.control ? 
-                                <FormControlLabel
-                                    control={setting.control}
-                                    label={setting.name}
-                                />
-                                : 
-                                <Typography variant="body1" textAlign="center">
-                                    {setting.name}
-                                </Typography>}
-                        </ListItem>
-                    ))}
-                </List>
-            </Box>
-            <Box>
-                <Typography variant="h6" align="center" style={{
-                    fontSize: "1.1rem"
-                }}>
-                    User Settings
+              </Box>
+            </Link>
+            <Divider />
+          </Box>
+
+          <Box>
+            <List>
+              {tabs.map((tab, i) => (
+                <ListItem
+                  key={i}
+                  sx={{
+                    cursor: "pointer",
+                    py: 1,
+                    px: 2,
+                    "&:hover": { bgcolor: "action.hover" },
+                  }}
+                  onClick={() => setOpenDrawer(false)}
+                >
+                  {tab}
+                </ListItem>
+              ))}
+            </List>
+          </Box>
+
+          {/* App Settings Section */}
+          <Box>
+            <Typography
+              variant="h6"
+              align="center"
+              sx={{ fontSize: { xs: "1rem", sm: "1.1rem" }, pb: 1 }}
+            >
+              App Settings
+            </Typography>
+            <Divider />
+            <List>
+              {appSettings.map((setting, index) => (
+                <ListItem
+                  key={index}
+                  sx={{
+                    cursor: "pointer",
+                    py: 1,
+                    px: 2,
+                    "&:hover": { bgcolor: "action.hover" },
+                  }}
+                  onClick={setting.onclick}
+                >
+                  {setting.control ? (
+                    <FormControlLabel
+                      control={setting.control}
+                      label={setting.name}
+                    />
+                  ) : (
+                    <Typography variant="body1" textAlign="center">
+                      {setting.name}
+                    </Typography>
+                  )}
+                </ListItem>
+              ))}
+            </List>
+          </Box>
+
+          <Box>
+            <Typography
+              variant="h6"
+              align="center"
+              sx={{ fontSize: { xs: "1rem", sm: "1.1rem" }, pb: 1 }}
+            >
+              User Settings
+            </Typography>
+            <Divider />
+            <List>
+              {userSettings.map((setting) => (
+                <ListItem
+                  key={setting.name}
+                  sx={{
+                    cursor: "pointer",
+                    py: 1,
+                    px: 2,
+                    "&:hover": { bgcolor: "action.hover" },
+                  }}
+                  onClick={() => {
+                    setting.onclick();
+                    setOpenDrawer(false);
+                  }}
+                >
+                  <Typography variant="body1" textAlign="center">
+                    {setting.name}
+                  </Typography>
+                </ListItem>
+              ))}
+              {!loggedInUserData.guest_user && (
+                <ListItem
+                  key="change-password"
+                  sx={{
+                    cursor: "pointer",
+                    py: 1,
+                    px: 2,
+                    "&:hover": { bgcolor: "action.hover" },
+                  }}
+                  onClick={() => {
+                    setOpenDrawer(false);
+                    handleChangePassword(loggedInUserData.email);
+                  }}
+                >
+                  <Typography variant="body1" textAlign="center">
+                    Change Password
+                  </Typography>
+                </ListItem>
+              )}
+              <ListItem
+                key="logout"
+                sx={{
+                  cursor: "pointer",
+                  py: 1,
+                  px: 2,
+                  "&:hover": { bgcolor: "action.hover" },
+                }}
+                onClick={onLogoutClick}
+              >
+                <Typography variant="body1" textAlign="center">
+                  Logout
                 </Typography>
-                <Divider />
-                <List>
-                    {userSettings.map((setting) => (
-                        <ListItem key={setting} style={{cursor:"pointer"}} onClick={() => {setting.onclick(); setOpenDrawer(false)}}>
-                            <Typography variant="body1" textAlign="center">
-                                {setting.name}
-                            </Typography>
-                        </ListItem>
-                    ))}
-                    {!loggedInUserData.guest_user && 
-                        <ListItem key={3} style={{cursor:"pointer"}}  onClick={() => {setOpenDrawer(false); handleChangePassword(loggedInUserData.email);}}>
-                            <Typography variant="body1" textAlign="center">
-                            Change Password
-                            </Typography>
-                        </ListItem>
-                    }
-                    <ListItem key={4}  style={{cursor:"pointer"}}  onClick={() => onLogoutClick() }>
-                        <Typography variant="body1" textAlign="center">
-                        Logout
-                        </Typography>
-                    </ListItem>
-                </List>
-            </Box>
+              </ListItem>
+            </List>
+          </Box>
         </Box>
       </Drawer>
       <AppBar style={{ backgroundColor: "#ffffff", padding: "8px 0" }}>
         <Grid
-            container
-            direction="row"
-            justifyContent={"space-between"}
-            style={{
-                padding: "0 5%"
-            }}
-        > 
-            <Grid item sx={{ display: "flex", alignItems: "center" }}>
-                <Link href="/projects">
-                <Image 
-                    onClick={() => navigate("/")} 
-                    src="https://i.imgur.com/56Ut9oz.png"
-                    alt="anudesh"
-                    height="100"
-                    width="100"
-                    className={classes.headerLogo}
-                    sx={{ marginTop: "5%" }}
-                  />
-                </Link>
-                <Typography
-                  variant="h4"
-                  className="headerTitle"
-                  style={{
-                    fontSize: "28px",
-                    fontWeight: "lighter",
-                    fontFamily: 'Rowdies,cursive,Roboto,sans-serif'
-
-                  }}
-                >
-                  Anudesh
-                </Typography>
-            </Grid>
-            <Grid item>
-                <IconButton onClick={() => setOpenDrawer(!openDrawer)}>
-                    <Menu />
-                </IconButton>
-            </Grid>
+          container
+          direction="row"
+          justifyContent={"space-between"}
+          style={{
+            padding: "0 5%",
+          }}
+        >
+          <Grid
+            item
+            sx={{ display: "flex", alignItems: "center", gap: "10px" }}
+          >
+            <Link href="/projects">
+              <Image
+                onClick={() => navigate("/")}
+                src="https://i.imgur.com/56Ut9oz.png"
+                alt="anudesh"
+                height="100"
+                width="100"
+                className={classes.headerLogo}
+                sx={{ marginTop: "5%" }}
+              />
+            </Link>
+            <Typography
+              className="headerTitle"
+              style={{
+                fontSize: "28px",
+                fontWeight: "bold",
+                fontFamily: 'Rowdies,"Roboto,sans-serif',
+                color: "#000000",
+              }}
+            >
+              Anudesh
+            </Typography>
+          </Grid>
+          <Grid item>
+            <IconButton onClick={() => setOpenDrawer(!openDrawer)}>
+              <Menu />
+            </IconButton>
+          </Grid>
         </Grid>
       </AppBar>
     </>
diff --git a/src/components/common/ProjectCard.jsx b/src/components/common/ProjectCard.jsx
index b92d899d..58e22542 100644
--- a/src/components/common/ProjectCard.jsx
+++ b/src/components/common/ProjectCard.jsx
@@ -38,7 +38,6 @@ const ProjectCard = (props) => {
 
   const userRole =projectObj.project_stage && UserMappedByProjectStage(projectObj.project_stage).name;
   return (
-    // <Link to={`/projects/${projectObj.id}`} style={{ textDecoration: "none" }}>
     <>
     <div onClick={() => handleCardClick(projectObj)}>
 
diff --git a/src/components/common/Search.jsx b/src/components/common/Search.jsx
index aa6b903a..66fee899 100644
--- a/src/components/common/Search.jsx
+++ b/src/components/common/Search.jsx
@@ -1,6 +1,7 @@
 import { InputBase,ThemeProvider,Grid } from "@mui/material";
 import SearchIcon from '@mui/icons-material/Search';
 import { useEffect, useRef, useState } from "react";
+import { useTheme } from "@mui/material/styles";
 import themeDefault from '../../themes/theme'
  import  "../../styles/Dataset.css";
  import { useDispatch, useSelector } from "react-redux";
@@ -41,11 +42,10 @@ const Search = (props) => {
     setTargetLang(storedLanguage);
     console.log(globalTransliteration,localStorage.getItem("globalTransliteration"));
   }, [searchValue]);
- 
-
 
+  const theme = useTheme();
   return (
-   <Grid container justifyContent="end" sx={{marginTop:"20px"}}>
+   <Grid container justifyContent={{xs:"start",md:"end"}} sx={{marginTop:"20px",width:"100%"}}>
                 <Grid   className="search">
                     <Grid className="searchIcon">
                         <SearchIcon fontSize="small" />
@@ -57,7 +57,7 @@ const Search = (props) => {
                     renderComponent={(props) => (
                       <textarea
                       
-                      placeholder="Search..."
+                      placeholder="Search here"
                       {...props}
                       style={{background: "transparent", borderRadius:"16px", padding:"2px", height:"24px", width:"90%", marginLeft:"10%", resize:"none", marginTop:"2%", border: "none", outline: "none", overflow: "hidden"}}
                       />
@@ -74,15 +74,18 @@ const Search = (props) => {
                     }}
                     lang={targetLang}
                     style={{background:"#F0F0F0", borderRadius:"16px", padding:"2px", height:"24px", width:"90%", marginLeft:"10%", resize:"none", marginTop:"2%"}}
-                    /> : 
-                    <InputBase
-                        sx={{ ml: 4 }}
-                        // inputRef={ref}
-                        placeholder="Search..."
-                        value={searchValue}
-                        onChange={(e) => handleChangeName(e.target.value)}
-                        inputProps={{ "aria-label": "search" }}
-                    />}
+                    /> : (
+                      <InputBase
+                      sx={{
+                        ml: 4,
+                        width: "120px",
+                      }}
+                      placeholder="Search here"
+                      value={searchValue}
+                      onChange={(e) => handleChangeName(e.target.value)}
+                      inputProps={{ "aria-label": "search" }}
+                    />
+                    )}
                 </Grid>
                 </Grid>
           
diff --git a/src/components/common/WorkspaceTable.jsx b/src/components/common/WorkspaceTable.jsx
index ab102fec..ad407bf2 100644
--- a/src/components/common/WorkspaceTable.jsx
+++ b/src/components/common/WorkspaceTable.jsx
@@ -89,6 +89,7 @@ const WorkspaceTable = (props) => {
         setCellHeaderProps: (sort) => ({
           style: { height: "70px", padding: "16px" },
         }),
+        setCellProps: () => ({ style: { wordWrap: "break-word" } }),
       },
     },
     {