diff --git a/docs/src/data/tailwind-migration-status.yaml b/docs/src/data/tailwind-migration-status.yaml
index ae7cb348bc..3b9d8e7911 100644
--- a/docs/src/data/tailwind-migration-status.yaml
+++ b/docs/src/data/tailwind-migration-status.yaml
@@ -65,7 +65,7 @@ NavigationBar: true
 NotificationBadge: true
 OrbitProvider: true
 Pagination: false
-Popover: false
+Popover: true
 Portal: true
 Radio: true
 NewSeatIcon: false
diff --git a/packages/orbit-components/cypress/integration/pages/lock-scrolling.test.ts b/packages/orbit-components/cypress/integration/pages/lock-scrolling.test.ts
index e2aeb6a684..0dc8756fe2 100644
--- a/packages/orbit-components/cypress/integration/pages/lock-scrolling.test.ts
+++ b/packages/orbit-components/cypress/integration/pages/lock-scrolling.test.ts
@@ -6,7 +6,7 @@ describe("useLockScrolling", () => {
   it("should listen for viewport resize", () => {
     cy.viewport(breakpoint - 1, 600);
     cy.visit("/lock-scrolling");
-    cy.findByRole("button", { name: "Open" }).click();
+    cy.findAllByRole("button", { name: "Open" }).eq(1).click();
     cy.get("body").should("have.css", "overflow-y", "hidden");
     // cy.get("body").should("have.css", "padding-right", "15px");
     cy.viewport(breakpoint, 600);
@@ -20,8 +20,8 @@ describe("useLockScrolling", () => {
   it("should unlock scrolling after last lock is cleared", () => {
     cy.viewport(breakpoint - 1, 600);
     cy.visit("/lock-scrolling");
-    cy.findByRole("button", { name: "Open" }).click();
-    cy.findByRole("button", { name: "Open nested" }).click();
+    cy.findAllByRole("button", { name: "Open" }).eq(1).click();
+    cy.findAllByRole("button", { name: "Open nested" }).eq(1).click();
     cy.findByRole("button", { name: "Close nested" }).click();
     cy.get("body").should("have.css", "overflow-y", "hidden");
     cy.findByRole("button", { name: "Close" }).click();
diff --git a/packages/orbit-components/src/Popover/Popover.ct-story.tsx b/packages/orbit-components/src/Popover/Popover.ct-story.tsx
new file mode 100644
index 0000000000..6239bca6e5
--- /dev/null
+++ b/packages/orbit-components/src/Popover/Popover.ct-story.tsx
@@ -0,0 +1,82 @@
+import React from "react";
+import type { Placement } from "@popperjs/core/lib/enums";
+
+import Text from "../Text";
+import Button from "../Button";
+import Stepper from "../Stepper";
+import Stack from "../Stack";
+
+import Popover from ".";
+
+const content = <Text>Popover content</Text>;
+
+const selects = (
+  <Stack direction="column">
+    <Stack flex shrink align="center" justify="between">
+      <Stack flex direction="column" spacing="none">
+        <Text>Adult</Text>
+        <Text type="secondary">11+</Text>
+      </Stack>
+      <Stepper minValue={0} />
+    </Stack>
+    <Stack flex shrink align="center" justify="between">
+      <Stack flex direction="column" spacing="none">
+        <Text>Child</Text>
+        <Text type="secondary">2-11</Text>
+      </Stack>
+      <Stepper minValue={0} />
+    </Stack>
+  </Stack>
+);
+
+export function DefaultPopover() {
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <Popover opened content={content}>
+        <Button>open popover</Button>
+      </Popover>
+    </div>
+  );
+}
+
+export function PopoverWithCustomWidth() {
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <Popover opened content={content} width="400px">
+        <Button>open popover</Button>
+      </Popover>
+    </div>
+  );
+}
+
+export const PopoverPlacements = ({ placement }: { placement: Placement }) => (
+  <div className="flex h-screen items-center justify-center">
+    <Popover opened content={content} placement={placement}>
+      <Button>open popover</Button>
+    </Popover>
+  </div>
+);
+
+export const PopoverWithFixedPosition = () => (
+  <div className="flex h-screen items-center justify-center">
+    <Popover opened content={content} fixed>
+      <Button>open popover</Button>
+    </Popover>
+  </div>
+);
+
+export const PopoverOverlapped = () => (
+  <div className="flex h-screen items-center justify-center">
+    <Popover opened content={content} overlapped>
+      <Button>open popover</Button>
+    </Popover>
+  </div>
+);
+
+export const PopoverLongContent = () => (
+  <div className="flex h-screen items-center justify-center">
+    <Popover opened content={<Stack>{Array.from({ length: 8 }).map(() => selects)}</Stack>}>
+      <Button>open popover</Button>
+    </Popover>
+  </div>
+);
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx b/packages/orbit-components/src/Popover/Popover.ct.tsx
new file mode 100644
index 0000000000..1775897430
--- /dev/null
+++ b/packages/orbit-components/src/Popover/Popover.ct.tsx
@@ -0,0 +1,64 @@
+import * as React from "react";
+import { test, expect } from "@playwright/experimental-ct-react";
+
+import {
+  DefaultPopover,
+  PopoverWithCustomWidth,
+  PopoverWithFixedPosition,
+  PopoverPlacements,
+  PopoverOverlapped,
+  PopoverLongContent,
+} from "./Popover.ct-story";
+import { PLACEMENTS } from "../common/consts";
+
+test.describe("visual Popover", () => {
+  test(`screenshot for default`, async ({ mount }, { project }) => {
+    if (project.name === "Desktop") {
+      const component = await mount(<DefaultPopover />);
+
+      await expect(component).toHaveScreenshot();
+    }
+  });
+
+  Object.values(PLACEMENTS).forEach(placement => {
+    test(`screenshot for placement ${placement}`, async ({ mount }, { project }) => {
+      if (project.name === "Desktop") {
+        const component = await mount(<PopoverPlacements placement={placement} />);
+
+        await expect(component).toHaveScreenshot();
+      }
+    });
+  });
+
+  test(`screenshot for custom width`, async ({ mount }, { project }) => {
+    if (project.name === "Desktop") {
+      const component = await mount(<PopoverWithCustomWidth />);
+
+      await expect(component).toHaveScreenshot();
+    }
+  });
+
+  test(`screenshot for fixed position`, async ({ mount }, { project }) => {
+    if (project.name === "Desktop") {
+      const component = await mount(<PopoverWithFixedPosition />);
+
+      await expect(component).toHaveScreenshot();
+    }
+  });
+
+  test(`screenshot for overlapped`, async ({ mount }, { project }) => {
+    if (project.name === "Desktop") {
+      const component = await mount(<PopoverOverlapped />);
+
+      await expect(component).toHaveScreenshot();
+    }
+  });
+
+  test(`screenshot for long content`, async ({ mount }, { project }) => {
+    if (project.name === "Desktop") {
+      const component = await mount(<PopoverLongContent />);
+
+      await expect(component).toHaveScreenshot();
+    }
+  });
+});
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-custom-width-1-Desktop-darwin.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-custom-width-1-Desktop-darwin.png
new file mode 100644
index 0000000000..cb07a584a3
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-custom-width-1-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-custom-width-1-Desktop-linux.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-custom-width-1-Desktop-linux.png
new file mode 100644
index 0000000000..733b906021
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-custom-width-1-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-default-1-Desktop-darwin.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-default-1-Desktop-darwin.png
new file mode 100644
index 0000000000..07583997c2
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-default-1-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-default-1-Desktop-linux.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-default-1-Desktop-linux.png
new file mode 100644
index 0000000000..4a1f73b92f
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-default-1-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-fixed-position-1-Desktop-darwin.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-fixed-position-1-Desktop-darwin.png
new file mode 100644
index 0000000000..511713cba5
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-fixed-position-1-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-fixed-position-1-Desktop-linux.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-fixed-position-1-Desktop-linux.png
new file mode 100644
index 0000000000..e7d02320b3
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-fixed-position-1-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-long-content-1-Desktop-darwin.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-long-content-1-Desktop-darwin.png
new file mode 100644
index 0000000000..6623da1836
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-long-content-1-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-long-content-1-Desktop-linux.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-long-content-1-Desktop-linux.png
new file mode 100644
index 0000000000..d03de503a5
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-long-content-1-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-overlapped-1-Desktop-darwin.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-overlapped-1-Desktop-darwin.png
new file mode 100644
index 0000000000..587c41f512
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-overlapped-1-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-overlapped-1-Desktop-linux.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-overlapped-1-Desktop-linux.png
new file mode 100644
index 0000000000..0f02254619
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-overlapped-1-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-auto-1-Desktop-darwin.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-auto-1-Desktop-darwin.png
new file mode 100644
index 0000000000..1b17f65437
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-auto-1-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-auto-1-Desktop-linux.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-auto-1-Desktop-linux.png
new file mode 100644
index 0000000000..27b2b42869
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-auto-1-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-auto-end-1-Desktop-darwin.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-auto-end-1-Desktop-darwin.png
new file mode 100644
index 0000000000..22051977b4
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-auto-end-1-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-auto-end-1-Desktop-linux.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-auto-end-1-Desktop-linux.png
new file mode 100644
index 0000000000..8586cfc4d0
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-auto-end-1-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-auto-start-1-Desktop-darwin.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-auto-start-1-Desktop-darwin.png
new file mode 100644
index 0000000000..22051977b4
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-auto-start-1-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-auto-start-1-Desktop-linux.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-auto-start-1-Desktop-linux.png
new file mode 100644
index 0000000000..8586cfc4d0
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-auto-start-1-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-bottom-1-Desktop-darwin.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-bottom-1-Desktop-darwin.png
new file mode 100644
index 0000000000..92313e1dad
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-bottom-1-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-bottom-1-Desktop-linux.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-bottom-1-Desktop-linux.png
new file mode 100644
index 0000000000..75567b41c9
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-bottom-1-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-bottom-end-1-Desktop-darwin.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-bottom-end-1-Desktop-darwin.png
new file mode 100644
index 0000000000..49cc66f89f
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-bottom-end-1-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-bottom-end-1-Desktop-linux.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-bottom-end-1-Desktop-linux.png
new file mode 100644
index 0000000000..960aa331c1
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-bottom-end-1-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-bottom-start-1-Desktop-darwin.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-bottom-start-1-Desktop-darwin.png
new file mode 100644
index 0000000000..07583997c2
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-bottom-start-1-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-bottom-start-1-Desktop-linux.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-bottom-start-1-Desktop-linux.png
new file mode 100644
index 0000000000..4a1f73b92f
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-bottom-start-1-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-left-1-Desktop-darwin.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-left-1-Desktop-darwin.png
new file mode 100644
index 0000000000..488d172b18
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-left-1-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-left-1-Desktop-linux.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-left-1-Desktop-linux.png
new file mode 100644
index 0000000000..3f965ddebd
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-left-1-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-left-end-1-Desktop-darwin.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-left-end-1-Desktop-darwin.png
new file mode 100644
index 0000000000..748362a902
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-left-end-1-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-left-end-1-Desktop-linux.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-left-end-1-Desktop-linux.png
new file mode 100644
index 0000000000..f1ee065241
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-left-end-1-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-left-start-1-Desktop-darwin.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-left-start-1-Desktop-darwin.png
new file mode 100644
index 0000000000..657cb56c55
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-left-start-1-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-left-start-1-Desktop-linux.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-left-start-1-Desktop-linux.png
new file mode 100644
index 0000000000..7450d4e70b
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-left-start-1-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-right-1-Desktop-darwin.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-right-1-Desktop-darwin.png
new file mode 100644
index 0000000000..1b17f65437
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-right-1-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-right-1-Desktop-linux.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-right-1-Desktop-linux.png
new file mode 100644
index 0000000000..27b2b42869
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-right-1-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-right-end-1-Desktop-darwin.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-right-end-1-Desktop-darwin.png
new file mode 100644
index 0000000000..19489fec09
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-right-end-1-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-right-end-1-Desktop-linux.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-right-end-1-Desktop-linux.png
new file mode 100644
index 0000000000..39a7d2df10
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-right-end-1-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-right-start-1-Desktop-darwin.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-right-start-1-Desktop-darwin.png
new file mode 100644
index 0000000000..22051977b4
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-right-start-1-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-right-start-1-Desktop-linux.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-right-start-1-Desktop-linux.png
new file mode 100644
index 0000000000..8586cfc4d0
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-right-start-1-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-top-1-Desktop-darwin.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-top-1-Desktop-darwin.png
new file mode 100644
index 0000000000..c4b407a285
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-top-1-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-top-1-Desktop-linux.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-top-1-Desktop-linux.png
new file mode 100644
index 0000000000..92e0815f6f
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-top-1-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-top-end-1-Desktop-darwin.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-top-end-1-Desktop-darwin.png
new file mode 100644
index 0000000000..0e509d1d3f
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-top-end-1-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-top-end-1-Desktop-linux.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-top-end-1-Desktop-linux.png
new file mode 100644
index 0000000000..f025af56a0
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-top-end-1-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-top-start-1-Desktop-darwin.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-top-start-1-Desktop-darwin.png
new file mode 100644
index 0000000000..024a3e0096
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-top-start-1-Desktop-darwin.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-top-start-1-Desktop-linux.png b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-top-start-1-Desktop-linux.png
new file mode 100644
index 0000000000..e93ae27d98
Binary files /dev/null and b/packages/orbit-components/src/Popover/Popover.ct.tsx-snapshots/visual-Popover-screenshot-for-placement-top-start-1-Desktop-linux.png differ
diff --git a/packages/orbit-components/src/Popover/Popover.stories.tsx b/packages/orbit-components/src/Popover/Popover.stories.tsx
index 379768272c..acd2f993bc 100644
--- a/packages/orbit-components/src/Popover/Popover.stories.tsx
+++ b/packages/orbit-components/src/Popover/Popover.stories.tsx
@@ -34,22 +34,22 @@ const ScrollWrapper = styled.div`
 `;
 
 const selects = (
-  <>
-    <Stack align="center">
-      <Stack spacing="none">
+  <Stack direction="column">
+    <Stack flex shrink align="center" justify="between">
+      <Stack inline direction="column" spacing="none">
         <Text>Adult</Text>
         <Text type="secondary">11+</Text>
       </Stack>
       <Stepper minValue={0} />
     </Stack>
-    <Stack align="center">
-      <Stack spacing="none">
+    <Stack flex shrink align="center" justify="between">
+      <Stack inline direction="column" spacing="none">
         <Text>Child</Text>
         <Text type="secondary">2-11</Text>
       </Stack>
       <Stepper minValue={0} />
     </Stack>
-  </>
+  </Stack>
 );
 
 const content = <Stack>{selects}</Stack>;
diff --git a/packages/orbit-components/src/Popover/__tests__/index.test.tsx b/packages/orbit-components/src/Popover/__tests__/index.test.tsx
index a9ccf8d382..58b0dfdad9 100644
--- a/packages/orbit-components/src/Popover/__tests__/index.test.tsx
+++ b/packages/orbit-components/src/Popover/__tests__/index.test.tsx
@@ -37,7 +37,7 @@ describe("Popover", () => {
       </Popover>,
     );
 
-    const openButton = screen.getByRole("button", { name: "Open" });
+    const openButton = screen.getAllByRole("button", { name: "Open" })[1];
     await user.click(openButton);
     expect(onOpen).toHaveBeenCalled();
     expect(screen.getByTestId(dataTest)).toBeInTheDocument();
@@ -88,7 +88,7 @@ describe("Popover", () => {
     );
 
     // default is 4px
-    expect(screen.getByRole("tooltip")).toHaveStyle({ top: "10" });
+    expect(screen.getByRole("dialog")).toHaveStyle({ top: "10" });
     // Needs to flush async `floating-ui` hooks
     // https://github.com/floating-ui/floating-ui/issues/1520
     await act(async () => {});
@@ -100,10 +100,11 @@ describe("Popover", () => {
         <Button>Open popover</Button>
       </Popover>,
     );
-    await user.click(screen.getByRole("button"));
+
+    await user.click(screen.getAllByRole("button")[1]);
     const overlay = (await screen.findByTestId("popover")).previousElementSibling;
     expect(overlay).toBeInTheDocument();
     if (overlay) await user.click(overlay);
-    expect(screen.queryByTestId("popover")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("dialog")).not.toBeInTheDocument();
   });
 });
diff --git a/packages/orbit-components/src/Popover/components/ContentWrapper.tsx b/packages/orbit-components/src/Popover/components/ContentWrapper.tsx
index 7445ad63b7..86c1f6e0f9 100644
--- a/packages/orbit-components/src/Popover/components/ContentWrapper.tsx
+++ b/packages/orbit-components/src/Popover/components/ContentWrapper.tsx
@@ -1,15 +1,13 @@
+"use client";
+
 import * as React from "react";
-import styled, { css } from "styled-components";
-import { convertHexToRgba } from "@kiwicom/orbit-design-tokens";
 import { usePopper } from "react-popper";
 import type { Placement } from "@popperjs/core/lib/enums";
+import cx from "clsx";
 
 import type * as Common from "../../common/types";
-import defaultTheme from "../../defaultTheme";
-import mq from "../../utils/mediaQuery";
 import Button from "../../Button";
 import useMediaQuery from "../../hooks/useMediaQuery";
-import transition from "../../utils/transition";
 import useClickOutside from "../../hooks/useClickOutside";
 import useLockScrolling from "../../hooks/useLockScrolling";
 import { ModalContext } from "../../Modal/ModalContext";
@@ -17,12 +15,8 @@ import { PLACEMENTS } from "../../common/consts";
 import boundingClientRect from "../../utils/boundingClientRect";
 import type { Offset } from "../types";
 
-const mobileTop = ({ theme }) => theme.orbit.spaceXLarge;
-const popoverPadding = ({ theme }) => theme.orbit.spaceMedium;
-
 export interface Props extends Common.Globals {
   children: React.ReactNode;
-  closeText?: React.ReactNode;
   referenceElement: HTMLElement | null;
   placement: Placement;
   width?: string;
@@ -41,195 +35,6 @@ export interface Props extends Common.Globals {
   onClose: (ev?: MouseEvent | React.SyntheticEvent<HTMLElement>) => void;
 }
 
-const StyledContentWrapper = styled.div<{
-  maxHeight?: string;
-  windowHeight?: number | null;
-  actionsHeight?: number | null;
-}>`
-  ${({ theme, windowHeight, actionsHeight, maxHeight }) => css`
-    overflow: auto;
-    border-top-left-radius: ${theme.orbit.spaceSmall};
-    border-top-right-radius: ${theme.orbit.spaceSmall};
-    position: absolute;
-    left: 0;
-    width: 100%;
-    background-color: ${theme.orbit.paletteWhite};
-    max-height: ${windowHeight && actionsHeight && windowHeight - actionsHeight - 32}px;
-    bottom: ${actionsHeight || 0}px;
-
-    ${mq.largeMobile(css`
-      max-height: ${maxHeight || "100%"};
-      border-radius: ${theme.orbit.borderRadiusNormal};
-      bottom: auto;
-      left: auto;
-      position: relative;
-    `)}
-  `}
-`;
-
-StyledContentWrapper.defaultProps = {
-  theme: defaultTheme,
-};
-
-const StyledActions = styled.div`
-  ${({ theme }) => css`
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    box-sizing: border-box;
-    padding: ${popoverPadding};
-    padding-top: ${theme.orbit.spaceSmall};
-    background-color: ${theme.orbit.paletteWhite};
-    .orbit-button-primitive {
-      width: 100%;
-      flex: 1 1 auto;
-    }
-    ${mq.largeMobile(css`
-      position: relative;
-      bottom: auto;
-      left: auto;
-      border-bottom-left-radius: ${theme.orbit.borderRadiusNormal};
-      border-bottom-right-radius: 3px;
-      .orbit-button-primitive {
-        width: auto;
-        flex-grow: 0;
-      }
-    `)};
-  `}
-`;
-
-StyledActions.defaultProps = {
-  theme: defaultTheme,
-};
-
-const StyledPopoverParent = styled.div<{
-  isInsideModal?: boolean;
-  width?: string | number;
-  shown?: boolean;
-  fixed?: boolean;
-  $zIndex?: number;
-  transform?: string;
-  overlapped?: boolean;
-  noPadding?: boolean;
-  top?: string | number;
-  left?: string | number;
-  bottom?: string | number;
-  right?: string | number;
-  position?: string;
-}>`
-  ${({
-    isInsideModal,
-    width,
-    shown,
-    theme,
-    transform,
-    top,
-    left,
-    bottom,
-    right,
-    position,
-    $zIndex,
-  }) => css`
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: auto;
-    width: 100%;
-    z-index: 1000;
-    box-sizing: border-box;
-    box-shadow: ${theme.orbit.boxShadowRaisedReverse};
-    background-color: ${theme.orbit.backgroundModal};
-    max-height: calc(100% - ${mobileTop});
-    &:focus {
-      outline: 0;
-    }
-
-    ${mq.largeMobile(css`
-      top: ${top};
-      left: ${left};
-      bottom: ${bottom};
-      right: ${right};
-      transform: ${transform};
-      transition: ${transition(["opacity"], "fast", "ease-in-out")};
-      position: ${position};
-      z-index: ${isInsideModal ? "1000" : $zIndex};
-      width: ${width ? `${width}` : "auto"};
-      border-radius: ${theme.orbit.borderRadiusNormal};
-      box-shadow: ${theme.orbit.boxShadowRaised};
-      opacity: ${shown ? "1" : "0"};
-      max-height: none;
-    `)}
-  `}
-`;
-
-StyledPopoverParent.defaultProps = {
-  theme: defaultTheme,
-};
-
-const StyledPopoverPadding = styled.div<{ noPadding?: boolean }>`
-  padding: ${({ noPadding }) => (noPadding ? 0 : popoverPadding)};
-`;
-
-StyledPopoverPadding.defaultProps = {
-  theme: defaultTheme,
-};
-
-const StyledPopoverContent = styled.div<{ shownMobile?: boolean }>`
-  ${({ shownMobile }) => css`
-    transform: translateY(${shownMobile ? "0%" : "100%"});
-    will-change: transform;
-    transition: ${transition(["opacity, transform"], "fast", "ease-in-out")};
-
-    ${mq.largeMobile(css`
-      transform: none;
-      transition: none;
-    `)}
-  `}
-`;
-
-StyledPopoverContent.defaultProps = {
-  theme: defaultTheme,
-};
-
-const StyledOverlay = styled.div<{ shown?: boolean }>`
-  ${({ theme, shown }) => css`
-    display: block;
-    position: fixed;
-    opacity: ${shown ? "1" : "0"};
-    top: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    background-color: ${convertHexToRgba(theme.orbit.paletteInkDark, 60)};
-    transition: ${transition(["opacity", "transform"], "normal", "ease-in-out")};
-    z-index: 999;
-
-    ${mq.largeMobile(css`
-      display: none;
-    `)};
-  `}
-`;
-
-StyledOverlay.defaultProps = {
-  theme: defaultTheme,
-};
-
-const StyledPopoverClose = styled.div`
-  padding: ${popoverPadding};
-  ${mq.largeMobile(css`
-    display: none;
-    visibility: hidden;
-    padding-bottom: 0;
-  `)}
-`;
-
-StyledPopoverClose.defaultProps = {
-  theme: defaultTheme,
-};
-
 const PopoverContentWrapper = ({
   children,
   onClose,
@@ -297,60 +102,154 @@ const PopoverContentWrapper = ({
       setActionsHeight(height);
     }
 
+    const handleKeyDown = (ev: KeyboardEvent) => {
+      if (ev.code === "Escape" && onClose) {
+        onClose();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+
     return () => {
       clearTimeout(timer);
+      document.removeEventListener("keydown", handleKeyDown);
     };
-  }, [update, actions, setActionsHeight]);
+  }, [update, actions, setActionsHeight, onClose]);
 
   useClickOutside(content, ev => {
     if (isLargeMobile) onClose(ev);
   });
 
-  const handleKeyDown = (ev: React.KeyboardEvent<HTMLDivElement>) => {
-    if (ev.keyCode === 27 && onClose) onClose();
-  };
+  const cssVars = {
+    "--popper-top": popper.top,
+    "--popper-left": popper.left,
+    "--popper-right": popper.right,
+    "--popper-bottom": popper.bottom,
+    "--popper-transform": popper.transform,
+    "--popper-position": popper.position,
+    "--popover-zIndex": zIndex,
+    "--popover-width": width,
+  } as React.CSSProperties;
 
   return (
     <>
-      <StyledOverlay shown={shown} onClick={onClose} />
-      {/* @ts-expect-error popper */}
-      <StyledPopoverParent
-        width={width}
+      <div
+        role="presentation"
+        className={cx(
+          "block",
+          "fixed",
+          "left-0 right-0 top-0",
+          "h-full w-full",
+          // TODO: use bg-ink-dark/60 tw class
+          "bg-[rgba(37,42,49,.6)]",
+          "duration-normal transition-[opacity,transform] ease-in-out",
+          "z-[999]",
+          "lm:hidden",
+          shown ? "opacity-100" : "opacity-0",
+        )}
+        onClick={onClose}
+      />
+      <div
+        role="dialog"
+        // @ts-expect-error expected
+        // eslint-disable-next-line react/no-unknown-property
+        popover
         ref={popoverRef}
-        $zIndex={zIndex}
-        tabIndex={0}
         data-test={dataTest}
         id={id}
-        noPadding={noPadding}
-        overlapped={overlapped}
-        role="tooltip"
-        onKeyDown={handleKeyDown}
-        fixed={fixed}
-        shown={shown}
-        isInsideModal={isInsideModal}
-        {...popper}
+        className={cx(
+          "fixed",
+          "bottom-0 left-0 right-0",
+          "h-auto w-full",
+          "z-[1000]",
+          "box-border",
+          "shadow-raised-reverse",
+          "bg-elevation-raised-reverse",
+          "max-h-[calc(100%_-_theme(spacing.xl))]",
+          "focus:outline-none",
+          "lm:top-[var(--popper-top)]",
+          "lm:left-[var(--popper-left)]",
+          "lm:right-[var(--popper-right)]",
+          "lm:bottom-[var(--popper-bottom)]",
+          "lm:[position:var(--popper-position)]",
+          "lm:[transform:var(--popper-transform)]",
+          "lm:transition-[opacity] lm:duration-fast lm:ease-in-out",
+          "lm:rounded-normal",
+          "lm:shadow-raised",
+          "lm:max-h-none",
+          isInsideModal ? "lm:z-[1000]" : "lm:z-[var(--popover-zIndex)]",
+          width ? "lm:w-[var(--popover-width)]" : "lm:w-auto",
+          shown ? "lm:opacity-100" : "lm:opacity-0",
+        )}
+        style={cssVars}
       >
-        <StyledPopoverContent ref={content} shownMobile={shown}>
-          <StyledContentWrapper
-            actionsHeight={actionsHeight}
+        <div
+          ref={content}
+          className={cx(
+            shown ? "translate-y-0" : "translate-y-full",
+            "will-change-transform",
+            "duration-fast transition-[opacity,transform] ease-in-out",
+            "lm:transform-none",
+            "lm-transition-none",
+          )}
+        >
+          <div
             ref={scrollingElementRef}
-            windowHeight={windowHeight}
-            maxHeight={maxHeight}
+            className={cx(
+              "overflow-auto",
+              "rounded-t-modal-mobile",
+              "absolute left-0",
+              "w-full",
+              "bg-white-normal",
+              "bottom-[var(--actions-height)]",
+              windowHeight &&
+                actionsHeight &&
+                "max-h-[calc(var(--window-height)-var(--actions-height)-32)]",
+              noPadding ? "p-0" : "p-md",
+              "lm:max-h-[var(--max-height)]",
+              "lm:rounded-normal",
+              "lm:bottom-auto",
+              "lm:left-auto",
+              "lm:relative",
+            )}
+            style={
+              {
+                "--actions-height": actionsHeight != null && `${actionsHeight}px`,
+                "--window-height": windowHeight != null && `${windowHeight}px`,
+                "--max-height": maxHeight != null ? `${maxHeight}px` : "100%",
+              } as React.CSSProperties
+            }
           >
-            <StyledPopoverPadding noPadding={noPadding}>{children}</StyledPopoverPadding>
-          </StyledContentWrapper>
-
+            {children}
+          </div>
           {actions ? (
-            <StyledActions ref={actionsRef}>{actions}</StyledActions>
+            <div
+              ref={actionsRef}
+              className={cx(
+                "fixed",
+                "bottom-0 left-0",
+                "w-full",
+                "box-border",
+                "p-md pt-sm",
+                "bg-white-normal",
+                "[&_.orbit-button-primitive]:w-full [&_.orbit-button-primitive]:flex-auto",
+                "lm:relative",
+                "lm:bottom-auto lm:left-auto",
+                "lm:rounded-b-normal",
+                "lm:[&_.orbit-button-primitive]:w-auto lm:[&_.orbit-button-primitive]:grow-0",
+              )}
+            >
+              {actions}
+            </div>
           ) : (
-            <StyledPopoverClose ref={actionsRef}>
+            <div ref={actionsRef} className="p-md lm:hidden lm:pb-0">
               <Button type="secondary" fullWidth onClick={onClose}>
                 {labelClose}
               </Button>
-            </StyledPopoverClose>
+            </div>
           )}
-        </StyledPopoverContent>
-      </StyledPopoverParent>
+        </div>
+      </div>
     </>
   );
 };
diff --git a/packages/orbit-components/src/Popover/index.tsx b/packages/orbit-components/src/Popover/index.tsx
index c1b88f2d33..f845a08c42 100644
--- a/packages/orbit-components/src/Popover/index.tsx
+++ b/packages/orbit-components/src/Popover/index.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import * as React from "react";
-import styled from "styled-components";
 
 import useStateWithTimeout from "../hooks/useStateWithTimeout";
 import { PLACEMENTS } from "../common/consts";
@@ -10,10 +9,6 @@ import Portal from "../Portal";
 import handleKeyDown from "../utils/handleKeyDown";
 import type { Props } from "./types";
 
-const StyledPopoverChild = styled.div`
-  position: relative;
-`;
-
 const Popover = ({
   children,
   renderInPortal = true,
@@ -39,6 +34,7 @@ const Popover = ({
   dataTest,
 }: Props) => {
   const ref = React.useRef<HTMLDivElement | null>(null);
+  const popoverId = React.useId();
 
   const [shown, setShown, setShownWithTimeout, clearShownTimeout] = useStateWithTimeout<boolean>(
     false,
@@ -128,7 +124,7 @@ const Popover = ({
   const popover = (
     <PopoverContent
       shown={shown}
-      id={id}
+      id={id || popoverId}
       labelClose={labelClose}
       dataTest={dataTest}
       zIndex={zIndex}
@@ -152,13 +148,22 @@ const Popover = ({
 
   return (
     <>
-      <StyledPopoverChild
+      <div
+        className="relative max-w-fit"
         ref={ref}
+        role="button"
+        // https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using
+        // @ts-expect-error expected
+        // eslint-disable-next-line react/no-unknown-property
+        popovertarget={id || popoverId}
+        // according to our docs button should be used for opening popover inside children (uncontrolled behavior),
+        // that's why this div shouldn't be focusable in order to avoid double focus
+        tabIndex={-1}
         onClick={handleClick}
         onKeyDown={handleKeyDown<HTMLDivElement>(handleClick)}
       >
         {children}
-      </StyledPopoverChild>
+      </div>
       {render && (renderInPortal ? <Portal renderInto="popovers">{popover}</Portal> : popover)}
     </>
   );