diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css
index e7432b4..e8341f0 100644
--- a/src/assets/css/custom.css
+++ b/src/assets/css/custom.css
@@ -847,12 +847,10 @@ background-size: 75% auto;
 .modal-video{display:flex;align-items: center;justify-content: center;}
 .modal-video>.modal-content{height:90vh;}
 
-.modal-uam-reservation{min-width:1200px}
-.modal-uam-reservation .modal-title{width:100%;}
-.modal-uam-reservation .modal-body{padding:1.4rem}
-.modal-uam-reservation .nav-link{transition:0.3s ease;-webkit-transition:0.3s ease;}
-.modal-uam-reservation .nav-link{border:0px;background-color:#242b3d}
-.modal-uam-reservation .nav-link.active span{font-weight:500}
+.uam-reservation{min-width:1200px}
+.uam-reservation .nav-link{transition:0.3s ease;-webkit-transition:0.3s ease;}
+.uam-reservation .nav-link{border:0px;background-color:#242b3d}
+.uam-reservation .nav-link.active span{font-weight:500}
 .uam-reservation-header{display:flex;width:100%;align-items:center;justify-content:space-between;}
 .uam-reservation-header h5{font-weight:500;}
 .uam-reservation-header .step{display:flex;}
diff --git a/src/views/control/setting/ControlReservation.js b/src/views/control/setting/ControlReservation.js
index 788ac15..1040193 100644
--- a/src/views/control/setting/ControlReservation.js
+++ b/src/views/control/setting/ControlReservation.js
@@ -21,6 +21,7 @@ import {
   ReserveStep3,
   ReserveStep4
 } from './steps';
+import { CustomMainLayout } from '../../../components/layout/CustomMainLayout';
 
 export default function ControlReservation({ modal, handler }) {
   const [activeTab, setActiveTab] = useState(1);
@@ -29,25 +30,40 @@ export default function ControlReservation({ modal, handler }) {
   const [isChoise, setIsChoise] = useState(false);
   const [search, setSearch] = useState(false);
   const [reserveStep, setReserveStep] = useState(1);
+  const titleName = '도심항공교통(UAM) 예약';
 
   function getStepColorClass(stepNumber, currentStep) {
     return stepNumber === currentStep ? 'active-step' : 'inactive-step';
   }
   return (
-    <div className='vertically-centered-modal'>
-      {/* <Modal
-        isOpen={modal}
-        toggle={handler}
-        className='modal-dialog-centered modal-lg modal-uam-reservation'
-      > */}
-      {/* <ModalHeader
-          toggle={handler}
-        > */}
-      {search ? (
-        reserveStep !== 4 ? (
-          <div className='uam-reservation-header'>
-            <h5>도심항공교통(UAM) 예약</h5>
-            <div>
+    <CustomMainLayout title={titleName}>
+      <div className='uam-reservation'>
+        <div>
+          {search ? (
+            reserveStep !== 4 ? (
+              <div className='uam-reservation-header'>
+                <div>
+                  <ul className='step'>
+                    <li className={getStepColorClass(1, step)}>
+                      ➀ 항공교통 조회
+                    </li>
+                    <li className={getStepColorClass(2, step)}>
+                      ➁ 항공교통 선택
+                    </li>
+                    <li className={getStepColorClass(3, step)}>
+                      ➂ 탑승정보 입력
+                    </li>
+                    <li className={getStepColorClass(4, step)}>➃ 결제</li>
+                  </ul>
+                </div>
+              </div>
+            ) : (
+              <div className='uam-reservation-header'>
+                <div>결제완료</div>
+              </div>
+            )
+          ) : (
+            <div className='uam-reservation-header'>
               <ul className='step'>
                 <li className={getStepColorClass(1, step)}>➀ 항공교통 조회</li>
                 <li className={getStepColorClass(2, step)}>➁ 항공교통 선택</li>
@@ -55,145 +71,128 @@ export default function ControlReservation({ modal, handler }) {
                 <li className={getStepColorClass(4, step)}>➃ 결제</li>
               </ul>
             </div>
-          </div>
-        ) : (
-          <div className='uam-reservation-header'>
-            <h4>도심항공교통(UAM) 예약</h4>
-            <div>결제완료</div>
-          </div>
-        )
-      ) : (
-        <div className='uam-reservation-header'>
-          <h5>도심항공교통(UAM) 예약</h5>
-          <ul className='step'>
-            <li className={getStepColorClass(1, step)}>➀ 항공교통 조회</li>
-            <li className={getStepColorClass(2, step)}>➁ 항공교통 선택</li>
-            <li className={getStepColorClass(3, step)}>➂ 탑승정보 입력</li>
-            <li className={getStepColorClass(4, step)}>➃ 결제</li>
-          </ul>
+          )}
         </div>
-      )}
-      {/* </ModalHeader> */}
-      {/* <ModalBody> */}
-      {!search ? (
         <div>
-          <div>
-            <Nav justified pills>
-              <NavItem>
-                <NavLink
-                  active={activeTab === 1}
-                  onClick={() => setActiveTab(1)}
-                >
-                  <span>왕복</span>
-                </NavLink>
-              </NavItem>
-              <NavItem>
-                <NavLink
-                  active={activeTab === 2}
-                  onClick={() => setActiveTab(2)}
-                >
-                  <span>편도</span>
-                </NavLink>
-              </NavItem>
-            </Nav>
-          </div>
-          <div className='uam-reservation-tab-list'>
-            <div
-              className={`list ${airTraficCheck === 1 ? 'active' : ''}`}
-              onClick={() => {
-                setAirTraficCheck(1);
-              }}
-            >
-              출발지
-            </div>
-            <div
-              className={`list ${airTraficCheck === 2 ? 'active' : ''}`}
-              onClick={() => {
-                setAirTraficCheck(2);
-              }}
-            >
-              도착지
-            </div>
-            <div
-              className={`list ${airTraficCheck === 3 ? 'active' : ''}`}
-              onClick={() => {
-                setAirTraficCheck(3);
-              }}
-            >
-              탑승일
-            </div>
-            <div
-              className={`list ${airTraficCheck === 4 ? 'active' : ''}`}
-              onClick={() => {
-                setAirTraficCheck(4);
-              }}
-            >
-              탑승객
-            </div>
-            <div
-              className={`list finish ${isChoise ? 'active' : ''}`}
-              onClick={() => {
-                setSearch(true);
-                setStep(2);
-              }}
-            >
-              항공교통 조회
-            </div>
-          </div>
-
-          <>
-            {airTraficCheck === 1 && <Step1 />}
-            {airTraficCheck === 2 && <Step2 />}
-            {airTraficCheck === 3 && <Step3 />}
-            {airTraficCheck === 4 && <Step4 setIsChoise={setIsChoise} />}
-          </>
-        </div>
-      ) : (
-        <>
-          {reserveStep === 1 && <ReserveStep1 />}
-          {reserveStep === 2 && <ReserveStep2 />}
-          {reserveStep === 3 && <ReserveStep3 />}
-          {reserveStep === 4 && <ReserveStep4 />}
-          {reserveStep !== 4 ? (
+          {!search ? (
             <div>
               <div>
-                <button
+                <Nav justified pills>
+                  <NavItem>
+                    <NavLink
+                      active={activeTab === 1}
+                      onClick={() => setActiveTab(1)}
+                    >
+                      <span>왕복</span>
+                    </NavLink>
+                  </NavItem>
+                  <NavItem>
+                    <NavLink
+                      active={activeTab === 2}
+                      onClick={() => setActiveTab(2)}
+                    >
+                      <span>편도</span>
+                    </NavLink>
+                  </NavItem>
+                </Nav>
+              </div>
+              <div className='uam-reservation-tab-list'>
+                <div
+                  className={`list ${airTraficCheck === 1 ? 'active' : ''}`}
                   onClick={() => {
-                    if (reserveStep === 1) {
-                      setIsChoise(false);
-                      setSearch(false);
-                      setAirTraficCheck(1);
-                    } else {
-                      setReserveStep(reserveStep - 1);
-                      setStep(step - 1);
-                    }
+                    setAirTraficCheck(1);
                   }}
                 >
-                  취소
-                </button>
-              </div>
-              <div>
-                <button
+                  출발지
+                </div>
+                <div
+                  className={`list ${airTraficCheck === 2 ? 'active' : ''}`}
+                  onClick={() => {
+                    setAirTraficCheck(2);
+                  }}
+                >
+                  도착지
+                </div>
+                <div
+                  className={`list ${airTraficCheck === 3 ? 'active' : ''}`}
+                  onClick={() => {
+                    setAirTraficCheck(3);
+                  }}
+                >
+                  탑승일
+                </div>
+                <div
+                  className={`list ${airTraficCheck === 4 ? 'active' : ''}`}
+                  onClick={() => {
+                    setAirTraficCheck(4);
+                  }}
+                >
+                  탑승객
+                </div>
+                <div
+                  className={`list finish ${isChoise ? 'active' : ''}`}
                   onClick={() => {
-                    setReserveStep(reserveStep + 1);
-                    setStep(step + 1);
+                    setSearch(true);
+                    setStep(2);
                   }}
                 >
-                  {reserveStep === 3 ? '결제하기' : '다음'}
-                </button>
+                  항공교통 조회
+                </div>
               </div>
+
+              <>
+                {airTraficCheck === 1 && <Step1 />}
+                {airTraficCheck === 2 && <Step2 />}
+                {airTraficCheck === 3 && <Step3 />}
+                {airTraficCheck === 4 && <Step4 setIsChoise={setIsChoise} />}
+              </>
             </div>
           ) : (
-            <div>
-              <div>
-                <button onClick={handler}>확인</button>
-              </div>
-            </div>
+            <>
+              {reserveStep === 1 && <ReserveStep1 />}
+              {reserveStep === 2 && <ReserveStep2 />}
+              {reserveStep === 3 && <ReserveStep3 />}
+              {reserveStep === 4 && <ReserveStep4 />}
+              {reserveStep !== 4 ? (
+                <div>
+                  <div>
+                    <button
+                      onClick={() => {
+                        if (reserveStep === 1) {
+                          setIsChoise(false);
+                          setSearch(false);
+                          setAirTraficCheck(1);
+                        } else {
+                          setReserveStep(reserveStep - 1);
+                          setStep(step - 1);
+                        }
+                      }}
+                    >
+                      취소
+                    </button>
+                  </div>
+                  <div>
+                    <button
+                      onClick={() => {
+                        setReserveStep(reserveStep + 1);
+                        setStep(step + 1);
+                      }}
+                    >
+                      {reserveStep === 3 ? '결제하기' : '다음'}
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <div>
+                  <div>
+                    <button onClick={handler}>확인</button>
+                  </div>
+                </div>
+              )}
+            </>
           )}
-        </>
-      )}
-      {/* </ModalBody> */}
-      {/* </Modal> */}
-    </div>
+        </div>
+      </div>
+    </CustomMainLayout>
   );
 }