diff --git a/src/components/molecules/SaveRecording.tsx b/src/components/molecules/SaveRecording.tsx
index b4e175bb..b7d0c125 100644
--- a/src/components/molecules/SaveRecording.tsx
+++ b/src/components/molecules/SaveRecording.tsx
@@ -13,14 +13,14 @@ interface SaveRecordingProps {
   fileName: string;
 }
 
-export const SaveRecording = ({fileName}: SaveRecordingProps) => {
+export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
 
   const [openModal, setOpenModal] = useState<boolean>(false);
   const [needConfirm, setNeedConfirm] = useState<boolean>(false);
   const [recordingName, setRecordingName] = useState<string>(fileName);
   const [waitingForSave, setWaitingForSave] = useState<boolean>(false);
 
-  const { browserId, setBrowserId, notify, recordings } =  useGlobalInfoStore();
+  const { browserId, setBrowserId, notify, recordings } = useGlobalInfoStore();
   const { socket } = useSocketStore();
 
   const handleChangeOfTitle = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -41,7 +41,7 @@ export const SaveRecording = ({fileName}: SaveRecordingProps) => {
     }
   };
 
-  const exitRecording = useCallback(async() => {
+  const exitRecording = useCallback(async () => {
     notify('success', 'Recording saved successfully');
     if (browserId) {
       await stopRecording(browserId);
@@ -66,45 +66,45 @@ export const SaveRecording = ({fileName}: SaveRecordingProps) => {
   return (
     <div>
       <Button sx={{
-        width:'100px',
+        width: '100px',
         background: 'white',
         color: 'rgba(0,128,0,0.7)',
-        '&:hover': {background: 'white', color: 'green'},
+        '&:hover': { background: 'white', color: 'green' },
         padding: '11px',
         marginRight: '10px',
       }} onClick={() => setOpenModal(true)}>
-        <FlagIcon sx={{marginRight:'3px'}}/> FINISH
+        <FlagIcon sx={{ marginRight: '3px' }} /> FINISH
       </Button>
 
       <GenericModal isOpen={openModal} onClose={() => setOpenModal(false)} modalStyle={modalStyle}>
-        <form onSubmit={handleSaveRecording} style={{paddingTop:'50px', display: 'flex', flexDirection: 'column'}} >
+        <form onSubmit={handleSaveRecording} style={{ paddingTop: '50px', display: 'flex', flexDirection: 'column' }} >
           <Typography>Save the recording as:</Typography>
           <TextField
             required
-            sx={{width: '250px', paddingBottom: '10px', margin: '15px 0px'}}
+            sx={{ width: '250px', paddingBottom: '10px', margin: '15px 0px' }}
             onChange={handleChangeOfTitle}
             id="title"
             label="Recording title"
             variant="outlined"
             defaultValue={recordingName ? recordingName : null}
           />
-            { needConfirm
-              ?
-              (<React.Fragment>
-                <Button color="error" variant="contained" onClick={saveRecording}>Confirm</Button>
-                <WarningText>
-                  <NotificationImportantIcon color="warning"/>
-                  Recording already exists, please confirm the recording's overwrite.
-                </WarningText>
-              </React.Fragment>)
-              : <Button type="submit" variant="contained">Save</Button>
-            }
-          { waitingForSave &&
-              <Tooltip title='Optimizing and saving the workflow' placement={"bottom"}>
-                  <Box sx={{ width: '100%' }}>
-                      <LinearProgress/>
-                  </Box>
-              </Tooltip>
+          {needConfirm
+            ?
+            (<React.Fragment>
+              <Button color="error" variant="contained" onClick={saveRecording}>Confirm</Button>
+              <WarningText>
+                <NotificationImportantIcon color="warning" />
+                Recording already exists, please confirm the recording's overwrite.
+              </WarningText>
+            </React.Fragment>)
+            : <Button type="submit" variant="contained">Save</Button>
+          }
+          {waitingForSave &&
+            <Tooltip title='Optimizing and saving the workflow' placement={"bottom"}>
+              <Box sx={{ width: '100%' }}>
+                <LinearProgress />
+              </Box>
+            </Tooltip>
           }
         </form>
       </GenericModal>
@@ -119,7 +119,7 @@ const modalStyle = {
   width: '20%',
   backgroundColor: 'background.paper',
   p: 4,
-  height:'fit-content',
-  display:'block',
+  height: 'fit-content',
+  display: 'block',
   padding: '20px',
 };