diff --git a/web/shared/icons/popover-arrow.svg b/web/shared/icons/popover-arrow.svg
deleted file mode 100644
index 5c82bd8fff..0000000000
--- a/web/shared/icons/popover-arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M16 8L8.793 0.347826C8.35587 -0.115942 7.64413 -0.115942 7.20701 0.347826C7.20701 0.347826 2.90369 4.91934 0 8H16Z" fill="white"/>
-</svg>
diff --git a/web/src/bundles/app.ts b/web/src/bundles/app.ts
index d98c0e74c8..7438d14a3d 100644
--- a/web/src/bundles/app.ts
+++ b/web/src/bundles/app.ts
@@ -15,6 +15,9 @@ import "../zulip_test";
 
 // Import styles
 import "tippy.js/dist/tippy.css";
+// Adds color inheritance to the borders when using the default CSS Arrow.
+// https://atomiks.github.io/tippyjs/v6/themes/#arrow-border
+import "tippy.js/dist/border.css";
 import "tippy.js/themes/light-border.css";
 import "spectrum-colorpicker/spectrum.css";
 import "katex/dist/katex.css";
diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index a147a28aa5..5edbc9ca8f 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -151,6 +151,15 @@
     /* Gap between tabs in the tab picker */
     --grid-gap-tab-picker: 2px;
 
+    /*
+    The tippy arrow which matches the color of the popover's border,
+    is formed by stacking two arrows on top of each other, via the
+    use of `::before` and `::after` pseudo-elements. This value overrides
+    the offset of the `::before` pseudo element to create a thicker border,
+    visually consistent with that of it's parent popover.
+    */
+    --popover-tippy-arrow-before-offset: -6.5px;
+
     /* Colors used across the app */
     --color-date: hsl(0deg 0% 15% / 75%);
     --color-background-private-message-header: hsl(46deg 35% 93%);
diff --git a/web/styles/popovers.css b/web/styles/popovers.css
index bd2cc9fc80..2bb8567bd3 100644
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -82,30 +82,33 @@
 }
 
 .tippy-box[data-theme="popover-menu"] {
-    border: 0;
+    background-color: var(--color-background-popover-menu);
+    border: 1px solid var(--color-border-popover-menu);
     border-radius: 6px;
+    box-shadow: var(--box-shadow-popover-menu);
 
     > .tippy-content {
         padding: 0;
     }
 
     > .tippy-arrow {
-        top: -5.5px;
-        width: 16px;
-        height: 8px;
-        z-index: 1;
-        filter: drop-shadow(0 -1.25px 0 var(--color-border-dropdown-menu));
+        color: var(--color-background-popover-menu);
+    }
 
-        &::before {
-            content: "";
-            top: 0;
-            width: 100%;
-            height: 100%;
-            mask-image: url("../shared/icons/popover-arrow.svg");
-            mask-size: contain;
-            mask-repeat: no-repeat;
-            color: var(--color-background-dropdown-menu);
-        }
+    &[data-placement^="top"] > .tippy-arrow::before {
+        bottom: var(--popover-tippy-arrow-before-offset);
+    }
+
+    &[data-placement^="bottom"] > .tippy-arrow::before {
+        top: var(--popover-tippy-arrow-before-offset);
+    }
+
+    &[data-placement^="left"] > .tippy-arrow::before {
+        right: var(--popover-tippy-arrow-before-offset);
+    }
+
+    &[data-placement^="right"] > .tippy-arrow::before {
+        left: var(--popover-tippy-arrow-before-offset);
     }
 }
 
@@ -1230,13 +1233,10 @@ ul {
 
 .popover-menu {
     margin: 0;
-    border: 1px solid var(--color-border-popover-menu);
-    background-color: var(--color-background-popover-menu);
     max-height: 85vh;
     overflow-x: hidden;
     user-select: none;
     border-radius: 6px;
-    box-shadow: var(--box-shadow-popover-menu);
 
     .simplebar-content {
         min-width: var(--popover-menu-min-width);