diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
new file mode 100644
index 0000000..9760e16
--- /dev/null
+++ b/src/components/modal/_modal.scss
@@ -0,0 +1,90 @@
+/* =============== Modal ================== */
+.cmp-adaptiveform-modal__dialog{
+  display: none;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: white;
+  border: 1px solid #ccc;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+  padding: 20px;
+  z-index: 1002; /* Ensure it's above other content */
+  max-width: 80%;
+  max-height: 80%;
+  overflow: auto; /* Enable scrolling if content exceeds dimensions */
+  pointer-events: auto;
+}
+
+.cmp-adaptiveform-modal__panel-container {
+  background-color: #f0f0f0;
+  padding: 20px;
+  border-radius: 10px;
+}
+
+.cmp-adaptiveform-modal__panel-container--hidden {
+  display: none;
+}
+
+.cmp-adaptiveform-modal__errormessage{
+  color: $error;
+  font-size: $font-sm;
+  margin-top: $error-top-margin;
+}
+
+.cmp-adaptiveform-modal__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1001;
+  pointer-events: none;
+}
+
+.cmp-adaptiveform-modal__label-container{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cmp-adaptiveform-modal__longdescription {
+  color: $light-gray;
+  background-color: $very-light-gray;
+  font-size: $font-sm;
+  margin-top: $error-top-margin;
+  margin-bottom: 5px;
+  padding: 10px;
+  p{
+    margin: 0;
+    padding: 0;
+  }
+}
+.cmp-adaptiveform-modal__shortdescription {
+  font-size: $font-sm;
+  margin-top: $error-top-margin;
+}
+
+.cmp-adaptiveform-modal__questionmark{
+  display:inline-block;
+  width:1rem;
+  height:1rem;
+  border-radius: 9px;
+  background: url(./resources/images/question.svg) center center / cover no-repeat,#969696;
+  cursor : pointer;
+  // below properties for backward compatibility
+  position: absolute;
+  right: 20px;
+}
+
+// below properties for backward compatibility
+.cmp-adaptiveform-modal__label-container .cmp-adaptiveform-password__questionmark{
+  position: unset;
+  right: unset;
+}
+.cmp-adaptiveform-modal__errormessage{
+  color: $error;
+  font-size: $font-sm;
+  margin-top: $error-top-margin;
+}
diff --git a/src/theme.scss b/src/theme.scss
index fdf1aaa..6ff6819 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -36,3 +36,4 @@
 @import 'src/components/checkbox/_checkbox.scss';
 @import 'src/components/termsandconditions/_termsandconditions.scss';
 @import 'src/components/switch/_switch.scss';
+@import 'src/components/modal/_modal.scss';
\ No newline at end of file