diff --git a/admin.php b/admin.php
index 28022689a..def7d2a47 100644
--- a/admin.php
+++ b/admin.php
@@ -65,43 +65,6 @@ if (isset($_GET['plugins_new_order']))
   exit;
 }
 
-$admin_theme = userprefs_get_param('admin_theme', 'clear');
-// echo('<pre>');print_r($admin_theme);echo('</pre>');
-
-// theme changer
-if (isset($_GET['change_theme']))
-{
-  $admin_themes = array('roma', 'clear');
-  $admin_theme_array = array($admin_theme);
-  $result = array_diff(
-      $admin_themes,
-      $admin_theme_array
-    );
-
-  $new_admin_theme = array_pop(
-      $result
-    );
-
-  userprefs_update_param('admin_theme', $new_admin_theme);
-
-  $url_params = array();
-  foreach (array('page', 'tab', 'section') as $url_param)
-  {
-    if (isset($_GET[$url_param]))
-    {
-      $url_params[] = $url_param.'='.$_GET[$url_param];
-    }
-  }
-  
-  $redirect_url = 'admin.php';
-  if (count($url_params) > 0)
-  {
-    $redirect_url.= '?'.implode('&amp;', $url_params);
-  }
-
-  redirect($redirect_url);
-}
-
 // +-----------------------------------------------------------------------+
 // | Synchronize user informations                                         |
 // +-----------------------------------------------------------------------+
@@ -166,15 +129,8 @@ if (count($_GET) != 0 and !empty($_SERVER['QUERY_STRING']))
 }
 
 //Set them to light unless we find preference
-$change_theme_url_light = $change_theme_url.'change_theme=clear';
-$change_theme_url_dark= $change_theme_url.'change_theme=roma';
-
-if(isset($_COOKIE["prefersDark"]) and $_COOKIE["prefersDark"]){
-  $change_theme_auto = $change_theme_url_dark;
-}
-else{
-  $change_theme_auto = $change_theme_url_light;
-}
+// $change_theme_url_light = $change_theme_url.'change_theme=clear';
+// $change_theme_url_dark= $change_theme_url.'change_theme=roma';
 
 // ?page=plugin-community-pendings is an clean alias of
 // ?page=plugin&section=community/admin.php&tab=pendings
@@ -289,11 +245,11 @@ $template->assign(
     'U_PERMALINKS'=> $link_start.'permalinks',
     'U_ACTIVITY' => $link_start.'user_activity',
     'U_PROFILE' => get_root_url().'profile.php',
-    'U_PREF_THEME' => userprefs_get_param('admin_theme', 'clear'),
-    'U_CHANGE_THEME_LIGHT' => $change_theme_url_light,
-    'U_CHANGE_THEME_DARK' => $change_theme_url_dark,
-    'U_CHANGE_THEME_AUTO' => $change_theme_auto,
-    'ADMIN_THEME'=> $admin_theme,
+    // 'U_PREF_THEME' => userprefs_get_param('admin_theme', 'clear'),
+    // 'U_CHANGE_THEME_LIGHT' => $change_theme_url_light,
+    // 'U_CHANGE_THEME_DARK' => $change_theme_url_dark,
+    // 'U_CHANGE_THEME_AUTO' => $change_theme_auto,
+    // 'ADMIN_THEME'=> $admin_theme,
     )
   );
 
diff --git a/admin/themes/default/js/common.js b/admin/themes/default/js/common.js
index 9c3fd4612..3f3e21448 100644
--- a/admin/themes/default/js/common.js
+++ b/admin/themes/default/js/common.js
@@ -334,6 +334,8 @@ jQuery.fn.pwg_jconfirm_follow_href = function({
   });
 }
 
+//Get username initials
+//Used in menu and user list page
 function get_initials(username) {
   let words = username.toUpperCase().split(" ");
   let res = words[0][0];
@@ -344,31 +346,114 @@ function get_initials(username) {
   return res;
 }
 
+//Set any cookie
 function setCookie(cname, cvalue, exdays) {
   const d = new Date();
   d.setTime(d.getTime() + (exdays*24*60*60*1000));
   let expires = "expires="+ d.toUTCString();
   document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
-  if (cname == "lang")
+}
+
+//Get the value of any cookie with its name
+function getCookie(cname) {
+  let name = cname + "=";
+  let decodedCookie = decodeURIComponent(document.cookie);
+  let ca = decodedCookie.split(';');
+  for(let i = 0; i <ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) == ' ') {
+      c = c.substring(1);
+    }
+    if (c.indexOf(name) == 0) {
+      return c.substring(name.length, c.length);
+    }
+  }
+  return "";
+}
+
+//Toggle light or dark mode in admin
+function toggle_admin_mode(mode) {
+  if ("roma" == mode)
   {
-    location.reload();
+    //Dark mode
+    $('#theAdminPage').addClass('roma');
+  }
+  else
+  {
+    //Light mode
+    $('#theAdminPage').addClass('clear');
   }
 }
 
+//Function to handle admin mode change, used on click of inputs in menu
+function checkModeSelection() {
+  //Get the check radio
+  const selectedMode = document.querySelector('input[name="appearance"]:checked');
 
-//Script to handle menu
+  let autoMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  let userPref = selectedMode.value;
+
+  if('auto' == userPref){
+    if(autoMode){
+      userPref = 'roma';
+    }
+    else if( !autoMode){
+      userPref = 'clear';
+    }
+    setCookie("autoAdminMode",true,30);
+  }
+  else{
+    setCookie("autoAdminMode",false,30);
+  }
 
 
-$('document').ready(function(){
-  // {* Get the first letter of user name and fill the green circle span 
+  toggle_admin_mode(selectedMode.value);
+  setCookie("adminMode",userPref,30);
+  
+  //update userpref 
+  $.ajax({
+    url: "ws.php?format=json&method=pwg.users.preferences.set",
+    type: "POST",
+    dataType: "JSON",
+    data: {
+      param: 'admin_theme',
+      value: userPref,
+    },
+    success: function (res) {
+      //We refresh at the moment due to how the swicth for themes used to be handled.
+      //The css for roma and clear are in two different themes loaded in two seperate files
+      //Until we change how the admin css is, aka all moved to one theme/One file we need to refresh
+      window.location.replace(window.location.pathname + window.location.search);
+    }
+  })
+}
+
+// Hide the user options block when we click outisde of it
+function hide_user_options(e){
+  if (!$(e.target).closest('.user-actions').length) {
+    $('.user-sub-link-container').hide();
+    $('.icon-left-open').show();
+    $('#menubar .user-actions').removeClass('active');
+  }
+}
+
+// Check user system preference for light or dark mode, 
+// set the preference in the cookie and change theme accordingly
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+  let newMode = event.matches ? "roma" : "clear";
+  toggle_admin_mode(newMode);
+});
+
+$('document').ready(function()
+{
+  const isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+
+  // Get the first letter of user name and fill the green circle span 
   const initial_to_fill = get_initials(username);
-
-    const initialSpan = $('#menubar').find(".user-container-initials-wrapper span");
-    initialSpan.html(initial_to_fill);
-
+  const initialSpan = $('#menubar').find(".user-container-initials-wrapper span");
+  initialSpan.html(initial_to_fill);
 
   // on hover of menu display menu subitems for desktop
-
   $('.page-link').mouseenter(function (e) {
     const current_link = $(this);
     // Add a 2ms delay before displaying menu subitems 
@@ -398,33 +483,67 @@ $('document').ready(function(){
   $(document).click(function (e) {
     hide_user_options(e)
   });
-  
-  // Hide the use options block 
-  function hide_user_options(e){
-    if (!$(e.target).closest('.user-actions').length) {
-      $('.user-sub-link-container').hide();
-      $('.icon-left-open').show();
-      $('#menubar .user-actions').removeClass('active');
-    }
+
+  //On document load check if adminMode cookie is set if not set auto preference
+  let adminModeCookie = getCookie("adminMode"); 
+  let menuSizePreferenceCookie = getCookie("menuSizePreference")
+
+  //Adapt menu size to user cookie
+  if ("reduced" == menuSizePreferenceCookie)
+  {
+    $('#menubar').toggleClass('enlarged').toggleClass('reduced');
+    $('#content').toggleClass('reduced');
   }
 
-  // Check user preference for light or dark mode, set the preference in the cookie 
-  let prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-  setCookie("prefersDark",prefersDark,30);
-  
-  // Reduce and enlarge menu
+  //Check if adminMode cookie has been set and check the option that corresponds
+  if("" != adminModeCookie)
+  {
+    if (getCookie("autoAdminMode")){
+      adminModeCookie = 'auto'
+    }
+
+    toggle_admin_mode()
+    $('input[name="appearance"]').each(function(){
+        if(adminModeCookie == $( this ).val()){
+          $(this).parent('label').addClass('selected');
+          $(this).siblings('span').toggleClass('icon-circle-empty icon-dot-circled');
+        }
+    });
+  }
+
+  //Reduce and enlarge menu
+  //Save the user preferences in the cookies
   $('#reduce-enlarge').click(function () {
     //We make sure that we are using a desktop to enable enlarged and reduced
-    const isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
-
     if (!isMobile) {
       $('#menubar').toggleClass('enlarged').toggleClass('reduced');
       $('#content').toggleClass('reduced');
+      //Set cookie to be used in user pref for enlarged or reduced menu
+      if($('#menubar').hasClass('enlarged'))
+      {
+        setCookie("menuSizePreference",'enlarged',30);
+      }
+      else if($('#menubar').hasClass('reduced'))
+      {
+        setCookie("menuSizePreference",'reduced',30);
+      }
     }
-
   });
 
-  //Save in user pref/or cookie in the menu is reduce or enlarged
+  // //Actions are for mobile
+  // if (isMobile){
+  //   //Toggle slide up of menu
+  //   $('#menu-toggle').click(function () {
+  //     $('#menubar').toggleClass('open');
+  //   });
 
+  //   //Toggle menu sub items on mobile touch
+  //   $('.page-link').on('pointerdown', function(e) {
+  //     if (e.pointerType === 'touch') {  // only trigger for touch aka mobile
+  //       let child = $(this).find('.sub-link-container');
+  //       child.slideToggle();
+  //     }
+  //   });
+  // } 
 
 })
diff --git a/admin/themes/default/template/admin.tpl b/admin/themes/default/template/admin.tpl
index 35ff44ec5..fce39334d 100644
--- a/admin/themes/default/template/admin.tpl
+++ b/admin/themes/default/template/admin.tpl
@@ -63,76 +63,64 @@ let username = '{$USERNAME}'
 
 
 <div id="menubar" class="enlarged">
-  <div>
+  <div id="menubar-content">
   
     <div id="user-actions-container" class="menu-block">
       <div class="user-actions">
         <div class="username-container">
-          <div class="user-container-initials-wrapper">
-            <span class="icon-green"><!-- initials --></span>
-          </div>
-          <span id="menu-username" class="reduced-hidden">{$USERNAME}</span>
-
+          <span>
+            <div class="user-container-initials-wrapper">
+              <span class="icon-green"><!-- initials --></span>
+            </div>
+            <span id="menu-username" class="reduced-hidden">{$USERNAME}</span>
+          </span>
+          <i class="icon-left-open reduced-hidden"></i>
         </div>
-                  <i class="icon-left-open reduced-hidden"></i>
+
      
         <div class="user-sub-link-container">
           <div class="user-infos">
             <p id="dropdown-username" class="username">{$USERNAME}</p>
             <p class="">{$USER_EMAIL}</p>
           </div>
-          <p  class="tiptip" title="{'Switch to clear or dark colors for administration'|translate}">
-            {if $theme_id eq "clear"}
-                  <i class="icon-moon-inv"></i>
-            {elseif $theme_id eq "roma"}
-                  <i class="icon-sun-inv"></i>
-            {/if}
-              Apperance
-          </p>
+          <div id="apperance-switch-controller">
+            <p><i class="icon-moon-inv"></i>Apperance</p>
+          
             <span>
-              <div id="apperance-switch">
-
-              <a href="{$U_CHANGE_THEME_AUTO}">
-                <label class="font-checkbox no-bold {if $ADMIN_THEME=="auto"}active{/if}">
-                  <span class="icon-circle-empty"></span>
-                  <span type="radio" name="apperance" value="apperance-auto" checked="checked">
+              <div id="apperance-switch" class="tiptip" title="{'Switch to clear or dark colors for administration'|translate}">
+                  <label class="font-checkbox no-bold">
+                    <span class="icon-dot-circled"></span>
+                    <input type="radio" name="appearance" value="auto" onclick="checkModeSelection()">
                     Automatic
-                  </span>
-                </label>
-              </a>
-              
-              <a {if $ADMIN_THEME!="clear"}href="{$U_CHANGE_THEME_LIGHT}" {/if}>
-                <label class="font-checkbox no-bold {if $ADMIN_THEME=="clear"}active{/if}">
-                  <span class="icon-circle-empty"></span>
-                  <span type="radio" name="apperance" value="apperance-light">
-                    Light
-                  </span>
-                </label>
-              </a>
+                  </label>
 
-              <a {if $ADMIN_THEME!="roma"}href="{$U_CHANGE_THEME_DARK}" {/if}>                
-                <label class="font-checkbox no-bold {if $ADMIN_THEME=="roma"}active{/if}">
-                  <span class="icon-circle-empty"></span>
-                  <span type="radio" name="apperance" value="apperance-dark">
+                  <label class="font-checkbox no-bold">
+                    <span class="icon-dot-circled"></span>
+                    <input type="radio" name="appearance" value="clear" onclick="checkModeSelection()">
+                    Light
+                  </label>
+
+                  <label class="font-checkbox no-bold">
+                    <span class="icon-dot-circled"></span>
+                    <input type="radio" name="appearance" value="roma" onclick="checkModeSelection()">
                     Dark
-                  </span>
-                </label>
-              </a>
+                  </label>
 
               </div>
             </span>
+          </div>
           <a href="{$U_PROFILE}"><i class="icon-brush"></i>Edit my profil</a>
           <a href="{$U_FAQ}"><i class="icon-help-circled"></i>Help me</a>
           <a id="log-out"><i class="icon-logout"></i>Log out</a>
         </div>
       </div>
-      <div>
+      <div class="tiptip" title="{'Gallery'|translate}">
         <a class="gallery-link mobile-hidden" href="{$U_RETURN}"><i class="icon-home"></i><span class="reduced-hidden">{'Gallery'|@translate}&nbsp;</span></a>
       </div>
     </div>
 
     <div id="admin-pages" class="menu-block">
-      <div id="adminHome" class="page-link {if "dashboard" == $ACTIVE_PAGE}active{/if}">
+      <div id="adminHome" class="page-link {if "dashboard" == $ACTIVE_PAGE}active{/if}" title="{'Dashboard'|translate}">
         <span class="active-border"></span>
         <a href="{$U_ADMIN}"><i class="icon-television"></i><span class="reduced-hidden">{'Dashboard'|@translate}&nbsp;</span></a>
         <span class="hover"></span>
@@ -288,10 +276,10 @@ let username = '{$USERNAME}'
     <a class="gallery-link" href="{$U_RETURN}"><i class="icon-home"></i></a>
     <div>
       <span class="mobile-reduced">
-      <i class="icon-menu"></i>
+        <i class="icon-menu" id="menu-toggle"></i>
       </span>
-      <span class="mobile-reduced">
-      <i class="icon-cross"></i>
+      <span class="">
+        <i class="icon-cross"></i>
       </span>
     </div>
   </div>