diff --git a/client/scripts/database.js b/client/scripts/database.js
index ba7a4b3..71edcb8 100644
--- a/client/scripts/database.js
+++ b/client/scripts/database.js
@@ -125,7 +125,7 @@ function dbGetRegattasRange(minDate, maxDate) {
 			var regatta = regattas[id];
 			var dateFrom = parseDate(regatta['date']);
 			var dateTo = parseDate(regatta['date']);
-			dateTo.setDate(dateTo.getDate() + parseInt(regatta['length']) - 1);
+			dateTo.setDate(dateTo.getDate() + Math.max(parseInt(regatta['length']) - 1, 0));
 			if ((minDate <= dateTo) && (maxDate >= dateFrom)) {
 				regatta['dateFrom'] = dateFrom;
 				regatta['dateTo'] = dateTo;
diff --git a/client/styles/regatten.css b/client/styles/regatten.css
new file mode 100644
index 0000000..b98181a
--- /dev/null
+++ b/client/styles/regatten.css
@@ -0,0 +1,43 @@
+.regattas-list > div {
+	padding-top: 1rem;
+	padding-bottom: 1rem;
+	border-bottom: 1px solid #dee2e6;
+	cursor: pointer;
+}
+
+.regattas-list > div:last-child {
+	border: 0;
+	padding-bottom: 0;
+}
+
+.regattas-list div {
+	white-space: nowrap;
+}
+
+.regattas-list > div > div > div {
+	display: inline-block;
+}
+
+.regattas-list > div > div:nth-child(2) > div:nth-child(1) {
+	width: 25%;
+}
+.regattas-list > div > div:nth-child(2) > div:nth-child(2) {
+	width: 25%;
+}
+.regattas-list > div > div:nth-child(2) > div:nth-child(3) {
+	width: 25%;
+	text-align: center;
+}
+.regattas-list > div > div:nth-child(2) > div:nth-child(4) {
+	width: 25%;
+	text-align: right;
+	font-size: 14px;
+}
+
+.regattas-list > div > div:nth-child(3) > div:nth-child(1) {
+	width: 75%;
+}
+.regattas-list > div > div:nth-child(3) > div:nth-child(2) {
+	width: 25%;
+	text-align: right;
+}
\ No newline at end of file
diff --git a/content/regattas.php b/content/regattas.php
index 0cfad75..4754d56 100644
--- a/content/regattas.php
+++ b/content/regattas.php
@@ -17,16 +17,19 @@
 	// Regattas
 	$content = '<p id="p-count" class="mb-0"></p>';
 	$content .= $tpl->load('input', ['html-id' => 'input-search', 'placeholder' => 'Suche', 'type' => 'text', 'css-class' => 'mt-2']);
-	$thead = '<tr><th id="th-number">#</th><th>Datum</th><th>Regatta</th>';
-	if (($showSpecial = $_CLASS['special']) !== false) {
-		$thead .= '<th>' . $_CLASS['special'] . '</th>';
-	}
-	$thead .= '<th>Informationen</th><th>Ergebnisse</th><th>RLF</th></tr>';
-	$content .= $tpl->load('table', [$thead, 'html-id' => 'table-regattas', 'css-class' => 'mb-0']);
+	$content .= '<div id="div-regattas" class="regattas-list mb-0"></div>';
 	
 	$sp['output'] .= $tpl->load('card', [$content, 'html-id' => 'card-regattas']);
 	
-	$sp['scripts'] = '<script>const showSpecial = ' . ($showSpecial ? 'true' : 'false') . ';</script>';
+	// Menu
+	$items = $tpl->load('menu/item-icon', ['Ergebnisse', '', 'html-id' => 'menu-item-results', 'icon' => 'fa-poll']);
+	$items .= $tpl->load('menu/item-icon', ['Bericht', '', 'html-id' => 'menu-item-bericht', 'icon' => 'fa-book']);
+	$items .= $tpl->load('menu/item-icon', ['Informationen', '', 'html-id' => 'menu-item-info', 'icon' => 'fa-info']);
+	$items .= $tpl->load('menu/item-icon-badge', ['Meldung', '', 'html-id' => 'menu-item-meldung', 'icon' => 'fa-file-signature', 'badge-id' => 'badge-regatta-meldung']);
+	$items .= $tpl->load('menu/item-icon', ['offizielle Ergebnisse', '', 'html-id' => 'menu-item-oresults', 'icon' => 'fa-poll']);
+	$items .= $tpl->load('menu/item-icon', ['Vereins-Website', '', 'html-id' => 'menu-item-clubwebsite', 'icon' => 'fa-globe']);
+	$sp['menus'] .= $tpl->load('menu/bottom', [$items, 'html-id' => 'menu-regatta', 'title' => 'Regatta-Details', 'height' => 320]);
+	
 	$sp['scripts'] .= $scripts->load('regattas');
 	
 ?>
\ No newline at end of file
diff --git a/server/page/menus.php b/server/page/menus.php
index 05ec487..46925dd 100644
--- a/server/page/menus.php
+++ b/server/page/menus.php
@@ -161,12 +161,12 @@
 <div id="menu-login" class="menu menu-box-top menu-box-detached rounded-m" data-menu-height="270">
 	<div class="content bottom-0">
 		<h1 class="text-center mt-5 font-900">Login</h1>
-		<div class="input-style input-style-1 has-icon input-required">
+		<div class="input-style input-style-2 has-icon input-required">
 			<i class="input-icon fa fa-user color-theme"></i>
 			<span class="color-highlight">Benutzername</span>
 			<input id="input-login-username" class="form-control" type="name" placeholder="Benutzername" />
 		</div>
-		<div class="input-style input-style-1 has-icon input-required">
+		<div class="input-style input-style-2 has-icon input-required">
 			<i class="input-icon fa fa-lock color-theme"></i>
 			<span class="color-highlight">Passwort</span>
 			<input id="input-login-password" class="form-control" type="password" placeholder="Passwort" />
diff --git a/server/page/wrapper.php b/server/page/wrapper.php
index edfda83..7eca108 100644
--- a/server/page/wrapper.php
+++ b/server/page/wrapper.php
@@ -9,6 +9,7 @@
 		<title><?php echo $sp['title']; ?></title>
 		<link rel="stylesheet" type="text/css" href="<?php echo SERVER_ADDR; ?>/client/styles/bootstrap.css">
 		<link rel="stylesheet" type="text/css" href="<?php echo SERVER_ADDR; ?>/client/styles/style.css">
+		<link rel="stylesheet" type="text/css" href="<?php echo SERVER_ADDR; ?>/client/styles/regatten.css">
 		<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i|Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i,900,900i&display=swap" rel="stylesheet">
 		<link rel="stylesheet" type="text/css" href="<?php echo SERVER_ADDR; ?>/client/fonts/css/fontawesome-all.min.css">
 		<link rel="manifest" href="<?php echo SERVER_ADDR; ?>/manifest.json.php" data-pwa-version="<?php echo PWA_VERSION; ?>">
diff --git a/server/scripts/regattas.js b/server/scripts/regattas.js
index 26bf482..9c124d8 100644
--- a/server/scripts/regattas.js
+++ b/server/scripts/regattas.js
@@ -1,12 +1,12 @@
 function selectChange(callSiteScript = true) {
 	var val = $('#select-year').val();
 	if (val == "user") {
-		$('#input-from').show();
-		$('#input-to').show();
+		$('#input-from').parent().show();
+		$('#input-to').parent().show();
 		$('#button-show').show();
 	} else {
-		$('#input-from').hide();
-		$('#input-to').hide();
+		$('#input-from').parent().hide();
+		$('#input-to').parent().hide();
 		$('#button-show').hide();
 		
 		$('#input-from').val(val + '-01-01');
@@ -29,33 +29,157 @@ function initYear() {
 
 var firstCall = true;
 var rows = [];
-var heuteLen = 0;
 var today;
 
 async function drawTable () {
 	//setLoading(true, 'loading');
 	
 	window.setTimeout(function () {
-		tbody = '';
+		var list = '';
 		rows.forEach(function (entry) {
 			if (entry == null) {
-				tbody += '<tr><td colspan="' + heuteLen + '" class="bg-highlight color-white">';
-				tbody += 'Heute ist der ' + formatDate('d.m.Y', today);
-				tbody += '</td></tr>';
+				//tbody += '<tr><td colspan="' + heuteLen + '" class="bg-highlight color-white">';
+				//tbody += 'Heute ist der ' + formatDate('d.m.Y', today);
+				//tbody += '</td></tr>';
 			} else if (search($('#input-search').val(), entry.keywords)) {
-				tbody += '<tr>';
-				entry.cells.forEach(function (cell) {
-					tbody += '<td>' + cell + '</td>';
-				});
-				tbody += '</tr>';
+				list += entry.content;
 			}
 		});
-		$('#table-regattas').find('tbody').html(tbody);
+		$('#div-regattas').html(list);
 		
 		//setLoading(false, 'loading');
 	}, 0);
 }
 
+async function regattaClicked(id) {
+	var regatta = await dbGetData('regattas', id);
+	console.log(regatta);
+	
+	$('#menu-regatta').find('.menu-title').find('p').text(regatta.name);
+	
+	// Results
+	var results = await dbGetDataIndex('results', 'regatta', regatta['id']);
+	if (results.length > 0) {
+		$('#menu-item-results').show();
+		$('#menu-item-results').attr('href', LINK_PRE + 'result/' + regatta['id']);
+	} else {
+		$('#menu-item-results').hide();
+	}
+	
+	// Bericht
+	if (regatta['bericht'] != '') {
+		$('#menu-item-bericht').show();
+		$('#menu-item-bericht').attr('href', regatta['bericht']);
+		$('#menu-item-bericht').attr('target', '_blank');
+	} else {
+		$('#menu-item-bericht').hide();
+	}
+	
+	// Info
+	if (regatta['info'] != '') {
+		$('#menu-item-info').show();
+		$('#menu-item-info').attr('href', regatta['info']);
+		$('#menu-item-info').attr('target', '_blank');
+	} else {
+		$('#menu-item-info').hide();
+	}
+	
+	// Meldung
+	var dateTo = parseDate(regatta['date']);
+	dateTo.setDate(dateTo.getDate() + Math.max(parseInt(regatta['length']) - 1, 0));
+	if ((regatta['meldung'] != '') && (dateTo >= today)) {
+		$('#menu-item-meldung').show();
+		$('#menu-item-meldung').attr('href', regatta['meldung']);
+		$('#menu-item-meldung').attr('target', '_blank');
+		var planning = null;
+		if (isLoggedIn()) {
+			var plannings = await dbGetDataIndex('plannings', 'regatta', regatta['id']);
+			for (id in plannings) {
+				if (plannings[id]['user'] == USER_ID) {
+					planning = plannings[id];
+					break;
+				}
+			}
+		}
+		if ((planning != null) && (planning['gemeldet'] == '1')) {
+			$('#badge-regatta-meldung').text('schon gemeldet');
+			$('#badge-regatta-meldung').addClass('bg-green2-dark').removeClass('bg-highlight bg-red2-dark bg-yellow2-dark');
+		} else if (regatta['meldungOffen'] == '0') {
+			$('#badge-regatta-meldung').text('geschlossen');
+			$('#badge-regatta-meldung').addClass('bg-highlight').removeClass('bg-green2-dark bg-red2-dark bg-yellow2-dark');
+		} else if (regatta['meldungSchluss'] != null) {
+			var early = false;
+			var ms;
+			if (regatta['meldungEarly'] != null) {
+				ms = parseDate(regatta['meldungEarly']);
+				if (ms >= today) {
+					early = true;
+				}
+			}
+			if (!early)
+				ms = parseDate(regatta['meldungSchluss']);
+			if (ms >= today) {
+				var diff = Math.round((ms - today) / 86400000);
+				var red = (diff < 7);
+				var txt;
+				if (diff <= 14) {
+					txt = diff + ' Tag' + (diff != 1 ? 'e' : '');
+				} else if (diff < 35) {
+					diff = Math.floor(diff / 7);
+					txt = diff + ' Woche' + (diff != 1 ? 'n' : '');
+				} else {
+					diff = Math.floor(diff / 30.5);
+					txt = diff + ' Monat' + (diff != 1 ? 'e' : '');
+				}
+				if (early)
+					txt += ' vergünstigt';
+				$('#badge-regatta-meldung').text(txt);
+				if (red) {
+					if (early) {
+						$('#badge-regatta-meldung').addClass('bg-yellow2-dark').removeClass('bg-highlight bg-green2-dark bg-red2-dark');
+					} else {
+						$('#badge-regatta-meldung').addClass('bg-red2-dark').removeClass('bg-highlight bg-green2-dark bg-yellow2-dark');
+					}
+				} else {
+					$('#badge-regatta-meldung').addClass('bg-highlight').removeClass('bg-green2-dark bg-red2-dark bg-yellow2-dark');
+				}
+			} else {
+				$('#badge-regatta-meldung').text('Meldeschluss abgelaufen');
+				$('#badge-regatta-meldung').addClass('bg-highlight').removeClass('bg-green2-dark bg-red2-dark bg-yellow2-dark');
+			}
+		} else {
+			$('#badge-regatta-meldung').text('');
+		}
+	} else {
+		$('#menu-item-meldung').hide();
+	}
+	
+	// off. results
+	if (regatta['oresults'] != '') {
+		$('#menu-item-oresults').show();
+		$('#menu-item-oresults').attr('href', regatta['oresults']);
+		$('#menu-item-oresults').attr('target', '_blank');
+	} else {
+		$('#menu-item-oresults').hide();
+	}
+	
+	// club website
+	var clubwebsite = '';
+	if (regatta['club'] != null) {
+		clubwebsite = (await dbGetData('clubs', regatta['club'])).website;
+	}
+	if (clubwebsite != '') {
+		$('#menu-item-clubwebsite').show();
+		$('#menu-item-clubwebsite').attr('href', clubwebsite);
+		$('#menu-item-clubwebsite').attr('target', '_blank');
+	} else {
+		$('#menu-item-clubwebsite').hide();
+	}
+	
+	$('#menu-regatta').showMenu();
+	$('#menu-regatta').scrollTop(0);
+}
+
 var siteScript = async function() {
 	if (firstCall) {
 		firstCall = false;
@@ -71,13 +195,10 @@ var siteScript = async function() {
 	var maxDate = parseDate($('#input-to').val());
 	var regattas = await dbGetRegattasRange(minDate, maxDate);
 	var regattaResults = [];
-	var showNumbers = false;
 	for (id in regattas) {
 		var entry = regattas[id];
 		var results = await dbGetDataIndex('results', 'regatta', entry['id']);
 		regattaResults[entry['id']] = (results.length > 0);
-		if (entry['number'] != null)
-			showNumbers = true;
 	}
 	
 	var selectedYear = $('#select-year').val();
@@ -103,18 +224,10 @@ var siteScript = async function() {
 		} else {
 			$('#p-count').html('Es wurden ' + count + ' Regatten gefunden!');
 		}
-		$('#table-regattas').show();
-		$('#input-search').show();
-		if (showNumbers) {
-			$('#th-number').show();
-		} else {
-			$('#th-number').hide();
-		}
+		$('#div-regattas').show();
+		$('#input-search').parent().show();
 		
 		var heute = false;
-		heuteLen = 5;
-		if (showNumbers) heuteLen ++;
-		if (showSpecial) heuteLen ++;
 		
 		rows = [];
 		
@@ -128,7 +241,7 @@ var siteScript = async function() {
 			var dateFrom = entry['dateFrom'];
 			var dateTo = entry['dateTo'];
 			
-			var row = { keywords: [], cells: [] };
+			var row = { keywords: [], content: '' };
 			row.keywords.push(entry['name']);
 			if (entry['number'] != null) row.keywords.push(entry['number']);
 			if (club != null) row.keywords.push(club['kurz'], club['name']);
@@ -138,98 +251,67 @@ var siteScript = async function() {
 				heute = true;
 			}
 			
-			if (showNumbers) {
-				row.cells.push(entry['number'] != null ? ('<span style="white-space:nowrap;">' + entry['number'] + '</span>') : '');
-			}
+			row.content += '<div onclick="regattaClicked(' + entry['id'] + ');">';
 			
-			row.cells.push('<span style="white-space:nowrap;">' + formatDate("j. M 'y", dateFrom) + '<br>' + formatDate("j. M 'y", dateTo) + '</span>');
+			// ZEILE 1
+			// Name
+			row.content += '<div><b>' + (entry['canceled'] == 1 ? '<s>' : '') + entry['name'] + (entry['canceled'] == 1 ? '</s>' : '') + '</b></div>';
 			
-			var content = '';
-			if (club != null) {
-				content = club['kurz'];
-				if (club['website'] != '') {
-					content = '<a href="' + club['website'] + '" target="_blank">' + content + '</a>';
+			// ZEILE 2
+			row.content += '<div>';
+			
+			// Number
+			row.content += '<div>' + ((entry['number'] != null) ? ('# ' + entry['number']) : '') + '</div>';
+			
+			// Club
+			row.content += '<div>' + ((club != null) ? club['kurz'] : '') + '</div>';
+			
+			// Special
+			row.content += '<div>' + entry['special'] + '</div>';
+			
+			// Icons
+			var icons = [];
+			if (entry['info'] != '')
+				icons.push('<i class="fas fa-info"></i>');
+			if ((entry['meldung'] != '') && (dateTo >= today) && (entry['meldungOffen'] == '1')) {
+				var color = '';
+				if (entry['meldungSchluss'] != null) {
+					var ms = parseDate(entry['meldungSchluss']);
+					var diff = Math.round((ms - today) / 86400000);
+					if ((ms >= today) && (diff < 7))
+						color = ' color-red2-dark';
 				}
+				icons.push('<i class="fas fa-file-signature' + color + '"></i>');
 			}
-			row.cells.push(content + '<br>' + (entry['canceled'] == 1 ? '<s>' : '') + entry['name']) + (entry['canceled'] == 1 ? '</s>' : '');
+			if (entry['bericht'] != '')
+				icons.push('<i class="fas fa-book"></i>');
+			if (entry['canceled'] == '1') {
+				icons.push('<i class="fas fa-times color-red2-dark"></i>');
+			} else if (regattaResults[entry['id']]) {
+				icons.push('<i class="fas fa-poll"></i>');
+			}
+			row.content += '<div class="color-green2-dark">' + icons.join('&ensp;') + '</div>';
 			
-			if (showSpecial) {
-				row.cells.push('<span style="white-space:nowrap;">' + entry['special'] + '</span>');
-			}
+			row.content += '</div>';
 			
-			var buf = '';
-			if (entry['info'] != '') {
-				buf += '<a target="_blank" href="' + entry['info'] + '">Informationen</a>';
-			}
-			if ((entry['meldung'] != '') && (dateTo >= today)) {
-				buf += '<br><a target="_blank" href="' + entry['meldung'] + '">Meldung</a>';
-				var planning = null;
-				if (isLoggedIn()) {
-					for (id in plannings) {
-						if (plannings[id]['user'] == USER_ID) {
-							planning = plannings[id];
-							break;
-						}
-					}
-				}
-				
-				if ((planning != null) && (planning['gemeldet'] == "1")) {
-					buf += ' <i>(du hast gemeldet)</i>';
-				} else if (entry['meldungOffen'] == "0") {
-					buf += ' <i>(geschlossen)</i>';
-				} else if (entry['meldungSchluss'] != null) {
-					early = false;
-					if (entry['meldungEarly'] != null) {
-						ms = parseDate(entry['meldungEarly']);
-						if (ms >= today) {
-							early = true;
-						}
-					}
-					if (!early)
-						ms = parseDate(entry['meldungSchluss']);
-					if (ms >= today) {
-						diff = Math.round((ms - today) / 86400000);
-						red = (diff < 7);
-						if (diff <= 14) {
-							txt = 'noch ' + diff + ' Tag' + (diff != 1 ? 'e' : '');
-						} else if (diff < 35) {
-							diff = Math.floor(diff / 7);
-							txt = 'noch ' + diff + ' Woche' + (diff != 1 ? 'n' : '');
-						} else {
-							diff = Math.floor(diff / 30.5);
-							txt = 'noch ' + diff + ' Monat' + (diff != 1 ? 'e' : '');
-						}
-						buf += ' <i>' + (red ? '<b><font style="color:red;">(' : '(') + txt + (early ? ' verg&uuml;nstigt' : '') + (red ? ')</font></b>' : ')') + '</i>';
-					} else {
-						buf += ' <i>(Meldeschluss abgelaufen)</i>';
-					}
-				}
-			}
-			if (entry['bericht'] != '') {
-				buf += '<br><a target="_blank" href="' + entry['bericht'] + '">Bericht</a>';
-			}
-			if (entry['oresults'] != '') {
-				buf += '<br><a target="_blank" href="' + entry['oresults'] + '">off. Ergebnisse</a>';
-			}
-			row.cells.push(buf);
+			// ZEILE 3
+			row.content += '<div>';
 			
-			buf = '';
-			if (entry['canceled'] == "1") {
-				buf = '<i style="color:red;" class="fas fa-times"></i> Ausgefallen</td>';
-			} else {
-				if (regattaResults[entry['id']]) {
-					buf = '<i style="color:green;" class="fas fa-check"></i> <a href="' + LINK_PRE + 'result?regatta=' + entry['id'] + '">Ergebnisse</a></td>';
+			// Date
+			if (entry['length'] < 1) {
+				if (formatDate('d.m', dateFrom) == '01.01') {
+					row.content += '<div><font class="color-red2-dark">Datum noch unklar</font></div>';
 				} else {
-					var pC = plannings.length;
-					buf = '<i class="fas fa-calendar-alt"></i> In der Saison-Planung von ' + pC + ' Seglern.';
-					if (pC > 0) {
-						buf += '<br><a href="' + LINK_PRE + 'regatta_plan?regatta=' + entry['id'] + '">Ansehen</a>';
-					}
+					row.content += '<div>' + formatDate("d.m.Y", dateFrom) + ' - <font class="color-red2-dark">Datum nicht final</font></div>';
 				}
+			} else {
+				row.content += '<div>' + formatDate("d.m.Y", dateFrom) + ' - ' + formatDate("d.m.Y", dateTo) + '</div>';
 			}
-			row.cells.push(buf);
 			
-			row.cells.push('<span style="white-space:nowrap;">' + parseFloat(entry['rlf']).toFixed(2) + '</span>');
+			// RLF
+			row.content += '<div>' + parseFloat(entry['rlf']).toFixed(2) + '</div>';
+			
+			row.content += '</div></div>';
 			
 			rows.push(row);
 		}
@@ -242,8 +324,8 @@ var siteScript = async function() {
 		
 	} else {
 		$('#p-count').html('Keine Regatten gefunden!');
-		$('#table-regattas').hide();
-		$('#input-search').hide();
+		$('#div-regattas').hide();
+		$('#input-search').parent().hide();
 	}
 	
 	hideLoader();
diff --git a/server/templates/input.html b/server/templates/input.html
index 14302d2..b5bf738 100644
--- a/server/templates/input.html
+++ b/server/templates/input.html
@@ -1,4 +1,4 @@
-<div class="input-style input-style-1 input-required">
+<div class="input-style input-style-2 input-required">
 	<span class="color-highlight">$$placeholder;</span>
 	<input id="$$html-id;" class="form-control $$css-class;" type="$$type;" placeholder="$$placeholder;" value="$$value;" />
 </div>
\ No newline at end of file
diff --git a/server/templates/menu/bottom.html b/server/templates/menu/bottom.html
new file mode 100644
index 0000000..1959d5f
--- /dev/null
+++ b/server/templates/menu/bottom.html
@@ -0,0 +1,9 @@
+<div id="$$html-id;" class="menu menu-box-bottom menu-box-detached rounded-m" data-menu-height="$$height;" >
+	<div class="menu-title"><h1>$$title;</h1><p class="color-highlight">$$subtitle;&nbsp;</p><a href="#" class="close-menu"><i class="fa fa-times"></i></a></div>
+	<div class="divider divider-margins mb-n2"></div>
+	<div class="content">
+		<div class="list-group list-custom-small">
+			$$0;
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/server/templates/menu/item-badge.html b/server/templates/menu/item-badge.html
new file mode 100644
index 0000000..d3e73d7
--- /dev/null
+++ b/server/templates/menu/item-badge.html
@@ -0,0 +1,5 @@
+<a id="$$html-id;" href="$$1;" class="$$css-class;">
+	<span>$$0;</span>
+	<span id="$$badge-id;" class="badge bg-highlight color-white">$$badge-value;</span>
+	<i class="fa fa-angle-right"></i>
+</a>
\ No newline at end of file
diff --git a/server/templates/menu/item-icon-badge.html b/server/templates/menu/item-icon-badge.html
new file mode 100644
index 0000000..ebee9a6
--- /dev/null
+++ b/server/templates/menu/item-icon-badge.html
@@ -0,0 +1,6 @@
+<a id="$$html-id;" href="$$1;" class="$$css-class;">
+	<i class="fa font-14 $$icon; rounded-s bg-highlight color-white"></i>
+	<span>$$0;</span>
+	<span id="$$badge-id;" class="badge bg-highlight color-white">$$badge-value;</span>
+	<i class="fa fa-angle-right"></i>
+</a>
\ No newline at end of file
diff --git a/server/templates/menu/item-icon.html b/server/templates/menu/item-icon.html
new file mode 100644
index 0000000..4d43a58
--- /dev/null
+++ b/server/templates/menu/item-icon.html
@@ -0,0 +1,5 @@
+<a id="$$html-id;" href="$$1;" class="$$css-class;">
+	<i class="fa font-14 $$icon; rounded-s bg-highlight color-white"></i>
+	<span>$$0;</span>
+	<i class="fa fa-angle-right"></i>
+</a>
\ No newline at end of file
diff --git a/server/templates/menu/item-simple.html b/server/templates/menu/item-simple.html
new file mode 100644
index 0000000..d67c8e3
--- /dev/null
+++ b/server/templates/menu/item-simple.html
@@ -0,0 +1,4 @@
+<a id="$$html-id;" href="$$1;" class="$$css-class;">
+	<span>$$0;</span>
+	<i class="fa fa-angle-right"></i>
+</a>
\ No newline at end of file
diff --git a/server/templates/menu/modal.html b/server/templates/menu/modal.html
new file mode 100644
index 0000000..01771a1
--- /dev/null
+++ b/server/templates/menu/modal.html
@@ -0,0 +1,9 @@
+<div id="$$html-id;" class="menu menu-box-modal menu-box-detached rounded-m" data-menu-width="$$width;" data-menu-height="$$height;">
+	<div class="menu-title"><h1>$$title;</h1><p class="color-highlight">$$subtitle;&nbsp;</p><a href="#" class="close-menu"><i class="fa fa-times"></i></a></div>
+	<div class="divider divider-margins mb-n2"></div>
+	<div class="content">
+		<div class="list-group list-custom-small">
+			$$0;
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/server/templates/menu/top.html b/server/templates/menu/top.html
new file mode 100644
index 0000000..bfd014f
--- /dev/null
+++ b/server/templates/menu/top.html
@@ -0,0 +1,9 @@
+<div id="$$html-id;" class="menu menu-box-top menu-box-detached rounded-m" data-menu-height="$$height;" >
+	<div class="menu-title"><h1>$$title;</h1><p class="color-highlight">$$subtitle;&nbsp;</p><a href="#" class="close-menu"><i class="fa fa-times"></i></a></div>
+	<div class="divider divider-margins mb-n2"></div>
+	<div class="content">
+		<div class="list-group list-custom-small">
+			$$0;
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/server/templates/select.html b/server/templates/select.html
index 816ec58..b4cb783 100644
--- a/server/templates/select.html
+++ b/server/templates/select.html
@@ -1,4 +1,4 @@
-<div class="input-style input-style-1 input-required">
+<div class="input-style input-style-2 input-required">
 	<span class="color-highlight input-style-1-active">$$placeholder;</span>
 	<select id="$$html-id;" class="form-control $$css-class;">
 		$$options;
diff --git a/server/templates/textarea.html b/server/templates/textarea.html
index d3fd3ae..e9ab8e1 100644
--- a/server/templates/textarea.html
+++ b/server/templates/textarea.html
@@ -1,4 +1,4 @@
-<div class="input-style input-style-1 input-required">
+<div class="input-style input-style-2 input-required">
 	<span class="color-highlight">$$placeholder;</span>
 	<textarea id="$$html-id;" class="form-control $$css-class;" placeholder="$$placeholder;">$$value;</textarea>
 </div>
\ No newline at end of file