diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css
index d2ce580f..c7522553 100644
--- a/src/assets/css/custom.css
+++ b/src/assets/css/custom.css
@@ -405,14 +405,15 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon
 }
 .tooltip-test{position:absolute;left:500px;top:500px;}
 
-.tooltip-box{background:#283046;padding:10px;border-radius:6px;position:relative;max-width: 180px;}
-.tooltip-box div{text-align:left;font-size:13px;color:#bbb;}
+.tooltip-box{background:#283046;padding:10px;border-radius:6px;position:relative;max-width:150px;word-break: break-all;}
+/* .tooltip-box div{text-align:left;font-size:13px;} */
 .tooltip-ti{border-bottom:1px solid #bbb;padding-bottom:4px;}
-.tooltip-ti span, .tooltip-txt .ti{color:#f4f4f4;font-weight:500;display:block;}
-.tooltip-txt{padding-top:4px;}
+/* .tooltip-ti span, .tooltip-txt .ti{color:#f4f4f4;font-weight:400;} */
+.tooltip-txt{color:#f4f4f4;font-weight:400;font-size:12px}
 .tooltip-txt-list + .tooltip-txt-list{margin-top:4px;}
 .tooltip-box .arrow {position:absolute;bottom:-10px;left:50%;transform: translateX(-50%);display:block;width: 0px;height: 0px;border-top:10px solid #283046;border-bottom:10px solid none;border-right: 10px solid transparent;border-left: 10px solid  transparent;}
-
+.tooltip-txt-list .ti:before{content:'/';margin:0 2px;}
+.tooltip-txt-list .ti:first-child::before{display:none;}
 /* 데이터블록 */
 .dblock-box{background:#283046;padding:10px;border-radius:6px;position:relative;}
 .dblock-box div{text-align:left;font-size:13px;color:#bbb;}
@@ -819,4 +820,19 @@ background-size: 75% auto;
 .grid-loading span{display:block;font-weight:500;margin-top:4px;}
 
 .pa-input-box{display:flex;}
-.pa-input{width:48px;margin-right:8px;}
\ No newline at end of file
+.pa-input{width:48px;margin-right:8px;}
+
+/*관제 메인 데이터들(날씨,비행정보)*/
+.notice{display:none;}
+.main-data{position:absolute;z-index: 999;top:10px;left:50%;transform: translateX(-50%);display:flex;font-size:0.875rem;}
+.main-data-box + .main-data-box{margin-left:20px;}
+.main-data-box .card{min-height:88px;margin:0;padding:10px 12px; background: #10163A;}
+.box-ti{color: #f4f4f4;font-weight: 500;}
+.data-box-header{display:flex;;align-items:center;justify-content: space-between;}
+.data-box-header svg{color:#fff;}
+.data-list-box{display:flex;margin:10px 0 4px 0;}
+.data-list{background: #7367f0;border-radius: 5px;border: 1px solid #7367f0;display:flex;align-items: center;padding:0.4rem;}
+.data-list + .data-list{margin-left:10px;}
+.data-list span{font-size:0.8rem;color: #ddd;font-weight:400;}
+.data-list span + span{margin-left:4px;}
+.data-list .navigation-icon{width:16px;margin-top:-5px;margin-left:2px;}
\ No newline at end of file
diff --git a/src/views/design/DesignMain.js b/src/views/design/DesignMain.js
index d62cb6f3..0e5befd7 100644
--- a/src/views/design/DesignMain.js
+++ b/src/views/design/DesignMain.js
@@ -19,7 +19,8 @@ import {
   Badge,
   Table,
   CustomInput,
-  UncontrolledTooltip
+  UncontrolledTooltip,
+  Card
 } from 'reactstrap';
 import {
   Search,
@@ -1035,6 +1036,47 @@ const DesignMain = () => {
 
   return (
     <div className='pal-container'>
+      <div className="main-data">
+        <div className='main-data-box wather-data'>
+          <Card>
+            <div className='data-box-header'>
+              <span className='box-ti'>인천광역시</span>
+              <span className=''><Sun size={20}/></span>
+            </div>
+            <div className='data-list-box'>
+              <div className='data-list'>
+                <span>기온</span>
+                <span>11℃</span>
+              </div>
+              <div className='data-list'>
+                <span>풍향</span>
+                <span><Navigation2 className="rotate-45 navigation-icon"/></span>
+              </div>
+              <div className='data-list'>
+                <span>풍속</span>
+                <span>1.2 m/s</span>
+              </div>
+            </div>
+          </Card>
+        </div>
+        <div className='main-data-box flight-data'>
+        <Card>
+            <div className='data-box-header'>
+              <span className='box-ti'>비행중인 기체</span>
+            </div>
+            <div className='data-list-box'>
+              <div className='data-list'>
+                <span>드론</span>
+                <span>165대</span>
+              </div>
+              <div className='data-list'>
+                <span>항공기</span>
+                <span>2147대</span>
+              </div>
+            </div>
+          </Card>
+        </div>
+      </div>
       <div className='map'>
         <MapControl />
         <span className='map-drone-icon'>
@@ -1070,22 +1112,23 @@ const DesignMain = () => {
         </span>     
         <div className='tooltip-test'>
           <div className='tooltip-box'>
-            <div className='tooltip-ti'><span>로봇타워로봇타워로봇타워로봇타워로봇타워로봇타워로봇타워</span></div>
+            {/* <div className='tooltip-ti'><span>로봇타워로봇타워로봇타워로봇타워로봇타워로봇타워로봇타워</span></div> */}
             <div className='tooltip-txt'>
               <div className='tooltip-txt-list'>
-                <span className='ti'>고도</span>
-                <span>167.05m</span>
+                <span className='ti'>KAL1154</span>
+                <span className='ti'>2667.4M37.123456123.121.123123</span>
+                <span className='ti'>123.121.123123</span>
               </div>
-              <div className='tooltip-txt-list'>
+              {/* <div className='tooltip-txt-list'>
                 <span className='ti'>좌표정보</span>
                 <span>35.232600, 127.650225</span>
-              </div>
+              </div> */}
             </div>
-            <span class="arrow"></span>
+            {/* <span class="arrow"></span> */}
           </div>
         </div>
       </div>
-      {/* 알림 위아래 롤링은 구현해주셔야되는데 따른 컴포넌트있으면 그거사용해도됩니다...제가 만들어논거는 45px씩 움직여주면되거든요..저도자세히는모르겠습니다...제이쿼리로만써봐서... */}
+
       <div className='notice'>
         <div className='notice-icon'>
           <Bell size={20} />