diff --git a/app/scripts/controllers/Recordings.js b/app/scripts/controllers/Recordings.js
index 04ae1ea..094de74 100644
--- a/app/scripts/controllers/Recordings.js
+++ b/app/scripts/controllers/Recordings.js
@@ -7,7 +7,7 @@
  * # MainCtrl
  * Controller of Lineblocs
  */
-angular.module('Lineblocs').controller('RecordingsCtrl', function ($scope, Backend, pagination, $location, $state, $mdDialog, $sce, $shared, $q, $mdToast, $stateParams) {
+angular.module('Lineblocs').controller('RecordingsCtrl', function ($scope, Backend, pagination, $location, $state, $mdDialog, $sce, $shared, $q, $mdToast, $stateParams, $http) {
 	  $shared.updateTitle("Recordings");
   $scope.settings = {
     page: 0
@@ -93,6 +93,80 @@ angular.module('Lineblocs').controller('RecordingsCtrl', function ($scope, Backe
     });
   }
 
+  function parseFilenameFromDisposition(contentDisposition) {
+    if (!contentDisposition) {
+      return null;
+    }
+    var encodedMatch = /filename\*=UTF-8''([^;]+)/i.exec(contentDisposition);
+    if (encodedMatch && encodedMatch[1]) {
+      return decodeURIComponent(encodedMatch[1]);
+    }
+    var plainMatch = /filename="?([^";]+)"?/i.exec(contentDisposition);
+    return plainMatch && plainMatch[1] ? plainMatch[1] : null;
+  }
+
+  function triggerDownloadFromResponse(res, defaultFileName) {
+    var contentType = res.headers('Content-Type') || 'application/octet-stream';
+    var contentDisposition = res.headers('Content-Disposition') || '';
+    var fileName = parseFilenameFromDisposition(contentDisposition) || defaultFileName;
+    var blob = new Blob([res.data], { type: contentType });
+    var url = window.URL.createObjectURL(blob);
+    var link = document.createElement('a');
+    link.href = url;
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    window.URL.revokeObjectURL(url);
+  }
+
+  $scope.downloadRecording = function(recording) {
+    if (!recording || !recording.id) {
+      return;
+    }
+    $shared.isLoading = true;
+    $http.post(
+      createUrl('/recording/downloadRecordings'),
+      { recording_ids: recording.id },
+      { responseType: 'blob' }
+    ).then(function(res) {
+      triggerDownloadFromResponse(res, 'recording-' + recording.id + '.wav');
+    }).catch(function() {
+      $shared.showError('Unable to download recording. Please try again.');
+    }).finally(function() {
+      $shared.endIsLoading();
+    });
+  };
+
+  $scope.downloadAllRecordings = function() {
+    var checked = ($scope.recordings || []).filter(function(recording) {
+      return recording && recording.checked;
+    });
+    var ids = checked.map(function(recording) {
+      return recording && recording.id;
+    }).filter(function(id) {
+      return !!id;
+    });
+
+    if (!ids.length) {
+      $shared.showError('Please select one or more recordings to download.');
+      return;
+    }
+
+    $shared.isLoading = true;
+    $http.post(
+      createUrl('/recording/downloadRecordings'),
+      { recording_ids: ids.join(',') },
+      { responseType: 'blob' }
+    ).then(function(res) {
+      triggerDownloadFromResponse(res, 'recordings.zip');
+    }).catch(function() {
+      $shared.showError('Unable to download recordings. Please try again.');
+    }).finally(function() {
+      $shared.endIsLoading();
+    });
+  };
+
   $scope.load();
 });
 
diff --git a/app/views/pages/recordings.html b/app/views/pages/recordings.html
index 10fbe89..febfdde 100644
--- a/app/views/pages/recordings.html
+++ b/app/views/pages/recordings.html
@@ -71,14 +71,14 @@ <h5>No recordings listed</h5>
         </md-content>
     </md-card>
 
-   <div layout="row side-options" layout-align="end center">
-        <div flex="10" style="display: flex; align-items: end; justify-content: right; gap: 24px;">
+     <div layout="row side-options" layout-align="end center" style="gap: 8px;">
+       <div flex="none" style="display: flex; align-items: center; justify-content: flex-end; gap: 8px;">
 
               <md-button
                   aria-label="Open demo menu"
                   class="md-raised md-primary md-small"
                   ng-click="$shared.refreshPage()"
-                  style="width: 32px; margin: 0 10px 0 0; height: 100%;"
+                  style="min-width: 32px; width: 32px; height: 32px; margin: 0; padding: 0;"
                 >
                   <i class="mdi mdi-refresh"></i>
                 </md-button>
@@ -93,10 +93,14 @@ <h5>No recordings listed</h5>
                     </md-button>
                 </div>
                 <md-menu-content width="3">
-                    <md-menu-item>
-                        <md-button href="" ng-click="Backend.deleteAllChecked('calls', calls)" style="display:flex;">
-                            Delete All</md-button>
-                    </md-menu-item>
+                  <md-menu-item>
+                    <md-button href="" ng-click="downloadAllRecordings()" style="display:flex;">
+                      Download All</md-button>
+                  </md-menu-item>
+                  <md-menu-item>
+                    <md-button href="" ng-click="Backend.deleteAllChecked('recordings', recordings)" style="display:flex;">
+                      Delete All</md-button>
+                  </md-menu-item>
                 </md-menu-content>
             </md-menu>
         </div>
@@ -147,6 +151,14 @@ <h5>No recordings found</h5>
               </audio>
             </td>
             <td md-cell>
+              <md-button ng-click="downloadRecording(recording)" class="md-icon-button" aria-label="Download recording">
+                  <md-icon>
+                    <i class="mdi mdi-download"></i>
+                    <md-tooltip class="helper-tooltip" md-direction="top">
+                      Download recording
+                    </md-tooltip>
+                  </md-icon>
+              </md-button>
               <md-button ng-click="deleteRecording($event, recording)" class="md-icon-button" aria-label="Flow">
                   <md-icon >