diff --git a/inc/courselesson.php b/inc/courselesson.php
index 00c2595..68029e4 100644
--- a/inc/courselesson.php
+++ b/inc/courselesson.php
@@ -148,8 +148,14 @@ function newc (nc) {
 if ($_SESSION['koch_lesson'] == 1) {
 echo "<table><tr><td>";
 player("KKKKKKKKKKKKKKKKKK", $_SESSION['player'], $_SESSION['cw_speed'], $_SESSION['cw_eff'],0, 1, 1,0); 
-echo "</td><td>&nbsp;&nbsp;</td><td>";
+
+
+echo "</td><td>&nbsp;&nbsp;</td><td class='player-large'>";
 player("MMMMMMMMMMMMMMMMMM", $_SESSION['player'], $_SESSION['cw_speed'], $_SESSION['cw_eff'],0, 2, 1,0); 
+echo "</td></tr>";
+
+echo "<tr><td class='player-small'>";
+player("MMMMMMMMMMMMMMMMMM", $_SESSION['player'], $_SESSION['cw_speed'], $_SESSION['cw_eff'],0, 3, 1,0); 
 echo "</td></tr></table>\n";
 }
 else {
@@ -279,14 +285,7 @@ function newc (nc) {
 <? $text = getgroups($_SESSION['cw_speed'], $_SESSION['cw_eff'], $_SESSION['koch_lesson'], $kochchar, $_SESSION['koch_duration'], $_SESSION['koch_randomlength'], false); ?>
 
 <form action="/courselesson" method="POST" id="eform">
-<table>
-	<tr>
-	<td><textarea id="textinput" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off"  name="input" cols="40" rows="10"></textarea></td>
-	<td>
-	&nbsp;
-
-<? 
-
+<?
 if ($_SESSION['player'] != PL_JSCWLIB) {
     $playertext = "|W".$_SESSION['cw_ews']." ".$text;
     if ($_SESSION['delay_start'] > 0) {
@@ -301,8 +300,23 @@ function newc (nc) {
 else {
     $playertext = $text;
 }
+?>
 
-player("$playertext", $_SESSION['player'], $_SESSION['cw_speed'], $_SESSION['cw_eff'], 0, 3, 0, 1); 
+<table class="player-table">
+	<tr class="player-small">
+	<td>
+<? 
+	player("$playertext", $_SESSION['player'], $_SESSION['cw_speed'], $_SESSION['cw_eff'], 0, 4, 0, 1); 
+?>
+	</td>
+    </tr>
+	<tr>
+	<td><textarea id="textinput" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off"  name="input" cols="40" rows="10"></textarea></td>
+	<td class="player-large">
+	&nbsp;
+
+<? 
+player("$playertext", $_SESSION['player'], $_SESSION['cw_speed'], $_SESSION['cw_eff'], 0, 5, 0, 1); 
 ?>
 	
 	</td>
@@ -320,7 +334,7 @@ function newc (nc) {
 		$text2 = stripcommands($text2);
 	?>
 		<input type="hidden" name="text" value="<? echo $text2; ?>">
-		<input type="submit" value=" <? echo l('checkresult',1); ?> " onClick="return checkspaces();"> (<? echo l('notcasesensitive'); ?>)
+		<input id="checkresult" type="submit" value=" <? echo l('checkresult',1); ?> " onClick="return checkspaces();">(<? echo l('notcasesensitive'); ?>)
 	</td>
 </table>
 </form>
diff --git a/inc/dologin.php b/inc/dologin.php
index 4725bea..b474eb4 100644
--- a/inc/dologin.php
+++ b/inc/dologin.php
@@ -49,7 +49,7 @@
 
 <script>
     window.setTimeout( function () {
-        window.location.href = '<?=BASEURL;?>';
+        window.location.href = '/';
     }, 1000);
 
 </script>
diff --git a/inc/groups.php b/inc/groups.php
index af6fe6e..984eb5b 100644
--- a/inc/groups.php
+++ b/inc/groups.php
@@ -349,11 +349,16 @@
 <form action="/groups" method="POST" id="eform">
 <table>
 	<tr>
+      <td class="player-small">
+	  	<? player($playertext, $_SESSION['player'], $_SESSION['cw_speed'], $_SESSION['cw_eff'],0, 1, 0, 1); ?>
+      </td>
+    </tr>
+	<tr>
 	<td><textarea id="textinput" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" name="input" cols="40" rows="10"></textarea></td>
-	<td>
+	<td class="player-large">
 	&nbsp;
 
-	<? player($playertext, $_SESSION['player'], $_SESSION['cw_speed'], $_SESSION['cw_eff'],0, 1, 0, 1); ?>
+	<? player($playertext, $_SESSION['player'], $_SESSION['cw_speed'], $_SESSION['cw_eff'],0, 2, 0, 1); ?>
 
     <br>
 	</td>
diff --git a/inc/header.php b/inc/header.php
index 4ba9447..e5dbf12 100644
--- a/inc/header.php
+++ b/inc/header.php
@@ -31,6 +31,7 @@
 <meta property="og:url" content="https://lcwo.net/" />
 <meta property="og:image" content="https://lcwo.net/pics/lcwo.png" />
 <meta property="og:description" content="Learn CW Online - a free web app for learning Morse code!" />
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />
 <link rel="icon" href="/favicon.ico">
 <link rel="shortcut icon" href="/favicon.ico">
 <?
@@ -69,16 +70,13 @@
 
 </head>
 <body bgcolor="#ffffff"> 
-<table border="0" cellpadding="0" cellspacing="0" width="100%">
-	<tbody>
-		<tr class="headerline">
-			<td style="background-image:url(/pics/lcwo-bg2.png);" width="41%">
-			<a href="/"><img style="border-style:none;" src="/pics/lcwo.png" height="75" width="214" title="LCWO - Home" alt="[LCWO LOGO]"></a> </td>
-			<td style="background-image:url(/pics/lcwo-bg2.png);" width="59%"> 
+<header class="header">
+			<a href="/" style="height:75px;"><img class="logo" style="border-style:none;" src="/pics/lcwo.png" height="75" width="214" title="LCWO - Home" alt="[LCWO LOGO]"></a> 
 <?
 	if (DEV) {
 ?>			
-&nbsp;<strong>Development Version</strong> (<a href="https://lcwo.net/">Click here to go to LCWO.net</a>) - <a href="/babelfish.php?limit=0">Babelfish</a> - 
+<div style="margin-left: 15px;" class="wide-dev-info">
+<strong>Development Version</strong> (<a href="https://lcwo.net/">Click here to go to LCWO.net</a>) - <a href="/babelfish.php?limit=0">Babelfish</a> - 
 <?
 	if ($_SESSION['debug'] == 1) {
 		echo '<a href="/?debug=2">Switch debug off</a> - ';
@@ -93,6 +91,10 @@
 	else {
 		echo '<a href="/?debug=3">Switch inpage translate on</a><br>';
 	}
+?>
+
+</div>
+<?
 } /* if DEV */
 if ($_SESSION['uid']) {
 ?>
@@ -115,9 +117,7 @@
 <?
 }
 ?>
-
-&nbsp;
-</td> </tr> </tbody></table>
+</header>
 <script>
 function agree_policy () {
 	var i = document.getElementById("consent");
@@ -126,4 +126,31 @@ function agree_policy () {
 	request.open("GET", "//lcwo.net/api/consent.php", true);
 	request.send();
 }
+function toggleMenu(selector) {
+	var el = document.querySelector(selector);
+	el.classList.toggle('active');
+}
+
+function changeInputSize(sz) {
+	var i = document.getElementById('textinput');
+	if (i !== null) {
+		i.style.fontSize = sz;
+	}
+
+	var els = Array.prototype.slice.call(document.getElementsByTagName('input'));
+	els.forEach(function (el) {
+		el.style.fontSize = sz;
+	});
+}
+
+function changeInputSizeOnMatch(e) {
+	if (e.matches) {
+		changeInputSize('18px');
+	} else {
+		changeInputSize('11px');
+	}
+}
+const mql = window.matchMedia("(max-width: 900px)");
+mql.addListener(changeInputSizeOnMatch);
+changeInputSizeOnMatch(mql);
 </script>
diff --git a/inc/language.php b/inc/language.php
index 5bc3549..565884a 100644
--- a/inc/language.php
+++ b/inc/language.php
@@ -1,4 +1,4 @@
-<table width="90%">
+<table width="100%">
 <tr><th class="tborder">Language</th></tr>
 <tr>
 <td class="tborder">
diff --git a/inc/login.php b/inc/login.php
index 822e806..205e08f 100644
--- a/inc/login.php
+++ b/inc/login.php
@@ -1,4 +1,4 @@
-<table width="90%">
+<table width="100%">
 <tr><th class="tborder"><? echo l('login') ?></th></tr>
 <tr><td class="tborder">
 
@@ -6,15 +6,15 @@
 
 <div align="center">
 <form action="/dologin" method="POST">
-<table>
+<table class="login-table">
 	<tr>
-		<td><? echo l('username'); ?>: </td>
+		<td style="width:20%"><? echo l('username'); ?>: </td>
 		<td>
 			<input type="text" size="8" name="username">
 		</td>
 	</tr>
 	<tr>
-		<td><? echo l('password'); ?>: </td>
+		<td style="width:20%"><? echo l('password'); ?>: </td>
 		<td>
 			<input type="password" size="8" name="password">
 		</td>
diff --git a/inc/menu.php b/inc/menu.php
index bf7580a..86bcd9d 100644
--- a/inc/menu.php
+++ b/inc/menu.php
@@ -1,28 +1,40 @@
-<table border="0" cellpadding="0" cellspacing="0" width="100%">
-<tbody>
-	<tr>
-	<td class="menuText" width="100%">
-		  <img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="16" alt=":">
-		  <a class="mLink" href="/"><? echo l('home') ?></a>
-		  <img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
-		  <a class="mLink" href="/users"><? echo l('userlist') ?></a>
-		  <img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
-		  <a class="mLink" href="/highscores"><? echo l('highscores') ?></a>
-		  <img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
-		  <a class="mLink" href="/forum"><? echo l('forum')." ".privmsgcount();?></a>
-		  <img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
-		  <a class="mLink" href="/usergroups"><? echo l('usergroups') ?></a>
-		  <img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
-		  <a class="mLink" href="/about"><? echo l('about') ?></a>
-		  <img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
-		  <? if ($_SESSION['uid']) { ?>
-		  <a id="logoutlink" class="mLink" href="/logout"><?
-				  echo l('logout')." (".$_SESSION['username']; ?>)</a>
-		  <img style="vertical-align:middle" src="/pics/menusep2.png"  height="19" width="15" alt=":">
-			<? } ?>
-		  
-	    </td>
-	</tr>
-</tbody></table>
-
-<br>
+<div class="menu-icon" onclick="toggleMenu('.menuText')">
+		<div class="placeholder-menu">Navigation</div>
+		<div class="menu-lines">☰</div>
+	</div>
+<nav class="menuText" width="100%">
+		  <div>
+			<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="16" alt=":">
+			<a class="mLink" href="/"><? echo l('home') ?></a>
+		  </div>
+		  <div>
+			<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
+			<a class="mLink" href="/users"><? echo l('userlist') ?></a>
+		  </div>
+		  <div>
+			<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
+			<a class="mLink" href="/highscores"><? echo l('highscores') ?></a>
+		  </div>
+		  <div>
+			<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
+			<a class="mLink" href="/forum"><? echo l('forum')." ".privmsgcount();?></a>
+		  </div>
+		  <div>
+			<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
+			<a class="mLink" href="/usergroups"><? echo l('usergroups') ?></a>
+		  </div>
+		  <div>
+			<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
+			<a class="mLink" href="/about"><? echo l('about') ?></a>
+		  </div>
+		  <div>
+			<img style="vertical-align:middle" src="/pics/menusep2.png" height="19" width="15" alt=":">
+			<? if ($_SESSION['uid']) { ?>
+			<a id="logoutlink" class="mLink" href="/logout"><?
+					echo l('logout')." (".$_SESSION['username']; ?>)</a>
+		  </div>
+		  <div>
+			<img style="vertical-align:middle" src="/pics/menusep2.png"  height="19" width="15" alt=":">
+				<? } ?>
+		  </div>
+</nav>
\ No newline at end of file
diff --git a/inc/online.php b/inc/online.php
index f8a2652..06bd2db 100644
--- a/inc/online.php
+++ b/inc/online.php
@@ -44,7 +44,7 @@
 
 
 
-<table width="90%">
+<table width="100%">
 <tr><th class="tborder"><? echo l('whoisonline') ?> (<?=$onlineusers;?>)</th></tr>
 <tr><td class="tborder">
 <br>
diff --git a/inc/personalmenu.php b/inc/personalmenu.php
index 9bf3103..1fda121 100644
--- a/inc/personalmenu.php
+++ b/inc/personalmenu.php
@@ -1,6 +1,6 @@
 
-<table width="90%">
-<tr><th class="tborder"><? echo l('menufor')." ".$_SESSION['username']; ?></th></tr>
+<table width="100%">
+<tr><th class="personalmenu tborder"><? echo l('menufor')." ".$_SESSION['username']; ?></th></tr>
 <tr><td class="tborder">
 <a href="/"><strong><? echo l('home') ?></strong></a> - 
 <a href="/news"><strong><? echo l('news') ?></strong></a>
diff --git a/inc/plaintext.php b/inc/plaintext.php
index 841043c..a46ba00 100644
--- a/inc/plaintext.php
+++ b/inc/plaintext.php
@@ -80,9 +80,15 @@ function attempt () {
     <button id="btn_playpause" onClick="playpause(1); if(tmp=getElementById('eform')){tmp.input.focus();} return false;"><?=l('playpause',1);?></button><br><br>
 	<form action="/plaintext" method="POST" id="eform">
 		<table><tr>
-		<td><input  spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" type="text" size="60" name="input"></td>
-		<td><input type="submit" name="submitted" value=" <? echo l('checkresult',1) ?>"></td>
-		<td><input type="submit" name="cancel" value=" <? echo l('cancel',1) ?>"></td>
+		<td>
+			<textarea spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" type="text" cols="30" rows="10" name="input" id="textinput"></textarea>
+		</td>
+        </tr>
+        <tr>
+		<td>
+			<input type="submit" name="submitted" value=" <? echo l('checkresult',1) ?>">
+			<input type="submit" name="cancel" value=" <? echo l('cancel',1) ?>">
+	     </td>
 		</tr></table>
 		<input type="hidden" name="txtext" value="<? echo base64_encode($txtext); ?>">
 		<input type="hidden" name="slang" value="<? echo $slang; ?>">
diff --git a/index.php b/index.php
index 75dce7c..97a4aa9 100644
--- a/index.php
+++ b/index.php
@@ -103,28 +103,26 @@
 include("inc/menu.php");
 
 ?>
-<table border="0" cellpadding="0" cellspacing="0" width="100%">
-	<tr>
-		<td width="220" valign="top">
-			<? 
-				if (!$_SESSION['uid']) {
-					include("inc/login.php"); 
-					include("inc/language.php"); 
-				}
-				else {
-					include("inc/personalmenu.php"); 
-				}
-			?>
-			<? include("inc/online.php"); ?>
-		</td>
-		<td valign="top">
-			<? include("inc/$p.php"); ?>
-		</td>
-		<td width="20">
-		&nbsp;
-		</td>
-	</tr>
-</table>
+<div class="main-content">
+	<div class="menu-toggle <? if (!$_SESSION['uid']) { echo('active');} ?>" onclick="toggleMenu('.sidebar'); toggleMenu('.menu-toggle');">
+		<div class="menu">-- · -· ··-</div>
+	</div>
+	<aside id="sidebar" class="sidebar <? if (!$_SESSION['uid']) { echo('active');} ?>">
+		<? 
+		if (!$_SESSION['uid']) {
+			include("inc/login.php"); 
+			include("inc/language.php"); 
+		}
+		else {
+			include("inc/personalmenu.php"); 
+		}
+		?>
+		<? include("inc/online.php"); ?>
+	</aside>
+	<main class="content"> 
+		<? include("inc/$p.php"); ?>
+	</main>
+</div>
 
 <?
 include("inc/footer.php");
diff --git a/style.css b/style.css
index c02f038..fcd05b6 100644
--- a/style.css
+++ b/style.css
@@ -20,13 +20,206 @@ textarea {font-family:monospace;}
 }
 
 .menuText {
+	display: flex;
 	font-family: Verdana, Arial, Helvetica, sans-serif;
 	font-size: 11px;
 	color: #000000;
 	text-decoration: none;
-	background-image:url(/pics/menu2.png);
+	/* background-image:url(/pics/menu2.png); */
+	background: linear-gradient(to bottom, rgb(133, 137, 196), rgb(166, 171, 251));
 }
 
+body {
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+	/* font-family: Arial, sans-serif; */
+}
+.header {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	background-image: url('/pics/lcwo-bg2.png');
+	background-repeat: repeat-x;
+	/* max-height: 75px; */
+}
+
+.menuText a {
+	margin-right: 10px;
+}
+
+.main-content {
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	margin-top: 20px;
+	display: flex;
+	flex: 1;
+}
+
+.sidebar {
+	width: 220px;
+	margin-right: 25px;
+}
+
+.content {
+	flex: 1;
+}
+
+.menu-icon {
+	display: none;
+	font-size: 24px;
+	cursor: pointer;
+}
+
+.placeholder-menu {
+	margin-left: auto;
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	font-size: 11px;
+	font-weight: bold;
+}
+
+.menu-lines {
+	margin: 0px 3px 3px auto;
+}
+
+.player-small {
+	display: none;
+}
+
+.player-large {
+	display: block;
+}
+
+.login-table {
+	width: 100%;
+}
+
+.menu-toggle {
+	display: none;
+}
+
+@media (max-width: 900px) {
+	.player-small {
+		display: block;
+	}
+	.player-large {
+		display: none;
+	}
+
+	.header, .main-content {
+		flex-direction: column;
+	}
+	.content {
+		margin-left: 15px;
+		padding-right: 10px;
+	}
+	#cal-heatmap {
+		max-width: 100%;
+		overflow-x: scroll;
+	}
+	.logo, .padding {
+		width: 100%
+	}
+	.menuText {
+		display: none;
+	}
+	.menuText.active, .sidebar.active {
+		display: block;
+		flex-direction: column;
+	}
+	.menuText div {
+		display: block; 
+		margin-bottom: 5px;
+	}
+	.menu {
+		position: relative;
+		left: 7px;
+		top: 5px;
+	}
+	.dev-info {
+		margin: 10px 0px 10px 0px;
+		font-size: 12px;
+	}	
+	.menu-toggle.active {
+		left: 347px;
+	}
+	.menu-toggle {
+		writing-mode: vertical-rl;
+		text-orientation: mixed;
+		font-size: 18px;
+		display: block;
+		position: fixed;
+		left: 0px; 
+		top: 112px;
+		height: 90px;
+		width: 12px;
+		z-index: 1001;
+		color: white;
+		border: none;
+		padding: 0px;
+		cursor: pointer;
+		background: linear-gradient(to bottom, rgb(133, 137, 196), rgb(166, 171, 251));
+		transition: left 0.3s ease-in-out;
+		border-radius: 0 6px 6px 0;
+	}
+	#sidebar.active {
+		left: 0px;
+	}
+	#sidebar {
+		position: fixed;
+		left: -350px;
+		top: 110px;
+		width: 350px;
+		height: 100%;
+		background-color: white;
+		z-index: 1000;
+		transition: left 0.3s ease-in-out;
+		overflow-x: scroll;
+	}
+	.menu-icon {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: linear-gradient(to bottom, rgb(133, 137, 196), rgb(166, 171, 251));
+		width: 100%;
+	}
+	.player-table {
+		width: 100%;
+	}
+	.player-table textarea {
+		width: 100%;
+	}
+	input#checkresult {
+		width: 100%;
+		padding: 0px;
+		height: 25px;
+	}
+	.personalmenu {
+		display: none;
+	}
+	nav a {
+		font-size: 16px;
+	}
+	aside a {
+		font-size: 16px;
+	}
+	input[name="username"] {
+		width: 90%;
+	}
+	input[name="password"] {
+		width: 90%;
+	}
+	input {
+		font-size: 18px;
+	}
+	textarea {
+		font-size: 18px;
+	}
+}
+
+
+
 .pmsgbox {
 	width:600px;
 	border-width:thin;