diff --git a/src/UI/BigComponents/MenuDrawer.svelte b/src/UI/BigComponents/MenuDrawer.svelte
index ada4a9adf..067bfe4fa 100644
--- a/src/UI/BigComponents/MenuDrawer.svelte
+++ b/src/UI/BigComponents/MenuDrawer.svelte
@@ -11,7 +11,7 @@
   import CommunityIndexView from "./CommunityIndexView.svelte"
   import Community from "../../assets/svg/Community.svelte"
   import LoginToggle from "../Base/LoginToggle.svelte"
-  import {  Sidebar, SidebarWrapper } from "flowbite-svelte"
+  import { Sidebar, SidebarWrapper } from "flowbite-svelte"
   import HotkeyTable from "./HotkeyTable.svelte"
   import { Utils } from "../../Utils"
   import Constants from "../../Models/Constants"
@@ -46,6 +46,8 @@
   import Marker from "../Map/Marker.svelte"
   import LogoutButton from "../Base/LogoutButton.svelte"
   import { LanguageIcon } from "@babeard/svelte-heroicons/solid"
+  import { BoltIcon } from "@babeard/svelte-heroicons/mini"
+  import Copyright from "../../assets/svg/Copyright.svelte"
 
   export let state: ThemeViewState
   let userdetails = state.osmConnection.userDetails
@@ -60,249 +62,259 @@
 </script>
 
 <Sidebar asideClass="max-w-screen p-0 low-interaction p-6 link-underline">
-<h2>Menu</h2>
-    <div class="flex flex-col">
+  <div class="flex flex-col">
 
-      <!-- User related: avatar, settings, favourits, logout -->
-      <div class="sidebar-unit">
+    <!-- User related: avatar, settings, favourits, logout -->
+    <div class="sidebar-unit">
+      <LoginToggle {state}>
+        <LoginButton osmConnection={state.osmConnection} slot="not-logged-in"></LoginButton>
+        <div class="flex gap-x-2">
+          {#if $userdetails.img}
+            <img src={$userdetails.img} class="rounded-full w-14 h-14" />
+          {/if}
+          <div class="flex flex-col justify-between">
+            <b>{$userdetails.name}</b>
+
+          </div>
+        </div>
+      </LoginToggle>
+
+
+      <Page {onlyLink} shown={pg.usersettings}>
+        <div class="flex" slot="header">
+          <CogIcon class="h-6 w-6" />
+          <Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
+        </div>
+
+        <!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
         <LoginToggle {state}>
-          <LoginButton osmConnection={state.osmConnection} slot="not-logged-in"></LoginButton>
-          <div class="flex gap-x-2">
-            {#if $userdetails.img}
-              <img src={$userdetails.img} class="rounded-full w-14 h-14" />
-            {/if}
-            <div class="flex flex-col justify-between">
-              <b>{$userdetails.name}</b>
-
-            </div>
+          <div class="flex flex-col" slot="not-logged-in">
+            <LanguagePicker availableLanguages={layout.language} />
+            <Tr cls="alert" t={Translations.t.userinfo.notLoggedIn} />
+            <LoginButton clss="primary" osmConnection={state.osmConnection} />
           </div>
-        </LoginToggle>
-
-
-        <Page {onlyLink} shown={pg.usersettings}>
-          <div class="flex" slot="header">
-            <CogIcon class="h-6 w-6" />
-            <Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
-          </div>
-
-          <!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
-          <LoginToggle {state}>
-            <div class="flex flex-col" slot="not-logged-in">
-              <LanguagePicker availableLanguages={layout.language} />
-              <Tr cls="alert" t={Translations.t.userinfo.notLoggedIn} />
-              <LoginButton clss="primary" osmConnection={state.osmConnection} />
-            </div>
-            <SelectedElementView
-              highlightedRendering={state.guistate.highlightedUserSetting}
-              layer={usersettingslayer}
-              selectedElement={{
+          <SelectedElementView
+            highlightedRendering={state.guistate.highlightedUserSetting}
+            layer={usersettingslayer}
+            selectedElement={{
                 type: "Feature",
                 properties: { id: "settings" },
                 geometry: { type: "Point", coordinates: [0, 0] },
               }}
 
-              {state}
-              tags={state.userRelatedState.preferencesAsTags}
-            />
-          </LoginToggle>
-
-
-        </Page>
-
-        <LoginToggle {state}>
-          <Page {onlyLink} shown={pg.favourites}>
-
-            <div class="flex" slot="header">
-              <HeartIcon class="h-6 w-6" />
-              <Tr t={Translations.t.favouritePoi.tab} />
-            </div>
-            <h3>
-
-              <Tr t={Translations.t.favouritePoi.title} />
-            </h3>
-            <div>
-              <Favourites {state} />
-              <h3>
-                <Tr t={Translations.t.reviews.your_reviews} />
-              </h3>
-              <ReviewsOverview {state} />
-            </div>
-          </Page>
-          <div class="self-end">
-            <LogoutButton osmConnection={state.osmConnection}  />
-          </div>
+            {state}
+            tags={state.userRelatedState.preferencesAsTags}
+          />
         </LoginToggle>
 
 
-        <LanguagePicker/>
+      </Page>
 
+      <LoginToggle {state}>
+        <Page {onlyLink} shown={pg.favourites}>
+
+          <div class="flex" slot="header">
+            <HeartIcon class="h-6 w-6" />
+            <Tr t={Translations.t.favouritePoi.tab} />
+          </div>
+          <h3>
+
+            <Tr t={Translations.t.favouritePoi.title} />
+          </h3>
+          <div>
+            <Favourites {state} />
+            <h3>
+              <Tr t={Translations.t.reviews.your_reviews} />
+            </h3>
+            <ReviewsOverview {state} />
+          </div>
+        </Page>
+        <div class="self-end">
+          <LogoutButton osmConnection={state.osmConnection} />
+        </div>
+      </LoginToggle>
+
+      <div style="width: 90%">
+        <LanguagePicker />
       </div>
 
+    </div>
 
-      <!-- Theme related: documentation links, download, ... -->
-      <div class="sidebar-unit">
-        <h3>
-          About this map
-        </h3>
 
-        <Page {onlyLink} shown={pg.about_theme}>
-          <dic slot="link">
-            Show introduction
-          </dic>
-          <div class="flex" slot="header">
-            <Marker icons={layout.icon} size="h-4 w-4" />
-            <Tr t={layout.title} />
+    <!-- Theme related: documentation links, download, ... -->
+    <div class="sidebar-unit">
+      <h3>
+        About this map
+      </h3>
+
+      <Page {onlyLink} shown={pg.about_theme}>
+        <dic slot="link">
+          Show introduction
+        </dic>
+        <div class="flex" slot="header">
+          <Marker icons={layout.icon} size="h-4 w-4" />
+          <Tr t={layout.title} />
+        </div>
+        <ThemeIntroPanel {state} />
+      </Page>
+
+      <FilterPage {onlyLink} {state} />
+
+      <RasterLayerOverview {onlyLink} {state} />
+
+      <Page {onlyLink} shown={pg.share}>
+        <div class="flex" slot="header">
+          <Share class="h-4 w-4" />
+          <Tr t={Translations.t.general.sharescreen.title} />
+        </div>
+        <ShareScreen {state} />
+      </Page>
+
+
+      {#if state.featureSwitches.featureSwitchEnableExport}
+        <Page {onlyLink} shown={pg.download}>
+          <div slot="header" class="flex">
+            <ArrowDownTray class="h-4 w-4" />
+            <Tr t={Translations.t.general.download.title} />
           </div>
-          <ThemeIntroPanel {state} />
+          <DownloadPanel {state} />
         </Page>
+      {/if}
 
-        <FilterPage {onlyLink} {state} />
-
-        <RasterLayerOverview {onlyLink} {state} />
-
-        <Page {onlyLink} shown={pg.share}>
-          <div class="flex" slot="header">
-            <Share class="h-4 w-4" />
-            <Tr t={Translations.t.general.sharescreen.title} />
-          </div>
-          <ShareScreen {state} />
-        </Page>
-
-
-        {#if state.featureSwitches.featureSwitchEnableExport}
-          <Page {onlyLink} shown={pg.download}>
-            <div slot="header" class="flex">
-              <ArrowDownTray class="h-4 w-4" />
-              <Tr t={Translations.t.general.download.title} />
-            </div>
-            <DownloadPanel {state} />
-          </Page>
-        {/if}
-
-        {#if layout.official}
-          <a
-            class="flex"
-            href={"https://github.com/pietervdvn/MapComplete/blob/develop/Docs/Themes/" +
+      {#if layout.official}
+        <a
+          class="flex"
+          href={"https://github.com/pietervdvn/MapComplete/blob/develop/Docs/Themes/" +
         layout.id +
         ".md"}
-            target="_blank"
-          >
-            <DocumentMagnifyingGlass class="h-6 w-6" />
-            <Tr
-              t={Translations.t.general.attribution.openThemeDocumentation.Subs({
+          target="_blank"
+        >
+          <DocumentMagnifyingGlass class="h-6 w-6" />
+          <Tr
+            t={Translations.t.general.attribution.openThemeDocumentation.Subs({
           name: layout.title,
         })}
-            />
-          </a>
+          />
+        </a>
 
-          <a class="flex" href={Utils.OsmChaLinkFor(31, layout.id)} target="_blank">
-            <DocumentChartBar class="h-6 w-6" />
-            <Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: layout.title })} />
-          </a>
-        {/if}
-      </div>
+        <a class="flex" href={Utils.OsmChaLinkFor(31, layout.id)} target="_blank">
+          <DocumentChartBar class="h-6 w-6" />
+          <Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: layout.title })} />
+        </a>
+      {/if}
+    </div>
 
 
-      <!-- Other links and tools for the given location: open iD/JOSM; community index, ... -->
-      <div class="sidebar-unit">
+    <!-- Other links and tools for the given location: open iD/JOSM; community index, ... -->
+    <div class="sidebar-unit">
 
-        <h3>
-          Discover more
-        </h3>
+      <h3>
+        Discover more
+      </h3>
 
-        <Page {onlyLink} shown={pg.community_index}>
-          <div class="flex gap-x-2" slot="header">
-            <Community class="h-6 w-6" />
-            <Tr t={Translations.t.communityIndex.title} />
-          </div>
-          <CommunityIndexView location={state.mapProperties.location} />
-        </Page>
+      <Page {onlyLink} shown={pg.community_index}>
+        <div class="flex gap-x-2" slot="header">
+          <Community class="h-6 w-6" />
+          <Tr t={Translations.t.communityIndex.title} />
+        </div>
+        <CommunityIndexView location={state.mapProperties.location} />
+      </Page>
 
 
-        <If condition={featureSwitches.featureSwitchEnableLogin}>
-          <OpenIdEditor mapProperties={state.mapProperties} />
-          <OpenJosm {state} />
-          <MapillaryLink large={false} mapProperties={state.mapProperties} />
-        </If>
+      <If condition={featureSwitches.featureSwitchEnableLogin}>
+        <OpenIdEditor mapProperties={state.mapProperties} />
+        <OpenJosm {state} />
+        <MapillaryLink large={false} mapProperties={state.mapProperties} />
+      </If>
 
-      </div>
+    </div>
 
 
-      <!-- About MC: various outward links, legal info, ... -->
-      <div class="sidebar-unit">
+    <!-- About MC: various outward links, legal info, ... -->
+    <div class="sidebar-unit">
 
-        <h3>
-          <Tr t={Translations.t.general.menu.aboutMapComplete} />
-        </h3>
+      <h3>
+        <Tr t={Translations.t.general.menu.aboutMapComplete} />
+      </h3>
 
-        {#if $showHome}
-          <a class="flex" href={Utils.HomepageLink()}>
-            <Add class="h-6 w-6" />
-            {#if Utils.isIframe}
-              <Tr t={Translations.t.general.seeIndex} />
-            {:else}
-              <Tr t={Translations.t.general.backToIndex} />
-            {/if}
-          </a>
-        {/if}
+      {#if $showHome}
+        <a class="flex" href={Utils.HomepageLink()}>
+          <Add class="h-6 w-6" />
+          {#if Utils.isIframe}
+            <Tr t={Translations.t.general.seeIndex} />
+          {:else}
+            <Tr t={Translations.t.general.backToIndex} />
+          {/if}
+        </a>
+      {/if}
 
 
+      <div class="hidden-on-mobile">
+
         <Page {onlyLink} shown={pg.hotkeys}>
-          <Tr t={ Translations.t.hotkeyDocumentation.title} slot="header" />
+          <div class="flex" slot="header">
+            <BoltIcon class="w-6 h-6" />
+            <Tr t={ Translations.t.hotkeyDocumentation.title} />
+          </div>
           <HotkeyTable />
         </Page>
+      </div>
 
-        <a class="flex" href="https://github.com/pietervdvn/MapComplete/" target="_blank">
-          <Github class="h-6 w-6" />
-          <Tr t={Translations.t.general.attribution.gotoSourceCode} />
-        </a>
+      <a class="flex" href="https://github.com/pietervdvn/MapComplete/" target="_blank">
+        <Github class="h-6 w-6" />
+        <Tr t={Translations.t.general.attribution.gotoSourceCode} />
+      </a>
 
-        <a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank">
-          <Bug class="h-6 w-6" />
-          <Tr t={Translations.t.general.attribution.openIssueTracker} />
-        </a>
+      <a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank">
+        <Bug class="h-6 w-6" />
+        <Tr t={Translations.t.general.attribution.openIssueTracker} />
+      </a>
 
 
-        <a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
-          <Mastodon class="h-6 w-6" />
-          <Tr t={Translations.t.general.attribution.followOnMastodon} />
-        </a>
+      <a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
+        <Mastodon class="h-6 w-6" />
+        <Tr t={Translations.t.general.attribution.followOnMastodon} />
+      </a>
 
-        <a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
-          <Liberapay class="h-6 w-6" />
-          <Tr t={Translations.t.general.attribution.donate} />
-        </a>
+      <a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
+        <Liberapay class="h-6 w-6" />
+        <Tr t={Translations.t.general.attribution.donate} />
+      </a>
 
 
-        <Page {onlyLink} shown={pg.copyright}>
-          <Tr slot="header" t={Translations.t.general.attribution.attributionTitle} />
-          <CopyrightPanel {state} />
-        </Page>
-
-
-        <Page {onlyLink} shown={pg.copyright_icons}>
-          <div slot="header">
-            <Tr t={ Translations.t.general.attribution.iconAttribution.title} />
-          </div>
-          <CopyrightAllIcons {state} />
-
-        </Page>
-
-
-        <Page {onlyLink} shown={pg.privacy}>
-          <div class="flex gap-x-2" slot="header">
-            <EyeIcon class="w-6 pr-2" />
-            <Tr t={Translations.t.privacy.title} />
-          </div>
-          <PrivacyPolicy {state} />
-        </Page>
-
-
-        <div class="subtle self-end">
-          {Constants.vNumber}
+      <Page {onlyLink} shown={pg.copyright}>
+        <div slot="header" class="flex">
+          <Copyright class="w-8 h-8" />
+          <Tr t={Translations.t.general.attribution.attributionTitle} />
         </div>
+        <CopyrightPanel {state} />
+      </Page>
+
+
+      <Page {onlyLink} shown={pg.copyright_icons}>
+        <div slot="header" class="flex">
+          <Copyright class="w-8 h-8" />
+          <Tr t={ Translations.t.general.attribution.iconAttribution.title} />
+        </div>
+        <CopyrightAllIcons {state} />
+
+      </Page>
+
+
+      <Page {onlyLink} shown={pg.privacy}>
+        <div class="flex gap-x-2" slot="header">
+          <EyeIcon class="w-6 pr-2" />
+          <Tr t={Translations.t.privacy.title} />
+        </div>
+        <PrivacyPolicy {state} />
+      </Page>
+
+
+      <div class="subtle self-end">
+        {Constants.vNumber}
       </div>
     </div>
+  </div>
 
 </Sidebar>
 
@@ -319,10 +331,12 @@
         padding: 1rem;
         border-radius: 0.5rem;
     }
+
     :global(.sidebar-unit > h3) {
         margin-top: 0;
         margin-bottom: 0.5rem
     }
+
     :global(.sidebar-unit svg) {
         width: 1.5rem;
         height: 1.5rem;
diff --git a/src/UI/ThemeViewGUI.svelte b/src/UI/ThemeViewGUI.svelte
index dea057871..277588d07 100644
--- a/src/UI/ThemeViewGUI.svelte
+++ b/src/UI/ThemeViewGUI.svelte
@@ -190,7 +190,7 @@
     <!-- Top components -->
 
     <div
-      class="flex bg-black-light-transparent pointer-events-auto items-center justify-between px-4 py-2 flex-wrap-reverse">
+      class="flex bg-black-light-transparent pointer-events-auto items-center justify-between px-4 py-1 flex-wrap-reverse">
       <!-- Top bar with tools -->
       <div class="flex items-center">
 
@@ -200,7 +200,7 @@
           on:click={() => {console.log("Opening...."); state.guistate.menuIsOpened.setData(true)}}
           on:keydown={forwardEventToMap}
         >
-          <MenuIcon class="h-8 w-8 cursor-pointer" />
+          <MenuIcon class="h-6 w-6 cursor-pointer" />
         </MapControlButton>
 
         <MapControlButton
@@ -210,7 +210,7 @@
           <div
             class="m-0.5 mx-1 flex cursor-pointer items-center max-[480px]:w-full sm:mx-1 mr-2"
           >
-            <Marker icons={layout.icon} size="h-6 w-6 shrink-0 md:h-8 md:w-8 mr-0.5 sm:mr-1 md:mr-2" />
+            <Marker icons={layout.icon} size="h-6 w-6 shrink-0 mr-0.5 sm:mr-1 md:mr-2" />
             <b class="mr-1">
               <Tr t={layout.title} />
             </b>