Index: main/trunk/model-interfaces-dev/atea/js/asr/asr-controller.js
===================================================================
--- main/trunk/model-interfaces-dev/atea/js/asr/asr-controller.js	(revision 35265)
+++ main/trunk/model-interfaces-dev/atea/js/asr/asr-controller.js	(revision 35267)
@@ -8,5 +8,5 @@
 * The name of the file input that audio files can be uploaded to.
 */
-const FILE_UPLOAD_INPUT_NAME = "#fileUpload";
+const FILE_UPLOAD_INPUT_NAME = "#audioFileUpload";
 
 /**
@@ -126,4 +126,6 @@
     const clone = TRANSCRIPTION_TEMPLATE.content.firstElementChild.cloneNode(true);
 
+    const textElement = clone.querySelector(".transcription__text");
+    textElement.textContent = transcription.transcription;
     const fileNameElement = clone.querySelector(".transcription__file-name");
     fileNameElement.textContent = transcription.file_name;
@@ -275,8 +277,8 @@
 {
     if (e.target.files.length <= 0) {
-        $("#btnFileUpload").prop("disabled", true);
+        $("#btnBeginTranscription").prop("disabled", true);
     }
     else {
-        $("#btnFileUpload").prop("disabled", false);
+        $("#btnBeginTranscription").prop("disabled", false);
     }
 });
Index: main/trunk/model-interfaces-dev/atea/style/asr.css
===================================================================
--- main/trunk/model-interfaces-dev/atea/style/asr.css	(revision 35265)
+++ main/trunk/model-interfaces-dev/atea/style/asr.css	(revision 35267)
@@ -1,30 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+/* === Start theme definitions === */
+
 :root {
-    --primary-bg-color: #21bbc0;
-    --primary-bg-shadow-color: #0a2e4d;
-    --primary-bg-shadow-blur: 2px;
-    --primary-bg-shadow-active-blur: 4px;
-
-    --primary-fg-color: black;
-
-    --error-bg-color: #fa5757;
+    --primary-bg-color: #2191c0;
+    --primary-bg-color-d1: #2785ad;
+    --primary-bg-color-d2: #227497;
+    --primary-box-shadow: 0px 2px 4px 0px #505050;
+
+    --primary-fg-color: white;
+
+    --error-bg-color: #ff4242;
     --error-fg-color: black;
-    --error-shadow-color: #331212;
 
     --paper-color: #FCFCFC;
-    --paper-shadow-color: #444;
-}
-
-body {
-    background-color: var(--paper-color);
-}
-
-#gs_content {
-    padding: 0;
-    background-color: var(--paper-color);
-}
-
-#gs_banner {
-    margin-bottom: 1em;
-    border-radius: 0 0 0.5em 0.5em;
 }
 
@@ -32,13 +20,6 @@
     background-color: var(--paper-color);
     padding: 1em;
-    border-radius: 0.5em;
-    box-shadow: 0 0 6px 0 var(--paper-shadow-color);
-}
-
-.paper-inset {
-    background-color: var(--paper-color);
-    padding: 1em;
-    border-radius: 0.5em;
-    box-shadow: 0 0 3px 0 var(--paper-shadow-color) inset;
+    border-radius: 0.3em;
+    box-shadow: var(--primary-box-shadow);
 }
 
@@ -46,5 +27,5 @@
     margin: 1em 2em;
     height: 1px;
-    background-color: #AAA;
+    background-color: #0000001F;
     border: none;
 }
@@ -56,5 +37,5 @@
     color: var(--primary-fg-color);
     border: none;
-    box-shadow: 0 0 var(--primary-bg-shadow-blur) 0 var(--primary-bg-shadow-color);
+    box-shadow: var(--primary-box-shadow);
     
     font-size: 48px;
@@ -62,4 +43,5 @@
     padding: 0.2em;
     cursor: pointer;
+    margin: 0 1px 3px 1px; /* Keeps space around the box shadow */
 
     -webkit-transition-duration: 0.2s;
@@ -68,13 +50,118 @@
 
 .btn-fab:hover {
-    box-shadow: 0 0 var(--primary-bg-shadow-active-blur) 0 var(--primary-bg-shadow-color);
-}
-
-.btn-fab-small {
+    filter: brightness(92%);
+}
+
+.btn-fab:disabled {
+    filter: grayscale(100%);
+}
+
+.btn-primary {
+    background-color: var(--primary-bg-color);
+    color: var(--primary-fg-color);
+    border: none;
+    box-shadow: var(--primary-box-shadow);
+
+    border-radius: 0.3em;
+    padding: 0.5em;
+    cursor: pointer;
+    font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+    text-align: center;
+    margin: 0 1px 3px 1px; /* Keeps space around the box shadow */
+
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+}
+
+.btn-primary span {
+    text-align: center;
+    vertical-align: middle;
+}
+
+.btn-primary:hover {
+    filter: brightness(92%);
+}
+
+.btn-primary:disabled {
+    filter: grayscale(100%);
+}
+
+.color-primary {
+    background-color: var(--primary-bg-color);
+    color: var(--primary-fg-color);
+}
+
+.color-error {
+    background-color: var(--error-bg-color);
+    color: var(--error-fg-color);
+}
+
+.color-flat {
+    background-color: transparent;
+    color: #222;
+    box-shadow: none;
+}
+
+.color-flat:hover {
+    background-color: #EEE;
+}
+
+.mdi-s {
+    font-size: 18px;
+}
+
+.mdi-m {
     font-size: 24px;
+}
+
+.mdi-l {
+    font-size: 36px;
+}
+
+.mdi-xl {
+    font-size: 48px;
+}
+
+.body1 {
+    font-size: 16px;
+}
+
+.body2 {
+    font-size: 14px;
+}
+
+.heading1 {
+    font-size: 48px;
+}
+
+/* === End theme definitions === */
+
+body {
+    background-color: var(--paper-color);
+    font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+}
+
+#gs_content {
+    padding: 0;
+    background-color: var(--paper-color);
+}
+
+#gs_banner {
+    margin-bottom: 1em;
+    border-radius: 0 0 0.3em 0.3em;
+}
+
+#audio-transcription-container {
+    margin-top: 2em;
 }
 
 .asr-hidden {
     display: none;
+}
+
+#btnBeginTranscription {
+    float: right;
 }
 
@@ -103,14 +190,8 @@
 
 .transcription__file-name {
-    margin: 0;
     margin: 0 1em 0 1em;
-    font-weight: bold;
 }
 
 .transcription__remove-button {
-    --primary-bg-color: var(--error-bg-color);
-    --primary-fg-color: var(--error-fg-color);
-    --primary-bg-shadow-color: var(--error-shadow-color);
-
     order: 100;
 }
Index: main/trunk/model-interfaces-dev/atea/transform/pages/asr.xsl
===================================================================
--- main/trunk/model-interfaces-dev/atea/transform/pages/asr.xsl	(revision 35265)
+++ main/trunk/model-interfaces-dev/atea/transform/pages/asr.xsl	(revision 35267)
@@ -33,34 +33,46 @@
     <!-- the page content -->
     <xsl:template match="/page">
-        <xsl:call-template name="audio-upload"/>
+        <xsl:call-template name="audio-transcription"/>
     </xsl:template>
     
     <!-- Template for processing audio file uploads -->
-    <xsl:template name="audio-upload">
+    <xsl:template name="audio-transcription">
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
         <link href="interfaces/{$interface_name}/style/asr.css" rel="stylesheet" type="text/css" />
-        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
 
-        <div class="paper">
-            <div>
+        <section id="audio-transcription-container" class="paper">
+            <div class="paper-inset">
+                
                 <form onSubmit="doAudioUpload(); return false;" enctype="multipart/form-data">
-                    <input id="fileUpload" type="file" accept="audio/wav" multiple="multiple" />
-                    <button id="btnFileUpload" type="submit" disabled="disabled">Transcribe</button>
+                    <button class="btn-primary" type="button" onclick="document.getElementById('audioFileUpload').click()">
+                        <span class="material-icons">&#xE2C6;</span> <!-- file_upload -->
+                        <span>Upload Audio Files</span>
+                    </button>
+
+                    <input id="audioFileUpload" type="file" accept="audio/wav" multiple="multiple" />
+                    
+                    <button id="btnBeginTranscription" class="btn-primary" type="submit" disabled="disabled">
+                        <span class="material-icons">&#xEA3E;</span> <!-- history_edu -->
+                        <span>Transcribe</span>
+                    </button>
                 </form>
+
+                <div id="prgFileUploadContainer" class="asr-hidden">
+                    <label for="prgFileUpload">Processing:</label>
+                    <progress id="prgFileUpload" />
+                </div>
             </div>
     
-            <div class="audio-slider__container">
-                <button type="button" class="btn-fab btn-fab-small">
-                    <span class="material-icons">&#xE037;</span> <!-- play_arrow -->
+            <!-- <div class="audio-slider__container">
+                <button type="button" class="btn-fab">
+                    <span class="material-icons mdi-xl">&#xE037;</span>
                 </button>
                 <input type="range" min="0" value="0" class="audio-slider__range" />
                 <span class="audio-slider__value">1:23</span>
-            </div>
+            </div> -->
     
-            <div id="prgFileUploadContainer" class="asr-hidden">
-                <label for="prgFileUpload">Processing:</label>
-                <progress id="prgFileUpload" />
-            </div>
-    
+            <!-- The list of each transcription -->
             <div id="transcriptionsDisplayContainer">
+
                 <audio id="transcriptionAudio">
                     <source id="transcriptionAudioSource" />
@@ -71,13 +83,16 @@
                 <template id="transcriptionTemplate">
                     <li class="transcription__container">
+
                         <div class="transcription__header">
-                            <button class="btn-fab transcription__play-button" type="button">
+                            <button class="color-flat btn-fab transcription__play-button" type="button">
                                 <span class="material-icons">&#xE037;</span> <!-- play_arrow -->
                             </button>
-                            <button class="btn-fab transcription__remove-button" type="button">
+                            <button class="color-error btn-fab transcription__remove-button" type="button">
                                 <span class="material-icons">&#xE872;</span> <!-- delete -->
                             </button>
-                            <p class="transcription__file-name"></p>    
+                            <p class="transcription__text"></p>
+                            <p class="body2 transcription__file-name">test</p>
                         </div>
+
                         <details>
                             <summary>Character Information</summary>
@@ -89,5 +104,7 @@
                             </div>
                         </details>
+
                         <hr class="divider" />
+
                     </li>
                 </template>
@@ -128,5 +145,5 @@
                 </template>
             </div>
-        </div>
+        </section>
         
         <gsf:script src="interfaces/{$interface_name}/js/asr/asr-controller.js"></gsf:script>
