diff --git a/templates/Froxlor/assets/css/main.css b/templates/Froxlor/assets/css/main.css
index 6433f281..f47f0f8e 100644
--- a/templates/Froxlor/assets/css/main.css
+++ b/templates/Froxlor/assets/css/main.css
@@ -787,7 +787,8 @@ table thead th.sorting {
     padding-left: 25px;
 }
 
-#chartdiv {
-	height: 500px;
-	margin: 30px 60px;
+.trafficchart {
+	height: 150px;
+	width: 100%;
+	margin: 15px 0 30px 0;
 }
\ No newline at end of file
diff --git a/templates/Froxlor/assets/js/traffic.js b/templates/Froxlor/assets/js/traffic.js
index b956ed78..b977738a 100644
--- a/templates/Froxlor/assets/js/traffic.js
+++ b/templates/Froxlor/assets/js/traffic.js
@@ -1,104 +1,88 @@
 jQuery.fn.reverse = function() {
 	return this.pushStack(this.get().reverse(), arguments);
 };
-$(document).ready(function(){
-	var ticks = [];
-	var data = [];
+$(document).ready(function() {
 	var ftp = [];
 	var http = [];
 	var mail = [];
-	var aticks = [];
-	var max = 0;
 	var i = 1;
 	var links = [];
-	$('#datalegend').remove();
-	$('#datatable tr').reverse().each(function() {
+	$('#datatable tbody tr').reverse().each(function() {
 		var row = $(this);
-		var day = $(row).children().first().text();
 		var ftpd = $(row).children().first().next().text();
 		var httpd = $(row).children().first().next().next().text();
 		var maild = $(row).children().first().next().next().next().text();
-		if ($(row).children().first().next().next().next().next().next().length > 0)
-		{
-			links.push($(row).children().last().html());
+		if ($(row).children().first().find("a").length > 0) {
+			links.push($(row).children().first().html());
 		}
-		ftp.push([i, parseFloat(ftpd) / 1024]);
-		http.push([i, parseFloat(httpd) / 1024]);
-		mail.push([i, parseFloat(maild) / 1024]);
-		aticks.push([i, day]);
-		if (ftpd > max)
-		{
-			max = ftpd;
-		}
-		if (httpd > max)
-		{
-			max = httpd;
-		}
-		if (maild > max)
-		{
-			max = maild;
-		}
-		ticks.push(day);
+		ftp.push([i, parseFloat(ftpd / 1024)]);
+		http.push([i, parseFloat(httpd / 1024)]);
+		mail.push([i, parseFloat(maild)]);
 		i++;
 	});
 	$('#datatable').hide();
-	data.push(ftp);
-	data.push(http);
-	data.push(mail);
-	if (links.length > 0)
-	{
-		var tmp = $('<div />', {id: 'linkslist'});
+	$('#charts').show();
+	if (links.length > 0) {
+		var tmp = $('<div />', {
+			id: 'linkslist'
+		});
 		$.each(links, function(i, link) {
 			tmp.append(link);
-			if (i != links.length - 1)
-			{
+			if (i != links.length - 1) {
 				tmp.append('&nbsp;|&nbsp;');
 			}
 		});
+		tmp.append('<br /><br /><br />');
 		tmp.insertBefore($('#datatable'));
 	}
-	
-	var dataset = [
-		{
-			label: 'FTP',
-			data: ftp,
-			color: '#019522'
-		},
-		{
-			label: 'HTTP',
-			data: http,
-			color: '#0000FF'
-		},
-		{
-			label: 'Mail',
-			data: mail,
-			color: '#800000'
-		}
-	];
-	
+
+	var ftpdata = [{
+		label: 'FTP',
+		data: ftp,
+		color: '#019522'
+	}];
+	var httpdata = [{
+		label: 'HTTP',
+		data: http,
+		color: '#0000FF'
+	}];
+	var maildata = [{
+		label: 'Mail',
+		data: mail,
+		color: '#800000'
+	}];
+
 	var options = {
 		series: {
-			shadowSize: 0,
-			curvedLines: { active: true, apply: false, fitPointDist: true },
+			shadowSize: 0
 		},
 		lines: {
 			show: true
 		},
 		points: {
-            radius: 2,
-            show: true
-        },
+			radius: 2,
+			show: true
+		},
 		legend: {
 			show: false
 		},
 		grid: {
 			hoverable: true,
 			borderWidth: 0
+		},
+		xaxis: {
+			tickSize: 1,
+			tickLength: 0
+		},
+		yaxis: {
+			tickColor: '#eee'
 		}
-	}
-	
-	
-	var flot1 = $.plot('#chartdiv', dataset, options);
+	};
+
+
+	$.plot('#ftpchart', ftpdata, options);
+	$.plot('#httpchart', httpdata, options);
+	$.plot('#mailchart', maildata, options);
 
 	$("<div id='tooltip'></div>").css({
 		position: "absolute",
@@ -109,19 +93,30 @@ $(document).ready(function(){
 		color: "#fff",
 		"font-size": "11px"
 	}).appendTo("body");
-	
-	$("#chartdiv").bind("plothover", function (event, pos, item) {
-		if (item) {
-			var x = item.datapoint[0].toFixed(3),
-				y = item.datapoint[1].toFixed(3);
 
-			$("#tooltip").html(item.series.label + ": " + y + " GiB")
-				.css({top: item.pageY+5, left: item.pageX+5})
-				.fadeIn(200);
+	$("#ftpchart, #httpchart").bind("plothover", function(event, pos, item) {
+		if (item) {
+			var y = item.datapoint[1].toFixed(2);
+
+			$("#tooltip").html(item.series.label + ": " + y + " GiB").css({
+				top: item.pageY + 5,
+				left: item.pageX - $("#tooltip").width() / 2
+			}).fadeIn(200);
 		} else {
 			$("#tooltip").hide();
 		}
-	});	
+	});
 
+	$("#mailchart").bind("plothover", function(event, pos, item) {
+		if (item) {
+			var y = item.datapoint[1].toFixed(2);
+
+			$("#tooltip").html(item.series.label + ": " + y + " MiB").css({
+				top: item.pageY + 5,
+				left: item.pageX - $("#tooltip").width() / 2
+			}).fadeIn(200);
+		} else {
+			$("#tooltip").hide();
+		}
+	});
 });
-
diff --git a/templates/Froxlor/customer/traffic/traffic.tpl b/templates/Froxlor/customer/traffic/traffic.tpl
index 169c2c1c..b947cc65 100644
--- a/templates/Froxlor/customer/traffic/traffic.tpl
+++ b/templates/Froxlor/customer/traffic/traffic.tpl
@@ -2,44 +2,44 @@ $header
 <article>
 	<header>
 		<h2>
-			<img src="templates/{$theme}/assets/img/icons/traffic.png" alt="{$lng['menue']['traffic']['traffic']}" />&nbsp;
+			<img src="templates/{$theme}/assets/img/icons/traffic_big.png" alt="{$lng['menue']['traffic']['traffic']}" />&nbsp;
 			{$lng['menue']['traffic']['traffic']}
 		</h2>
 	</header>
-	
-	<section class="fullform bradiusodd">
 
-			<form action="{$linker->getLink(array('section' => 'traffic'))}" method="post" enctype="application/x-www-form-urlencoded">
-				<fieldset>
-					<legend>Froxlor&nbsp;-&nbsp;{$lng['menue']['traffic']['traffic']}</legend>
+	<form action="{$linker->getLink(array('section' => 'traffic'))}" method="post" enctype="application/x-www-form-urlencoded">
+			<table class="fullform bradius" id="datatable">
+				<thead>
+					<tr>
+						<th>{$lng['traffic']['month']}</th>
+						<th>{$lng['traffic']['ftp']}</th>
+						<th>{$lng['traffic']['http']}</th>
+						<th>{$lng['traffic']['mail']}</th>
+						<th class="text-align:right;">{$lng['customer']['traffic']}</th>
+					</tr>
+				</thead>
+				<tbody>
+					$traffic
+				</tbody>
+				<tfoot>
+					<tr>
+						<td>{$lng['traffic']['months']['total']}</td>
+						<td>{$traffic_complete['ftp']}</td>
+						<td>{$traffic_complete['http']}</td>
+						<td>{$traffic_complete['mail']}</td>
+						<td></td>
+					</tr>
+				</tfoot>
+			</table>
+	</form>
 
-					<table class="formtable">
-						<tr>
-							<td>{$lng['traffic']['sumftp']}</td>
-							<td>{$lng['traffic']['sumhttp']}</td>
-							<td>{$lng['traffic']['summail']}</td>
-						</tr>
-						<tr>
-							<td><div style="color:#019522;text-align:center">{$traffic_complete['ftp']}</div></td>
-							<td><div style="color:#0000FF;text-align:center">{$traffic_complete['http']}</div></td>
-							<td><div style="color:#800000;text-align:center">{$traffic_complete['mail']}</div></td>
-						</tr>
-					</table>
-					<table class="formtable" id="datatable">
-						<tr id="datalegend">
-							<td>{$lng['traffic']['month']}</td>
-							<td>{$lng['traffic']['ftp']}</td>
-							<td>{$lng['traffic']['http']}</td>
-							<td>{$lng['traffic']['mail']}</td>
-							<td class="text-align:right;">{$lng['customer']['traffic']}</td>
-							<td></td>
-						</tr>
-						$traffic
-					</table>
-
-				</fieldset>
-			</form>
-	</section>
-	<div id="chartdiv"></div>
+	<div id="charts" style="display: none">
+		<h3>HTTP {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['http']})</h3>
+		<div id="httpchart" class="trafficchart" style="width:100%"></div>
+		<h3>FTP {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['ftp']})</h3>
+		<div id="ftpchart" class="trafficchart" style="width:100%"></div>
+		<h3>Mail {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['mail']})</h3>
+		<div id="mailchart" class="trafficchart" style="width:100%"></div>
+	</div>
 </article>
 $footer
diff --git a/templates/Froxlor/customer/traffic/traffic_details.tpl b/templates/Froxlor/customer/traffic/traffic_details.tpl
index 5d21564a..bb0612f0 100644
--- a/templates/Froxlor/customer/traffic/traffic_details.tpl
+++ b/templates/Froxlor/customer/traffic/traffic_details.tpl
@@ -2,42 +2,41 @@ $header
 <article>
 	<header>
 		<h2>
-			<img src="templates/{$theme}/assets/img/icons/traffic.png" alt="{$lng['menue']['traffic']['traffic']}" />&nbsp;
+			<img src="templates/{$theme}/assets/img/icons/traffic_big.png" alt="{$lng['menue']['traffic']['traffic']}" />&nbsp;
 			{$lng['menue']['traffic']['traffic']} $show
 		</h2>
 	</header>
 	
-	<section class="fullform bradiusodd">
-
-			<form action="{$linker->getLink(array('section' => 'traffic'))}" method="post" enctype="application/x-www-form-urlencoded">
-				<fieldset>
-					<legend>Froxlor&nbsp;-&nbsp;{$lng['menue']['traffic']['traffic']} $show</legend>
-
-					<table class="formtable">
-						<tr>
-							<td>{$lng['traffic']['sumftp']}</td>
-							<td>{$lng['traffic']['sumhttp']}</td>
-							<td>{$lng['traffic']['summail']}</td>
-						</tr>
-						<tr>
-							<td><div style="color:#019522;text-align:center">{$traffic_complete['ftp']}</div></td>
-							<td><div style="color:#0000FF;text-align:center">{$traffic_complete['http']}</div></td>
-							<td><div style="color:#800000;text-align:center">{$traffic_complete['mail']}</div></td>
-						</tr>
-					</table>
-					<table class="formtable" id="datatable">
-						<tr id="datalegend">
-							<td>{$lng['traffic']['day']}</td>
-							<td>{$lng['traffic']['ftp']}</td>
-							<td>{$lng['traffic']['http']}</td>
-							<td>{$lng['traffic']['mail']}</td>
-							<td>{$lng['traffic']['mb']}</td>
-						</tr>
-						$traffic
-					</table>
-				</fieldset>
-			</form>
-	</section>
-	<div id="chartdiv"></div>
+	<table class="bradius" id="datatable">
+		<thead>
+			<tr>
+				<th>{$lng['traffic']['day']}</th>
+				<th>{$lng['traffic']['ftp']}</th>
+				<th>{$lng['traffic']['http']}</th>
+				<th>{$lng['traffic']['mail']}</th>
+				<th>{$lng['traffic']['mb']}</th>
+			</tr>
+		</thead>
+		<tfoot>
+			<tr>
+				<td>{$lng['traffic']['months']['total']}</td>
+				<td>{$traffic_complete['ftp']}</td>
+				<td>{$traffic_complete['http']}</td>
+				<td>{$traffic_complete['mail']}</td>
+				<td>&nbsp;</td>
+			</tr>
+		</tfoot>
+		<tbody>
+			$traffic
+		</tbody>
+	</table>
+	<div id="charts" style="display: none">
+		<h3>HTTP {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['http']})</h3>
+		<div id="httpchart" class="trafficchart"></div>
+		<h3>FTP {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['ftp']})</h3>
+		<div id="ftpchart" class="trafficchart"></div>
+		<h3>Mail {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['mail']})</h3>
+		<div id="mailchart" class="trafficchart"></div>
+	</div>
 </article>
 $footer
diff --git a/templates/Froxlor/customer/traffic/traffic_traffic.tpl b/templates/Froxlor/customer/traffic/traffic_traffic.tpl
index ec87070d..89ec750b 100644
--- a/templates/Froxlor/customer/traffic/traffic_traffic.tpl
+++ b/templates/Froxlor/customer/traffic/traffic_traffic.tpl
@@ -1,8 +1,7 @@
 <tr>
-	<td>{$traf['monthname']}</td>
+	<td><a href="{$linker->getLink(array('section' => 'traffic', 'month' => $traf['month'], 'year' => $traf['year']))}">{$traf['monthname']}</a></td>
 	<td>{$traf['ftp']}</td>
 	<td>{$traf['http']}</td>
 	<td>{$traf['mail']}</td>
-	<td style="text-align:right; width:70px;">{$traf['byte']}</td>
-	<td><a href="{$linker->getLink(array('section' => 'traffic', 'month' => $traf['month'], 'year' => $traf['year']))}">{$traf['monthname']}</a></td>
+	<td>{$traf['byte']}</td>
 </tr>
diff --git a/templates/Sparkle/assets/css/main.css b/templates/Sparkle/assets/css/main.css
index 6108ffb9..7afe0bed 100644
--- a/templates/Sparkle/assets/css/main.css
+++ b/templates/Sparkle/assets/css/main.css
@@ -90,7 +90,7 @@ td a {
 }
 
 .bradius {
-	border-radius: 1px;
+	border-radius: 3px;
 	box-shadow:rgba(0,0,0,0.34902) 0 1px 3px 0;
 }
 
@@ -929,9 +929,10 @@ label.nobr {
 	white-space:nowrap;
 }
 
-#chartdiv {
-	height: 500px;
-	margin: 15px 0;
+.trafficchart {
+	height: 150px;
+	width: 100%;
+	margin: 15px 0 30px 0;
 }
 
 /* CANVAS STUFF */
@@ -970,6 +971,10 @@ label.nobr {
 	white-space:nowrap;
 }
 
+.newsitem:last-child {
+	border: 0px;
+}
+
 .newsitem a {
 	color:#333;
 	line-height:12px;
diff --git a/templates/Sparkle/assets/js/traffic.js b/templates/Sparkle/assets/js/traffic.js
index b956ed78..5fdf2712 100644
--- a/templates/Sparkle/assets/js/traffic.js
+++ b/templates/Sparkle/assets/js/traffic.js
@@ -1,104 +1,93 @@
 jQuery.fn.reverse = function() {
 	return this.pushStack(this.get().reverse(), arguments);
 };
-$(document).ready(function(){
-	var ticks = [];
-	var data = [];
+$(document).ready(function() {
 	var ftp = [];
 	var http = [];
 	var mail = [];
-	var aticks = [];
-	var max = 0;
 	var i = 1;
 	var links = [];
-	$('#datalegend').remove();
-	$('#datatable tr').reverse().each(function() {
+	$('#datatable tbody tr').reverse().each(function() {
 		var row = $(this);
-		var day = $(row).children().first().text();
 		var ftpd = $(row).children().first().next().text();
 		var httpd = $(row).children().first().next().next().text();
 		var maild = $(row).children().first().next().next().next().text();
-		if ($(row).children().first().next().next().next().next().next().length > 0)
-		{
-			links.push($(row).children().last().html());
+		if ($(row).children().first().find("a").length > 0) {
+			links.push($(row).children().first().html());
 		}
-		ftp.push([i, parseFloat(ftpd) / 1024]);
-		http.push([i, parseFloat(httpd) / 1024]);
-		mail.push([i, parseFloat(maild) / 1024]);
-		aticks.push([i, day]);
-		if (ftpd > max)
-		{
-			max = ftpd;
-		}
-		if (httpd > max)
-		{
-			max = httpd;
-		}
-		if (maild > max)
-		{
-			max = maild;
-		}
-		ticks.push(day);
+		ftp.push([i, parseFloat(ftpd / 1024)]);
+		http.push([i, parseFloat(httpd / 1024)]);
+		mail.push([i, parseFloat(maild)]);
 		i++;
 	});
 	$('#datatable').hide();
-	data.push(ftp);
-	data.push(http);
-	data.push(mail);
-	if (links.length > 0)
-	{
-		var tmp = $('<div />', {id: 'linkslist'});
+	$('#charts').show();
+	if (links.length > 0) {
+		var tmp = $('<div />', {
+			id: 'linkslist'
+		});
 		$.each(links, function(i, link) {
 			tmp.append(link);
-			if (i != links.length - 1)
-			{
+			if (i != links.length - 1) {
 				tmp.append('&nbsp;|&nbsp;');
 			}
 		});
+		tmp.append('<br /><br /><br />');
 		tmp.insertBefore($('#datatable'));
 	}
-	
-	var dataset = [
-		{
-			label: 'FTP',
-			data: ftp,
-			color: '#019522'
-		},
-		{
-			label: 'HTTP',
-			data: http,
-			color: '#0000FF'
-		},
-		{
-			label: 'Mail',
-			data: mail,
-			color: '#800000'
-		}
-	];
-	
+
+	var ftpdata = [{
+		label: 'FTP',
+		data: ftp,
+		color: '#019522'
+	}];
+	var httpdata = [{
+		label: 'HTTP',
+		data: http,
+		color: '#0000FF'
+	}];
+	var maildata = [{
+		label: 'Mail',
+		data: mail,
+		color: '#800000'
+	}];
+
 	var options = {
 		series: {
 			shadowSize: 0,
-			curvedLines: { active: true, apply: false, fitPointDist: true },
+			curvedLines: {
+				active: true,
+				apply: false,
+				fitPointDist: true
+			}
 		},
 		lines: {
 			show: true
 		},
 		points: {
-            radius: 2,
-            show: true
-        },
+			radius: 2,
+			show: true
+		},
 		legend: {
 			show: false
 		},
 		grid: {
 			hoverable: true,
 			borderWidth: 0
+		},
+		xaxis: {
+			tickSize: 1,
+			tickLength: 0
+		},
+		yaxis: {
+			tickColor: '#eee'
 		}
-	}
-	
-	
-	var flot1 = $.plot('#chartdiv', dataset, options);
+	};
+
+
+	$.plot('#ftpchart', ftpdata, options);
+	$.plot('#httpchart', httpdata, options);
+	$.plot('#mailchart', maildata, options);
 
 	$("<div id='tooltip'></div>").css({
 		position: "absolute",
@@ -109,19 +98,30 @@ $(document).ready(function(){
 		color: "#fff",
 		"font-size": "11px"
 	}).appendTo("body");
-	
-	$("#chartdiv").bind("plothover", function (event, pos, item) {
-		if (item) {
-			var x = item.datapoint[0].toFixed(3),
-				y = item.datapoint[1].toFixed(3);
 
-			$("#tooltip").html(item.series.label + ": " + y + " GiB")
-				.css({top: item.pageY+5, left: item.pageX+5})
-				.fadeIn(200);
+	$("#ftpchart, #httpchart").bind("plothover", function(event, pos, item) {
+		if (item) {
+			var y = item.datapoint[1].toFixed(2);
+
+			$("#tooltip").html(item.series.label + ": " + y + " GiB").css({
+				top: item.pageY + 5,
+				left: item.pageX - $("#tooltip").width() / 2
+			}).fadeIn(200);
 		} else {
 			$("#tooltip").hide();
 		}
-	});	
+	});
 
+	$("#mailchart").bind("plothover", function(event, pos, item) {
+		if (item) {
+			var y = item.datapoint[1].toFixed(2);
+
+			$("#tooltip").html(item.series.label + ": " + y + " MiB").css({
+				top: item.pageY + 5,
+				left: item.pageX - $("#tooltip").width() / 2
+			}).fadeIn(200);
+		} else {
+			$("#tooltip").hide();
+		}
+	});
 });
-
diff --git a/templates/Sparkle/customer/traffic/traffic.tpl b/templates/Sparkle/customer/traffic/traffic.tpl
index f3a2dfde..0bad257c 100644
--- a/templates/Sparkle/customer/traffic/traffic.tpl
+++ b/templates/Sparkle/customer/traffic/traffic.tpl
@@ -6,38 +6,43 @@ $header
 			{$lng['menue']['traffic']['traffic']}
 		</h2>
 	</header>
+
+	<form action="{$linker->getLink(array('section' => 'traffic'))}" method="post" enctype="application/x-www-form-urlencoded">
+		<fieldset>
+			<table class="fullform bradius" id="datatable">
+				<thead>
+					<tr>
+						<th>{$lng['traffic']['month']}</td>
+						<th>{$lng['traffic']['ftp']}</th>
+						<th>{$lng['traffic']['http']}</th>
+						<th>{$lng['traffic']['mail']}</th>
+						<th class="text-align:right;">{$lng['customer']['traffic']}</th>
+					</tr>
+				</thead>
+				<tbody>
+					$traffic
+				</tbody>
+				<tfoot>
+					<tr>
+						<td>{$lng['traffic']['months']['total']}</td>
+						<td>{$traffic_complete['ftp']}</td>
+						<td>{$traffic_complete['http']}</td>
+						<td>{$traffic_complete['mail']}</td>
+						<td></td>
+					</tr>
+				</tfoot>
+			</table>
+
+		</fieldset>
+	</form>
 	
-	<section>
-
-			<form action="{$linker->getLink(array('section' => 'traffic'))}" method="post" enctype="application/x-www-form-urlencoded">
-				<fieldset>
-					<table class="fullform bradius">
-						<tr>
-							<th>{$lng['traffic']['sumftp']}</th>
-							<th>{$lng['traffic']['sumhttp']}</th>
-							<th>{$lng['traffic']['summail']}</th>
-						</tr>
-						<tr>
-							<td><div style="color:#019522;">{$traffic_complete['ftp']}</div></td>
-							<td><div style="color:#0000FF;">{$traffic_complete['http']}</div></td>
-							<td><div style="color:#800000;">{$traffic_complete['mail']}</div></td>
-						</tr>
-					</table><br />
-					<table class="fullform bradius" id="datatable">
-						<tr id="datalegend">
-							<th>{$lng['traffic']['month']}</td>
-							<th>{$lng['traffic']['ftp']}</th>
-							<th>{$lng['traffic']['http']}</th>
-							<th>{$lng['traffic']['mail']}</th>
-							<th class="text-align:right;">{$lng['customer']['traffic']}</th>
-							<th></th>
-						</tr>
-						$traffic
-					</table>
-
-				</fieldset>
-			</form>
-	</section>
-	<div id="chartdiv" style="width:100%"></div>
+	<div id="charts" style="display: none">
+		<h3>HTTP {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['http']})</h3>
+		<div id="httpchart" class="trafficchart" style="width:100%"></div>
+		<h3>FTP {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['ftp']})</h3>
+		<div id="ftpchart" class="trafficchart" style="width:100%"></div>
+		<h3>Mail {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['mail']})</h3>
+		<div id="mailchart" class="trafficchart" style="width:100%"></div>
+	</div>
 </article>
 $footer
diff --git a/templates/Sparkle/customer/traffic/traffic_details.tpl b/templates/Sparkle/customer/traffic/traffic_details.tpl
index 9ee75d26..aa869d1a 100644
--- a/templates/Sparkle/customer/traffic/traffic_details.tpl
+++ b/templates/Sparkle/customer/traffic/traffic_details.tpl
@@ -7,40 +7,36 @@ $header
 		</h2>
 	</header>
 	
-	<section class="fullform bradius">
-
-			<form action="{$linker->getLink(array('section' => 'traffic'))}" method="post" enctype="application/x-www-form-urlencoded">
-				<fieldset>
-					<legend>Froxlor&nbsp;-&nbsp;{$lng['menue']['traffic']['traffic']} $show</legend>
-
-					<table class="formtable">
-						<thead>
-							<tr>
-								<th>{$lng['traffic']['sumftp']}</th>
-								<th>{$lng['traffic']['sumhttp']}</th>
-								<th>{$lng['traffic']['summail']}</th>
-							</tr>
-						</thead>
-						<tr>
-							<td><div style="color:#019522;text-align:center">{$traffic_complete['ftp']}</div></td>
-							<td><div style="color:#0000FF;text-align:center">{$traffic_complete['http']}</div></td>
-							<td><div style="color:#800000;text-align:center">{$traffic_complete['mail']}</div></td>
-						</tr>
-					</table>
-					<table class="formtable" id="datatable">
-						<tr id="datalegend">
-							<td>{$lng['traffic']['day']}</td>
-							<td>{$lng['traffic']['ftp']}</td>
-							<td>{$lng['traffic']['http']}</td>
-							<td>{$lng['traffic']['mail']}</td>
-							<td>{$lng['traffic']['mb']}</td>
-						</tr>
-						$traffic
-					</table>
-				</fieldset>
-			</form>
-	</section>
-	<br />
-	<div id="chartdiv" style="width:100%"></div>
+	<table class="bradius" id="datatable">
+		<thead>
+			<tr>
+				<th>{$lng['traffic']['day']}</th>
+				<th>{$lng['traffic']['ftp']}</th>
+				<th>{$lng['traffic']['http']}</th>
+				<th>{$lng['traffic']['mail']}</th>
+				<th>{$lng['traffic']['mb']}</th>
+			</tr>
+		</thead>
+		<tfoot>
+			<tr>
+				<td>{$lng['traffic']['months']['total']}</td>
+				<td>{$traffic_complete['ftp']}</td>
+				<td>{$traffic_complete['http']}</td>
+				<td>{$traffic_complete['mail']}</td>
+				<td>&nbsp;</td>
+			</tr>
+		</tfoot>	
+		<tbody>
+			$traffic
+		</tbody>
+	</table>
+	<div id="charts" style="display: none">
+		<h3>HTTP {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['http']})</h3>
+		<div id="httpchart" class="trafficchart"></div>
+		<h3>FTP {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['ftp']})</h3>
+		<div id="ftpchart" class="trafficchart"></div>
+		<h3>Mail {$lng['admin']['traffic']} ({$lng['traffic']['months']['total']} {$traffic_complete['mail']})</h3>
+		<div id="mailchart" class="trafficchart"></div>
+	</div>
 </article>
 $footer
diff --git a/templates/Sparkle/customer/traffic/traffic_traffic.tpl b/templates/Sparkle/customer/traffic/traffic_traffic.tpl
index ec87070d..89ec750b 100644
--- a/templates/Sparkle/customer/traffic/traffic_traffic.tpl
+++ b/templates/Sparkle/customer/traffic/traffic_traffic.tpl
@@ -1,8 +1,7 @@
 <tr>
-	<td>{$traf['monthname']}</td>
+	<td><a href="{$linker->getLink(array('section' => 'traffic', 'month' => $traf['month'], 'year' => $traf['year']))}">{$traf['monthname']}</a></td>
 	<td>{$traf['ftp']}</td>
 	<td>{$traf['http']}</td>
 	<td>{$traf['mail']}</td>
-	<td style="text-align:right; width:70px;">{$traf['byte']}</td>
-	<td><a href="{$linker->getLink(array('section' => 'traffic', 'month' => $traf['month'], 'year' => $traf['year']))}">{$traf['monthname']}</a></td>
+	<td>{$traf['byte']}</td>
 </tr>