diff --git a/app/soapbox/actions/profile_hover_card.js b/app/soapbox/actions/profile_hover_card.js
new file mode 100644
index 0000000000..90543148d9
Binary files /dev/null and b/app/soapbox/actions/profile_hover_card.js differ
diff --git a/app/soapbox/components/__tests__/__snapshots__/display_name-test.js.snap b/app/soapbox/components/__tests__/__snapshots__/display_name-test.js.snap
index 59789099f1..d26a406a20 100644
--- a/app/soapbox/components/__tests__/__snapshots__/display_name-test.js.snap
+++ b/app/soapbox/components/__tests__/__snapshots__/display_name-test.js.snap
@@ -4,16 +4,22 @@ exports[`<DisplayName /> renders display name + account name 1`] = `
 <span
   className="display-name"
 >
-  <bdi>
-    <strong
-      className="display-name__html"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<p>Foo</p>",
+  <span
+    className="hover-ref-wrapper"
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+  >
+    <bdi>
+      <strong
+        className="display-name__html"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "<p>Foo</p>",
+          }
         }
-      }
-    />
-  </bdi>
+      />
+    </bdi>
+  </span>
   <span
     className="display-name__account"
   >
diff --git a/app/soapbox/components/__tests__/display_name-test.js b/app/soapbox/components/__tests__/display_name-test.js
index 0d040c4cd8..f626f94cab 100644
Binary files a/app/soapbox/components/__tests__/display_name-test.js and b/app/soapbox/components/__tests__/display_name-test.js differ
diff --git a/app/soapbox/components/display_name.js b/app/soapbox/components/display_name.js
index 7ab8b9e607..7d848a9028 100644
Binary files a/app/soapbox/components/display_name.js and b/app/soapbox/components/display_name.js differ
diff --git a/app/soapbox/components/hover_ref_wrapper.js b/app/soapbox/components/hover_ref_wrapper.js
new file mode 100644
index 0000000000..fe6ac2bed8
Binary files /dev/null and b/app/soapbox/components/hover_ref_wrapper.js differ
diff --git a/app/soapbox/components/profile_hover_card.js b/app/soapbox/components/profile_hover_card.js
new file mode 100644
index 0000000000..8d234aa4ba
Binary files /dev/null and b/app/soapbox/components/profile_hover_card.js differ
diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js
index 8acb4e7f57..9e8a2d684b 100644
Binary files a/app/soapbox/components/status.js and b/app/soapbox/components/status.js differ
diff --git a/app/soapbox/features/chats/chat_room.js b/app/soapbox/features/chats/chat_room.js
index f3e81cc120..a9f0ccd5dc 100644
Binary files a/app/soapbox/features/chats/chat_room.js and b/app/soapbox/features/chats/chat_room.js differ
diff --git a/app/soapbox/features/chats/components/chat_window.js b/app/soapbox/features/chats/components/chat_window.js
index acc5c2e8e2..bb1a6346b8 100644
Binary files a/app/soapbox/features/chats/components/chat_window.js and b/app/soapbox/features/chats/components/chat_window.js differ
diff --git a/app/soapbox/features/profile_hover_card/profile_hover_card_container.js b/app/soapbox/features/profile_hover_card/profile_hover_card_container.js
deleted file mode 100644
index d4f706212a..0000000000
Binary files a/app/soapbox/features/profile_hover_card/profile_hover_card_container.js and /dev/null differ
diff --git a/app/soapbox/features/status/components/detailed_status.js b/app/soapbox/features/status/components/detailed_status.js
index d58bd7e72a..131de49ecb 100644
Binary files a/app/soapbox/features/status/components/detailed_status.js and b/app/soapbox/features/status/components/detailed_status.js differ
diff --git a/app/soapbox/features/ui/components/user_panel.js b/app/soapbox/features/ui/components/user_panel.js
index 1ba4e3efca..411b9b70b7 100644
Binary files a/app/soapbox/features/ui/components/user_panel.js and b/app/soapbox/features/ui/components/user_panel.js differ
diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js
index ff80086eee..3f37ffe404 100644
Binary files a/app/soapbox/features/ui/index.js and b/app/soapbox/features/ui/index.js differ
diff --git a/app/soapbox/reducers/index.js b/app/soapbox/reducers/index.js
index 2caec469ad..6f4abdafe7 100644
Binary files a/app/soapbox/reducers/index.js and b/app/soapbox/reducers/index.js differ
diff --git a/app/soapbox/reducers/profile_hover_card.js b/app/soapbox/reducers/profile_hover_card.js
new file mode 100644
index 0000000000..5776a3e87a
Binary files /dev/null and b/app/soapbox/reducers/profile_hover_card.js differ
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 96eb4dcf4a..fdce329ad3 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -27,7 +27,6 @@
 @import 'dyslexic';
 @import 'demetricator';
 @import 'pro';
-@import 'overflow_hacks';
 @import 'chats';
 
 // COMPONENTS
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 29c2f0c4fb..3e2fc2e244 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -322,7 +322,6 @@
   display: flex;
   align-items: center;
   background: var(--accent-color--faint);
-  border-radius: 10px 10px 0 0;
 
   .column-back-button {
     background: transparent;
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index d8034e4974..10e46e441d 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -212,7 +212,6 @@
   font-size: 16px;
   line-height: inherit;
   border: 0;
-  border-radius: 10px 10px 0 0;
   text-align: unset;
   padding: 15px;
   margin: 0;
diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index d53b426ee3..ceab5899c1 100644
--- a/app/styles/components/detailed-status.scss
+++ b/app/styles/components/detailed-status.scss
@@ -62,7 +62,6 @@
   border-bottom: 1px solid var(--brand-color--faint);
   display: flex;
   flex-direction: row;
-  border-radius: 0 0 10px 10px;
 }
 
 .detailed-status__link {
diff --git a/app/styles/components/drawer.scss b/app/styles/components/drawer.scss
index 39e936158b..7dc5a1a10c 100644
--- a/app/styles/components/drawer.scss
+++ b/app/styles/components/drawer.scss
@@ -20,7 +20,7 @@
 .column,
 .drawer {
   flex: 1 1 100%;
-  overflow: visible;
+  overflow: hidden;
 }
 
 .drawer__pager {
diff --git a/app/styles/components/profile_hover_card.scss b/app/styles/components/profile_hover_card.scss
index decb687119..b3fb4fc312 100644
--- a/app/styles/components/profile_hover_card.scss
+++ b/app/styles/components/profile_hover_card.scss
@@ -15,19 +15,14 @@
   transition-duration: 0.2s;
   width: 320px;
   z-index: 200;
-  left: -10px;
-  padding: 20px;
-  margin-bottom: 10px;
+  top: 0;
+  left: 0;
 
   &--visible {
     opacity: 1;
     pointer-events: all;
   }
 
-  @media(min-width: 750px) {
-    left: -100px;
-  }
-
   .profile-hover-card__container {
     @include standard-panel;
     position: relative;
@@ -114,18 +109,12 @@
 .detailed-status {
   .profile-hover-card {
     top: 0;
-    left: 60px;
+    left: 0;
   }
 }
 
-/* Prevent floating avatars from intercepting with current card */
-.status,
-.detailed-status {
-  .floating-link {
-    display: none;
-  }
-
-  &:hover .floating-link {
-    display: block;
-  }
+/* Hide the popper when the reference is hidden */
+#popper[data-popper-reference-hidden] {
+  visibility: hidden;
+  pointer-events: none;
 }
diff --git a/app/styles/loading.scss b/app/styles/loading.scss
index 88705782ee..42a3a0c1f4 100644
--- a/app/styles/loading.scss
+++ b/app/styles/loading.scss
@@ -188,7 +188,6 @@
   align-items: center;
   justify-content: center;
   padding: 20px;
-  border-radius: 0 0 10px 10px;
 
   & > div {
     width: 100%;
diff --git a/app/styles/overflow_hacks.scss b/app/styles/overflow_hacks.scss
deleted file mode 100644
index ef72b6863a..0000000000
--- a/app/styles/overflow_hacks.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-// This is a file dedicated to fixing the css we broke by introducing the hover
-// card and `overflow:visible` on drawer.scss line 23. If we ever figure out how
-// to pop the hover card out while keeping `overflow:hidden`, feel free to delete
-// this entire file.
-
-button.column-header__button.active {
-  border-radius: 0 10px 0 0;
-}
-
-.column-back-button.column-back-button--slim-button {
-  border-radius: 0 10px 0 0;
-}
-
-.detailed-status__wrapper .detailed-status__action-bar {
-  border-radius: 0 0 10px 10px;
-}
-
-.slist .item-list .column-link {
-  background-color: transparent;
-  border-top: 1px solid var(--brand-color--med);
-}
-
-.focusable {
-  &:focus {
-    border-radius: 0 0 10px 10px;
-  }
-}
-
-.load-more:hover {
-  border-radius: 0 0 10px 10px;
-}
-
-// this still looks like shit but at least it's better than it overflowing
-
-.empty-column-indicator {
-  border-radius: 0 0 10px 10px;
-}
diff --git a/package.json b/package.json
index f2fbc4e17d..d42e7b002b 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "@babel/runtime": "^7.3.4",
     "@clusterws/cws": "^0.16.0",
     "@fonticonpicker/react-fonticonpicker": "^1.2.0",
+    "@popperjs/core": "^2.4.4",
     "array-includes": "^3.0.3",
     "autoprefixer": "^9.5.1",
     "axios": "^0.19.0",
@@ -115,6 +116,7 @@
     "react-motion": "^0.5.2",
     "react-notification": "^6.8.4",
     "react-overlays": "^0.8.3",
+    "react-popper": "^2.2.3",
     "react-redux": "^7.2.1",
     "react-redux-loading-bar": "^4.5.0",
     "react-router-dom": "^4.1.1",
diff --git a/yarn.lock b/yarn.lock
index 2ed08b81fa..e1be9d3a8a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1494,6 +1494,11 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
+"@popperjs/core@^2.4.4":
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.4.tgz#11d5db19bd178936ec89cd84519c4de439574398"
+  integrity sha512-1oO6+dN5kdIA3sKPZhRGJTfGVP4SWV6KqlMOwry4J3HfyD68sl/3KmG7DeYUzvN+RbhXDnv/D8vNNB8168tAMg==
+
 "@sinonjs/commons@^1.7.0":
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.0.tgz#c8d68821a854c555bba172f3b06959a0039b236d"
@@ -9495,6 +9500,11 @@ react-fast-compare@^2.0.4:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
+react-fast-compare@^3.0.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
 react-helmet@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.0.0.tgz#fcb93ebaca3ba562a686eb2f1f9d46093d83b5f8"
@@ -9622,6 +9632,14 @@ react-overlays@^0.8.3:
     react-transition-group "^2.2.0"
     warning "^3.0.0"
 
+react-popper@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.3.tgz#33d425fa6975d4bd54d9acd64897a89d904b9d97"
+  integrity sha512-mOEiMNT1249js0jJvkrOjyHsGvqcJd3aGW/agkiMoZk3bZ1fXN1wQszIQSjHIai48fE67+zwF8Cs+C4fWqlfjw==
+  dependencies:
+    react-fast-compare "^3.0.1"
+    warning "^4.0.2"
+
 react-redux-loading-bar@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/react-redux-loading-bar/-/react-redux-loading-bar-4.5.0.tgz#96538d0ba041463d810e213fb54eadbce9628266"
@@ -11883,6 +11901,13 @@ warning@^4.0.1:
   dependencies:
     loose-envify "^1.0.0"
 
+warning@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"