diff --git a/src/org/april/agirstatool/core/pages/CreatedConcludedCountChartView.java b/src/org/april/agirstatool/core/pages/CreatedConcludedCountChartView.java
index 9feceb1..76a4791 100644
--- a/src/org/april/agirstatool/core/pages/CreatedConcludedCountChartView.java
+++ b/src/org/april/agirstatool/core/pages/CreatedConcludedCountChartView.java
@@ -158,7 +158,7 @@ public class CreatedConcludedCountChartView
 	 * @throws AgirStatoolException
 	 *             the agir statool exception
 	 */
-	public static String buildLastMonth(final String title, final Project project, final int monthCount) throws AgirStatoolException
+	public static String buildLastMonths(final String title, final Project project, final int monthCount) throws AgirStatoolException
 	{
 		String result;
 
@@ -176,7 +176,7 @@ public class CreatedConcludedCountChartView
 	 * @return
 	 * @throws AgirStatoolException
 	 */
-	public static String buildLastYear(final String title, final Project project) throws AgirStatoolException
+	public static String buildPreviousYear(final String title, final Project project) throws AgirStatoolException
 	{
 		String result;
 
diff --git a/src/org/april/agirstatool/core/pages/ProjectPage.java b/src/org/april/agirstatool/core/pages/ProjectPage.java
index 9305f4b..811af99 100644
--- a/src/org/april/agirstatool/core/pages/ProjectPage.java
+++ b/src/org/april/agirstatool/core/pages/ProjectPage.java
@@ -58,14 +58,17 @@ public class ProjectPage
 			data.setContent("agirLink", project.getName());
 			data.setAttribute("agirLink", "href", "https://agir.april.org/projects/" + project.getIdentifier() + "/issues");
 
-			data.setContent("issueCreatedClosed3MonthsChart", CreatedConcludedCountChartView.buildLastYear("Created/closed last year Count", project));
-			data.setContent("issueCreatedClosed6MonthsChart", CreatedConcludedCountChartView.buildLastMonth("Created/closed 6 months Count", project, 6));
-			data.setContent("issueCreatedClosedChart", CreatedConcludedCountChartView.buildFull("Created/closed Count", project));
+			data.setContent("issueCreatedClosed3MonthsChart", CreatedConcludedCountChartView.buildLastMonths("Created/closed 3 months Count", project, 3));
+			data.setContent("issueCreatedClosed6MonthsChart", CreatedConcludedCountChartView.buildLastMonths("Created/closed 6 months Count", project, 6));
+			data.setContent("issueCreatedClosedPreviousYearChart", CreatedConcludedCountChartView.buildPreviousYear("Created/closed last year Count", project));
+			data.setContent("issueCreatedClosedFullChart", CreatedConcludedCountChartView.buildFull("Created/closed Count", project));
 
 			data.setContent("issueRawChart", IssueStatChartView.build("Issue Raw Count", project));
 			data.setContent("issueGroupedChart", IssueStatChartView.buildGrouped("Issue Grouped Count", project));
 			data.setContent("unassignedRawChart", UnassignedPolarChartView.build("Unassigned Raw Count", project));
 			data.setContent("unassignedGroupedChart", UnassignedPolarChartView.buildGrouped("Unassigned Grouped Count", project));
+			data.setContent("issueCreatedClosed6MonthsChartA", CreatedConcludedCountChartView.buildLastMonths("Created/closed 6 months CountA", project, 6));
+			data.setContent("issueCreatedClosed6MonthsChartB", CreatedConcludedCountChartView.buildLastMonths("Created/closed 6 months CountB", project, 6));
 
 			String projectsRawView = ProjectsRawView.build(project);
 			data.setContent("projectsRawView", projectsRawView);
diff --git a/src/org/april/agirstatool/core/pages/agirstatool.css b/src/org/april/agirstatool/core/pages/agirstatool.css
index 04bd8d4..8c29e0d 100644
--- a/src/org/april/agirstatool/core/pages/agirstatool.css
+++ b/src/org/april/agirstatool/core/pages/agirstatool.css
@@ -229,25 +229,41 @@ h3 span
 /***** GENERIC BUTTONS *****/
 
 /*******/
-
-a.button 
+.button 
 {
-	background-color: #2E2D30;
-    color: #FDCA59;
-	text-decoration: none;
-    text-transform: uppercase;
-	margin-top:15px;
-	margin-bottom:15px;
-    padding:10px;
-	display:inline-block;
-	font-family: ITCAvantGardeStd-Md, Arial, Helvetica, sans-serif;
+  background-color: #e7e7e7;
+  border: none;
+  color: black;
+  padding: 4px 15px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  width: 110px;
 }
 
-a.button:hover 
+.button:hover 
 {
-	background-color:#5f5d63;
+	font-weight: bold;
 }
 
+.unselected
+{
+	background-color: #e7e7e7;
+	color: black;
+}
+
+.selected
+{
+	background-color: #008CBA;
+	color: white;
+}
+
+
+/******/
+
+
+
 
  /* The switch - the box around the slider */
 .switch {
diff --git a/src/org/april/agirstatool/core/pages/chartBarView.xhtml b/src/org/april/agirstatool/core/pages/chartBarView.xhtml
index ffd86e2..48929c2 100644
--- a/src/org/april/agirstatool/core/pages/chartBarView.xhtml
+++ b/src/org/april/agirstatool/core/pages/chartBarView.xhtml
@@ -11,7 +11,7 @@
 	<script src="Chart.bundle.min.js"></script>
 </head>
 <body>
-		<div style="width: 400px; height: 200px; text-align: center; margin: 0 0; border: 1px solid red;">
+		<div style="width: 100%; height: 100%; text-align: center; margin: 0 0; border: 1px solid red;">
 			<canvas id="myChart" width="100%" height="100%"></canvas>
 			<script>
 var ctx = document.getElementById('myChart');
diff --git a/src/org/april/agirstatool/core/pages/chartLineView.xhtml b/src/org/april/agirstatool/core/pages/chartLineView.xhtml
index d02e1a4..4dba51d 100644
--- a/src/org/april/agirstatool/core/pages/chartLineView.xhtml
+++ b/src/org/april/agirstatool/core/pages/chartLineView.xhtml
@@ -11,7 +11,7 @@
 	<script src="Chart.bundle.min.js"></script>
 </head>
 <body>
-		<div style="width: 100%; height: 400px; text-align: center; margin: 0 0; border: 1px solid red;">
+		<div style="width: 100%; height: 100%; text-align: center; margin: 0 0; border: 1px solid red;">
 			<canvas id="myChart" width="100%" height="100%"></canvas>
 			<script>
 var ctx = document.getElementById('myChart');
diff --git a/src/org/april/agirstatool/core/pages/chartPolarView.xhtml b/src/org/april/agirstatool/core/pages/chartPolarView.xhtml
index 9297017..e204d18 100644
--- a/src/org/april/agirstatool/core/pages/chartPolarView.xhtml
+++ b/src/org/april/agirstatool/core/pages/chartPolarView.xhtml
@@ -11,7 +11,7 @@
 	<script src="Chart.bundle.min.js"></script>
 </head>
 <body>
-		<div style="width: 340px; height: 200px; text-align: center; margin: 0 0; border: 1px solid red;">
+		<div style="width: 100%; height: 100%; text-align: center; margin: 0 0; border: 1px solid red;">
 			<canvas id="myChart" width="100%" height="100%"></canvas>
 			<script>
 var ctx = document.getElementById('myChart');
diff --git a/src/org/april/agirstatool/core/pages/project.xhtml b/src/org/april/agirstatool/core/pages/project.xhtml
index ff6edea..15ef61e 100644
--- a/src/org/april/agirstatool/core/pages/project.xhtml
+++ b/src/org/april/agirstatool/core/pages/project.xhtml
@@ -13,11 +13,22 @@
 <body>
 	<div style="margin: 10px;">	
 		<h1><a href="index.xhtml">Agir Statool</a> – Project <a id="agirLink" href="#">n/a</a></h1>
-		<div id="issueCreatedClosed6MonthsChart" style="width: 49%; display: inline-block;">ISSUES CREATED/CLOSED 6 MONTHS CHART</div>
-		<div id="issueCreatedClosed3MonthsChart" style="width: 49%; display: inline-block;">ISSUES CREATED/CLOSED 3 MONTHS CHART</div>
-		<div id="issueCreatedClosedChart">ISSUES CREATED/CLOSED CHART</div>
-		<div style="margin: 4px;">
-			<span style="display: inline-block; padding-top: 6px; vertical-align: text-top;">Grouped</span>
+		<div>
+			<div style="margin: 5px;">
+				<a id="createClose3MonthsButton" href="#" class="button" onclick="javascript:createClosedSelect('3months');">3 months</a>
+				<a id="createClose6MonthsButton" href="#" class="button" onclick="javascript:createClosedSelect('6months');">6 months</a>
+				<a id="createCloseFullButton" href="#" class="button selected" onclick="javascript:createClosedSelect('full');">Full</a>
+				<a id="createClosePreviousYearButton" href="#" class="button" onclick="javascript:createClosedSelect('previousYear');">Previous Year</a>
+				<a href="#part2" class="button" style="margin-left: 75px;" >Down</a>
+			</div>
+			<div id="issueCreatedClosed3MonthsChart" style="display: none; width: 50%; height: 400px;">CREATED/CLOSED 3 MONTHS CHART</div>
+			<div id="issueCreatedClosed6MonthsChart" style="display: none; width: 50%; height: 400px;">CREATED/CLOSED 6 MONTHS CHART</div>
+			<div id="issueCreatedClosedPreviousYearChart" style="display: none; width: 50%; height: 400px;">CREATED/CLOSED PREVIOUS YEAR CHART</div>
+			<div id="issueCreatedClosedFullChart" style="height: 400px;">CREATED/CLOSED FULL CHART</div>
+		</div>
+		
+		<div id="part2" style="margin: 4px;">
+			<span style="display: inline-block; padding-top: 6px; vertical-align: text-top;"><a href="#part2">Grouped</a></span>
 			<label class="switch">
 			    <input type="checkbox" onclick="javascript:projectsViewFlip();" />
 			    <span class="slider round"></span>
@@ -25,8 +36,9 @@
 		</div>
 		<div id="rawView">
 			<div>
-				<div id="issueRawChart" style="display: inline-block;">ISSUES BAR CHART</div>
-				<div id="unassignedRawChart" style="display: inline-block;"></div>
+				<div id="issueRawChart" style="width: 400px; height: 200px; display: inline-block;">ISSUES BAR CHART</div>
+				<div id="unassignedRawChart" style="width: 340px; height: 200px; display: inline-block;"></div>
+				<div id="issueCreatedClosed6MonthsChartA" style="width: 340px; height: 200px; display: inline-block;">CREATED/CLOSED 6 MONTHS CHART</div>
 			</div>
 			<br/>
 			<div>
@@ -35,8 +47,9 @@
 		</div>
 		<div id="groupedView" style="display: none;">
 			<div>
-				<div id="issueGroupedChart" style="display: inline-block;">ISSUES BAR CHART</div>
-				<div id="unassignedGroupedChart" style="display: inline-block;"></div>
+				<div id="issueGroupedChart" style="width: 400px; height: 200px; display: inline-block;">ISSUES BAR CHART</div>
+				<div id="unassignedGroupedChart" style="width: 340px; height: 200px; display: inline-block;"></div>
+				<div id="issueCreatedClosed6MonthsChartB" style="width: 340px; height: 200px; display: inline-block;">CREATED/CLOSED 6 MONTHS CHARTB</div>
 			</div>
 			<br/>
 			<div>
@@ -44,6 +57,59 @@
 			</div>
 		</div>
     </div>
+	<script type="text/javascript">
+	function createClosedSelect(selection)
+	{
+	    if (selection == '3months')
+	    {
+	        document.getElementById ('createClose3MonthsButton').classList.add('selected');
+	        document.getElementById ('createClose6MonthsButton').classList.remove('selected');
+	        document.getElementById ('createClosePreviousYearButton').classList.remove('selected');
+	        document.getElementById ('createCloseFullButton').classList.remove('selected');
+
+	        document.getElementById ('issueCreatedClosed3MonthsChart').style.display = 'block';
+	        document.getElementById ('issueCreatedClosed6MonthsChart').style.display = 'none';
+	        document.getElementById ('issueCreatedClosedPreviousYearChart').style.display = 'none';
+	        document.getElementById ('issueCreatedClosedFullChart').style.display = 'none';
+	    }
+		else if (selection == '6months')
+	    {
+	        document.getElementById ('createClose3MonthsButton').classList.remove('selected');
+	        document.getElementById ('createClose6MonthsButton').classList.add('selected');
+	        document.getElementById ('createClosePreviousYearButton').classList.remove('selected');
+	        document.getElementById ('createCloseFullButton').classList.remove('selected');
+
+	        document.getElementById ('issueCreatedClosed3MonthsChart').style.display = 'none';
+	        document.getElementById ('issueCreatedClosed6MonthsChart').style.display = 'block';
+	        document.getElementById ('issueCreatedClosedPreviousYearChart').style.display = 'none';
+	        document.getElementById ('issueCreatedClosedFullChart').style.display = 'none';
+	    }
+	    else if (selection == 'previousYear')
+	    {
+	        document.getElementById ('createClose3MonthsButton').classList.remove('selected');
+	        document.getElementById ('createClose6MonthsButton').classList.remove('selected');
+	        document.getElementById ('createClosePreviousYearButton').classList.add('selected');
+	        document.getElementById ('createCloseFullButton').classList.remove('selected');
+
+	        document.getElementById ('issueCreatedClosed3MonthsChart').style.display = 'none';
+	        document.getElementById ('issueCreatedClosed6MonthsChart').style.display = 'none';
+	        document.getElementById ('issueCreatedClosedPreviousYearChart').style.display = 'block';
+	        document.getElementById ('issueCreatedClosedFullChart').style.display = 'none';
+	    }
+	    else if (selection == 'full')
+	    {
+	        document.getElementById ('createClose3MonthsButton').classList.remove('selected');
+	        document.getElementById ('createClose6MonthsButton').classList.remove('selected');
+	        document.getElementById ('createClosePreviousYearButton').classList.remove('selected');
+	        document.getElementById ('createCloseFullButton').classList.add('selected');
+
+	        document.getElementById ('issueCreatedClosed3MonthsChart').style.display = 'none';
+	        document.getElementById ('issueCreatedClosed6MonthsChart').style.display = 'none';
+	        document.getElementById ('issueCreatedClosedPreviousYearChart').style.display = 'none';
+	        document.getElementById ('issueCreatedClosedFullChart').style.display = 'block';
+	    }
+	}
+	</script>
 	<script type="text/javascript">
 	var showRawView = true;