diff --git a/src/components/molecules/RecordingsTable.tsx b/src/components/molecules/RecordingsTable.tsx
index ee510761..997c4023 100644
--- a/src/components/molecules/RecordingsTable.tsx
+++ b/src/components/molecules/RecordingsTable.tsx
@@ -15,7 +15,7 @@ import { useGlobalInfoStore } from "../../context/globalInfo";
 import { deleteRecordingFromStorage, getStoredRecordings } from "../../api/storage";
 
 interface Column {
-  id: 'interpret' | 'name' | 'create_date' | 'edit' | 'pairs' | 'update_date'| 'delete';
+  id: 'interpret' | 'name' | 'create_date' | 'edit' | 'pairs' | 'update_date' | 'delete';
   label: string;
   minWidth?: number;
   align?: 'right';
@@ -65,8 +65,8 @@ interface Data {
 }
 
 interface RecordingsTableProps {
-  handleEditRecording: (fileName:string) => void;
-  handleRunRecording: (fileName:string, params: string[]) => void;
+  handleEditRecording: (fileName: string) => void;
+  handleRunRecording: (fileName: string, params: string[]) => void;
 }
 
 export const RecordingsTable = ({ handleEditRecording, handleRunRecording }: RecordingsTableProps) => {
@@ -106,7 +106,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording }: Rec
     }
   }
 
-  useEffect( () => {
+  useEffect(() => {
     if (rows.length === 0) {
       fetchRecordings();
     }
@@ -138,7 +138,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording }: Rec
                   <TableRow hover role="checkbox" tabIndex={-1} key={row.id}>
                     {columns.map((column) => {
                       // @ts-ignore
-                      const value : any = row[column.id];
+                      const value: any = row[column.id];
                       if (value !== undefined) {
                         return (
                           <TableCell key={column.id} align={column.align}>
@@ -150,23 +150,23 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording }: Rec
                           case 'interpret':
                             return (
                               <TableCell key={column.id} align={column.align}>
-                                <InterpretButton handleInterpret={() => handleRunRecording(row.name, row.params || [])}/>
+                                <InterpretButton handleInterpret={() => handleRunRecording(row.name, row.params || [])} />
                               </TableCell>
                             );
                           case 'edit':
                             return (
                               <TableCell key={column.id} align={column.align}>
-                                <IconButton aria-label="add" size= "small" onClick={() => {
+                                <IconButton aria-label="add" size="small" onClick={() => {
                                   handleEditRecording(row.name);
-                                }} sx={{'&:hover': { color: '#1976d2', backgroundColor: 'transparent' }}}>
-                                  <Edit/>
+                                }} sx={{ '&:hover': { color: '#1976d2', backgroundColor: 'transparent' } }}>
+                                  <Edit />
                                 </IconButton>
                               </TableCell>
                             );
                           case 'delete':
                             return (
                               <TableCell key={column.id} align={column.align}>
-                                <IconButton aria-label="add" size= "small" onClick={() => {
+                                <IconButton aria-label="add" size="small" onClick={() => {
                                   deleteRecordingFromStorage(row.name).then((result: boolean) => {
                                     if (result) {
                                       setRows([]);
@@ -174,20 +174,20 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording }: Rec
                                       fetchRecordings();
                                     }
                                   })
-                                }} sx={{'&:hover': { color: '#1976d2', backgroundColor: 'transparent' }}}>
-                                  <DeleteForever/>
+                                }} sx={{ '&:hover': { color: '#1976d2', backgroundColor: 'transparent' } }}>
+                                  <DeleteForever />
                                 </IconButton>
                               </TableCell>
                             );
                           default:
-                              return null;
+                            return null;
                         }
                       }
                     })}
                   </TableRow>
                 );
               })
-              : null }
+              : null}
           </TableBody>
         </Table>
       </TableContainer>
@@ -208,13 +208,13 @@ interface InterpretButtonProps {
   handleInterpret: () => void;
 }
 
-const InterpretButton = ( {handleInterpret}:InterpretButtonProps) => {
+const InterpretButton = ({ handleInterpret }: InterpretButtonProps) => {
   return (
-    <IconButton aria-label="add" size= "small" onClick={() => {
+    <IconButton aria-label="add" size="small" onClick={() => {
       handleInterpret();
     }}
-                sx={{'&:hover': { color: '#1976d2', backgroundColor: 'transparent' }}}>
-      <PlayCircle/>
+      sx={{ '&:hover': { color: '#1976d2', backgroundColor: 'transparent' } }}>
+      <PlayCircle />
     </IconButton>
   )
 }