diff --git a/library-css/modal.scss b/library-css/modal.scss
index b4454ee..5a3c6a2 100644
--- a/library-css/modal.scss
+++ b/library-css/modal.scss
@@ -8,43 +8,66 @@
   overflow: auto;
   background-color: white;
   opacity: 0;
+  display: flex;
+  justify-content: center;
+  padding: 15px 15px;
   transform: scale(0);
   transition: transform linear .3s, opacity linear .3s;
 }
 
-.fs-modal > .close {
-  position: fixed;
+.fs-modal .fs-modal-dialog {
+  background-color: white;
+  border-radius: 4px;
+  max-height: calc(100vh - 30px);
+  width: 900px;
+  box-shadow: 0 3px 6px #0000001a;
+  height: fit-content;
+  position: relative;
+}
+
+.fs-modal .fs-modal-dialog > .header {
+  height: 19px;
+  padding: 15px;
+  border-bottom: 1px solid rgba(26, 26, 26, 0.2);
+}
+
+.fs-modal .fs-modal-dialog > .content {
+  max-height: calc(100% - 80px);
+  padding: 15px;
+  overflow: auto;
+}
+
+.fs-modal .fs-modal-dialog > .content.hasFooter {
+  max-height: calc(100% - 140px);
+}
+
+.fs-modal .fs-modal-dialog > .footer {
+  height: 39px;
+  padding: 10px 15px;
+  border-top: 1px solid rgba(26, 26, 26, 0.2);
+}
+
+.fs-modal .fs-modal-dialog > .close {
+  position: absolute;
   opacity: 0.7;
-  top: 30px;
-  left: 30px;
-  transform: translate(-50%, -50%);
+  top: 10px;
+  right: 10px;
   z-index: 1;
 }
 
-.fs-modal > .header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 80px;
-  padding: 10px 120px;
-}
-
-.fs-modal > .content {
-  margin-top: 100px;
-}
-
-.fs-modal > .content > .content-inner {
-  padding: 30px 90px;
-}
-
-@media only screen and (max-width: 639px) {
-  .fs-modal > .header {
-    padding: 10px 45px;
+@media only screen and (min-width: 640px) {
+  .fs-modal {
+    padding: 50px 30px;
   }
 
-  .fs-modal > .content > .content-inner {
-    padding: 30px 45px;
+  .fs-modal .fs-modal-dialog {
+    max-height: calc(100vh - 100px);
+  }
+}
+
+@media only screen and (min-width: 960px) {
+  .fs-modal {
+    padding: 50px 40px;
   }
 }