diff --git a/src/Components/Workspace/Transcripts/index.js b/src/Components/Workspace/Transcripts/index.js
index 312c3233..e278c6f9 100644
--- a/src/Components/Workspace/Transcripts/index.js
+++ b/src/Components/Workspace/Transcripts/index.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { withAuthorization } from '../../Session';
 import TranscriptRow from '@bbc/digital-paper-edit-storybook/TranscriptRow';
 import { formatDates } from '../../../Util/time';
+import './index.scss';
 
 const Transcripts = (props) => {
   const items = props.items;
@@ -23,7 +24,7 @@ const Transcripts = (props) => {
         created={ created ? created : 'NA' }
         updated={ updated ? updated : 'NA' }
         message={ item.message }
-        mediaDuration={ item.runtime?.humanReadable ? item.runtime?.humanReadable : item.duration }
+        mediaDuration={ item.duration ? item.duration : null }
         transcriptionDuration={ item.transcriptionDuration }
         status={ item.status }
         progress={ progress }
diff --git a/src/Components/Workspace/index.js b/src/Components/Workspace/index.js
index 07b34abe..81c9540c 100644
--- a/src/Components/Workspace/index.js
+++ b/src/Components/Workspace/index.js
@@ -283,10 +283,21 @@ const WorkspaceView = props => {
 
   // general
 
-  const finishCreateorUpdateTranscript = async (transcript, duration) => {
+  const formatDuration = async (duration) => {
+    const seconds = Number(duration);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = Math.floor(seconds % 60);
+
+    const mDisplay = m > 0 ? m + (m === 1 ? ' min ' : ' mins ') : '';
+    const sDisplay = s > 0 ? s + (s === 1 ? ' s' : ' s') : '';
+
+    return mDisplay + sDisplay;
+  };
+
+  const finishCreateOrUpdateTranscript = async (transcript, duration, video) => {
+    video.remove();
     const file = transcript.file;
     delete transcript.file;
-    const formattedDuration = `${ parseInt(duration / 60, 10) } mins`;
 
     const newTranscript = await createOrUpdateCollectionItem({
       ...transcript,
@@ -294,7 +305,7 @@ const WorkspaceView = props => {
       projectId: id,
       description: transcript.description ? transcript.description : '',
       status: 'uploading',
-      duration: formattedDuration
+      duration: duration,
     }, createTranscript, updateTranscript);
 
     asyncUploadFile(newTranscript.id, file);
@@ -305,17 +316,18 @@ const WorkspaceView = props => {
 
   };
 
-  const getDuration = async (newTranscript) => {
+  const createOrUpdateWithDuration = async (newTranscript) => {
     const file = newTranscript.file;
     const video = document.createElement('video');
+    video.setAttribute('id', 'preload');
     video.preload = 'metadata';
 
-    // eslint-disable-next-line no-return-assign
     video.onloadedmetadata = async () => {
       window.URL.revokeObjectURL(video.src);
       const duration = video.duration;
+      const formattedDuration = await formatDuration(duration);
 
-      return await finishCreateorUpdateTranscript(newTranscript, duration);
+      return await finishCreateOrUpdateTranscript(newTranscript, formattedDuration, video);
     };
 
     video.src = URL.createObjectURL(file);
@@ -332,6 +344,7 @@ const WorkspaceView = props => {
   };
 
   const createOrUpdateTranscript = async (item) => {
+    console.log('trying to create a transcript...', item);
     let newTranscript = { ...item, projectId: id };
     delete newTranscript.display;
 
@@ -343,7 +356,7 @@ const WorkspaceView = props => {
       return newTranscript;
 
     } else {
-      return await getDuration(newTranscript);
+      return await createOrUpdateWithDuration(newTranscript);
     }
   };