diff --git a/src/ServicePulse.Host/app/modules/monitoring/js/endpoint_details.controller.js b/src/ServicePulse.Host/app/modules/monitoring/js/endpoint_details.controller.js
index ef585e7678..b099aa51a3 100644
--- a/src/ServicePulse.Host/app/modules/monitoring/js/endpoint_details.controller.js
+++ b/src/ServicePulse.Host/app/modules/monitoring/js/endpoint_details.controller.js
@@ -18,8 +18,8 @@
 
         $scope.endpointName = $routeParams.endpointName;
         $scope.sourceIndex = $routeParams.sourceIndex;
+        $scope.showInstancesBreakdown = $routeParams.tab === 'instancesBreakdown'; 
         $scope.loading = true;
-        $scope.showInstancesBreakdown = false;
         $scope.largeGraphsMinimumYAxis = largeGraphsMinimumYAxis;
         $scope.smallGraphsMinimumYAxis = smallGraphsMinimumYAxis;
 
@@ -42,6 +42,14 @@
             }
         }
 
+        $scope.buildUrl = function (selectedPeriodValue, showInstancesBreakdownTab) {
+            return `#/endpoint_details/${$scope.endpointName}/${$scope.sourceIndex}?historyPeriod=${selectedPeriodValue}&tab=${$scope.showInstancesBreakdown ? 'instancesBreakdown' : 'messageTypeBreakdown'}`;
+        };
+
+        $scope.showInstancesBreakdownTab = function(isVisible) {
+            $scope.showInstancesBreakdown = isVisible;
+        };
+
         function updateUI() {
             if (subscription) {
                 subscription.dispose();
@@ -142,4 +150,4 @@
     angular.module('endpoint_details')
         .controller('endpointDetailsCtrl', controller);
 
-}(window, window.angular));
\ No newline at end of file
+}(window, window.angular));
diff --git a/src/ServicePulse.Host/app/modules/monitoring/views/endpoint_details.html b/src/ServicePulse.Host/app/modules/monitoring/views/endpoint_details.html
index 2f9cd892b1..d01b260558 100644
--- a/src/ServicePulse.Host/app/modules/monitoring/views/endpoint_details.html
+++ b/src/ServicePulse.Host/app/modules/monitoring/views/endpoint_details.html
@@ -27,7 +27,7 @@ <h1 class="righ-side-ellipsis col-lg-max-10" uib-tooltip="{{endpointName}}">
         <div class="col-sm-3 no-side-padding toolbar-menus">
             <ul class="nav nav-pills period-selector">
                 <li role="presentation" ng-repeat="period in periods" ng-class="(period.value == selectedPeriod.value ? 'active' : 'notselected')">
-                    <a ng-click="selectPeriod(period)" href="#/endpoint_details/{{endpointName}}/{{sourceIndex}}?historyPeriod={{period.value}}">{{period.text}}</a>
+                    <a ng-click="selectPeriod(period)" ng-href="{{buildUrl(period.value)}}">{{period.text}}</a>
                 </li>
             </ul>
         </div>
@@ -202,10 +202,10 @@ <h1 class="righ-side-ellipsis col-lg-max-10" uib-tooltip="{{endpointName}}">
     <busy ng-show="loading" message="Loading details"></busy>
     <div class="tabs">
         <h5 ng-class="{active: !showInstancesBreakdown}">
-            <a ng-click="showInstancesBreakdown = false" class="ng-binding">Message Types</a>
+            <a ng-click="showInstancesBreakdownTab(false)" ng-href="{{buildUrl(selectedPeriod.value, 'messageTypeBreakdown')}}" class="ng-binding">Message Types</a>
         </h5>
         <h5 ng-class="{active: showInstancesBreakdown}">
-            <a ng-click="showInstancesBreakdown = true" class="ng-binding">Instances</a>
+            <a ng-click="showInstancesBreakdownTab(true)" ng-href="{{buildUrl(selectedPeriod.value, 'instancesBreakdown')}}" class="ng-binding">Instances</a>
         </h5>
     </div>