diff --git a/css/main.css b/css/main.css
index 434c256..460dd3a 100644
--- a/css/main.css
+++ b/css/main.css
@@ -38,33 +38,20 @@ select {
   font-weight: normal;
   padding-top: 0.2em;
 }
-#menu input,
-#login input {
-  width: 150px;
-  text-align: center;
-  border: 1px solid black;
-}
-#menu input[type = "submit"],
-#login input[type = "submit"] {
-  background-color: black;
-  color: white;
-  border: 1px solid white;
-}
-#menu input[type = "checkbox"] {
-  width: auto;
-}
-.menu-link {
-  display: block;
-  margin-top: .2em;
+#container {
+  display: flex;
+  height: 100%;
 }
 #main {
+  flex-grow: 1;
+  order: 1;
   height: 100%;
-  margin-right: 165px;
 }
 #map-canvas {
   height: 100%;
 }
 #menu {
+  order: 2;
   font-family: 'Open Sans', Verdana, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -90,21 +77,59 @@ select {
   background-color:rgba(102, 102, 102, 0.9);
   color: lightgray;
 }
-#menu-close {
-  background-color: #666;
-  opacity: 0.9;
+#menu-button {
+  border-style: solid;
+  border-width: 1px 0 1px 1px;
+  border-color: #bce;
   position: absolute;
-  top: 55px;
-  right: 165px;
+  top: 5px;
+  right: 0;
   z-index: 1900;
-  width: 18px;
-  height: 20px;
-  line-height: 18px;
-  text-align: right;
-  font-size: 18px;
-  font-weight: bolder;
+  width: 30px;
+  height: 35px;
+  line-height: 28px;
+  text-align: center;
+  font-size: 28px;
+  font-weight: normal;
   border-radius: 11px 0 0 11px;
   cursor: pointer;
+  background-color: #666;
+}
+#menu-button a {
+  color: white;
+}
+#menu-button a:after {
+  content: "»";
+}
+#menu.menu-hidden {
+  width: 0;
+}
+#menu.menu-hidden #menu-button {
+  border-color: white;
+  font-weight: normal;
+  background-color: #003c884d;
+}
+#menu.menu-hidden #menu-button a:after {
+  content: "«";
+}
+#menu input,
+#login input {
+  width: 150px;
+  text-align: center;
+  border: 1px solid black;
+}
+#menu input[type = "submit"],
+#login input[type = "submit"] {
+  background-color: black;
+  color: white;
+  border: 1px solid white;
+}
+#menu input[type = "checkbox"] {
+  width: auto;
+}
+.menu-link {
+  display: block;
+  margin-top: .2em;
 }
 label[for=user] {
   padding-top: 1em;
@@ -322,8 +347,8 @@ button > * {
   -webkit-border-radius: 10px;
 }
 
-#user-dropdown {
-  display: none;
+#user-menu {
+  display: block;
   position: absolute;
   background-color: gray;
   padding: 1em;
@@ -331,7 +356,11 @@ button > * {
   border: 1px solid #888;
 }
 
-#user-dropdown a {
+#user-menu.menu-hidden {
+  display: none;
+}
+
+#user-menu a {
   display: block;
   padding-bottom: .5em;
   padding-top: .5em;
diff --git a/index.php b/index.php
index e257518..52a4785 100644
--- a/index.php
+++ b/index.php
@@ -17,12 +17,12 @@
  * along with this program; if not, see <http://www.gnu.org/licenses/>.
  */
 
-  require_once(__DIR__ . "/helpers/auth.php");
-  require_once(ROOT_DIR . "/helpers/config.php");
-  require_once(ROOT_DIR . "/helpers/position.php");
-  require_once(ROOT_DIR . "/helpers/track.php");
-  require_once(ROOT_DIR . "/helpers/utils.php");
-  require_once(ROOT_DIR . "/helpers/lang.php");
+  require_once(__DIR__ . '/helpers/auth.php');
+  require_once(ROOT_DIR . '/helpers/config.php');
+  require_once(ROOT_DIR . '/helpers/position.php');
+  require_once(ROOT_DIR . '/helpers/track.php');
+  require_once(ROOT_DIR . '/helpers/utils.php');
+  require_once(ROOT_DIR . '/helpers/lang.php');
 
   $login = uUtils::postString('user');
   $pass = uUtils::postPass('pass');
@@ -32,163 +32,127 @@
   $langsArr = uLang::getLanguages();
 
   $auth = new uAuth();
-  if ($action == "auth") {
+  if ($action === 'auth') {
     $auth->checkLogin($login, $pass);
   }
 
-  if (!$auth->isAuthenticated() && $action == "auth") {
-    $auth->exitWithRedirect("login.php?auth_error=1");
+  if ($action === 'auth' && !$auth->isAuthenticated()) {
+    $auth->exitWithRedirect('login.php?auth_error=1');
   }
-  if (!$auth->isAuthenticated() && uConfig::$require_authentication) {
-    $auth->exitWithRedirect("login.php");
-  }
-
-  $displayUserId = NULL;
-  $usersArr = [];
-  if ($auth->isAdmin() || uConfig::$public_tracks) {
-    // public access or admin user
-    // get last position user
-    $lastPosition = uPosition::getLast();
-    if ($lastPosition->isValid) {
-      // display track of last position user
-      $displayUserId = $lastPosition->userId;
-    }
-    // populate users array (for <select>)
-    $usersArr = uUser::getAll();
-  } else if ($auth->isAuthenticated()) {
-    // display track of authenticated user
-    $displayUserId = $auth->user->id;
-  }
-
-  $tracksArr = uTrack::getAll($displayUserId);
-  if (!empty($tracksArr)) {
-    // get id of the latest track
-    $displayTrackId = $tracksArr[0]->id;
-  } else {
-    $tracksArr = [];
-    $displayTrackId = NULL;
+  if (uConfig::$require_authentication && !$auth->isAuthenticated()) {
+    $auth->exitWithRedirect('login.php');
   }
 
 ?>
 <!DOCTYPE html>
 <html lang="<?= uConfig::$lang ?>">
   <head>
-    <title><?= $lang["title"] ?></title>
-    <?php include("meta.php"); ?>
-    <script src="js/ulogger.js" type="module"></script>
-    <script src="js/bundle.js" defer nomodule></script>
+    <title><?= $lang['title'] ?></title>
+    <?php include('meta.php'); ?>
+    <script src="js/dist/bundle.js"></script>
   </head>
 
   <body>
-    <div id="menu">
-      <div id="menu-content">
+    <div id="container">
+      <div id="menu">
+        <div id="menu-content">
 
-        <?php if ($auth->isAuthenticated()): ?>
-          <div>
-            <a id="user-menu"><img class="icon" alt="<?= $lang["user"] ?>" src="images/user.svg"> <?= htmlspecialchars($auth->user->login) ?></a>
-            <div id="user-dropdown">
-              <a id="user-pass"><img class="icon" alt="<?= $lang["changepass"] ?>" src="images/lock.svg"> <?= $lang["changepass"] ?></a>
-              <a href="utils/logout.php"><img class="icon" alt="<?= $lang["logout"] ?>" src="images/poweroff.svg"> <?= $lang["logout"] ?></a>
+          <?php if ($auth->isAuthenticated()): ?>
+            <div>
+              <a data-bind="onShowUserMenu"><img class="icon" alt="<?= $lang['user'] ?>" src="images/user.svg"> <?= htmlspecialchars($auth->user->login) ?></a>
+              <div id="user-menu" class="menu-hidden">
+                <a id="user-pass"><img class="icon" alt="<?= $lang['changepass'] ?>" src="images/lock.svg"> <?= $lang['changepass'] ?></a>
+                <a href="utils/logout.php"><img class="icon" alt="<?= $lang['logout'] ?>" src="images/poweroff.svg"> <?= $lang['logout'] ?></a>
+              </div>
             </div>
-          </div>
-        <?php else: ?>
-          <a href="login.php"><img class="icon" alt="<?= $lang["login"] ?>" src="images/key.svg"> <?= $lang["login"] ?></a>
-        <?php endif; ?>
-
-        <div class="section">
-          <?php if (!empty($usersArr)): ?>
-            <label for="user"><?= $lang["user"] ?></label>
-            <select id="user" name="user">
-              <option value="0" disabled><?= $lang["suser"] ?></option>
-              <?php foreach ($usersArr as $aUser): ?>
-                <option <?= ($aUser->id == $displayUserId) ? "selected " : "" ?>value="<?= $aUser->id ?>"><?= htmlspecialchars($aUser->login) ?></option>
-              <?php endforeach; ?>
-              </select>
+          <?php else: ?>
+            <a href="login.php"><img class="icon" alt="<?= $lang['login'] ?>" src="images/key.svg"> <?= $lang['login'] ?></a>
           <?php endif; ?>
-        </div>
 
-        <div class="section">
-          <label for="track"><?= $lang["track"] ?></label>
-          <select id="track" name="track">
-            <?php foreach ($tracksArr as $aTrack): ?>
-              <option value="<?= $aTrack->id ?>"><?= htmlspecialchars($aTrack->name) ?></option>
-            <?php endforeach; ?>
-          </select>
-          <input id="latest" type="checkbox"> <label for="latest"><?= $lang["latest"] ?></label><br>
-          <input id="auto-reload" type="checkbox"> <label for="auto-reload"><?= $lang["autoreload"] ?></label> (<a id="set-interval"><span id="interval"><?= uConfig::$interval ?></span></a> s)<br>
-          <a id="force-reload"> <?= $lang["reload"] ?></a><br>
-        </div>
-
-        <div id="summary" class="section"></div>
-
-        <div id="other" class="section">
-          <a id="altitudes"><?= $lang["chart"] ?></a>
-        </div>
-
-        <div>
-          <label for="api"><?= $lang["api"] ?></label>
-          <select id="api" name="api">
-            <option value="gmaps"<?= (uConfig::$mapapi == "gmaps") ? " selected" : "" ?>>Google Maps</option>
-            <option value="openlayers"<?= (uConfig::$mapapi == "openlayers") ? " selected" : "" ?>>OpenLayers</option>
-          </select>
-        </div>
-
-        <div>
-          <label for="lang"><?= $lang["language"] ?></label>
-          <select id="lang" name="lang">
-            <?php foreach ($langsArr as $langCode => $langName): ?>
-              <option value="<?= $langCode ?>"<?= (uConfig::$lang == $langCode) ? " selected" : "" ?>><?= $langName ?></option>
-            <?php endforeach; ?>
-          </select>
-        </div>
-
-        <div class="section">
-          <label for="units"><?= $lang["units"] ?></label>
-          <select id="units" name="units">
-            <option value="metric"<?= (uConfig::$units == "metric") ? " selected" : "" ?>><?= $lang["metric"] ?></option>
-            <option value="imperial"<?= (uConfig::$units == "imperial") ? " selected" : "" ?>><?= $lang["imperial"] ?></option>
-            <option value="nautical"<?= (uConfig::$units == "nautical") ? " selected" : "" ?>><?= $lang["nautical"] ?></option>
-          </select>
-        </div>
-
-        <div class="section">
-          <div class="menu-title"><?= $lang["export"] ?></div>
-          <a id="export-kml" class="menu-link">kml</a>
-          <a id="export-gpx" class="menu-link">gpx</a>
-        </div>
-
-        <?php if ($auth->isAuthenticated()): ?>
           <div class="section">
-            <div id="import" class="menu-title"><?= $lang["import"] ?></div>
-            <form id="import-form" enctype="multipart/form-data" method="post">
-              <input type="hidden" name="MAX_FILE_SIZE" value="<?= uUtils::getUploadMaxSize() ?>" />
-              <input type="file" id="input-file" name="gpx" />
-            </form>
-            <a id="import-gpx" class="menu-link">gpx</a>
+            <label for="user"><?= $lang['user'] ?></label>
+            <select id="user" data-bind="currentUserId" name="user"></select>
           </div>
 
-          <div id="admin-menu">
-            <div class="menu-title"><?= $lang["adminmenu"] ?></div>
-            <?php if ($auth->isAdmin()): ?>
-              <a id="adduser" class="menu-link"><?= $lang["adduser"] ?></a>
-              <a id="edituser" class="menu-link"><?= $lang["edituser"] ?></a>
-            <?php endif; ?>
-            <a id="edittrack" class="menu-link"><?= $lang["edittrack"] ?></a>
+          <div class="section">
+            <label for="track"><?= $lang['track'] ?></label>
+            <select id="track" data-bind="currentTrackId" name="track"></select>
+            <input id="latest" type="checkbox" data-bind="showLatest"> <label for="latest"><?= $lang['latest'] ?></label><br>
+            <input id="auto-reload" type="checkbox" data-bind="autoReload"> <label for="auto-reload"><?= $lang['autoreload'] ?></label> (<a id="set-interval" data-bind="onSetInterval"><span id="interval" data-bind="interval"><?= uConfig::$interval ?></span></a> s)<br>
+            <a id="force-reload" data-bind="onReload"> <?= $lang['reload'] ?></a><br>
           </div>
-        <?php endif; ?>
 
+          <div id="summary" class="section" data-bind="summary"></div>
+
+          <div id="other" class="section">
+            <a id="altitudes" data-bind="onChartToggle"><?= $lang['chart'] ?></a>
+          </div>
+
+          <div>
+            <label for="api"><?= $lang['api'] ?></label>
+            <select id="api" name="api" data-bind="mapApi">
+              <option value="gmaps"<?= (uConfig::$mapapi === 'gmaps') ? ' selected' : '' ?>>Google Maps</option>
+              <option value="openlayers"<?= (uConfig::$mapapi === 'openlayers') ? ' selected' : '' ?>>OpenLayers</option>
+            </select>
+          </div>
+
+          <div>
+            <label for="lang"><?= $lang['language'] ?></label>
+            <select id="lang" name="lang" data-bind="lang">
+              <?php foreach ($langsArr as $langCode => $langName): ?>
+                <option value="<?= $langCode ?>"<?= (uConfig::$lang === $langCode) ? ' selected' : '' ?>><?= $langName ?></option>
+              <?php endforeach; ?>
+            </select>
+          </div>
+
+          <div class="section">
+            <label for="units"><?= $lang['units'] ?></label>
+            <select id="units" name="units" data-bind="units">
+              <option value="metric"<?= (uConfig::$units === 'metric') ? ' selected' : '' ?>><?= $lang['metric'] ?></option>
+              <option value="imperial"<?= (uConfig::$units === 'imperial') ? ' selected' : '' ?>><?= $lang['imperial'] ?></option>
+              <option value="nautical"<?= (uConfig::$units === 'nautical') ? ' selected' : '' ?>><?= $lang['nautical'] ?></option>
+            </select>
+          </div>
+
+          <div class="section">
+            <div class="menu-title"><?= $lang['export'] ?></div>
+            <a id="export-kml" class="menu-link" data-bind="onExportKml">kml</a>
+            <a id="export-gpx" class="menu-link" data-bind="onExportGpx">gpx</a>
+          </div>
+
+          <?php if ($auth->isAuthenticated()): ?>
+            <div class="section">
+              <div id="import" class="menu-title"><?= $lang['import'] ?></div>
+              <form id="import-form" enctype="multipart/form-data" method="post">
+                <input type="hidden" name="MAX_FILE_SIZE" value="<?= uUtils::getUploadMaxSize() ?>" />
+                <input type="file" id="input-file" name="gpx" data-bind="inputFile"/>
+              </form>
+              <a id="import-gpx" class="menu-link" data-bind="onImportGpx">gpx</a>
+            </div>
+
+            <div id="admin-menu">
+              <div class="menu-title"><?= $lang['adminmenu'] ?></div>
+              <?php if ($auth->isAdmin()): ?>
+                <a id="adduser" class="menu-link"><?= $lang['adduser'] ?></a>
+                <a id="edituser" class="menu-link"><?= $lang['edituser'] ?></a>
+              <?php endif; ?>
+              <a id="edittrack" class="menu-link"><?= $lang['edittrack'] ?></a>
+            </div>
+          <?php endif; ?>
+
+        </div>
+        <div id="menu-button"><a data-bind="onMenuToggle"></a></div>
+        <div id="footer"><a target="_blank" href="https://github.com/bfabiszewski/ulogger-server"><span class="mi">μ</span>logger</a> <?= uConfig::$version ?></div>
       </div>
-      <div id="menu-close">»</div>
-      <div id="footer"><a target="_blank" href="https://github.com/bfabiszewski/ulogger-server"><span class="mi">μ</span>logger</a> <?= uConfig::$version ?></div>
-    </div>
 
-    <div id="main">
-      <div id="map-canvas"></div>
-      <div id="bottom">
-        <div id="chart"></div>
-        <div id="chart-close"><?= $lang["close"] ?></div>
+      <div id="main">
+        <div id="map-canvas"></div>
+        <div id="bottom">
+          <div id="chart"></div>
+          <a id="chart-close" data-bind="onChartToggle"><?= $lang['close'] ?></a>
+        </div>
       </div>
-    </div>
 
+    </div>
   </body>
 </html>
diff --git a/js/test/mapviewmodel.test.js b/js/test/mapviewmodel.test.js
index a6a80b8..61354c8 100644
--- a/js/test/mapviewmodel.test.js
+++ b/js/test/mapviewmodel.test.js
@@ -39,12 +39,11 @@ describe('MapViewModel tests', () => {
   beforeEach(() => {
     const fixture = `<div id="fixture">
                        <div id="map-canvas"></div>
-                       <div id="menu-close"><a data-bind="onMenuToggle"></a></div>
+                       <div id="menu-button"><a data-bind="onMenuToggle"></a></div>
                      </div>`;
     document.body.insertAdjacentHTML('afterbegin', fixture);
     mapEl = document.querySelector('#map-canvas');
-    const menuEl = document.querySelector('#menu-close');
-    menuButtonEl = menuEl.firstChild;
+    menuButtonEl = document.querySelector('#menu-button a');
     config.reinitialize();
     config.mapApi = defaultApi;
     lang.init(config);
diff --git a/meta.php b/meta.php
index 71057f7..26eadba 100644
--- a/meta.php
+++ b/meta.php
@@ -8,5 +8,5 @@
     <link rel="shortcut icon" href="icons/favicon.ico">
     <meta name="msapplication-config" content="browserconfig.xml">
     <meta name="theme-color" content="#ffffff">
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&amp;subset=cyrillic" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="css/fonts.css">
     <link rel="stylesheet" type="text/css" href="css/main.css">
\ No newline at end of file