diff --git a/src/components/Modal/Modal.scss b/src/components/Modal/Modal.scss
new file mode 100644
index 0000000..28533d3
--- /dev/null
+++ b/src/components/Modal/Modal.scss
@@ -0,0 +1,68 @@
+@keyframes slide-down {
+ 0% {
+ top: -100%;
+ }
+
+ 100% {
+ top: 0;
+ }
+}
+
+.modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100%;
+ top: -100%;
+ pointer-events: none;
+ transition: opacity .1s ease-in;
+ z-index: 100;
+ opacity: 0;
+
+ &.open {
+ pointer-events: all;
+ animation: slide-down ease-in .2s;
+ animation-fill-mode: forwards;
+ opacity: 1;
+ }
+
+ // .modal__backdrop
+ &__backdrop {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(1, 1, 1, .65);
+ }
+
+ // .modal__body
+ &__body {
+ max-height: 100vh;
+ overflow-y: auto;
+ overflow: hidden;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ max-width: var(--modal-max-width, 500px);
+ width: 100%;
+ transform: translate(-50%, -50%);
+ padding: var(--modal-y-padding, 24px) var(--modal-x-padding, 24px);
+ background-color: #fff;
+ }
+
+ // .modal__close
+ &__close {
+ --button-size-sm: 24px;
+
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 24px;
+
+ &:deep(.icon) {
+ font-size: 16px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
new file mode 100644
index 0000000..71dea38
--- /dev/null
+++ b/src/components/Modal/Modal.vue
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js
new file mode 100644
index 0000000..a49115d
--- /dev/null
+++ b/src/components/Modal/index.js
@@ -0,0 +1 @@
+export { default } from './Modal.vue';
\ No newline at end of file
diff --git a/stories/Modal.stories.js b/stories/Modal.stories.js
new file mode 100644
index 0000000..d09d785
--- /dev/null
+++ b/stories/Modal.stories.js
@@ -0,0 +1,30 @@
+import UiModal from "../src/components/Modal";
+import UiButton from "../src/components/Button";
+import './assets/main.scss';
+
+export default {
+ title: 'Elements/Modal',
+ component: UiModal,
+ tags: ['autodocs'],
+};
+
+export const Base = {
+ render: (args) => ({
+ components: { UiModal, UiButton },
+ setup() {
+ return { args };
+ },
+ data() {
+ return {
+ isOpen: false,
+ };
+ },
+ template: `
+ open modal
+
+
+ Place content here
+
+ `,
+ }),
+};