diff --git a/package.json b/package.json
index 5d6cb787..32828ce4 100644
--- a/package.json
+++ b/package.json
@@ -151,7 +151,6 @@
         "typescript": "^4.4.2",
         "ulid": "^2.3.0",
         "use-resize-observer": "^7.0.0",
-        "vite-plugin-compression": "^0.3.6",
         "vite-plugin-pwa": "^0.8.1",
         "workbox-precaching": "^6.1.5"
     },
diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx
index 6b531ef9..14ce9e01 100644
--- a/src/components/navigation/left/ServerListSidebar.tsx
+++ b/src/components/navigation/left/ServerListSidebar.tsx
@@ -1,15 +1,18 @@
 import { Plus, LinkExternal } from "@styled-icons/boxicons-regular";
 import { Cog, Compass } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
+import { DragDropContext } from "react-beautiful-dnd";
 import { Link, useHistory, useLocation, useParams } from "react-router-dom";
 import { RelationshipStatus } from "revolt-api/types/Users";
 import styled, { css } from "styled-components";
 
 import { attachContextMenu } from "preact-context-menu";
 import { Text } from "preact-i18n";
+import { useState } from "preact/hooks";
 
 import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
+import { Draggable, Droppable } from "../../../lib/dnd";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
 import { useApplicationState } from "../../../mobx/State";
@@ -235,7 +238,7 @@ export default observer(() => {
 
     const { server: server_id } = useParams<{ server?: string }>();
     const server = server_id ? client.servers.get(server_id) : undefined;
-    const servers = [...client.servers.values()];
+    const [servers, setServers] = useState([...client.servers.values()]);
     const channels = [...client.channels.values()];
 
     const history = useHistory();
@@ -250,181 +253,246 @@ export default observer(() => {
         typeof server === "undefined" && !path.startsWith("/invite");
 
     return (
-        <ServersBase>
-            <ServerList>
-                <ConditionalLink
-                    active={homeActive}
-                    to={state.layout.getLastHomePath()}>
-                    <ServerEntry home active={homeActive}>
-                        <Swoosh />
-                        <div
-                            onContextMenu={attachContextMenu("Status")}
-                            onClick={() =>
-                                homeActive && history.push("/settings")
-                            }>
-                            <UserHover user={client.user ?? undefined}>
-                                <Icon
-                                    size={42}
-                                    unread={
-                                        alertCount > 0 ? "mention" : undefined
-                                    }
-                                    count={alertCount}>
-                                    <UserIcon
-                                        target={client.user ?? undefined}
-                                        size={32}
-                                        status
-                                        hover
-                                    />
-                                </Icon>
-                            </UserHover>
-                        </div>
-                    </ServerEntry>
-                </ConditionalLink>
-                {channels
-                    .filter(
-                        (x) =>
-                            (x.channel_type === "DirectMessage" ||
-                                x.channel_type === "Group") &&
-                            x.unread,
-                    )
-                    .map((x) => {
-                        const unreadCount = x.mentions.length;
-                        return (
-                            <Link to={`/channel/${x._id}`}>
-                                <ServerEntry
-                                    home
-                                    active={false}
-                                    onContextMenu={attachContextMenu("Menu", {
-                                        channel: x._id,
-                                        unread: true,
-                                    })}>
-                                    <div>
-                                        <Icon
-                                            size={42}
-                                            unread={
-                                                unreadCount > 0
-                                                    ? "mention"
-                                                    : "unread"
-                                            }
-                                            count={unreadCount}>
-                                            {x.channel_type ===
-                                            "DirectMessage" ? (
+        <DragDropContext
+            onDragEnd={(target) => {
+                if (target.destination) {
+                    const arr = [...servers];
+                    arr.splice(
+                        target.destination.index,
+                        0,
+                        arr.splice(target.source.index, 1)[0],
+                    );
+                    setServers(arr);
+                }
+            }}>
+            <ServersBase>
+                <Droppable droppableId="server_list">
+                    {(provided) => (
+                        <ServerList
+                            ref={provided.innerRef}
+                            {...provided.droppableProps}>
+                            <ConditionalLink
+                                active={homeActive}
+                                to={state.layout.getLastHomePath()}>
+                                <ServerEntry home active={homeActive}>
+                                    <Swoosh />
+                                    <div
+                                        onContextMenu={attachContextMenu(
+                                            "Status",
+                                        )}
+                                        onClick={() =>
+                                            homeActive &&
+                                            history.push("/settings")
+                                        }>
+                                        <UserHover
+                                            user={client.user ?? undefined}>
+                                            <Icon
+                                                size={42}
+                                                unread={
+                                                    alertCount > 0
+                                                        ? "mention"
+                                                        : undefined
+                                                }
+                                                count={alertCount}>
                                                 <UserIcon
-                                                    target={x.recipient}
+                                                    target={
+                                                        client.user ?? undefined
+                                                    }
                                                     size={32}
+                                                    status
                                                     hover
                                                 />
-                                            ) : (
-                                                <ChannelIcon
-                                                    target={x}
-                                                    size={32}
-                                                    hover
-                                                />
-                                            )}
-                                        </Icon>
+                                            </Icon>
+                                        </UserHover>
                                     </div>
                                 </ServerEntry>
-                            </Link>
-                        );
-                    })}
-                <LineDivider />
-                {servers.map((server) => {
-                    const active = server._id === server_id;
+                            </ConditionalLink>
+                            {channels
+                                .filter(
+                                    (x) =>
+                                        (x.channel_type === "DirectMessage" ||
+                                            x.channel_type === "Group") &&
+                                        x.unread,
+                                )
+                                .map((x) => {
+                                    const unreadCount = x.mentions.length;
+                                    return (
+                                        <Link to={`/channel/${x._id}`}>
+                                            <ServerEntry
+                                                home
+                                                active={false}
+                                                onContextMenu={attachContextMenu(
+                                                    "Menu",
+                                                    {
+                                                        channel: x._id,
+                                                        unread: true,
+                                                    },
+                                                )}>
+                                                <div>
+                                                    <Icon
+                                                        size={42}
+                                                        unread={
+                                                            unreadCount > 0
+                                                                ? "mention"
+                                                                : "unread"
+                                                        }
+                                                        count={unreadCount}>
+                                                        {x.channel_type ===
+                                                        "DirectMessage" ? (
+                                                            <UserIcon
+                                                                target={
+                                                                    x.recipient
+                                                                }
+                                                                size={32}
+                                                                hover
+                                                            />
+                                                        ) : (
+                                                            <ChannelIcon
+                                                                target={x}
+                                                                size={32}
+                                                                hover
+                                                            />
+                                                        )}
+                                                    </Icon>
+                                                </div>
+                                            </ServerEntry>
+                                        </Link>
+                                    );
+                                })}
+                            <LineDivider />
+                            {servers.map((server, index) => {
+                                const active = server._id === server_id;
 
-                    const isUnread = server.isUnread(state.notifications);
-                    const mentionCount = server.getMentions(
-                        state.notifications,
-                    ).length;
+                                const isUnread = server.isUnread(
+                                    state.notifications,
+                                );
+                                const mentionCount = server.getMentions(
+                                    state.notifications,
+                                ).length;
 
-                    return (
-                        <ConditionalLink
-                            key={server._id}
-                            active={active}
-                            to={state.layout.getServerPath(server._id)}>
-                            <ServerEntry
-                                active={active}
-                                onContextMenu={attachContextMenu("Menu", {
-                                    server: server._id,
-                                    unread: isUnread,
-                                })}>
-                                <Swoosh />
+                                return (
+                                    <Draggable
+                                        key={server._id}
+                                        draggableId={server._id}
+                                        index={index}>
+                                        {(provided, snapshot) => (
+                                            <div
+                                                {...provided.draggableProps}
+                                                {...provided.dragHandleProps}
+                                                ref={provided.innerRef}>
+                                                <ConditionalLink
+                                                    active={active}
+                                                    to={state.layout.getServerPath(
+                                                        server._id,
+                                                    )}>
+                                                    <ServerEntry
+                                                        active={active}
+                                                        onContextMenu={attachContextMenu(
+                                                            "Menu",
+                                                            {
+                                                                server: server._id,
+                                                                unread: isUnread,
+                                                            },
+                                                        )}>
+                                                        {!snapshot.isDragging && (
+                                                            <Swoosh />
+                                                        )}
+
+                                                        <Tooltip
+                                                            content={
+                                                                server.name
+                                                            }
+                                                            placement="right">
+                                                            <Icon
+                                                                size={42}
+                                                                unread={
+                                                                    mentionCount >
+                                                                    0
+                                                                        ? "mention"
+                                                                        : isUnread
+                                                                        ? "unread"
+                                                                        : undefined
+                                                                }
+                                                                count={
+                                                                    mentionCount
+                                                                }>
+                                                                <ServerIcon
+                                                                    size={32}
+                                                                    target={
+                                                                        server
+                                                                    }
+                                                                />
+                                                            </Icon>
+                                                        </Tooltip>
+                                                    </ServerEntry>
+                                                </ConditionalLink>
+                                            </div>
+                                        )}
+                                    </Draggable>
+                                );
+                            })}
+                            {provided.placeholder}
+                            <ServerCircle>
                                 <Tooltip
-                                    content={server.name}
+                                    content="Add a Server"
                                     placement="right">
-                                    <Icon
-                                        size={42}
-                                        unread={
-                                            mentionCount > 0
-                                                ? "mention"
-                                                : isUnread
-                                                ? "unread"
-                                                : undefined
-                                        }
-                                        count={mentionCount}>
-                                        <ServerIcon size={32} target={server} />
-                                    </Icon>
+                                    <div className="circle">
+                                        <IconButton
+                                            onClick={() =>
+                                                openScreen({
+                                                    id: "special_input",
+                                                    type: "create_server",
+                                                })
+                                            }>
+                                            <Plus size={32} />
+                                        </IconButton>
+                                    </div>
                                 </Tooltip>
-                            </ServerEntry>
-                        </ConditionalLink>
-                    );
-                })}
-                {/*<LineDivider />*/}
-                <ServerCircle>
-                    <Tooltip content="Add a Server" placement="right">
-                        <div className="circle">
-                            <IconButton
-                                onClick={() =>
-                                    openScreen({
-                                        id: "special_input",
-                                        type: "create_server",
-                                    })
-                                }>
-                                <Plus size={32} />
-                            </IconButton>
-                        </div>
-                    </Tooltip>
-                </ServerCircle>
-                <ServerCircle>
-                    <Tooltip
-                        content={
-                            <div
-                                style={{
-                                    display: "flex",
-                                    alignItems: "center",
-                                    gap: "4px",
-                                }}>
-                                <div>Discover Public Servers</div>
-                                <LinkExternal size={12} />
-                            </div>
-                        }
-                        placement="right">
-                        <div className="circle">
-                            <IconButton>
-                                <a
-                                    href="https://revolt.social"
-                                    target="_blank"
-                                    rel="noreferrer">
-                                    <Compass size={32} />
-                                </a>
-                            </IconButton>
-                        </div>
-                    </Tooltip>
-                </ServerCircle>
-            </ServerList>
-            <PaintCounter small />
-            {!isTouchscreenDevice && (
-                <SettingsButton>
-                    <Link to="/settings">
-                        <Tooltip
-                            content={<Text id="app.settings.title" />}
-                            placement="right">
-                            <IconButton>
-                                <Cog size={32} strokeWidth="0.5" />
-                            </IconButton>
-                        </Tooltip>
-                    </Link>
-                </SettingsButton>
-            )}
-        </ServersBase>
+                            </ServerCircle>
+                            <ServerCircle>
+                                <Tooltip
+                                    content={
+                                        <div
+                                            style={{
+                                                display: "flex",
+                                                alignItems: "center",
+                                                gap: "4px",
+                                            }}>
+                                            <div>Discover Public Servers</div>
+                                            <LinkExternal size={12} />
+                                        </div>
+                                    }
+                                    placement="right">
+                                    <div className="circle">
+                                        <IconButton>
+                                            <a
+                                                href="https://revolt.social"
+                                                target="_blank"
+                                                rel="noreferrer">
+                                                <Compass size={32} />
+                                            </a>
+                                        </IconButton>
+                                    </div>
+                                </Tooltip>
+                            </ServerCircle>
+                        </ServerList>
+                    )}
+                </Droppable>
+                <PaintCounter small />
+                {!isTouchscreenDevice && (
+                    <SettingsButton>
+                        <Link to="/settings">
+                            <Tooltip
+                                content={<Text id="app.settings.title" />}
+                                placement="right">
+                                <IconButton>
+                                    <Cog size={32} strokeWidth="0.5" />
+                                </IconButton>
+                            </Tooltip>
+                        </Link>
+                    </SettingsButton>
+                )}
+            </ServersBase>
+        </DragDropContext>
     );
 });
diff --git a/vite.config.ts b/vite.config.ts
index 247f1f32..781f9b9e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,7 +2,6 @@ import replace from "@rollup/plugin-replace";
 import { readFileSync } from "fs";
 import { resolve } from "path";
 import { defineConfig } from "vite";
-import viteCompression from "vite-plugin-compression";
 import { VitePWA } from "vite-plugin-pwa";
 
 import preact from "@preact/preset-vite";
@@ -43,10 +42,6 @@ function getVersion() {
 
 export default defineConfig({
     plugins: [
-        viteCompression({
-            verbose: true,
-            algorithm: "brotliCompress",
-        }),
         preact(),
         VitePWA({
             srcDir: "src",
diff --git a/yarn.lock b/yarn.lock
index 688dfdfb..5ade8187 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1887,7 +1887,7 @@ chalk@^2.0.0:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^4.0.0, chalk@^4.1.2:
+chalk@^4.0.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -4357,15 +4357,6 @@ value-equal@^1.0.1:
   resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
   integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
 
-vite-plugin-compression@^0.3.6:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/vite-plugin-compression/-/vite-plugin-compression-0.3.6.tgz#85e3ce5047ae6747bc3952177177a852fac901be"
-  integrity sha512-aSskQCJsP3VQ8PsnY+vO7UfD5qoFMOEuzg0PG2E9Zqyx+ARmc3wr9KCgOFraZOFW1Y4UAa5BR0SMTjoxHRMJoQ==
-  dependencies:
-    chalk "^4.1.2"
-    debug "^4.3.2"
-    fs-extra "^10.0.0"
-
 vite-plugin-pwa@^0.8.1:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/vite-plugin-pwa/-/vite-plugin-pwa-0.8.2.tgz#2789a157e2f71faf834d968945efc22eee9ad64a"