diff --git a/.gitignore b/.gitignore
index 6935b232..731c9e7e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,8 +5,9 @@ rice-box.go
 .idea/
 /filebrowser
 /filebrowser.exe
-/dist
-/src/backend/vendor
+/frontend/dist
+/backend/vendor
+
 
 .DS_Store
 node_modules
diff --git a/backend/frontend/dist b/backend/frontend/dist
new file mode 120000
index 00000000..e4608c09
--- /dev/null
+++ b/backend/frontend/dist
@@ -0,0 +1 @@
+../../frontend/dist
\ No newline at end of file
diff --git a/backend/frontend/dist/.gitignore b/backend/frontend/dist/.gitignore
deleted file mode 100644
index 86d0cb27..00000000
--- a/backend/frontend/dist/.gitignore
+++ /dev/null
@@ -1,4 +0,0 @@
-# Ignore everything in this directory
-*
-# Except this file
-!.gitignore
\ No newline at end of file
diff --git a/backend/search/conditions.go b/backend/search/conditions.go
index e9d5e977..c31a7a24 100644
--- a/backend/search/conditions.go
+++ b/backend/search/conditions.go
@@ -26,9 +26,9 @@ var compressedFile = []string{
 }
 
 type searchOptions struct {
-	Conditions    map[string]bool
+	Conditions    	map[string]bool
 	Size 			int
-	Terms         []string
+	Terms         	[]string
 }
 
 func ParseSearch(value string) *searchOptions {
@@ -59,6 +59,7 @@ func ParseSearch(value string) *searchOptions {
 			case "folder"			: opts.Conditions["dir"] 		= true
 			case "file"				: opts.Conditions["dir"] 		= false
 		}
+		
 		if len(filter) < 8 {
 			continue
 		}
@@ -90,7 +91,8 @@ func ParseSearch(value string) *searchOptions {
 		opts.Terms = []string{unique}
 		return opts
 	}
-
+	re := regexp.MustCompile(` +`)
+	value = re.ReplaceAllString(value, " ")
 	opts.Terms = strings.Split(value, " ")
 	return opts
 }
diff --git a/frontend/package.json b/frontend/package.json
index 3c082566..2d954b88 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,8 +9,6 @@
     "watch": "find ./dist -maxdepth 1 -mindepth 1 ! -name '.gitignore' -exec rm -r {} + && vue-cli-service build --watch --no-clean"
   },
   "dependencies": {
-    "normalize.css": "^8.0.1",
-    "file-loader": "^6.2.0",
     "ace-builds": "^1.4.7",
     "clipboard": "^2.0.4",
     "css-vars-ponyfill": "^2.4.3",
diff --git a/frontend/public/themes/dark.css b/frontend/public/themes/dark.css
index 0d0aac63..f202f157 100644
--- a/frontend/public/themes/dark.css
+++ b/frontend/public/themes/dark.css
@@ -3,7 +3,6 @@
   --surfacePrimary: #20292F;
   --surfaceSecondary: #3A4147;
   --divider: rgba(255, 255, 255, 0.12);
-  --icon: #ffffff;
   --textPrimary: rgba(255, 255, 255, 0.87);
   --textSecondary: rgba(255, 255, 255, 0.6);
 }
@@ -16,9 +15,6 @@ body {
 #loading {
   background: var(--background);
 }
-#loading .spinner div, main .spinner div {
-  background: var(--icon);
-}
 
 #login {
   background: var(--background);
@@ -65,9 +61,7 @@ header {
 .action:hover {
   background-color: rgba(255, 255, 255, .1);
 }
-.action i {
-  color: var(--icon) !important;
-}
+
 .action .counter {
   border-color: var(--surfacePrimary);
 }
@@ -92,9 +86,7 @@ nav > div {
   color: var(--textPrimary);
   border-color: var(--divider) !important;
 }
-#listing .item i {
-  color: var(--icon);
-}
+
 #listing .item .modified {
   color: var(--textSecondary);
 }
@@ -105,9 +97,7 @@ nav > div {
 #listing.list .header span {
   color: var(--textPrimary);
 }
-#listing.list .header i {
-  color: var(--icon);
-}
+
 #listing.list .item.header {
   background: var(--background);
 }
@@ -130,6 +120,9 @@ nav > div {
 .dashboard #nav ul li:hover {
   background: var(--surfaceSecondary);
 }
+#result-list {
+  background-color:#292929;
+}
 
 .card h3,
 .dashboard #nav,
@@ -173,9 +166,6 @@ table th {
 .file-list li:before {
   color: var(--textSecondary);
 }
-.file-list li[aria-selected=true]:before {
-  color: var(--icon);
-}
 
 .shell {
   background: var(--surfacePrimary);
@@ -196,16 +186,18 @@ nav {
   background: var(--surfaceSecondary) !important;
 }
 
-@media (max-width: 736px) {
-  #file-selection {
-    background: var(--surfaceSecondary) !important;
-  }
-  #file-selection span {
-    color: var(--textPrimary) !important;
-  }
-  #dropdown {
-    background: var(--surfaceSecondary) !important;
-  }
+#file-selection {
+  background: var(--surfaceSecondary) !important;
+}
+#file-selection span {
+  color: var(--textPrimary) !important;
+}
+#dropdown {
+  background: var(--surfaceSecondary) !important;
+}
+
+.button-group button {
+  background-color:darkgray;
 }
 
 .share__box {
diff --git a/frontend/src/components/ButtonGroup.vue b/frontend/src/components/ButtonGroup.vue
new file mode 100644
index 00000000..5215ccaa
--- /dev/null
+++ b/frontend/src/components/ButtonGroup.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="button-group">
+    <button
+      v-for="(btn, index) in buttons"
+      :key="index"
+      :class="{ active: activeButton === index }"
+      @click="setActiveButton(index)"
+    >
+      {{ btn.label }}
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    buttons: {
+      type: Array,
+      default: () => [],
+    },
+    initialActive: {
+      type: Number,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      activeButton: this.initialActive,
+    };
+  },
+  methods: {
+    setActiveButton(index) {
+      // If the clicked button is already active, de-select it
+      if (this.activeButton === index) {
+        this.activeButton = null;
+        this.$emit("remove-button-clicked", this.buttons[index].value);
+      } else {
+        // Emit remove-button-clicked for all other indexes
+        this.buttons.forEach((button, idx) => {
+          if (idx !== index) {
+            this.$emit("remove-button-clicked", button.value);
+          }
+        });
+
+        this.activeButton = index;
+        this.$emit("button-clicked", this.buttons[index].value);
+      }
+    },
+  },
+  watch: {
+    initialActive: {
+      immediate: true,
+      handler(newVal) {
+        this.activeButton = newVal;
+      },
+    },
+  },
+};
+</script>
+
+<style scoped>
+.button-group {
+  display: flex;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+button {
+  flex: 1;
+  height: 3em;
+  padding: 8px 16px;
+  border: none;
+  background-color: #f5f5f5;
+  transition: background-color 0.3s;
+
+  /* Add borders */
+  border-right: 1px solid #ccc;
+}
+
+/* Remove the border from the last button */
+.button-group > button:last-child {
+  border-right: none;
+}
+
+button:hover {
+  background-color: #e0e0e0;
+}
+
+button.active {
+  background-color: var(--blue);
+  color: #ffffff;
+}
+</style>
diff --git a/frontend/src/components/Search.vue b/frontend/src/components/Search.vue
index 3935b9c9..c4823010 100644
--- a/frontend/src/components/Search.vue
+++ b/frontend/src/components/Search.vue
@@ -1,36 +1,39 @@
 <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')">
-        <i class="material-icons">arrow_back</i>
+      <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 id="result" ref="result">
+    <div v-if="isMobile && active" id="result" :class="{ hidden: !active }" ref="result">
       <div id="result-list">
-        <br>
-        <br>
-        <div class="button" style="width:100%">Search Context: {{ getContext(this.$route.path) }}</div>
-        <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)">
-                  <i class="material-icons">{{ v.icon }}</i>
-                  <p>{{ v.label }}</p>
-                </div>
-              </div>
-            </div>
-          </template>
-        </template>
+        <div class="button" style="width: 100%">
+          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>
@@ -44,12 +47,83 @@
             </router-link>
           </li>
         </ul>
+        <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"
+                >
+                  <i class="material-icons">{{ v.icon }}</i>
+                  <p>{{ v.label }}</p>
+                </div>
+              </div>
+            </div>
+          </template>
+        </template>
+      </div>
+    </div>
+    <div v-if="!isMobile && active" id="result-desktop" ref="result">
+      <div id="result-list">
+        <div class="button" style="width: 100%">
+          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"
+          >
+            <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>
+              <i v-else-if="s.image" class="material-icons image-icons"> photo </i>
+              <i v-else-if="s.video" class="material-icons video-icons"> movie </i>
+              <i v-else-if="s.archive" class="material-icons archive-icons"> archive </i>
+              <i v-else class="material-icons file-icons"> insert_drive_file </i>
+              <span class="text-container">
+                {{ basePath(s.path) }}<b>{{ baseName(s.path) }}</b>
+              </span>
+            </router-link>
+          </li>
+        </ul>
+        <template >
+          <p v-show="isEmpty" >{{ 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"
+              />
+            </div>
+          </template>
+        </template>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import ButtonGroup from "./ButtonGroup.vue";
 import { mapState, mapGetters, mapMutations } from "vuex";
 import { search } from "@/api";
 
@@ -66,10 +140,28 @@ var boxes = {
 };
 
 export default {
+  components: {
+    ButtonGroup,
+  },
   name: "search",
   data: function () {
     return {
+      folderSelect: [
+        { label: "Only Folders", value: "type:folder" },
+        { label: "Only Files", value: "type:file" },
+      ],
+      typeSelect: [
+        { label: "Archives", value: "type:archive" },
+        { label: "Audio Files", value: "type:audio" },
+        { label: "Videos", value: "type:video" },
+        { label: "Documents", value: "type:docs" },
+      ],
+      sizeSelect: [
+        { label: "Smaller than 100MB", value: "type:smaller=100" },
+        { label: "Larger than 100MB", value: "type:larger=100" },
+      ],
       value: "",
+      width: window.innerWidth,
       active: false,
       ongoing: false,
       results: [],
@@ -120,42 +212,42 @@ export default {
         ? this.$t("search.typeToSearch")
         : this.$t("search.pressToSearch");
     },
+    isMobile() {
+      return this.width <= 800;
+    },
   },
   mounted() {
-    this.$refs.result.addEventListener("scroll", (event) => {
-      if (
-        event.target.offsetHeight + event.target.scrollTop >=
-        event.target.scrollHeight - 100
-      ) {
-        this.resultsCount += 50;
-      }
-    });
+    window.addEventListener("resize", this.handleResize);
+    this.handleResize(); // Call this once to set the initial width
   },
   methods: {
+    handleResize() {
+      this.width = window.innerWidth;
+    },
     async navigateTo(url) {
       this.closeHovers();
       await this.$nextTick();
       setTimeout(() => this.$router.push(url), 0);
     },
     getContext(url) {
-      url = url.slice(1)
-      let path = "./" + url.substring(url.indexOf('/') + 1);
-      return path.replace(/\/+$/, '') + "/"
+      url = url.slice(1);
+      let path = "./" + url.substring(url.indexOf("/") + 1);
+      return path.replace(/\/+$/, "") + "/";
     },
     basePath(str) {
-      if (!str.includes("/")){
-        return ""
+      if (!str.includes("/")) {
+        return "";
       }
-      let parts = str.replace(/\/$/, '').split("/")
-      parts.pop()
-      return parts.join("/") + "/"
+      let parts = str.replace(/\/$/, "").split("/");
+      parts.pop();
+      return parts.join("/") + "/";
     },
     baseName(str) {
-      let parts = str.split("/")
+      let parts = str.split("/");
       if (str.endsWith("/")) {
-        return parts[parts.length - 2] + "/"
+        return parts[parts.length - 2] + "/";
       } else {
-        return parts[parts.length - 1]
+        return parts[parts.length - 1];
       }
     },
     ...mapMutations(["showHover", "closeHovers", "setReload"]),
@@ -174,8 +266,22 @@ export default {
       this.results.length === 0;
     },
     init(string) {
-      this.value = `${string} `;
-      this.$refs.input.focus();
+      if (string == null || string == ""){
+        return false
+      }
+      this.value = `${string} ${this.value}`;
+      if (this.isMobile){
+        this.$refs.input.focus();
+      }
+    },
+    removeInit(string) {
+      if (string == null || string == ""){
+        return false
+      }
+      this.value = this.value.replace(string+" ", "");
+      if (this.isMobile){
+        this.$refs.input.focus();
+      }
     },
     reset() {
       this.ongoing = false;
@@ -184,7 +290,7 @@ export default {
     },
     async submit(event) {
       event.preventDefault();
-      const words = this.value.split(" ").filter(word => word.length < 3);
+      const words = this.value.split(" ").filter((word) => word.length < 3);
       if (this.value === "" || words.length > 0) {
         return;
       }
@@ -200,4 +306,4 @@ export default {
     },
   },
 };
-</script>
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index 4f76c9f4..7af376d9 100644
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -1,34 +1,6 @@
 <template>
   <nav :class="{ active }">
     <template v-if="isLogged">
-      <!--
-        i want this here eventually
-        <action
-          v-if="headerButtons.download"
-          icon="file_download"
-          :label="$t('buttons.download')"
-          @action="download"
-          :counter="selectedCount"
-        />
-        <action
-          v-if="headerButtons.upload"
-          icon="file_upload"
-          id="upload-button"
-          :label="$t('buttons.upload')"
-          @action="upload"
-        />
-        <action
-          v-if="headerButtons.shell"
-          icon="code"
-          :label="$t('buttons.shell')"
-          @action="$store.commit('toggleShell')"
-        />
-        <action
-          :icon="viewIcon"
-          :label="$t('buttons.switchView')"
-          @action="switchView"
-        />
-      -->
 
       <button
         class="action"
diff --git a/frontend/src/components/prompts/Prompts.vue b/frontend/src/components/prompts/Prompts.vue
index 18b0c9a6..3d3e89ec 100644
--- a/frontend/src/components/prompts/Prompts.vue
+++ b/frontend/src/components/prompts/Prompts.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <component ref="currentComponent" :is="currentComponent"></component>
+    <div v-if="showOverlay" @click="resetPrompts" class="overlay"></div>
   </div>
 </template>
 
@@ -103,6 +104,16 @@ export default {
 
       return (matched && this.show) || null;
     },
+    showOverlay: function () {
+      return (
+        this.show !== null && this.show !== "more"
+      );
+    },
+  },
+  methods: {
+    resetPrompts() {
+      this.$store.commit("closeHovers");
+    },
   },
 };
-</script>
+</script>
\ No newline at end of file
diff --git a/frontend/src/css/_share.css b/frontend/src/css/_share.css
index eb8aacb7..38d70552 100644
--- a/frontend/src/css/_share.css
+++ b/frontend/src/css/_share.css
@@ -5,7 +5,7 @@
   align-items: flex-start;
 }
 
-@media (max-width: 736px) {
+@media (max-width: 800px) {
   .share {
     display: block;
   }
diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css
index 720316b5..e26d98f1 100644
--- a/frontend/src/css/base.css
+++ b/frontend/src/css/base.css
@@ -1,3 +1,4 @@
+/* Basic Styles */
 body {
   font-family: "Roboto", sans-serif;
   padding-top: 4em;
@@ -11,12 +12,6 @@ body.rtl {
 
 * {
   box-sizing: border-box;
-}
-
-*,
-*:hover,
-*:active,
-*:focus {
   outline: 0;
 }
 
@@ -28,45 +23,70 @@ img {
   max-width: 100%;
 }
 
-audio,
-video {
+audio, video {
   width: 100%;
 }
 
-.mobile-only {
+.hidden {
   display: none !important;
 }
 
+.break-word {
+  word-break: break-all;
+}
+
+/* Container */
 .container {
   width: 95%;
   max-width: 960px;
   margin: 1em auto 0;
 }
 
+/* Icons */
 i.spin {
   animation: 1s spin linear infinite;
 }
 
+/* App Styles */
 #app {
   transition: 0.2s ease padding;
 }
-
+over
 #app.multiple {
   padding-bottom: 4em;
 }
 
+/* Navigation Styles */
 nav {
   width: 16em;
   position: fixed;
   top: 4em;
-  left: 0;
+  left: -17em;
+  z-index: 99999;
+  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;
@@ -77,41 +97,17 @@ nav .action {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-nav {
-  z-index: 99999;
-  background: #fff;
-  height: 100%;
-  width: 16em;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  transition: .1s ease left;
-  left: -17em;
-}
 
-body.rtl nav {
-  left: unset;
-  right: -17em;
-}
-nav.active {
-  left: 0;
-}
-
-body.rtl nav.active {
-  left: unset;
-  right: 0;
-}
 body.rtl .action {
   direction: rtl;
   text-align: right;
 }
 
-nav > div {
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
-}
-
 nav .action > * {
   vertical-align: middle;
 }
 
+/* Main Content */
 main {
   margin: 1em;
 }
@@ -119,15 +115,12 @@ main {
 .breadcrumbs {
   height: 3em;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.breadcrumbs span,
-.breadcrumbs {
   display: flex;
   align-items: center;
   color: #6f6f6f;
 }
 
+.breadcrumbs span,
 .breadcrumbs a {
   color: inherit;
   transition: 0.1s ease-in;
@@ -146,12 +139,14 @@ body.rtl .breadcrumbs a {
   padding: 0.2em;
 }
 
+/* Files */
 .files {
   position: absolute;
   bottom: 30px;
   width: 100%;
 }
 
+/* Progress Bar */
 .progress {
   position: fixed;
   top: 0;
@@ -168,33 +163,76 @@ body.rtl .breadcrumbs a {
   transition: 0.2s ease width;
 }
 
-.break-word {
-  word-break: break-all;
+/* Animations */
+@keyframes flyInFromTop {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
 
+#search.active #result-desktop ul li a {
+  display: flex;
+  align-items: center;
+  padding: .3em 0;
+  margin-right: .3em;
+}
+
+#result-desktop {
+  animation: flyInFromTop 0.5s forwards;
+}
+
+/* File Selection */
 #file-selection {
   position: fixed;
   bottom: 1em;
   left: 50%;
   transform: translateX(-50%);
-  display: flex;
+  display: -ms-flexbox;
+  -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;
   z-index: 1;
 }
+
+button {
+  flex: 1;
+  height: 3em;
+  padding: 8px 16px;
+  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;
 }
diff --git a/frontend/src/css/dashboard.css b/frontend/src/css/dashboard.css
index 9d3ebcce..24bca5bc 100644
--- a/frontend/src/css/dashboard.css
+++ b/frontend/src/css/dashboard.css
@@ -295,6 +295,17 @@ body.rtl .card .card-title>*:first-child {
   opacity: 0;
 }
 
+.overlay {
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  top: 4em;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 9999;
+  animation: .3s show ease-in;
+}
+
 .card#share .action.copy-clipboard.active::after {
   opacity: 1;
 }
@@ -311,10 +322,6 @@ body.rtl .card .card-title>*:first-child {
   flex: 1;
 }
 
-/* * * * * * * * * * * * * * * *
- *        PROMPT - MOVE        *
- * * * * * * * * * * * * * * * */
-
 .file-list {
   max-height: 50vh;
   overflow: auto;
diff --git a/frontend/src/css/header.css b/frontend/src/css/header.css
index 751134c0..7cbe6cc4 100644
--- a/frontend/src/css/header.css
+++ b/frontend/src/css/header.css
@@ -1,26 +1,29 @@
+/* Header */
 header {
   z-index: 1000;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   position: fixed;
-  justify-content: space-between;
+  z-index: 10000;
   top: 0;
   left: 0;
-  height: 4em;
   width: 100%;
-  padding: 0;
+  height: 4em;
   display: flex;
-  padding: 0.5em;
   align-items: center;
+  justify-content: space-between;
   background-color: white;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  padding: 0.5em;
 }
+
 @supports (backdrop-filter: none) {
   header {
     background-color: transparent;
     backdrop-filter: blur(16px) invert(0.1);
   }
 }
-header > * {
+
+header>* {
   flex: 0 0 auto;
 }
 
@@ -56,27 +59,14 @@ header>div div {
   position: relative;
 }
 
-#more {
-  display: none;
-}
-
+/* Search */
 #search {
   position: absolute;
   height: 3em;
   width: 50%;
   max-width: 50em;
   left: 50%;
-  transform: translate(-50%,0%);
-}
-
-#search.active {
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  z-index: 9999;
+  transform: translate(-50%, 0%);
 }
 
 #search #input {
@@ -90,23 +80,6 @@ header>div div {
   z-index: 2;
 }
 
-#search.active #input {
-  border-bottom: 3px solid rgba(0, 0, 0, 0.075);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(6px);
-  height: 4em;
-}
-
-#search.active>div {
-  border-radius: 0 !important;
-}
-
-#search #input>.action,
-#search #input>i {
-  margin-right: 0.3em;
-  user-select: none;
-}
-
 #search input {
   width: 100%;
   border: 0;
@@ -114,24 +87,44 @@ header>div div {
   padding: 0;
 }
 
+#result-list p {
+  margin: 1em;
+}
 #result-list {
   width: 60em;
   max-width: 100%;
-  padding-top: 3em;
   overflow-x: hidden;
   overflow-y: auto;
+  border-color: gray;
+}
+
+@media (min-width: 800px) {
+  #result-list {
+    padding-top: 0;
+    border-radius: .5em;
+    border-width: 2px;
+    border-style: solid;
+    background-color: white;
+    margin-top: 1em;
+    max-height: 80vh;
+    left: 50%;
+    max-width: 90vw;
+    transform: translateX(-50%);
+    box-shadow: 0px 2em 50px 10px rgba(0, 0, 0, 0.3)
+  }
 }
 
 .text-container {
-  white-space: nowrap;       /* Prevents the text from wrapping */
-  overflow: hidden;         /* Hides the content that exceeds the div size */
-  text-overflow: ellipsis;  /* Adds "..." when the text overflows */
-  width: 100%;              /* Ensures the content takes the full width available */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
   text-align: left;
   direction: rtl;
 }
 
 #search #result {
+  padding-top: 1em;
   overflow: hidden;
   background: white;
   display: flex;
@@ -139,19 +132,12 @@ header>div div {
   flex-direction: column;
   align-items: center;
   text-align: left;
-  padding: 0;
   color: rgba(0, 0, 0, 0.6);
   height: 0;
   transition: .2s ease height, .2s ease padding;
   z-index: 1;
 }
 
-@media screen and (min-width: 800px) {
-  #search #result {
-    background: linear-gradient(to right, white 15%,lightgray 25%,lightgray 75%,white 85%);
-  }
-}
-
 body.rtl #search #result {
   direction: ltr;
 }
@@ -165,16 +151,12 @@ body.rtl #search #result {
   text-align: right;
 }
 
-/*** RTL - Keep search result LTR because it has paths (in english) ***/
+/* Search Results */
 body.rtl #search #result ul>* {
   direction: ltr;
   text-align: left;
 }
 
-#search.active #result {
-  height: 100vh
-}
-
 #search ul {
   margin-top: 1em;
   padding: 0;
@@ -197,38 +179,28 @@ body.rtl #search #result ul>* {
   display: block;
 }
 
+/* Icon Colors */
 .folder-icons {
   color: var(--icon-blue);
 }
+
 .video-icons {
   color: lightskyblue;
 }
+
 .image-icons {
   color: lightcoral;
 }
+
 .archive-icons {
   color: tan;
 }
+
 .audio-icons {
   color: plum;
 }
 
-#search.active #result>p>i {
-  text-align: center;
-  margin: 0 auto;
-  display: table;
-}
-
-#search.active #result ul li a {
-  display: flex;
-  align-items: center;
-  padding: .3em 0;
-}
-
-#search.active #result ul li a i {
-  margin-right: .3em;
-}
-
+/* Search Input Placeholder */
 #search::-webkit-input-placeholder {
   color: rgba(255, 255, 255, .5);
 }
@@ -247,11 +219,12 @@ body.rtl #search #result ul>* {
   color: rgba(255, 255, 255, .5);
 }
 
+/* Search Boxes */
 #search .boxes {
   border: 1px solid rgba(0, 0, 0, 0.075);
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   background: #fff;
-  margin: 1em 0;
+  margin: 1em;
 }
 
 #search .boxes h3 {
@@ -269,9 +242,11 @@ body.rtl #search .boxes h3 {
 #search .boxes>div {
   display: flex;
   flex-wrap: wrap;
+  margin: 1em;
+  margin-right: auto;
+  margin-left: auto;
+  max-width: 40em;
   justify-content: space-between;
-  margin-right: -1em;
-  margin-bottom: -1em;
 }
 
 #search .boxes>div>div {
diff --git a/frontend/src/css/mobile.css b/frontend/src/css/mobile.css
index c98ff871..6ca36a63 100644
--- a/frontend/src/css/mobile.css
+++ b/frontend/src/css/mobile.css
@@ -1,20 +1,24 @@
 @media (max-width: 1024px) {
+
   /* Mobile Only fix div hidden by bottom navigation bar of mobile browser when using height: 100vh */
   #previewer .preview {
     height: calc(100% - 4em) !important;
   }
 }
 
-@media (max-width: 736px) {
+@media (max-width: 800px) {
   body {
     padding-bottom: 5em;
   }
+
   #listing.list .item .size {
     display: none;
   }
+
   #listing.list .item .name {
     width: 60%;
   }
+
   #more {
     display: inherit
   }
@@ -28,6 +32,7 @@
   header img {
     display: none;
   }
+
   #listing {
     margin-bottom: 5em;
   }
@@ -43,19 +48,76 @@
   body.rtl #nav .wrapper {
     margin-right: unset;
   }
+
   body.rtl .dashboard .row {
     margin-right: unset;
   }
+
   #search.active {
     display: block;
   }
+
+  #search.active {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    z-index: 9999;
+  }
+
+  #search.active #input {
+    border-bottom: 3px solid rgba(0, 0, 0, 0.075);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(6px);
+    height: 4em;
+  }
+
+  #search.active>div {
+    border-radius: 0 !important;
+  }
+
+  #search.active #result {
+    height: 100vh
+  }
+
+  #search.active #result>p>i {
+    text-align: center;
+    margin: 0 auto;
+    display: table;
+  }
+
+  #search.active #result ul li a {
+    display: flex;
+    align-items: center;
+    padding: .3em 0;
+    margin-right: .3em;
+  }
+
+  #search #input>.action,
+  #search #input>i {
+    margin-right: 0.3em;
+    user-select: none;
+  }
+
+  #result-list {
+    padding-top: 3em;
+  }
+
 }
 
+
 @media (max-width: 450px) {
   #listing.list .item .modified {
     display: none;
   }
+
   #listing.list .item .name {
     width: 100%;
   }
+}
+/* Mobile Specific Styles */
+.mobile-only {
+  display: none !important;
 }
\ No newline at end of file
diff --git a/frontend/src/css/styles.css b/frontend/src/css/styles.css
index 4496d3ab..e28003bc 100644
--- a/frontend/src/css/styles.css
+++ b/frontend/src/css/styles.css
@@ -158,7 +158,7 @@ main .spinner .bounce2 {
   color: #fff;
 }
 
-@media (min-width: 738px) {
+@media (min-width: 800px) {
   #previewer header #dropdown .action i {
     color: #fff;
   }
diff --git a/frontend/src/views/files/Listing.vue b/frontend/src/views/files/Listing.vue
index c98fffe9..ac2184aa 100644
--- a/frontend/src/views/files/Listing.vue
+++ b/frontend/src/views/files/Listing.vue
@@ -3,52 +3,56 @@
     <header-bar showMenu showLogo>
       <search />
       <template #actions>
-        <action
-          :icon="viewIcon"
-          :label="$t('buttons.switchView')"
-          @action="switchView"
-        />
+        <action :icon="viewIcon" :label="$t('buttons.switchView')" @action="switchView" />
       </template>
     </header-bar>
 
     <div id="file-selection">
       <span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
-      <template >
-      <action
-        v-if="headerButtons.info"
-        icon="info"
-        :label="$t('buttons.info')"
-        show="info" />
-      <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"
-      />
+      <template>
+        <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.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"
+        />
+      </template>
     </div>
 
     <div v-if="loading">
@@ -83,12 +87,7 @@
           multiple
         />
       </div>
-      <div
-        v-else
-        id="listing"
-        ref="listing"
-        :class="user.viewMode + ' file-icons'"
-      >
+      <div v-else id="listing" ref="listing" :class="user.viewMode + ' file-icons'">
         <div>
           <div class="item header">
             <div></div>
@@ -234,15 +233,7 @@ export default {
     };
   },
   computed: {
-    ...mapState([
-      "req",
-      "selected",
-      "user",
-      "show",
-      "multiple",
-      "selected",
-      "loading",
-    ]),
+    ...mapState(["req", "selected", "user", "show", "multiple", "selected", "loading"]),
     ...mapGetters(["selectedCount"]),
     nameSorted() {
       return this.req.sorting.by === "name";
@@ -311,7 +302,6 @@ export default {
     },
     headerButtons() {
       return {
-        info: this.selectedCount > 0,
         select: this.selectedCount > 0,
         upload: this.user.perm.create,
         download: this.user.perm.download,
@@ -479,9 +469,7 @@ export default {
       let items = [];
 
       for (let item of this.$store.state.clipboard.items) {
-        const from = item.from.endsWith("/")
-          ? item.from.slice(0, -1)
-          : item.from;
+        const from = item.from.endsWith("/") ? item.from.slice(0, -1) : item.from;
         const to = this.$route.path + encodeURIComponent(item.name);
         items.push({ from, to, name: item.name });
       }
@@ -562,9 +550,7 @@ export default {
 
       if (currentPos > triggerPos) {
         // Quantity of items needed to fill 2x of the window height
-        const showQuantity = Math.ceil(
-          (window.innerHeight * 2) / this.itemWeight
-        );
+        const showQuantity = Math.ceil((window.innerHeight * 2) / this.itemWeight);
 
         // Increase the number of displayed items
         this.showLimit += showQuantity;
@@ -610,11 +596,7 @@ export default {
         ? this.$route.path
         : this.$route.path + "/";
 
-      if (
-        el !== null &&
-        el.classList.contains("item") &&
-        el.dataset.dir === "true"
-      ) {
+      if (el !== null && el.classList.contains("item") && el.dataset.dir === "true") {
         // Get url from ListingItem instance
         path = el.__vue__.url;
 
@@ -647,8 +629,7 @@ export default {
 
       let files = event.currentTarget.files;
       let folder_upload =
-        files[0].webkitRelativePath !== undefined &&
-        files[0].webkitRelativePath !== "";
+        files[0].webkitRelativePath !== undefined && files[0].webkitRelativePath !== "";
 
       if (folder_upload) {
         for (let i = 0; i < files.length; i++) {
@@ -702,9 +683,7 @@ export default {
       }
 
       try {
-        await users.update({ id: this.user.id, sorting: { by, asc } }, [
-          "sorting",
-        ]);
+        await users.update({ id: this.user.id, sorting: { by, asc } }, ["sorting"]);
       } catch (e) {
         this.$showError(e);
       }
@@ -804,9 +783,7 @@ export default {
       const windowHeight = window.innerHeight;
 
       // Quantity of items needed to fill 2x of the window height
-      const showQuantity = Math.ceil(
-        (windowHeight + windowHeight * 2) / this.itemWeight
-      );
+      const showQuantity = Math.ceil((windowHeight + windowHeight * 2) / this.itemWeight);
 
       // Less items to display than current
       if (this.showLimit > showQuantity && !fit) return;