diff --git a/components/ui/ConfirmPopup.vue b/components/ui/ConfirmPopup.vue
index d4afc6e95..dfc661da9 100644
--- a/components/ui/ConfirmPopup.vue
+++ b/components/ui/ConfirmPopup.vue
@@ -35,8 +35,13 @@
 </template>
 
 <script>
+import Popup from '~/components/ui/Popup'
+
 export default {
   name: 'ConfirmPopup',
+  components: {
+    Popup,
+  },
   props: {
     confirmationText: {
       type: String,
diff --git a/components/ui/Popup.vue b/components/ui/Popup.vue
new file mode 100644
index 000000000..bd6d49dcb
--- /dev/null
+++ b/components/ui/Popup.vue
@@ -0,0 +1,47 @@
+<template>
+  <div v-if="showPopup">
+    <div class="popup-overlay" />
+    <div class="popup-body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Popup',
+  props: {
+    showPopup: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.popup-overlay {
+  top: 0;
+  left: 0;
+  z-index: 1;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-button-bg);
+  border: none;
+  opacity: 0.6;
+  overflow-x: hidden;
+}
+.popup-body {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  box-shadow: 0 2px 3px 1px var(--color-button-bg);
+  border-radius: 10px;
+  max-height: 80%;
+  overflow-y: auto;
+  background-color: var(--color-bg);
+}
+</style>