diff --git a/.changeset/thin-days-leave.md b/.changeset/thin-days-leave.md
new file mode 100644
index 0000000000..7378261459
--- /dev/null
+++ b/.changeset/thin-days-leave.md
@@ -0,0 +1,8 @@
+---
+"@stackoverflow/stacks": minor
+---
+
+Update popover component to match SHINE styles
+
+BREAKING CHANGES:
+- `s-popover--arrow` css class has been removed
\ No newline at end of file
diff --git a/MIGRATION_GUIDE.md b/MIGRATION_GUIDE.md
index 005a7b270a..1814d44735 100755
--- a/MIGRATION_GUIDE.md
+++ b/MIGRATION_GUIDE.md
@@ -16,6 +16,11 @@
 - `.blr-sm` removed
 - `.blr-lg` removed
 
+### Components
+
+#### Popover
+- The new popovers no longer include an arrow element. The `s-popover--arrow` css class has been removed, and any markup using it (e.g. `<div class="s-popover--arrow"></div>`) should be deleted from the codebases as part of the migration.
+
 # Migrating from Stacks Svelte v0 to v1
 
 Coming soon…
diff --git a/packages/stacks-classic/lib/components/popover/popover.less b/packages/stacks-classic/lib/components/popover/popover.less
index 63e63b92e2..f8b213dc8a 100644
--- a/packages/stacks-classic/lib/components/popover/popover.less
+++ b/packages/stacks-classic/lib/components/popover/popover.less
@@ -5,18 +5,6 @@
     --_po-d: none;
     --_po-wmn: 12rem;
     --_po-w: 100%;
-    // arrow
-    --_po-arrow-fc: var(--white);
-    --_po-arrow-b: unset;
-    --_po-arrow-l: unset;
-    --_po-arrow-r: unset;
-    --_po-arrow-t: unset;
-    --_po-arrow-ps: calc(var(--su6) * -1); // ps suffix used for placement, not positioning value
-    --_po-arrow-after-b: unset;
-    --_po-arrow-after-l: unset;
-    --_po-arrow-after-r: unset;
-    --_po-arrow-after-t: unset;
-    --_po-arrow-after-bs: unset;
     // content
     // --_po-topbar-height assumes the topbar height based on topbar styles
     --_po-topbar-height: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
@@ -27,7 +15,6 @@
         --_po-bg: var(--black-200);
         --_po-bc: var(--bc-light);
         --_po-bs: var(--bs-lg);
-        --_po-arrow-fc: var(--black-200);
     });
 
     // MODIFIERS
@@ -41,91 +28,6 @@
     }
 
     // CHILD ELEMENTS
-    // Arrow
-    &[data-popper-placement^="top"] > &--arrow,
-    & &--arrow__bc,
-    & &--arrow__bl,
-    & &--arrow__br {
-        --_po-arrow-b: var(--_po-arrow-ps);
-        --_po-arrow-after-b: var(--su-static1);
-        --_po-arrow-after-bs: 2px 2px 5px 0 hsla(0, 0%, 0%, 0.07), 2px 2px 2px -1px hsla(0, 0%, 0%, 0.1);
-        .highcontrast-mode({ --_po-arrow-after-bs: 1px 1px 0 0 var(--bc-medium); });
-    }
-    &[data-popper-placement^="bottom"] > &--arrow,
-    & &--arrow__tc,
-    & &--arrow__tl,
-    & &--arrow__tr {
-        --_po-arrow-t: var(--_po-arrow-ps);
-        --_po-arrow-after-t: var(--su-static1);
-        --_po-arrow-after-bs: -1px -1px 1px 0 hsla(0, 0%, 0%, 0.12);
-        .highcontrast-mode({ --_po-arrow-after-bs: -1px -1px 0 0 var(--bc-medium); });
-    }
-    &[data-popper-placement^="left"] > &--arrow,
-    & &--arrow__rc,
-    & &--arrow__rt,
-    & &--arrow__rb {
-        --_po-arrow-r: var(--_po-arrow-ps);
-        --_po-arrow-after-r: var(--su-static1);
-        --_po-arrow-after-bs: 2px -2px 5px 0 hsla(0, 0%, 0%, 0.07), 2px -2px 2px -1px hsla(0, 0%, 0%, 0.1);
-        .highcontrast-mode({ --_po-arrow-after-bs: 1px -1px 0 0 var(--bc-medium); });
-    }
-    &[data-popper-placement^="right"] > &--arrow,
-    & &--arrow__lc,
-    & &--arrow__lt,
-    & &--arrow__lb {
-        --_po-arrow-l: var(--_po-arrow-ps);
-        --_po-arrow-after-l: var(--su-static1);
-        --_po-arrow-after-bs: -2px 2px 5px 0 hsla(0, 0%, 0%, 0.07), -2px 2px 2px -1px hsla(0, 0%, 0%, 0.1);
-        .highcontrast-mode({ --_po-arrow-after-bs: -1px 1px 0 0 var(--bc-medium); });
-    }
-    & &--arrow__tc,
-    & &--arrow__bc {
-        --_po-arrow-l: calc(50% - var(--su6));
-    }
-    & &--arrow__lc,
-    & &--arrow__rc {
-        --_po-arrow-t: calc(50% - var(--su6));
-    }
-    & &--arrow__tr,
-    .s-popover--arrow__br {
-        --_po-arrow-r: var(--su12);
-    }
-    & &--arrow__rb,
-    & &--arrow__lb {
-        --_po-arrow-b: var(--su12);
-    }
-    & &--arrow {
-        &,
-        &:before,
-        &:after {
-            display: block;
-            height: var(--su12);
-            position: absolute;
-            width: var(--su12);
-            z-index: -1;
-        }
-        &:before, // This renders our border
-        &:after {
-            content: '';
-            transform: rotate(45deg);
-        }
-        &:after { // This renders our foreground color
-            bottom: var(--_po-arrow-after-b);
-            box-shadow: var(--_po-arrow-after-bs);
-            left: var(--_po-arrow-after-l);
-            right: var(--_po-arrow-after-r);
-            top: var(--_po-arrow-after-t);
-
-            background: currentColor;
-            border-radius: calc(var(--su-static1) * 1.5);
-        }
-
-        bottom: var(--_po-arrow-b);
-        color: var(--_po-arrow-fc);
-        left: var(--_po-arrow-l);
-        right: var(--_po-arrow-r);
-        top: var(--_po-arrow-t);
-    }
     // Close btn
     & &--close {
         float: right; // Use floats for title wrapping
diff --git a/packages/stacks-classic/lib/components/popover/popover.ts b/packages/stacks-classic/lib/components/popover/popover.ts
index b41a417efa..137d47069d 100644
--- a/packages/stacks-classic/lib/components/popover/popover.ts
+++ b/packages/stacks-classic/lib/components/popover/popover.ts
@@ -231,12 +231,6 @@ export abstract class BasePopoverController extends Stacks.StacksController {
                         offset: [0, 10], // The entire popover should be 10px away from the element
                     },
                 },
-                {
-                    name: "arrow",
-                    options: {
-                        element: ".s-popover--arrow",
-                    },
-                },
             ],
         });
     }
diff --git a/packages/stacks-classic/lib/components/popover/tooltip.test.ts b/packages/stacks-classic/lib/components/popover/tooltip.test.ts
index 17933ad394..916bf9246c 100644
--- a/packages/stacks-classic/lib/components/popover/tooltip.test.ts
+++ b/packages/stacks-classic/lib/components/popover/tooltip.test.ts
@@ -80,7 +80,6 @@ describe("tooltip", () => {
                 role="tooltip"
                 data-testid="tooltip"
             >
-                <div class="s-popover--arrow"></div>
                 <div class="s-popover--content">
                     <a href="#" data-testid="link">View more</a>
                 </div>
@@ -113,7 +112,6 @@ describe("tooltip", () => {
                 role="tooltip"
                 data-testid="tooltip"
             >
-                <div class="s-popover--arrow"></div>
                 <div class="s-popover--content">
                     <a href="#">View more</a>
                 </div>
diff --git a/packages/stacks-classic/lib/components/popover/tooltip.ts b/packages/stacks-classic/lib/components/popover/tooltip.ts
index 169a1dde34..0ece2e3ddb 100644
--- a/packages/stacks-classic/lib/components/popover/tooltip.ts
+++ b/packages/stacks-classic/lib/components/popover/tooltip.ts
@@ -137,22 +137,10 @@ export class TooltipController extends BasePopoverController {
             }
         }
 
-        const arrow = popover.querySelector(".s-popover--arrow");
-
         // clear and set the content of the popover
         popover.innerHTML = "";
         popover.appendChild(content);
 
-        // create the arrow if necessary
-        if (arrow) {
-            popover.appendChild(arrow);
-        } else {
-            popover.insertAdjacentHTML(
-                "beforeend",
-                `<div class="s-popover--arrow"></div>`
-            );
-        }
-
         this.scheduleUpdate();
 
         return popover;
diff --git a/packages/stacks-docs/_data/popovers.json b/packages/stacks-docs/_data/popovers.json
index 86d1153092..5add1deda9 100644
--- a/packages/stacks-docs/_data/popovers.json
+++ b/packages/stacks-docs/_data/popovers.json
@@ -20,77 +20,10 @@
       "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
       "description": "Used to dismiss a popover"
     },
-    {
-      "class": ".s-popover--arrow",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "When combined with JavaScript data attributes, this arrow element will be positioned automatically"
-    },
     {
         "class": ".s-popover--content",
         "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
         "description": "Wrapper around the popover content to apply appropriate overflow styles"
     }
-  ],
-  "manual": [
-    {
-      "class": ".s-popover--arrow__tc",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears top center"
-    },
-    {
-      "class": ".s-popover--arrow__tl",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears top left"
-    },
-    {
-      "class": ".s-popover--arrow__tr",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears top right"
-    },
-    {
-      "class": ".s-popover--arrow__bc",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears bottom center"
-    },
-    {
-      "class": ".s-popover--arrow__bl",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears bottom left"
-    },
-    {
-      "class": ".s-popover--arrow__br",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears bottom right"
-    },
-    {
-      "class": ".s-popover--arrow__rc",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears right center"
-    },
-    {
-      "class": ".s-popover--arrow__rt",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears right top"
-    },
-    {
-      "class": ".s-popover--arrow__rb",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears right bottom"
-    },
-    {
-      "class": ".s-popover--arrow__lc",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears left center"
-    },
-    {
-      "class": ".s-popover--arrow__lt",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears left top"
-    },
-    {
-      "class": ".s-popover--arrow__lb",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears left bottom"
-    }
   ]
 }
\ No newline at end of file
diff --git a/packages/stacks-docs/_data/site-navigation.json b/packages/stacks-docs/_data/site-navigation.json
index 08a4ac4643..f22d6fba92 100644
--- a/packages/stacks-docs/_data/site-navigation.json
+++ b/packages/stacks-docs/_data/site-navigation.json
@@ -286,7 +286,8 @@
             },
             {
               "title": "Popovers",
-              "url": "/product/components/popovers/"
+              "url": "/product/components/popovers/",
+              "new": true
             },
             {
               "title": "Post summary",
diff --git a/packages/stacks-docs/_includes/header.html b/packages/stacks-docs/_includes/header.html
index 9d8376ce18..93105f7f2c 100644
--- a/packages/stacks-docs/_includes/header.html
+++ b/packages/stacks-docs/_includes/header.html
@@ -75,7 +75,6 @@
         <div class="s-popover w-auto wmn-initial wmx-initial"
              id="theming-popover"
              role="menu">
-            <div class="s-popover--arrow"></div>
             <div class="s-popover--content">
                 <div class="d-flex fd-column g12">
                     <div class="d-flex ai-center jc-space-between g8">
diff --git a/packages/stacks-docs/_includes/layouts/home.html b/packages/stacks-docs/_includes/layouts/home.html
index 2969aa70c7..48a1fc5cc6 100644
--- a/packages/stacks-docs/_includes/layouts/home.html
+++ b/packages/stacks-docs/_includes/layouts/home.html
@@ -167,7 +167,6 @@
                 <div class="s-popover w-auto wmn-initial wmx-initial"
                      id="theming-popover"
                      role="menu">
-                    <div class="s-popover--arrow"></div>
                     <div class="d-flex fd-column g12">
                         <div class="d-flex ai-center jc-space-between g8">
                             <label class="s-label fs-body1 fw-normal" for="toggle-theme-dark">Dark mode</label>
diff --git a/packages/stacks-docs/assets/js/entry.popovers.js b/packages/stacks-docs/assets/js/entry.popovers.js
index c4d74994d0..c98d6c4b99 100644
--- a/packages/stacks-docs/assets/js/entry.popovers.js
+++ b/packages/stacks-docs/assets/js/entry.popovers.js
@@ -13,7 +13,7 @@ $(document).ready(function() {
         load() {
             if (this.loaded) { return; }
             setTimeout(() => {
-                Stacks.attachPopover(this.element, `<div class="s-popover wmx1"><div class="s-popover--arrow"></div><ul class="s-menu mxn12 myn8" role="menu"><li role="menuitem"><button class="s-block-link">Share</button></li><li role="menuitem"><button class="s-block-link">Edit</button></li><li role="menuitem"><button class="s-block-link">Flag</button></li><li class="s-menu--divider" role="separator"></li><li role="menuitem"><button class="s-block-link s-block-link__danger">Delete</button></li></ul></div>`, { autoShow: true, toggleOnClick: true, placement: "bottom" });
+                Stacks.attachPopover(this.element, `<div class="s-popover wmx1"><ul class="s-menu mxn12 myn8" role="menu"><li role="menuitem"><button class="s-block-link">Share</button></li><li role="menuitem"><button class="s-block-link">Edit</button></li><li role="menuitem"><button class="s-block-link">Flag</button></li><li class="s-menu--divider" role="separator"></li><li role="menuitem"><button class="s-block-link s-block-link__danger">Delete</button></li></ul></div>`, { autoShow: true, toggleOnClick: true, placement: "bottom" });
                 this.loaded = true;
             });
         },
diff --git a/packages/stacks-docs/product/components/menus.html b/packages/stacks-docs/product/components/menus.html
index 10222fda3a..c5c0986ddd 100644
--- a/packages/stacks-docs/product/components/menus.html
+++ b/packages/stacks-docs/product/components/menus.html
@@ -67,7 +67,6 @@
                 <div class="flex--item">
                     <div class="ff-mono mb16">Within a popover</div>
                     <div class="s-popover is-visible ps-relative ws2 px0 py4">
-                        <div class="s-popover--arrow s-popover--arrow__tc"></div>
                         <ul class="s-menu" role="menu">
                             <li role="menuitem">
                                 <a href="#" class="s-block-link">
@@ -154,7 +153,6 @@
 {% endhighlight %}
         <div class="stacks-preview--example">
             <div class="s-popover is-visible ps-relative ws2 px0 py4">
-                <div class="s-popover--arrow s-popover--arrow__tc"></div>
                 <ul class="s-menu" role="menu">
                     <li class="s-menu--title" role="separator">
                         Share via
@@ -206,7 +204,6 @@
 {% endhighlight %}
         <div class="stacks-preview--example">
             <div class="s-popover is-visible ps-relative ws2 px0 py4">
-                <div class="s-popover--arrow s-popover--arrow__tc"></div>
                 <ul class="s-menu" role="menu">
                     <li role="menuitem">
                         <a href="#" class="s-block-link">
@@ -275,7 +272,6 @@
 {% endhighlight %}
         <div class="stacks-preview--example">
             <div class="s-popover is-visible ps-relative ws3 px0 py4">
-                <div class="s-popover--arrow s-popover--arrow__tc"></div>
                 <div class="s-menu" role="menu">
                     <fieldset>
                         <legend class="s-menu--title">Roles</legend>
diff --git a/packages/stacks-docs/product/components/popovers.html b/packages/stacks-docs/product/components/popovers.html
index a10e2b4ecb..36b1ae275c 100644
--- a/packages/stacks-docs/product/components/popovers.html
+++ b/packages/stacks-docs/product/components/popovers.html
@@ -3,7 +3,7 @@
 title: Popovers
 svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-popover--docs
 js: true
-figma: https://svelte.stackoverflow.design/figma/popovers
+figma: https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=1617-27089&t=W4QmlFOpYoEpInDB-0
 description: Popovers are small content containers that provide a contextual overlay. They can be used as in-context feature explanations, dropdowns, or tooltips.
 tags: components
 ---
@@ -33,7 +33,7 @@
 <section class="stacks-section">
     {% header "h2", "Interactive popovers" %}
 
-    <p class="stacks-copy">Stacks provides a Stimulus controller that allows you to interactively display a popover from a source element. Positioning and arrow direction are managed for you by <a href="https://popper.js.org">Popper.js</a>, a powerful popover positioning library we’ve added as a dependency.  These popovers are automatically hidden when user click outside the popover or tap the <kbd>Esc</kbd> key.</kbd></p>
+    <p class="stacks-copy">Stacks provides a Stimulus controller that allows you to interactively display a popover from a source element. Positioning direction are managed for you by <a href="https://popper.js.org">Popper.js</a>, a powerful popover positioning library we've added as a dependency.  These popovers are automatically hidden when user click outside the popover or tap the <kbd>Esc</kbd> key.</kbd></p>
 
     {% header "h3", "Interactive Attributes" %}
     <div class="overflow-x-auto mb32" tabindex="0">
@@ -169,7 +169,6 @@
                     Show example popover
                 </button>
                 <div id="popover-example-1" class="s-popover ws2" role="menu">
-                    <div class="s-popover--arrow"></div>
                     <div class="s-popover--content">
                         <form class="d-flex fd-column g8" role="presentation">
                             <div class="d-flex gy4 fd-column">
@@ -194,7 +193,6 @@
                     Show example popover
                 </button>
                 <div id="popover-example-2" class="s-popover p16" role="menu">
-                    <div class="s-popover--arrow"></div>
                     <div class="s-popover--content">
                         <div class="s-empty-state wmx2">
                             {% spot "EmptyLg", "mb12" %}
@@ -214,44 +212,11 @@
                     <span class="v-visible-sr">info</span>
                 </button>
                 <div id="popover-example-4" class="s-popover" role="menu">
-                    <div class="s-popover--arrow"></div>
                     <div class="s-popover--content">
                         <p>We know you hate spam, and we do too. That’s why we make it easy for you to update your email preferences or unsubscribe at anytime.</p>
                         <p class="mb0">We never share your email address with third parties for marketing purposes.</p>
                     </div>
                 </div>
-                <div class="flex--item ml-auto sm:ml0 sm:mt12"
-                    data-controller="s-popover"
-                    data-s-popover-reference-selector="#reference-element"
-                    data-s-popover-placement="auto"
-                    data-s-popover-auto-show="true"
-                    data-s-popover-hide-on-outside-click="never">
-                    <a id="reference-element" class="s-link s-link__inherit"
-                        aria-controls="popover-example-3"
-                        aria-expanded="true">
-                        Follow question
-                    </a>
-                    <div id="popover-example-3" class="s-popover wmx3">
-                        <div class="s-popover--arrow"></div>
-                        <button class="s-popover--close s-btn s-btn__muted"
-                            aria-label="Close"
-                            data-action="s-popover#toggle">
-                            {% icon "ClearSm" %}
-                        </button>
-
-                        <div class="s-popover--content">
-                            <div class="d-flex ai-center">
-                                <div class="flex--item mr12 fc-orange-400">
-                                    {% spot "Bell" %}
-                                </div>
-
-                                <div class="flex--item">
-                                    Get updates on questions and answers
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
             </div>
         </div>
     </div>
@@ -274,7 +239,6 @@
 <div class="s-popover"
        id="popover-example"
        role="menu">
-    <div class="s-popover--arrow"></div>
     <div class="s-popover--content">
         …
     </div>
@@ -293,7 +257,6 @@
             <div class="s-popover wmn-initial w-auto"
                 id="popover-example"
                 role="menu">
-                <div class="s-popover--arrow"></div>
                 <div class="s-popover--content">
                     Example popover content
                 </div>
@@ -318,7 +281,6 @@
     </button>
 
     <div id="popover-example" class="s-popover is-visible" role="menu">
-        <div class="s-popover--arrow"></div>
         <button class="s-popover--close s-btn s-btn__muted" aria-label="Close"
             data-action="s-popover#toggle">
             @Svg.ClearSm
@@ -332,7 +294,6 @@
         <div class="stacks-preview--example bg-black-100">
             <div class="s-popover ps-relative is-visible">
                 <button class="s-popover--close s-btn s-btn__muted" aria-label="Close">{% icon "ClearSm" %}</button>
-                <div class="s-popover--arrow s-popover--arrow__bl"></div>
                 <div class="s-popover--content">
                     <p class="mb0">Dismissible persistent popover presented with a close button</p>
                 </div>
@@ -376,7 +337,6 @@ <h1 class="s-page-title--header" role="presentation">Lorem ipsum</h1>
                         <div class="s-popover wmn-initial w-auto"
                              id="popover-help-example"
                              role="menu">
-                             <div class="s-popover--arrow"></div>
                              <div class="s-popover--content">
                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                             </div>
@@ -593,7 +553,6 @@ <h1 class="s-page-title--header" role="presentation">Lorem ipsum</h1>
     class="s-popover s-popover__tooltip"
     id="tooltip-example"
     role="tooltip">
-    <div class="s-popover--arrow"></div>
     <div class="s-popover--content">
         …
     </div>
@@ -612,7 +571,6 @@ <h1 class="s-page-title--header" role="presentation">Lorem ipsum</h1>
                 class="s-popover s-popover__tooltip"
                 id="tooltip-example"
                 role="tooltip">
-                <div class="s-popover--arrow"></div>
                 <div class="s-popover--content">
                     <div class="s-empty-state wmx2">
                         {% spot "EmptyLg", "mb12" %}
@@ -642,7 +600,6 @@ <h1 class="s-page-title--header" role="presentation">Lorem ipsum</h1>
 <div class="s-popover"
        id="popover-example"
        role="menu">
-    <div class="s-popover--arrow"></div>
     <div class="s-popover--content">
         …
     </div>
@@ -663,7 +620,6 @@ <h1 class="s-page-title--header" role="presentation">Lorem ipsum</h1>
             <div class="s-popover wmn-initial w-auto"
                 id="popover-example-with-tooltip"
                 role="menu">
-                <div class="s-popover--arrow"></div>
                 <div class="s-popover--content">
                     <div class="tt-uppercase fs-fine fc-light">
                         Saved filters
@@ -679,156 +635,24 @@ <h1 class="s-page-title--header" role="presentation">Lorem ipsum</h1>
 <section class="stacks-section">
     {% header "h2", "Manual placement" %}
     {% tip, "warning", "mb32" %}
-        Our Stimulus popover controller handles the positioning of popovers for you. Popovers <em>can</em> be positioned manually for various legacy reasons, but we recommend using the <code class="stacks-code">s-popover</code> controller’s <code class="stacks-code">placement</code> property instead.
+        Our Stimulus popover controller handles the positioning of popovers for you. Popovers <em>can</em> be positioned manually for various legacy reasons, but we recommend using the <code class="stacks-code">s-popover</code> controller's <code class="stacks-code">placement</code> property instead.
     {% endtip %}
-    {% header "h3", "Manual classes" %}
-    <div class="overflow-x-auto mb32" tabindex="0">
-        <table class="wmn4 s-table s-table__bx-simple">
-            <thead>
-                <tr>
-                    <th class="s-table--cell4" scope="col">Class</th>
-                    <th class="s-table--cell3" scope="col">Applies to</th>
-                    <th scope="col">Description</th>
-                </tr>
-            </thead>
-            <tbody class="fs-caption">
-                {% for item in popovers.manual %}
-                    <tr>
-                        <th scope="row"><code class="stacks-code">{{ item.class }}</code></th>
-                        <td>{{ item.applies }}</td>
-                        <td class="p8">{{ item.description }}</td>
-                    </tr>
-                {% endfor %}
-            </tbody>
-        </table>
-    </div>
-
     {% header "h3", "Manual examples" %}
     <p class="stacks-copy">Popovers can also be positioned manually if you aren’t using the built-in JavaScript interactivity. Practically, this might look like adding something like <code class="stacks-code">t8 l8</code> to <code class="stacks-code">.s-popover</code>.</p>
-    <p class="stacks-copy">Manual positioning for arrows is also provided. Arrow direction (top, right, bottom, left) will appear first, followed by the secondary (center, top, right, bottom, left). For example, a popover with an arrow child of <code class="stacks-code">.s-popover--arrow__tc</code> will appear on the top of the <code class="stacks-code">.s-popover</code> and centered horizontally. Though there are sensible defaults applied to the width of popovers, you may need to adjust manually.</p>
-
     <p class="stacks-copy">By default, popovers are hidden and positioned absolutely. Adding the class <code class="stacks-code">.is-visible</code> will show the popover.</p>
 
-    <p class="stacks-copy">If you want to set the background color to something other than the default, simply add your desired <code class="stacks-code">bg-*</code> class to the <code class="stacks-code">s-popover</code> element and a matching <code class="stacks-code">fc-*</code> class to the <code class="stacks-code">s-popover--arrow</code> element.</p>
-
     <div class="stacks-preview">
 {% highlight html %}
 <div class="s-popover">
-    <div class="s-popover--arrow s-popover--arrow__tc"></div>
     <div class="s-popover--content">
         …
     </div>
 </div>
 {% endhighlight %}
         <div class="stacks-preview--example bg-black-100">
-            <div class="d-flex g16 flex__allitems4 fw-wrap">
-                <div class="flex--item">
-                    <div class="s-popover ps-relative z-base is-visible">
-                        <div class="s-popover--arrow s-popover--arrow__tc"></div>
-                        <div class="s-popover--content">
-                            <p class="ff-mono mb8">.s-popover--arrow__tc</p>
-                            <p class="mb0">Popover arrow appears top center</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex--item">
-                    <div class="s-popover ps-relative z-base is-visible">
-                        <div class="s-popover--arrow s-popover--arrow__tl"></div>
-                        <div class="s-popover--content">
-                            <p class="ff-mono mb8">.s-popover--arrow__tl</p>
-                            <p class="mb0">Popover arrow appears top left</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex--item">
-                    <div class="s-popover ps-relative z-base is-visible">
-                        <div class="s-popover--arrow s-popover--arrow__tr"></div>
-                        <div class="s-popover--content">
-                            <p class="ff-mono mb8">.s-popover--arrow__tr</p>
-                            <p class="mb0">Popover arrow appears top right</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex--item">
-                    <div class="s-popover ps-relative z-base is-visible">
-                        <div class="s-popover--arrow s-popover--arrow__bc"></div>
-                        <div class="s-popover--content">
-                            <p class="ff-mono mb8">.s-popover--arrow__bc</p>
-                            <p class="mb0">Popover arrow appears bottom center</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex--item">
-                    <div class="s-popover ps-relative z-base is-visible">
-                        <div class="s-popover--arrow s-popover--arrow__bl"></div>
-                        <div class="s-popover--content">
-                            <p class="ff-mono mb8">.s-popover--arrow__bl</p>
-                            <p class="mb0">Popover arrow appears bottom left</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex--item">
-                    <div class="s-popover ps-relative z-base is-visible">
-                        <div class="s-popover--arrow s-popover--arrow__br"></div>
-                        <div class="s-popover--content">
-                            <p class="ff-mono mb8">.s-popover--arrow__br</p>
-                            <p class="mb0">Popover arrow appears bottom right</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex--item">
-                    <div class="s-popover ps-relative z-base is-visible">
-                        <div class="s-popover--arrow s-popover--arrow__rc"></div>
-                        <div class="s-popover--content">
-                            <p class="ff-mono mb8">.s-popover--arrow__rc</p>
-                            <p class="mb0">Popover arrow appears right center</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex--item">
-                    <div class="s-popover ps-relative z-base is-visible">
-                        <div class="s-popover--arrow s-popover--arrow__rt"></div>
-                        <div class="s-popover--content">
-                            <p class="ff-mono mb8">.s-popover--arrow__rt</p>
-                            <p class="mb0">Popover arrow appears right top</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex--item">
-                    <div class="s-popover ps-relative z-base is-visible">
-                        <div class="s-popover--arrow s-popover--arrow__rb"></div>
-                        <div class="s-popover--content">
-                            <p class="ff-mono mb8">.s-popover--arrow__rb</p>
-                            <p class="mb0">Popover arrow appears right bottom</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex--item">
-                    <div class="s-popover ps-relative z-base is-visible">
-                        <div class="s-popover--arrow s-popover--arrow__lc"></div>
-                        <div class="s-popover--content">
-                            <p class="ff-mono mb8">.s-popover--arrow__lc</p>
-                            <p class="mb0">Popover arrow appears left center</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex--item">
-                    <div class="s-popover ps-relative z-base is-visible">
-                        <div class="s-popover--arrow s-popover--arrow__lt"></div>
-                        <div class="s-popover--content">
-                            <p class="ff-mono mb8">.s-popover--arrow__lt</p>
-                            <p class="mb0">Popover arrow appears left top</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex--item">
-                    <div class="s-popover ps-relative z-base is-visible">
-                        <div class="s-popover--arrow s-popover--arrow__lb"></div>
-                        <div class="s-popover--content">
-                            <p class="ff-mono mb8">.s-popover--arrow__lb</p>
-                            <p class="mb0">Popover arrow appears left bottom</p>
-                        </div>
-                    </div>
+            <div class="s-popover ps-relative z-base is-visible">
+                <div class="s-popover--content">
+                    <p class="mb0">Example popover with manual placement</p>
                 </div>
             </div>
         </div>
diff --git a/packages/stacks-svelte/src/components/Popover/Popover.svelte b/packages/stacks-svelte/src/components/Popover/Popover.svelte
index 151dfb6611..f75adf648a 100644
--- a/packages/stacks-svelte/src/components/Popover/Popover.svelte
+++ b/packages/stacks-svelte/src/components/Popover/Popover.svelte
@@ -1,6 +1,5 @@
 <script lang="ts" module>
     import type { Snippet } from "svelte";
-    import type { Writable } from "svelte/store";
     import type { Placement } from "@floating-ui/core";
     import { getContext } from "svelte";
 
@@ -14,7 +13,6 @@
         tooltip: boolean;
         floatingRef: (element: HTMLElement) => void;
         floatingContent: (element: HTMLElement) => void;
-        arrowEl: Writable<HTMLElement>;
         onOutclick: (e: CustomEvent<HTMLElement>) => void;
         open: () => void;
         openTooltip: () => void;
@@ -41,9 +39,8 @@
 <script lang="ts">
     import type { Strategy } from "@floating-ui/core";
     import { setContext } from "svelte";
-    import { writable } from "svelte/store";
     import { offset, inline, flip } from "@floating-ui/dom";
-    import { createFloatingActions, arrow } from "svelte-floating-ui";
+    import { createFloatingActions } from "svelte-floating-ui";
 
     interface Props {
         /**
@@ -125,7 +122,6 @@
 
     let reference: HTMLElement;
     let activeTimeout: number;
-    const arrowEl = writable<HTMLElement>();
 
     // if the visible prop is passed, the component is controlled
     const controlled = $derived(visible !== undefined);
@@ -133,18 +129,9 @@
     const [floatingRef, floatingContent, update] = createFloatingActions({
         placement,
         strategy,
-        middleware: [offset(10), flip(), inline(), arrow({ element: arrowEl })],
-        onComputed({ placement: computedPlacement, middlewareData }) {
+        middleware: [offset(10), flip(), inline()],
+        onComputed({ placement: computedPlacement }) {
             pstate.computedPlacement = computedPlacement;
-
-            if (middlewareData.arrow && $arrowEl) {
-                const { x, y } = middlewareData.arrow;
-
-                Object.assign($arrowEl.style, {
-                    left: x != null ? `${x}px` : "",
-                    top: y != null ? `${y}px` : "",
-                });
-            }
         },
     });
 
@@ -216,7 +203,6 @@
             floatingRef(element);
         },
         floatingContent,
-        arrowEl,
         onOutclick,
         open,
         openTooltip,
diff --git a/packages/stacks-svelte/src/components/Popover/PopoverContent.svelte b/packages/stacks-svelte/src/components/Popover/PopoverContent.svelte
index 1f2049b36d..2492d5ba02 100644
--- a/packages/stacks-svelte/src/components/Popover/PopoverContent.svelte
+++ b/packages/stacks-svelte/src/components/Popover/PopoverContent.svelte
@@ -23,8 +23,6 @@
 
     let pstate = usePopoverContext("PopoverContent");
 
-    const arrowEl = pstate.arrowEl;
-
     let classes = $derived.by(() => {
         let result = "s-popover";
         if (pstate.tooltip) {
@@ -60,7 +58,6 @@
     onfocusout={pstate.closeTooltip}
     data-popper-placement={pstate.computedPlacement}
 >
-    <div class="s-popover--arrow" bind:this={$arrowEl}></div>
     <div class="s-popover--content p12 mn12">
         <div class="ps-relative">
             {@render children?.()}