diff --git a/package-lock.json b/package-lock.json
index a3de847..c2d70aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21968,6 +21968,14 @@
         }
       }
     },
+    "react-portal": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/react-portal/-/react-portal-4.2.2.tgz",
+      "integrity": "sha512-vS18idTmevQxyQpnde0Td6ZcUlv+pD8GTyR42n3CHUQq9OHi1C4jDE4ZWEbEsrbrLRhSECYiao58cvocwMtP7Q==",
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-rating": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/react-rating/-/react-rating-2.0.5.tgz",
diff --git a/package.json b/package.json
index af65893..9109bfb 100644
--- a/package.json
+++ b/package.json
@@ -92,6 +92,7 @@
     "react-pdf": "5.3.2",
     "react-perfect-scrollbar": "1.5.5",
     "react-player": "2.6.2",
+    "react-portal": "^4.2.2",
     "react-rating": "2.0.5",
     "react-redux": "7.2.2",
     "react-router-dom": "5.2.0",
diff --git a/src/@core/layouts/VerticalLayout.js b/src/@core/layouts/VerticalLayout.js
index 43145f8..4e990e6 100644
--- a/src/@core/layouts/VerticalLayout.js
+++ b/src/@core/layouts/VerticalLayout.js
@@ -1,129 +1,136 @@
 // ** React Imports
-import { useState, useEffect } from 'react'
-import { useLocation } from 'react-router-dom'
+import { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 
 // ** Store & Actions
-import { useSelector, useDispatch } from 'react-redux'
-import { handleMenuCollapsed, handleContentWidth, handleMenuHidden } from '@store/actions/layout'
+import { useSelector, useDispatch } from 'react-redux';
+import {
+  handleMenuCollapsed,
+  handleContentWidth,
+  handleMenuHidden
+} from '@store/actions/layout';
 
 // ** Third Party Components
-import classnames from 'classnames'
-import { ArrowUp } from 'react-feather'
-import ScrollToTop from 'react-scroll-up'
-import { Navbar, Button } from 'reactstrap'
+import classnames from 'classnames';
+import { ArrowUp } from 'react-feather';
+import ScrollToTop from 'react-scroll-up';
+import { Navbar, Button } from 'reactstrap';
 
 // ** Configs
-import themeConfig from '@configs/themeConfig'
+import themeConfig from '@configs/themeConfig';
 
 // ** Custom Components
-import Customizer from '@components/customizer'
-import FooterComponent from './components/footer'
-import NavbarComponent from './components/navbar'
-import SidebarComponent from './components/menu/vertical-menu'
+import Customizer from '@components/customizer';
+import FooterComponent from './components/footer';
+import NavbarComponent from './components/navbar';
+import SidebarComponent from './components/menu/vertical-menu';
 
 // ** Custom Hooks
-import { useRTL } from '@hooks/useRTL'
-import { useSkin } from '@hooks/useSkin'
-import { useNavbarType } from '@hooks/useNavbarType'
-import { useFooterType } from '@hooks/useFooterType'
-import { useNavbarColor } from '@hooks/useNavbarColor'
+import { useRTL } from '@hooks/useRTL';
+import { useSkin } from '@hooks/useSkin';
+import { useNavbarType } from '@hooks/useNavbarType';
+import { useFooterType } from '@hooks/useFooterType';
+import { useNavbarColor } from '@hooks/useNavbarColor';
 
 // ** Styles
-import '@styles/base/core/menu/menu-types/vertical-menu.scss'
-import '@styles/base/core/menu/menu-types/vertical-overlay-menu.scss'
+import '@styles/base/core/menu/menu-types/vertical-menu.scss';
+import '@styles/base/core/menu/menu-types/vertical-overlay-menu.scss';
 
 const VerticalLayout = props => {
   // ** Props
-  const { children, navbar, footer, menu, routerProps, currentActiveItem } = props
+  const { children, navbar, footer, menu, routerProps, currentActiveItem } =
+    props;
 
   // ** Hooks
-  const [skin, setSkin] = useSkin()
-  const [isRtl, setIsRtl] = useRTL()
-  const [navbarType, setNavbarType] = useNavbarType()
-  const [footerType, setFooterType] = useFooterType()
-  const [navbarColor, setNavbarColor] = useNavbarColor()
+  const [skin, setSkin] = useSkin();
+  const [isRtl, setIsRtl] = useRTL();
+  const [navbarType, setNavbarType] = useNavbarType();
+  const [footerType, setFooterType] = useFooterType();
+  const [navbarColor, setNavbarColor] = useNavbarColor();
 
   // ** States
-  const [isMounted, setIsMounted] = useState(false)
-  const [menuVisibility, setMenuVisibility] = useState(false)
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth)
+  const [isMounted, setIsMounted] = useState(false);
+  const [menuVisibility, setMenuVisibility] = useState(false);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 
   // ** Store Vars
-  const dispatch = useDispatch()
-  const layoutStore = useSelector(state => state.layout)
+  const dispatch = useDispatch();
+  const layoutStore = useSelector(state => state.layout);
 
   // ** Update Window Width
   const handleWindowWidth = () => {
-    setWindowWidth(window.innerWidth)
-  }
+    setWindowWidth(window.innerWidth);
+  };
 
   // ** Vars
-  const location = useLocation()
-  const contentWidth = layoutStore.contentWidth
-  const menuCollapsed = layoutStore.menuCollapsed
-  const isHidden = layoutStore.menuHidden
+  const location = useLocation();
+  const contentWidth = layoutStore.contentWidth;
+  const menuCollapsed = layoutStore.menuCollapsed;
+  const isHidden = layoutStore.menuHidden;
 
   // ** Toggles Menu Collapsed
-  const setMenuCollapsed = val => dispatch(handleMenuCollapsed(val))
+  const setMenuCollapsed = val => dispatch(handleMenuCollapsed(val));
 
   // ** Handles Content Width
-  const setContentWidth = val => dispatch(handleContentWidth(val))
+  const setContentWidth = val => dispatch(handleContentWidth(val));
 
   // ** Handles Content Width
-  const setIsHidden = val => dispatch(handleMenuHidden(val))
+  const setIsHidden = val => dispatch(handleMenuHidden(val));
 
   //** This function will detect the Route Change and will hide the menu on menu item click
   useEffect(() => {
     if (menuVisibility && windowWidth < 1200) {
-      setMenuVisibility(false)
+      setMenuVisibility(false);
     }
-  }, [location])
+  }, [location]);
 
   //** Sets Window Size & Layout Props
   useEffect(() => {
     if (window !== undefined) {
-      window.addEventListener('resize', handleWindowWidth)
+      window.addEventListener('resize', handleWindowWidth);
     }
-  }, [windowWidth])
+  }, [windowWidth]);
 
   //** ComponentDidMount
   useEffect(() => {
-    setIsMounted(true)
-    return () => setIsMounted(false)
-  }, [])
+    setIsMounted(true);
+    return () => setIsMounted(false);
+  }, []);
 
   // ** Vars
   const footerClasses = {
     static: 'footer-static',
     sticky: 'footer-fixed',
     hidden: 'footer-hidden'
-  }
+  };
 
   const navbarWrapperClasses = {
     floating: 'navbar-floating',
     sticky: 'navbar-sticky',
     static: 'navbar-static',
     hidden: 'navbar-hidden'
-  }
+  };
 
   const navbarClasses = {
     floating: 'floating-nav',
     sticky: 'fixed-top',
     static: 'navbar-static-top',
     hidden: 'd-none'
-  }
+  };
 
-  const bgColorCondition = navbarColor !== '' && navbarColor !== 'light' && navbarColor !== 'white'
+  const bgColorCondition =
+    navbarColor !== '' && navbarColor !== 'light' && navbarColor !== 'white';
 
   if (!isMounted) {
-    return null
+    return null;
   }
   return (
     <div
+      id='vertical'
       className={classnames(
-        `wrapper vertical-layout ${navbarWrapperClasses[navbarType] || 'navbar-floating'} ${
-          footerClasses[footerType] || 'footer-static'
-        }`,
+        `wrapper vertical-layout ${
+          navbarWrapperClasses[navbarType] || 'navbar-floating'
+        } ${footerClasses[footerType] || 'footer-static'}`,
         {
           // Modern Menu
           'vertical-menu-modern': windowWidth >= 1200,
@@ -157,11 +164,21 @@ const VerticalLayout = props => {
         dark={skin === 'dark' || bgColorCondition}
         color={bgColorCondition ? navbarColor : undefined}
         className={classnames(
-          `header-navbar navbar align-items-center ${navbarClasses[navbarType] || 'floating-nav'} navbar-shadow`
+          `header-navbar navbar align-items-center ${
+            navbarClasses[navbarType] || 'floating-nav'
+          } navbar-shadow`
         )}
       >
         <div className='navbar-container d-flex content'>
-          {navbar ? navbar : <NavbarComponent setMenuVisibility={setMenuVisibility} skin={skin} setSkin={setSkin} />}
+          {navbar ? (
+            navbar
+          ) : (
+            <NavbarComponent
+              setMenuVisibility={setMenuVisibility}
+              skin={skin}
+              setSkin={setSkin}
+            />
+          )}
         </div>
       </Navbar>
       {children}
@@ -201,11 +218,21 @@ const VerticalLayout = props => {
         />
       ) : null}
       <footer
-        className={classnames(`footer footer-light ${footerClasses[footerType] || 'footer-static'}`, {
-          'd-none': footerType === 'hidden'
-        })}
+        className={classnames(
+          `footer footer-light ${footerClasses[footerType] || 'footer-static'}`,
+          {
+            'd-none': footerType === 'hidden'
+          }
+        )}
       >
-        {footer ? footer : <FooterComponent footerType={footerType} footerClasses={footerClasses} />}
+        {footer ? (
+          footer
+        ) : (
+          <FooterComponent
+            footerType={footerType}
+            footerClasses={footerClasses}
+          />
+        )}
       </footer>
 
       {themeConfig.layout.scrollTop === true ? (
@@ -218,7 +245,7 @@ const VerticalLayout = props => {
         </div>
       ) : null}
     </div>
-  )
-}
+  );
+};
 
-export default VerticalLayout
+export default VerticalLayout;
diff --git a/src/components/vertiport/VertiportRightMenu.js b/src/components/vertiport/VertiportRightMenu.js
new file mode 100644
index 0000000..40736be
--- /dev/null
+++ b/src/components/vertiport/VertiportRightMenu.js
@@ -0,0 +1,29 @@
+import { Map } from 'react-feather';
+
+export const VertiportRightMenu = ({ setOpenSetting, openSetting }) => {
+  return (
+    <>
+      {openSetting ? (
+        <div className='right-menu active'>
+          <button
+            className='right-layer-btn'
+            onClick={() => setOpenSetting(false)}
+          >
+            <Map size={18} />
+          </button>
+          <div className='right-layer active'>test</div>
+        </div>
+      ) : (
+        <div className='right-menu'>
+          <button
+            className='right-layer-btn'
+            onClick={() => setOpenSetting(true)}
+          >
+            <Map size={18} />
+          </button>
+          <div className='right-layer'></div>
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/src/views/vertiport/VertiportView.js b/src/views/vertiport/VertiportView.js
index a87417d..b34617f 100644
--- a/src/views/vertiport/VertiportView.js
+++ b/src/views/vertiport/VertiportView.js
@@ -5,6 +5,8 @@ import '../../assets/css/custom.css';
 import { useState } from 'react';
 import { Map } from 'react-feather';
 import { CustomMainLayout } from '../../components/layout/CustomMainLayout';
+import { createPortal } from 'react-dom';
+import { VertiportRightMenu } from '../../components/vertiport/VertiportRightMenu';
 
 export default function VertiportView() {
   // 오른쪽 사이드 메뉴 표출 여부
@@ -12,47 +14,13 @@ export default function VertiportView() {
   const titleName = '버티포트';
   return (
     <>
-    <CustomMainLayout title={titleName}>
-     test
-    </CustomMainLayout>
-      {openSetting ? (
-        <div className='right-menu active'>
-          <button
-            className='right-layer-btn'
-            onClick={() => setOpenSetting(false)}
-          >
-            <Map size={18} />
-          </button>
-          <div className='right-layer active'>
-            test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
-            test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
-            test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
-            test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
-            test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
-            test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
-            test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
-            test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
-            test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
-            test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
-            test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
-            test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
-            test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
-            test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
-            test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
-            test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
-            test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
-          </div>
-        </div>
-      ) : (
-        <div className='right-menu'>
-          <button
-            className='right-layer-btn'
-            onClick={() => setOpenSetting(true)}
-          >
-            <Map size={18} />
-          </button>
-          <div className='right-layer'></div>
-        </div>
+      <CustomMainLayout title={titleName}>test</CustomMainLayout>
+      {createPortal(
+        <VertiportRightMenu
+          openSetting={openSetting}
+          setOpenSetting={setOpenSetting}
+        />,
+        document.getElementById('vertical')
       )}
     </>
   );