diff --git a/src/lib/providers/prime-preset/tokens/components/popover.ts b/src/lib/providers/prime-preset/tokens/components/popover.ts
index 296010d9..9b4cbd1e 100644
--- a/src/lib/providers/prime-preset/tokens/components/popover.ts
+++ b/src/lib/providers/prime-preset/tokens/components/popover.ts
@@ -1,10 +1,12 @@
 export const popoverCss = ({ dt }: { dt: (token: string) => string }): string => `
-  .p-popover.p-component::before {
-    border-width: 0.73rem;
-    margin-left: -0.86rem;
-  }
+.p-popover.p-component::before {
+  border-width: ${dt('popover.extend.arrow.height')} calc(${dt('popover.extend.arrow.width')} / 2);
+  margin-left: calc(-1 * ${dt('popover.extend.arrow.width')} / 2);
+}
 
-  .p-popover.p-component::after {
-    margin-left: calc(-1 * ${dt('popover.extend.arrow.width')});
-  }
+.p-popover.p-component::after {
+  border-width: calc(${dt('popover.extend.arrow.height')} - ${dt('popover.extend.borderWidth')})
+    calc(${dt('popover.extend.arrow.width')} / 2 - ${dt('popover.extend.borderWidth')});
+  margin-left: calc(-1 * (${dt('popover.extend.arrow.width')} / 2 - ${dt('popover.extend.borderWidth')}));
+}
 `;
diff --git a/src/stories/components/popover/examples/popover-basic.component.ts b/src/stories/components/popover/examples/popover-basic.component.ts
index 33c887dd..bf047444 100644
--- a/src/stories/components/popover/examples/popover-basic.component.ts
+++ b/src/stories/components/popover/examples/popover-basic.component.ts
@@ -7,7 +7,7 @@ const template = `
 <div class="min-h-[200px]">
   <div class="relative inline-block">
     <extra-button label="Показать" (click)="popover.toggle($event)"></extra-button>
-    <extra-popover #popover appendTo="self">
+    <extra-popover #popover>
       <p>Содержимое popover.</p>
     </extra-popover>
   </div>
@@ -46,7 +46,7 @@ import { ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
   imports: [ExtraPopoverComponent, ExtraButtonComponent],
   template: \`
     <extra-button label="Показать" (click)="popover.toggle($event)"></extra-button>
-    <extra-popover #popover appendTo="self">
+    <extra-popover #popover>
       <p>Содержимое popover.</p>
     </extra-popover>
   \`,
diff --git a/src/stories/components/popover/examples/popover-rich-content.component.ts b/src/stories/components/popover/examples/popover-rich-content.component.ts
index 63d0dfb4..118e6a81 100644
--- a/src/stories/components/popover/examples/popover-rich-content.component.ts
+++ b/src/stories/components/popover/examples/popover-rich-content.component.ts
@@ -7,7 +7,7 @@ const template = `
 <div class="min-h-[250px]">
   <div class="relative inline-block">
     <extra-button label="Показать" (click)="popover.toggle($event)"></extra-button>
-    <extra-popover #popover appendTo="self">
+    <extra-popover #popover>
       <div class="flex flex-col gap-2">
         <span class="font-semibold">Заголовок</span>
         <p class="text-sm text-secondary">Дополнительное описание или любой произвольный контент внутри popover.</p>
@@ -49,7 +49,7 @@ import { ExtraButtonComponent } from '@cdek-it/angular-ui-kit';
   imports: [ExtraPopoverComponent, ExtraButtonComponent],
   template: \`
     <extra-button label="Показать" (click)="popover.toggle($event)"></extra-button>
-    <extra-popover #popover appendTo="self">
+    <extra-popover #popover>
       <div class="flex flex-col gap-2">
         <span class="font-semibold">Заголовок</span>
         <p class="text-sm text-secondary">Дополнительное описание или любой произвольный контент внутри popover.</p>