diff --git a/app/javascript/components/recordings/RecordingRow.jsx b/app/javascript/components/recordings/RecordingRow.jsx
index 4ea902a58d1cd7346772265c031f2d7be6db4608..4a18a8fd7eee277d3bfe6e173cc31f4471cf98db 100644
--- a/app/javascript/components/recordings/RecordingRow.jsx
+++ b/app/javascript/components/recordings/RecordingRow.jsx
@@ -18,7 +18,7 @@ import Modal from '../shared_components/modals/Modal';
 
 // TODO: Amir - Refactor this.
 export default function RecordingRow({
-  recording, visibilityMutation: useVisibilityAPI, updateMutation: useUpdateAPI, deleteMutation: useDeleteAPI,
+  recording, visibilityMutation: useVisibilityAPI, deleteMutation: useDeleteAPI,
 }) {
   const { t } = useTranslation();
 
@@ -29,7 +29,7 @@ export default function RecordingRow({
   }
 
   const visibilityAPI = useVisibilityAPI();
-  const [isEditing, setIsEditing] = useState(+false);
+  const [isEditing, setIsEditing] = useState(false);
   const [isUpdating, setIsUpdating] = useState(false);
 
   return (
@@ -43,12 +43,11 @@ export default function RecordingRow({
             <strong>
               {/* TODO: Samuel - add an x button or something to the edit name form */}
               <UpdateRecordingForm
-                mutation={useUpdateAPI}
                 recordId={recording.record_id}
                 name={recording.name}
                 hidden={!isEditing || isUpdating}
                 setIsUpdating={setIsUpdating}
-                noLabel
+                setIsEditing={setIsEditing}
               />
               {
                 !isEditing
@@ -144,6 +143,5 @@ RecordingRow.propTypes = {
     map: PropTypes.func,
   }).isRequired,
   visibilityMutation: PropTypes.func.isRequired,
-  updateMutation: PropTypes.func.isRequired,
   deleteMutation: PropTypes.func.isRequired,
 };
diff --git a/app/javascript/components/recordings/forms/UpdateRecordingForm.jsx b/app/javascript/components/recordings/forms/UpdateRecordingForm.jsx
index ef4eca8b839ce59d3b00b19b7cd8a3815c5ff7bd..540b1990125e713f0e223defec46f5d124d2079d 100644
--- a/app/javascript/components/recordings/forms/UpdateRecordingForm.jsx
+++ b/app/javascript/components/recordings/forms/UpdateRecordingForm.jsx
@@ -1,46 +1,37 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useForm } from 'react-hook-form';
-import FormControl from '../../shared_components/forms/FormControl';
-import Form from '../../shared_components/forms/Form';
-import { UpdateRecordingsFormConfig, UpdateRecordingsFormFields } from '../../../helpers/forms/UpdateRecordingsFormHelpers';
+import useUpdateRecording from '../../../hooks/mutations/recordings/useUpdateRecording';
 
 export default function UpdateRecordingForm({
-  name, noLabel, recordId, hidden, setIsUpdating, mutation: useUpdateAPI,
+  name, recordId, hidden, setIsUpdating, setIsEditing,
 }) {
-  const updateAPI = useUpdateAPI(recordId);
+  const updateRecording = useUpdateRecording(recordId);
 
-  UpdateRecordingsFormConfig.defaultValues.name = name;
-
-  const methods = useForm(UpdateRecordingsFormConfig);
-  const fields = UpdateRecordingsFormFields;
-
-  useEffect(() => { setIsUpdating(updateAPI.isLoading); }, [updateAPI.isLoading]);
+  useEffect(() => { setIsUpdating(updateRecording.isLoading); }, [updateRecording.isLoading]);
 
   return (
-    <Form methods={methods} onBlur={methods.handleSubmit(updateAPI.mutate)} hidden={hidden}>
-      <FormControl
-        field={fields.name}
-        noLabel={noLabel}
-        type="text"
-        disabled={updateAPI.isLoading}
-      />
-    </Form>
+    <input
+      type="text"
+      className="form-control"
+      hidden={hidden}
+      disabled={updateRecording.isLoading}
+      onBlur={(e) => { setIsEditing(false); updateRecording.mutate({ recording: { name: e.target.value } }); }}
+      defaultValue={name}
+    />
   );
 }
 
 UpdateRecordingForm.defaultProps = {
   name: '',
-  noLabel: true,
   hidden: false,
   setIsUpdating: () => { },
+  setIsEditing: () => { },
 };
 
 UpdateRecordingForm.propTypes = {
   name: PropTypes.string,
-  noLabel: PropTypes.bool,
   recordId: PropTypes.string.isRequired,
   hidden: PropTypes.bool,
   setIsUpdating: PropTypes.func,
-  mutation: PropTypes.func.isRequired,
+  setIsEditing: PropTypes.func,
 };
diff --git a/app/javascript/components/recordings/room_recordings/RoomsRecordingRow.jsx b/app/javascript/components/recordings/room_recordings/RoomsRecordingRow.jsx
index fdcf754fe64ea39500f07479289c8dd2f2b9e15a..7f6d14dba19e55a12fa550becec659e26cdaf42b 100644
--- a/app/javascript/components/recordings/room_recordings/RoomsRecordingRow.jsx
+++ b/app/javascript/components/recordings/room_recordings/RoomsRecordingRow.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import useUpdateRecordingVisibility from '../../../hooks/mutations/recordings/useUpdateRecordingVisibility';
-import useUpdateRecording from '../../../hooks/mutations/recordings/useUpdateRecording';
 import useDeleteRecording from '../../../hooks/mutations/recordings/useDeleteRecording';
 import RecordingRow from '../RecordingRow';
 
@@ -10,7 +9,6 @@ export default function RoomsRecordingRow({ recording }) {
     <RecordingRow
       recording={recording}
       visibilityMutation={useUpdateRecordingVisibility}
-      updateMutation={useUpdateRecording}
       deleteMutation={useDeleteRecording}
     />
   );
diff --git a/app/javascript/hooks/mutations/admin/server_recordings/useRecordingsReSync.jsx b/app/javascript/hooks/mutations/admin/server_recordings/useRecordingsReSync.jsx
index e63d4aa3a23de2cb204006ea12aa84632fdf13b8..58d96481e037a64754ee509b59e6735c75078427 100644
--- a/app/javascript/hooks/mutations/admin/server_recordings/useRecordingsReSync.jsx
+++ b/app/javascript/hooks/mutations/admin/server_recordings/useRecordingsReSync.jsx
@@ -13,7 +13,7 @@ export default function useRecordingsReSync(friendlyId) {
       onSuccess: () => {
         queryClient.invalidateQueries('getServerRecordings');
         queryClient.invalidateQueries(['getRoomRecordings', { friendlyId }]);
-        queryClient.invalidateQueries('getRecordings');
+        queryClient.invalidateQueries(['getRecordings']);
         toast.success(t('toast.success.room.recordings_synced'));
       },
       onError: () => {
diff --git a/app/javascript/hooks/mutations/recordings/useDeleteRecording.jsx b/app/javascript/hooks/mutations/recordings/useDeleteRecording.jsx
index df8f0e5d927fe56a82c9d694675aaaddacacdc7f..370467969eafa86594468891f104ddb13125110d 100644
--- a/app/javascript/hooks/mutations/recordings/useDeleteRecording.jsx
+++ b/app/javascript/hooks/mutations/recordings/useDeleteRecording.jsx
@@ -11,7 +11,7 @@ export default function useDeleteRecording({ recordId, onSettled }) {
     () => axios.delete(`/recordings/${recordId}.json`),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries('getRecordings');
+        queryClient.invalidateQueries(['getRecordings']);
         queryClient.invalidateQueries('getRecordingsCount');
         queryClient.invalidateQueries(['getRoomRecordings']);
         queryClient.invalidateQueries('getServerRecordings');
diff --git a/app/javascript/hooks/mutations/recordings/useUpdateRecording.jsx b/app/javascript/hooks/mutations/recordings/useUpdateRecording.jsx
index 4eaf25719899807cc8937c2a3f10633f06b134d9..0bc4418ab0352eb2b3b9d88e5d885f18eaf40914 100644
--- a/app/javascript/hooks/mutations/recordings/useUpdateRecording.jsx
+++ b/app/javascript/hooks/mutations/recordings/useUpdateRecording.jsx
@@ -11,7 +11,8 @@ export default function useUpdateRecording(recordId) {
     (recordingData) => axios.put(`/recordings/${recordId}.json`, recordingData),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries('getRecordings');
+        queryClient.invalidateQueries(['getRecordings']);
+        queryClient.invalidateQueries(['getRoomRecordings']);
         queryClient.invalidateQueries('getServerRecordings');
         toast.success(t('toast.success.recording.recording_name_updated'));
       },
diff --git a/app/javascript/hooks/mutations/recordings/useUpdateRecordingVisibility.jsx b/app/javascript/hooks/mutations/recordings/useUpdateRecordingVisibility.jsx
index fc355e1dea4f898b897d1be1aa6549ce85f59289..e8039b37586905b845ea3e6f3b536a6e064500f6 100644
--- a/app/javascript/hooks/mutations/recordings/useUpdateRecordingVisibility.jsx
+++ b/app/javascript/hooks/mutations/recordings/useUpdateRecordingVisibility.jsx
@@ -11,7 +11,7 @@ export default function useUpdateRecordingVisibility() {
     (visibilityData) => axios.post('/recordings/update_visibility.json', visibilityData),
     {
       onSuccess: () => {
-        queryClient.invalidateQueries('getRecordings');
+        queryClient.invalidateQueries(['getRecordings']);
         toast.success(t('toast.success.recording.recording_visibility_updated'));
       },
       onError: () => {