diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/JobsPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/JobsPage.tsx
index 41ed224eb31..5a614c35f45 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/JobsPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferences/JobsPage.tsx
@@ -439,12 +439,13 @@ function JoblessRoleDropdown(props) {
 }
 
 type CharacterSectionsProps = {
+  dragging: number;
   setDragging: (dragging: number) => void;
   setHoveringOver: (hoveringOver: string) => void;
 };
 
 function CharacterSection(props: CharacterSectionsProps) {
-  const { setDragging, setHoveringOver } = props;
+  const { dragging, setDragging, setHoveringOver } = props;
   const { data } = useBackend<PreferencesMenuData>();
   const { character_profiles } = data;
 
@@ -455,13 +456,10 @@ function CharacterSection(props: CharacterSectionsProps) {
       placement="bottom-end"
       content={
         <Box
-          // Dumb way to copy dropdown styling but it works I guess
-          style={{
-            boxShadow: 'var(--dropdown-menu-blur)',
-            backgroundColor: 'var(--dropdown-menu-background)',
-            border: 'var(--dropdown-menu-border)',
-            borderRadius: 'var(--dropdown-menu-border-radius)',
-          }}
+          className={classes([
+            'PreferencesMenu__Jobs__characterMenu',
+            dragging !== -1 && 'PreferencesMenu__Jobs__characterMenu--hidden',
+          ])}
           width="75%"
         >
           <Stack vertical p={1}>
@@ -478,7 +476,11 @@ function CharacterSection(props: CharacterSectionsProps) {
                       <Button
                         draggable
                         color="transparent"
-                        onDragStart={() => setDragging(index)}
+                        onDragStart={() => {
+                          // Deferred so the browser captures the drag image
+                          // before the popup goes invisible
+                          setTimeout(() => setDragging(index), 0);
+                        }}
                         onDragEnd={() => {
                           setDragging(-1);
                           setHoveringOver('');
@@ -514,6 +516,7 @@ export function JobsPage() {
       <Stack>
         <Stack.Item grow>
           <CharacterSection
+            dragging={dragging}
             setDragging={setDragging}
             setHoveringOver={setHoveringOver}
           />
diff --git a/tgui/packages/tgui/styles/interfaces/PreferencesMenu.scss b/tgui/packages/tgui/styles/interfaces/PreferencesMenu.scss
index 031c9b7f4f0..d3de8a4c217 100644
--- a/tgui/packages/tgui/styles/interfaces/PreferencesMenu.scss
+++ b/tgui/packages/tgui/styles/interfaces/PreferencesMenu.scss
@@ -111,6 +111,20 @@
     > * {
       flex: 1;
     }
+
+    &__characterMenu {
+      box-shadow: var(--dropdown-menu-blur);
+      background-color: var(--dropdown-menu-background);
+      border: var(--dropdown-menu-border);
+      border-radius: var(--dropdown-menu-border-radius);
+      transition: opacity 0.35s ease-out;
+
+      &--hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+    }
+
     &__departments {
       &.head {
         background: colors.bg(var(--department-color));