diff --git a/src/components/UI/ModalProject/ModalProject.js b/src/components/UI/ModalProject/ModalProject.js
new file mode 100644
index 00000000..97f2e739
--- /dev/null
+++ b/src/components/UI/ModalProject/ModalProject.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+import "./ModalProject.scss";
+
+export const ModalProject = ({ active, setActive }) => {
+  return (
+    <div className={active ? "modal-project active" : "modal-project"}>
+      <div
+        className="modal-project__content"
+        onClick={(e) => e.stopPropagation()}
+      ></div>
+    </div>
+  );
+};
+
+export default ModalProject;
diff --git a/src/components/UI/ModalProject/ModalProject.scss b/src/components/UI/ModalProject/ModalProject.scss
new file mode 100644
index 00000000..5af31dff
--- /dev/null
+++ b/src/components/UI/ModalProject/ModalProject.scss
@@ -0,0 +1,25 @@
+.modal-project {
+  z-index: 9;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.11);
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: scale(0);
+}
+
+.modal-project.active {
+  transform: scale(1);
+}
+
+.modal-project__content {
+  background: #ffffff;
+  border: 1px solid #dde2e4;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: row;
+}