diff --git a/src/de/deadlocker8/budgetmaster/logic/chartGenerators/PieChartGenerator.java b/src/de/deadlocker8/budgetmaster/logic/chartGenerators/PieChartGenerator.java
index b0b4cb7933f1f5608d367c5e817588eb365f5217..b1539d60dea361d8e5b86666162d6fa1f631eb7b 100644
--- a/src/de/deadlocker8/budgetmaster/logic/chartGenerators/PieChartGenerator.java
+++ b/src/de/deadlocker8/budgetmaster/logic/chartGenerators/PieChartGenerator.java
@@ -1,6 +1,8 @@
 package de.deadlocker8.budgetmaster.logic.chartGenerators;
 
 import java.util.ArrayList;
+import java.util.Iterator;
+import java.util.Set;
 
 import de.deadlocker8.budgetmaster.logic.CategoryInOutSum;
 import de.deadlocker8.budgetmaster.logic.Helpers;
@@ -10,6 +12,7 @@ import javafx.event.EventHandler;
 import javafx.geometry.Point2D;
 import javafx.scene.Node;
 import javafx.scene.chart.PieChart;
+import javafx.scene.control.Label;
 import javafx.scene.control.Tooltip;
 import javafx.scene.input.MouseEvent;
 import tools.ConvertTo;
@@ -36,11 +39,16 @@ public class PieChartGenerator
      */
     public PieChart generate()
     {
-        ArrayList<PieChart.Data> data = new ArrayList<>();      
-
+        ArrayList<PieChart.Data> data = new ArrayList<>();
+        
         for(CategoryInOutSum currentItem : categoryInOutSums)
         {        	
-        	String label = String.valueOf(currentItem.getName()); 
+        	String label = currentItem.getName(); 
+        	if(label.equals("NONE"))
+        	{
+        		label = "Keine Kategorie";
+        	}
+        	
         	if(useBudgetIN)
         	{
         		data.add(new PieChart.Data(label, currentItem.getBudgetIN()/100.0));
@@ -62,15 +70,31 @@ public class PieChartGenerator
             Tooltip tooltip = new Tooltip();
 
             double total = 0;
-            for(int i = 0; i<chart.getData().size(); i++)
+            for(int i = 0; i < chart.getData().size(); i++)
             {
             	PieChart.Data currentData = chart.getData().get(i);
                 total += currentData.getPieValue();
                 String currentColor = ConvertTo.toRGBHexWithoutOpacity(categoryInOutSums.get(i).getColor());
                 currentData.getNode().setStyle("-fx-pie-color: " + currentColor + ";");
-                
-                //TODO color legend
-            }
+            }    
+            
+            //style legend item according to color
+    		Set<Node> nodes = chart.lookupAll(".chart-legend-item");
+    		if(nodes.size() > 0)
+    		{        	
+    			Iterator<Node> iterator = nodes.iterator();
+    			int counter = 0;
+    			while(iterator.hasNext())
+    			{
+        			Node node = iterator.next();	        			
+        			if(node instanceof Label)
+        			{
+        				Label labelLegendItem = (Label)node;        				
+        				labelLegendItem.getGraphic().setStyle("-fx-background-color: " + ConvertTo.toRGBHexWithoutOpacity(categoryInOutSums.get(counter).getColor()) + ";");
+        			}
+        			counter++;
+    			}
+    		}
 
             double pieValue = tool.getPieValue();
             double percentage = (pieValue / total) * 100;
diff --git a/src/de/deadlocker8/budgetmaster/ui/ChartController.java b/src/de/deadlocker8/budgetmaster/ui/ChartController.java
index a669e80dfc586d82c4007b524f6b4fd01b133f33..e44baa1ea3d7ba9a8e9a44849712b9f5ead3295f 100644
--- a/src/de/deadlocker8/budgetmaster/ui/ChartController.java
+++ b/src/de/deadlocker8/budgetmaster/ui/ChartController.java
@@ -6,12 +6,20 @@ import de.deadlocker8.budgetmaster.logic.CategoryInOutSum;
 import de.deadlocker8.budgetmaster.logic.ServerConnection;
 import de.deadlocker8.budgetmaster.logic.chartGenerators.PieChartGenerator;
 import javafx.fxml.FXML;
+import javafx.scene.control.Accordion;
+import javafx.scene.control.DatePicker;
 import javafx.scene.layout.AnchorPane;
+import javafx.scene.layout.HBox;
 import logger.Logger;
 
 public class ChartController implements Refreshable
 {
 	@FXML private AnchorPane anchorPaneMain;
+	@FXML private Accordion accordion;
+	@FXML private DatePicker datePickerStart;
+	@FXML private HBox hboxChartCategories;
+	@FXML private DatePicker datePickerEnd;
+	@FXML private AnchorPane anchorPaneChartMonth;
 
 	private Controller controller;
 
@@ -19,26 +27,35 @@ public class ChartController implements Refreshable
 	{
 		this.controller = controller;
 
-		//TODO design, chart chooser		
+		// TODO design, chart chooser
 		anchorPaneMain.setStyle("-fx-background-color: #F4F4F4;");
+		hboxChartCategories.setStyle("-fx-background-color: #F4F4F4;");
+		anchorPaneChartMonth.setStyle("-fx-background-color: #F4F4F4;");		
 	}
 
 	@Override
 	public void refresh()
 	{
-		//TODO example	
-		//TODO date range chooser
-		//TODO check wether starDate and EndDate are included and are working correctly
+		// TODO example
+		// TODO date range chooser
+		// TODO check wether starDate and EndDate are included and are working correctly
 		try
 		{
 			ServerConnection connection = new ServerConnection(controller.getSettings());
 			ArrayList<CategoryInOutSum> sums = connection.getCategoryInOutSumForMonth(controller.getCurrentDate().withDayOfMonth(1), controller.getCurrentDate().dayOfMonth().withMaximumValue());
-			PieChartGenerator generator = new PieChartGenerator("Einnahmen nach Kategorien", sums, false, controller.getSettings().getCurrency());
-			anchorPaneMain.getChildren().add(generator.generate());		
+
+			hboxChartCategories.getChildren().clear();
+			
+			PieChartGenerator generator = new PieChartGenerator("Einnahmen nach Kategorien", sums, true, controller.getSettings().getCurrency());
+			hboxChartCategories.getChildren().add(generator.generate());
+			generator = new PieChartGenerator("Ausgaben nach Kategorien", sums, false, controller.getSettings().getCurrency());
+			hboxChartCategories.getChildren().add(generator.generate());
+			
+			accordion.setExpandedPane(accordion.getPanes().get(0));
 		}
 		catch(Exception e)
 		{
-			Logger.error(e);			
+			Logger.error(e);
 		}
 	}
 }
\ No newline at end of file
diff --git a/src/de/deadlocker8/budgetmaster/ui/ChartTab.fxml b/src/de/deadlocker8/budgetmaster/ui/ChartTab.fxml
index e4461f90a25c86b4af4d245e8fd3e8d015bb083f..0dd6553be140f867bf992e6a21a6eb9170e5ea12 100644
--- a/src/de/deadlocker8/budgetmaster/ui/ChartTab.fxml
+++ b/src/de/deadlocker8/budgetmaster/ui/ChartTab.fxml
@@ -1,10 +1,70 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.control.Accordion?>
+<?import javafx.scene.control.DatePicker?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.control.TitledPane?>
 <?import javafx.scene.layout.AnchorPane?>
+<?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.VBox?>
+<?import javafx.scene.text.Font?>
 
 <AnchorPane fx:id="anchorPaneMain" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1" fx:controller="de.deadlocker8.budgetmaster.ui.ChartController">
    <children>
-      <VBox alignment="TOP_CENTER" layoutY="24.0" prefHeight="562.0" prefWidth="772.0" spacing="25.0" AnchorPane.bottomAnchor="14.0" AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="14.0" AnchorPane.topAnchor="25.0" />
+      <Accordion fx:id="accordion" AnchorPane.bottomAnchor="14.0" AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="14.0" AnchorPane.topAnchor="25.0">
+        <panes>
+          <TitledPane animated="false" text="Einnahmen/Ausgaben nach Kategorien">
+               <content>
+                  <VBox spacing="20.0">
+                     <children>
+                        <HBox alignment="CENTER" prefHeight="8.0" prefWidth="750.0">
+                           <children>
+                              <HBox alignment="CENTER_RIGHT" spacing="10.0" HBox.hgrow="ALWAYS">
+                                 <children>
+                                    <Label text="Von:">
+                                       <font>
+                                          <Font name="System Bold" size="16.0" />
+                                       </font>
+                                    </Label>
+                                    <DatePicker fx:id="datePickerStart" />
+                                 </children>
+                                 <HBox.margin>
+                                    <Insets right="15.0" />
+                                 </HBox.margin>
+                              </HBox>
+                              <HBox alignment="CENTER_LEFT" spacing="10.0" HBox.hgrow="ALWAYS">
+                                 <children>
+                                    <Label text="Bis:">
+                                       <font>
+                                          <Font name="System Bold" size="16.0" />
+                                       </font>
+                                    </Label>
+                                    <DatePicker fx:id="datePickerEnd" />
+                                 </children>
+                                 <HBox.margin>
+                                    <Insets left="15.0" />
+                                 </HBox.margin>
+                              </HBox>
+                           </children>
+                        </HBox>
+                        <HBox fx:id="hboxChartCategories" alignment="CENTER" prefHeight="100.0" prefWidth="200.0" VBox.vgrow="ALWAYS" />
+                     </children>
+                  </VBox>
+               </content>
+               <font>
+                  <Font name="System Bold" size="12.0" />
+               </font>
+          </TitledPane>
+          <TitledPane animated="false" text="Einnahmen/Ausgaben pro Monat">
+            <content>
+              <AnchorPane fx:id="anchorPaneChartMonth" minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
+            </content>
+               <font>
+                  <Font name="System Bold" size="12.0" />
+               </font>
+          </TitledPane>
+        </panes>
+      </Accordion>
    </children>
 </AnchorPane>