diff --git a/.gitignore b/.gitignore
index 9fdd14b7..14907522 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@ rice-box.go
 /frontend/package-lock.json
 /backend/vendor
 /backend/*.cov
+/backend/test_config.yaml
 
 .DS_Store
 node_modules
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 78966d50..b321a1ed 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. For commit guidelines, please refer to [Standard Version](https://github.com/conventional-changelog/standard-version).
 
+## v0.2.7
+
+ - **Change**: New sidebar style and behavior
+ - **Change**: make search view and button behavior more consistent.
+ - **Fix**: [upload file bug](https://github.com/gtsteffaniak/filebrowser/issues/153)
+ - **Fix**: user lock out bug introduced in 0.2.6
+ - **Fix**: many minor state related issues.
+
 ## v0.2.6
 
 This change focuses on minimizing and simplifying build process.
diff --git a/README.md b/README.md
index 47836c91..5d411b3a 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
   <a href="https://opensource.org/license/apache-2-0/"><img src="https://img.shields.io/badge/License-Apache_2.0-blue.svg" alt="License: Apache-2.0"></a>
 </p>
 <p align="center">
-<img src="frontend/public/img/icons/favicon-256x256.png" width="100" title="Login With Custom URL">
+  <img src="frontend/public/img/icons/favicon-256x256.png" width="100" title="Login With Custom URL">
 </p>
 <h3 align="center">Filebrowser - A modern web-based file manager</h3>
 <p align="center">
@@ -10,10 +10,13 @@
 </p>
 
 > [!WARNING]
-> Starting with v0.2.0, *ALL* configuration is done via `filebrowser.yaml` configuration file.
-> Starting with v0.2.4 *ALL* share links need to be re-created (due to security fix).
+> Starting with v0.2.0, *ALL* configuration is done via `filebrowser.yaml`
+> configuration file.
+> Starting with v0.2.4 *ALL* share links need to be re-created (due to
+> security fix).
 
-This fork makes the following significant changes to filebrowser for origin:
+This fork makes the following significant changes to filebrowser for
+origin:
 
   1. [x] Better search
      - Lightning fast
@@ -21,7 +24,8 @@ This fork makes the following significant changes to filebrowser for origin:
      - Works with more type filters
      - interactive results page.
   2. [x] Revamped and simplified GUI navbar and sidebar menu.
-     - Additional compact view mode as well as refreshed view mode styles.
+     - Additional compact view mode as well as refreshed view mode
+       styles.
   3. [x] Revamped configuration via `filebrowser.yml` config file.
      - More configurations possible at a per-user level
      - <img width="450" alt="image" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/625bd7c4-5ee9-4011-aaae-2a388ab0813b">
@@ -34,12 +38,12 @@ It allows the creation of multiple users and each user can have its own
 directory.
 
 This repository is a fork, a collection of changes that make this program
-work better in terms of asthetics and performance. Improved search, 
-simplified ui (without removing features) and more secure and up-to-date 
+work better in terms of asthetics and performance. Improved search,
+simplified ui (without removing features) and more secure and up-to-date
 build are just a few examples.
 
-This Implementation of filebrowser differs significantly to the original. 
-There are hundereds of thousands of lines changed and they are generally 
+This Implementation of filebrowser differs significantly to the original.
+There are hundereds of thousands of lines changed and they are generally
 no longer compatible with eachother. This has been intentional -- the
 focus of this fork is on a few key principles:
   - Simplicity and improved user experience
@@ -49,23 +53,24 @@ focus of this fork is on a few key principles:
 
 ## Look
 
-One way you can observe the improved user experience is how I changed the UI. 
-The Navbar is simplified to a three component system : 
+One way you can observe the improved user experience is how I changed
+the UI. The Navbar is simplified to a three component system :
 
   1. (Left) The slide-out action panel button
   2. (Middle) The powerful search bar.
   3. (Right) The view change toggle.
-   
-All other functions are moved either into the action menu or popup menus. 
-If the action is does not depend on context, it will exist in the slide-out action panel. 
-If the action is available based on context, it will showup as a popup menu.
+
+All other functions are moved either into the action menu or popup menus.
+If the action is does not depend on context, it will exist in the slide-out
+action panel. If the action is available based on context, it will showup as
+a popup menu.
 
 <p align="center">
   <img width="500" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/35cdeb3b-ab79-4b04-8001-8f51f6ea06bb" title="Dark mode">
-<img width="500" alt="image" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/55fa4f5c-440e-4a97-b711-96139208a163">
-<img width="500" alt="image" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/c76f4100-949b-4e17-a3e6-e410fb8ec08f">
-<img width="500" alt="image" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/0bde26f3-fa90-411e-bd0b-abaa47506d62">
-<img width="560" alt="image" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/71d8f2b8-6fe6-4fdc-8aac-503d08c28d86">
+  <img width="500" alt="image" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/55fa4f5c-440e-4a97-b711-96139208a163">
+  <img width="500" alt="image" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/c76f4100-949b-4e17-a3e6-e410fb8ec08f">
+  <img width="500" alt="image" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/0bde26f3-fa90-411e-bd0b-abaa47506d62">
+  <img width="560" alt="image" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/71d8f2b8-6fe6-4fdc-8aac-503d08c28d86">
 </p>
 
 ## Install
@@ -119,43 +124,67 @@ volumes:
 
 ```
 
-Not using docker (not recommended) (Must donwload asset with frontend directory next to filebrowser binary)
+Not using docker (not recommended)
+
+Note: Must download asset with frontend directory next to filebrowser binary
 
 ```
-./filebrowser -f <filebrowser.yml or other /path/to/config.yaml>
+./filebrowser -c <filebrowser.yml or other /path/to/config.yaml>
 ```
 
 ## Configuration
 
-All configuration is now done via a single configuration file: `filebrowser.yaml`, here is an example minimal [configuration file](./backend/filebrowser.yaml).
+All configuration is now done via a single configuration file:
+`filebrowser.yaml`, here is an example minimal [configuration
+file](./backend/filebrowser.yaml).
 
-View the [Configuration Help Page](./configuration.md) for available configuration options and other help.
+View the [Configuration Help Page](./configuration.md) for available
+configuration options and other help.
 
 
 ## Migration from filebrowser/filebrowser
 
-If you are currently using filebrowser from the filebrowser/filebrowser repo, but want to try using this. I recommend you start fresh without reusing the database, but there are a few things you'll need to do if you must migrate:
+If you are currently using filebrowser from the filebrowser/filebrowser
+repo, but want to try using this. I recommend you start fresh without
+reusing the database, but there are a few things you'll need to do if you
+must migrate:
 
 1. Create a configuration file as mentioned above.
-2. Copy your database file from the original filebrowser to the path of the new one.
-3. Update the configuration file to use the database (under server in filebrowser.yml)
-4. If you are using docker, update the docker-compose file or docker run command to use the config file as described in the install section above.
-5. If you are not using docker, just make sure you run filebrowser -f filebrowser.yml and have valid filebrowser config.
+2. Copy your database file from the original filebrowser to the path of
+   the new one.
+3. Update the configuration file to use the database (under server in
+   filebrowser.yml)
+4. If you are using docker, update the docker-compose file or docker run
+   command to use the config file as described in the install section
+   above.
+5. If you are not using docker, just make sure you run filebrowser -c
+   filebrowser.yml and have valid filebrowser config.
 
 
-The filebrowser application should run with the same user and rules that you have from the original. But keep in mind the differences that are mentioned at the top of this readme.
+The filebrowser application should run with the same user and rules that
+you have from the original. But keep in mind the differences that are
+mentioned at the top of this readme.
 
 ### background & help
 
-The original project filebrowser/filebrowser used multiple different ways to configure the server.
-This was confusing and difficult to work with from a user and from a developer's perspective.
-So I completely redesigned the program to use one single human-readable config file.
+The original project filebrowser/filebrowser used multiple different ways
+to configure the server. This was confusing and difficult to work with
+from a user and from a developer's perspective. So I completely redesigned
+the program to use one single human-readable config file.
 
-I understand many coming from the original fork may notice differences which make using this improved version more difficult. If you notice issues that you believe should be fixed, please open an issue here and it will very likely be addressed with a PR within a few weeks.
+I understand many coming from the original fork may notice differences
+which make using this improved version more difficult. If you notice
+issues that you believe should be fixed, please open an issue here and it
+will very likely be addressed with a PR within a few weeks.
 
-This version of filebrowser is going through a configuration overhaul as mentioned above. Certain features related to rules and commands may not work as they do on the original filebrowser. The purpose of this is to create a more consistent experience where configuration is done via files rather than running commands, so that it's very clear what the current state of the configuration is. When running commands its not clear what the configuration is.
+This version of filebrowser is going through a configuration overhaul as
+mentioned above. Certain features related to rules and commands may not
+work as they do on the original filebrowser. The purpose of this is to
+create a more consistent experience where configuration is done via files
+rather than running commands, so that it's very clear what the current
+state of the configuration is. When running commands its not clear what
+the configuration is.
 
 ## Roadmap
 
 see [Roadmap Page](./roadmap.md)
-
diff --git a/backend/http/public.go b/backend/http/public.go
index 9d204d2a..1eac9291 100644
--- a/backend/http/public.go
+++ b/backend/http/public.go
@@ -46,7 +46,7 @@ var withHashFile = func(fn handleFunc) handleFunc {
 			Fs:         fsPath,
 			Path:       lastComponent,
 			Modify:     d.user.Perm.Modify,
-			Expand:     false,
+			Expand:     true,
 			ReadHeader: d.server.TypeDetectionByHeader,
 			Checker:    d,
 			Token:      link.Token,
diff --git a/backend/http/users.go b/backend/http/users.go
index 603ce0d2..893d2b19 100644
--- a/backend/http/users.go
+++ b/backend/http/users.go
@@ -4,6 +4,7 @@ import (
 	"encoding/json"
 	"log"
 	"net/http"
+	"reflect"
 	"sort"
 	"strconv"
 
@@ -155,30 +156,24 @@ var userPutHandler = withSelfOrAdmin(func(w http.ResponseWriter, r *http.Request
 		return http.StatusBadRequest, nil
 	}
 
-	if len(req.Which) == 0 || (len(req.Which) == 1 && req.Which[0] == "all") {
-		if !d.user.Perm.Admin {
-			return http.StatusForbidden, nil
-		}
-
-		if req.Data.Password != "" {
-			req.Data.Password, err = users.HashPwd(req.Data.Password)
-		} else {
-			var suser *users.User
-			suser, err = d.store.Users.Get(d.server.Root, d.raw.(uint))
-			req.Data.Password = suser.Password
-		}
-
-		if err != nil {
-			return http.StatusInternalServerError, err
-		}
-
+	if len(req.Which) == 0 || req.Which[0] == "all" {
 		req.Which = []string{}
+		v := reflect.ValueOf(req.Data)
+		if v.Kind() == reflect.Ptr {
+			v = v.Elem()
+		}
+		t := v.Type()
+		for i := 0; i < t.NumField(); i++ {
+			field := t.Field(i)
+			if field.Name != "Password" && field.Name != "Fs" {
+				req.Which = append(req.Which, field.Name)
+			}
+		}
 	}
 
 	for k, v := range req.Which {
 		v = cases.Title(language.English, cases.NoLower).String(v)
 		req.Which[k] = v
-
 		if v == "Password" {
 			if !d.user.Perm.Admin && d.user.LockPassword {
 				return http.StatusForbidden, nil
@@ -195,7 +190,6 @@ var userPutHandler = withSelfOrAdmin(func(w http.ResponseWriter, r *http.Request
 			}
 		}
 	}
-
 	err = d.store.Users.Update(req.Data, req.Which...)
 	if err != nil {
 		return http.StatusInternalServerError, err
diff --git a/backend/settings/config.go b/backend/settings/config.go
index 023ca631..7c856b76 100644
--- a/backend/settings/config.go
+++ b/backend/settings/config.go
@@ -71,6 +71,7 @@ func setDefaults() Settings {
 			},
 		},
 		UserDefaults: UserDefaults{
+			StickySidebar:   true,
 			Scope:           ".",
 			LockPassword:    false,
 			HideDotfiles:    true,
@@ -92,6 +93,7 @@ func setDefaults() Settings {
 
 // Apply applies the default options to a user.
 func (d *UserDefaults) Apply(u *users.User) {
+	u.StickySidebar = d.StickySidebar
 	u.DisableSettings = d.DisableSettings
 	u.DarkMode = d.DarkMode
 	u.Scope = d.Scope
diff --git a/backend/settings/structs.go b/backend/settings/structs.go
index c6b54266..7d9e7914 100644
--- a/backend/settings/structs.go
+++ b/backend/settings/structs.go
@@ -68,6 +68,7 @@ type Frontend struct {
 // UserDefaults is a type that holds the default values
 // for some fields on User.
 type UserDefaults struct {
+	StickySidebar   bool         `json:"stickySidebar"`
 	DarkMode        bool         `json:"darkMode"`
 	LockPassword    bool         `json:"lockPassword"`
 	DisableSettings bool         `json:"disableSettings,omitempty"`
diff --git a/backend/storage/bolt/users.go b/backend/storage/bolt/users.go
index a6485ecf..64e9490d 100644
--- a/backend/storage/bolt/users.go
+++ b/backend/storage/bolt/users.go
@@ -55,7 +55,6 @@ func (st usersBackend) Update(user *users.User, fields ...string) error {
 	if len(fields) == 0 {
 		return st.Save(user)
 	}
-
 	for _, field := range fields {
 		userField := reflect.ValueOf(user).Elem().FieldByName(field)
 		if !userField.IsValid() {
@@ -63,10 +62,9 @@ func (st usersBackend) Update(user *users.User, fields ...string) error {
 		}
 		val := userField.Interface()
 		if err := st.db.UpdateField(user, field, val); err != nil {
-			return err
+			return fmt.Errorf("Error updating user field: %s, error: %v", field, err.Error())
 		}
 	}
-
 	return nil
 }
 
diff --git a/backend/users/users.go b/backend/users/users.go
index e08692a3..50a94a74 100644
--- a/backend/users/users.go
+++ b/backend/users/users.go
@@ -28,6 +28,7 @@ type Sorting struct {
 
 // User describes a user.
 type User struct {
+	StickySidebar   bool         `json:"stickySidebar"`
 	DarkMode        bool         `json:"darkMode"`
 	DisableSettings bool         `json:"disableSettings"`
 	ID              uint         `storm:"id,increment" json:"id"`
diff --git a/frontend/src/api/users.js b/frontend/src/api/users.js
index 34a4bb12..6a827713 100644
--- a/frontend/src/api/users.js
+++ b/frontend/src/api/users.js
@@ -24,6 +24,10 @@ export async function create(user) {
 }
 
 export async function update(user, which = ["all"]) {
+  if (which[0] != "password") {
+    user.password = "";
+  }
+  console.log("updating user",user,which)
   await fetchURL(`/api/users/${user.id}`, {
     method: "PUT",
     body: JSON.stringify({
diff --git a/frontend/src/components/ButtonGroup.vue b/frontend/src/components/ButtonGroup.vue
index ffc92848..78e4d6bf 100644
--- a/frontend/src/components/ButtonGroup.vue
+++ b/frontend/src/components/ButtonGroup.vue
@@ -1,14 +1,18 @@
 <template>
   <div class="button-group">
-    <button
-      v-for="(btn, index) in buttons"
-      :key="index"
-      :disabled="isDisabled"
-      :class="{ active: activeButton === index && !isDisabled }"
-      @click="setActiveButton(index, btn.label)"
-    >
-      {{ btn.label }}
+    <button v-if="isDisabled" disabled>
+      No options for folders
     </button>
+    <template v-else>
+      <button
+        v-for="(btn, index) in buttons"
+        :key="index"
+        :class="{ active: activeButton === index }"
+        @click="setActiveButton(index, btn.label)"
+      >
+        {{ btn.label }}
+      </button>
+    </template>
   </div>
 </template>
 
@@ -103,6 +107,10 @@ button:hover {
   background: #e0e0e0;
 }
 
+button:disabled {
+  cursor: not-allowed !important;
+}
+
 button.active {
   background-color: var(--blue) !important;
   color: #ffffff;
diff --git a/frontend/src/components/FileSelection.vue b/frontend/src/components/FileSelection.vue
new file mode 100644
index 00000000..e13db4f5
--- /dev/null
+++ b/frontend/src/components/FileSelection.vue
@@ -0,0 +1,168 @@
+<template>
+  <div v-if="selectedCount > 0" id="file-selection" :class="{ 'dark-mode': isDarkMode }">
+    <span>{{ selectedCount }} selected</span>
+    <div>
+      <action
+        v-if="headerButtons.select"
+        icon="info"
+        :label="$t('buttons.info')"
+        show="info"
+      />
+      <action
+        v-if="headerButtons.select"
+        icon="check_circle"
+        :label="$t('buttons.selectMultiple')"
+        @action="toggleMultipleSelection"
+      />
+      <action
+        v-if="headerButtons.download"
+        icon="file_download"
+        :label="$t('buttons.download')"
+        @action="download"
+        :counter="selectedCount"
+      />
+      <action
+        v-if="headerButtons.share"
+        icon="share"
+        :label="$t('buttons.share')"
+        show="share"
+      />
+      <action
+        v-if="headerButtons.rename"
+        icon="mode_edit"
+        :label="$t('buttons.rename')"
+        show="rename"
+      />
+      <action
+        v-if="headerButtons.copy"
+        icon="content_copy"
+        :label="$t('buttons.copyFile')"
+        show="copy"
+      />
+      <action
+        v-if="headerButtons.move"
+        icon="forward"
+        :label="$t('buttons.moveFile')"
+        show="move"
+      />
+      <action
+        v-if="headerButtons.delete"
+        icon="delete"
+        :label="$t('buttons.delete')"
+        show="delete"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { state, getters, mutations } from "@/store"; // Import your custom store
+import { files as api } from "@/api";
+import Action from "@/components/header/Action.vue";
+
+export default {
+  name: "fileSelection",
+  components: {
+    Action,
+  },
+  computed: {
+    isDarkMode() {
+      return getters.isDarkMode();
+    },
+    headerButtons() {
+      return {
+        select: state.selected.length > 0,
+        upload: state.user.perm?.create && state.selected.length > 0,
+        download: state.user.perm.download && state.selected.length > 0,
+        delete: state.selected.length > 0 && state.user.perm.delete,
+        rename: state.selected.length === 1 && state.user.perm.rename,
+        share: state.selected.length === 1 && state.user.perm.share,
+        move: state.selected.length > 0 && state.user.perm.rename,
+        copy: state.selected.length > 0 && state.user.perm?.create,
+      };
+    },
+    selectedCount() {
+      return getters.selectedCount();
+    },
+  },
+  methods: {
+    toggleMultipleSelection() {
+      mutations.setMultiple(!state.multiple);
+      mutations.closeHovers();
+    },
+    download() {
+      if (getters.isSingleFileSelected()) {
+        api.download(null, getters.selectedDownloadUrl());
+        return;
+      }
+      mutations.showHover({
+        name: "download",
+        confirm: (format) => {
+          mutations.closeHovers();
+          let files = [];
+          if (state.selected.length > 0) {
+            for (let i of state.selected) {
+              files.push(state.req.items[i].url);
+            }
+          } else {
+            files.push(state.route.path);
+          }
+          try {
+            api.download(format, ...files);
+            showSuccess("download started");
+          } catch (e) {
+            showError("error downloading", e);
+          }
+        },
+      });
+    },
+  },
+};
+</script>
+<style>
+@media (min-width: 800px) {
+  #file-selection {
+    bottom: 4em;
+  }
+}
+
+#file-selection .action {
+  border-radius: 50%;
+  width: auto;
+}
+
+#file-selection > span {
+  display: inline-block;
+  margin-left: 1em;
+  color: #6f6f6f;
+  margin-right: auto;
+}
+
+#file-selection .action span {
+  display: none;
+}
+
+/* File Selection */
+#file-selection {
+  box-shadow: rgba(0, 0, 0, 0.3) 0px 2em 50px 10px;
+  position: fixed;
+  bottom: 4em;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+  background: #fff;
+  max-width: 30em;
+  z-index: 3;
+  border-radius: 1em;
+  display: flex;
+  width: 90%;
+}
+/* File selection */
+#file-selection.dark-mode {
+  background: var(--surfaceSecondary) !important;
+}
+
+#file-selection.dark-mode span {
+  color: var(--textPrimary) !important;
+}
+</style>
diff --git a/frontend/src/components/Search.vue b/frontend/src/components/Search.vue
index 2985f88a..14233098 100644
--- a/frontend/src/components/Search.vue
+++ b/frontend/src/components/Search.vue
@@ -101,39 +101,6 @@
       <div class="searchContext">Search Context: {{ getContext }}</div>
       <div id="result-list">
         <div>
-          <!-- Loading icon when search is ongoing -->
-          <p v-show="isEmpty && isRunning" id="renew">
-            <i class="material-icons spin">autorenew</i>
-          </p>
-          <!-- Message when no results are found -->
-          <div class="searchPrompt" v-show="isEmpty && !isRunning">
-            <p>{{ noneMessage }}</p>
-            <div class="helpButton" @click="toggleHelp()">Help</div>
-          </div>
-          <!-- Help text section -->
-          <div class="helpText" v-if="showHelp">
-            <p>
-              Search occurs on each character you type (3 character minimum for search
-              terms).
-            </p>
-            <p>
-              <b>The index:</b> Search utilizes the index which automatically gets updated
-              on the configured interval (default: 5 minutes). Searching when the program
-              has just started may result in incomplete results.
-            </p>
-            <p>
-              <b>Filter by type:</b> You can have multiple type filters by adding
-              <code>type:condition</code> followed by search terms.
-            </p>
-            <p>
-              <b>Multiple Search terms:</b> Additional terms separated by <code>|</code>,
-              for example <code>"test|not"</code> searches for both terms independently.
-            </p>
-            <p>
-              <b>File size:</b> Searching files by size may have significantly longer
-              search times.
-            </p>
-          </div>
           <div>
             <!-- Button groups for filtering search results -->
             <ButtonGroup
@@ -150,7 +117,7 @@
               :isDisabled="isTypeSelectDisabled"
             />
             <!-- Inputs for filtering by file size -->
-            <div class="sizeConstraints">
+            <div v-if="!foldersOnly" class="sizeConstraints">
               <div class="sizeInputWrapper">
                 <p>Smaller Than:</p>
                 <input
@@ -175,6 +142,39 @@
             </div>
           </div>
         </div>
+        <!-- Loading icon when search is ongoing -->
+        <p v-show="isEmpty && isRunning" id="renew">
+          <i class="material-icons spin">autorenew</i>
+        </p>
+        <!-- Message when no results are found -->
+        <div class="searchPrompt" v-show="isEmpty && !isRunning">
+          <p>{{ noneMessage }}</p>
+          <div class="helpButton" @click="toggleHelp()">Help</div>
+        </div>
+        <!-- Help text section -->
+        <div class="helpText" v-if="showHelp">
+          <p>
+            Search occurs on each character you type (3 character minimum for search
+            terms).
+          </p>
+          <p>
+            <b>The index:</b> Search utilizes the index which automatically gets updated
+            on the configured interval (default: 5 minutes). Searching when the program
+            has just started may result in incomplete results.
+          </p>
+          <p>
+            <b>Filter by type:</b> You can have multiple type filters by adding
+            <code>type:condition</code> followed by search terms.
+          </p>
+          <p>
+            <b>Multiple Search terms:</b> Additional terms separated by <code>|</code>,
+            for example <code>"test|not"</code> searches for both terms independently.
+          </p>
+          <p>
+            <b>File size:</b> Searching files by size may have significantly longer search
+            times.
+          </p>
+        </div>
         <!-- List of search results -->
         <ul v-show="results.length > 0">
           <li
@@ -249,6 +249,15 @@ export default {
     };
   },
   watch: {
+    largerThan() {
+      this.submit();
+    },
+    smallerThan() {
+      this.submit();
+    },
+    searchTypes() {
+      this.submit();
+    },
     active(active) {
       const resultList = document.getElementById("result-list");
       if (!active) {
@@ -286,6 +295,9 @@ export default {
     },
   },
   computed: {
+    foldersOnly() {
+      return this.isTypeSelectDisabled;
+    },
     active() {
       return getters.currentPromptName() === "search";
     },
@@ -314,7 +326,7 @@ export default {
         : this.$t("search.pressToSearch");
     },
     isMobile() {
-      return this.width <= 800;
+      return getters.isMobile();
     },
     isRunning() {
       return this.ongoing;
@@ -363,6 +375,7 @@ export default {
       mutations.showHover("search");
     },
     close(event) {
+      this.value = "";
       event.stopPropagation();
       mutations.closeHovers();
     },
@@ -402,7 +415,9 @@ export default {
     },
     async submit(event) {
       this.showHelp = false;
-      event.preventDefault();
+      if (event != undefined) {
+        event.preventDefault();
+      }
       if (this.value === "" || this.value.length < 3) {
         this.ongoing = false;
         this.results = [];
@@ -519,7 +534,7 @@ export default {
 /* Search */
 #search {
   background-color: unset !important;
-  z-index: 3;
+  z-index: 5;
   position: fixed;
   top: 0.5em;
   min-width: 35em;
@@ -639,6 +654,10 @@ body.rtl #search #result ul > * {
   border-bottom-left-radius: 0;
 }
 
+input.sizeInput:disabled {
+  cursor: not-allowed;
+}
+
 /* Search Input Placeholder */
 #search::-webkit-input-placeholder {
   color: rgba(255, 255, 255, 0.5);
diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index be8b388f..d2c80d68 100644
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -1,18 +1,48 @@
 <template>
-  <nav :class="{ active, 'dark-mode': isDarkMode }">
-    <!-- Section for logged-in users -->
-    <template v-if="isLoggedIn">
-      <!-- My Files button -->
+  <nav
+    id="sidebar"
+    :class="{ active: active, 'dark-mode': isDarkMode, sticky: user?.stickySidebar }"
+  >
+    <div class="card">
       <button
+        v-if="user.username"
+        @click="navigateTo('/settings/profile')"
         class="action"
-        @click="toRoot"
-        :aria-label="$t('sidebar.myFiles')"
-        :title="$t('sidebar.myFiles')"
       >
-        <i class="material-icons">folder</i>
-        <span>{{ $t("sidebar.myFiles") }}</span>
+        <i class="material-icons">person</i>
+        <span>{{ user.username }}</span>
       </button>
+    </div>
 
+    <div class="card card-wrapper" @mouseleave="resetHoverTextToDefault">
+      <span>{{ hoverText }}</span>
+      <div class="quick-toggles">
+        <div
+          :class="{ active: user?.singleClick }"
+          @click="toggleClick"
+          @mouseover="updateHoverText('Toggle single click')"
+        >
+          <i class="material-icons">ads_click</i>
+        </div>
+        <div
+          :class="{ active: user?.darkMode }"
+          @click="toggleDarkMode"
+          @mouseover="updateHoverText('Toggle dark mode')"
+        >
+          <i class="material-icons">dark_mode</i>
+        </div>
+        <div
+          :class="{ active: user?.stickySidebar }"
+          @click="toggleSticky"
+          @mouseover="updateHoverText('Toggle sticky sidebar')"
+        >
+          <i class="material-icons">push_pin</i>
+        </div>
+      </div>
+    </div>
+
+    <!-- Section for logged-in users -->
+    <div v-if="isLoggedIn">
       <!-- Buttons visible if user has create permission -->
       <div v-if="user.perm?.create">
         <!-- New Folder button -->
@@ -36,7 +66,7 @@
           <span>{{ $t("sidebar.newFile") }}</span>
         </button>
         <!-- Upload button -->
-        <button id="upload-button" @click="upload($event)" class="action">
+        <button id="upload-button" @click="uploadFunc" class="action">
           <i class="material-icons">file_upload</i>
           <span>Upload file</span>
         </button>
@@ -47,7 +77,7 @@
         <!-- Settings button -->
         <button
           class="action"
-          @click="toSettings"
+          @click="navigateTo('/settings/global')"
           :aria-label="$t('sidebar.settings')"
           :title="$t('sidebar.settings')"
         >
@@ -67,10 +97,30 @@
           <span>{{ $t("sidebar.logout") }}</span>
         </button>
       </div>
-    </template>
+      <div class="sources card card-wrapper">
+        <span>Sources</span>
+        <div class="inner-card">
+          <!-- My Files button -->
+          <button
+            class="action"
+            @click="navigateTo('/files/')"
+            :aria-label="$t('sidebar.myFiles')"
+            :title="$t('sidebar.myFiles')"
+          >
+            <i class="material-icons">folder</i>
+            <span>{{ $t("sidebar.myFiles") }}</span>
+            <div class="usage-info">
+              <progress-bar :val="usage.usedPercentage" size="medium"></progress-bar>
+              <span style="text-align: center">{{ usage.usedPercentage }}%</span>
+              <span>{{ usage.used }} of {{ usage.total }} used</span>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
 
     <!-- Section for non-logged-in users -->
-    <template v-else>
+    <div v-else>
       <!-- Login button -->
       <router-link
         class="action"
@@ -92,14 +142,11 @@
         <i class="material-icons">person_add</i>
         <span>{{ $t("sidebar.signup") }}</span>
       </router-link>
-    </template>
+    </div>
 
+    <div class="buffer"></div>
     <!-- Credits and usage information section -->
     <div class="credits" v-if="isFiles && !disableUsedPercentage && usage">
-      <progress-bar :val="usage.usedPercentage" size="medium"></progress-bar>
-      <span style="text-align: center">{{ usage.usedPercentage }}%</span>
-      <span>{{ usage.used }} of {{ usage.total }} used</span>
-      <br />
       <span v-if="disableExternal">File Browser</span>
       <span v-else>
         <a
@@ -119,7 +166,6 @@
 </template>
 
 <script>
-import * as upload from "@/utils/upload";
 import * as auth from "@/utils/auth";
 import {
   version,
@@ -129,7 +175,7 @@ import {
   noAuth,
   loginPage,
 } from "@/utils/constants";
-import { files as api } from "@/api";
+import { files, users } from "@/api";
 import ProgressBar from "@/components/ProgressBar.vue";
 import { getHumanReadableFilesize } from "@/utils/filesizes";
 import { state, getters, mutations } from "@/store"; // Import your custom store
@@ -140,6 +186,11 @@ export default {
   components: {
     ProgressBar,
   },
+  data() {
+    return {
+      hoverText: "Quick Toggles", // Initially empty
+    };
+  },
   mounted() {
     this.updateUsage();
   },
@@ -148,6 +199,9 @@ export default {
       return getters.isFiles();
     },
     user() {
+      if (!getters.isLoggedIn()) {
+        return {};
+      }
       return state.user;
     },
     isDarkMode() {
@@ -160,7 +214,7 @@ export default {
       return getters.currentPrompt();
     },
     active() {
-      return getters.currentPromptName() === "sidebar";
+      return getters.isSidebarVisible() && getters.currentPromptName() == null;
     },
     signup: () => signup,
     version: () => version,
@@ -168,85 +222,221 @@ export default {
     disableUsedPercentage: () => disableUsedPercentage,
     canLogout: () => !noAuth && loginPage,
     usage: () => state.usage,
+    route: () => state.route,
+  },
+  watch: {
+    route() {
+      if (!getters.isLoggedIn()) {
+        return;
+      }
+      if (!state.user.stickySidebar) {
+        mutations.closeSidebar();
+      }
+    },
   },
   methods: {
+    updateHoverText(text) {
+      this.hoverText = text;
+    },
+    resetHoverTextToDefault() {
+      this.hoverText = "Quick Toggles"; // Reset to default hover text
+    },
+    toggleClick() {
+      mutations.updateUser({ singleClick: !state.user.singleClick });
+    },
+    toggleDarkMode() {
+      mutations.toggleDarkMode();
+    },
+    toggleSticky() {
+      let newSettings = state.user;
+      newSettings.stickySidebar = !state.user.stickySidebar;
+      users.update(newSettings, ["stickySidebar"]);
+    },
     async updateUsage() {
-      console.log("updating usage");
-
+      if (!getters.isLoggedIn()) {
+        return;
+      }
       let path = getters.getRoutePath();
       let usageStats = { used: "0 B", total: "0 B", usedPercentage: 0 };
       if (this.disableUsedPercentage) {
         return usageStats;
       }
       try {
-        let usage = await api.usage(path);
+        let usage = await files.usage(path);
         usageStats = {
           used: getHumanReadableFilesize(usage.used / 1024),
           total: getHumanReadableFilesize(usage.total / 1024),
           usedPercentage: Math.round((usage.used / usage.total) * 100),
         };
       } catch (error) {
-        showError("Error fetching usage:", error);
+        showError("Error fetching usage", error);
       }
-      console.log(usageStats);
       mutations.setUsage(usageStats);
     },
     showHover(value) {
       return mutations.showHover(value);
     },
-    // Navigate to the root files directory
-    toRoot() {
-      this.$router.push({ path: "/files/" }, () => {});
-      mutations.closeHovers();
-    },
-    // Navigate to the settings page
-    toSettings() {
-      this.$router.push({ path: "/settings" }, () => {});
+    navigateTo(path) {
+      this.$router.push({ path: path }, () => {});
       mutations.closeHovers();
     },
     // Show the help overlay
     help() {
       mutations.showHover("help");
     },
-    // Handle file upload
-    upload(event) {
-      return this.$upload(event);
-    },
-    // Handle files selected for upload
-    uploadInput(event) {
-      mutations.closeHovers();
-
-      let files = event.currentTarget.files;
-      let folder_upload =
-        files[0].webkitRelativePath !== undefined && files[0].webkitRelativePath !== "";
-
-      if (folder_upload) {
-        for (let i = 0; i < files.length; i++) {
-          let file = files[i];
-          files[i].fullPath = file.webkitRelativePath;
-        }
-      }
-
-      let path = getters.getRoutePath();
-      let conflict = upload.checkConflict(files, state.req.items);
-
-      if (conflict) {
-        mutations.showHover({
-          name: "replace",
-          confirm: (event) => {
-            event.preventDefault();
-            mutations.closeHovers();
-            upload.handleFiles(files, path, true);
-          },
-        });
-
-        return;
-      }
-
-      upload.handleFiles(files, path);
+    uploadFunc() {
+      mutations.showHover("upload");
     },
     // Logout the user
     logout: auth.logout,
   },
 };
 </script>
+
+<style>
+#sidebar {
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 1em;
+  padding-top: 5em;
+  width: 20em;
+  position: fixed;
+  z-index: 4;
+  left: -20em;
+  height: 100%;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  transition: 0.5s ease;
+  background-color: #ededed;
+}
+
+#sidebar.sticky {
+  z-index: 3;
+}
+
+@supports (backdrop-filter: none) {
+  nav {
+    background-color: transparent;
+    backdrop-filter: blur(16px) invert(0.1);
+  }
+}
+
+.usage-info {
+  padding: 0.5em;
+}
+
+body.rtl nav {
+  left: unset;
+  right: -17em;
+}
+
+#sidebar.active {
+  left: 0;
+}
+
+#sidebar.rtl nav.active {
+  left: unset;
+  right: 0;
+}
+
+#sidebar > div {
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  margin-bottom: 0.5em;
+}
+
+#sidebar .action {
+  width: 100%;
+  display: block;
+  padding: 0.5em;
+  white-space: nowrap;
+  height: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+body.rtl .action {
+  direction: rtl;
+  text-align: right;
+}
+
+#sidebar .action > * {
+  vertical-align: middle;
+}
+/* * * * * * * * * * * * * * * *
+ *            FOOTER           *
+ * * * * * * * * * * * * * * * */
+
+.credits {
+  font-size: 1em;
+  color: var(--textSecondary);
+  padding: 1em;
+}
+
+.credits > span {
+  display: block;
+  margin-top: 0.5em;
+  margin-left: 0;
+}
+
+.credits a,
+.credits a:hover {
+  color: inherit;
+  cursor: pointer;
+}
+
+.buffer {
+  flex-grow: 1;
+}
+
+.quick-toggles {
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
+  padding-bottom: 1em !important;
+}
+
+.quick-toggles button {
+  border-radius: 10em;
+  cursor: pointer;
+  flex: none;
+}
+
+.card-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0.5em;
+}
+
+.sources {
+  padding: 0.5em;
+  margin-top: 0.5em;
+}
+
+.inner-card {
+  border-radius: 0.5em;
+  padding: 0px !important;
+}
+
+.quick-toggles div {
+  border-radius: 10em;
+  background-color: var(--surfaceSecondary);
+}
+
+.quick-toggles div i {
+  font-size: 2em;
+  padding: 0.25em;
+  border-radius: 10em;
+  cursor: pointer;
+}
+
+button.action {
+  border-radius: 0.5em;
+}
+
+.quick-toggles .active {
+  background-color: var(--blue) !important;
+  border-radius: 10em;
+}
+</style>
diff --git a/frontend/src/components/header/Action.vue b/frontend/src/components/header/Action.vue
index c160f18d..ebed1f42 100644
--- a/frontend/src/components/header/Action.vue
+++ b/frontend/src/components/header/Action.vue
@@ -23,4 +23,6 @@ export default {
 };
 </script>
 
-<style></style>
+<style>
+
+</style>
diff --git a/frontend/src/components/prompts/Move.vue b/frontend/src/components/prompts/Move.vue
index 74cf272d..6463f51b 100644
--- a/frontend/src/components/prompts/Move.vue
+++ b/frontend/src/components/prompts/Move.vue
@@ -68,7 +68,7 @@ export default {
       return state.user;
     },
     closeHovers() {
-      return mutations.closeHovers()
+      return mutations.closeHovers();
     },
   },
   methods: {
@@ -91,7 +91,7 @@ export default {
           .then(() => {
             buttons.success("move");
             this.$router.push({ path: this.dest });
-            mutations.setReload(true)
+            mutations.setReload(true);
           })
           .catch((e) => {
             buttons.done("move");
@@ -115,7 +115,7 @@ export default {
             event.preventDefault();
             mutations.closeHovers();
             action(overwrite, rename);
-            mutations.setReload(true)
+            mutations.setReload(true);
           },
         });
 
diff --git a/frontend/src/components/prompts/Upload.vue b/frontend/src/components/prompts/Upload.vue
index 8fe354dc..a7996d48 100644
--- a/frontend/src/components/prompts/Upload.vue
+++ b/frontend/src/components/prompts/Upload.vue
@@ -9,30 +9,134 @@
     </div>
 
     <div class="card-action full">
-      <div @click="uploadFile" class="action">
+      <div
+        @click="uploadFile"
+        @keypress.enter="uploadFile"
+        class="action"
+        id="focus-prompt"
+        tabindex="1"
+      >
         <i class="material-icons">insert_drive_file</i>
         <div class="title">{{ $t("buttons.file") }}</div>
       </div>
-      <div @click="uploadFolder" class="action">
+      <div
+        @click="uploadFolder"
+        @keypress.enter="uploadFolder"
+        class="action"
+        tabindex="2"
+      >
         <i class="material-icons">folder</i>
         <div class="title">{{ $t("buttons.folder") }}</div>
       </div>
+      <input ref="fileInput" @change="onFilePicked" type="file" style="display: none" />
+      <input
+        ref="folderInput"
+        @change="onFolderPicked"
+        type="file"
+        webkitdirectory
+        directory
+        style="display: none"
+      />
     </div>
   </div>
 </template>
 
 <script>
+import { ref } from "vue";
+import * as upload from "@/utils/upload";
+import { mutations, state, getters } from "@/store";
+
 export default {
-  name: "upload",
-  methods: {
-    uploadFile: function () {
-      document.getElementById("upload-input").value = "";
-      document.getElementById("upload-input").click();
-    },
-    uploadFolder: function () {
-      document.getElementById("upload-folder-input").value = "";
-      document.getElementById("upload-folder-input").click();
-    },
+  name: "UploadFiles",
+  setup() {
+    const fileInput = ref(null);
+    const folderInput = ref(null);
+
+    const triggerFilePicker = () => {
+      fileInput.value.click();
+    };
+
+    const triggerFolderPicker = () => {
+      folderInput.value.click();
+    };
+
+    const onFilePicked = (event) => {
+      handleFiles(event);
+    };
+
+    const onFolderPicked = (event) => {
+      handleFiles(event);
+    };
+
+    const handleFiles = (event) => {
+      mutations.closeHovers();
+      const files = event.target.files;
+      if (!files) return;
+
+      const folderUpload = !!files[0].webkitRelativePath;
+      const uploadFiles = [];
+
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        const fullPath = folderUpload ? file.webkitRelativePath : undefined;
+        uploadFiles.push({
+          file, // File object directly
+          name: file.name,
+          size: file.size,
+          isDir: false,
+          fullPath,
+        });
+      }
+
+      const path = getters.getRoutePath();
+      const conflict = upload.checkConflict(uploadFiles, state.req.items);
+
+      if (conflict) {
+        mutations.showHover({
+          name: "replace",
+          action: (event) => {
+            event.preventDefault();
+            mutations.closeHovers();
+            upload.handleFiles(uploadFiles, path, false);
+          },
+          confirm: (event) => {
+            event.preventDefault();
+            mutations.closeHovers();
+            upload.handleFiles(uploadFiles, path, true);
+          },
+        });
+        return;
+      }
+
+      upload.handleFiles(uploadFiles, path, true);
+      mutations.setReload(true);
+    };
+
+    const openUpload = (isFolder) => {
+      const input = document.createElement("input");
+      input.type = "file";
+      input.multiple = true;
+      input.webkitdirectory = isFolder;
+      input.addEventListener("change", handleFiles);
+      input.click();
+    };
+
+    const uploadFile = () => {
+      openUpload(false);
+    };
+
+    const uploadFolder = () => {
+      openUpload(true);
+    };
+
+    return {
+      triggerFilePicker,
+      triggerFolderPicker,
+      uploadFile,
+      uploadFolder,
+      onFilePicked,
+      onFolderPicked,
+    };
   },
 };
 </script>
diff --git a/frontend/src/components/prompts/UploadFiles.vue b/frontend/src/components/prompts/UploadFiles.vue
deleted file mode 100644
index 8a7a9823..00000000
--- a/frontend/src/components/prompts/UploadFiles.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <div
-    v-if="filesInUploadCount > 0"
-    class="upload-files"
-    v-bind:class="{ closed: !open }"
-  >
-    <div class="card floating">
-      <div class="card-title">
-        <h2>{{ $t("prompts.uploadFiles", { files: filesInUploadCount }) }}</h2>
-
-        <button
-          class="action"
-          @click="toggle"
-          aria-label="Toggle file upload list"
-          title="Toggle file upload list"
-        >
-          <i class="material-icons">{{
-            open ? "keyboard_arrow_down" : "keyboard_arrow_up"
-          }}</i>
-        </button>
-      </div>
-
-      <div class="card-content file-icons">
-        <div
-          class="file"
-          v-for="file in filesInUpload"
-          :key="file.id"
-          :data-dir="file.isDir"
-          :data-type="file.type"
-          :aria-label="file.name"
-        >
-          <div class="file-name"><i class="material-icons"></i> {{ file.name }}</div>
-          <div class="file-progress">
-            <div v-bind:style="{ width: file.progress + '%' }"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { getters } from "@/store"; // Import your custom store
-
-export default {
-  name: "uploadFiles",
-  data() {
-    return {
-      open: false,
-    };
-  },
-  computed: {
-    filesInUpload() {
-      return getters.filesInUpload(); // Access the getter directly from the store
-    },
-    filesInUploadCount() {
-      return getters.filesInUploadCount(); // Access the getter directly from the store
-    },
-  },
-  methods: {
-    toggle() {
-      this.open = !this.open;
-    },
-  },
-};
-</script>
diff --git a/frontend/src/components/settings/Languages.vue b/frontend/src/components/settings/Languages.vue
index 6e2f7903..7591adb6 100644
--- a/frontend/src/components/settings/Languages.vue
+++ b/frontend/src/components/settings/Languages.vue
@@ -1,12 +1,12 @@
 <template>
-  <select v-on:change="change" :value="locale">
+  <select @change="change" :value="locale">
     <option v-for="(value, label) in locales" :key="label" :value="label">
       {{ $t("languages." + label) }}
     </option>
   </select>
 </template>
 
-<script lang="ts">
+<script>
 import { defineComponent } from "vue";
 
 export default defineComponent({
@@ -47,8 +47,8 @@ export default defineComponent({
     };
   },
   methods: {
-    change(event: Event) {
-      const target = event.target as HTMLSelectElement;
+    change(event) {
+      const target = event.target;
       this.$emit("update:locale", target.value);
     },
   },
diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css
index 3b846da2..059f87fb 100644
--- a/frontend/src/css/base.css
+++ b/frontend/src/css/base.css
@@ -1,4 +1,12 @@
 /* Basic Styles */
+:root {
+  --background: white;
+  --surfacePrimary: gray;
+  --surfaceSecondary: lightgray;
+  --textPrimary: white;
+  --textSecondary: gray;
+}
+
 body {
   font-family: "Roboto", sans-serif;
   padding-top: 4em;
@@ -66,57 +74,6 @@ over
   padding-bottom: 4em;
 }
 
-/* Navigation Styles */
-nav {
-  width: 18em;
-  position: fixed;
-  top: 0;
-  padding-top: 4em;
-  left: -19em;
-  z-index: 4;
-  background: #fff;
-  height: 100%;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  transition: .1s ease left;
-}
-
-body.rtl nav {
-  left: unset;
-  right: -17em;
-}
-
-nav.active {
-  left: 0;
-}
-
-body.rtl nav.active {
-  left: unset;
-  right: 0;
-}
-
-nav > div {
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-nav .action {
-  width: 100%;
-  display: block;
-  border-radius: 0;
-  font-size: 1.1em;
-  padding: 0.5em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-body.rtl .action {
-  direction: rtl;
-  text-align: right;
-}
-
-nav .action > * {
-  vertical-align: middle;
-}
 
 /* Main Content */
 main {
@@ -188,22 +145,6 @@ body.rtl .breadcrumbs a {
 
 
 
-/* File Selection */
-#file-selection {
-  box-shadow: rgba(0, 0, 0, 0.3) 0px 2em 50px 10px;
-  position: fixed;
-  bottom: 1em;
-  left: 50%;
-  transform: translateX(-50%);
-  align-items: center;
-  background: #fff;
-  max-width: 30em;
-  z-index: 1;
-  border-radius: 1em;
-  display: flex;
-  width: 90%;
-}
-
 button {
   flex: 1;
   height: 3em;
@@ -211,31 +152,13 @@ button {
   border: none;
   background-color: #f5f5f5;
   transition: background-color 0.3s;
-
   /* Add borders */
   border-right: 1px solid #ccc;
 }
 
-@media (min-width: 800px) {
-  #file-selection {
-    bottom: 4em;
-  }
-}
-
-#file-selection .action {
-  border-radius: 50%;
-  width: auto;
-}
-
-#file-selection > span {
-  display: inline-block;
-  margin-left: 1em;
-  color: #6f6f6f;
-  margin-right: auto;
-}
-
-#file-selection .action span {
-  display: none;
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 #popup-notification {
diff --git a/frontend/src/css/dark.css b/frontend/src/css/dark.css
index 1051fdba..a5d5e7bd 100644
--- a/frontend/src/css/dark.css
+++ b/frontend/src/css/dark.css
@@ -226,15 +226,6 @@
   background: var(--surfaceSecondary) !important;
 }
 
-/* File selection */
-.dark-mode #file-selection {
-  background: var(--surfaceSecondary) !important;
-}
-
-.dark-mode #file-selection span {
-  color: var(--textPrimary) !important;
-}
-
 /* Dropdown */
 .dark-mode #dropdown {
   background: var(--surfaceSecondary) !important;
diff --git a/frontend/src/css/dashboard.css b/frontend/src/css/dashboard.css
index 8bb574ea..4600aa43 100644
--- a/frontend/src/css/dashboard.css
+++ b/frontend/src/css/dashboard.css
@@ -300,11 +300,9 @@ body.rtl .card .card-title>*:first-child {
 .overlay {
   background-color: rgba(0, 0, 0, 0.5);
   position: fixed;
-  top: 4em;
-  left: 0;
   height: 100%;
   width: 100%;
-  z-index: 3;
+  z-index: 4;
   animation: .3s show ease-in;
 }
 
diff --git a/frontend/src/css/listing.css b/frontend/src/css/listing.css
index 9f5a8cbe..d20eb241 100644
--- a/frontend/src/css/listing.css
+++ b/frontend/src/css/listing.css
@@ -237,7 +237,6 @@ body.rtl #listingView {
 #listingView.compact .header,
 #listingView.list .header {
   border: 1px solid rgba(0, 0, 0, .1);
-  border-color: var(--divider);
 }
 
 #listingView.compact .header>div:first-child {
@@ -315,8 +314,9 @@ body.rtl #listingView {
 
 #listingView .header {
   display: none;
-  background: var(--surfacePrimary);
+  background: white;
   border-radius: 1em;
+  border: 1px solid rgba(0, 0, 0, .1);
 }
 
 #listingView.list .header i {
@@ -334,9 +334,7 @@ body.rtl #listingView {
   padding: .85em;
   width: 100%;
 }
-#listingView.compact .header {
 
-}
 #listingView.list .item:first-child {
   margin-top: .5em;
   border-top-left-radius: 1em;
diff --git a/frontend/src/css/styles.css b/frontend/src/css/styles.css
index b4b8eb5f..5f1c9d5a 100644
--- a/frontend/src/css/styles.css
+++ b/frontend/src/css/styles.css
@@ -8,7 +8,6 @@
 @import "./header.css";
 @import "./listing.css";
 @import "./listing-icons.css";
-@import "./upload-files.css";
 @import "./dashboard.css";
 @import "./login.css";
 @import './mobile.css';
@@ -90,7 +89,7 @@ main .spinner .bounce2 {
   border-radius: 50%;
 }
 
-.action:hover {
+.action:not(:disabled):hover {
   background-color: rgba(0, 0, 0, .1);
 }
 
@@ -305,44 +304,6 @@ body.rtl .breadcrumbs .chevron {
   font-size: 1rem;
 }
 
-/* * * * * * * * * * * * * * * *
- *            PROMPT           *
- * * * * * * * * * * * * * * * */
-
-.noty_buttons {
-  text-align: right;
-  padding: 0 10px 10px !important;
-}
-
-.noty_buttons button {
-  background: rgba(0, 0, 0, 0.05);
-  border: 1px solid rgba(0,0,0,0.1);
-  box-shadow: 0 0 0 0;
-  font-size: 1rem;
-}
-
-/* * * * * * * * * * * * * * * *
- *            FOOTER           *
- * * * * * * * * * * * * * * * */
-
-.credits {
-  font-size: 1em;
-  color: #a5a5a5;
-  padding: 1em;
-}
-
-.credits > span {
-  display: block;
-  margin-top: .5em;
-  margin-left: 0;
-}
-
-.credits a,
-.credits a:hover {
-  color: inherit;
-  cursor: pointer;
-}
-
 
 /* * * * * * * * * * * * * * * *
  *          ANIMATIONS         *
diff --git a/frontend/src/css/upload-files.css b/frontend/src/css/upload-files.css
deleted file mode 100644
index ce864182..00000000
--- a/frontend/src/css/upload-files.css
+++ /dev/null
@@ -1,61 +0,0 @@
-.upload-files .card.floating {
-  left: auto;
-  top: auto;
-  margin: 0;
-  right: 0;
-  bottom: 0;
-  transform: none;
-}
-
-.upload-files .file {
-  margin-bottom: 8px;
-}
-
-.upload-files .file .file-name {
-  font-size: 1.1em;
-  display: flex;
-  align-items: center;
-}
-
-.upload-files .file .file-name i {
-  margin-right: 5px;
-}
-
-.upload-files .file .file-progress {
-  margin-top: 2px;
-  width: 100%;
-  height: 5px;
-}
-
-.upload-files .file .file-progress div {
-  height: 100%;
-  background-color: #40c4ff;
-  width: 0;
-  transition: 0.2s ease width;
-  border-radius: 10px;
-}
-
-.upload-files.closed .card-content {
-  display: none;
-  padding: 0em 1em 1em 1em;
-}
-
-.upload-files .card .card-title {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.8em;
-  padding: 1em 1em 0em;
-}
-
-.upload-files.closed .card-title {
-  font-size: 0.7em;
-  padding: 0.5em 1em;
-}
-
-@media (max-width: 450px) {
-  .upload-files .card.floating {
-    max-width: 100%;
-    width: 100%;
-  }
-}
diff --git a/frontend/src/store/getters.js b/frontend/src/store/getters.js
index b7ec8acf..08809e24 100644
--- a/frontend/src/store/getters.js
+++ b/frontend/src/store/getters.js
@@ -1,13 +1,16 @@
 import { state } from "./state.js";
 
 export const getters = {
+  isMobile: () => window.innerWidth <= 800,
   isDarkMode: () => {
     if (state.user == null) {
       return true;
     }
     return state.user.darkMode === true;
   },
-  isLoggedIn: () => state.user !== null,
+  isLoggedIn: () => {
+    return state.user !== null && state.user?.username != undefined && state.user?.username != "publicUser";
+  },
   isAdmin: () => state.user.perm?.admin == true,
   isFiles: () => state.route.name === "Files",
   isListing: () => getters.isFiles() && state.req.isDir,
@@ -17,6 +20,20 @@ export const getters = {
     let selectedItem = state.selected[0]
     return state.req.items[selectedItem].url;
   },
+  isSidebarVisible: () => {
+    if (!getters.isLoggedIn()) {
+      return false
+    }
+    return state.showSidebar || state.user.stickySidebar
+  },
+  showOverlay: () => {
+    if (!getters.isLoggedIn()) {
+      return false
+    }
+    const hasPrompt = getters.currentPrompt() !== null && getters.currentPromptName() !== "more";
+    const sidebarHover = (!state.user.stickySidebar && state.showSidebar) || getters.isMobile();
+    return hasPrompt || sidebarHover;
+  },
   getRoutePath: () => {
     return state.route.path.endsWith("/")
     ? state.route.path
@@ -57,10 +74,8 @@ export const getters = {
   },
 
   filesInUploadCount: () => {
-    // Ensure state.upload.uploads is an object and state.upload.queue is an array
-    const uploadsCount = typeof state.upload.uploads === 'object' ? Object.keys(state.upload.uploads).length : 0;
-    const queueCount = Array.isArray(state.upload.queue) ? state.upload.queue.length : 0;
-
+    const uploadsCount = state.upload.length
+    const queueCount = state.queue.length
     return uploadsCount + queueCount;
   },
 
diff --git a/frontend/src/store/mutations.js b/frontend/src/store/mutations.js
index 368bb2aa..1d355f83 100644
--- a/frontend/src/store/mutations.js
+++ b/frontend/src/store/mutations.js
@@ -1,8 +1,32 @@
 import * as i18n from "@/i18n";
 import { state } from "./state.js";
 import { emitStateChanged } from './eventBus'; // Import the function from eventBus.js
+import { users } from "@/api";
 
 export const mutations = {
+  toggleDarkMode() {
+    mutations.updateUser({ "darkMode": !state.user.darkMode });
+    emitStateChanged();
+  },
+  toggleSidebar() {
+    if (!state.showSidebar && state.user.stickySidebar) {
+      state.user.stickySidebar = false;
+      mutations.updateUser({ "stickySidebar": false }); // turn off sticky when closed
+      return
+    }
+    state.showSidebar = !state.showSidebar;
+    emitStateChanged();
+  },
+  closeSidebar() {
+    if (state.showSidebar) {
+      state.showSidebar = false;
+      emitStateChanged();
+    }
+  },
+  setUpload(value) {
+    state.upload = value;
+    emitStateChanged();
+  },
   setUsage: (value) => {
     state.usage = value;
     emitStateChanged();
@@ -53,12 +77,14 @@ export const mutations = {
     }
 
     let locale = value.locale;
-    if (locale === "") {
-      locale = i18n.detectLocale();
+    if (locale === "") {      
+      value.locale = i18n.detectLocale();
     }
-    i18n.setLocale(locale);
-    i18n.default.locale = locale;
+    let previousUser = state.user
     state.user = value;
+    if (state.user != previousUser && state.user.username != "publicUser") {
+      users.update(state.user);
+    }
     emitStateChanged();
   },
   setJWT: (value) => {
@@ -93,11 +119,15 @@ export const mutations = {
     if (state.user === null) {
       state.user = {};
     }
-    for (let field in value) {
-      if (field === "locale") {
-        i18n.setLocale(value[field]);
-      }
-      state.user[field] = value[field];
+    let previousUser = state.user;
+    state.user = { ...state.user, ...value };
+    if (state.user.locale !== previousUser.locale) {
+      state.user.locale = i18n.detectLocale();
+      i18n.setLocale(state.user.locale);
+      i18n.default.locale = state.user.locale;
+    }
+    if (state.user != previousUser) {
+      users.update(state.user);
     }
     emitStateChanged();
   },
@@ -106,7 +136,6 @@ export const mutations = {
     state.oldReq = state.req;
     state.req = value;
     state.selected = [];
-
     if (!state.req?.items) return;
     state.selected = state.req.items
       .filter((item) => selectedItems.some((rItem) => rItem.url === item.url))
diff --git a/frontend/src/store/state.js b/frontend/src/store/state.js
index 0579ebb6..d6c637da 100644
--- a/frontend/src/store/state.js
+++ b/frontend/src/store/state.js
@@ -2,6 +2,7 @@ import { reactive } from 'vue';
 import { detectLocale } from "@/i18n";
 
 export const state = reactive({
+  showSidebar: false,
   usage: {
     used: "0 B",
     total: "0 B",
@@ -9,6 +10,7 @@ export const state = reactive({
   },
   editor: null,
   user: {
+    stickySidebar: false,
     locale: detectLocale(), // Default to the locale from moment
     viewMode: 'mosaic', // Default to mosaic view
     hideDotfiles: false, // Default to false, assuming this is a boolean
@@ -37,18 +39,18 @@ export const state = reactive({
     items: [],
   },
   jwt: "",
-  progress: 0,
   loading: false,
   reload: false,
   selected: [],
   multiple: false,
   upload: {
-    progress: [], // Array of progress values
-    sizes: [],    // Array of sizes
+    uploads: {},
+    queue: [],
+    progress: [],
+    sizes: [],
   },
   prompts: [],
   show: null,
-  showShell: false,
   showConfirm: null,
   route: {},
 });
diff --git a/frontend/src/utils/upload.js b/frontend/src/utils/upload.js
index 65954776..3e352c11 100644
--- a/frontend/src/utils/upload.js
+++ b/frontend/src/utils/upload.js
@@ -1,5 +1,6 @@
 import { state } from "@/store";
 import url from "@/utils/url";
+import { files as api } from "@/api";
 
 export function checkConflict(files, items) {
   if (typeof items === "undefined" || items === null) {
@@ -101,10 +102,9 @@ export function scanFiles(dt) {
 }
 
 export function handleFiles(files, base, overwrite = false) {
-  for (let i = 0; i < files.length; i++) {
-    let id = state.upload.id;
+  for (const file of files) {
+    const id = state.upload.id;
     let path = base;
-    let file = files[i];
 
     if (file.fullPath !== undefined) {
       path += url.encodePath(file.fullPath);
@@ -119,11 +119,19 @@ export function handleFiles(files, base, overwrite = false) {
     const item = {
       id,
       path,
-      file,
+      file: file.file, // Ensure `file.file` is the Blob or File
       overwrite,
-      ...(!file.isDir && { type: file.type }),
     };
 
-    state.dispatch("upload/upload", item);
+    // Upload the file using your API
+    api.post(item.path, item.file, item.overwrite, (event) => {
+      console.log(`Upload progress: ${Math.round((event.loaded / event.total) * 100)}%`);
+    })
+    .then(response => {
+      console.log("Upload successful:", response);
+    })
+    .catch(error => {
+      console.error("Upload error:", error);
+    });
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/views/Files.vue b/frontend/src/views/Files.vue
index 23ca04c2..5db3fc3e 100644
--- a/frontend/src/views/Files.vue
+++ b/frontend/src/views/Files.vue
@@ -15,6 +15,7 @@
     </div>
   </div>
 </template>
+
 <script>
 import { files as api } from "@/api";
 
@@ -49,7 +50,7 @@ export default {
       return getters.currentView() !== null;
     },
     reload() {
-      return state.reload; // Access reload from state
+      return state.reload;
     },
   },
   created() {
@@ -58,8 +59,8 @@ export default {
   watch: {
     $route: "fetchData",
     reload(value) {
-      if (value === true) {
-        console.log("reloading")
+      if (value) {
+        console.log("reloading");
         this.fetchData();
       }
     },
@@ -78,16 +79,16 @@ export default {
   },
   methods: {
     async fetchData() {
+      // Set loading to true and reset the error.
+      mutations.setLoading(true);
+      this.error = null;
+
       // Reset view information using mutations
       mutations.setReload(false);
       mutations.resetSelected();
       mutations.setMultiple(false);
       mutations.closeHovers();
 
-      // Set loading to true and reset the error.
-      mutations.setLoading(true);
-      this.error = null;
-
       let url = state.route.path;
       if (url === "") url = "/";
       if (url[0] !== "/") url = "/" + url;
@@ -106,9 +107,10 @@ export default {
         }
       } catch (e) {
         this.error = e;
+      } finally {
+        mutations.setLoading(false);
+        mutations.replaceRequest(data);
       }
-      mutations.setLoading(false);
-      mutations.replaceRequest(data);
     },
     keyEvent(event) {
       // F1!
diff --git a/frontend/src/views/Layout.vue b/frontend/src/views/Layout.vue
index d3e7a7e5..a4f85bc1 100644
--- a/frontend/src/views/Layout.vue
+++ b/frontend/src/views/Layout.vue
@@ -1,4 +1,4 @@
-<template>
+<template v-if="isLoggedIn">
   <div>
     <div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
     <div v-if="progress" class="progress">
@@ -14,16 +14,17 @@
     ></editorBar>
     <defaultBar :class="{ 'dark-mode-header': isDarkMode }" v-else></defaultBar>
     <sidebar></sidebar>
-    <main :class="{ 'dark-mode': isDarkMode }">
+    <search v-if="currentView == 'listingView'"></search>
+    <main :class="{ 'dark-mode': isDarkMode, moveWithSidebar: moveWithSidebar }">
       <router-view></router-view>
     </main>
     <prompts :class="{ 'dark-mode': isDarkMode }"></prompts>
-    <upload-files></upload-files>
   </div>
   <div class="card" id="popup-notification">
     <i v-on:click="closePopUp" class="material-icons">close</i>
     <div id="popup-notification-content">no info</div>
   </div>
+  <fileSelection> </fileSelection>
 </template>
 <script>
 import editorBar from "./bars/EditorBar.vue";
@@ -31,7 +32,9 @@ import defaultBar from "./bars/Default.vue";
 import listingBar from "./bars/ListingBar.vue";
 import Prompts from "@/components/prompts/Prompts.vue";
 import Sidebar from "@/components/Sidebar.vue";
-import UploadFiles from "../components/prompts/UploadFiles.vue";
+import Search from "@/components/Search.vue";
+import fileSelection from "@/components/FileSelection.vue";
+
 import { closePopUp } from "@/notify";
 import { enableExec } from "@/utils/constants";
 import { state, getters, mutations } from "@/store";
@@ -39,12 +42,13 @@ import { state, getters, mutations } from "@/store";
 export default {
   name: "layout",
   components: {
+    fileSelection,
+    Search,
     defaultBar,
     editorBar,
     listingBar,
     Sidebar,
     Prompts,
-    UploadFiles,
   },
   data() {
     return {
@@ -55,6 +59,14 @@ export default {
     };
   },
   computed: {
+    isLoggedIn() {
+      return getters.isLoggedIn();
+    },
+    moveWithSidebar() {
+      return (
+        getters.isSidebarVisible() && !getters.isMobile() && state.user?.stickySidebar
+      );
+    },
     closePopUp() {
       return closePopUp;
     },
@@ -77,7 +89,7 @@ export default {
       return state.user; // Access state directly from the store
     },
     showOverlay() {
-      return getters.currentPrompt() !== null && getters.currentPromptName() !== "more";
+      return getters.showOverlay();
     },
     isDarkMode() {
       return getters.isDarkMode();
@@ -91,6 +103,9 @@ export default {
   },
   watch: {
     $route() {
+      if (!getters.isLoggedIn()) {
+        return;
+      }
       mutations.resetSelected();
       mutations.setMultiple(false);
       if (getters.currentPromptName() !== "success") {
@@ -100,6 +115,7 @@ export default {
   },
   methods: {
     resetPrompts() {
+      mutations.closeSidebar();
       mutations.closeHovers();
     },
     getTitle() {
@@ -117,7 +133,13 @@ export default {
 main {
   -ms-overflow-style: none; /* Internet Explorer 10+ */
   scrollbar-width: none; /* Firefox */
+  transition: 0.5s ease;
 }
+
+main.moveWithSidebar {
+  padding-left: 21em;
+}
+
 main::-webkit-scrollbar {
   display: none; /* Safari and Chrome */
 }
diff --git a/frontend/src/views/Share.vue b/frontend/src/views/Share.vue
index 1db95794..6bca0d16 100644
--- a/frontend/src/views/Share.vue
+++ b/frontend/src/views/Share.vue
@@ -259,13 +259,10 @@ export default {
       // Set loading to true and reset the error.
       mutations.setLoading(true);
       this.error = null;
-
       // Reset view information.
-      if (state.user == undefined) {
+      if (!getters.isLoggedIn()) {
         let userData = await api.getPublicUser();
-        let req = state.req;
-        req.user = userData;
-        mutations.replaceRequest(req);
+        mutations.setUser(userData);
       }
       mutations.setReload(false);
       mutations.resetSelected();
@@ -276,17 +273,12 @@ export default {
       if (url === "") url = "/";
       if (url[0] !== "/") url = "/" + url;
 
-      try {
-        let file = await api.fetchPub(url, this.password);
-        file.hash = this.hash;
-        this.token = file.token || "";
-        mutations.updateRequest(file);
-        document.title = `${file.name} - ${document.title}`;
-      } catch (e) {
-        this.error = e;
-      } finally {
-        mutations.setLoading(false);
-      }
+      let file = await api.fetchPub(url, this.password);
+      file.hash = this.hash;
+      this.token = file.token || "";
+      mutations.updateRequest(file);
+      document.title = `${file.name} - ${document.title}`;
+      mutations.setLoading(false);
     },
     keyEvent(event) {
       // Esc!
diff --git a/frontend/src/views/bars/Default.vue b/frontend/src/views/bars/Default.vue
index 7a43e7f3..041fb650 100644
--- a/frontend/src/views/bars/Default.vue
+++ b/frontend/src/views/bars/Default.vue
@@ -221,13 +221,6 @@ export default {
       let uri = url.removeLastDir(state.route.path) + "/";
       this.$router.push({ path: uri });
     },
-    toggleSidebar() {
-      if (state.show == "sidebar") {
-        mutations.closeHovers();
-      } else {
-        mutations.showHover("sidebar");
-      }
-    },
     base64(name) {
       return window.btoa(unescape(encodeURIComponent(name)));
     },
diff --git a/frontend/src/views/bars/ListingBar.vue b/frontend/src/views/bars/ListingBar.vue
index 63767590..72f0d6c6 100644
--- a/frontend/src/views/bars/ListingBar.vue
+++ b/frontend/src/views/bars/ListingBar.vue
@@ -5,13 +5,14 @@
       icon="menu"
       :label="$t('buttons.toggleSidebar')"
       @action="toggleSidebar()"
+      :disabled="showOverlay"
     />
-    <search />
     <action
       class="menu-button"
       icon="grid_view"
       :label="$t('buttons.switchView')"
       @action="switchView"
+      :disabled="showOverlay"
     />
   </header>
 </template>
@@ -25,16 +26,13 @@
 </style>
 <script>
 import { state, mutations, getters } from "@/store";
-import { users, files as api } from "@/api";
 import Action from "@/components/header/Action.vue";
-import Search from "@/components/Search.vue";
 import { showError } from "@/notify";
 
 export default {
   name: "listingView",
   components: {
     Action,
-    Search,
   },
   data: function () {
     return {
@@ -43,6 +41,9 @@ export default {
     };
   },
   computed: {
+    showOverlay() {
+      return getters.currentPrompt() !== null && getters.currentPromptName() !== "more";
+    },
     viewIcon() {
       const icons = {
         list: "view_module",
@@ -71,21 +72,15 @@ export default {
       }
     },
     toggleSidebar() {
-      if (getters.currentPromptName() === "sidebar") {
-        mutations.closeHovers();
-      } else {
-        mutations.showHover("sidebar");
-      }
+      mutations.toggleSidebar();
     },
     async switchView() {
       mutations.closeHovers();
       const currentIndex = this.viewModes.indexOf(state.user.viewMode);
       const nextIndex = (currentIndex + 1) % this.viewModes.length;
-      let data = state.user;
-      data.viewMode = this.viewModes[nextIndex];
+      const newView = this.viewModes[nextIndex];
       try {
-        users.update(data, ["viewMode"]);
-        mutations.setUser(data);
+        mutations.updateUser({ viewMode: newView });
       } catch (e) {
         showError(e);
       }
diff --git a/frontend/src/views/files/ListingView.vue b/frontend/src/views/files/ListingView.vue
index 155098d4..02156302 100644
--- a/frontend/src/views/files/ListingView.vue
+++ b/frontend/src/views/files/ListingView.vue
@@ -1,60 +1,5 @@
 <template>
   <div style="padding-bottom: 5em">
-    <div v-if="selectedCount > 0" id="file-selection">
-      <span>{{ selectedCount }} selected</span>
-      <div>
-        <action
-          v-if="headerButtons.select"
-          icon="info"
-          :label="$t('buttons.info')"
-          show="info"
-        />
-        <action
-          v-if="headerButtons.select"
-          icon="check_circle"
-          :label="$t('buttons.selectMultiple')"
-          @action="toggleMultipleSelection"
-        />
-        <action
-          v-if="headerButtons.download"
-          icon="file_download"
-          :label="$t('buttons.download')"
-          @action="download"
-          :counter="selectedCount"
-        />
-        <action
-          v-if="headerButtons.share"
-          icon="share"
-          :label="$t('buttons.share')"
-          show="share"
-        />
-        <action
-          v-if="headerButtons.rename"
-          icon="mode_edit"
-          :label="$t('buttons.rename')"
-          show="rename"
-        />
-        <action
-          v-if="headerButtons.copy"
-          icon="content_copy"
-          :label="$t('buttons.copyFile')"
-          show="copy"
-        />
-        <action
-          v-if="headerButtons.move"
-          icon="forward"
-          :label="$t('buttons.moveFile')"
-          show="move"
-        />
-        <action
-          v-if="headerButtons.delete"
-          icon="delete"
-          :label="$t('buttons.delete')"
-          show="delete"
-        />
-      </div>
-    </div>
-
     <div v-if="loading">
       <h2 class="message delayed">
         <div class="spinner">
@@ -94,7 +39,7 @@
         :class="listingViewMode + ' file-icons'"
       >
         <div>
-          <div class="header">
+          <div class="header" :class="{ 'dark-mode-item-header': isDarkMode }" >
               <p
                 :class="{ active: nameSorted }"
                 class="name"
@@ -209,13 +154,7 @@
   </div>
 </template>
 
-<style>
-.header-items {
-  width: 100% !important;
-  max-width: 100% !important;
-  justify-content: center;
-}
-</style>
+
 <script>
 import { files as api } from "@/api";
 import * as upload from "@/utils/upload";
@@ -224,12 +163,10 @@ import throttle from "@/utils/throttle";
 import { state, mutations, getters } from "@/store";
 import { showError } from "@/notify";
 
-import Action from "@/components/header/Action.vue";
 import Item from "@/components/files/ListingItem.vue";
 export default {
   name: "listingView",
   components: {
-    Action,
     Item,
   },
   data() {
@@ -241,6 +178,9 @@ export default {
     };
   },
   computed: {
+    isDarkMode() {
+      return state.user?.darkMode;
+    },
     getMultiple() {
       return state.multiple;
     },
@@ -321,18 +261,7 @@ export default {
     listingViewMode() {
       return state.user?.viewMode;
     },
-    headerButtons() {
-      return {
-        select: state.selected.length > 0,
-        upload: state.user.perm?.create && state.selected.length > 0,
-        download: state.user.perm.download && state.selected.length > 0,
-        delete: state.selected.length > 0 && state.user.perm.delete,
-        rename: state.selected.length === 1 && state.user.perm.rename,
-        share: state.selected.length === 1 && state.user.perm.share,
-        move: state.selected.length > 0 && state.user.perm.rename,
-        copy: state.selected.length > 0 && state.user.perm?.create,
-      };
-    },
+
     selectedCount() {
       return state.selected.length;
     },
@@ -637,38 +566,12 @@ export default {
     openSearch() {
       this.currentPrompt = "search";
     },
-    toggleMultipleSelection() {
-      mutations.setMultiple(!state.multiple);
-      mutations.closeHovers();
-    },
     windowsResize: throttle(function () {
       this.colunmsResize();
       this.width = window.innerWidth;
       // Listing element is not displayed
       if (this.$refs.listingView == null) return;
     }, 100),
-    download() {
-      if (getters.isSingleFileSelected()) {
-        api.download(null, getters.selectedDownloadUrl());
-        return;
-      }
-      mutations.showHover({
-        name: "download",
-        confirm: (format) => {
-          mutations.closeHovers();
-          let files = [];
-          if (state.selected.length > 0) {
-            for (let i of state.selected) {
-              files.push(state.req.items[i].url);
-            }
-          } else {
-            files.push(state.route.path);
-          }
-
-          api.download(format, ...files);
-        },
-      });
-    },
     upload() {
       if (
         typeof window.DataTransferItem !== "undefined" &&
@@ -682,3 +585,15 @@ export default {
   },
 };
 </script>
+
+<style>
+.dark-mode-item-header {
+  border-color: var(--divider) !important;
+  background: var(--surfacePrimary) !important;
+}
+.header-items {
+  width: 100% !important;
+  max-width: 100% !important;
+  justify-content: center;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/files/Preview.vue b/frontend/src/views/files/Preview.vue
index fa500533..3e5a5b1a 100644
--- a/frontend/src/views/files/Preview.vue
+++ b/frontend/src/views/files/Preview.vue
@@ -155,6 +155,9 @@ export default {
   },
   watch: {
     $route() {
+      if (!getters.isLoggedIn()) {
+        return;
+      }
       this.updatePreview();
       this.toggleNavigation();
     },
diff --git a/frontend/src/views/settings/Profile.vue b/frontend/src/views/settings/Profile.vue
index 1baf5e2d..63307e0e 100644
--- a/frontend/src/views/settings/Profile.vue
+++ b/frontend/src/views/settings/Profile.vue
@@ -85,7 +85,7 @@
 <script>
 import { showSuccess, showError } from "@/notify";
 import { state, mutations } from "@/store";
-import { users as api } from "@/api";
+import { users } from "@/api";
 import Languages from "@/components/settings/Languages.vue";
 import ViewMode from "@/components/settings/ViewMode.vue";
 import i18n, { rtlLanguages } from "@/i18n";
@@ -135,6 +135,16 @@ export default {
     this.singleClick = state.user.singleClick;
     this.dateFormat = state.user.dateFormat;
   },
+  watch: {
+    user() {
+      this.darkMode = state.user.darkMode;
+      this.locale = state.user.locale;
+      this.viewMode = state.user.viewMode;
+      this.hideDotfiles = state.user.hideDotfiles;
+      this.singleClick = state.user.singleClick;
+      this.dateFormat = state.user.dateFormat;
+    },
+  },
   methods: {
     async updatePassword(event) {
       event.preventDefault();
@@ -147,8 +157,7 @@ export default {
         let newUserSettings = state.user;
         newUserSettings.id = state.user.id;
         newUserSettings.password = this.password;
-        await api.update(newUserSettings, ["password"]);
-        muations.updateUser(newUserSettings);
+        await users.update(newUserSettings, ["password"]);
         showSuccess(this.$t("settings.passwordUpdated"));
       } catch (e) {
         showError(e);
@@ -168,7 +177,7 @@ export default {
         };
         const shouldReload =
           rtlLanguages.includes(data.locale) !== rtlLanguages.includes(i18n.locale);
-        await api.update(data, [
+        await users.update(data, [
           "locale",
           "darkMode",
           "viewMode",
diff --git a/makefile b/makefile
index a5f0737c..f627b4e2 100644
--- a/makefile
+++ b/makefile
@@ -1,5 +1,8 @@
 setup:
 	cd frontend && npm i
+	if [ ! -f backend/test__config.yaml ]; then \
+		cp backend/filebrowser.yaml backend/test_config.yaml; \
+	fi
 
 build:
 	docker build -t gtstef/filebrwoser .
@@ -8,7 +11,7 @@ dev:
 	# Kill processes matching exe/filebrowser, ignore errors if process does not exist
 	-pkill -f "exe/filebrowser" || true
 	# Start backend and frontend concurrently
-	cd backend && go run . & BACKEND_PID=$$!; \
+	cd backend && go run . -c test_config.yaml & BACKEND_PID=$$!; \
 	cd frontend && npm run watch & FRONTEND_PID=$$!; \
 	wait $$BACKEND_PID $$FRONTEND_PID
 
diff --git a/roadmap.md b/roadmap.md
index b5295380..1c1f1c66 100644
--- a/roadmap.md
+++ b/roadmap.md
@@ -1,22 +1,19 @@
 # Planned Roadmap
 
-Next version (v0.2.7) :
+Next version :
 
-- Replace http routes for gorilla/mux
-- Replace vue-router with simple vanilla js
 - Theme configuration from settings
-- Replace afero requests with std library
 - Add Job status to the sidebar
   - index status.
-  - new jobs as they come
+  - new jobs as they come via pocketbase
 
 Future releases:
-
- - Allow multiple volumes to show up in the same filebrowser container. https://github.com/filebrowser/filebrowser/issues/2514
- - enable/disable indexing for certain mounts
- - Add tools to sidebar
-   - duplicate file detector.
-   - bulk rename https://github.com/filebrowser/filebrowser/issues/2473
-   - job manager - folder sync, copy, lifecycle operations
-   - metrics tracker - user access, file access, download count, last login, etc
- - support minio s3 and backblaze sources https://github.com/filebrowser/filebrowser/issues/2544
+  - Replace http routes for gorilla/mux with pocketbase
+  - Allow multiple volumes to show up in the same filebrowser container. https://github.com/filebrowser/filebrowser/issues/2514
+  - enable/disable indexing for certain mounts
+  - Add tools to sidebar
+    - duplicate file detector.
+    - bulk rename https://github.com/filebrowser/filebrowser/issues/2473
+    - job manager - folder sync, copy, lifecycle operations
+    - metrics tracker - user access, file access, download count, last login, etc
+  - support minio s3 and backblaze sources https://github.com/filebrowser/filebrowser/issues/2544