diff --git a/src/components/Popup.js b/src/components/Popup.js
new file mode 100644
index 0000000..bd5c01b
--- /dev/null
+++ b/src/components/Popup.js
@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+
+import './css/Popup.css';
+
+
+class Popup extends Component {
+ state = {
+ visible: false
+ };
+
+ show = () => {
+ this.setState({
+ visible: true
+ });
+ };
+
+ hide = () => {
+ this.setState({
+ visible: false
+ });
+ };
+
+ render() {
+ return (
+
+ {this.props.children}
+
+ );
+ }
+}
+
+export default Popup;
\ No newline at end of file
diff --git a/src/components/css/Popup.css b/src/components/css/Popup.css
new file mode 100644
index 0000000..b809375
--- /dev/null
+++ b/src/components/css/Popup.css
@@ -0,0 +1,19 @@
+.popup {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%) scale(0);
+ transform-origin: center;
+ background: white;
+ width: 65vw;
+ height: 45vh;
+ box-shadow: var(--boxShadow);
+ border-radius: var(--borderRadius);
+ transition: .35s;
+ z-index: 11;
+}
+
+.visible {
+ pointer-events: all;
+ transform: translate(-50%, -50%) scale(1);
+}
\ No newline at end of file