diff --git a/package.json b/package.json
index 07d6a666..7080a5cb 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "react": "^18",
     "react-datepicker": "^7.3.0",
     "react-dom": "^18",
+    "react-responsive-modal": "^6.4.2",
     "recoil": "^0.7.7",
     "uuid": "^9.0.1"
   },
diff --git a/src/components/Intro.jsx b/src/components/Intro.jsx
index 86be98fa..7235e2eb 100644
--- a/src/components/Intro.jsx
+++ b/src/components/Intro.jsx
@@ -2,11 +2,15 @@
 
 import { useState } from 'react'
 
+import { Button } from '@nextui-org/react'
+
 import SingleDatePicker from './common/datepicker/SingleDatePicker'
 import RangeDatePicker from './common/datepicker/RangeDatePicker'
 import QGrid from './common/grid/QGrid'
+import QModal from './common/modal/QModal'
 
 export default function Intro() {
+  const [open, setOpen] = useState(false)
   const [startDate, setStartDate] = useState(new Date())
   const singleDatePickerProps = {
     startDate,
@@ -25,6 +29,29 @@ export default function Intro() {
     isPageable: false,
   }
 
+  const modelProps = {
+    open,
+    setOpen,
+  }
+
+  const ipsum = (
+    <>
+      <p className="text-2xl">title</p>
+      <p>
+        저작자·발명가·과학기술자와 예술가의 권리는 법률로써 보호한다. 이 헌법은 1988년 2월 25일부터 시행한다. 다만, 이 헌법을 시행하기 위하여 필요한
+        법률의 제정·개정과 이 헌법에 의한 대통령 및 국회의원의 선거 기타 이 헌법시행에 관한 준비는 이 헌법시행 전에 할 수 있다.
+      </p>
+      <p>
+        국가는 주택개발정책등을 통하여 모든 국민이 쾌적한 주거생활을 할 수 있도록 노력하여야 한다. 통신·방송의 시설기준과 신문의 기능을 보장하기
+        위하여 필요한 사항은 법률로 정한다.
+      </p>
+      <p>
+        국회에서 의결된 법률안은 정부에 이송되어 15일 이내에 대통령이 공포한다. 선거에 관한 경비는 법률이 정하는 경우를 제외하고는 정당 또는
+        후보자에게 부담시킬 수 없다.
+      </p>
+    </>
+  )
+
   return (
     <>
       <div className="my-2">
@@ -45,6 +72,15 @@ export default function Intro() {
           <QGrid {...gridProps} />
         </div>
       </div>
+      <div className="my-2">
+        <div className="text-2xl">QModal</div>
+        <div>
+          <Button color="primary" onClick={() => setOpen(true)}>
+            Open Modal
+          </Button>
+          <QModal {...modelProps}>{ipsum}</QModal>
+        </div>
+      </div>
     </>
   )
 }
diff --git a/src/components/common/modal/QModal.jsx b/src/components/common/modal/QModal.jsx
new file mode 100644
index 00000000..60ce318c
--- /dev/null
+++ b/src/components/common/modal/QModal.jsx
@@ -0,0 +1,12 @@
+import { Modal } from 'react-responsive-modal'
+import 'react-responsive-modal/styles.css'
+
+export default function QModal(props) {
+  const { open, setOpen, children } = props
+
+  return (
+    <Modal open={open} onClose={() => setOpen(false)} center>
+      {children}
+    </Modal>
+  )
+}
diff --git a/yarn.lock b/yarn.lock
index cfb210ea..b7d6abf3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -21,6 +21,18 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@bedrock-layout/use-forwarded-ref@^1.3.1":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@bedrock-layout/use-forwarded-ref/-/use-forwarded-ref-1.6.1.tgz#e0d25c35af41ccaa36df809a7de8d5ccd9c70d1e"
+  integrity sha512-GD9A9AFLzFNjr7k6fgerSqxfwDWl+wsPS11PErOKe1zkVz0y7RGC9gzlOiX/JrgpyB3NFHWIuGtoOQqifJQQpw==
+  dependencies:
+    "@bedrock-layout/use-stateful-ref" "^1.4.1"
+
+"@bedrock-layout/use-stateful-ref@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@bedrock-layout/use-stateful-ref/-/use-stateful-ref-1.4.1.tgz#c543c61d15885e19506f068618a4d6427a5bf817"
+  integrity sha512-4eKO2KdQEXcR5LI4QcxqlJykJUDQJWDeWYAukIn6sRQYoabcfI5kDl61PUi6FR6o8VFgQ8IEP7HleKqWlSe8SQ==
+
 "@floating-ui/core@^1.6.0":
   version "1.6.5"
   resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.5.tgz#102335cac0d22035b04d70ca5ff092d2d1a26f2b"
@@ -2256,6 +2268,11 @@ binary-extensions@^2.0.0:
   resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz"
   integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
 
+body-scroll-lock@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz#c1392d9217ed2c3e237fee1e910f6cdd80b7aaec"
+  integrity sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -2334,6 +2351,11 @@ chownr@^2.0.0:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
+classnames@^2.3.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
 client-only@0.0.1, client-only@^0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz"
@@ -3409,6 +3431,15 @@ react-remove-scroll@^2.5.6:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-responsive-modal@^6.4.2:
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/react-responsive-modal/-/react-responsive-modal-6.4.2.tgz#666b5c35b232cec617981006c9fe59414531a5a0"
+  integrity sha512-ARjGEKE5Gu5CSvyA8U9ARVbtK4SMAtdXsjtzwtxRlQIHC99RQTnOUctLpl7+/sp1Kg1OJZ6yqvp6ivd4TBueEw==
+  dependencies:
+    "@bedrock-layout/use-forwarded-ref" "^1.3.1"
+    body-scroll-lock "^3.1.5"
+    classnames "^2.3.1"
+
 react-style-singleton@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"