Index: main/trunk/model-interfaces-dev/atea/js/asr/asr-controller.js
===================================================================
--- main/trunk/model-interfaces-dev/atea/js/asr/asr-controller.js	(revision 35284)
+++ main/trunk/model-interfaces-dev/atea/js/asr/asr-controller.js	(revision 35285)
@@ -92,4 +92,15 @@
                 failures: []
             }
+        },
+        methods:
+        {
+            playAudioFile(fileName) {
+                loadAudioFile(fileName);
+                // TODO: play audio element
+            },
+            // TODO: give transcriptions a unique ID
+            removeTranscription(id) {
+                
+            }
         }
     }
Index: main/trunk/model-interfaces-dev/atea/style/asr.scss
===================================================================
--- main/trunk/model-interfaces-dev/atea/style/asr.scss	(revision 35284)
+++ main/trunk/model-interfaces-dev/atea/style/asr.scss	(revision 35285)
@@ -215,8 +215,4 @@
 }
 
-.transcription__remove-button {
-    order: 100;
-}
-
 .transcription__word-list {
     font: var(--monospace-font);
Index: main/trunk/model-interfaces-dev/atea/transform/pages/asr.xsl
===================================================================
--- main/trunk/model-interfaces-dev/atea/transform/pages/asr.xsl	(revision 35284)
+++ main/trunk/model-interfaces-dev/atea/transform/pages/asr.xsl	(revision 35285)
@@ -80,18 +80,41 @@
 
                 <ul class="transcription__list">
-                    <li v-for="transcription in transcriptions" class="transcription__container">
-                        {{ transcription.transcription }}
-                    </li>
+                    <!-- Displays any failed transcriptions -->
                     <li v-for="failure in failures" class="transcription__error-container">
                         Failed to transcribe <i v-if="failure.file">{{ failure.file }}</i><br/>
-                        <span v-if="failure.message">Reason:    {{ failure.message }}</span>
+                        <span v-if="failure.message">Reason: {{ failure.message }}</span>
+                    </li>
+
+                    <li v-for="transcription in transcriptions" class="transcription__container">
+                        <div class="transcription__header">
+                            <button class="btn-fab theme-flat" v-on:click="playAudioFile" type="button">
+                                <span class="material-icons">&#xE037;</span> <!-- play_arrow -->
+                            </button>
+
+                            <p class="transcription__text">{{ transcription.transcription }}</p>
+                            <p class="body2 transcription__file-name">File: {{ transcription.file_name }}</p>
+
+                            <button class="btn-fab theme-error" v-on:click="removeTranscription" type="button">
+                                <span class="material-icons">&#xE872;</span> <!-- delete -->
+                            </button>
+                        </div>
+
+                        <gsf:div class="transcription__word-list" id="transcriptionWordList">
+                            <ul class="transcription__list">
+                                <li v-for="line in lines" style="display: flex">
+                                    <span v-for="word in line.words" style="border: 1px solid blue">{{ word }}</span>
+                                </li>
+                            </ul>
+                        </gsf:div>
+                        
+                        <div class="audio-slider-container">
+                            <input type="range" min="0" value="0" class="audio-slider" />
+                        </div>
+
+                        <hr class="divider" />
                     </li>
                 </ul>
-
-                <ul class="transcription__list">
-                    
-                </ul>
     
-                <!-- <ul id="transcriptionsList" class="transcription__list"></ul> -->
+                <ul id="transcriptionsList" class="transcription__list"></ul>
     
                 <template id="transcriptionTemplate">
@@ -116,8 +139,4 @@
                             </ul>
                         </gsf:div>
-                        
-                        <div class="audio-slider-container">
-                            <input type="range" min="0" value="0" class="audio-slider" />
-                        </div>
 
                         <hr class="divider" />
@@ -137,5 +156,6 @@
         
         <!-- TODO: Switch to production version for release builds -->
-        <gsf:script src="https://unpkg.com/vue@next"></gsf:script>
+        <!-- <gsf:script src="https://unpkg.com/vue@next"></gsf:script> -->
+        <gsf:script src="https://cdn.jsdelivr.net/npm/vue@3.2.1/dist/vue.global.js"></gsf:script>
         <gsf:script src="interfaces/{$interface_name}/js/asr/asr-controller.js" type="module"></gsf:script>
         <!-- <script type="module" src="interfaces/{$interface_name}/js/asr/asr-controller.js">
