diff --git a/README.md b/README.md
index 1976a8ed277d950da9acdc8eb9c84dac9ece3bf4..bf8163ad5f5c735a2c4fada93d64f812fa0f9e6c 100644
--- a/README.md
+++ b/README.md
@@ -7,13 +7,17 @@
 ## Список компонентов:
 - TreeList;
 - MenuDial;
+- Popup;
 - Slider;
 - Drawer;
 - Modal;
 - SelectButton;
 - Button;
 - ToggleSwitch;
-- Divider;
+- Divider.
+
+## Components count: 10
+## Bundle size: 248.7KB
 
 ### Настройка окружения
 
diff --git a/src/App.vue b/src/App.vue
index 5838a25512df06c7ee27db0df1a554e7fdd2ef17..d7bf0470a4cf0705d0079b3eb5de8b1f0e639816 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -111,6 +111,7 @@ import Slider from '@stories/components/Slider/Slider.vue';
 import type { ISBOption } from '@interfaces/componentsProp';
 import Modal from '@stories/components/Modal/Modal.vue';
 import MenuDial from '@stories/components/MenuDial/MenuDial.vue';
+import Popup from '@stories/components/Popup/Popup.vue';
 
 const gentleIcons = [
   Age18Icon,
@@ -282,10 +283,32 @@ const visible = ref(false);
 const onClose = () => console.log('close!');
 const value = ref();
 const active = ref(false);
+const popupActive = ref(false);
+const popupActive2 = ref(false);
 const sliderValue = ref(1);
 </script>
 
 <template>
+  <div class="hui" style="width: 500px; height: 500px; background-color: gray"></div>
+  <Popup v-model:active="popupActive" parentSelector=".hui" theme="sky">
+    <Button
+      @click="
+        () => {
+          popupActive = false;
+          visible = true;
+        }
+      "
+      label="Открыть модальное окно"
+    />
+  </Popup>
+  <Popup v-model:active="popupActive2" theme="sky"
+    >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fugiat harum maiores placeat
+    soluta, vel velit voluptas. Accusamus aut, error et minima neque praesentium, ratione,
+    reprehenderit repudiandae saepe ut vero! Lorem ipsum dolor sit amet, consectetur adipisicing
+    elit. Amet fugiat harum maiores placeat soluta, vel velit voluptas. Accusamus aut, error et
+    minima neque praesentium, ratione, reprehenderit repudiandae saepe ut vero!</Popup
+  >
+
   <Modal v-model:visible="visible" theme="red" @onClose="onClose"
     ><template #header>huuuuuuuuuuui</template>Lorem ipsum dolor sit amet, consectetur adipisicing
     elit. Eaque explicabo, facere fuga hic id impedit magnam maiores minima necessitatibus, nemo
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 8d663ab5a251804b593200f44f06cc24c09cd124..8a1459e235293cd0f1abe4c0f4c342130769d3f1 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -77,6 +77,14 @@ export interface IModalProps {
   headerDivider?: boolean;
 }
 
+export interface IPopupProps {
+  parentSelector?: string;
+  theme?: TThemeColor;
+  maxWidth?: string;
+  maxHeight?: string;
+  padding?: string;
+}
+
 export interface ISBProps {
   options: ISBOption[];
   size?: TSize;
diff --git a/src/stories/components/Button/Button.vue b/src/stories/components/Button/Button.vue
index cef4d5580cf028204bf2d801c0f90ad95706f798..be2e17432d5b89489e09ab14e40eeb2f1a2c6266 100644
--- a/src/stories/components/Button/Button.vue
+++ b/src/stories/components/Button/Button.vue
@@ -80,7 +80,7 @@ const width = computed(() => (props.width ? `${props.width}px` : 'max-content'))
 .button {
   position: relative;
   border-radius: 7px;
-  display: flex;
+  display: inline-flex;
   gap: 8px;
   justify-content: center;
   align-items: center;
diff --git a/src/stories/components/Popup/Popup.stories.ts b/src/stories/components/Popup/Popup.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c8d3e5c8b63f5329464c36c7ee2c77f2738882f9
--- /dev/null
+++ b/src/stories/components/Popup/Popup.stories.ts
@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Popup from './Popup.vue';
+import Button from '@stories/components/Button/Button.vue';
+
+const meta: Meta = {
+  title: 'Components/Popup',
+  component: Popup,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that is used as a Popup. Can be used with icon.',
+      },
+    },
+  },
+  argTypes: {
+    default: { control: 'text' },
+    parentSelector: { control: 'text' },
+    maxWidth: { control: 'text' },
+    maxHeight: { control: 'text' },
+    padding: { control: 'text' },
+    theme: {
+      control: 'select',
+      options: [
+        'white',
+        'slate',
+        'blue',
+        'sky',
+        'teal',
+        'green',
+        'yellow',
+        'orange',
+        'pink',
+        'fuchsia',
+        'purple',
+        'indigo',
+        'rose',
+        'red',
+        'black',
+      ],
+    },
+  },
+  args: {},
+} satisfies Meta<typeof Popup>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    default:
+      'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fugiat harum maiores placeat\n    soluta, vel velit voluptas. Accusamus aut, error et minima neque praesentium, ratione,\n    reprehenderit repudiandae saepe ut vero! Lorem ipsum dolor sit amet, consectetur adipisicing\n    elit. Amet fugiat harum maiores placeat soluta, vel velit voluptas. Accusamus aut, error et\n    minima neque praesentium, ratione, reprehenderit repudiandae saepe ut vero!',
+    maxWidth: '200px',
+    maxHeight: '100px',
+  },
+};
+
+export const Full: Story = {
+  render: (args) => ({
+    components: { Popup, Button },
+    setup() {
+      return { args };
+    },
+    template:
+      '<Popup v-bind="args"><Button label="Создать" theme="sky" /><p style="display: inline-block; padding: 0 30px"></p><Button label="Удалить" theme="red" /></Popup>',
+  }),
+  args: {
+    theme: 'black',
+  },
+};
diff --git a/src/stories/components/Popup/Popup.vue b/src/stories/components/Popup/Popup.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a9eb103bfe9f1d2dda7f7622a89aa370fe7c17db
--- /dev/null
+++ b/src/stories/components/Popup/Popup.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { IPopupProps } from '@interfaces/componentsProps';
+import { computed, ref } from 'vue';
+import { convert300ThemeToColor, convert500ThemeToColor } from '@helpers/colors';
+
+const props = withDefaults(defineProps<IPopupProps>(), {
+  parentSelector: 'body',
+  theme: 'white',
+  maxWidth: '300px',
+  maxHeight: '100px',
+  padding: '5px',
+});
+const active = defineModel<boolean>('active');
+const themeColor = computed(() => convert500ThemeToColor(props.theme));
+const scrollColor = computed(() => convert300ThemeToColor(props.theme));
+
+const top = ref();
+const left = ref();
+const isContainer = ref();
+
+const container = document.querySelector(props.parentSelector);
+if (container) {
+  container.addEventListener('pointerdown', (e) => {
+    if (e.button === 2) {
+      console.log('e.clientY, e.clientX ', e.clientY, e.clientX);
+      isContainer.value = true;
+      if (!active.value) active.value = true;
+      top.value = e.clientY;
+      left.value = e.clientX;
+      e.stopPropagation();
+    }
+  });
+  container.addEventListener('contextmenu', (e) => {
+    if (isContainer.value) e.preventDefault();
+  });
+}
+
+document.addEventListener('pointerdown', (e) => {
+  if (e.button === 0) active.value = false;
+});
+</script>
+
+<template>
+  <section
+    oncontextmenu="return false"
+    id="popup"
+    @pointerdown.stop=""
+    :style="`top: ${top}px; left: ${left}px; opacity: ${active ? 1 : 0}; pointer-events: ${active ? 'auto' : 'none'}; padding: ${padding}`"
+  >
+    <div :style="`max-width: ${maxWidth}; max-height: ${maxHeight}; overflow: auto;`">
+      <slot />
+      <p v-if="!$slots.default" style="background-color: black; color: white; padding: 10px">
+        Popup
+      </p>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+#popup {
+  position: fixed;
+  transition: opacity 0.2s ease-in-out;
+  background-color: v-bind(themeColor);
+  border: 1px solid #403e46;
+  border-radius: 5px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: v-bind(scrollColor);
+}
+</style>