diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 134e481..68134ab 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,7 +12,7 @@
         "sirv-cli": "^1.0.0",
         "svelte-emoji-selector": "^1.0.1",
         "svelte-router-spa": "^6.0.2",
-        "svelte-select": "^3.17.0",
+        "svelte-select": "^5.6.1",
         "svelte-tooltip": "^1.2.0"
       },
       "devDependencies": {
@@ -1577,6 +1577,19 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.1.tgz",
+      "integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g=="
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.4.5.tgz",
+      "integrity": "sha512-96KnRWkRnuBSSFbj0sFGwwOUd8EkiecINVl0O9wiZlZ64EkpyAOG3Xc2vKKNJmru0Z7RqWNymA+6b8OZqjgyyw==",
+      "dependencies": {
+        "@floating-ui/core": "^1.3.1"
+      }
+    },
     "node_modules/@fortawesome/fontawesome-common-types": {
       "version": "0.2.35",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
@@ -3113,6 +3126,15 @@
         "svelte-tabs": "^1.1.0"
       }
     },
+    "node_modules/svelte-floating-ui": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/svelte-floating-ui/-/svelte-floating-ui-1.2.8.tgz",
+      "integrity": "sha512-8Ifi5CD2Ui7FX7NjJRmutFtXjrB8T/FMNoS2H8P81t5LHK4I9G4NIs007rLWG/nRl7y+zJUXa3tWuTjYXw/O5A==",
+      "dependencies": {
+        "@floating-ui/core": "^1.1.0",
+        "@floating-ui/dom": "^1.1.0"
+      }
+    },
     "node_modules/svelte-router-spa": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/svelte-router-spa/-/svelte-router-spa-6.0.2.tgz",
@@ -3125,9 +3147,13 @@
       }
     },
     "node_modules/svelte-select": {
-      "version": "3.17.0",
-      "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-3.17.0.tgz",
-      "integrity": "sha512-ITmX/XUiSdkaILmsTviKRkZPaXckM5/FA7Y8BhiUPoamaZG/ZDyOo6ydjFu9fDVFTbwoAUGUi6HBjs+ZdK2AwA=="
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-5.6.1.tgz",
+      "integrity": "sha512-Powj91VAWyaNMSSOQ0E29UMTw/ExWsHEsA83H7yQgfji2S2DhG6Rs5qZHslZ+ihbCPxXel5uEzwLsSqDABkQDw==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.2.1",
+        "svelte-floating-ui": "1.2.8"
+      }
     },
     "node_modules/svelte-tabs": {
       "version": "1.1.0",
@@ -4419,6 +4445,19 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@floating-ui/core": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.1.tgz",
+      "integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g=="
+    },
+    "@floating-ui/dom": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.4.5.tgz",
+      "integrity": "sha512-96KnRWkRnuBSSFbj0sFGwwOUd8EkiecINVl0O9wiZlZ64EkpyAOG3Xc2vKKNJmru0Z7RqWNymA+6b8OZqjgyyw==",
+      "requires": {
+        "@floating-ui/core": "^1.3.1"
+      }
+    },
     "@fortawesome/fontawesome-common-types": {
       "version": "0.2.35",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
@@ -5572,6 +5611,15 @@
         "svelte-tabs": "^1.1.0"
       }
     },
+    "svelte-floating-ui": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/svelte-floating-ui/-/svelte-floating-ui-1.2.8.tgz",
+      "integrity": "sha512-8Ifi5CD2Ui7FX7NjJRmutFtXjrB8T/FMNoS2H8P81t5LHK4I9G4NIs007rLWG/nRl7y+zJUXa3tWuTjYXw/O5A==",
+      "requires": {
+        "@floating-ui/core": "^1.1.0",
+        "@floating-ui/dom": "^1.1.0"
+      }
+    },
     "svelte-router-spa": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/svelte-router-spa/-/svelte-router-spa-6.0.2.tgz",
@@ -5581,9 +5629,13 @@
       }
     },
     "svelte-select": {
-      "version": "3.17.0",
-      "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-3.17.0.tgz",
-      "integrity": "sha512-ITmX/XUiSdkaILmsTviKRkZPaXckM5/FA7Y8BhiUPoamaZG/ZDyOo6ydjFu9fDVFTbwoAUGUi6HBjs+ZdK2AwA=="
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-5.6.1.tgz",
+      "integrity": "sha512-Powj91VAWyaNMSSOQ0E29UMTw/ExWsHEsA83H7yQgfji2S2DhG6Rs5qZHslZ+ihbCPxXel5uEzwLsSqDABkQDw==",
+      "requires": {
+        "@floating-ui/dom": "^1.2.1",
+        "svelte-floating-ui": "1.2.8"
+      }
     },
     "svelte-tabs": {
       "version": "1.1.0",
diff --git a/frontend/package.json b/frontend/package.json
index 3beb2fa..13fc0c4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,7 +28,7 @@
     "sirv-cli": "^1.0.0",
     "svelte-emoji-selector": "^1.0.1",
     "svelte-router-spa": "^6.0.2",
-    "svelte-select": "^3.17.0",
+    "svelte-select": "^5.6.1",
     "svelte-tooltip": "^1.2.0"
   }
 }
diff --git a/frontend/src/components/PanelDropdown.svelte b/frontend/src/components/PanelDropdown.svelte
index 670b846..c96126c 100644
--- a/frontend/src/components/PanelDropdown.svelte
+++ b/frontend/src/components/PanelDropdown.svelte
@@ -1,14 +1,11 @@
 <label class="form-label">{label}</label>
-<div class="multiselect-super">
-  <Select placeholder="Select..." items={panels} optionIdentifier="panel_id" getOptionLabel={labelMapper}
-          getSelectionLabel={labelMapper} bind:selectedValue={selectedRaw}
-          on:select={update} on:clear={handleClear} {isMulti} {isSearchable}
-          placeholderAlwaysShow={true} />
-</div>
+
+<WrappedSelect placeholder="Select panel..." items={panels} optionIdentifier="panel_id" nameMapper={labelMapper}
+               bind:selectedValue={selectedRaw} on:select={update} on:clear={handleClear} {isMulti} {isSearchable} />
 
 <script>
-    import Select from 'svelte-select';
     import {onMount} from "svelte";
+    import WrappedSelect from "./WrappedSelect.svelte";
 
     export let label;
     export let panels;
diff --git a/frontend/src/components/WrappedSelect.svelte b/frontend/src/components/WrappedSelect.svelte
new file mode 100644
index 0000000..b4cb039
--- /dev/null
+++ b/frontend/src/components/WrappedSelect.svelte
@@ -0,0 +1,57 @@
+<Select {items}
+        bind:value={selectedValue}
+        on:select
+        searchable={searchable}
+        clearable={isClearable}
+        itemId={optionIdentifier}
+        debounceWait={loadOptionsInterval}
+        {loadOptions}
+        {placeholder}
+        {placeholderAlwaysShow}
+        multiple={isMulti}
+        --background="#2e3136"
+        --border="#2e3136"
+        --border-focused="0"
+        --border-hover="0"
+        --borderRadius="4px"
+        --item-hover-bg="#121212"
+        --list-background="#2e3136"
+        --item-color="white"
+        --multi-item-bg="#272727"
+        --multi-item-outline="0"
+        --multi-item-border-radius="16px"
+        --multi-item-padding="0 10px 0 15px"
+        --multi-item-clear-icon-color="#52616F"
+        --multi-item-height="32px"
+        --clear-icon-color="white"
+        --clear-select-color="white"
+        --input-color="white"
+        --font-size="16px">
+  <div slot="item" let:item>{nameMapper(item)}</div>
+  <div slot="selection" let:selection>{nameMapper(selection)}</div>
+</Select>
+
+<script>
+    import Select from "svelte-select";
+
+    export let items;
+    export let selectedValue;
+
+    export let isSearchable = true;
+    export let isClearable = true;
+    export let isMulti = false;
+    export let placeholder;
+    export let placeholderAlwaysShow = false;
+    export let loadOptions;
+    export let loadOptionsInterval;
+
+    export let optionIdentifier;
+    export let nameMapper = (x) => x;
+
+    let searchable = isSearchable && selectedValue == undefined;
+    $: selectedValue, updateSearchable();
+
+    function updateSearchable() {
+        searchable = isSearchable && selectedValue == undefined;
+    }
+</script>
diff --git a/frontend/src/components/form/RoleSelect.svelte b/frontend/src/components/form/RoleSelect.svelte
index a7b8399..9772633 100644
--- a/frontend/src/components/form/RoleSelect.svelte
+++ b/frontend/src/components/form/RoleSelect.svelte
@@ -2,18 +2,13 @@
   <label class="form-label">{label}</label>
 {/if}
 
-<div class="multiselect-super">
-  <Select placeholder="Search..." optionIdentifier="id" items={roles}
-          bind:selectedValue={value} getOptionLabel={labelMapper} getSelectionLabel={labelMapper}/>
-</div>
+<WrappedSelect placeholder="Search..." optionIdentifier="id" items={roles}
+               bind:selectedValue={value} nameMapper={labelMapper}/>
 
 <script>
-    import Select from 'svelte-select';
-    import axios from "axios";
     import {onMount} from 'svelte'
     import {setDefaultHeaders} from '../../includes/Auth.svelte'
-    import {API_URL} from "../../js/constants";
-    import {notifyError, notifyRatelimit} from "../../js/util";
+    import WrappedSelect from "../WrappedSelect.svelte";
 
     export let label;
     export let roles = [];
diff --git a/frontend/src/components/form/UserSelect.svelte b/frontend/src/components/form/UserSelect.svelte
index 6cb7091..b25e6f6 100644
--- a/frontend/src/components/form/UserSelect.svelte
+++ b/frontend/src/components/form/UserSelect.svelte
@@ -2,18 +2,16 @@
   <label class="form-label">{label}</label>
 {/if}
 
-<div class="multiselect-super">
-  <Select placeholder="Search..." loadOptionsInterval={500} {loadOptions} optionIdentifier="id"
-          bind:selectedValue={value} getOptionLabel={labelMapper} getSelectionLabel={labelMapper}/>
-</div>
+<WrappedSelect placeholder="Search..." loadOptionsInterval={500} {loadOptions} optionIdentifier="id"
+               bind:selectedValue={value} nameMapper={labelMapper}/>
 
 <script>
-    import Select from 'svelte-select';
     import axios from "axios";
     import {onMount} from 'svelte'
     import {setDefaultHeaders} from '../../includes/Auth.svelte'
     import {API_URL} from "../../js/constants";
     import {notifyError, notifyRatelimit} from "../../js/util";
+    import WrappedSelect from "../WrappedSelect.svelte";
 
     export let label;
     export let guildId;
diff --git a/frontend/src/components/manage/PanelCreationForm.svelte b/frontend/src/components/manage/PanelCreationForm.svelte
index 57eb7b4..07efe59 100644
--- a/frontend/src/components/manage/PanelCreationForm.svelte
+++ b/frontend/src/components/manage/PanelCreationForm.svelte
@@ -5,29 +5,28 @@
             <div class="row">
                 <div class="col-2">
                     <label class="form-label">Mention On Open</label>
-                    <div class="multiselect-super">
-                        <Select items={mentionItems}
-                                bind:selectedValue={selectedMentions}
-                                on:select={updateMentions}
-                                optionIdentifier="id"
-                                getSelectionLabel={mentionNameMapper}
-                                getOptionLabel={mentionNameMapper}
-                                placeholderAlwaysShow={true}
-                                isMulti={true} />
+                    <div class="col-1">
+                        <WrappedSelect items={mentionItems}
+                                       bind:selectedValue={selectedMentions}
+                                       on:select={updateMentions}
+                                       optionIdentifier="id"
+                                       nameMapper={mentionNameMapper}
+                                       placeholder="Select roles..."
+                                       isMulti={true} />
                     </div>
                 </div>
                 <div class="col-2">
                     <label class="form-label">Support Teams</label>
-                    <div class="multiselect-super">
-                        <Select items={teamsWithDefault}
-                                bind:selectedValue={selectedTeams}
-                                on:select={updateTeams}
-                                isSearchable={false}
-                                optionIdentifier="id"
-                                getSelectionLabel={nameMapper}
-                                getOptionLabel={nameMapper}
-                                isMulti={true} />
-                    </div>
+                    <WrappedSelect items={teamsWithDefault}
+                            bind:selectedValue={selectedTeams}
+                            on:select={updateTeams}
+                            optionIdentifier="id"
+                            nameMapper={nameMapper}
+                            placeholder="Select teams..."
+                            isMulti={true}>
+                        <div slot="item" let:item>{item.name}</div>
+                        <div slot="selection" let:selection>{selection.name}</div>
+                    </WrappedSelect>
                 </div>
             </div>
             <div class="incomplete-row">
@@ -105,9 +104,9 @@
 
                 <div class="col-2" style="z-index: 1">
                     <label for="emoji-pick-wrapper" class="form-label">Button Emoji</label>
-                    <div id="emoji-pick-wrapper" class="row">
-                        <div class="col-2">
-                            <label class="form-label" style="margin-bottom: 0 !important;">Custom Emoji</label>
+                    <div id="emoji-pick-wrapper" class="row" style="gap: 2%">
+                        <div class="col">
+                            <label class="form-label" style="margin-bottom: 0 !important; white-space: nowrap;">Custom Emoji</label>
                             <Toggle hideLabel
                                     toggledColor="#66bb6a"
                                     untoggledColor="#ccc"
@@ -115,13 +114,12 @@
                                     on:toggle={handleEmojiTypeChange} />
                         </div>
                         {#if data.use_custom_emoji}
-                            <div class="multiselect-super">
-                                <Select items={emojis}
-                                        Item={EmojiItem}
+                            <div class="col-fill">
+                                <!--Item=EmojiItem-->
+                                <WrappedSelect items={emojis}
                                         selectedValue={data.emote}
                                         optionIdentifier="id"
-                                        getSelectionLabel={emojiNameMapper}
-                                        getOptionLabel={emojiNameMapper}
+                                        nameMapper={emojiNameMapper}
                                         placeholderAlwaysShow={true}
                                         on:select={handleCustomEmojiChange} />
                             </div>
@@ -169,6 +167,7 @@
     import Checkbox from "../form/Checkbox.svelte";
     import Collapsible from "../Collapsible.svelte";
     import EmbedForm from "../EmbedForm.svelte";
+    import WrappedSelect from "../WrappedSelect.svelte";
 
     export let guildId;
     export let seedDefault = true;
@@ -351,6 +350,11 @@
         height: 100%;
     }
 
+    .col {
+        display: flex;
+        flex-direction: column;
+    }
+
     .col-fill {
         display: flex;
         flex-direction: column;
@@ -397,57 +401,11 @@
         min-height: 0 !important;
     }
 
-    .advanced-settings-show {
-        visibility: visible;
-        min-height: 297px;
-        margin-bottom: 10px;
-    }
-
     :global(.show-overflow) {
         overflow: visible;
     }
 
-    .inner {
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        align-items: flex-start;
-        /*position: absolute;*/
-        height: 100%;
-        width: 100%;
-    }
-
-    .absolute {
-        position: absolute;
-    }
-
     #naming-scheme-wrapper {
         gap: 10px;
     }
-
-    :global(.multiselect-super) {
-        display: flex;
-        width: 100%;
-        height: 100%;
-        --background: #2e3136;
-        --border: #2e3136;
-        --borderRadius: 4px;
-        --itemHoverBG: #121212;
-        --listBackground: #2e3136;
-        --itemColor: white;
-        --multiItemBG: #272727;
-        --multiItemActiveBG: #272727;
-        --multiClearFill: #272727;
-        --multiClearHoverFill: #272727;
-        --inputColor: white;
-        --inputFontSize: 16px;
-    }
-
-    :global(.multiselect-super > .selectContainer) {
-        width: 100%;
-    }
-
-    :global(.selectContainer > .multiSelect, .selectContainer > .multiSelect > input) {
-        cursor: pointer;
-    }
 </style>
diff --git a/frontend/src/views/Teams.svelte b/frontend/src/views/Teams.svelte
index 39efebe..cf329f6 100644
--- a/frontend/src/views/Teams.svelte
+++ b/frontend/src/views/Teams.svelte
@@ -20,9 +20,9 @@
 
           <div class="col-1" style="flex-direction: row">
             <div class="col-4" style="margin-right: 12px">
-              <div class="multiselect-super">
-                <Select isSearchable={false} isClearable={false} optionIdentifier="id" items={teams}
-                        bind:selectedValue={activeTeam} getOptionLabel={labelMapper} getSelectionLabel={labelMapper}
+              <div class="col-1">
+                <WrappedSelect isSearchable={false} isClearable={false} optionIdentifier="id" items={teams} placeholder="Select a team..."
+                        bind:selectedValue={activeTeam} nameMapper={labelMapper}
                         on:select={updateActiveTeam}/>
               </div>
             </div>
@@ -67,7 +67,7 @@
                 </div>
 
                 <div style="margin-left: 10px">
-                  <Button type="button" icon="fas fa-plus" disabled={selectedUser === undefined}
+                  <Button type="button" icon="fas fa-plus" disabled={selectedUser === null || selectedUser === undefined}
                           on:click={addUser}>Add To Team
                   </Button>
                 </div>
@@ -75,12 +75,12 @@
 
               <h3>Add Role</h3>
               <div class="user-select">
-                <div style="display: flex; flex: 1">
+                <div class="col-1" style="display: flex; flex: 1">
                   <RoleSelect {guildId} {roles} bind:value={selectedRole}/>
                 </div>
 
                 <div style="margin-left: 10px">
-                  <Button type="button" icon="fas fa-plus" disabled={selectedRole === undefined}
+                  <Button type="button" icon="fas fa-plus" disabled={selectedRole === null || selectedRole == undefined}
                           on:click={addRole}>Add To Team
                   </Button>
                 </div>
@@ -104,6 +104,7 @@
     import Select from 'svelte-select';
     import UserSelect from "../components/form/UserSelect.svelte";
     import RoleSelect from "../components/form/RoleSelect.svelte";
+    import WrappedSelect from "../components/WrappedSelect.svelte";
 
     export let currentRoute;
     let guildId = currentRoute.namedParams.id;
@@ -152,7 +153,7 @@
         let entity = {
             id: selectedUser.id,
             type: 0,
-            name: `${selectedUser.username}#${selectedUser.discriminator}`
+            name: `${selectedUser.username}`
         }
         members = [...members, entity];
         selectedUser = undefined;