diff --git a/server/src/main/resources/html/static/index.html b/server/src/main/resources/html/static/index.html
index 0131cff2..7ad5647b 100644
--- a/server/src/main/resources/html/static/index.html
+++ b/server/src/main/resources/html/static/index.html
@@ -109,6 +109,18 @@
 		</section>
 		<section id="recordings" class="tab-pane fade active show" role="tabpanel" aria-labelledby="recordings-tab">
 			<div class="container">
+				<div class="row">
+					<div class="col-lg-4 mx-auto">
+						Space left
+						<div class="progress">
+							<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuemin="0" 
+								data-bind="attr: {'aria-valuemax': space.total, 'aria-valuenow': space.free},
+									style: { width: space.percent() + '%' },
+									text: space.percent() + '%'">
+							</div>
+						</div>
+					</div>
+				</div>
 				<div class="row">
 					<div class="col-lg-10 mx-auto">
 						<p class="lead"></p>
@@ -134,13 +146,13 @@
 										<td data-bind="text: ko_progressString"></td>
 										<td data-bind="text: ko_size"></td>
 										<td>
-											<button class="btn btn-secondary fa fa-play" title="Play recording" data-bind="enable: status == 'FINISHED', click: play"></button>
+											<button class="btn btn-secondary fa fa-play" title="Play recording" data-bind="enable: ko_status() == 'FINISHED', click: play"></button>
 										</td>
 										<td>
-											<button class="btn btn-secondary fa fa-download" title="Download recording" data-bind="enable: status == 'FINISHED', click: function() { $.notify('Not implemented, yet', 'info'); }"></button>
+											<button class="btn btn-secondary fa fa-download" title="Download recording" data-bind="enable: ko_status() == 'FINISHED', click: function() { $.notify('Not implemented, yet', 'info'); }"></button>
 										</td>
 										<td>
-											<button class="btn btn-secondary fa fa-trash" title="Delete recording" data-bind="enable: status == 'FINISHED', click: ctbrec.deleteRecording"></button>
+											<button class="btn btn-secondary fa fa-trash" title="Delete recording" data-bind="enable: ko_status() == 'FINISHED', click: ctbrec.deleteRecording"></button>
 										</td>
 									</tr>
 								</tbody>
@@ -196,6 +208,12 @@
 		let onlineModels = [];
 		let observableModelsArray = ko.observableArray();
 		let observableRecordingsArray = ko.observableArray();
+		let space = {
+			free: ko.observable(0),	
+			total: ko.observable(0),	
+			percent: ko.observable(0)	
+		};
+		
 		let ctbrec = {
 			resume: function(model) {
 				try {
@@ -356,7 +374,8 @@
 			
 			ko.applyBindings({
 				models : observableModelsArray,
-				recordings: observableRecordingsArray
+				recordings: observableRecordingsArray,
+				space
 			});
 
 			function updateOnlineModels() {
@@ -571,6 +590,7 @@
 					.done(function(data) {
 						if (data.status === 'success') {
 							syncRecordings(data.recordings);
+							updateDiskSpace();
 						} else {
 							console.log('request failed', data);
 						}
@@ -583,6 +603,29 @@
 				}
 				setTimeout(updateRecordings, 3000);
 			}
+
+			function updateDiskSpace() {
+				$.ajax({
+					type : 'POST',
+					url : '/rec',
+					dataType : 'json',
+					async : true,
+					timeout : 60000,
+					data : '{"action": "space"}'
+				})
+				.done(function(data) {
+					if (data.status === 'success') {
+						space.total(data.spaceTotal);
+						space.free(data.spaceFree);
+						space.percent( (data.spaceFree/data.spaceTotal*100).toFixed(2) );
+					} else {
+						console.log('request failed', data);
+					}
+				})
+				.fail(function(jqXHR, textStatus, errorThrown) {
+					console.log(textStatus, errorThrown);
+				});
+			}
 		
 			updateOnlineModels();
 			updateRecordings();