diff --git a/workflow/engine/js/strategicDashboard/timeSeriesPresenter.js b/workflow/engine/js/strategicDashboard/timeSeriesPresenter.js
index e274443c0..7f2efcc3e 100644
--- a/workflow/engine/js/strategicDashboard/timeSeriesPresenter.js
+++ b/workflow/engine/js/strategicDashboard/timeSeriesPresenter.js
@@ -113,6 +113,7 @@ TimeSeriesPresenter.prototype.changePeriodicityToMonth = function (monthList) {
 	this.endPeriodState.list = monthList;
 	this.initPeriodState.visible = true;
 	this.endPeriodState.visible = true;
+	this.endPeriodState.selValue = this.periodEquivalentFromDate (this.helper.ReportingPeriodicityEnum.MONTH, new Date());
 }
 
 TimeSeriesPresenter.prototype.changePeriodicityToQuarter = function (quarterList) {
@@ -120,6 +121,7 @@ TimeSeriesPresenter.prototype.changePeriodicityToQuarter = function (quarterList
 	this.endPeriodState.list = quarterList;
 	this.initPeriodState.visible = true;
 	this.endPeriodState.visible = true;
+	this.endPeriodState.selValue = this.periodEquivalentFromDate (this.helper.ReportingPeriodicityEnum.QUARTER, new Date());
 }
 
 TimeSeriesPresenter.prototype.changePeriodicityToSemester = function (semesterList) {
@@ -127,6 +129,7 @@ TimeSeriesPresenter.prototype.changePeriodicityToSemester = function (semesterLi
 	this.endPeriodState.list = semesterList;
 	this.initPeriodState.visible = true;
 	this.endPeriodState.visible = true;
+	this.endPeriodState.selValue = this.periodEquivalentFromDate (this.helper.ReportingPeriodicityEnum.SEMESTER, new Date());
 }
 
 TimeSeriesPresenter.prototype.changePeriodicityToYear = function (yearList) {
@@ -134,6 +137,7 @@ TimeSeriesPresenter.prototype.changePeriodicityToYear = function (yearList) {
 	this.endPeriodState.list = [];
 	this.initPeriodState.visible = false;
 	this.endPeriodState.visible = false;
+	this.endPeriodState.selValue = this.periodEquivalentFromDate (this.helper.ReportingPeriodicityEnum.YEAR, new Date());
 }
 
 TimeSeriesPresenter.prototype.historicData = function (indicator, periodicity, initPeriod, 
@@ -145,7 +149,7 @@ TimeSeriesPresenter.prototype.historicData = function (indicator, periodicity, i
 	this.model.historicData(indicator, periodicity, initDate, endDate).done(function (data) {
 		var graphData = [];
 		$.each(data, function(index, originalObject) {
-			var newObject = {datalabel: that.periodValue(periodicity, originalObject) + '/' + originalObject['YEAR'],
+			var newObject = {datalabel: that.periodColumnName(periodicity, originalObject) + '/' + originalObject['YEAR'],
 							 value: originalObject.VALUE
 							}
 			graphData.push(newObject);
@@ -157,7 +161,7 @@ TimeSeriesPresenter.prototype.historicData = function (indicator, periodicity, i
 }
 
 
-TimeSeriesPresenter.prototype.periodValue = function (periodicity, object) {
+TimeSeriesPresenter.prototype.periodColumnName = function (periodicity, object) {
 	var retval = "";
 	switch (periodicity*1) {
 		case this.helper.ReportingPeriodicityEnum.MONTH:
@@ -179,6 +183,48 @@ TimeSeriesPresenter.prototype.periodValue = function (periodicity, object) {
 	return retval;
 }
 
+TimeSeriesPresenter.prototype.periodEquivalentFromDate = function (periodicity, date) {
+	var retval = null;
+	var year = date.getFullYear();
+
+	switch (periodicity * 1) {
+		case this.helper.ReportingPeriodicityEnum.MONTH:
+			for (var i = 1; i < 12; i++) {
+				var periodInitDate = this.periodInitDate (periodicity, i, year);
+				var periodEndDate = this.periodEndDate (periodicity, i, year);
+				if (periodInitDate <= date && periodEndDate >= date) {
+					retval = i;
+				}
+			}
+			break;
+		case this.helper.ReportingPeriodicityEnum.QUARTER:
+			for (var i = 1; i < 4; i++) {
+				var periodInitDate = this.periodInitDate (periodicity, i, year);
+				var periodEndDate = this.periodEndDate (periodicity, i, year);
+				if (periodInitDate <= date && periodEndDate >= date) {
+					retval = i;
+				}
+			}
+			break;
+		case this.helper.ReportingPeriodicityEnum.SEMESTER:
+			for (var i = 1; i < 2; i++) {
+				var periodInitDate = this.periodInitDate (periodicity, i, year);
+				var periodEndDate = this.periodEndDate (periodicity, i, year);
+				if (periodInitDate <= date && periodEndDate >= date) {
+					retval = i;
+				}
+			}
+			break;
+		case this.helper.ReportingPeriodicityEnum.YEAR:
+			retval = year
+			break;
+	}
+	if (retval == null) {
+		throw new Error("The periodicity " + periodicity + " is not supported.");
+	}
+	return retval;
+}
+
 TimeSeriesPresenter.prototype.periodInitDate = function (periodicity, period, year) {
 	var retval = null;
 	switch (periodicity * 1) {
diff --git a/workflow/engine/templates/strategicDashboard/viewDashboard.html b/workflow/engine/templates/strategicDashboard/viewDashboard.html
index 0c6d51ef7..0ad1b3b74 100644
--- a/workflow/engine/templates/strategicDashboard/viewDashboard.html
+++ b/workflow/engine/templates/strategicDashboard/viewDashboard.html
@@ -79,7 +79,7 @@
 			 data-indicator-type="<%- indicator.type %>"
 			 data-gs-min-width="3" data-gs-min-height="2" data-gs-max-height="2"
             data-toggle="tooltip" data-original-title={translate label="ID_DASH_HELP_INBOX_STATUS"}>
-			<div class="ind-container-selector panel grid-stack-item-content" style="min-width:200px;">
+			<div class="ind-container-selector panel grid-stack-item-content panel-status" style="min-width:200px;">
 				<a data-toggle="collapse" href="#efficiencyindex" aria-expanded="false" aria-controls="efficiencyindex">
 					<div class="panel-heading status-indicator-low"
 						 style=" width:<%- indicator.percentageOverdueWidth %>%;
@@ -373,15 +373,15 @@
 
 							<div id="compareIndicators" class="row pull-left">
 								
-								<div class="span4 pull-left">
+								<div class="span4 pull-left" style="margin:15px; ">
 									<span id="indicatorLabel"></span>
 									<select id="indicatorList"></select>
-									<span id="periodicityLabel"></span>
+									<span id="periodicityLabel" style="margin-left:15px;"></span>
 									<select id="periodicityList" style="width:auto;"></select>
-									<span id="initPeriodLabel"></span>
+									<span id="initPeriodLabel" style="margin-left:15px;"></span>
 									<select id="initPeriodList"></select>
 									<select id="initYearList"></select>
-									<span id="endPeriodLabel"></span>
+									<span id="endPeriodLabel" style="margin-left:15px;"></span>
 									<select id="endPeriodList"></select>
 									<select id="endYearList"></select>
 								</div>
diff --git a/workflow/public_html/css/sb-admin-2.css b/workflow/public_html/css/sb-admin-2.css
index 1c268a72f..1327117d2 100644
--- a/workflow/public_html/css/sb-admin-2.css
+++ b/workflow/public_html/css/sb-admin-2.css
@@ -585,8 +585,8 @@ table.dataTable thead .sorting:after {
     margin-bottom: 45px;
 }
 
-.panel-green:hover, .panel-red:hover, .panel-high:hover, .panel-low:hover{
-    box-shadow:0px 3px 2px #dfdfdf;
+.panel-green:hover, .panel-red:hover, .panel-high:hover, .panel-low, .panel-status:hover{
+	box-shadow:0px 3px 2px #dfdfdf;
 }
 
 .small{