diff --git a/website/agenda/planung/css/admin.css b/website/agenda/planung/css/admin.css
index e1f2984..123c152 100644
--- a/website/agenda/planung/css/admin.css
+++ b/website/agenda/planung/css/admin.css
@@ -1,4 +1,32 @@
 
+/* roboto-regular - latin_latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/roboto-v18-latin_latin-ext-regular.eot'); /* IE9 Compat Modes */
+  src: local('Roboto'), local('Roboto-Regular'),
+       url('../fonts/roboto-v18-latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('../fonts/roboto-v18-latin_latin-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */
+       url('../fonts/roboto-v18-latin_latin-ext-regular.woff') format('woff'), /* Modern Browsers */
+       url('../fonts/roboto-v18-latin_latin-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('../fonts/roboto-v18-latin_latin-ext-regular.svg#Roboto') format('svg'); /* Legacy iOS */
+}
+
+/* open-sans-regular - latin_latin-ext */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/open-sans-v15-latin_latin-ext-regular.eot'); /* IE9 Compat Modes */
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+       url('../fonts/open-sans-v15-latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('../fonts/open-sans-v15-latin_latin-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */
+       url('../fonts/open-sans-v15-latin_latin-ext-regular.woff') format('woff'), /* Modern Browsers */
+       url('../fonts/open-sans-v15-latin_latin-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('../fonts/open-sans-v15-latin_latin-ext-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
+}
+
 body{
 	margin:0;
 	padding:0;
@@ -13,6 +41,7 @@ body #content{
 	color:#000;
 	background:#fff;
 	text-align:left;
+    min-width:500px;
 	max-width:1200px;
     margin-left:auto;
     margin-right:auto;
@@ -33,11 +62,23 @@ body,
 #content div,
 #content select,
 #content option,
-#content li{
-    font-size:0.75rem;
+#content li,
+#content input[type="submit"],
+#content input[type="file"],
+#content .label{
  	font-family:Roboto,sans-serif;
+    font-size:0.937rem;
 }
 
+
+#content div.panel-header,
+#content button{
+    font-size:1rem;
+ 	font-family:Roboto,sans-serif;
+    font-weight:600;
+}
+
+
 #content textarea{
     padding:6px;
     border:1px solid #ccc;
@@ -85,7 +126,6 @@ body,
 
 #calcms_admin_menu div a,
 #calcms_admin_menu select{
-    font-size:14px;
 	padding:6px;
 	padding-top:1rem;
 	padding-bottom:1rem;
@@ -103,7 +143,6 @@ body,
 
 #calcms_admin_menu select,
 #calcms_admin_menu option{
-    font-size:0.8rem;
 	max-width:8em;
 	border:0;
 	padding-left:0;
@@ -121,11 +160,14 @@ a{
 }
 
 #content table{
-	margin:1;
 	border-collapse:collapse;
 	width:100%
 }
 
+#content table.data tr{
+    border-bottom:1px solid rgba(0,0,0,0.12);
+}
+
 #content table td{
 	padding:6px;
 	border-collapse:collapse;
@@ -148,25 +190,37 @@ a{
 }
 
 
-#content div{
-	padding:1rem;
+div.editor{
+	padding-left:1rem;
+    padding-right:1rem;
 }
 
-#content div.header{
-    font-size:16px;
+#content .panel{
+    border: 1px solid rgba(0,0,0,.03);
+    box-shadow: 0 2px 2px rgba(0,0,0,.24),0 0 2px rgba(0,0,0,.12);
+    margin: 4px;
+}
+
+#content div.panel-header{
 	text-align:left;
 	padding-left:0;
+    align-content: center;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    padding: 8px 20px;
+    color: rgba(0,0,0,.54);
+    background: rgba(0,0,0,.03);
+}
+
+#content div.panel-body{
+    padding:1rem;
 }
 
 #content .field{
 	width:30em;
 }
 
-#content .button{
-	width:10em;
-    cursor:pointer;
-}
-
 *:focus {outline: none;}
 
 #content a{
@@ -287,13 +341,6 @@ div.error{
 	border-radius:3px;
 }
 
-#content div.card div.title{
-    font-size:16px;
-}
-
-#content table.table tr{
-    border-bottom:solid 1px #ebebeb;    
-}
 #content table.table tr:hover{
     background:#ebebeb
 }
@@ -337,6 +384,18 @@ tr.tablesorter-filter-row input{
     color:#000;
 }
 
+table.table tr,
+table.tablesorter tr{
+    border-bottom:solid 1px #ebebeb;    
+}
+
+#content table.tablesorter td,
+#content table.table td{
+    padding:0.8rem 0.4rem;
+    text-align:left;
+    vertical-align:middle;
+}
+
 /*colors*/    
 #content input[type="submit"],
 #content input[type="file"],
@@ -355,30 +414,29 @@ tr.tablesorter-filter-row input{
     background-color:#39a1f4;
 }
 
+#content .button{
+    cursor:pointer;
+}
+
 /*colors end */
 #content input[type="submit"],
 #content input[type="file"],
 #content button{
-    border:none;
-    color:#fff;
-    padding:8px;
-    margin-top:0px;
-    margin-bottom:0px;
-    margin-left:0.5rem;
+    display:inline-block;
+    border:0;
+    padding-left:16px;
+    padding-right:16px;
+    margin:0.5rem;
     text-align: center;
     text-decoration: none;
-    font-size: 12px;
-}
-
-#content input[type="submit"],
-#content input[type="file"],
-#content button{
-    box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+    min-width:64px;
+    font-weight:500;
+    border-radius:4px;
+    color:#fff;
+    height:36px;
     position:relative;
+    box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
     transition:background-color .3s cubic-bezier(.64,.09,.08,1),box-shadow .3s cubic-bezier(.64,.09,.08,1);
-    padding:10px 20px;
-    display:inline-block;
-    border:0
 }
 
 #content input[type="submit"]:hover,
@@ -434,10 +492,6 @@ input[type='checkbox']{
     margin-top:0px;
 }
 
-#content div.buttons button{
-    margin-bottom:1rem;
-}
-
 #content div.formField div.label{
     display:hide;
     padding-left:1em;
@@ -455,7 +509,6 @@ input[type='checkbox']{
 /* new */
 
 #calcms_admin_menu{
-    font-size:0.9375rem;
     position:fixed;
     top:0;
     left:0;
@@ -479,31 +532,51 @@ input[type='checkbox']{
     border: none;
 }
 
-body #content{
-    margin-top:0;
-}
-
-body,
-#content input,
-#content textarea,
-#content td,
-#content div,
-#content select,
-#content option,
-#content li,
-#content input[type="submit"],
-#content input[type="file"],
-#content button{
-    font-size:0.85rem;
-}
-
 #calcms_admin_menu .fa,
 #calcms_admin_menu .far,
 #calcms_admin_menu .fas{
-    opacity:0.5;
+    color:#777;
 }
 
-#content div.buttons{
-    margin-top:-1rem;
-    margin-bottom:-1rem;
+#content button.selectImage{
+    padding:0!important;
+    float:left;
+    min-width:32px;
 }
+
+#content button.selectImage,
+#content button.selectImage img{
+    width:32px;
+    height:32px;
+}
+input.image{
+    width:16rem;
+}
+
+#content .ui-widget.ui-widget-content{
+    border:0;
+}
+
+#content .select .option{
+    font-size:1rem;
+    line-height:2rem;
+}
+
+#content #imageList div.images{
+    max-height:650px;
+    overflow-y:scroll
+}
+
+#calcms_admin_menu #bars{
+    cursor:pointer;
+}
+
+#calcms_admin_menu.mobile{
+    flex-direction:column;
+    position:absolute;
+}
+
+#calcms_admin_menu.mobile div{
+    text-align:left;
+}
+
diff --git a/website/agenda/planung/css/calendar.css b/website/agenda/planung/css/calendar.css
index e0beb70..8577ed6 100644
--- a/website/agenda/planung/css/calendar.css
+++ b/website/agenda/planung/css/calendar.css
@@ -334,6 +334,10 @@ input.tablesorter-filter{
     font-weight:300;
 }
 
+#content .weak span{
+    border-radius:4px;
+}
+
 #content .schedule,
 #content .event{
 	cursor:pointer;
@@ -459,9 +463,6 @@ div.rms_detail div.image{
     width:100%;
     float:right;
 }
-div.rms_detail div.image img{
-    
-}
 
 div.rms_detail div.text{
     width:100%;
@@ -489,10 +490,13 @@ div.play .error{
 }
 
 #content div.event,
-#content div.scheduled,
+#content div.schedule,
 #content div.grid,
-#content div.playout{
-    padding-top:0.4rem;
-    padding-bottom:1rem;
+#content div.play,
+#content div.error{
+    padding-left:0px;
+    padding-top:0px;
+    padding-bottom:12px;
+    padding-right:32px;
 }
 
diff --git a/website/agenda/planung/css/comment.css b/website/agenda/planung/css/comment.css
index d1c91f8..5323f4f 100644
--- a/website/agenda/planung/css/comment.css
+++ b/website/agenda/planung/css/comment.css
@@ -1,3 +1,7 @@
+#comments table{
+     border-collapse: collapse;    
+}
+
 #comments td,th,input {
 	line-height:100%;
 	ffont-size:10px;
@@ -5,7 +9,7 @@
 #comments td,th{
 	display:table-cell;
 	font-weight:normal;
-	padding:6px;
+	padding:1rem;
 }
 
 #comments td.level0, td.level1, td.level2, td.level3, td.level4, td.level5{ 
@@ -86,10 +90,6 @@
 }
 
 
-#comments table.event_comments{
-	/*width:800px;*/
-}
-
 #comments table.event_comments td{
 	padding:3px;
 	background-color:#ccc;
@@ -98,10 +98,6 @@
 #comments .event th{
 	text-align:left;
 }
-#comments .event td{
-	padding:3px;
-	border-right:1px solid #fff;
-}
 
 #comments .event button{
 	text-align:right;
diff --git a/website/agenda/planung/css/event.css b/website/agenda/planung/css/event.css
index 2e6dd34..9126a75 100644
--- a/website/agenda/planung/css/event.css
+++ b/website/agenda/planung/css/event.css
@@ -15,10 +15,6 @@ pre{
     width:11em;
 }
 
-#content div.editor input.image{
-    width:90%;
-}
-
 #content .editor img{
     padding:0;
     margin:0;
@@ -49,11 +45,6 @@ pre{
     max-width:40rem;
 }
 
-#content .panel{
-    margin:1em;
-    border:1px solid #ccc;
-}
-
 .date{
     width:10em;
 }
diff --git a/website/agenda/planung/css/list_series.css b/website/agenda/planung/css/list_series.css
index c828035..81427c5 100644
--- a/website/agenda/planung/css/list_series.css
+++ b/website/agenda/planung/css/list_series.css
@@ -22,18 +22,14 @@ div#newSeries a,
 div#oldSeries a{
     color:#fff;
     background:#1abc9c;
-    padding:6px;
-    padding-top:6px;
-    margin:6px;
-    margin-left:6px;
-    margin-right:6px;
-    /*float:left;*/
+    padding:8px;
+    margin:8px;
     cursor:pointer;
     text-align:center;
     display:table-cell;
     vertical-align:middle;
     width:10rem;
-    height:3rem;
+    height:4rem;
     line-height:2em;
 }
 
diff --git a/website/agenda/planung/css/show-playout.css b/website/agenda/planung/css/show-playout.css
index cf276bb..d8d40d6 100644
--- a/website/agenda/planung/css/show-playout.css
+++ b/website/agenda/planung/css/show-playout.css
@@ -46,6 +46,8 @@ table{
     padding-top:3px;
     padding-bottom:3px;
     margin:1px;
+    border-radius:4px;
+    text-align:center;
 }
 
 #content div.ok{
diff --git a/website/agenda/planung/css/studio_timeslots.css b/website/agenda/planung/css/studio_timeslots.css
index d058000..9a20240 100644
--- a/website/agenda/planung/css/studio_timeslots.css
+++ b/website/agenda/planung/css/studio_timeslots.css
@@ -66,6 +66,7 @@
 
 #content div.show_schedule{
     clear:both;
+    padding:0;
 }
 
 #content div.show_schedule table{
diff --git a/website/agenda/planung/js/admin.js b/website/agenda/planung/js/admin.js
index ab3c71e..fd8131d 100644
--- a/website/agenda/planung/js/admin.js
+++ b/website/agenda/planung/js/admin.js
@@ -205,23 +205,63 @@ function getUrlParameter(name){
     return results[1];
 }
 
+function handleBars(){
+    var menu=$('#calcms_admin_menu');
+    menu.toggleClass('mobile');
+    if (menu.hasClass('mobile')){
+        $('#calcms_admin_menu div').show();
+        $('#content').hide();
+    }else{
+        $('#content').show();
+        setupMenu(1);
+    }
+}
+
+var oldWidth=0;
+function setupMenu(update){
+    var xmax=960;
+
+    var menu = $('#calcms_admin_menu');
+    var width = menu.width();
+
+    if ( (width < xmax)  && (oldWidth >= xmax) ) update=1;
+    if ( (width >= xmax) && (oldWidth <  xmax) ) update=1;
+    if (oldWidth==0) update=1;
+
+    if (update == 1){
+        if (menu.width() < 960){
+            $('#calcms_admin_menu div').hide();
+            $('#calcms_admin_menu div.mobile').show();
+        }else{
+            $('#calcms_admin_menu div').show();
+            $('#calcms_admin_menu #bars').hide();
+            menu.removeClass('mobile');
+        }
+    }
+
+    oldWidth = width;
+}
+
 // will be overridden by calendar.js
 function setupMenuHeight(){
+
+    var content=$('#content');
+    content.css("position", "relative");
+
     var menu=$('#calcms_admin_menu');
-
-    $('#content').css("position", "absolute");
     var top = menu.height();
-    $('#content').css("top", top);
+    content.css("top", top);
 
-    
+    /*    
+    console.log($(window).width()+" "+$(document).width()+" "+$('#content').width());
     var left=0;
     if( $(window).width() >= $(document).width() ){
-        left=$(document).width()-$('#content').width();
+        left=$(document).width() - $('#content').width();
         left/=2;
         if (left<40)left=0;
     }
     $('#content').css("left", left);    
-    
+    */
     return top;
 }
 
@@ -311,10 +351,19 @@ function initLabels(){
 
 $(document).ready(
     function(){
+        setupMenu();
         checkSession();
 
         setMissingUrlParameters();
 
+        // will be done implicitely on adding back button
+        //setupMenuHeight();
+
+	    $(window).resize(function() {
+		    setupMenuHeight();
+            setupMenu();
+	    });
+
         if(getController()=='calendar'){
             //use build-in localization
             console.log("add back")
@@ -327,12 +376,6 @@ $(document).ready(
             });
         }
         initLabels();
-
-        setupMenuHeight();
-	    $(window).resize(function() {
-		    setupMenuHeight();
-	    });
-        
     }
 );
 
diff --git a/website/agenda/planung/js/calendar.js b/website/agenda/planung/js/calendar.js
index 95d87a3..ab7f1eb 100644
--- a/website/agenda/planung/js/calendar.js
+++ b/website/agenda/planung/js/calendar.js
@@ -720,6 +720,7 @@ function updateTable(){
 
 	    $(window).resize(function() {
 		    resizeCalendarMenu();
+            setupMenu()
 	    });
     }
 
diff --git a/website/agenda/planung/js/event.js b/website/agenda/planung/js/event.js
index bafdc86..5833c5b 100644
--- a/website/agenda/planung/js/event.js
+++ b/website/agenda/planung/js/event.js
@@ -13,15 +13,6 @@ function edit_event(event_id, series_id, studio_id, project_id, hide_series){
 		var url="event.cgi?project_id="+project_id+"&studio_id="+studio_id+"&series_id="+series_id+"&event_id="+event_id+"&action=edit";
 		if ((hide_series!=null) && (hide_series!=''))url+='&hide_series=1';
 		load(url);
-		/*
-		updateContainer(
-			'event_details_'+event_id, 
-			url,
-			function(){
-				$('#event_container_'+event_id).slideToggle();
-			}
-		);
-		*/
 	}
 }
 
diff --git a/website/agenda/planung/js/studio_timeslots.js b/website/agenda/planung/js/studio_timeslots.js
index 0a321ef..01e97b2 100644
--- a/website/agenda/planung/js/studio_timeslots.js
+++ b/website/agenda/planung/js/studio_timeslots.js
@@ -81,9 +81,9 @@ $(document).ready(
 
        	initTextWidth();
 
-        setTextWidth('.datetimepicker.start',     120);
-        setTextWidth('.datetimepicker.end',       120);
-        setTextWidth('.datetimepicker.end_date',  80);
+    setTextWidth('.datetimepicker.start',     130);
+    setTextWidth('.datetimepicker.end',       130);
+    setTextWidth('.datetimepicker.end_date',  90);
         setTextWidth('.datetimepicker.weekday',   20);
         setTextWidth('.datetimepicker.frequency', 20);
 
diff --git a/website/agenda/planung/templates/header.html b/website/agenda/planung/templates/header.html
index 8ad7c8c..dd99d60 100644
--- a/website/agenda/planung/templates/header.html
+++ b/website/agenda/planung/templates/header.html
@@ -11,6 +11,7 @@ Content-Type: text/html; charset=UTF-8;
     <TMPL_INCLUDE header_head.html>
 </head>
 <body>
+<center>
     <TMPL_IF action_result>
         <br/> <br/> <br/>
         <div class="ok head"><TMPL_VAR action_result></div>
diff --git a/website/agenda/planung/templates/selectEvent.html b/website/agenda/planung/templates/selectEvent.html
index 8c13a2f..f2e062d 100644
--- a/website/agenda/planung/templates/selectEvent.html
+++ b/website/agenda/planung/templates/selectEvent.html
@@ -7,7 +7,7 @@
 </head>
 
 <body>
-<div id="selectEvent" class="panel">
+<div id="selectEvent">
     <table>
 
     <TMPL_IF selectProjectStudio>
diff --git a/website/agenda/planung/templates/studio_timeslot_dates.html b/website/agenda/planung/templates/studio_timeslot_dates.html
index 5cbdf17..528798a 100644
--- a/website/agenda/planung/templates/studio_timeslot_dates.html
+++ b/website/agenda/planung/templates/studio_timeslot_dates.html
@@ -1,14 +1,5 @@
-<!doctype html>
+<html5>
 <html>
-<head>
-    <script src="js/jquery.tablesorter.min.js"></script>
-    <script src="js/jquery.tablesorter.widgets.min.js"></script>
-    <script src="js/jquery.tablesorter.scroller.js"></script>
-
-    <script>
-        var region='<TMPL_VAR loc.region>';
-    </script>
-</head>
 <body>
 
 <TMPL_VAR .loc.label_show_schedule>
@@ -22,7 +13,7 @@
         <th><TMPL_VAR .loc.label_studio></th>
     </tr>
     </thead>
-    <body>
+    <tbody>
 <TMPL_LOOP dates>
     <tr class="<TMPL_IF exclude>exclude</TMPL_IF>">
         <td><TMPL_VAR start_weekday></td>
@@ -32,9 +23,8 @@
         <td><TMPL_VAR studio_name></td>
     </tr>	
 </TMPL_LOOP>
-    </body>
+    </tbody>
 </table>
 
 </body>
 </html>
-