diff --git a/src/components/account/find/AccountFindPassword.js b/src/components/account/find/AccountFindPassword.js
index 1a991325..7bfc317c 100644
--- a/src/components/account/find/AccountFindPassword.js
+++ b/src/components/account/find/AccountFindPassword.js
@@ -13,7 +13,7 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter
-} from 'reactstrap';
+} from '../../ui/index';
 import { User, Lock } from 'react-feather';
 import '../../../assets/css/custom.css';
 import { accountApi } from '../../../modules/account/register/apis/accountApi';
diff --git a/src/components/account/find/AccountFindTab.js b/src/components/account/find/AccountFindTab.js
index b8a53b70..a5b953f9 100644
--- a/src/components/account/find/AccountFindTab.js
+++ b/src/components/account/find/AccountFindTab.js
@@ -8,7 +8,7 @@ import {
   NavItem,
   NavLink,
   TabContent
-} from 'reactstrap';
+} from '../../ui/index';
 import classnames from 'classnames';
 import { User, Lock } from 'react-feather';
 import { AccountFindUserIdContainer } from '../../../containers/account/find/AccountFindUserIdContainer';
diff --git a/src/components/account/find/AccountFindUserId.js b/src/components/account/find/AccountFindUserId.js
index 31085016..5d84c1fb 100644
--- a/src/components/account/find/AccountFindUserId.js
+++ b/src/components/account/find/AccountFindUserId.js
@@ -13,7 +13,7 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter
-} from 'reactstrap';
+} from '../../ui/index';
 import { User } from 'react-feather';
 
 import '../../../assets/css/custom.css';
diff --git a/src/components/account/login/AccountLogin.js b/src/components/account/login/AccountLogin.js
index 85efc58a..056c809e 100644
--- a/src/components/account/login/AccountLogin.js
+++ b/src/components/account/login/AccountLogin.js
@@ -6,7 +6,7 @@ import {
   InputGroup,
   InputGroupAddon,
   InputGroupText
-} from 'reactstrap';
+} from '../../ui/index';
 import { Mail, Lock } from 'react-feather';
 import { Link } from 'react-router-dom';
 import { useEffect, useState } from 'react';
diff --git a/src/components/account/mypage/AccountMypageForm.js b/src/components/account/mypage/AccountMypageForm.js
index d8bf7059..c90c65d9 100644
--- a/src/components/account/mypage/AccountMypageForm.js
+++ b/src/components/account/mypage/AccountMypageForm.js
@@ -8,13 +8,12 @@ import {
   FormGroup,
   Input,
   Label,
-  Button,
   Modal,
   ModalHeader,
   ModalBody,
   ModalFooter
-} from 'reactstrap';
-
+} from '../../../components/ui/index';
+import { Button } from 'reactstrap';
 // ** Styles
 import '../../../assets/css/custom.css';
 import { useHistory } from 'react-router-dom';
diff --git a/src/components/account/mypage/AccountMypagePwForm.js b/src/components/account/mypage/AccountMypagePwForm.js
index 6a7237c1..21c95aea 100644
--- a/src/components/account/mypage/AccountMypagePwForm.js
+++ b/src/components/account/mypage/AccountMypagePwForm.js
@@ -9,9 +9,9 @@ import {
   TabPane,
   FormGroup,
   Input,
-  Label,
-  Button
-} from 'reactstrap';
+  Label
+} from '../../ui/index';
+import { Button } from 'reactstrap';
 // ** Styles
 import '../../../assets/css/custom.css';
 import {
@@ -167,7 +167,7 @@ const AccountMypagePwForm = ({ activeTab }) => {
                     onChange={onChanges}
                     value={newPswd}
                     name='newPswd'
-                    size='sm'
+                    bsSize='sm'
                     autoComplete='off'
                     placeholder=''
                   />
@@ -187,7 +187,7 @@ const AccountMypagePwForm = ({ activeTab }) => {
                     onChange={onChanges}
                     value={newPswdConfirm}
                     name='newPswdConfirm'
-                    size='sm'
+                    bsSize='sm'
                     autoComplete='off'
                     placeholder=''
                   />
@@ -201,7 +201,7 @@ const AccountMypagePwForm = ({ activeTab }) => {
               color='primary'
               onClick={pwSubmit}
               disabled={resultOk}
-              bsSize='sm'
+              size='sm'
             >
               저장
             </Button.Ripple>
diff --git a/src/components/account/register/AccountRegisterComplete.js b/src/components/account/register/AccountRegisterComplete.js
index edab7a9e..167b11a6 100644
--- a/src/components/account/register/AccountRegisterComplete.js
+++ b/src/components/account/register/AccountRegisterComplete.js
@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
 import completeImg from '../../../assets/images/complete_img.svg';
-import { Button } from 'reactstrap';
+import { Button } from '../../ui/index';
 
 export const AccountRegisterComplete = ({
   stepper,
@@ -21,9 +21,9 @@ export const AccountRegisterComplete = ({
         <span className='d-block'>
           모든 회원가입 절차가 완료되었습니다. 로그인 후 사용해 주세요.
         </span>
-        <Button.Ripple type='submit' color='primary' onClick={handlerLogin}>
+        <Button type='submit' color='primary' onClick={handlerLogin}>
           <span className='align-middle d-block'>로그인</span>
-        </Button.Ripple>
+        </Button>
       </div>
       {/* ---- 가입인사 끝 */}
     </Fragment>
diff --git a/src/components/account/register/AccountRegisterForm.js b/src/components/account/register/AccountRegisterForm.js
index a0332bb4..70b26735 100644
--- a/src/components/account/register/AccountRegisterForm.js
+++ b/src/components/account/register/AccountRegisterForm.js
@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { isObjEmpty } from '@utils';
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
+import { Button } from 'reactstrap';
 import {
   Form,
   Label,
@@ -11,13 +12,12 @@ import {
   FormGroup,
   Row,
   Col,
-  Button,
   Modal,
   ModalHeader,
   ModalBody,
   ModalFooter,
   FormFeedback
-} from 'reactstrap';
+} from '../../ui/index';
 import { useDispatch, useSelector } from 'react-redux';
 import { accountApi } from '../../../modules/account/register/apis/accountApi';
 
diff --git a/src/components/account/register/AccountRegisterTerm.js b/src/components/account/register/AccountRegisterTerm.js
index 4e5d4833..093e1588 100644
--- a/src/components/account/register/AccountRegisterTerm.js
+++ b/src/components/account/register/AccountRegisterTerm.js
@@ -1,15 +1,15 @@
 import { useEffect, useState } from 'react';
+import { Button } from 'reactstrap';
 import {
   FormGroup,
   Row,
   Col,
-  Button,
   CustomInput,
   Modal,
   ModalHeader,
   ModalBody,
   ModalFooter
-} from 'reactstrap';
+} from '../../ui/index';
 import { useDispatch, useSelector } from 'react-redux';
 import * as Actions from '../../../modules/account/register/actions/accountAction';
 
diff --git a/src/components/analysis/history/AnalysisHistoryDetailGrid.js b/src/components/analysis/history/AnalysisHistoryDetailGrid.js
index 01ed3364..92ec61f9 100644
--- a/src/components/analysis/history/AnalysisHistoryDetailGrid.js
+++ b/src/components/analysis/history/AnalysisHistoryDetailGrid.js
@@ -1,23 +1,4 @@
-import {
-  Row,
-  Col,
-  Table,
-  Badge,
-  UncontrolledDropdown,
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
-  Card,
-  CardHeader,
-  CardBody,
-  CardTitle,
-  CardSubtitle,
-  ButtonGroup,
-  Button,
-  Input,
-  CustomInput,
-  FormGroup
-} from 'reactstrap';
+import { Row, Col, Card } from '../../ui/index';
 import { ExcelExportButton } from '../../crud/excel/ExcelExportButton';
 
 import { GridDatabase } from '../../crud/grid/GridDatatable';
diff --git a/src/components/analysis/history/AnalysisHistoryDetailSearch.js b/src/components/analysis/history/AnalysisHistoryDetailSearch.js
index 366b132d..df51cdf5 100644
--- a/src/components/analysis/history/AnalysisHistoryDetailSearch.js
+++ b/src/components/analysis/history/AnalysisHistoryDetailSearch.js
@@ -1,22 +1,5 @@
-import {
-  Row,
-  Col,
-  Table,
-  Badge,
-  UncontrolledDropdown,
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
-  Card,
-  CardHeader,
-  CardBody,
-  CardTitle,
-  CardSubtitle,
-  ButtonGroup,
-  Button,
-  Input,
-  CustomInput
-} from 'reactstrap';
+import { Row, Col, Card, CardBody, CustomInput } from '../../ui/index';
+import { Button } from 'reactstrap';
 import { Calendar } from 'react-feather';
 import Flatpickr from 'react-flatpickr';
 import { MoreVertical, Edit, Trash, Search, File } from 'react-feather';
diff --git a/src/components/analysis/history/AnalysisHistoryDetailStatic.js b/src/components/analysis/history/AnalysisHistoryDetailStatic.js
index cdbde363..d202cb37 100644
--- a/src/components/analysis/history/AnalysisHistoryDetailStatic.js
+++ b/src/components/analysis/history/AnalysisHistoryDetailStatic.js
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Card, CardBody, Row, Col } from 'reactstrap';
+import { Card, CardBody, Row, Col } from '../../ui/index';
 import ChartjsLineChart from '../../charts/chart-js/ChartjsLineChart';
 export const AnalysisHistoryDetailStatic = props => {
   const [chartData, setChartData] = useState({});
diff --git a/src/components/analysis/history/AnalysisHistoryGrid.js b/src/components/analysis/history/AnalysisHistoryGrid.js
index 5b5d6ba5..f1566567 100644
--- a/src/components/analysis/history/AnalysisHistoryGrid.js
+++ b/src/components/analysis/history/AnalysisHistoryGrid.js
@@ -1,5 +1,5 @@
 import { GridDatabase } from '../../../components/crud/grid/GridDatatable';
-import { Card, Spinner } from 'reactstrap';
+import { Card, Spinner } from '../../ui/index';
 import { ExcelExportButton } from '../../crud/excel/ExcelExportButton';
 import { useSelector } from 'react-redux';
 
diff --git a/src/components/analysis/simulation/AnalysisSimuationInfo.js b/src/components/analysis/simulation/AnalysisSimuationInfo.js
index bd8f3e4f..08ced85b 100644
--- a/src/components/analysis/simulation/AnalysisSimuationInfo.js
+++ b/src/components/analysis/simulation/AnalysisSimuationInfo.js
@@ -1,7 +1,7 @@
 import dayjs from 'dayjs';
 import { useEffect, useState, useRef, useCallback } from 'react';
 import { useSelector } from 'react-redux';
-import { Spinner } from 'reactstrap';
+import { Spinner } from '../../ui/index';
 
 export const AnalysisSimulationInfo = props => {
   const [target, setTarget] = useState(null);
diff --git a/src/components/analysis/simulation/AnalysisSimulationDetail.js b/src/components/analysis/simulation/AnalysisSimulationDetail.js
index db355672..921f92f2 100644
--- a/src/components/analysis/simulation/AnalysisSimulationDetail.js
+++ b/src/components/analysis/simulation/AnalysisSimulationDetail.js
@@ -7,13 +7,12 @@ import { AiFillCaretRight, AiOutlinePause } from 'react-icons/ai';
 import { IoSettings } from 'react-icons/io5';
 import ScrollContainer from 'react-indiana-drag-scroll';
 import {
-  Badge,
-  Button,
   UncontrolledDropdown,
   DropdownToggle,
   DropdownMenu,
   DropdownItem
 } from 'reactstrap';
+import { Badge, Button } from '../../ui/index';
 import drone_img from '../../../assets/images/drone.jpg';
 import { ReactComponent as Simulation_icon } from '../../../assets/images/simulation_arrow.svg';
 import { IMG_PATH } from '../../../configs/constants';
diff --git a/src/components/analysis/simulation/AnalysisSimulationReport.js b/src/components/analysis/simulation/AnalysisSimulationReport.js
index feb855a0..db0594ef 100644
--- a/src/components/analysis/simulation/AnalysisSimulationReport.js
+++ b/src/components/analysis/simulation/AnalysisSimulationReport.js
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Calendar, X } from 'react-feather';
 import Flatpickr from 'react-flatpickr';
-import { Button, Input, InputGroup } from 'reactstrap';
+import { Button, Input, InputGroup } from '../../ui/index';
 
 export const AnalysisSimulationReport = props => {
   // 식별번호
diff --git a/src/components/basis/BasisDataGrid.js b/src/components/basis/BasisDataGrid.js
index c39425a5..cfdc9a06 100644
--- a/src/components/basis/BasisDataGrid.js
+++ b/src/components/basis/BasisDataGrid.js
@@ -1,4 +1,4 @@
-import { Row, Col, Card } from 'reactstrap';
+import { Row, Col, Card } from '../ui/index';
 import { GridDatabase } from '../crud/grid/GridDatatable';
 
 export const BasisDataGrid = props => {
diff --git a/src/components/basis/BasisGroupGrid.js b/src/components/basis/BasisGroupGrid.js
index e581e95c..209b8383 100644
--- a/src/components/basis/BasisGroupGrid.js
+++ b/src/components/basis/BasisGroupGrid.js
@@ -1,5 +1,5 @@
 import { GridDatabase } from '../crud/grid/GridDatatable';
-import { Card, Row, Col } from 'reactstrap';
+import { Card, Row, Col } from '../ui/index';
 
 export const BasisGroupGrid = props => {
   return (
diff --git a/src/components/basis/BasisSearch.js b/src/components/basis/BasisSearch.js
index b92bdd33..8facea50 100644
--- a/src/components/basis/BasisSearch.js
+++ b/src/components/basis/BasisSearch.js
@@ -1,4 +1,5 @@
-import { Row, Col, Card, CardBody, Button } from 'reactstrap';
+import { Row, Col, Card, CardBody } from '../ui/index';
+import { Button } from 'reactstrap';
 import { Search } from 'react-feather';
 
 export const BasisSearch = ({ children, ...props }) => {
diff --git a/src/components/basis/dron/BasisDronForm.js b/src/components/basis/dron/BasisDronForm.js
index ff4248da..334d7c16 100644
--- a/src/components/basis/dron/BasisDronForm.js
+++ b/src/components/basis/dron/BasisDronForm.js
@@ -10,7 +10,7 @@ import {
   Label,
   Row,
   Button
-} from 'reactstrap';
+} from '../../ui/index';
 import { ARCTFT_TYPE_CD, WGHT_TYPE_CD } from '../../../configs/constants';
 
 export const BasisDronForm = props => {
diff --git a/src/components/basis/dron/BasisDronImage.js b/src/components/basis/dron/BasisDronImage.js
index 0c631ca1..419c9aa4 100644
--- a/src/components/basis/dron/BasisDronImage.js
+++ b/src/components/basis/dron/BasisDronImage.js
@@ -1,15 +1,14 @@
 import React from 'react';
 import { Edit, Image, Trash2 } from 'react-feather';
 import {
-  Button,
   Label,
   Media,
   Modal,
   ModalHeader,
   ModalBody,
   ModalFooter
-} from 'reactstrap';
-
+} from '../../ui/index';
+import { Button } from 'reactstrap';
 export const BasisDronImage = props => {
   return (
     <Media className='pal-media'>
diff --git a/src/components/basis/dron/BasisDronTab.js b/src/components/basis/dron/BasisDronTab.js
index ff4b0203..210191dd 100644
--- a/src/components/basis/dron/BasisDronTab.js
+++ b/src/components/basis/dron/BasisDronTab.js
@@ -9,7 +9,7 @@ import {
   NavLink,
   TabContent,
   TabPane
-} from 'reactstrap';
+} from '../../ui/index';
 import classnames from 'classnames';
 import { Settings, AlertTriangle } from 'react-feather';
 import { BasisDronDetailContainer } from '../../../containers/basis/dron/BasisDronDetailContainer';
diff --git a/src/components/basis/dron/BasisIdntform.js b/src/components/basis/dron/BasisIdntform.js
index 5275ec1b..0a249d63 100644
--- a/src/components/basis/dron/BasisIdntform.js
+++ b/src/components/basis/dron/BasisIdntform.js
@@ -5,12 +5,12 @@ import {
   Col,
   Card,
   CardBody,
-  Button,
   Input,
   Form,
   FormGroup,
   Label
-} from 'reactstrap';
+} from '../../ui/index';
+import { Button } from 'reactstrap';
 import { X } from 'react-feather';
 
 import Repeater from '@components/repeater';
diff --git a/src/components/basis/flight/plan/FlightPlanGroupGrid.js b/src/components/basis/flight/plan/FlightPlanGroupGrid.js
index a50b8c53..1a52ceff 100644
--- a/src/components/basis/flight/plan/FlightPlanGroupGrid.js
+++ b/src/components/basis/flight/plan/FlightPlanGroupGrid.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { GridDatabase } from '../../../crud/grid/GridDatatable';
-import { Card, Button } from 'reactstrap';
-
+import { Button } from 'reactstrap';
+import { Card } from '../../../ui/index';
 const FlightPlanGroupGrid = ({
   data,
   count,
diff --git a/src/components/basis/flight/schedule/FlightScheduleGrid.js b/src/components/basis/flight/schedule/FlightScheduleGrid.js
index 982db3a8..59007bcd 100644
--- a/src/components/basis/flight/schedule/FlightScheduleGrid.js
+++ b/src/components/basis/flight/schedule/FlightScheduleGrid.js
@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 import { GridDatabase } from '@src/components/crud/grid/GridDatatable';
-import { Row, Col, Card, Spinner } from 'reactstrap';
+import { Row, Col, Card, Spinner } from '../../../ui/index';
 import FlightScheduleRealTime from './FlightScheduleRealTime';
 import { useSelector } from 'react-redux';
 import dayjs from 'dayjs';
diff --git a/src/components/basis/flight/schedule/FlightScheduleSearch.js b/src/components/basis/flight/schedule/FlightScheduleSearch.js
index 6d774f02..9695d3dd 100644
--- a/src/components/basis/flight/schedule/FlightScheduleSearch.js
+++ b/src/components/basis/flight/schedule/FlightScheduleSearch.js
@@ -1,6 +1,7 @@
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
-import { Row, Col, Button, Card, CardBody } from 'reactstrap';
+import { Row, Col, Card, CardBody } from '../../../ui/index';
+import { Button } from 'reactstrap';
 import { Search, Calendar } from 'react-feather';
 import Flatpickr from 'react-flatpickr';
 import { FLIGHT_SCHEDULE_LIST } from '@src/modules/laanc/actions/laancActions';
diff --git a/src/components/basis/group/BaisGroupForm.js b/src/components/basis/group/BaisGroupForm.js
index a58a0c83..95b5ac65 100644
--- a/src/components/basis/group/BaisGroupForm.js
+++ b/src/components/basis/group/BaisGroupForm.js
@@ -2,18 +2,18 @@ import { useEffect, useState } from 'react';
 import * as yup from 'yup';
 import { useForm } from 'react-hook-form';
 import classnames from 'classnames';
+import { Button } from 'reactstrap';
 import {
   Row,
   Col,
   Card,
   CardBody,
-  Button,
   Input,
   FormGroup,
   Label,
   FormFeedback,
   Form
-} from 'reactstrap';
+} from '../../ui/index';
 import { yupResolver } from '@hookform/resolvers/yup';
 
 export const BasisGroupForm = props => {
diff --git a/src/components/basis/group/BasisGroupApprovalSearch.js b/src/components/basis/group/BasisGroupApprovalSearch.js
index 9c8080bf..1abd6d0b 100644
--- a/src/components/basis/group/BasisGroupApprovalSearch.js
+++ b/src/components/basis/group/BasisGroupApprovalSearch.js
@@ -1,4 +1,4 @@
-import { Row, Col, Input, CustomInput, Label, FormGroup } from 'reactstrap';
+import { Row, Col, Input, CustomInput, Label, FormGroup } from '../../ui/index';
 import { useEffect, useState } from 'react';
 import { BasisSearch } from '../BasisSearch';
 
diff --git a/src/components/basis/group/BasisGroupDetailJoinSearch.js b/src/components/basis/group/BasisGroupDetailJoinSearch.js
index 4f3b3024..766916a9 100644
--- a/src/components/basis/group/BasisGroupDetailJoinSearch.js
+++ b/src/components/basis/group/BasisGroupDetailJoinSearch.js
@@ -1,4 +1,4 @@
-import { Row, Col, Input, Label, FormGroup } from 'reactstrap';
+import { Row, Col, Input, Label, FormGroup } from '../../ui/index';
 import { BasisSearch } from '../BasisSearch';
 
 export const BasisGroupDetailJoinSearch = props => {
diff --git a/src/components/basis/group/BasisGroupUsersSearch.js b/src/components/basis/group/BasisGroupUsersSearch.js
index 189ca62a..db424085 100644
--- a/src/components/basis/group/BasisGroupUsersSearch.js
+++ b/src/components/basis/group/BasisGroupUsersSearch.js
@@ -1,4 +1,4 @@
-import { Row, Col, Input, Label, FormGroup } from 'reactstrap';
+import { Row, Col, Input, Label, FormGroup } from '../../ui/index';
 import { BasisSearch } from '../BasisSearch';
 
 export const BasisGroupUsersSearch = props => {
diff --git a/src/components/charts/apex/ApexAreaCharts.js b/src/components/charts/apex/ApexAreaCharts.js
index 233d34cf..d9fff2fa 100644
--- a/src/components/charts/apex/ApexAreaCharts.js
+++ b/src/components/charts/apex/ApexAreaCharts.js
@@ -1,13 +1,19 @@
-import Chart from 'react-apexcharts'
-import Flatpickr from 'react-flatpickr'
-import { Calendar } from 'react-feather'
-import { Card, CardHeader, CardTitle, CardBody, CardSubtitle } from 'reactstrap'
+import Chart from 'react-apexcharts';
+import Flatpickr from 'react-flatpickr';
+import { Calendar } from 'react-feather';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardBody,
+  CardSubtitle
+} from '../../ui/index';
 
 const areaColors = {
   series3: '#a4f8cd',
   series2: '#60f2ca',
   series1: '#2bdac7'
-}
+};
 
 const ApexAreaCharts = ({ direction }) => {
   const options = {
@@ -64,7 +70,7 @@ const ApexAreaCharts = ({ direction }) => {
     yaxis: {
       opposite: direction === 'rtl'
     }
-  }
+  };
 
   const series = [
     {
@@ -79,7 +85,7 @@ const ApexAreaCharts = ({ direction }) => {
       name: 'Sales',
       data: [20, 40, 30, 70, 40, 60, 50, 140, 120, 100, 140, 180, 220]
     }
-  ]
+  ];
 
   return (
     <Card>
@@ -88,7 +94,9 @@ const ApexAreaCharts = ({ direction }) => {
           <CardTitle className='mb-75' tag='h4'>
             Line Chart
           </CardTitle>
-          <CardSubtitle className='text-muted'>Commercial networks</CardSubtitle>
+          <CardSubtitle className='text-muted'>
+            Commercial networks
+          </CardSubtitle>
         </div>
         <div className='d-flex align-items-center mt-md-0 mt-1'>
           <Calendar size={17} />
@@ -105,6 +113,6 @@ const ApexAreaCharts = ({ direction }) => {
         <Chart options={options} series={series} type='area' height={400} />
       </CardBody>
     </Card>
-  )
-}
-export default ApexAreaCharts
+  );
+};
+export default ApexAreaCharts;
diff --git a/src/components/charts/apex/index.js b/src/components/charts/apex/index.js
index 600ee78a..3e461d81 100644
--- a/src/components/charts/apex/index.js
+++ b/src/components/charts/apex/index.js
@@ -1,49 +1,57 @@
 // ** React Imports
-import { Fragment, useContext } from 'react'
+import { Fragment, useContext } from 'react';
 
 // ** Third Party Components
-import { Row, Col } from 'reactstrap'
+import { Row, Col } from '../../ui/index';
 
 // ** Custom Hooks
-import { useRTL } from '@hooks/useRTL'
+import { useRTL } from '@hooks/useRTL';
 
 // ** Custom Components
-import Breadcrumbs from '@components/breadcrumbs'
+import Breadcrumbs from '@components/breadcrumbs';
 
 // ** Context
-import { ThemeColors } from '@src/utility/context/ThemeColors'
+import { ThemeColors } from '@src/utility/context/ThemeColors';
 
 // ** Charts
-import ApexBarChart from './ApexBarChart'
-import ApexLineChart from './ApexLineChart'
-import ApexAreaChart from './ApexAreaCharts'
-import ApexRadarChart from './ApexRadarChart'
-import ApexDonutChart from './ApexDonutChart'
-import ApexRadialBarChart from './ApexRadialbar'
-import ApexColumnChart from './ApexColumnCharts'
-import ApexHeatmapChart from './ApexHeatmapChart'
-import ApexScatterChart from './ApexScatterCharts'
-import ApexCandlestickChart from './ApexCandlestickChart'
+import ApexBarChart from './ApexBarChart';
+import ApexLineChart from './ApexLineChart';
+import ApexAreaChart from './ApexAreaCharts';
+import ApexRadarChart from './ApexRadarChart';
+import ApexDonutChart from './ApexDonutChart';
+import ApexRadialBarChart from './ApexRadialbar';
+import ApexColumnChart from './ApexColumnCharts';
+import ApexHeatmapChart from './ApexHeatmapChart';
+import ApexScatterChart from './ApexScatterCharts';
+import ApexCandlestickChart from './ApexCandlestickChart';
 
 // ** Styles
-import '@styles/react/libs/charts/apex-charts.scss'
-import '@styles/react/libs/flatpickr/flatpickr.scss'
+import '@styles/react/libs/charts/apex-charts.scss';
+import '@styles/react/libs/flatpickr/flatpickr.scss';
 
 const ApexCharts = () => {
   // ** Hooks
-  const [isRtl, setIsRtl] = useRTL()
+  const [isRtl, setIsRtl] = useRTL();
 
   // ** Theme Colors
-  const { colors } = useContext(ThemeColors)
+  const { colors } = useContext(ThemeColors);
 
   return (
     <Fragment>
-      <Breadcrumbs breadCrumbTitle='Apex Charts' breadCrumbParent='Charts' breadCrumbActive='Apex' />
+      <Breadcrumbs
+        breadCrumbTitle='Apex Charts'
+        breadCrumbParent='Charts'
+        breadCrumbActive='Apex'
+      />
       <Row className='match-height'>
         <Col sm='12'>
           <p>
             A React.js component for ApexCharts. Read full documnetation{' '}
-            <a href='https://github.com/apexcharts/react-apexcharts' target='_blank' rel='noopener noreferrer'>
+            <a
+              href='https://github.com/apexcharts/react-apexcharts'
+              target='_blank'
+              rel='noopener noreferrer'
+            >
               here
             </a>
           </p>
@@ -63,10 +71,16 @@ const ApexCharts = () => {
           />
         </Col>
         <Col sm='12'>
-          <ApexLineChart direction={isRtl ? 'rtl' : 'ltr'} warning={colors.warning.main} />
+          <ApexLineChart
+            direction={isRtl ? 'rtl' : 'ltr'}
+            warning={colors.warning.main}
+          />
         </Col>
         <Col xl='6' lg='12'>
-          <ApexBarChart direction={isRtl ? 'rtl' : 'ltr'} info={colors.info.main} />
+          <ApexBarChart
+            direction={isRtl ? 'rtl' : 'ltr'}
+            info={colors.info.main}
+          />
         </Col>
         <Col xl='6' lg='12'>
           <ApexCandlestickChart
@@ -89,7 +103,7 @@ const ApexCharts = () => {
         </Col>
       </Row>
     </Fragment>
-  )
-}
+  );
+};
 
-export default ApexCharts
+export default ApexCharts;
diff --git a/src/components/cstmrService/faq/FaqForm.js b/src/components/cstmrService/faq/FaqForm.js
index d5ca8abf..f5a007bb 100644
--- a/src/components/cstmrService/faq/FaqForm.js
+++ b/src/components/cstmrService/faq/FaqForm.js
@@ -10,7 +10,7 @@ import {
   FormGroup,
   Label,
   CustomInput
-} from 'reactstrap';
+} from '../../ui/index';
 
 export default function FaqForm({
   isOpenFormModal,
diff --git a/src/components/cstmrService/faq/FaqSearchBox.js b/src/components/cstmrService/faq/FaqSearchBox.js
index b4d4739d..e0c20e87 100644
--- a/src/components/cstmrService/faq/FaqSearchBox.js
+++ b/src/components/cstmrService/faq/FaqSearchBox.js
@@ -1,4 +1,9 @@
-import { Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
+import {
+  Input,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupText
+} from '../../ui/index';
 import { Search } from 'react-feather';
 
 export default function FaqSearchBox({
diff --git a/src/components/cstmrService/faq/FaqTab.js b/src/components/cstmrService/faq/FaqTab.js
index b9cec8a2..7ead4708 100644
--- a/src/components/cstmrService/faq/FaqTab.js
+++ b/src/components/cstmrService/faq/FaqTab.js
@@ -1,4 +1,4 @@
-import { Nav, NavItem, NavLink } from 'reactstrap';
+import { Nav, NavItem, NavLink } from '../../ui/index';
 
 export default function FaqTab({ activeTab, handlerChangeTab, tabList }) {
   return (
diff --git a/src/components/cstmrService/inquiry/InquiryWrite.js b/src/components/cstmrService/inquiry/InquiryWrite.js
index 2a8b0e37..682f4a48 100644
--- a/src/components/cstmrService/inquiry/InquiryWrite.js
+++ b/src/components/cstmrService/inquiry/InquiryWrite.js
@@ -14,7 +14,7 @@ import {
   Col,
   FormGroup,
   Label
-} from 'reactstrap';
+} from '../../ui/index';
 import classnames from 'classnames';
 import { X } from 'react-feather';
 
diff --git a/src/components/cstmrService/inquiry/QnaDetail.js b/src/components/cstmrService/inquiry/QnaDetail.js
index 1d0e4757..0c8977c9 100644
--- a/src/components/cstmrService/inquiry/QnaDetail.js
+++ b/src/components/cstmrService/inquiry/QnaDetail.js
@@ -10,7 +10,7 @@ import {
   FormGroup,
   Label,
   CustomInput
-} from 'reactstrap';
+} from '../../ui/index';
 
 export default function QnaDetatil({
   isDetailModal,
diff --git a/src/components/cstmrService/inquiry/QnaGrid.js b/src/components/cstmrService/inquiry/QnaGrid.js
index 4d01a026..21fd6daa 100644
--- a/src/components/cstmrService/inquiry/QnaGrid.js
+++ b/src/components/cstmrService/inquiry/QnaGrid.js
@@ -1,6 +1,6 @@
 import { GridDatabase } from '../../crud/grid/GridDatatable';
-import { Button, Card } from 'reactstrap';
-
+import { Button } from 'reactstrap';
+import { Card } from '../../ui/index';
 export default function QnaGrid({ lists, handlerDetailModal }) {
   const columns = [
     {
diff --git a/src/components/cstmrService/inquiry/QnaSearchBox.js b/src/components/cstmrService/inquiry/QnaSearchBox.js
index 54c200b6..e09b1cd8 100644
--- a/src/components/cstmrService/inquiry/QnaSearchBox.js
+++ b/src/components/cstmrService/inquiry/QnaSearchBox.js
@@ -1,4 +1,5 @@
-import { Button, Card, CardBody, Col, Row, Input } from 'reactstrap';
+import { Button } from 'reactstrap';
+import { Card, CardBody, Col, Row, Input } from '../../ui/index';
 import { Search } from 'react-feather';
 
 const categoryList = [
diff --git a/src/components/dashboard/DashboardDronList.js b/src/components/dashboard/DashboardDronList.js
index 5d32f191..c2a55ed0 100644
--- a/src/components/dashboard/DashboardDronList.js
+++ b/src/components/dashboard/DashboardDronList.js
@@ -1,5 +1,5 @@
 import { Plus } from 'react-feather';
-import { Card, CardBody, CardHeader, CardTitle, Table } from 'reactstrap';
+import { Card, CardBody, CardHeader, CardTitle, Table } from '../ui/index';
 
 export const DashboardDronList = props => {
   return (
diff --git a/src/components/dashboard/DashboardGroupList.js b/src/components/dashboard/DashboardGroupList.js
index 56b98a16..87ef9d28 100644
--- a/src/components/dashboard/DashboardGroupList.js
+++ b/src/components/dashboard/DashboardGroupList.js
@@ -1,5 +1,5 @@
 import { Plus } from 'react-feather';
-import { Card, CardBody, CardHeader, CardTitle } from 'reactstrap';
+import { Card, CardBody, CardHeader, CardTitle } from '../ui/index';
 import { GridDatabase } from '../../components/crud/grid/GridDatatable';
 import { EDateType } from '../../modules/main/dash/models/mainDashModel.ts';
 import { IoIosArrowRoundDown, IoIosArrowRoundUp } from 'react-icons/io';
diff --git a/src/components/dashboard/DashboardMenu.js b/src/components/dashboard/DashboardMenu.js
index 6c14109e..3580940c 100644
--- a/src/components/dashboard/DashboardMenu.js
+++ b/src/components/dashboard/DashboardMenu.js
@@ -1,4 +1,4 @@
-import { Card, Col, Row } from 'reactstrap';
+import { Card, Col, Row } from '../../components/ui/index';
 
 export const DashboardMenu = props => {
   return (
diff --git a/src/components/dashboard/DashboardStcsArea.js b/src/components/dashboard/DashboardStcsArea.js
index 923ac7f9..bd453ab9 100644
--- a/src/components/dashboard/DashboardStcsArea.js
+++ b/src/components/dashboard/DashboardStcsArea.js
@@ -5,7 +5,7 @@ import { Plus } from 'react-feather';
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import { Calendar } from 'react-feather';
-import { Card, CardBody, CardHeader, CardTitle } from 'reactstrap';
+import { Card, CardBody, CardHeader, CardTitle } from '../ui/index';
 import ChartjsDoughnutChart from '../charts/chart-js/ChartjsDoughnutChart';
 const tooltipShadow = 'rgba(0, 0, 0, 0.25)';
 const warningLightColor = '#FDAC34';
diff --git a/src/components/dashboard/DashboardStcsDay.js b/src/components/dashboard/DashboardStcsDay.js
index 6b415ef3..b598966a 100644
--- a/src/components/dashboard/DashboardStcsDay.js
+++ b/src/components/dashboard/DashboardStcsDay.js
@@ -5,7 +5,7 @@ import { useEffect, useState, useRef } from 'react';
 import ChartjsBarChart from '../charts/chart-js/ChartjsBarChart';
 import DatePicker from 'react-datepicker';
 import { Calendar } from 'react-feather';
-import { Card, CardBody, CardHeader, CardTitle } from 'reactstrap';
+import { Card, CardBody, CardHeader, CardTitle } from '../ui/index';
 
 const tooltipShadow = 'rgba(0, 0, 0, 0.25)';
 const gridLineColor = 'rgba(200, 200, 200, 0.2)';
diff --git a/src/components/dashboard/DroneFlightSchedule.js b/src/components/dashboard/DroneFlightSchedule.js
index e132d630..42323df0 100644
--- a/src/components/dashboard/DroneFlightSchedule.js
+++ b/src/components/dashboard/DroneFlightSchedule.js
@@ -7,7 +7,7 @@ import {
   CardTitle,
   Input,
   Label
-} from 'reactstrap';
+} from '../ui/index';
 import { GridDatabase } from '../../components/crud/grid/GridDatatable';
 
 const columns = [
diff --git a/src/components/laanc/LaancModal.js b/src/components/laanc/LaancModal.js
index 296e99ac..c4a5b1a7 100644
--- a/src/components/laanc/LaancModal.js
+++ b/src/components/laanc/LaancModal.js
@@ -1,4 +1,10 @@
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import {
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from '../ui/index';
 
 export default function LaancModal(props) {
   const handleButtonClick = () => {
diff --git a/src/components/laanc/LaancQr.js b/src/components/laanc/LaancQr.js
index a38d2a27..16ddc214 100644
--- a/src/components/laanc/LaancQr.js
+++ b/src/components/laanc/LaancQr.js
@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef } from 'react';
-import { ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { ModalHeader, ModalBody, ModalFooter, Button } from '../ui/index';
 import ErrorModal from '../../components/modal/ErrorModal';
 import axios from '../../modules/utils/customAxiosUtil';
 
diff --git a/src/components/laanc/list/LaancDetail.js b/src/components/laanc/list/LaancDetail.js
index 3837a1f1..ed8a5b66 100644
--- a/src/components/laanc/list/LaancDetail.js
+++ b/src/components/laanc/list/LaancDetail.js
@@ -10,7 +10,7 @@ import {
   FormGroup,
   Label,
   Input
-} from 'reactstrap';
+} from '../../ui/index';
 import FlightArea from '../map/FlightArea';
 import * as TermsActions from '../../../modules/account/register/actions/accountAction';
 
diff --git a/src/components/laanc/list/LaancGrid.js b/src/components/laanc/list/LaancGrid.js
index d4322134..145372fe 100644
--- a/src/components/laanc/list/LaancGrid.js
+++ b/src/components/laanc/list/LaancGrid.js
@@ -2,7 +2,8 @@ import { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { pdfjs } from 'react-pdf';
 import { GridDatabase } from '@src/components/crud/grid/GridDatatable';
-import { Row, Col, Card, Button, Spinner, Modal } from 'reactstrap';
+import { Row, Col, Card, Spinner, Modal } from '../../ui/index';
+import { Button } from 'reactstrap';
 import * as LaancAction from '../../../modules/laanc/actions/laancActions';
 import dayjs from 'dayjs';
 
diff --git a/src/components/laanc/list/LaancSearch.js b/src/components/laanc/list/LaancSearch.js
index 43bbfe10..b3b23738 100644
--- a/src/components/laanc/list/LaancSearch.js
+++ b/src/components/laanc/list/LaancSearch.js
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
-import { Row, Col, Button, Card, CardBody } from 'reactstrap';
+import { Row, Col, Card, CardBody } from '../../ui/index';
+import { Button } from 'reactstrap';
 import { Search, Calendar } from 'react-feather';
 import Flatpickr from 'react-flatpickr';
 import dayjs from 'dayjs';
diff --git a/src/components/laanc/map/FlightArea.js b/src/components/laanc/map/FlightArea.js
index 075573f6..304de0d8 100644
--- a/src/components/laanc/map/FlightArea.js
+++ b/src/components/laanc/map/FlightArea.js
@@ -1,6 +1,12 @@
 import { useEffect, useRef, useState, lazy, Suspense } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import {
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from '../../ui/index';
 // mapbox
 import 'mapbox-gl/dist/mapbox-gl.css';
 import mapboxgl from 'mapbox-gl';
diff --git a/src/components/laanc/map/LaancAreaMap.js b/src/components/laanc/map/LaancAreaMap.js
index 260d3b8a..9d28c86a 100644
--- a/src/components/laanc/map/LaancAreaMap.js
+++ b/src/components/laanc/map/LaancAreaMap.js
@@ -5,7 +5,7 @@ import threebox from 'threebox-plugin';
 import MapboxLanguage from '@mapbox/mapbox-gl-language';
 import { MAPBOX_TOKEN } from '../../../configs/constants';
 import { useDispatch, useSelector } from 'react-redux';
-import { Card, CardBody } from 'reactstrap';
+import { Card, CardBody } from '../../ui/index';
 import { initFlightBas } from '../../../modules/laanc/models/laancModels';
 import * as LaancAction from '../../../modules/laanc/actions/laancActions';
 import {
diff --git a/src/components/laanc/map/LaancDrawModal.js b/src/components/laanc/map/LaancDrawModal.js
index c340ab33..9e220cb0 100644
--- a/src/components/laanc/map/LaancDrawModal.js
+++ b/src/components/laanc/map/LaancDrawModal.js
@@ -1,4 +1,10 @@
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import {
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from '../../ui/index';
 
 export default function LaancDrawModal({ modal, handler }) {
   // 드론원스탑으로 새창 바로가기
diff --git a/src/components/laanc/map/LaancMapSearch.js b/src/components/laanc/map/LaancMapSearch.js
index b432177c..c5f001d5 100644
--- a/src/components/laanc/map/LaancMapSearch.js
+++ b/src/components/laanc/map/LaancMapSearch.js
@@ -1,4 +1,9 @@
-import { Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
+import {
+  Input,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupText
+} from '../../ui/index';
 import { Search } from 'react-feather';
 import { useState } from 'react';
 import { laancApi } from '../../../modules/laanc/apis/laancApi';
diff --git a/src/components/laanc/map/TodayWeather.js b/src/components/laanc/map/TodayWeather.js
index 24e433af..3962a8be 100644
--- a/src/components/laanc/map/TodayWeather.js
+++ b/src/components/laanc/map/TodayWeather.js
@@ -1,4 +1,4 @@
-import { Table } from 'reactstrap';
+import { Table } from '../../ui/index';
 import { Sun, Cloud, CloudRain, CloudSnow, Navigation2 } from 'react-feather';
 
 export function TodayWeather({ todayData }) {
diff --git a/src/components/laanc/step/LaacnStep3.js b/src/components/laanc/step/LaacnStep3.js
index 5fc4cace..462e4f4d 100644
--- a/src/components/laanc/step/LaacnStep3.js
+++ b/src/components/laanc/step/LaacnStep3.js
@@ -13,7 +13,7 @@ import {
   Label,
   Input,
   Badge
-} from 'reactstrap';
+} from '../../ui/index';
 import { CheckCircle } from 'react-feather';
 import { HOST } from '../../../configs/constants';
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
diff --git a/src/components/laanc/step/LaancStep1.js b/src/components/laanc/step/LaancStep1.js
index 62ea23c3..d866694e 100644
--- a/src/components/laanc/step/LaancStep1.js
+++ b/src/components/laanc/step/LaancStep1.js
@@ -8,6 +8,7 @@ import { AlertCircle, Info } from 'react-feather';
 import { FLIGHT_PLAN_AREA_BUFFER_LIST } from '../../../modules/laanc/actions/laancActions';
 import axios from '../../../modules/utils/customAxiosUtil';
 import dayjs from 'dayjs';
+import { UncontrolledPopover, PopoverBody } from 'reactstrap';
 import {
   Row,
   Col,
@@ -16,13 +17,10 @@ import {
   ModalBody,
   ModalFooter,
   FormGroup,
-  UncontrolledPopover,
-  PopoverBody,
   Label,
   Input,
   Modal
-} from 'reactstrap';
-
+} from '../../ui/index';
 const LaancModal = lazy(() => import('../LaancModal'));
 const LaancQr = lazy(() => import('../../../components/laanc/LaancQr'));
 const FlightArea = lazy(() => import('../map/FlightArea'));
diff --git a/src/components/laanc/step/LaancStep2.js b/src/components/laanc/step/LaancStep2.js
index e155de42..a8025680 100644
--- a/src/components/laanc/step/LaancStep2.js
+++ b/src/components/laanc/step/LaancStep2.js
@@ -15,7 +15,7 @@ import {
   Label,
   Input,
   CustomInput
-} from 'reactstrap';
+} from '../../ui/index';
 import * as LaancAction from '../../../modules/laanc/actions/laancActions';
 import * as TermsActions from '../../../modules/account/register/actions/accountAction';
 
diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js
index 397328ba..b64ae1d4 100644
--- a/src/components/map/mapbox/MapBoxMap.js
+++ b/src/components/map/mapbox/MapBoxMap.js
@@ -7,7 +7,13 @@ import {
   Suspense
 } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import {
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from '../../ui/index';
 // mapbox
 import 'mapbox-gl/dist/mapbox-gl.css';
 import { MAPBOX_TOKEN } from '../../../configs/constants';
diff --git a/src/components/message/MessageErrorModal.js b/src/components/message/MessageErrorModal.js
index 2b933dae..a40864ca 100644
--- a/src/components/message/MessageErrorModal.js
+++ b/src/components/message/MessageErrorModal.js
@@ -1,6 +1,12 @@
 import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import {
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from '../ui/index';
 import * as Actions from '../../modules/comn/message/actions/comnMessageAction';
 
 export const MessageErrorModal = props => {
diff --git a/src/components/message/MessageInfoModal.js b/src/components/message/MessageInfoModal.js
index cc0e8ead..ee37996e 100644
--- a/src/components/message/MessageInfoModal.js
+++ b/src/components/message/MessageInfoModal.js
@@ -1,6 +1,12 @@
 import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import {
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from '../ui/index';
 import * as Actions from '../../modules/comn/message/actions/comnMessageAction';
 import { useHistory } from 'react-router-dom';
 
diff --git a/src/components/modal/ConfirmModal.js b/src/components/modal/ConfirmModal.js
index 95715ea9..7bfeb5d3 100644
--- a/src/components/modal/ConfirmModal.js
+++ b/src/components/modal/ConfirmModal.js
@@ -1,4 +1,10 @@
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import {
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from '../ui/index';
 
 export const ConfirmModal = props => {
   const handlerSubmit = () => {
diff --git a/src/components/modal/ErrorModal.js b/src/components/modal/ErrorModal.js
index 98d404c7..be6e21b8 100644
--- a/src/components/modal/ErrorModal.js
+++ b/src/components/modal/ErrorModal.js
@@ -1,4 +1,10 @@
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import {
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from '../ui/index';
 
 export default function ErrorModal(props) {
   return (
diff --git a/src/components/modal/InfoModal.js b/src/components/modal/InfoModal.js
index c59d8b57..76063f30 100644
--- a/src/components/modal/InfoModal.js
+++ b/src/components/modal/InfoModal.js
@@ -1,4 +1,10 @@
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import {
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from '../ui/index';
 
 export default function InfoModal(props) {
   return (
diff --git a/src/components/statistics/StatisticsSearch.js b/src/components/statistics/StatisticsSearch.js
index ffa4ced4..4956daa6 100644
--- a/src/components/statistics/StatisticsSearch.js
+++ b/src/components/statistics/StatisticsSearch.js
@@ -6,7 +6,7 @@ import {
   CardTitle,
   CardBody,
   CustomInput
-} from 'reactstrap';
+} from '../ui/index';
 import { Search } from 'react-feather';
 import { useEffect, useState } from 'react';
 import ChartjsDoughnutChart from '../charts/chart-js/ChartjsDoughnutChart';
diff --git a/src/components/statistics/StatisticsTotal.js b/src/components/statistics/StatisticsTotal.js
index 810d3fbf..22df05c0 100644
--- a/src/components/statistics/StatisticsTotal.js
+++ b/src/components/statistics/StatisticsTotal.js
@@ -1,4 +1,4 @@
-import { Col, Row } from 'reactstrap';
+import { Col, Row } from '../ui/index';
 import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc';
 import { useEffect } from 'react';
 import { formatNumber } from '../../utility/Utils';
diff --git a/src/components/ui/Col/index.tsx b/src/components/ui/Col/index.tsx
new file mode 100644
index 00000000..98313a92
--- /dev/null
+++ b/src/components/ui/Col/index.tsx
@@ -0,0 +1,49 @@
+import { ReactNode } from 'react';
+import { Col } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+  lg?: string;
+  sm?: string;
+  md?: string;
+  xs?: string;
+  xl?: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ * @param lg?:string
+ * @param sm?:string
+ * @param md?:string
+ * @param xs?:string
+ * @param xl?:string
+ *
+ */
+export default function CustomCol({
+  children,
+  className,
+  lg,
+  sm,
+  md,
+  xs,
+  xl,
+  style
+}: Props) {
+  return (
+    <Col
+      lg={lg}
+      sm={sm}
+      md={md}
+      xs={xs}
+      xl={xl}
+      style={style}
+      className={className}
+    >
+      {children}
+    </Col>
+  );
+}
diff --git a/src/components/ui/alert/index.tsx b/src/components/ui/alert/index.tsx
new file mode 100644
index 00000000..b62f8f32
--- /dev/null
+++ b/src/components/ui/alert/index.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { Alert } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  color?: 'primary' | 'danger';
+}
+
+/**
+ *
+ * @param children: ReactNode
+ * @param color?: 'primary' |  'danger' ;
+ *
+ */
+export default function CustomAlert({ children, color = 'primary' }: Props) {
+  return <Alert color={color}>{children}</Alert>;
+}
diff --git a/src/components/ui/badge/index.tsx b/src/components/ui/badge/index.tsx
new file mode 100644
index 00000000..a97206de
--- /dev/null
+++ b/src/components/ui/badge/index.tsx
@@ -0,0 +1,24 @@
+'use client';
+import { Badge } from 'reactstrap';
+import { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+  color?: string;
+}
+
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ * @param color?: 'light-secondary' | 'primary' | 'secondary' | 'light-primary'
+ */
+
+export default function CustomBadge({ children, className, color }: Props) {
+  return (
+    <Badge color={color} className={className}>
+      {children}
+    </Badge>
+  );
+}
diff --git a/src/components/ui/button/CustomButton.tsx b/src/components/ui/button/CustomButton.tsx
new file mode 100644
index 00000000..44e67d4e
--- /dev/null
+++ b/src/components/ui/button/CustomButton.tsx
@@ -0,0 +1,74 @@
+import {
+  ButtonHTMLAttributes,
+  MouseEvent,
+  MouseEventHandler,
+  ReactNode
+} from 'react';
+import { Button } from 'reactstrap';
+interface Props {
+  outline?: boolean;
+  active?: boolean;
+  color?: 'primary' | 'secondary' | 'danger';
+  type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  tag?: React.ElementType;
+  innerRef?: React.Ref<HTMLButtonElement>;
+  size?: string;
+  className?: string;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  children?: ReactNode;
+  disabled?: boolean;
+  id?: string;
+  ripple?: boolean;
+}
+
+/**
+ * @param outline?:boolean default false
+ * @param active?:boolean default false
+ * @param color?: 'primary' | 'secondary' | 'danger'
+ * @param type?:ButtonHTMLAttributes<HTMLButtonElement>['type']
+ * @param tag?:React.ElementType
+ * @param innerRef?:React.Ref<HTMLButtonElement>
+ * @param size?:string
+ * @param className?:string
+ * @param onClick?:MouseEventHandler<HTMLButtonElement>
+ * @param children?:ReactNode
+ * @param disabled?:boolean default false
+ * @param id?:string
+ * @param ripple?:boolean default false
+ */
+
+export default function CustomButton({
+  outline = false,
+  color,
+  type,
+  tag,
+  size,
+  className,
+  onClick,
+  children,
+  disabled = false,
+  id
+}: Props) {
+  // const ButtonComponent = ripple ? Button.Ripple : Button;
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault(); // 기본 동작 중지
+    if (onClick) {
+      onClick(event);
+    }
+  };
+  return (
+    <Button
+      onClick={handleClick}
+      outline={outline}
+      color={color}
+      type={type}
+      size={size}
+      className={className}
+      tag={tag}
+      disabled={disabled}
+      id={id}
+    >
+      {children}
+    </Button>
+  );
+}
diff --git a/src/components/ui/button/CustomButtonGroup.tsx b/src/components/ui/button/CustomButtonGroup.tsx
new file mode 100644
index 00000000..d0a86034
--- /dev/null
+++ b/src/components/ui/button/CustomButtonGroup.tsx
@@ -0,0 +1,18 @@
+import { ButtonGroup } from 'reactstrap';
+import { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ *
+ */
+
+export default function CustomButtonGroup({ children, className }: Props) {
+  return <ButtonGroup className={className}>{children}</ButtonGroup>;
+}
diff --git a/src/components/ui/card/CustomCard.tsx b/src/components/ui/card/CustomCard.tsx
new file mode 100644
index 00000000..29101b8c
--- /dev/null
+++ b/src/components/ui/card/CustomCard.tsx
@@ -0,0 +1,17 @@
+'use client';
+import { ReactNode } from 'react';
+import { Card } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+}
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ */
+
+export default function CustomCard({ children, className }: Props) {
+  return <Card className={className}>{children}</Card>;
+}
diff --git a/src/components/ui/card/CustomCardBody.tsx b/src/components/ui/card/CustomCardBody.tsx
new file mode 100644
index 00000000..0a2c9939
--- /dev/null
+++ b/src/components/ui/card/CustomCardBody.tsx
@@ -0,0 +1,17 @@
+'use client';
+import { ReactNode } from 'react';
+import { CardBody } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+}
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ */
+
+export default function CustomCardBody({ children, className }: Props) {
+  return <CardBody className={className}>{children}</CardBody>;
+}
diff --git a/src/components/ui/card/CustomCardHeader.tsx b/src/components/ui/card/CustomCardHeader.tsx
new file mode 100644
index 00000000..e95096c0
--- /dev/null
+++ b/src/components/ui/card/CustomCardHeader.tsx
@@ -0,0 +1,17 @@
+'use client';
+import { ReactNode } from 'react';
+import { CardHeader } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+}
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ */
+
+export default function CustomCardHeader({ children, className }: Props) {
+  return <CardHeader className={className}>{children}</CardHeader>;
+}
diff --git a/src/components/ui/card/CustomCardTitle.tsx b/src/components/ui/card/CustomCardTitle.tsx
new file mode 100644
index 00000000..580343fd
--- /dev/null
+++ b/src/components/ui/card/CustomCardTitle.tsx
@@ -0,0 +1,23 @@
+'use client';
+import { ElementType, ReactNode } from 'react';
+import { CardTitle } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+  tag: ElementType;
+}
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ * @param tag?:string
+ */
+
+export default function CustomCardTitle({ children, className, tag }: Props) {
+  return (
+    <CardTitle className={className} tag={tag}>
+      {children}
+    </CardTitle>
+  );
+}
diff --git a/src/components/ui/custominput/index.tsx b/src/components/ui/custominput/index.tsx
new file mode 100644
index 00000000..996d34f0
--- /dev/null
+++ b/src/components/ui/custominput/index.tsx
@@ -0,0 +1,74 @@
+'use client';
+import { read } from 'fs';
+import { ChangeEvent, MouseEventHandler, ReactNode } from 'react';
+import { CustomInput } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+  readOnly?: boolean;
+  checked?: boolean;
+  id?: string;
+  onClick?: MouseEventHandler<HTMLInputElement>;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  value?: any;
+  name?: string;
+  type?: any;
+  bsSize?: 'lg' | 'sm' | undefined;
+  label?: string;
+  inline?: boolean;
+}
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ * @param readOnly?:boolean default false
+ * @param checked?:boolean
+ * @param label?:string
+ * @param id?:string
+ * @param onClick?:MouseEventHandler<HTMLButtonElement>
+ * @param onChange?:MouseEventHandler<HTMLButtonElement>
+ * @param value?:any
+ * @param name?:string
+ * @param type?:string
+ * @param bsSize?: "lg" | "sm"
+ * @param inline?:boolean default false
+ *
+ */
+
+export default function CustomInputs({
+  children,
+  className,
+  label,
+  checked,
+  id,
+  onClick,
+  onChange,
+  value,
+  name,
+  readOnly,
+  type,
+  inline = false,
+  bsSize
+}: Props) {
+  return (
+    <>
+      <CustomInput
+        className={className}
+        id={id}
+        checked={checked}
+        label={label}
+        value={value}
+        bsSize={bsSize}
+        name={name}
+        type={type}
+        readOnly={readOnly}
+        onClick={onClick}
+        inline={inline}
+        onChange={onChange}
+      >
+        {children}
+      </CustomInput>
+    </>
+  );
+}
diff --git a/src/components/ui/form/CustomForm.tsx b/src/components/ui/form/CustomForm.tsx
new file mode 100644
index 00000000..5698924c
--- /dev/null
+++ b/src/components/ui/form/CustomForm.tsx
@@ -0,0 +1,21 @@
+import { FormEventHandler, ReactNode } from 'react';
+import { Form } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  onSubmit?: FormEventHandler<HTMLFormElement>;
+  key?: string;
+}
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ */
+
+export default function CustomForm({ children, onSubmit, key }: Props) {
+  return (
+    <Form onSubmit={onSubmit} key={key}>
+      {children}
+    </Form>
+  );
+}
diff --git a/src/components/ui/form/CustomFormFeedback.tsx b/src/components/ui/form/CustomFormFeedback.tsx
new file mode 100644
index 00000000..99742613
--- /dev/null
+++ b/src/components/ui/form/CustomFormFeedback.tsx
@@ -0,0 +1,14 @@
+import { FormFeedback } from 'reactstrap';
+import { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+/**
+ *
+ * @param children: ReactNode
+ */
+
+export default function CustomFormFeedback({ children }: Props) {
+  return <FormFeedback>{children}</FormFeedback>;
+}
diff --git a/src/components/ui/form/CustomFormGroup.tsx b/src/components/ui/form/CustomFormGroup.tsx
new file mode 100644
index 00000000..9357cb20
--- /dev/null
+++ b/src/components/ui/form/CustomFormGroup.tsx
@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { FormGroup, Col } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+  md?: string;
+  tag?: any;
+}
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ */
+
+export default function CustomFormGroup({ children, className, md }: Props) {
+  return (
+    <FormGroup className={className} md={md}>
+      {children}
+    </FormGroup>
+  );
+}
diff --git a/src/components/ui/index.tsx b/src/components/ui/index.tsx
new file mode 100644
index 00000000..98f3f400
--- /dev/null
+++ b/src/components/ui/index.tsx
@@ -0,0 +1,68 @@
+import Badge from './badge/index';
+import Button from './button/CustomButton';
+import ButtonGroup from './button/CustomButtonGroup';
+import Card from './card/CustomCard';
+import CardBody from './card/CustomCardBody';
+import CardTitle from './card/CustomCardTitle';
+import CardHeader from './card/CustomCardHeader';
+import Col from './Col/index';
+import From from './form/CustomForm';
+import FormGroup from './form/CustomFormGroup';
+import FormFeedback from './form/CustomFormFeedback';
+import Input from './input';
+import Label from './label';
+import Row from './row';
+import InputGroup from './input/CustomInputGroup';
+import InputGroupText from './input/CustomInputGroupText';
+import Spinner from './spinner';
+import TabContent from './tab/CustomTabContent';
+import TabPane from './tab/CustomTabPane';
+import Nav from './nav/index';
+import NavItem from './nav/CustomNavItem';
+import NavLink from './nav/CustomNavLink';
+import Alert from './alert/index';
+import Table from './table/index';
+import Popover from './popover/index';
+import CustomInput from './custominput/index';
+import InputGroupAddon from './input/CustomInputGroupAddon';
+import Modal from './modal/CustomModal';
+import ModalHeader from './modal/CustomModalHeader';
+import ModalBody from './modal/CustomModalBody';
+import ModalFooter from './modal/CustomModalFooter';
+import Form from './form/CustomForm';
+import Media from './media/index';
+export {
+  Button,
+  ButtonGroup,
+  Card,
+  CardBody,
+  CardTitle,
+  CardHeader,
+  Col,
+  From,
+  FormGroup,
+  FormFeedback,
+  Input,
+  Label,
+  Row,
+  InputGroup,
+  InputGroupText,
+  Badge,
+  Spinner,
+  TabContent,
+  TabPane,
+  Nav,
+  NavItem,
+  NavLink,
+  Alert,
+  Table,
+  Popover,
+  CustomInput,
+  InputGroupAddon,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Form,
+  Media
+};
diff --git a/src/components/ui/input/CustomInputGroup.tsx b/src/components/ui/input/CustomInputGroup.tsx
new file mode 100644
index 00000000..cd9a0ae5
--- /dev/null
+++ b/src/components/ui/input/CustomInputGroup.tsx
@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { InputGroup } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ *
+ */
+
+export default function CustomInputGroup({ children, className }: Props) {
+  return <InputGroup className={className}>{children}</InputGroup>;
+}
diff --git a/src/components/ui/input/CustomInputGroupAddon.tsx b/src/components/ui/input/CustomInputGroupAddon.tsx
new file mode 100644
index 00000000..593351b8
--- /dev/null
+++ b/src/components/ui/input/CustomInputGroupAddon.tsx
@@ -0,0 +1,17 @@
+import { InputGroupAddon } from 'reactstrap';
+import { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  addonType?: 'prepend' | 'append';
+}
+
+/**
+ *
+ * @param children: ReactNode
+ * @param addonType?: 'prepend' | 'append'
+ */
+
+export default function CustomInputGroupAddon({ children, addonType }: Props) {
+  return <InputGroupAddon addonType={addonType}>{children}</InputGroupAddon>;
+}
diff --git a/src/components/ui/input/CustomInputGroupText.tsx b/src/components/ui/input/CustomInputGroupText.tsx
new file mode 100644
index 00000000..a4b83db1
--- /dev/null
+++ b/src/components/ui/input/CustomInputGroupText.tsx
@@ -0,0 +1,15 @@
+import { InputGroupText } from 'reactstrap';
+import { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+/**
+ *
+ * @param children: ReactNode
+ */
+
+export default function CustomInputGroupText({ children }: Props) {
+  return <InputGroupText>{children}</InputGroupText>;
+}
diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx
new file mode 100644
index 00000000..e57dacf5
--- /dev/null
+++ b/src/components/ui/input/index.tsx
@@ -0,0 +1,83 @@
+'use client';
+import { ChangeEvent, MouseEventHandler, ReactNode } from 'react';
+import { Input } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+  readOnly?: boolean;
+  checked?: boolean;
+  label?: string;
+  id?: string;
+  onClick?: MouseEventHandler<HTMLInputElement>;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  value?: any;
+  name?: string;
+  type?: any;
+  inline?: boolean;
+  bsSize?: 'lg' | 'sm' | undefined;
+  placeholder?: string;
+  disabled?: boolean;
+  onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ * @param readOnly?:boolean default false
+ * @param checked?:boolean
+ * @param label?:string
+ * @param id?:string
+ * @param onClick?:MouseEventHandler<HTMLButtonElement>
+ * @param onChange?:MouseEventHandler<HTMLButtonElement>
+ * @param value?:any
+ * @param name?:string
+ * @param type?:string
+ * @param inline?:boolean default false
+ * @param bsSize?: "lg" | "sm"
+ * @param placeholder?:string
+ * @param onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+ * @param disabled?:boolean default false
+ */
+
+export default function CustomInput({
+  children,
+  className,
+  label,
+  checked,
+  readOnly = false,
+  id,
+  onClick,
+  onChange,
+  value,
+  name,
+  type,
+  inline = false,
+  bsSize,
+  placeholder,
+  disabled = false,
+  onKeyPress
+}: Props) {
+  return (
+    <>
+      <Input
+        className={className}
+        id={id}
+        checked={checked}
+        readOnly={readOnly}
+        label={label}
+        value={value}
+        name={name}
+        disabled={disabled}
+        type={type}
+        bsSize={bsSize}
+        onClick={onClick}
+        onChange={onChange}
+        onKeyPress={onKeyPress}
+        placeholder={placeholder}
+      >
+        {children}
+      </Input>
+    </>
+  );
+}
diff --git a/src/components/ui/label/index.tsx b/src/components/ui/label/index.tsx
new file mode 100644
index 00000000..aa55f426
--- /dev/null
+++ b/src/components/ui/label/index.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { Label } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  htmlFor?: string;
+  className?: string;
+}
+
+export default function CustomLabel({ children, htmlFor, className }: Props) {
+  return (
+    <Label for={htmlFor} className={className}>
+      {children}
+    </Label>
+  );
+}
diff --git a/src/components/ui/media/index.tsx b/src/components/ui/media/index.tsx
new file mode 100644
index 00000000..20f898b9
--- /dev/null
+++ b/src/components/ui/media/index.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { Media } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  body?: string;
+}
+/**
+ *
+ * @param children: ReactNode
+ * @param body?:string
+ */
+
+export default function CustomMedia({ children, body }: Props) {
+  return <Media body={body}>{children}</Media>;
+}
diff --git a/src/components/ui/modal/CustomModal.tsx b/src/components/ui/modal/CustomModal.tsx
new file mode 100644
index 00000000..6307ced4
--- /dev/null
+++ b/src/components/ui/modal/CustomModal.tsx
@@ -0,0 +1,22 @@
+import { Children, ReactNode } from 'react';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+
+interface Props {
+  isOpen: boolean;
+  toggle: () => void;
+  className?: string;
+  children: ReactNode;
+}
+
+export default function CustomModal({
+  isOpen,
+  toggle,
+  className,
+  children
+}: Props) {
+  return (
+    <Modal isOpen={isOpen} toggle={toggle} className={className}>
+      {children}
+    </Modal>
+  );
+}
diff --git a/src/components/ui/modal/CustomModalBody.tsx b/src/components/ui/modal/CustomModalBody.tsx
new file mode 100644
index 00000000..334fdcb3
--- /dev/null
+++ b/src/components/ui/modal/CustomModalBody.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { ModalBody } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+}
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ */
+
+export default function CustomModalBody({ children, className }: Props) {
+  return <ModalBody className={className}>{children}</ModalBody>;
+}
diff --git a/src/components/ui/modal/CustomModalFooter.tsx b/src/components/ui/modal/CustomModalFooter.tsx
new file mode 100644
index 00000000..5cf722f7
--- /dev/null
+++ b/src/components/ui/modal/CustomModalFooter.tsx
@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { ModalFooter } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ * @param style?: React.CSSProperties
+ */
+
+export default function CustomModalFooter({
+  children,
+  className,
+  style
+}: Props) {
+  return (
+    <ModalFooter className={className} style={style}>
+      {children}
+    </ModalFooter>
+  );
+}
diff --git a/src/components/ui/modal/CustomModalHeader.tsx b/src/components/ui/modal/CustomModalHeader.tsx
new file mode 100644
index 00000000..bdb3c2fd
--- /dev/null
+++ b/src/components/ui/modal/CustomModalHeader.tsx
@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { ModalHeader } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  toggle: () => void;
+  className?: string;
+}
+/**
+ *
+ * @param children: ReactNode
+ * @param toggle: () => void
+ * @param className?:string
+ */
+
+export default function CustomModalHeader({
+  children,
+  toggle,
+  className
+}: Props) {
+  return (
+    <ModalHeader toggle={toggle} className={className}>
+      {children}
+    </ModalHeader>
+  );
+}
diff --git a/src/components/ui/nav/CustomNavItem.tsx b/src/components/ui/nav/CustomNavItem.tsx
new file mode 100644
index 00000000..2e0254f2
--- /dev/null
+++ b/src/components/ui/nav/CustomNavItem.tsx
@@ -0,0 +1,23 @@
+import { NavItem } from 'reactstrap';
+import { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+  active?: boolean;
+}
+
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ * @param active?:boolean
+ */
+
+export default function CustomNavItem({ children, className, active }: Props) {
+  return (
+    <NavItem className={className} active={active}>
+      {children}
+    </NavItem>
+  );
+}
diff --git a/src/components/ui/nav/CustomNavLink.tsx b/src/components/ui/nav/CustomNavLink.tsx
new file mode 100644
index 00000000..0e58ef76
--- /dev/null
+++ b/src/components/ui/nav/CustomNavLink.tsx
@@ -0,0 +1,22 @@
+import { NavLink } from 'reactstrap';
+import { MouseEventHandler, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+  active?: boolean;
+  onClick?: MouseEventHandler<HTMLInputElement>;
+}
+
+export default function CustomNavLink({
+  children,
+  className,
+  active,
+  onClick
+}: Props) {
+  return (
+    <NavLink className={className} onClick={onClick}>
+      {children}
+    </NavLink>
+  );
+}
diff --git a/src/components/ui/nav/index.tsx b/src/components/ui/nav/index.tsx
new file mode 100644
index 00000000..0ba4e34f
--- /dev/null
+++ b/src/components/ui/nav/index.tsx
@@ -0,0 +1,30 @@
+import { Nav } from 'reactstrap';
+import { ReactNode } from 'react';
+
+interface Props {
+  className?: string;
+  children: ReactNode;
+  tabs?: boolean;
+  pills?: boolean;
+}
+
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ * @param tabs?:boolean
+ * @param pills?:boolean
+ */
+
+export default function CustomNav({
+  className,
+  tabs = false,
+  children,
+  pills = false
+}: Props) {
+  return (
+    <Nav tabs={tabs} className={className} pills={pills}>
+      {children}
+    </Nav>
+  );
+}
diff --git a/src/components/ui/popover/index.tsx b/src/components/ui/popover/index.tsx
new file mode 100644
index 00000000..fefad4f0
--- /dev/null
+++ b/src/components/ui/popover/index.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { UncontrolledPopover, PopoverBody } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  target?: string;
+  toggle?: () => void;
+}
+
+export default function CustomPopover({ children, target, toggle }: Props) {
+  return (
+    <UncontrolledPopover
+      trigger='focus'
+      placement='bottom'
+      target={target}
+      toggle={toggle}
+    >
+      <PopoverBody className='pal-popover-body'>{children}</PopoverBody>
+    </UncontrolledPopover>
+  );
+}
diff --git a/src/components/ui/row/index.tsx b/src/components/ui/row/index.tsx
new file mode 100644
index 00000000..da706f25
--- /dev/null
+++ b/src/components/ui/row/index.tsx
@@ -0,0 +1,17 @@
+import { Row } from 'reactstrap';
+import { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ */
+
+export default function CustomRow({ children, className }: Props) {
+  return <Row className={className}>{children}</Row>;
+}
diff --git a/src/components/ui/spinner/index.tsx b/src/components/ui/spinner/index.tsx
new file mode 100644
index 00000000..89b64b79
--- /dev/null
+++ b/src/components/ui/spinner/index.tsx
@@ -0,0 +1,17 @@
+import { Spinner } from 'reactstrap';
+import React from 'react';
+
+interface Props {
+  children: React.ReactNode;
+  color?: 'primary';
+}
+
+/**
+ *
+ * @param children: ReactNode
+ * @param color: default='primary'
+ */
+
+export default function CustomSpinner({ children, color = 'primary' }: Props) {
+  return <Spinner color={color}>{children}</Spinner>;
+}
diff --git a/src/components/ui/tab/CustomTabContent.tsx b/src/components/ui/tab/CustomTabContent.tsx
new file mode 100644
index 00000000..50d36a03
--- /dev/null
+++ b/src/components/ui/tab/CustomTabContent.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { TabContent } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  activeTab?: string;
+}
+
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ */
+
+export default function CustomTabContent({ children, activeTab }: Props) {
+  return <TabContent activeTab={activeTab}>{children}</TabContent>;
+}
diff --git a/src/components/ui/tab/CustomTabPane.tsx b/src/components/ui/tab/CustomTabPane.tsx
new file mode 100644
index 00000000..7efd2896
--- /dev/null
+++ b/src/components/ui/tab/CustomTabPane.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { TabPane } from 'reactstrap';
+
+interface Props {
+  tabId: string;
+  children: ReactNode;
+}
+
+/**
+ *
+ * @param children: ReactNode
+ * @param tabId: string
+ */
+
+export default function CustomTabPane({ tabId, children }: Props) {
+  return <TabPane tabId={tabId}>{children}</TabPane>;
+}
diff --git a/src/components/ui/table/index.tsx b/src/components/ui/table/index.tsx
new file mode 100644
index 00000000..44106d5d
--- /dev/null
+++ b/src/components/ui/table/index.tsx
@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { Table } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+}
+
+/**
+ *
+ * @param children: ReactNode
+ */
+
+export default function CustomTable({ children }: Props) {
+  return <Table responsive>{children}</Table>;
+}
diff --git a/src/containers/basis/dron/BasisDronDetailContainer.js b/src/containers/basis/dron/BasisDronDetailContainer.js
index a4a934e9..be455e7d 100644
--- a/src/containers/basis/dron/BasisDronDetailContainer.js
+++ b/src/containers/basis/dron/BasisDronDetailContainer.js
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Button, Col, Row } from 'reactstrap';
+import { Button, Col, Row } from '../../../components/ui/index';
 import { useForm } from 'react-hook-form';
 import { useDispatch, useSelector } from 'react-redux';
 // yup
diff --git a/src/containers/basis/dron/BasisIdntfContainer.js b/src/containers/basis/dron/BasisIdntfContainer.js
index f695c7f3..f7565420 100644
--- a/src/containers/basis/dron/BasisIdntfContainer.js
+++ b/src/containers/basis/dron/BasisIdntfContainer.js
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Card, CardBody, Col, Row } from 'reactstrap';
+import { Card, CardBody, Col, Row } from '../../../components/ui/index';
 import { BasisIdntfForm } from '../../../components/basis/dron/BasisIdntform';
 import * as Actions from '../../../modules/basis/dron/actions';
 import ErrorModal from '../../../components/modal/ErrorModal';