diff --git a/netatmo-module/elements.html b/netatmo-module/elements.html
index a8bfb04..d68f86f 100644
--- a/netatmo-module/elements.html
+++ b/netatmo-module/elements.html
@@ -1,12 +1,15 @@
 <div class="netatmo">
-	<span class="small loading">
-		<svg width="2em" height="2em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt">
-			<rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
-			<circle cx="50" cy="50" r="40" stroke="#aaa" fill="none" stroke-width="10" stroke-linecap="round"></circle>
-			<circle cx="50" cy="50" r="40" stroke="#fff" fill="none" stroke-width="6" stroke-linecap="round">
+	<span class="loading">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+			<circle class="outer"></circle>
+			<circle class="inner">
 				<animate attributeName="stroke-dashoffset" dur="5s" repeatCount="indefinite" from="0" to="502"></animate>
 				<animate attributeName="stroke-dasharray" dur="5s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"></animate>
 			</circle>
 		</svg>
 	</span>
 </div>
+<svg class="loadTimer" viewbox="0 0 250 250">
+	<path class="border" transform="translate(125, 125)"/>
+	<path class="loader" transform="translate(125, 125) scale(.84)"/>
+</svg>
diff --git a/netatmo-module/less/style.less b/netatmo-module/less/style.less
index e09604e..84b2506 100644
--- a/netatmo-module/less/style.less
+++ b/netatmo-module/less/style.less
@@ -1,30 +1,64 @@
+@light: #fff;
+@dark: #000;
+@dimmed: darken(@light, 33.5%);
+@borderColor: @light;
+
 #netatmo-module{
+	position: absolute;
+	bottom: 0;
+		
 	.netatmo{
-		position:absolute;
-		bottom: 0;
+		display: inline-block;
 		
 		.module{
 			display: inline-block;
-			border: 1px solid white;
+			border: 1px solid @borderColor;
 			border-radius: .25em;
-			margin: .25em;
+			margin: .125em .25em;
 			overflow: hidden;
 			
 			.name{
 				text-align: center;
-				background: white;
-				color: black;
-				padding: .125em .25em
+				color: @dark;
+				background: @borderColor;
+				padding: .125em .25em;
 			}
 			
 			.data{
-				padding: .25em .125em;
+				padding: .125em .25em;
 			}
 		}
-		
-		.loading{
-			margin: 1.5em 2em;
-			display: inline-block;
+	}
+
+	.loading{
+		display: inline-block;
+		svg{
+			width: .6em;
+			height: .6em;
+			
+			circle{
+				fill: none;
+				stroke-linecap: round;
+				cx: 50;
+				cy: 50;
+				r: 40;
+			}
+			circle.inner{
+				stroke: @light;
+				stroke-width: 6;
+			}
+			circle.outer{
+				stroke: @dimmed;
+				stroke-width: 10;
+			}
 		}
 	}
-}
+	svg.loadTimer {
+		width: .5em;
+		height: .5em;
+		display: inline-block;
+
+		.loader{ fill: @dark;}
+		.border{ fill: @dimmed}
+	}
+}
\ No newline at end of file
diff --git a/netatmo-module/style.css b/netatmo-module/style.css
index 04579ee..00e5366 100644
--- a/netatmo-module/style.css
+++ b/netatmo-module/style.css
@@ -1,2 +1,2 @@
-#netatmo-module .netatmo{position:absolute;bottom:0}#netatmo-module .netatmo .module{display:inline-block;border:1px solid white;border-radius:.25em;margin:.25em;overflow:hidden}#netatmo-module .netatmo .module .name{text-align:center;background:#fff;color:#000;padding:.125em .25em}#netatmo-module .netatmo .module .data{padding:.25em .125em}#netatmo-module .netatmo .loading{margin:1.5em 2em;display:inline-block}
+#netatmo-module{position:absolute;bottom:0}#netatmo-module .netatmo{display:inline-block}#netatmo-module .netatmo .module{display:inline-block;border:1px solid #fff;border-radius:.25em;margin:.125em .25em;overflow:hidden}#netatmo-module .netatmo .module .name{text-align:center;color:#000;background:#fff;padding:.125em .25em}#netatmo-module .netatmo .module .data{padding:.125em .25em}#netatmo-module .loading{display:inline-block}#netatmo-module .loading svg{width:.6em;height:.6em}#netatmo-module .loading svg circle{fill:none;stroke-linecap:round;cx:50;cy:50;r:40}#netatmo-module .loading svg circle.inner{stroke:#fff;stroke-width:6}#netatmo-module .loading svg circle.outer{stroke:#aaa;stroke-width:10}#netatmo-module svg.loadTimer{width:.5em;height:.5em;display:inline-block}#netatmo-module svg.loadTimer .loader{fill:#000}#netatmo-module svg.loadTimer .border{fill:#aaa}
 /* This beautiful CSS-File has been crafted with LESS (lesscss.org) and compiled by simpLESS (wearekiss.com/simpless) */