diff --git a/app.py b/app.py
index 0bc96d2..cc2fba4 100644
--- a/app.py
+++ b/app.py
@@ -7,7 +7,7 @@
 
 from flask_login import current_user
 
-
+from requests.exceptions import HTTPError
 from database import db, init_db
 from models import get_base_info, get_segment, get_downloads, get_full_filename, User, Role
 from custom import ExtendedLoginForm
@@ -87,8 +87,7 @@ def retrieve_transcript(file_id, position):
     file_id, position = _parse_args(file_id, position)
     try:
         obj = get_base_info(file_id)
-        if current_user.seconds_available < obj.segment_length:
-            from requests.exceptions import HTTPError
+        if current_user.seconds_available < obj.segment_length:            
             raise HTTPError('You do not have enough credit available to download this segment')
         segment = get_segment(obj, file_id, position, update=True)
         current_user.seconds_available -= obj.segment_length
@@ -155,7 +154,7 @@ def solution(file_id, position):
         re.sub(r'[\.,-]', '', segment.transcript.lower())
 
         student_solution, google_solution = differ.diff_prettyHtml(differ.diff_main(student_solution, segment.transcript))
-        return render_template('solution.html', obj=obj, file_id=file_id, segment=segment,
+        return render_template('solution.html', obj=obj, file_id=file_id, segment=segment, position=position,
                                filename=full_filename, student_solution=student_solution, google_solution=google_solution,
                                confidence='{:.2f}'.format(segment.confidence))
 
diff --git a/docker-compose.yaml b/docker-compose.yaml
index 38206de..995c0ed 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -2,7 +2,7 @@ version: '3'
 
 services:
   flask:
-    image: huwf/dictogloss:0.3
+    build: ./
     ports:
       - 127.0.0.1:5000:5000
 #      - 127.0.0.1:5001:443
@@ -13,12 +13,17 @@ services:
       VIRTUAL_PORT: 5000
 #      VIRTUAL_PROTO: https
       LETSENCRYPT_HOST: dictogloss.huwfryer.co.uk
-      LETSENCRYPT_EMAIL: huwfryer@gmail.com
+      LETSENCRYPT_EMAIL: ${DEFAULT_EMAIL}
+
+      DEFAULT_EMAIL: ${DEFAULT_EMAIL}
+      DEFAULT_PASSWORD: ${DEFAULT_PASSWORD}
+
     volumes:
       - ./letsencrypt:/etc/letsencrypt
       - ./config.py:/usr/src/config.py
       - mp3:/usr/src/static/mp3
-
+      - ./database.db:/usr/src/database.db
+      - ./API_KEY.json:/usr/src/API_KEY.json
 # SEE: https://github.com/buchdag/letsencrypt-nginx-proxy-companion-compose/blob/master/2-containers/compose-v3/labels/docker-compose.yaml
 # For examples on how to set up the letsencrypt service
   nginx_proxy:
@@ -52,7 +57,7 @@ services:
     restart: always
 
 volumes:
-
+  db:
   mp3:
   conf:
   vhost:
diff --git a/static/scripts/scripts.js b/static/scripts/scripts.js
index 7dcd2e5..cf8ceca 100644
--- a/static/scripts/scripts.js
+++ b/static/scripts/scripts.js
@@ -36,7 +36,7 @@ $(document).ready(function () {
             // TODO: Don't know why this isn't working with jQuery, but this is simple enough for vanilla JS
             document.getElementById('retrieve').parentNode.parentNode.innerHTML = data;
             // Keep the "seconds available" up to date...
-            document.getElementById('seconds_available').innerHTML = parseInt($('audio')[0].duration);
+            $('#seconds_available').text(Math.floor(parseInt($('#seconds_available').text()) - $('audio')[0].duration));
             $('.spinner-border').hide();
 
         });
@@ -51,4 +51,9 @@ $(document).ready(function () {
         $('#playerSpeed').text(rate * 100);
     });
 
-});
\ No newline at end of file
+  // Only works on the POST solution view
+  $('#exercise').height($('#solution').height());
+
+});
+
+
diff --git a/templates/base.html b/templates/base.html
index dc9d93f..b891108 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -19,7 +19,9 @@ <h1>Dictogloss</h1>
                     <a href="{{url_for('downloads')}}">Downloads</a>
                 </nav>
                 {% if current_user.is_authenticated %}
-                <span id="seconds_available" class="float-right">Seconds available: {{current_user.seconds_available}}</span>
+		<p style="text-align:right;">
+		Seconds available: <span id="seconds_available"> {{current_user.seconds_available}}</span>
+		</p>
                 {% endif %}
             </header>
 
@@ -65,4 +67,4 @@ <h1>Dictogloss</h1>
         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
         <script src="{{ url_for('static', filename='scripts/scripts.js')}}"></script>
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/get_transcript.html b/templates/get_transcript.html
index 33ce44b..bfd4be5 100644
--- a/templates/get_transcript.html
+++ b/templates/get_transcript.html
@@ -1,12 +1,12 @@
 {% if error %}
-<div class="alert alert-danger">
+<div class="alert alert-danger col-sm-10 float-right">
     <strong class="d-block">Error code returned</strong>
     <p>There was an error retrieving the transcript. The details are:</p>
     <p>{{error}}</p>
 </div>
 {% else %}
-<div class="alert alert-success">
+<div class="alert alert-success alert col-sm-10 float-right">
     <strong class="d-block">Success!</strong>
     <p>The transcript for segment {{position}} was successfully retrieved. <a href="{{ url_for('solution', file_id=file_id, position=position) }}">View answer</a> </p>
 </div>
-{% endif %}
\ No newline at end of file
+{% endif %}
diff --git a/templates/main.html b/templates/main.html
index bfc40d5..a80f588 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -64,7 +64,8 @@ <h3>Exercise</h3>
     <div class="col-sm-10 float-left p-0">
         <form id="form_solution" action="{{url_for('solution', file_id=file_id, position=position)}}" method="post">
             <input type="hidden" name="student_answer" id="student_answer" value="" />
-            <input type="submit" class="input-group" value="Submit answer" />
+            <input type="submit" {% if segment.transcript is none %}disabled{% endif %} class="input-group" value="Submit answer" />
+
         </form>
 
         <div id="nextPrev">
diff --git a/templates/solution.html b/templates/solution.html
index 175eab7..65e9f37 100644
--- a/templates/solution.html
+++ b/templates/solution.html
@@ -16,23 +16,23 @@ <h2>{{obj.pretty_name}}</h2>
 {% endif %}
 {% endblock %}
 
-<div id="exercise" class="col-sm-6 float-left">
+<div id="exercise" class="col-sm-5 float-left">
     <h3>Your answer</h3>
     {{student_solution|safe}}
 
 </div>
-<div id="solution" class="col-sm-6 float-right">
+<div id="solution" class="col-sm-5 float-right">
     <h3>Transcript (Confidence {{confidence}})</h3>
     {{google_solution|safe}}
 </div>
 
 <div id="nextPrev">
     {% if position > 1 %}
-    <span class="float-left"><a href="{{solution('play_file', file_id=file_id, position=position-1)}}">Prev</a></span>
+    <span class="float-left"><a href="{{url_for('play_file', file_id=file_id, position=position-1)}}">Prev</a></span>
     {% endif %}
     {% if position < obj.segments|length %}
-    <span class="float-right"><a href="{{solution('play_file', file_id=file_id, position=position+1)}}">Next</a></span>
+    <span class="float-right"><a href="{{url_for('play_file', file_id=file_id, position=position+1)}}">Next</a></span>
     {% endif %}
 </div>
 
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/view_solution.html b/templates/view_solution.html
index 73624e6..711d27e 100644
--- a/templates/view_solution.html
+++ b/templates/view_solution.html
@@ -7,12 +7,17 @@
 <div>
     <p>There is no solution available for this segment. <button data-file_id="{{file_id}}" data-position="{{position}}" id="retrieve">Retrieve one</button></p>
 </div>
-{% endif %}
-{% endblock %}
 
-<div id="solution" class="col-sm-12 float-right">
+{% else %}
+
+<div id="solution" class="col-sm-10 float-right">
     <h3>Google answer (Confidence {{confidence}})</h3>
     {{segment.transcript|safe}}
 </div>
 
-{% endblock %}
\ No newline at end of file
+{% endif %}
+{% endblock %}
+
+
+
+{% endblock %}