diff --git a/app.js b/app.js
index 575999f..be81b1e 100644
--- a/app.js
+++ b/app.js
@@ -16,7 +16,7 @@ define(function(require){
 		appFlags: {
 			voicemails: {
 				maxRange: 31,
-				defaultRange: 7
+				defaultRange: 1
 			}
 		},
 
@@ -103,6 +103,10 @@ define(function(require){
 
 				self.displayVMList(parent, vmboxId);
 			});
+
+			template.find('.toggle-filter').on('click', function() {
+				template.find('.filter-by-date').toggleClass('active');
+			});
 		},
 
 		bindReceivedVMs: function(template) {
@@ -337,10 +341,11 @@ define(function(require){
 			});
 		},
 
-		displayVMList: function(container, vmboxId, fromDate, toDate) {
+		displayVMList: function(container, vmboxId) {
 			var self = this,
 				fromDate = container.find('input.filter-from').datepicker('getDate'),
-				toDate = container.find('input.filter-to').datepicker('getDate');
+				toDate = container.find('input.filter-to').datepicker('getDate'),
+				filterByDate = container.find('.filter-by-date').hasClass('active');
 
 			container.removeClass('empty');
 
@@ -357,10 +362,12 @@ define(function(require){
 
 			monster.ui.footable(container.find('.voicemails-table .footable'), {
 				getData: function(filters, callback) {
-					filters = $.extend(true, filters, {
-						created_from: monster.util.dateToBeginningOfGregorianDay(fromDate),
-						created_to:  monster.util.dateToEndOfGregorianDay(toDate),
-					});
+					if(filterByDate) {
+						filters = $.extend(true, filters, {
+							created_from: monster.util.dateToBeginningOfGregorianDay(fromDate),
+							created_to:  monster.util.dateToEndOfGregorianDay(toDate),
+						});
+					}
 					// we do this to keep context
 					self.voicemailsGetRows(filters, vmboxId, callback);
 				},
diff --git a/i18n/en-US.json b/i18n/en-US.json
index 26d040c..4e403d0 100644
--- a/i18n/en-US.json
+++ b/i18n/en-US.json
@@ -5,6 +5,7 @@
 			"receivedVMs": "Received Voicemails"
 		},
 		"receivedVMs": {
+			"filterByDate": "Filter by Dates",
 			"table": {
 				"columns": {
 					"status": "Status",
diff --git a/style/app.css b/style/app.css
index 69368b6..1eaac17 100644
--- a/style/app.css
+++ b/style/app.css
@@ -209,10 +209,10 @@
 }
 
 
-.received-voicemails-container .date-ranges {
+/*.received-voicemails-container .date-ranges {
 	float: right;
 	margin-left: 60px;
-}
+}*/
 
 .received-voicemails-container .date-ranges > * {
 	margin: 0 10px 0 0;
@@ -228,6 +228,24 @@
 	width: 80px;
 }
 
+.received-voicemails-container .filter-by-date {
+	float: right;
+	line-height: 30px;
+	margin-left: 30px;
+}
+
+.received-voicemails-container .filter-by-date.active .expand-dates {
+	float: right;
+}
+
+.received-voicemails-container .filter-by-date .date-ranges,
+.received-voicemails-container .filter-by-date.active .expand-dates {
+	display: none;
+}
+
+.received-voicemails-container .filter-by-date.active .date-ranges {
+	display: block;
+}
 
 /* CDR Popup */
 #voicemails_cdr_details_dialog {
diff --git a/views/received-voicemails.html b/views/received-voicemails.html
index 1aa3715..ec41a2b 100644
--- a/views/received-voicemails.html
+++ b/views/received-voicemails.html
@@ -63,12 +63,18 @@
 			</button>
 		</div>
 
-		<div class="date-ranges">
-			<span>{{i18n.startDate}}</span>
-			<input id="startDate" type="text" class="date-filter filter-from">
-			<span>{{i18n.endDate}}</span>
-			<input id="endDate" type="text" class="date-filter filter-to">
-			<button type="button" class="apply-filter monster-button monster-button-primary">{{i18n.filter}}</button>
+		<div class="filter-by-date">
+			<div class="expand-dates">
+				<a class="monster-link blue toggle-filter">{{ i18n.voicemails.receivedVMs.filterByDate }}</a>
+			</div>
+			<div class="date-ranges">
+				<span>{{i18n.startDate}}</span>
+				<input id="startDate" type="text" class="date-filter filter-from">
+				<span>{{i18n.endDate}}</span>
+				<input id="endDate" type="text" class="date-filter filter-to">
+				<button type="button" class="apply-filter monster-button monster-button-primary">{{i18n.filter}}</button>
+				<a class="monster-link blue toggle-filter">{{i18n.cancel}}</a>
+			</div>
 		</div>
 	</div>