diff --git a/backend/search/indexing.go b/backend/search/indexing.go
index c11ac4ed..4b9f0b43 100644
--- a/backend/search/indexing.go
+++ b/backend/search/indexing.go
@@ -184,6 +184,7 @@ func containsSearchTerm(pathName string, searchTerm string, options searchOption
 		fileTypes 				:= map[string]bool{}
 		fileSize				:= getFileSize(pathName)
 		matchesCondition 		:= false
+		matchesAllConditions	:= true
 		extension 				:= filepath.Ext(strings.ToLower(path))
 		mimetype 				:= mime.TypeByExtension(extension)
 		fileTypes["audio"] 		= strings.HasPrefix(mimetype, "audio")
@@ -192,7 +193,7 @@ func containsSearchTerm(pathName string, searchTerm string, options searchOption
 		fileTypes["doc"] 		= isDoc(extension)
 		fileTypes["archive"] 	= isArchive(extension)
 		fileTypes["dir"]		= isDir
-		anyFilter 				:= false
+
 		for t,v := range conditions {
 			switch t {
 			case "exact"	: continue
@@ -200,12 +201,12 @@ func containsSearchTerm(pathName string, searchTerm string, options searchOption
 			case "smaller"	: matchesCondition = fileSize < int64(options.Size) * 1000000
 			default			: matchesCondition = v == fileTypes[t]
 			}
-			anyFilter = true
+			if (!matchesCondition) {
+				matchesAllConditions = false
+			}
 		}
-		if !anyFilter {
-			matchesCondition = true
-		}
-		return matchesCondition, fileTypes
+
+		return matchesAllConditions, fileTypes
 	}
 	return false, map[string]bool{}
 }
diff --git a/frontend/src/components/Search.vue b/frontend/src/components/Search.vue
index c4823010..e0e1bdc1 100644
--- a/frontend/src/components/Search.vue
+++ b/frontend/src/components/Search.vue
@@ -1,26 +1,12 @@
 <template>
   <div id="search" @click="open" v-bind:class="{ active, ongoing }">
     <div id="input">
-      <button
-        v-if="active"
-        class="action"
-        @click="close"
-        :aria-label="$t('buttons.close')"
-        :title="$t('buttons.close')"
-      >
+      <button v-if="active" class="action" @click="close" :aria-label="$t('buttons.close')" :title="$t('buttons.close')">
         <i class="material-icons">close</i>
       </button>
       <i v-else class="material-icons">search</i>
-      <input
-        type="text"
-        @keyup.exact="keyup"
-        @input="submit"
-        ref="input"
-        :autofocus="active"
-        v-model.trim="value"
-        :aria-label="$t('search.search')"
-        :placeholder="$t('search.search')"
-      />
+      <input type="text" @keyup.exact="keyup" @input="submit" ref="input" :autofocus="active" v-model.trim="value"
+        :aria-label="$t('search.search')" :placeholder="$t('search.search')" />
     </div>
     <div v-if="isMobile && active" id="result" :class="{ hidden: !active }" ref="result">
       <div id="result-list">
@@ -28,12 +14,7 @@
           Search Context: {{ getContext(this.$route.path) }}
         </div>
         <ul v-show="results.length > 0">
-          <li
-            v-for="(s, k) in results"
-            :key="k"
-            @click.stop.prevent="navigateTo(s.url)"
-            style="cursor: pointer"
-          >
+          <li v-for="(s, k) in results" :key="k" @click.stop.prevent="navigateTo(s.url)" style="cursor: pointer">
             <router-link to="#" event="">
               <i v-if="s.dir" class="material-icons folder-icons"> folder </i>
               <i v-else-if="s.audio" class="material-icons audio-icons"> volume_up </i>
@@ -47,20 +28,17 @@
             </router-link>
           </li>
         </ul>
+        <p v-show="isEmpty && isRunning" id="renew">
+          <i class="material-icons spin">autorenew</i>
+        </p>
+        <p v-show="isEmpty && !isRunning">{{ text }}</p>
         <template v-if="isEmpty">
-          <p >{{ text }}</p>
           <template v-if="value.length === 0">
             <div class="boxes">
               <h3>{{ $t("search.types") }}</h3>
               <div>
-                <div
-                  tabindex="0"
-                  v-for="(v, k) in boxes"
-                  :key="k"
-                  role="button"
-                  @click="init('type:' + k)"
-                  :aria-label="v.label"
-                >
+                <div tabindex="0" v-for="(v, k) in boxes" :key="k" role="button" @click="init('type:' + k)"
+                  :aria-label="v.label">
                   <i class="material-icons">{{ v.icon }}</i>
                   <p>{{ v.label }}</p>
                 </div>
@@ -76,12 +54,7 @@
           Search Context: {{ getContext(this.$route.path) }}
         </div>
         <ul v-show="results.length > 0">
-          <li
-            v-for="(s, k) in results"
-            :key="k"
-            @click.stop.prevent="navigateTo(s.url)"
-            style="cursor: pointer"
-          >
+          <li v-for="(s, k) in results" :key="k" @click.stop.prevent="navigateTo(s.url)" style="cursor: pointer">
             <router-link to="#" event="">
               <i v-if="s.dir" class="material-icons folder-icons"> folder </i>
               <i v-else-if="s.audio" class="material-icons audio-icons"> volume_up </i>
@@ -95,25 +68,16 @@
             </router-link>
           </li>
         </ul>
-        <template >
-          <p v-show="isEmpty" >{{ text }}</p>
-          <template >
+        <template>
+          <p v-show="isEmpty && isRunning" id="renew">
+            <i class="material-icons spin">autorenew</i>
+          </p>
+          <p v-show="isEmpty && !isRunning">{{ text }}</p>
+          <template>
             <div v-show="results.length == 0" class="boxes">
-              <ButtonGroup
-                :buttons="folderSelect"
-                @button-clicked="init"
-                @remove-button-clicked="removeInit"
-              />
-              <ButtonGroup
-                :buttons="typeSelect"
-                @button-clicked="init"
-                @remove-button-clicked="removeInit"
-              />
-              <ButtonGroup
-                :buttons="sizeSelect"
-                @button-clicked="init"
-                @remove-button-clicked="removeInit"
-              />
+              <ButtonGroup :buttons="folderSelect" @button-clicked="init" @remove-button-clicked="removeInit" />
+              <ButtonGroup :buttons="typeSelect" @button-clicked="init" @remove-button-clicked="removeInit" />
+              <ButtonGroup :buttons="sizeSelect" @button-clicked="init" @remove-button-clicked="removeInit" />
             </div>
           </template>
         </template>
@@ -151,10 +115,11 @@ export default {
         { label: "Only Files", value: "type:file" },
       ],
       typeSelect: [
-        { label: "Archives", value: "type:archive" },
-        { label: "Audio Files", value: "type:audio" },
+        { label: "Photos", value: "type:image" },
+        { label: "Audio", value: "type:audio" },
         { label: "Videos", value: "type:video" },
         { label: "Documents", value: "type:docs" },
+        { label: "Archives", value: "type:archive" },
       ],
       sizeSelect: [
         { label: "Smaller than 100MB", value: "type:smaller=100" },
@@ -215,6 +180,9 @@ export default {
     isMobile() {
       return this.width <= 800;
     },
+    isRunning() {
+      return this.ongoing;
+    }
   },
   mounted() {
     window.addEventListener("resize", this.handleResize);
@@ -266,20 +234,20 @@ export default {
       this.results.length === 0;
     },
     init(string) {
-      if (string == null || string == ""){
+      if (string == null || string == "") {
         return false
       }
       this.value = `${string} ${this.value}`;
-      if (this.isMobile){
+      if (this.isMobile) {
         this.$refs.input.focus();
       }
     },
     removeInit(string) {
-      if (string == null || string == ""){
+      if (string == null || string == "") {
         return false
       }
-      this.value = this.value.replace(string+" ", "");
-      if (this.isMobile){
+      this.value = this.value.replace(string + " ", "");
+      if (this.isMobile) {
         this.$refs.input.focus();
       }
     },
@@ -301,7 +269,6 @@ export default {
       } catch (error) {
         this.$showError(error);
       }
-
       this.ongoing = false;
     },
   },
diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index 7af376d9..ceba0f1a 100644
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -1,117 +1,65 @@
 <template>
   <nav :class="{ active }">
     <template v-if="isLogged">
-
-      <button
-        class="action"
-        @click="toRoot"
-        :aria-label="$t('sidebar.myFiles')"
-        :title="$t('sidebar.myFiles')"
-      >
+      <button class="action" @click="toRoot" :aria-label="$t('sidebar.myFiles')" :title="$t('sidebar.myFiles')">
         <i class="material-icons">folder</i>
         <span>{{ $t("sidebar.myFiles") }}</span>
       </button>
-
       <div v-if="user.perm.create">
-        <button
-          @click="$store.commit('showHover', 'newDir')"
-          class="action"
-          :aria-label="$t('sidebar.newFolder')"
-          :title="$t('sidebar.newFolder')"
-        >
+        <button @click="$store.commit('showHover', 'newDir')" class="action" :aria-label="$t('sidebar.newFolder')"
+          :title="$t('sidebar.newFolder')">
           <i class="material-icons">create_new_folder</i>
           <span>{{ $t("sidebar.newFolder") }}</span>
         </button>
-
-        <button
-          @click="$store.commit('showHover', 'newFile')"
-          class="action"
-          :aria-label="$t('sidebar.newFile')"
-          :title="$t('sidebar.newFile')"
-        >
+        <button @click="$store.commit('showHover', 'newFile')" class="action" :aria-label="$t('sidebar.newFile')"
+          :title="$t('sidebar.newFile')">
           <i class="material-icons">note_add</i>
           <span>{{ $t("sidebar.newFile") }}</span>
         </button>
       </div>
-
       <div>
-        <button
-          class="action"
-          @click="toSettings"
-          :aria-label="$t('sidebar.settings')"
-          :title="$t('sidebar.settings')"
-        >
+        <button class="action" @click="toSettings" :aria-label="$t('sidebar.settings')" :title="$t('sidebar.settings')">
           <i class="material-icons">settings_applications</i>
           <span>{{ $t("sidebar.settings") }}</span>
         </button>
 
-        <button
-          v-if="canLogout"
-          @click="logout"
-          class="action"
-          id="logout"
-          :aria-label="$t('sidebar.logout')"
-          :title="$t('sidebar.logout')"
-        >
+        <button v-if="canLogout" @click="logout" class="action" id="logout" :aria-label="$t('sidebar.logout')"
+          :title="$t('sidebar.logout')">
           <i class="material-icons">exit_to_app</i>
           <span>{{ $t("sidebar.logout") }}</span>
         </button>
       </div>
     </template>
     <template v-else>
-      <router-link
-        class="action"
-        to="/login"
-        :aria-label="$t('sidebar.login')"
-        :title="$t('sidebar.login')"
-      >
+      <router-link class="action" to="/login" :aria-label="$t('sidebar.login')" :title="$t('sidebar.login')">
         <i class="material-icons">exit_to_app</i>
         <span>{{ $t("sidebar.login") }}</span>
       </router-link>
-
-      <router-link
-        v-if="signup"
-        class="action"
-        to="/login"
-        :aria-label="$t('sidebar.signup')"
-        :title="$t('sidebar.signup')"
-      >
+      <router-link v-if="signup" class="action" to="/login" :aria-label="$t('sidebar.signup')"
+        :title="$t('sidebar.signup')">
         <i class="material-icons">person_add</i>
         <span>{{ $t("sidebar.signup") }}</span>
       </router-link>
     </template>
-
-    <div
-      class="credits"
-      v-if="
-        $router.currentRoute.path.includes('/files/') && !disableUsedPercentage
-      "
-      style="width: 90%; margin: 2em 2.5em 3em 2.5em"
-    >
-      <progress-bar :val="usage.usedPercentage" size="small"></progress-bar>
-      <br />
-      {{ usage.used }} of {{ usage.total }} used
-    </div>
-
-    <p class="credits">
-      <span>
-        <span v-if="disableExternal">File Browser</span>
-        <a
-          v-else
-          rel="noopener noreferrer"
-          target="_blank"
-          href="https://github.com/gtsteffaniak/filebrowser"
-          >File Browser</a
-        >
-        <span> {{ version }}</span>
+    <div class="credits" v-if="$router.currentRoute.path.includes('/files/') && !disableUsedPercentage
+      ">
+      <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 rel="noopener noreferrer" target="_blank" href="https://github.com/gtsteffaniak/filebrowser">
+          File Browser
+        </a>
       </span>
+      <span>{{ version }}</span>
       <span>
         <a @click="help">{{ $t("sidebar.help") }}</a>
       </span>
-    </p>
+    </div>
   </nav>
 </template>
-
 <script>
 import { mapState, mapGetters } from "vuex";
 import * as auth from "@/utils/auth";
@@ -157,8 +105,8 @@ export default {
         try {
           let usage = await api.usage(path);
           usageStats = {
-            used: prettyBytes(usage.used/1024, { binary: true }),
-            total: prettyBytes(usage.total/1024, { binary: true }),
+            used: prettyBytes(usage.used / 1024, { binary: true }),
+            total: prettyBytes(usage.total / 1024, { binary: true }),
             usedPercentage: Math.round((usage.used / usage.total) * 100),
           };
         } catch (error) {
@@ -174,11 +122,11 @@ export default {
   },
   methods: {
     toRoot() {
-      this.$router.push({ path: "/files/" }, () => {});
+      this.$router.push({ path: "/files/" }, () => { });
       this.$store.commit("closeHovers");
     },
     toSettings() {
-      this.$router.push({ path: "/settings" }, () => {});
+      this.$router.push({ path: "/settings" }, () => { });
       this.$store.commit("closeHovers");
     },
     help() {
diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css
index e26d98f1..048fedd0 100644
--- a/frontend/src/css/base.css
+++ b/frontend/src/css/base.css
@@ -58,11 +58,12 @@ over
 
 /* Navigation Styles */
 nav {
-  width: 16em;
+  width: 18em;
   position: fixed;
-  top: 4em;
-  left: -17em;
-  z-index: 99999;
+  top: 0;
+  padding-top: 4em;
+  left: -19em;
+  z-index: 10000;
   background: #fff;
   height: 100%;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
@@ -188,6 +189,7 @@ 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%;
@@ -196,10 +198,8 @@ body.rtl .breadcrumbs a {
   -ms-flex-align: center;
   align-items: center;
   background: #fff;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
-  box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
   width: 95%;
-  max-width: 25em;
+  max-width: 30em;
   z-index: 1;
 }
 
diff --git a/frontend/src/css/header.css b/frontend/src/css/header.css
index 7cbe6cc4..19dfac50 100644
--- a/frontend/src/css/header.css
+++ b/frontend/src/css/header.css
@@ -167,15 +167,15 @@ body.rtl #search #result ul>* {
   margin: .5em;
 }
 
-#search #result #renew {
+#search #renew {
   width: 100%;
   text-align: center;
   display: none;
-  margin: 0;
+  margin: 1em;
   max-width: none;
 }
 
-#search.ongoing #result #renew {
+#search.ongoing #renew {
   display: block;
 }
 
diff --git a/frontend/src/css/styles.css b/frontend/src/css/styles.css
index e28003bc..723bbf4e 100644
--- a/frontend/src/css/styles.css
+++ b/frontend/src/css/styles.css
@@ -335,14 +335,15 @@ body.rtl .breadcrumbs .chevron {
  * * * * * * * * * * * * * * * */
 
 .credits {
-  font-size: 0.6em;
-  margin: 3em 2.5em;
+  font-size: 1em;
   color: #a5a5a5;
+  padding: 1em;
 }
 
 .credits > span {
   display: block;
-  margin: .3em 0;
+  margin-top: .5em;
+  margin-left: 0;
 }
 
 .credits a,