diff --git a/assets/js/components/DatePicker.js b/assets/js/components/DatePicker.js
index f29a53f..42c6b78 100644
--- a/assets/js/components/DatePicker.js
+++ b/assets/js/components/DatePicker.js
@@ -38,32 +38,42 @@ class DatePicker extends Component {
   @bind
   setTimeRange(period) {
     const timezoneOffset = (new Date()).getTimezoneOffset() * 60;
-    let beforeDate = new Date();
-    beforeDate.setHours(24);
-    beforeDate.setMinutes(0);
 
-    let afterDate = new Date();
-    afterDate.setHours(0);
-    afterDate.setMinutes(0);
+    let startDate = new Date();
+    startDate.setHours(0);
+    startDate.setMinutes(0);
+
+    let endDate = new Date();
+    endDate.setHours(24);
+    endDate.setMinutes(0);
+
     switch(period) {
       case "week":
-        afterDate.setDate(afterDate.getDate() - (afterDate.getDay() + 6) % 7);
+        startDate.setDate(startDate.getDate() - (startDate.getDay() + 6) % 7);
+        endDate.setDate(startDate.getDate() + 7);
       break;
       case "month":
-        afterDate.setDate(1);
+        startDate.setDate(1);
+        endDate.setMonth(endDate.getMonth() + 1);
+        endDate.setDate(0);
       break;
       case "year":
-        afterDate.setDate(1);
-        afterDate.setMonth(0);
+        startDate.setDate(1);
+        startDate.setMonth(0);
+        endDate.setYear(startDate.getFullYear() + 1);
+        endDate.setMonth(0);
+        endDate.setDate(0);
       break;
     }
 
     let before, after;
 
-    before = Math.round(((+beforeDate) / 1000) - timezoneOffset);
-    after = Math.round(((+afterDate) / 1000) - timezoneOffset);
+    before = Math.round(((+endDate) / 1000) - timezoneOffset);
+    after = Math.round(((+startDate) / 1000) - timezoneOffset);
     this.setState({
       period: period,
+      startDate: startDate,
+      endDate: endDate,
       before: before, 
       after: after,
     });
@@ -92,6 +102,7 @@ class DatePicker extends Component {
 
       <ul>
         {links}
+        <li><span style="padding: 0 8px 0 0;">&mdash;</span> <strong>{state.startDate.toLocaleDateString()}</strong> to <strong>{state.endDate.toLocaleDateString()}</strong></li>
       </ul>
     )
   }
diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss
index 9191353..eac535f 100644
--- a/assets/sass/styles.scss
+++ b/assets/sass/styles.scss
@@ -67,8 +67,12 @@ body {
   nav.main-nav li a { padding: 6px 8px 6px 0; }
   nav li a:hover { color: #98a0a6; }
 
-  .date-nav ul { padding: 0; margin: 0; }
-  nav.date-nav li a { color: #46494d; }
+  .date-nav ul { padding: 0; margin: 0; font-size: 12px; text-transform: uppercase; }
+  .date-nav li, 
+  .date-nav li a { 
+    color: #46494d; 
+  }
+  nav.date-nav li a {  }
   nav.date-nav li a:hover { color: #98a0a6; }
   nav.date-nav li.active a:hover { color: #46494d; }
   nav.date-nav li.active a:after { content:""; background: #88ffc6; display: block; width: 100%; height: 3px; position: absolute; top: 4px; z-index: -1; margin: 0 0 0 -4px; transition: all .4s ease; }