diff --git a/README.txt b/README.txt
index 61fbd37..c390dc3 100644
--- a/README.txt
+++ b/README.txt
@@ -77,6 +77,6 @@ from gnome-icon-theme-symbolic, published under the Creative Commons
 Attribution-Share Alike 3.0 United States License by the GNOME Project, see
 http://www.gnome.org/.
 
-gadjo/static/css/adwaita-lock.jpg is a derived work of adwaita-lock.jpg from
-gnome-backgrounds, copyright © 2011 Jakub Steiner <jimmac@gmail.com>, and
-licensed under Creative Commons Attribution-ShareAlike 3.0 License.
+gadjo/static/css/header-03.jpeg is copied from let's encrypt website, licensed
+under Mozilla Public License Version 2.0, see their repository at
+https://github.com/letsencrypt/website.git.
diff --git a/gadjo/static/css/adwaita-lock.jpg b/gadjo/static/css/adwaita-lock.jpg
deleted file mode 100644
index 8d939bb..0000000
Binary files a/gadjo/static/css/adwaita-lock.jpg and /dev/null differ
diff --git a/gadjo/static/css/gadjo.scss b/gadjo/static/css/gadjo.scss
index a8b3134..3e887e8 100644
--- a/gadjo/static/css/gadjo.scss
+++ b/gadjo/static/css/gadjo.scss
@@ -23,7 +23,7 @@ a {
 	text-decoration: none;
 	border-width: 0;
 	border-bottom: 1px dotted #ff9900;
-	-webkit-transition: color 200ms ease-out;
+	@include vendor-prefix('transition', 'color 200ms ease-out');
 	&:hover {
 		color: #003388;
 		border-style: solid;
@@ -66,56 +66,112 @@ span.warning {
 /* top bar */
 
 div#top {
-	background: #23282d url(texture.png);
 	color: #eee;
-	text-align: right;
-	line-height: 200%;
-	height: 2em;
+	height: 0px;
 }
 
 div#top a {
 	color: #aaa;
 	font-weight: normal;
-}
-
-div#top a:hover {
-	color: #888;
 	border: 0;
+	&:hover {
+		color: #888;
+	}
 }
 
 ul.user-info {
 	margin: 0;
 	padding: 0;
+	padding-right: 3em;
 	font-size: 85%;
 	font-weight: bold;
-}
-
-ul.user-info li {
-	display: inline;
-	padding-left: 10px;
-	padding-right: 3em;
-}
-
-ul.user-info a {
-	border: none;
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	z-index: 10;
+	background: #23282d url(texture.png);
+	height: 40px;
+	line-height: 40px;
+	li {
+		display: inline;
+		padding-left: 3em;
+	}
 }
 
 /* header */
 
+$header-height: 40px;
+
 div#header {
-	background: #AD7C6D url(adwaita-lock.jpg);
-	color: white;
-	padding-left: 25px;
+	background: #C2D1CC url(header-03.jpeg);
+	background-size: 100% 500px;
+	padding-left: 0px;
 	border-bottom: 1px solid #888;
 	position: relative;
-	height: 5em;
+	height: $header-height;
 }
 
 div#header h1 {
+	height: $header-height;
+	line-height: $header-height;
+	padding: 0 ($header-height + 1px) 0 20px;
 	margin: 0;
-	padding: 15px 0 25px 0;
 	font-weight: normal;
-	text-shadow: 0 2px 15px black;
+	color: black;
+	text-shadow: 0 0 2px white;
+	display: inline-block;
+	z-index: 100;
+	max-width: 80%;
+	width: 80%;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	@include vendor-prefix('transition', 'all ease 200ms');
+	opacity: 0.5;
+
+	a {
+		color: inherit;
+		border-bottom: none;
+		display: inline-block;
+		padding: 0 11px;
+		position: relative;
+		margin-left: -5px;
+		padding-left: 20px;
+		&:first-child {
+			padding-left: 0;
+		}
+		&:last-child {
+			/* hide last breadcrumb item (== current page) */
+			display: none;
+		}
+	}
+
+	&:hover {
+		opacity: 0.7;
+	}
+
+	a:hover {
+		opacity: 1;
+		text-shadow: 0 0 0px #333;
+	}
+
+	span.separator {
+		display: none;
+	}
+
+	a::after {
+		content: "";
+		height: 42px;
+		width: 42px;
+		@include vendor-prefix('transform', 'scale(0.4, 0.707) rotate(45deg)');
+		display: inline-block;
+		position: absolute;
+		top: 0px;
+		right: -21px;
+		box-shadow: 1px -1px 0px 1px #bbb, 2px -2px 0px 2px white;
+		z-index: 100;
+		border-width: 1px 1px 0 0;
+	}
 }
 
 body[data-environment-label] div#header::before {
@@ -157,7 +213,7 @@ ul.messages li {
 div#main-content {
 	width: 100%;
 	margin-left: 0;
-	padding: 0 6px 0 16px;
+	padding: 1em 6px 0 16px;
 	border: 1px solid #ccc;
 	border-width: 0 1px 1px 0;
 	background: white;
@@ -175,7 +231,6 @@ div#main-content h2 {
 /* breadcrumb */
 
 div#more-user-links {
-	padding: 5px 0px;
 	font-size: 110%;
 }
 
@@ -184,7 +239,7 @@ div#more-user-links a:after {
 	background: #ccc;
 	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
 	border: 1px solid #bbb;
-	transition: background 0.5s;
+	@include vendor-prefix('transition', 'background 0.5s');
 }
 
 div#more-user-links a {
@@ -218,9 +273,7 @@ span#breadcrumb a:after {
 	content: "";
 	height: 22px;
 	width: 22px;
-	-webkit-transform: scale(0.4, 0.707) rotate(45deg);
-	-moz-transform: scale(0.4, 0.707) rotate(45deg);
-	transform: scale(0.4, 0.707) rotate(45deg);
+	@include vendor-prefix('transform', 'scale(0.4, 0.707) rotate(45deg)');
 	display: inline-block;
 	position: absolute;
 	top: 0px;
@@ -239,8 +292,8 @@ div#more-user-links a:hover:after {
 /* page content */
 
 div#content {
-	margin: 1em 1ex;
-	padding: 7px;
+	margin: 0 1ex 1em 0;
+	padding: 0px;
 	position: relative;
 }
 
@@ -333,9 +386,7 @@ ul.apps li a {
 	text-align: center;
 	border: 1px solid #ccc;
 	text-decoration: none;
-	transition: all .2s ease-in-out;
-	-webkit-transition: all .2s ease-in-out;
-	-moz-transition: all .2s ease-in-out;
+	@include vendor-prefix('transition', 'all .2s ease-in-out');
 	color: #FF7800;
 	border-radius: 15px;
 }
@@ -379,6 +430,10 @@ a[class^="icon-"], a[class*=" icon-"] {
 
 /* misc */
 
+div#content div.bo-block {
+	margin-left: 0;
+}
+
 div.bo-block {
 	border: 1px solid #e4e4e4;
 	background: #fcfcfc;
@@ -489,12 +544,19 @@ input[type=submit]:hover {
 
 #sidepage {
 	position: absolute;
+	top: 0px;
 	z-index: 100;
-	width: 30ex;
+	width: 36px;
 	height: 2em;
 	text-align: left;
-	transition: all 0ms ease-in;
-	overflow: hidden;
+	@include vendor-prefix('transition', 'all 0ms ease-in');
+	height: 100%;
+	overflow: initial;
+	background: #23282d url(texture.png);
+}
+
+#main {
+	margin-left: 36px;
 }
 
 #main.sidepage-expanded {
@@ -502,34 +564,63 @@ input[type=submit]:hover {
 }
 
 #main.enable-transitions,
+#main.enable-transitions div#header h1,
 #sidepage.enable-transitions ul#sidepage-menu,
+#sidepage.enable-transitions span#applabel,
 #sidepage.enable-transitions {
-	transition-duration: 400ms;
+	@include vendor-prefix('transition-duration', '400ms');
 }
 
 #sidepage.sidepage-expanded {
 	height: 100%;
 	overflow: initial;
+	width: 30ex;
 }
 
-#sidepage.sidepage-expanded ul#sidepage-menu {
+#sidepage ul#sidepage-menu {
 	transform: scale(1);
 }
 
 #main {
-	transition: margin-left 0ms ease-in;
+	@include vendor-prefix('transition', 'margin-left 0ms ease-in');
 	position: relative;
 }
 
 #sidepage span#applabel {
-	padding-left: 1em;
+	visibility: hidden; /* will be turned visible by publik.js */
+
+	padding-left: 0.5rem;
 	font-weight: bold;
 	cursor: pointer;
 	display: block;
+	position: relative;
+	overflow: hidden;
+	@include vendor-prefix('transition', 'max-width 0ms ease-in');
+	height: 40px;
+	line-height: 40px;
+	font-weight: normal;
+	font-size: 20px;
+	border-bottom: 1px solid #666;
+
+	&:hover {
+		color: #fff;
+	}
 }
 
-#sidepage span#applabel::after {
-	content: " \25BC";
+#sidepage span#applabel::before {
+	font-family: FontAwesome;
+	content: "\f18e"; /* fa-arrow-circle-o-right */
+	padding-left: 2px;
+	padding-right: 12px;
+}
+
+#sidepage.sidepage-expanded span#applabel::before {
+	content: "\f190"; /* fa-arrow-circle-o-left */
+}
+
+#sidepage.sidepage-expanded span#applabel {
+	overflow: hidden;
+	max-width: 100%;
 }
 
 #sidepage ul#sidepage-menu {
@@ -538,11 +629,10 @@ input[type=submit]:hover {
 	padding-top: 1em;
 	margin: 0;
 	background: #23282d url(texture.png);
-	height: 100%;
-	height: calc(100% - 3em); /* #top 2em, padding-top: 1em */
-	transition: all 0ms ease;
-	transform: scale(1, 0);
-	transform-origin: 0 0;
+	min-height: 100%;
+	min-height: calc(100% - 41px); /* #top 40px + border 1px */
+	box-sizing: border-box;
+	@include vendor-prefix('transition', 'all 0ms ease');
 }
 
 #sidepage ul#sidepage-menu a {
@@ -554,14 +644,13 @@ input[type=submit]:hover {
 }
 
 #sidepage ul#sidepage-menu li {
-	padding-left: 1ex;
 	position: relative;
 	line-height: 24px;
 }
 
 ul#sidepage-menu li a {
-	background: transparent no-repeat 0 50%;
-	padding: 5px 0 5px 30px;
+	background: transparent no-repeat 7px 50%;
+	padding: 5px 0 5px 37px;
 }
 
 #sidepage ul#sidepage-menu .active a {
@@ -578,7 +667,7 @@ ul#sidepage-menu li a {
 	content: "";
 	position: absolute;
 	z-index: -1;
-	transition: all 0.2s ease 0s;
+	@include vendor-prefix('transition', 'all 0.2s ease');
 	box-sizing: border-box;
 	width: 0;
 	width: 0%; height: 100%; top: 0; left: 0;
@@ -594,14 +683,13 @@ ul#sidepage-menu li a {
 	position: absolute;
 	display: block;
 	top: 0;
-	background: #215D9C;
+	background: white;
+	z-index: 5;
 	right: -17px;
 	left: auto;
 	width: 34px;
 	height: 34px;
-	-moz-transform: scale(0.4, 0.707) rotate(45deg);
-	-webkit-transform: scale(0.4, 0.707) rotate(45deg);
-	transform: scale(0.4, 0.707) rotate(45deg);
+	@include vendor-prefix('transform', 'scale(0.2, 0.2) rotate(45deg)');
 }
 
 #gadjo-ajax-error {
diff --git a/gadjo/static/css/header-03.jpeg b/gadjo/static/css/header-03.jpeg
new file mode 100644
index 0000000..669106e
Binary files /dev/null and b/gadjo/static/css/header-03.jpeg differ
diff --git a/gadjo/static/js/gadjo.js b/gadjo/static/js/gadjo.js
index ae530c5..cbfe0bf 100644
--- a/gadjo/static/js/gadjo.js
+++ b/gadjo/static/js/gadjo.js
@@ -302,4 +302,9 @@ var gadjo_js = gadjo_js || {};
         }
       });
     });
+    $(function () {
+      /* 440 is header image height (500px) - header height (60px) */
+      var timestamp = ((new Date().getTime() / 1000) % 86400 ) / (86400 / 440);
+      $('div#header').css('background-position', '0 -' + timestamp + 'px');
+    });
 })();