diff --git a/adventCalendar.php b/adventCalendar.php
index 0b4642b..aae9b6b 100644
--- a/adventCalendar.php
+++ b/adventCalendar.php
@@ -6,6 +6,7 @@ class adventCalendar {
 	private $calendarHeight;
 	public  $useModal;
 	public  $showExtras;
+	public  $enableSnow;
 	private $entries;
 	
 	/**
@@ -24,6 +25,7 @@ class adventCalendar {
 		$this->calendarHeight = $config['calendarHeight'] ? $config['calendarHeight'] : "840px";
 		$this->useModal = $config['useModal'] ? $config['useModal'] : "true";
 		$this->showExtras = $config['showExtras'] ? $config['showExtras'] : "false";
+		$this->enableSnow = $config['enableSnow'] ? $config['enableSnow'] : "false";
 	}
 	
 	/**
diff --git a/calendar_dev.json b/calendar_dev.json
index 7a02c31..f4dc1af 100644
--- a/calendar_dev.json
+++ b/calendar_dev.json
@@ -3,7 +3,8 @@
     "calendarWidth": "472",
     "calendarHeight": "827",
     "useModal": "true",
-    "showExtras": "true"
+    "showExtras": "true",
+	"enableSnow": "true"
   },
   "entries": [
     {
diff --git a/calendar_prod.json b/calendar_prod.json
index 0b2b0ae..2cc2cc0 100644
--- a/calendar_prod.json
+++ b/calendar_prod.json
@@ -3,7 +3,8 @@
     "calendarWidth": "472",
     "calendarHeight": "827",
     "useModal": "true",
-    "showExtras": "true"
+    "showExtras": "true",
+	"enableSnow": "true"
   },
   "entries": [
     {
diff --git a/css/main-adventskalender.css b/css/main-adventskalender.css
index cc959fb..33ba9ff 100644
--- a/css/main-adventskalender.css
+++ b/css/main-adventskalender.css
@@ -20,6 +20,12 @@ a {
   font-family: 'christmasFont';
   src: url('../fonts/Hello-Christmas.ttf')  format('truetype') /* Safari, Android, iOS */
 }
+.snow {
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  z-index: 1000;
+}
 .modal, .jquery-modal {
 	z-index: 1040 !important;
 }
diff --git a/index.php b/index.php
index 784c1bf..9cbbc0c 100644
--- a/index.php
+++ b/index.php
@@ -1,6 +1,21 @@
 <?php
-require "adventCalendar.php";
 $dev = isset($_GET['dev']) ? $_GET['dev'] : false;
+if ($dev) {
+	$config = file_get_contents("./calendar_dev.json");
+} else {
+	$config = file_get_contents("./calendar_prod.json");
+}
+
+require "adventCalendar.php";
+$calendar = new adventCalendar();
+$calendar->load_from_json($config);
+
+echo $calendar->showExtras;
+echo $calendar->enableSnow;
+
+$showExtras = ($calendar->showExtras == 'true') ? true : false;
+$snow_enabled = ($calendar->enableSnow == 'true') ? true : false;
+
 ?>
 
 <!DOCTYPE html>
@@ -48,22 +63,18 @@ $dev = isset($_GET['dev']) ? $_GET['dev'] : false;
 		<?php } ?>
 	</head>
 	<body>
-
+		<?php if ($snow_enabled) { ?>
+			<canvas class="snow" id="snow"></canvas>
+		<?php } ?>
 		<center>
 			<p style="color: white; font-family: christmasFont; font-size: 48px; margin: 16px 0px 20px 0px;">Adventskalender Seline</p>
 			<div class="mainCalendar">
-				<?php if ($dev) {
-					$config = file_get_contents("./calendar_dev.json");
-				} else {
-					$config = file_get_contents("./calendar_prod.json");
-				}
-				$calendar = new adventCalendar();
-				$calendar->load_from_json($config);
-				$calendar->render();
+				<?php 
+					$calendar->render();
 				?>
 			</div>
 			
-			<?php if ($calendar->showExtras == "true") { ?>
+			<?php if ($showExtras) { ?>
 			<hr>
 			<p style="color: white; font-family: christmasFont; font-size: 40px; margin: 16px 0px 20px 0px;">Zite wod nüt sötsch abmache :</p>
 			
@@ -74,6 +85,132 @@ $dev = isset($_GET['dev']) ? $_GET['dev'] : false;
 			</ul>
 			<?php } ?>
 		</center>
+		
+		<?php if ($snow_enabled) { ?>
+			<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js'></script>
+			<script>
+				const Snow = (canvas, count, options) => {
+				  const ctx = canvas.getContext('2d');
+				  const snowflakes = [];
+
+				  const add = item => snowflakes.push(item(canvas));
+
+				  const update = () => _.forEach(snowflakes, el => el.update());
+
+				  const resize = () => {
+					ctx.canvas.width = canvas.offsetWidth;
+					ctx.canvas.height = canvas.offsetHeight;
+
+					_.forEach(snowflakes, el => el.resized());
+				  };
+
+				  const draw = () => {
+					ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
+					_.forEach(snowflakes, el => el.draw());
+				  };
+
+				  const events = () => {
+					window.addEventListener('resize', resize);
+				  };
+
+				  const loop = () => {
+					draw();
+					update();
+					animFrame(loop);
+				  };
+
+				  const init = () => {
+					_.times(count, () => add(canvas => SnowItem(canvas, null, options)));
+					events();
+					loop();
+				  };
+
+				  init(count);
+				  resize();
+
+				  return { add, resize };
+				};
 
+				const defaultOptions = {
+				  color: 'orange',
+				  radius: [0.5, 3.0],
+				  speed: [1, 3],
+				  wind: [-0.5, 3.0] };
+
+
+				const SnowItem = (canvas, drawFn = null, opts) => {
+				  const options = { ...defaultOptions, ...opts };
+				  const { radius, speed, wind, color } = options;
+				  const params = {
+					color,
+					x: _.random(0, canvas.offsetWidth),
+					y: _.random(-canvas.offsetHeight, 0),
+					radius: _.random(...radius),
+					speed: _.random(...speed),
+					wind: _.random(...wind),
+					isResized: false };
+
+				  const ctx = canvas.getContext('2d');
+
+				  const updateData = () => {
+					params.x = _.random(0, canvas.offsetWidth);
+					params.y = _.random(-canvas.offsetHeight, 0);
+				  };
+
+				  const resized = () => params.isResized = true;
+
+				  const drawDefault = () => {
+					ctx.beginPath();
+					ctx.arc(params.x, params.y, params.radius, 0, 2 * Math.PI);
+					ctx.fillStyle = params.color;
+					ctx.fill();
+					ctx.closePath();
+				  };
+
+				  const draw = drawFn ?
+				  () => drawFn(ctx, params) :
+				  drawDefault;
+
+				  const translate = () => {
+					params.y += params.speed;
+					params.x += params.wind;
+				  };
+
+				  const onDown = () => {
+					if (params.y < canvas.offsetHeight) return;
+
+					if (params.isResized) {
+					  updateData();
+					  params.isResized = false;
+					} else {
+					  params.y = 0;
+					  params.x = _.random(0, canvas.offsetWidth);
+					}
+				  };
+
+				  const update = () => {
+					translate();
+					onDown();
+				  };
+
+				  return {
+					update,
+					resized,
+					draw };
+
+				};
+
+				const el = document.querySelector('.container');
+				const wrapper = document.querySelector('body');
+				const canvas = document.getElementById('snow');
+
+				const animFrame = window.requestAnimationFrame ||
+				window.mozRequestAnimationFrame ||
+				window.webkitRequestAnimationFrame ||
+				window.msRequestAnimationFrame;
+
+				Snow(canvas, 150, { color: 'white' });
+			</script>
+		<?php } ?>
 	</body>
 </html>
