diff --git a/src/components/atoms/letter/Letter.tsx b/src/components/atoms/letter/Letter.tsx
index 9f01162..e4dc4aa 100644
--- a/src/components/atoms/letter/Letter.tsx
+++ b/src/components/atoms/letter/Letter.tsx
@@ -1,15 +1,10 @@
-import Image, { StaticImageData } from "next/image";
+import { COLORS } from "@/constants/letterColors";
+import { letterProps } from "@/types/Letter";
+import Image from "next/image";
 import React from "react";
 import trash from "../../../../public/icons/trash.png";
 
-interface LetterProps {
-  letterText: string;
-  user?: { name: string; profileImg: StaticImageData | string };
-  backgroundColor: string;
-  isMine: boolean;
-}
-
-const Letter = ({ letterText, user, backgroundColor, isMine }: LetterProps) => {
+const Letter = ({ letterText, user, backgroundColor, isMine }: letterProps) => {
   const trimmedText =
     letterText.length > 140
       ? `${letterText.slice(0, 140)}... 더보기`
@@ -18,7 +13,7 @@ const Letter = ({ letterText, user, backgroundColor, isMine }: LetterProps) => {
     <div
       className={`w-148 pt-8 pb-12 px-12 gangwon-medium`}
       style={{
-        backgroundColor: `${backgroundColor}`,
+        backgroundColor: COLORS[backgroundColor],
         boxShadow: "0px 0px 4px 0px rgba(0, 0, 0, 0.15)",
       }}
     >
diff --git a/src/components/molecules/modal/ModalView.tsx b/src/components/molecules/modal/ModalView.tsx
index 34a06ea..45d41c1 100644
--- a/src/components/molecules/modal/ModalView.tsx
+++ b/src/components/molecules/modal/ModalView.tsx
@@ -1,23 +1,93 @@
+import { modalProps } from "@/types/Modal";
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+} from "@nextui-org/react";
 import React, { HTMLAttributes } from "react";
 
-interface Props extends HTMLAttributes<HTMLDivElement> {
+interface modalViewProps extends HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
-}
-
-const ModalView = ({ children, ...props }: Props) => {
-  // 모달 클릭 시 백드롭에도 터치 이벤트가 전파되는 것을 막기 위함
-  const handleClickModalView = (
-    e: React.MouseEvent<HTMLDivElement, MouseEvent>
-  ) => {
-    e.stopPropagation();
+  isOpen: boolean;
+  onOpen: () => void;
+  onOpenChange: (isOpen: boolean) => void;
+  noBtn?: {
+    info: string;
+    handler?: () => void;
   };
+  yesBtn?: {
+    info: string;
+    handler?: () => void;
+  };
+}
 
+const ModalView = ({
+  children,
+  isOpen,
+  onOpen,
+  onOpenChange,
+  noBtn,
+  yesBtn,
+  ...props
+}: modalViewProps) => {
   return (
-    <div className="fixed bg-[#00000030] top-0 left-0 w-full h-full flex justify-center items-center z-modal">
-      <div onClick={handleClickModalView} {...props}>
-        {children}
-      </div>
-    </div>
+    <Modal
+      classNames={{
+        base: "w-fit min-h-fit overflow-x-hidden ",
+      }}
+      isDismissable={false}
+      shouldBlockScroll={true}
+      placement="center"
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+    >
+      <ModalContent>
+        {(onClose) => (
+          <div className="medium-medium w-280 min-h-fit pt-60 pb-16 px-16 rounded-16 bg-white flex flex-col items-center justify-center box-border z-modal">
+            <ModalBody>{children}</ModalBody>
+            <ModalFooter>
+              {noBtn && yesBtn && (
+                <div className="flex items-center justify-between">
+                  <Button
+                    className="mr-8 w-120 h-44  bg-gray-light flex items-center justify-center text-gray-medium-text-2"
+                    onClick={() => {
+                      noBtn.handler && noBtn.handler();
+                      onClose();
+                    }}
+                  >
+                    {noBtn.info}
+                  </Button>
+                  <Button
+                    className="w-120 h-44  bg-main-point text-white flex items-center justify-center"
+                    onClick={() => {
+                      yesBtn.handler && yesBtn.handler();
+                      onClose();
+                    }}
+                  >
+                    {yesBtn.info}
+                  </Button>
+                </div>
+              )}
+              {!noBtn && yesBtn && (
+                <div>
+                  <Button
+                    className="mt-[-12px] w-248 h-44 bg-main-point text-white flex items-center justify-center"
+                    onClick={() => {
+                      yesBtn.handler && yesBtn.handler();
+                      onClose();
+                    }}
+                  >
+                    {yesBtn.info}
+                  </Button>
+                </div>
+              )}
+            </ModalFooter>
+          </div>
+        )}
+      </ModalContent>
+    </Modal>
   );
 };
 
diff --git a/src/components/organisms/modal/auth/AuthCheckingModalContent.tsx b/src/components/organisms/modal/auth/AuthCheckingModalContent.tsx
new file mode 100644
index 0000000..fffb361
--- /dev/null
+++ b/src/components/organisms/modal/auth/AuthCheckingModalContent.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+interface authCheckingModalProps {
+  name: string;
+  major: string;
+  studentId: string;
+}
+
+const AuthCheckingModal = ({
+  name,
+  major,
+  studentId,
+}: authCheckingModalProps) => {
+  return (
+    <div className="flex flex-col justify-center">
+      <h1 className="medium-medium text-gray-dark-text-1 mb-24">
+        올바른 정보가 맞는지 확인해 주세요.
+      </h1>
+      <h1 className="medium-regular text-gray-dark-text-1">이름: {name}</h1>
+      <h1 className="medium-regular text-gray-dark-text-1 mb-24">
+        학과/학번: {major} {studentId}
+      </h1>
+      <h2 className="small-regular text-gray-medium-text-2 ">
+        * 정보가 다르다면 관리자에게 문의해 주세요.
+      </h2>
+      <h2 className="small-regular text-gray-medium-text-2 ">
+        mjuletter@gmail.com
+      </h2>
+    </div>
+  );
+};
+
+export default AuthCheckingModal;
diff --git a/src/components/organisms/modal/auth/AuthModal.stories.tsx b/src/components/organisms/modal/auth/AuthModal.stories.tsx
new file mode 100644
index 0000000..04448e5
--- /dev/null
+++ b/src/components/organisms/modal/auth/AuthModal.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import AuthModal from "./AuthModal";
+
+const meta: Meta<typeof AuthModal> = {
+  title: "components/organisms/modal/AuthModal",
+  component: AuthModal,
+  tags: ["autodocs"],
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AuthModal>;
+
+export const Primary: Story = {
+  args: {},
+};
diff --git a/src/components/organisms/modal/auth/AuthModal.tsx b/src/components/organisms/modal/auth/AuthModal.tsx
new file mode 100644
index 0000000..27ad753
--- /dev/null
+++ b/src/components/organisms/modal/auth/AuthModal.tsx
@@ -0,0 +1,69 @@
+import ModalView from "@/components/molecules/modal/ModalView";
+import { AuthModalProps } from "@/types/Modal";
+import { useDisclosure } from "@nextui-org/react";
+import React from "react";
+import AuthCheckingModalContent from "./AuthCheckingModalContent";
+
+const AuthModal = ({ authStatus }: AuthModalProps) => {
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
+  const handleYesClick = () => {
+    console.log("Yes button clicked!");
+  };
+  const handleNoClick = () => {
+    console.log("No button clicked!");
+  };
+
+  return (
+    <>
+      {authStatus === "proceeding" && (
+        <ModalView
+          isOpen={isOpen}
+          onOpen={onOpen}
+          onOpenChange={onOpenChange}
+          children={`학생카드 인증 중 \n 조금만 기다려 주세요.`}
+        />
+        // <ModalView>
+        //   <ModalContent info={`학생카드 인증 중 \n 조금만 기다려 주세요.`} />
+        // </ModalView>
+      )}
+      {authStatus === "checking" && (
+        <ModalView
+          isOpen={isOpen}
+          onOpen={onOpen}
+          onOpenChange={onOpenChange}
+          children={
+            <AuthCheckingModalContent name={""} major={""} studentId={""} />
+          }
+          yesBtn={{ info: "확인", handler: handleYesClick }}
+          noBtn={{ info: "취소", handler: handleNoClick }}
+        />
+        // <ModalView>
+        //   <ModalContent
+        //     info={
+        //       <AuthCheckingModalContent name={""} major={""} studentId={""} />
+        //     }
+        //     yesBtn={{ info: "확인", handler: handleYesClick }}
+        //     noBtn={{ info: "취소", handler: handleNoClick }}
+        //   />
+        // </ModalView>
+      )}
+      {authStatus === "failed" && (
+        <ModalView
+          isOpen={isOpen}
+          onOpen={onOpen}
+          onOpenChange={onOpenChange}
+          children={`학생카드 인증에 실패했어요.\n 다시 시도해 주세요.`}
+          yesBtn={{ info: "확인", handler: handleYesClick }}
+        />
+        // <ModalView>
+        //   <ModalContent
+        //     info={`학생카드 인증에 실패했어요.\n 다시 시도해 주세요.`}
+        //     yesBtn={{ info: "확인", handler: handleYesClick }}
+        //   />
+        // </ModalView>
+      )}
+    </>
+  );
+};
+
+export default AuthModal;
diff --git a/src/components/organisms/modal/letter/DetailModal.tsx b/src/components/organisms/modal/letter/DetailModal.tsx
new file mode 100644
index 0000000..e0a4536
--- /dev/null
+++ b/src/components/organisms/modal/letter/DetailModal.tsx
@@ -0,0 +1,15 @@
+import { StaticImageData } from "next/image";
+import React from "react";
+
+interface DetailModalProps {
+  letterText: string;
+  user?: { name: string; profileImg: StaticImageData | string };
+  backgroundColor: string;
+  isMine: boolean;
+}
+
+const DetailModal = () => {
+  return <div>DetailModal</div>;
+};
+
+export default DetailModal;
diff --git a/src/components/organisms/modal/letter/WriteModal.stories.tsx b/src/components/organisms/modal/letter/WriteModal.stories.tsx
new file mode 100644
index 0000000..2b6ea34
--- /dev/null
+++ b/src/components/organisms/modal/letter/WriteModal.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import WriteModal from "./WriteModal";
+const meta: Meta<typeof WriteModal> = {
+  title: "components/organisms/modal/WriteModal",
+  component: WriteModal,
+  tags: ["autodocs"],
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof WriteModal>;
+
+export const Primary: Story = {
+  args: {},
+};
diff --git a/src/components/organisms/modal/letter/WriteModal.tsx b/src/components/organisms/modal/letter/WriteModal.tsx
new file mode 100644
index 0000000..a1c3a22
--- /dev/null
+++ b/src/components/organisms/modal/letter/WriteModal.tsx
@@ -0,0 +1,24 @@
+import ModalView from "@/components/molecules/modal/ModalView";
+import { COLORS } from "@/constants/letterColors";
+import React, { useState } from "react";
+import LetterModalContent from "./WriteModalContent";
+
+const WriteModal = () => {
+  const [selectedColor, setSelectedColor] =
+    useState<keyof typeof COLORS>("red");
+  const [isChecked, setIsChecked] = useState(false);
+  const [textAreaValue, setTextAreaValue] = useState("");
+
+  return (
+    <LetterModalContent
+      selectedColor={selectedColor}
+      setSelectedColor={setSelectedColor}
+      textAreaValue={textAreaValue}
+      setTextAreaValue={setTextAreaValue}
+      isChecked={isChecked}
+      setIsChecked={setIsChecked}
+    />
+  );
+};
+
+export default WriteModal;
diff --git a/src/components/organisms/modal/LetterModalContent.tsx b/src/components/organisms/modal/letter/WriteModalContent.tsx
similarity index 93%
rename from src/components/organisms/modal/LetterModalContent.tsx
rename to src/components/organisms/modal/letter/WriteModalContent.tsx
index 5165d2a..be042d6 100644
--- a/src/components/organisms/modal/LetterModalContent.tsx
+++ b/src/components/organisms/modal/letter/WriteModalContent.tsx
@@ -20,7 +20,7 @@ const LetterModalContent = ({
   setSelectedColor,
 }: letterModalContentProps) => {
   return (
-    <div className="flex flex-col justify-center">
+    <div className="flex flex-col justify-center text-gray-dark-text-1 text-center whitespace-pre-line mb-44">
       <div className="mt-[-24px] mb-20 text-gray-dark-text-1 medium-medium">
         롤링페이퍼로 마음을 전해보세요.
       </div>
diff --git a/src/components/templates/main/MainDetail.tsx b/src/components/templates/main/MainDetail.tsx
index d4bfd9a..af0d834 100644
--- a/src/components/templates/main/MainDetail.tsx
+++ b/src/components/templates/main/MainDetail.tsx
@@ -1,22 +1,32 @@
 "use client";
-import DetailProfile from "../../atoms/profile/detailProfile/DetailProfile";
 import React, { useState } from "react";
 import test from "../../../../public/icons/testProfile.png";
-import Letter from "../../atoms/letter/Letter";
-import BottomFixedBtn from "../../atoms/button/bottomFixed/BottomFixed";
-import LetterModal from "@/components/organisms/modal/LetterModal";
+import WriteModal from "@/components/organisms/modal/letter/WriteModal";
+import { useDisclosure } from "@nextui-org/react";
+import ModalView from "@/components/molecules/modal/ModalView";
+import BottomFixedBtn from "@/components/atoms/button/bottomFixed/BottomFixed";
+import Letter from "@/components/atoms/letter/Letter";
+import DetailProfile from "@/components/atoms/profile/detailProfile/DetailProfile";
 
 const MainDetail = () => {
-  const [isLetterModalOpened, setLetterModalOpened] = useState(false);
+  const { isOpen, onOpen, onOpenChange } = useDisclosure();
+  const handleYesClick = () => {
+    console.log("Yes button clicked!");
+  };
+  const handleNoClick = () => {
+    console.log("No button clicked!");
+  };
   return (
     <>
-      {isLetterModalOpened && (
-        <LetterModal
-          isLetterModalOpened={isLetterModalOpened}
-          setIsLetterModalOpened={setLetterModalOpened}
-        />
-      )}
-      <div className="mt-20 relative tablet:min-h-full w-360 flex flex-col items-center justify-start">
+      <ModalView
+        isOpen={isOpen}
+        onOpen={onOpen}
+        onOpenChange={onOpenChange}
+        children={<WriteModal />}
+        yesBtn={{ info: "확인", handler: handleYesClick }}
+        noBtn={{ info: "취소", handler: handleNoClick }}
+      />
+      <div className="relative tablet:min-h-full w-360 flex flex-col items-center justify-start">
         <div className="mb-28">
           <DetailProfile
             profileImg={test}
@@ -32,7 +42,16 @@ const MainDetail = () => {
                 letterText={
                   "안!~!~!~!~!안녕 녕  말걸!~!~!안녕 녕  말걸!~!~!안녕 녕  말걸!~!~!안녕 녕  말걸!~!~!안녕 녕  말걸!~!~!안녕 녕  말걸지마~~!~!~!~!~!~!~!"
                 }
-                backgroundColor={"#F0D36D"}
+                backgroundColor="green"
+                isMine={false}
+              />
+            </div>{" "}
+            <div className="mb-16">
+              <Letter
+                letterText={
+                  "안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지마~~!~!~!~!~!~!~!"
+                }
+                backgroundColor="green"
                 isMine={false}
               />
             </div>
@@ -41,25 +60,42 @@ const MainDetail = () => {
                 letterText={
                   "안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지마~~!~!~!~!~!~!~!"
                 }
-                backgroundColor={"#F39889"}
+                backgroundColor="blue"
                 isMine={false}
               />
             </div>
-
             <div className="mb-16">
               <Letter
                 letterText={"안녕 말걸지마~~!~!~!~!~!~!~!"}
-                backgroundColor={"#9BC9E6"}
+                backgroundColor="yellow"
+                isMine={false}
+              />
+            </div>{" "}
+            <div className="mb-16">
+              <Letter
+                letterText={
+                  "안!~!~!~!~!안녕 녕  말걸!~!~!안녕 녕  말걸!~!~!안녕 녕  말걸!~!~!안녕 녕  말걸!~!~!안녕 녕  말걸!~!~!안녕 녕  말걸지마~~!~!~!~!~!~!~!"
+                }
+                backgroundColor="blue"
                 isMine={false}
               />
             </div>
+            <div className="mb-16">
+              <Letter
+                letterText={
+                  "안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지마~~!~!~!~!~!~!~!"
+                }
+                backgroundColor="green"
+                isMine={false}
+              />
+            </div>{" "}
           </div>
           <div className="">
             <div className="mb-16">
               <Letter
                 letterText={"안녕 말걸지마~~!~!~!~!~!~!~!"}
-                backgroundColor={"#F39889"}
                 isMine={false}
+                backgroundColor={"red"}
               />
             </div>
             <div className="mb-16">
@@ -67,7 +103,7 @@ const MainDetail = () => {
                 letterText={
                   "안!~!~!~!~!안녕 녕  말걸!~!~!안녕 녕  말걸!~!~!안녕 녕  말걸!~!~!안녕 녕  말걸!~!~!안녕 녕  말걸!~!~!안녕 녕  말걸지마~~!~!~!~!~!~!~!"
                 }
-                backgroundColor={"#F0D36D"}
+                backgroundColor="blue"
                 isMine={false}
               />
             </div>
@@ -76,18 +112,42 @@ const MainDetail = () => {
                 letterText={
                   "안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지마~~!~!~!~!~!~!~!"
                 }
-                backgroundColor={"#F39889"}
+                backgroundColor="green"
+                isMine={false}
+              />
+            </div>{" "}
+            <div className="mb-16">
+              <Letter
+                letterText={
+                  "안!~!~!~!~!안녕 녕  말걸!~!~!안녕 녕  말걸!~!~!안녕 녕  말걸!~!~!안녕 녕  말걸!~!~!안녕 녕  말걸!~!~!안녕 녕  말걸지마~~!~!~!~!~!~!~!"
+                }
+                backgroundColor="blue"
+                isMine={false}
+              />
+            </div>
+            <div className="mb-16">
+              <Letter
+                letterText={
+                  "안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지마~~!~!~!~!~!~!~!"
+                }
+                backgroundColor="green"
+                isMine={false}
+              />
+            </div>{" "}
+            <div className="mb-16">
+              <Letter
+                letterText={
+                  "안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지안녕 말걸지마~~!~!~!~!~!~!~!"
+                }
+                backgroundColor="green"
                 isMine={false}
               />
             </div>
           </div>
         </div>
-        <div
-          onClick={() => setLetterModalOpened(!isLetterModalOpened)}
-          className="m-16 fixed  bottom-0 right-0"
-        >
+        <button onClick={onOpen} className="m-16 sticky bottom-10 ml-auto ">
           <BottomFixedBtn usage={"write"} />
-        </div>
+        </button>
       </div>
     </>
   );
diff --git a/tailwind.config.ts b/tailwind.config.ts
index a6c5dcf..902ffc9 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,3 +1,4 @@
+import { nextui } from "@nextui-org/react";
 import type { Config } from "tailwindcss";
 
 const px0_10 = { ...Array.from(Array(11)).map((_, i) => `${i}px`) } as any;
@@ -13,6 +14,7 @@ const config: Config = {
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
@@ -49,12 +51,14 @@ const config: Config = {
         tablet: "1000px",
       },
       zIndex: {
-        modal: "100",
-        navigatoinList: "200",
-        letterModal: "200",
+        modal: "30",
+        navigatoinList: "50",
+        letterModal: "30",
+        header: "10",
       },
     },
   },
-  plugins: [require("tailwindcss")],
+  darkMode: "class",
+  plugins: [require("tailwindcss"), nextui()],
 };
 export default config;