diff --git a/src/assets/index.css b/src/assets/index.css
index f1f578df..0dee46ec 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -140,6 +140,7 @@
   }
   /* context menu */
   .context-menu {
+    -webkit-app-region: no-drag;
     display: flex;
     flex-direction: column;
     gap: 2px;
diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx
index 3e407511..4ba45a6d 100644
--- a/src/components/Profile/index.tsx
+++ b/src/components/Profile/index.tsx
@@ -54,6 +54,7 @@ const Profile: FC<Props> = ({ uid, type = "embed", cid }) => {
   const hasMore = email || canRemoveFromChannel || canRemoveFromServer;
   const iconClass = `cursor-pointer flex flex-col items-center gap-1 rounded-lg w-32 text-primary-400 bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 text-sm pt-3.5 pb-3`;
   const containerClass = clsx(
+    "app-no-drag",
     `flex-center flex-col gap-1 z-[99] mt-20 select-none`,
     isCard ? "p-4 w-[280px] bg-white dark:bg-gray-800 drop-shadow rounded-md" : "md:w-[432px]"
   );
diff --git a/src/routes/chat/ChannelChat/index.tsx b/src/routes/chat/ChannelChat/index.tsx
index 5745314c..b6b60c86 100644
--- a/src/routes/chat/ChannelChat/index.tsx
+++ b/src/routes/chat/ChannelChat/index.tsx
@@ -119,7 +119,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
           <GoBackNav />
           <div className="flex items-center gap-1">
             <ChannelIcon personal={!is_public} />
-            <span className="text-gray-800 dark:text-white">{name}</span>
+            <span className="text-gray-800 dark:text-white whitespace-nowrap">{name}</span>
             <span className="ml-2 text-gray-500 hidden md:block">{description}</span>
           </div>
         </header>
diff --git a/src/routes/favs/index.tsx b/src/routes/favs/index.tsx
index cebc1ab4..b0bb1c87 100644
--- a/src/routes/favs/index.tsx
+++ b/src/routes/favs/index.tsx
@@ -120,14 +120,15 @@ function FavsPage() {
     removeFavorite(id);
   };
   return (
-    <div className="h-screen flex bg-white mt-2 mr-6 mb-2.5 overflow-auto dark:bg-gray-700 rounded-2xl">
-      <div className=" md:min-w-[268px] p-2 shadow-inner-[-1px_0px_0px_rgba(0,_0,_0,_0.1)]">
+    <div className="app-drag h-screen flex bg-white mt-2 mr-6 mb-2.5 overflow-auto dark:bg-gray-700 rounded-2xl">
+      <div className="md:min-w-[268px] p-2 shadow-inner-[-1px_0px_0px_rgba(0,_0,_0,_0.1)]">
         <ul className="flex flex-col gap-0.5">
           {Filters.map(({ icon, title, filter: f }) => {
             return (
               <li
                 key={f}
                 className={clsx(
+                  "app-no-drag",
                   f == filter && "bg-[rgba(116,_127,_141,_0.2)]",
                   `cursor-pointer flex items-center gap-2 p-2 rounded-lg md:hover:bg-[rgba(116,_127,_141,_0.2)]`
                 )}
@@ -167,7 +168,7 @@ function FavsPage() {
             </span>
           );
           return (
-            <div className="max-w-[600px] flex flex-col gap-1" key={id}>
+            <div className="max-w-[600px] flex flex-col gap-1 app-no-drag" key={id}>
               <h4 className="inline-flex items-center text-xs text-gray-400">
                 {tip}
                 {dayjs(created_at).format("YYYY-MM-DD")}
diff --git a/src/routes/resources/Search.tsx b/src/routes/resources/Search.tsx
index 361e7156..1484b2f0 100644
--- a/src/routes/resources/Search.tsx
+++ b/src/routes/resources/Search.tsx
@@ -21,6 +21,7 @@ const Search: FC<Props> = ({ value = "", updateSearchValue = null, embed = false
   return (
     <div
       className={clsx(
+        "app-no-drag",
         `hidden md:block relative w-full py-1.5 px-4 shadow`,
         embed && "py-2 shadow-none"
       )}
@@ -29,7 +30,7 @@ const Search: FC<Props> = ({ value = "", updateSearchValue = null, embed = false
       <input
         value={value}
         onChange={handleChange}
-        className="bg-black/5 dark:bg-black/20 rounded-full text-sm text-gray-500 py-2.5 pl-9"
+        className="bg-black/5 dark:bg-black/20 rounded-full text-sm text-gray-500 py-2.5 pl-9 app-no-drag"
         placeholder={`${t("action.search")}...`}
       />
     </div>
diff --git a/src/routes/resources/index.tsx b/src/routes/resources/index.tsx
index 45053924..1c043a2e 100644
--- a/src/routes/resources/index.tsx
+++ b/src/routes/resources/index.tsx
@@ -90,14 +90,15 @@ function ResourceManagement() {
   // });
 
   return (
-    <div className="h-screen md:overflow-y-scroll flex flex-col items-start my-2 mr-6 rounded-2xl bg-white dark:bg-gray-700">
+    <div className="app-drag h-screen md:overflow-y-scroll flex flex-col items-start my-2 mr-6 rounded-2xl bg-white dark:bg-gray-700">
       <Search value={filter.name} updateSearchValue={handleUpdateSearch} />
-      <div className="flex justify-between w-full px-4 py-5">
+      <div className="app-no-drag flex justify-between w-full px-4 py-5">
         <Filter filter={filter} updateFilter={updateFilter} />
         <View view={view} />
       </div>
       <div
         className={clsx(
+          "app-drag",
           `w-full h-full px-4 overflow-scroll flex`,
           view == "item" && "gap-2 flex-col",
           view == "grid" && "flex-wrap"
@@ -116,7 +117,7 @@ function ResourceManagement() {
           const url = thumbnail || content;
           if (isExpired(url)) return null;
           return (
-            <div key={mid} className="grid-box mb-2">
+            <div key={mid} className="app-no-drag grid-box mb-2">
               <FileBox
                 preview={view == "grid"}
                 flex={view == "item"}
diff --git a/src/routes/users/index.tsx b/src/routes/users/index.tsx
index 23b6ff41..fbd8f586 100644
--- a/src/routes/users/index.tsx
+++ b/src/routes/users/index.tsx
@@ -62,6 +62,7 @@ function UsersPage() {
       </div>
       <div
         className={clsx(
+          "app-drag",
           `md:rounded-r-2xl bg-white w-full flex justify-center items-start dark:bg-gray-700`,
           !user_id && "h-full items-center",
           !isUserDetail && "hidden md:flex"