diff --git a/codex-ui/dev/Playground.vue b/codex-ui/dev/Playground.vue
index 5c4d86d6..a171bef5 100644
--- a/codex-ui/dev/Playground.vue
+++ b/codex-ui/dev/Playground.vue
@@ -30,6 +30,7 @@
       </div>
     </div>
     <Popover />
+    <Popup />
   </div>
 </template>
 
@@ -38,7 +39,8 @@ import { computed } from 'vue';
 import {
   VerticalMenu,
   Tabbar,
-  Popover
+  Popover,
+  Popup
 } from '../src/vue';
 import { useTheme } from '../src/vue/composables/useTheme';
 
@@ -197,6 +199,16 @@ const pages = computed(() => [
         onActivate: () => router.push('/components/editor'),
         isActive: route.path === '/components/editor',
       },
+      {
+        title: 'Popup',
+        onActivate: () => router.push('/components/popup'),
+        isActive: route.path === '/components/popup',
+      },
+      {
+        title: 'Confirm',
+        onActivate: () => router.push('/components/confirm'),
+        isActive: route.path === '/components/confirm',
+      },
     ],
   },
 ]);
diff --git a/codex-ui/dev/pages/components/Confirm.vue b/codex-ui/dev/pages/components/Confirm.vue
new file mode 100644
index 00000000..caefff8a
--- /dev/null
+++ b/codex-ui/dev/pages/components/Confirm.vue
@@ -0,0 +1,41 @@
+<template>
+  <PageHeader>
+    Confirm
+    <template #description>
+      A component that allows you to accept or reject a message that appears
+    </template>
+  </PageHeader>
+  <Button
+    secondary
+    data-dimensions="large"
+    @click="show()"
+  >
+    Press here to open confirm window
+  </Button>
+</template>
+
+<script setup lang="ts">
+import PageHeader from '../../components/PageHeader.vue';
+import { Button, useConfirm } from '../../../src/vue';
+
+const { confirm } = useConfirm();
+
+async function show() {
+  const res = await confirm(
+    'CodeX',
+    'Are you sure you want to delete the page?'
+  );
+
+  if (res) {
+    // eslint-disable-next-line no-console
+    console.log('The confirm button was pressed');
+  } else {
+    // eslint-disable-next-line no-console
+    console.log('The cancel button was pressed');
+  }
+}
+
+</script>
+
+<style scoped>
+</style>
diff --git a/codex-ui/dev/pages/components/Popup.vue b/codex-ui/dev/pages/components/Popup.vue
new file mode 100644
index 00000000..6e5c5f87
--- /dev/null
+++ b/codex-ui/dev/pages/components/Popup.vue
@@ -0,0 +1,34 @@
+<template>
+  <PageHeader>
+    Popup
+    <template #description>
+      A component that appears on top of other components. Can include any other component.
+    </template>
+  </PageHeader>
+  <Button
+    secondary
+    data-dimensions="large"
+    @click="show()"
+  >
+    Press here to open popup
+  </Button>
+</template>
+
+<script setup lang="ts">
+import PageHeader from '../../components/PageHeader.vue';
+import { Button, usePopup } from '../../../src/vue';
+import StubText from './StubText.vue';
+
+const { showPopup } = usePopup();
+
+function show(): void {
+  showPopup({
+    component: StubText,
+    props: {},
+  });
+}
+
+</script>
+
+<style scoped>
+</style>
diff --git a/codex-ui/dev/pages/components/StubText.vue b/codex-ui/dev/pages/components/StubText.vue
new file mode 100644
index 00000000..3d0f6518
--- /dev/null
+++ b/codex-ui/dev/pages/components/StubText.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    Popup can include any component
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+</style>
diff --git a/codex-ui/dev/routes.ts b/codex-ui/dev/routes.ts
index 0ab61454..8334a2c2 100644
--- a/codex-ui/dev/routes.ts
+++ b/codex-ui/dev/routes.ts
@@ -28,6 +28,8 @@ import VerticalMenu from './pages/components/VerticalMenu.vue';
 import ContextMenu from './pages/components/ContextMenu.vue';
 import Editor from './pages/components/Editor.vue';
 import ThemePreview from './pages/components/ThemePreview.vue';
+import Popup from './pages/components/Popup.vue';
+import Confirm from './pages/components/Confirm.vue';
 
 /**
  * Vue router routes list
@@ -145,6 +147,14 @@ const routes: RouteRecordRaw[] = [
     path: '/components/theme-preview',
     component: ThemePreview as Component,
   },
+  {
+    path: '/components/popup',
+    component: Popup as Component,
+  },
+  {
+    path: '/components/confirm',
+    component: Confirm as Component,
+  },
 ];
 
 export default routes;
diff --git a/codex-ui/src/styles/z-axis.pcss b/codex-ui/src/styles/z-axis.pcss
index 0e7ac9c8..b818278f 100644
--- a/codex-ui/src/styles/z-axis.pcss
+++ b/codex-ui/src/styles/z-axis.pcss
@@ -1,3 +1,4 @@
 :root {
   --z-popover: 3;
+  --z-popup: calc(var(--z-popover) + 1);
 }
diff --git a/codex-ui/src/vue/components/confirm/Confirm.vue b/codex-ui/src/vue/components/confirm/Confirm.vue
new file mode 100644
index 00000000..ff236dc4
--- /dev/null
+++ b/codex-ui/src/vue/components/confirm/Confirm.vue
@@ -0,0 +1,135 @@
+<template>
+  <div
+    :class="$style['confirm']"
+    data-dimensions="large"
+  >
+    <div class="text-ui-base-bold">
+      {{ title }}
+    </div>
+    <div :class="[$style['confirm__body'], 'text-ui-base-medium']">
+      {{ text }}
+    </div>
+    <div :class="$style['confirm__controls']">
+      <Button
+        secondary
+        @click="onCancel"
+      >
+        <div :class="$style['confirm__button-inner']">
+          {{ cancelText }}
+        </div>
+      </Button>
+      <Button
+        primary
+        @click="onConfirm"
+      >
+        <div :class="$style['confirm__button-inner']">
+          {{ confirmText }}
+        </div>
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from '../button/Button.vue';
+import { onMounted, onUnmounted } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Text that will be displayed at the top of comfirm container
+     */
+    title: string;
+
+    /**
+     * Text that will be displayed in the middle part of the confirm container
+     */
+    text: string;
+
+    /**
+     * Text that will be displayed in the confirm button
+     */
+    confirmText?: string;
+
+    /**
+     * Text that will be displayed in the cancel button
+     */
+    cancelText?: string;
+
+    /**
+     * Function that is executed after pressing the Cancel button
+     */
+    onCancel: () => void;
+
+    /**
+     * Function that is executed after pressing the Confirm button
+     */
+    onConfirm: () => void;
+  }>(),
+  {
+    confirmText: 'Confirm',
+    cancelText: 'Cancel',
+  }
+);
+
+/**
+ * Call onConfirm when enter was pressed
+ *
+ * @param event - the event object representing the keyboard event
+ * @param event.key - the property of the event object that holds the value of the pressed key
+ */
+const confirmOnEnter = (event: { key: string }) => {
+  if (event.key === 'Enter') {
+    props.onConfirm();
+  }
+};
+
+/**
+ * Call onCancel when esc was pressed
+ *
+ * @param event - the event object representing the keyboard event
+ * @param event.key - the property of the event object that holds the value of the pressed key
+ */
+const closeOnEsc = (event: { key: string }) => {
+  if (event.key === 'Escape') {
+    props.onCancel();
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('keydown', confirmOnEnter);
+  document.addEventListener('keydown', closeOnEsc);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', confirmOnEnter);
+  document.removeEventListener('keydown', closeOnEsc);
+});
+
+</script>
+
+<style module>
+.confirm {
+  display: flex;
+  flex-direction: column;
+  gap: var(--v-padding);
+  text-align: center;
+  width: min-content;
+
+  &__body {
+    padding: 0 var(--spacing-ml) 0 var(--spacing-ml);
+    word-wrap: break-word;
+  }
+
+  &__controls {
+    display: flex;
+    padding: var(--v-padding) 0 0 0;
+    gap: var(--spacing-m);
+  }
+
+  &__button-inner {
+    width: 84px;
+  }
+}
+
+</style>
diff --git a/codex-ui/src/vue/components/confirm/index.ts b/codex-ui/src/vue/components/confirm/index.ts
new file mode 100644
index 00000000..fa42cc59
--- /dev/null
+++ b/codex-ui/src/vue/components/confirm/index.ts
@@ -0,0 +1,4 @@
+import Confirm from './Confirm.vue';
+export * from './useConfirm';
+
+export { Confirm };
diff --git a/codex-ui/src/vue/components/confirm/useConfirm.ts b/codex-ui/src/vue/components/confirm/useConfirm.ts
new file mode 100644
index 00000000..64049ee4
--- /dev/null
+++ b/codex-ui/src/vue/components/confirm/useConfirm.ts
@@ -0,0 +1,40 @@
+import { createSharedComposable } from '@vueuse/core';
+import { usePopup } from '../popup';
+import { Confirm } from '.';
+
+export const useConfirm = createSharedComposable(() => {
+  /**
+   * Used to create a Popup component that will display the current Confirm
+   */
+  const { showPopup, hidePopup } = usePopup();
+
+  /**
+   * @param title - title of the confirm window
+   * @param text - message to be displayed in confirm window
+   * @returns user selection result
+   */
+  async function confirm(title: string, text: string): Promise<boolean> {
+    return new Promise<boolean>((resolve) => {
+      showPopup({
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        component: Confirm,
+        props: {
+          title: title,
+          text: text,
+          onCancel: () => {
+            resolve(false);
+            hidePopup();
+          },
+          onConfirm: () => {
+            resolve(true);
+            hidePopup();
+          },
+        },
+      });
+    });
+  }
+
+  return {
+    confirm,
+  };
+});
diff --git a/codex-ui/src/vue/components/popup/Popup.types.ts b/codex-ui/src/vue/components/popup/Popup.types.ts
new file mode 100644
index 00000000..e46fbb32
--- /dev/null
+++ b/codex-ui/src/vue/components/popup/Popup.types.ts
@@ -0,0 +1,14 @@
+import type { Component } from 'vue';
+
+export interface PopupContent {
+  /**
+   * Component to render in the popup
+   */
+  component: Component;
+
+  /**
+   * Props to pass to the component
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  props: Record<string, any>;
+}
diff --git a/codex-ui/src/vue/components/popup/Popup.vue b/codex-ui/src/vue/components/popup/Popup.vue
new file mode 100644
index 00000000..22dbb5c3
--- /dev/null
+++ b/codex-ui/src/vue/components/popup/Popup.vue
@@ -0,0 +1,98 @@
+<template>
+  <div
+    v-show="isOpen"
+    :class="$style['popup']"
+  >
+    <div
+      ref="popupEl"
+      :class="$style['popup__container']"
+    >
+      <component
+        :is="content.component"
+        v-if="content"
+        v-bind="content.props"
+      />
+    </div>
+    <Icon
+      v-if="hasCloseButton"
+      :class="$style['popup__icon']"
+      name="Cross"
+      @click="hidePopup"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import Icon from '../icon/Icon.vue';
+import { usePopup } from './usePopup';
+import { onClickOutside } from '@vueuse/core';
+
+/**
+ * Reference to the popup element
+ * Used to bind click-outside event
+ */
+const popupEl = ref<HTMLDivElement | null>(null);
+
+const {
+  isOpen,
+  hidePopup,
+  content,
+} = usePopup();
+
+/**
+ * Close the popup when clicking outside of popup container
+ */
+onClickOutside(popupEl, hidePopup);
+
+withDefaults(
+  defineProps<{
+    /**
+     * If true, a button to close the popup appears
+     */
+    hasCloseButton?: boolean;
+  }>(),
+  {
+    hasCloseButton: true,
+  }
+);
+
+</script>
+
+<style module>
+
+.popup {
+  z-index: var(--z-popup);
+  inset: 0;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  position: fixed;
+  align-content: center;
+  background-color: rgba(0, 0, 0, 0.49);
+  color: var(--base--text);
+
+  &__container {
+    grid-column: 2;
+    padding: var(--spacing-l);
+    border-radius: var(--radius-ml);
+    background-color: var(--base--bg-primary);
+    box-shadow: inset 0 0 0 var(--delimiter-height) var(--base--border);
+  }
+
+  &__icon {
+    grid-column: 3;
+    cursor: pointer;
+    color: var(--base--text-secondary);
+    padding: var(--spacing-very-x);
+    box-shadow: inset 0 0 0 var(--delimiter-height);
+    border-radius: var(--radius-l);
+    margin-left: var(--spacing-l);
+    margin-top: var(--spacing-xs);
+
+    &:hover {
+      color: var(--base--text);
+    }
+  }
+}
+
+</style>
diff --git a/codex-ui/src/vue/components/popup/index.ts b/codex-ui/src/vue/components/popup/index.ts
new file mode 100644
index 00000000..ee05b748
--- /dev/null
+++ b/codex-ui/src/vue/components/popup/index.ts
@@ -0,0 +1,6 @@
+import Popup from './Popup.vue';
+
+export * from './usePopup';
+export * from './Popup.types';
+
+export { Popup };
diff --git a/codex-ui/src/vue/components/popup/usePopup.ts b/codex-ui/src/vue/components/popup/usePopup.ts
new file mode 100644
index 00000000..2234a97c
--- /dev/null
+++ b/codex-ui/src/vue/components/popup/usePopup.ts
@@ -0,0 +1,75 @@
+import { createSharedComposable } from '@vueuse/core';
+import { ref, shallowRef } from 'vue';
+import type { PopupContent } from './Popup.types';
+
+/**
+ * Shared composable for the Popup component
+ *
+ * Popup is component empty container that appears on top of other components and contain any component
+ * @example
+ * function show() {
+ *  showPopup({
+ *  component: Confirm,
+ *    props: {
+ *      title: 'CodeX',
+ *      body: 'Are you sure you want to delete the page?',
+ *      onCancel: onCancelFunction,
+ *      onConfirm: onConfirmFunction,
+ *    },
+ *  });
+ * }
+ */
+export const usePopup = createSharedComposable(() => {
+  /**
+   * Popup open state
+   */
+  const isOpen = ref(false);
+
+  /**
+   * Popup content: component and props
+   */
+  const content = shallowRef<PopupContent | null>(null);
+
+  /**
+   * Method for attaching a component to the popup
+   * @param component - component to attach
+   * @param props - props to pass to the component
+   */
+  function mountComponent(component: PopupContent['component'], props: PopupContent['props']): void {
+    content.value = {
+      component,
+      props,
+    };
+  }
+
+  /**
+   * Show popup
+   */
+  function show(): void {
+    isOpen.value = true;
+  }
+
+  /**
+   * Mount component into popup and show it
+   * @param params - popup showing configuration
+   */
+  function showPopup(params: PopupContent): void {
+    mountComponent(params.component, params.props);
+    show();
+  }
+
+  /**
+   * Сlear the content inside the popup and hide popup
+   */
+  function hidePopup(): void {
+    content.value = null;
+    isOpen.value = false;
+  }
+
+  return {
+    isOpen,
+    showPopup,
+    hidePopup,
+    content,
+  };
+});
diff --git a/codex-ui/src/vue/index.ts b/codex-ui/src/vue/index.ts
index 64ae4d4c..38b8786c 100644
--- a/codex-ui/src/vue/index.ts
+++ b/codex-ui/src/vue/index.ts
@@ -16,4 +16,6 @@ export * from './components/vertical-menu';
 export * from './components/colorShemeIcons';
 export * from './components/theme-preview';
 export * from './components/popover';
+export * from './components/popup';
+export * from './components/confirm';
 export * from './composables/useTheme';
diff --git a/src/App.vue b/src/App.vue
index 734172df..f90a7158 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,12 +2,13 @@
   <Header />
   <router-view />
   <Popover />
+  <Popup />
 </template>
 
 <script lang="ts" setup>
 import Header from '@/presentation/components/header/Header.vue';
 import { onErrorCaptured } from 'vue';
-import { useTheme, Popover } from 'codex-ui/vue';
+import { useTheme, Popover, Popup } from 'codex-ui/vue';
 import useAuthRequired from '@/application/services/useAuthRequired';
 
 /**