diff --git a/auth.go b/auth.go
index 6ce4926..18230c9 100644
--- a/auth.go
+++ b/auth.go
@@ -233,7 +233,8 @@ func (app *appContext) getTokenLogin(gc *gin.Context) {
 		respond(500, "Couldn't generate token", gc)
 		return
 	}
-	gc.SetCookie("refresh", refresh, (3600 * 24), "/", gc.Request.URL.Hostname(), true, true)
+	host := gc.Request.URL.Hostname()
+	gc.SetCookie("refresh", refresh, REFRESH_TOKEN_VALIDITY_SEC, "/", host, true, true)
 	gc.JSON(200, getTokenDTO{token})
 }
 
@@ -297,6 +298,7 @@ func (app *appContext) getTokenRefresh(gc *gin.Context) {
 		respond(500, "Couldn't generate token", gc)
 		return
 	}
-	gc.SetCookie("refresh", refresh, REFRESH_TOKEN_VALIDITY_SEC, "/", gc.Request.URL.Hostname(), true, true)
+	host := gc.Request.URL.Hostname()
+	gc.SetCookie("refresh", refresh, REFRESH_TOKEN_VALIDITY_SEC, "/", host, true, true)
 	gc.JSON(200, getTokenDTO{jwt})
 }
diff --git a/html/admin.html b/html/admin.html
index e34603a..51f3a6d 100644
--- a/html/admin.html
+++ b/html/admin.html
@@ -26,7 +26,7 @@
     <body class="max-w-full overflow-x-hidden section">
         {{ template "login-modal.html" . }}
         <div id="modal-add-user" class="modal">
-            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-add-user" href="">
+            <form class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3" id="form-add-user" href="">
                 <span class="heading">{{ .strings.newUser }} <span class="modal-close">&times;</span></span>
                 <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.username }}" id="add-user-user">
                 <input type="email" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.emailAddress }}">
@@ -43,7 +43,7 @@
             </form>
         </div>
         <div id="modal-about" class="modal">
-            <div class="relative mx-auto my-[10%] w-4/5 lg:w-1/3 content card">
+            <div class="relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3 content card">
                 <img src="{{ .urlBase }}/banner.svg" class="banner header" alt="jfa-go banner">
                 <span class="heading"><span class="modal-close">&times;</span></span>
                 <p>{{ .strings.version }} <span class="text-black dark:text-white font-mono bg-inherit">{{ .version }}</span></p>
@@ -80,7 +80,7 @@
             </div>
         </div>
         <div id="modal-modify-user" class="modal">
-            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-modify-user" href="">
+            <form class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3" id="form-modify-user" href="">
                 <span class="heading"><span id="header-modify-user"></span> <span class="modal-close">&times;</span></span>
                 <p class="content my-4">{{ .strings.modifySettingsDescription }}</p>
                 <div class="flex flex-row mb-4">
@@ -111,7 +111,7 @@
         </div>
         {{ if .referralsEnabled }}
         <div id="modal-enable-referrals-user" class="modal">
-            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-enable-referrals-user" href="">
+            <form class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3" id="form-enable-referrals-user" href="">
                 <span class="heading"><span id="header-enable-referrals-user"></span> <span class="modal-close">&times;</span></span>
                 <p class="content my-4">{{ .strings.enableReferralsDescription }}</p>
                 <div class="flex flex-row mb-4">
@@ -142,7 +142,7 @@
             </form>
         </div>
         <div id="modal-enable-referrals-profile" class="modal">
-            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-enable-referrals-profile" href="">
+            <form class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3" id="form-enable-referrals-profile" href="">
                 <span class="heading"><span id="header-enable-referrals-profile">{{ .strings.enableReferrals }}</span> <span class="modal-close">&times;</span></span>
                 <p class="content my-4">{{ .strings.enableReferralsProfileDescription }}</p>
                 <label class="supra" for="enable-referrals-profile-invites">{{ .strings.invite }}</label>
@@ -162,7 +162,7 @@
         </div>
         {{ end }}
         <div id="modal-delete-user" class="modal">
-            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-delete-user" href="">
+            <form class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3" id="form-delete-user" href="">
                 <span class="heading"><span id="header-delete-user"></span> <span class="modal-close">&times;</span></span>
                 <div class="content mt-8">
                     <label class="switch mb-4">
@@ -178,7 +178,7 @@
             </form>
         </div>
         <div id="modal-extend-expiry" class="modal">
-            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-extend-expiry" href="">
+            <form class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3" id="form-extend-expiry" href="">
                 <span class="heading"><span id="header-extend-expiry"></span> <span class="modal-close">&times;</span></span>
                 <div class="content mt-8">
                     <aside class="aside sm ~urge dark:~d_info mb-2 @low row unfocused" id="extend-expiry-date"></aside>
@@ -275,7 +275,7 @@
             </form>
         </div>
         <div id="modal-customize" class="modal">
-            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
+            <div class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3">
                 <span class="heading">{{ .strings.customizeMessages }} <span class="modal-close">&times;</span></span>
                 <p class="content my-4">{{ .strings.customizeMessagesDescription }}</p>
                 <div class="table-responsive">
@@ -319,7 +319,7 @@
             </form>
         </div>
         <div id="modal-restart" class="modal">
-            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3 ~critical @low">
+            <div class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3 ~critical @low">
                 <span class="heading">{{ .strings.settingsRestartRequired }} <span class="modal-close">&times;</span></span>
                 <p class="content my-4">{{ .strings.settingsRestartRequiredDescription }}</p>
                 <div class="float-right">
@@ -329,7 +329,7 @@
             </div>
         </div>
         <div id="modal-backups" class="modal">
-            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
+            <div class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3">
                 <span class="heading">{{ .strings.backups }} <span class="modal-close">&times;</span></span>
                 <div class="content my-4">
                     {{ .strings.backupsDescription }}
@@ -360,7 +360,7 @@
             </div>
         </div>
         <div id="modal-backed-up" class="modal">
-            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3 ~neutral @low">
+            <div class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3 ~neutral @low">
                 <span class="heading">{{ .strings.backupCreated }} <span class="modal-close">&times;</span></span>
                 <p class="content my-4" id="settings-backed-up-location"></p>
                 <p class="content my-4">{{ .strings.backupCanDownload }}</p>
@@ -370,20 +370,20 @@
             </div>
         </div>
         <div id="modal-refresh" class="modal">
-            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3 ~neutral @low">
+            <div class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3 ~neutral @low">
                 <span class="heading">{{ .strings.settingsApplied }}</span>
                 <p class="content">{{ .strings.settingsRefreshPage }}</p>
             </div>
         </div>
         <div id="modal-send-pwr" class="modal">
-            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3 ~neutral @low">
+            <div class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3 ~neutral @low">
                 <span class="heading">{{ .strings.sendPWR }}</span>
                 <p class="content my-2" id="send-pwr-note"></p>
                 <span class="button ~urge @low mt-2" id="send-pwr-link">{{ .strings.copy }}</span>
             </div>
         </div>
         <div id="modal-ombi-profile" class="modal">
-            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-ombi-defaults" href="">
+            <form class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3" id="form-ombi-defaults" href="">
                 <span class="heading">{{ .strings.ombiProfile }} <span class="modal-close">&times;</span></span>
                 <p class="content my-4">{{ .strings.ombiUserDefaultsDescription }}</p>
                 <div class="select ~neutral @low mb-4">
@@ -422,7 +422,7 @@
             </div>
         </div>
         <div id="modal-add-profile" class="modal">
-            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-add-profile" href="">
+            <form class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3" id="form-add-profile" href="">
                 <span class="heading">{{ .strings.addProfile }} <span class="modal-close">&times;</span></span>
                 <p class="content my-4">{{ .strings.addProfileDescription }}</p>
                 <label>
@@ -461,7 +461,7 @@
         </div>
         {{ if .telegramEnabled }}
         <div id="modal-telegram" class="modal">
-            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
+            <div class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3">
                 <span class="heading mb-4">{{ .strings.linkTelegram }}</span>
                 <p class="content mb-4">{{ .strings.sendPIN }}</p>
                 <h1 class="ac" id="telegram-pin"></h1>
@@ -479,7 +479,7 @@
         {{ end }}
         {{ if .discordEnabled }}
         <div id="modal-discord" class="modal">
-            <div class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3">
+            <div class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3">
                 <span class="heading mb-4"><span id="discord-header"></span><span class="modal-close">&times;</span></span>
                 <p class="content mb-4" id="discord-description"></p>
                 <div class="row">
@@ -490,7 +490,7 @@
         </div>
         {{ end }}
         <div id="modal-matrix" class="modal">
-            <form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-matrix" href="">
+            <form class="card relative mx-auto my-[10%] w-11/12 sm:w-4/5 lg:w-1/3" id="form-matrix" href="">
                 <span class="heading">{{ .strings.linkMatrix }}</span>
                 <p class="content my-4">{{ .strings.linkMatrixDescription }}</p>
                 <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.matrixHomeServer }}" id="matrix-homeserver">
@@ -697,17 +697,19 @@
             <div id="tab-accounts" class="unfocused">
                 <div class="card @low dark:~d_neutral accounts mb-4 overflow-visible">
                     <div class="flex-expand align-middle">
-                        <span class="text-3xl font-bold mr-4">{{ .strings.accounts }}</span>
-                        <div id="accounts-filter-dropdown" class="dropdown z-10" tabindex="0">
-                            <span class="h-100 button ~neutral @low center" id="accounts-filter-button">{{ .strings.filters }}</span>
-                            <div class="dropdown-display">
-                                <div class="card ~neutral @low mt-2" id="accounts-filter-list">
+                        <div id="accounts-filter-dropdown" class="dropdown manual z-10 w-100">
+                            <div class="flex flex-row align-middle">
+                                <span class="text-3xl font-bold mr-4">{{ .strings.accounts }}</span>
+                                <button class="button ~neutral @low center dropdown-manual-toggle" id="accounts-filter-button" tabindex="0">{{ .strings.filters }}</button>
+                                <input type="search" class="field ~neutral @low input search ml-2 mr-2" id="accounts-search" placeholder="{{ .strings.search }}">
+                                <span class="button ~neutral @low center ml-[-2.64rem] rounded-s-none accounts-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></span>
+                            </div>
+                            <div class="dropdown-display max-w-full">
+                                <div class="card ~neutral @low mt-2 overflow-x-scroll" id="accounts-filter-list">
                                     <p class="supra pb-2">{{ .strings.filters }}</p>
                                 </div>
                             </div>
                         </div>
-                        <input type="search" class="field ~neutral @low input search ml-2 mr-2" id="accounts-search" placeholder="{{ .strings.search }}">
-                        <span class="button ~neutral @low center ml-[-2.64rem] rounded-s-none accounts-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></span>
                     </div>
                     <div class="supra py-1 sm hidden" id="accounts-search-options-header">{{ .strings.searchOptions }}</div>
                     <div class="row -mx-2 mb-2">
@@ -715,9 +717,9 @@
                         <span id="accounts-filter-area"></span>
                     </div>
                     <div class="supra py-1 sm">{{ .strings.actions }}</div>
-                    <div class="row -mx-2">
-                        <span class="col button ~neutral @low center max-w-[20%]" id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span>
-                        <div id="accounts-announce-dropdown" class="col dropdown pb-0i max-w-[20%]" tabindex="0">
+                    <div class="flex flex-row flex-wrap gap-3 mb-4">
+                        <span class="button ~neutral @low center " id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span>
+                        <div id="accounts-announce-dropdown" class="dropdown pb-0i " tabindex="0">
                             <span class="w-100 button ~info @low center" id="accounts-announce">{{ .strings.announce }}</span>
                             <div class="dropdown-display">
                                 <div class="card ~neutral @low">
@@ -726,11 +728,11 @@
                                 </div>
                             </div>
                         </div>
-                        <span class="col button ~urge @low center max-w-[20%]" id="accounts-modify-user">{{ .strings.modifySettings }}</span>
+                        <span class="button ~urge @low center " id="accounts-modify-user">{{ .strings.modifySettings }}</span>
                         {{ if .referralsEnabled }}
-                            <span class="col button ~urge @low center max-w-[20%]" id="accounts-enable-referrals">{{ .strings.enableReferrals }}</span>
+                            <span class="button ~urge @low center " id="accounts-enable-referrals">{{ .strings.enableReferrals }}</span>
                         {{ end }}
-                        <div id="accounts-expiry-dropdown" class="col dropdown pb-0i max-w-[20%]" tabindex="0">
+                        <div id="accounts-expiry-dropdown" class="dropdown pb-0i " tabindex="0">
                             <span class="w-100 button ~positive @low center" id="accounts-expiry-dropdown-button">{{ .strings.expiry }} <i class="ri-arrow-down-s-line ml-2"></i></span>
                             <div class="dropdown-display">
                                 <div class="card ~neutral @low">
@@ -739,7 +741,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div id="accounts-disable-enable-dropdown" class="col dropdown manual pb-0i max-w-[20%]" tabindex="0">
+                        <div id="accounts-disable-enable-dropdown" class="dropdown manual pb-0i " tabindex="0">
                             <span class="w-100 button ~positive @low center" id="accounts-disable-enable">{{ .strings.disable }}</span>
                             <div class="dropdown-display">
                                 <div class="card ~neutral @low">
@@ -747,8 +749,8 @@
                                 </div>
                             </div>
                         </div>
-                        <span class="col button ~info @low center unfocused max-w-[20%]" id="accounts-send-pwr">{{ .strings.sendPWR }}</span>
-                        <span class="col button ~critical @low center max-w-[20%]" id="accounts-delete-user">{{ .quantityStrings.deleteUser.Singular }}</span>
+                        <span class="button ~info @low center unfocused " id="accounts-send-pwr">{{ .strings.sendPWR }}</span>
+                        <span class="button ~critical @low center " id="accounts-delete-user">{{ .quantityStrings.deleteUser.Singular }}</span>
                     </div>
                     <div class="card @low accounts-header table-responsive mt-2">
                         <table class="table text-base leading-4">
diff --git a/ts/admin.ts b/ts/admin.ts
index b827f2f..e03fea8 100644
--- a/ts/admin.ts
+++ b/ts/admin.ts
@@ -7,7 +7,7 @@ import { accountsList } from "./modules/accounts.js";
 import { settingsList } from "./modules/settings.js";
 import { activityList } from "./modules/activity.js";
 import { ProfileEditor } from "./modules/profiles.js";
-import { _get, _post, notificationBox, whichAnimationEvent } from "./modules/common.js";
+import { _get, _post, notificationBox, whichAnimationEvent, bindManualDropdowns } from "./modules/common.js";
 import { Updater } from "./modules/update.js";
 import { Login } from "./modules/login.js";
 
@@ -216,6 +216,8 @@ login.onLogin = () => {
     }
 }
 
+bindManualDropdowns();
+
 login.bindLogout(document.getElementById("logout-button"));
 
 login.login("", "");
diff --git a/ts/modules/accounts.ts b/ts/modules/accounts.ts
index 55a07cd..a7ca9a4 100644
--- a/ts/modules/accounts.ts
+++ b/ts/modules/accounts.ts
@@ -188,7 +188,7 @@ class user implements User, SearchableItem {
         if (!telegram && !discord && !matrix && !email) return;
         let innerHTML = `
         <i class="icon ri-settings-2-line ml-2 dropdown-button"></i>
-        <div class="dropdown over-top manual">
+        <div class="dropdown manual">
             <div class="dropdown-display lg">
                 <div class="card ~neutral @low">
                     <div class="supra sm mb-2">${window.lang.strings("contactThrough")}</div>
diff --git a/ts/modules/common.ts b/ts/modules/common.ts
index 7ce95e8..f04a57e 100644
--- a/ts/modules/common.ts
+++ b/ts/modules/common.ts
@@ -263,3 +263,31 @@ export function insertText(textarea: HTMLTextAreaElement, text: string) {
         textarea.focus();
     }
 }
+
+export function bindManualDropdowns() {
+    const buttons = Array.from(document.getElementsByClassName("dropdown-manual-toggle") as HTMLCollectionOf<HTMLSpanElement>);
+    for (let button of buttons) {
+        const parent = button.closest(".dropdown.manual");
+        const display = parent.querySelector(".dropdown-display");
+        const mousein = () => parent.classList.add("selected");
+        const mouseout = () => parent.classList.remove("selected");
+        button.addEventListener("mouseover", mousein);
+        button.addEventListener("mouseout", mouseout);
+        display.addEventListener("mouseover",  mousein);
+        display.addEventListener("mouseout", mouseout);
+        button.onclick = () => {
+            parent.classList.add("selected");
+            document.addEventListener("click", outerClickListener);
+            button.removeEventListener("mouseout", mouseout);
+            display.removeEventListener("mouseout", mouseout);
+        };
+        const outerClickListener = (event: Event) => {
+            if (!(event.target instanceof HTMLElement && (display.contains(event.target) || button.contains(event.target)))) {
+                parent.classList.remove("selected");
+                document.removeEventListener("click", outerClickListener);
+                button.addEventListener("mouseout", mouseout);
+                display.addEventListener("mouseout", mouseout);
+            }
+        };
+    }
+}
