diff --git a/src/component/wrap/ToolComponent.jsx b/src/component/wrap/ToolComponent.jsx
index 845902c8..fb39b1c4 100644
--- a/src/component/wrap/ToolComponent.jsx
+++ b/src/component/wrap/ToolComponent.jsx
@@ -1,6 +1,8 @@
 import { useState } from "react"
 import useShipStore from '../../stores/shipStore';
 
+const BASE_URL = import.meta.env.BASE_URL;
+
 export default function ToolComponent() {
     const [isLegendOpen, setIsLegendOpen] = useState(false);
     const { isIntegrate, toggleIntegrate } = useShipStore();
@@ -57,83 +59,83 @@ export default function ToolComponent() {
                 <div className="legendWrap">
                     <ul className="legendList">
                         <li className="legendItem">
-                            <span className="legendLabel"><img src="/images/ico_legend_all.svg" alt="통합" />통합</span>
+                            <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_all.svg`} alt="통합" />통합</span>
                             <span className="legendValue">0</span>
                         </li>
                         <li>
-                            <span className="legendLabel"><img src="/images/ico_legend_china.svg" alt="중국어선" />중국어선</span>
+                            <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_china.svg`} alt="중국어선" />중국어선</span>
                             <span className="legendValue">0</span>
                         </li>
                         <li>
-                            <span className="legendLabel"><img src="/images/ico_legend_china_permit.svg" alt="중국어선허가" />중국어선허가</span>
+                            <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_china_permit.svg`} alt="중국어선허가" />중국어선허가</span>
                             <span className="legendValue">0</span>
                         </li>
                         <li>
-                            <span className="legendLabel"><img src="/images/ico_legend_japan.svg" alt="일본어선" />일본어선</span>
+                            <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_japan.svg`} alt="일본어선" />일본어선</span>
                             <span className="legendValue">0</span>
                         </li>
                         <li>
-                            <span className="legendLabel"><img src="/images/ico_legend_danger.svg" alt="위험물" />위험물</span>
+                            <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_danger.svg`} alt="위험물" />위험물</span>
                             <span className="legendValue">0</span>
                         </li>
                         <li>
-                            <span className="legendLabel"><img src="/images/ico_legend_passenger.svg" alt="여객선" />여객선</span>
+                            <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_passenger.svg`} alt="여객선" />여객선</span>
                             <span className="legendValue">0</span>
                         </li>
                         <li>
-                            <span className="legendLabel"><img src="/images/ico_legend_vessel.svg" alt="함정" />함정</span>
+                            <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_vessel.svg`} alt="함정" />함정</span>
                             <span className="legendValue">0</span>
                         </li>
                         <li>
-                            <span className="legendLabel"><img src="/images/ico_legend_vessel_radar.svg" alt="함정-RADAR" />함정-RADAR</span>
+                            <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_vessel_radar.svg`} alt="함정-RADAR" />함정-RADAR</span>
                             <span className="legendValue">0</span>
                         </li>
                         <li>
-                            <span className="legendLabel"><img src="/images/ico_legend_general.svg" alt="일반" />일반</span>
+                            <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_general.svg`} alt="일반" />일반</span>
                             <span className="legendValue">0</span>
                         </li>
                         <li>
-                            <span className="legendLabel"><img src="/images/ico_legend_vts_general.svg" alt="VTS-일반" />VTS-일반</span>
+                            <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_vts_general.svg`} alt="VTS-일반" />VTS-일반</span>
                             <span className="legendValue">0</span>
                         </li>
                         <li>
-                            <span className="legendLabel"><img src="/images/ico_legend_vts_radar.svg" alt="VTS-RADAR" />VTS-RADAR</span>
+                            <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_vts_radar.svg`} alt="VTS-RADAR" />VTS-RADAR</span>
                             <span className="legendValue">0</span>
                         </li>
                         <li>
-                            <span className="legendLabel"><img src="/images/ico_legend_vpass.svg" alt="VPASS일반" />VPASS일반</span>
+                            <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_vpass.svg`} alt="VPASS일반" />VPASS일반</span>
                             <span className="legendValue">0</span>
                         </li>
                         <li>
-                            <span className="legendLabel"><img src="/images/ico_legend_enav_fishing.svg" alt="ENAV어선" />ENAV어선</span>
+                            <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_enav_fishing.svg`} alt="ENAV어선" />ENAV어선</span>
                             <span className="legendValue">0</span>
                         </li>
                         <li>
-                            <span className="legendLabel"><img src="/images/ico_legend_enav_danger.svg" alt="ENAV위험물" />ENAV위험물</span>
+                            <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_enav_danger.svg`} alt="ENAV위험물" />ENAV위험물</span>
                             <span className="legendValue">0</span>
                         </li>
                         <li>
-                            <span className="legendLabel"><img src="/images/ico_legend_enav_cargo.svg" alt="ENAV화물선" />ENAV화물선</span>
+                            <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_enav_cargo.svg`} alt="ENAV화물선" />ENAV화물선</span>
                             <span className="legendValue">0</span>
                         </li>
                         <li>
-                            <span className="legendLabel"><img src="/images/ico_legend_enav_government.svg" alt="ENAV관공선" />ENAV관공선</span>
+                            <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_enav_government.svg`} alt="ENAV관공선" />ENAV관공선</span>
                             <span className="legendValue">0</span>
                         </li>
                         <li>
-                            <span className="legendLabel"><img src="/images/ico_legend_enav_general.svg" alt="ENAV일반" />ENAV일반</span>
+                            <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_enav_general.svg`} alt="ENAV일반" />ENAV일반</span>
                             <span className="legendValue">0</span>
                         </li>
                         <li>
-                            <span className="legendLabel"><img src="/images/ico_legend_dmfhf.svg" alt="D-MF/HF" />D-MF/HF</span>
+                            <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_dmfhf.svg`} alt="D-MF/HF" />D-MF/HF</span>
                             <span className="legendValue">0</span>
                         </li>
                         <li>
-                            <span className="legendLabel"><img src="/images/ico_legend_aircraft.svg" alt="항공기" />항공기</span>
+                            <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_aircraft.svg`} alt="항공기" />항공기</span>
                             <span className="legendValue">0</span>
                         </li>
                         <li>
-                            <span className="legendLabel"><img src="/images/ico_legend_nll.svg" alt="NLL" />NLL</span>
+                            <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_nll.svg`} alt="NLL" />NLL</span>
                             <span className="legendValue">0</span>
                         </li>
                     </ul>
diff --git a/src/component/wrap/main/ShipComponent.jsx b/src/component/wrap/main/ShipComponent.jsx
index 2f4ff033..5cd42583 100644
--- a/src/component/wrap/main/ShipComponent.jsx
+++ b/src/component/wrap/main/ShipComponent.jsx
@@ -1,12 +1,15 @@
 import { useState } from "react";
+
+const BASE_URL = import.meta.env.BASE_URL;
+
 export default function ShipComponent() {  
     //progress bar value 선언
     const [value, setValue] = useState(60);
 
     // 갤러리 이미지
     const images = [
-        { src: "/images/photo_ship_001.png", alt: "1511함A-05" },
-        { src: "/images/photo_ship_002.png", alt: "1511함A-05" },
+        { src: `${BASE_URL}images/photo_ship_001.png`, alt: "1511함A-05" },
+        { src: `${BASE_URL}images/photo_ship_002.png`, alt: "1511함A-05" },
     ];
 
     const [currentIndex, setCurrentIndex] = useState(0);
@@ -30,7 +33,7 @@ export default function ShipComponent() {
                 <div className="pmHeader">
                     <div className="rowL">
                         <i className="shipType"></i>
-                        <img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" />
+                        <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
                         <span className="shipName">1511함A-05</span>
                         <span className="shipNum">13450135</span>
                     </div>
diff --git a/src/component/wrap/side/DisplayComponent.jsx b/src/component/wrap/side/DisplayComponent.jsx
index b016adca..e513b476 100644
--- a/src/component/wrap/side/DisplayComponent.jsx
+++ b/src/component/wrap/side/DisplayComponent.jsx
@@ -1,7 +1,8 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { Link, useNavigate } from "react-router-dom";
 import Slider from '../../common/Slider';
 import useShipStore from '../../../stores/shipStore';
+import { useMapStore, BASE_MAP_TYPES } from '../../../stores/mapStore';
 import {
     SIGNAL_SOURCE_CODE_AIS,
     SIGNAL_SOURCE_CODE_ENAV,
@@ -55,10 +56,14 @@ const NATIONAL_FILTERS = [
     { code: NATIONAL_CODE_OTHER, label: '기타' },
 ];
 
-export default function DisplayComponent({ isOpen, onToggle }) {
+export default function DisplayComponent({ isOpen, onToggle, initialTab = 'filter' }) {
     const navigate = useNavigate();
 
-    // 스토어 연결
+    // 지도 스토어 연결
+    const baseMapType = useMapStore((s) => s.baseMapType);
+    const setBaseMapType = useMapStore((s) => s.setBaseMapType);
+
+    // 선박 스토어 연결
     const {
         sourceVisibility,
         kindVisibility,
@@ -124,8 +129,13 @@ export default function DisplayComponent({ isOpen, onToggle }) {
         });
     }, [isAllNationalsOn, nationalVisibility, toggleNationalVisibility]);
 
-    // 탭이동
-    const [activeTab, setActiveTab] = useState('filter');
+    // 탭이동 (좌측 메뉴와 동기화)
+    const [activeTab, setActiveTab] = useState(initialTab);
+
+    // 좌측 메뉴 변경 시 탭 동기화
+    useEffect(() => {
+        setActiveTab(initialTab);
+    }, [initialTab]);
 
     const tabs = [
         { id: 'filter', label: '필터' },
@@ -415,15 +425,42 @@ export default function DisplayComponent({ isOpen, onToggle }) {
                             <ul className="optionList">
                                 <li>
                                     <span>전자해도</span>
-                                    <label className="radio"> <input type="radio" name="map" aria-label="전자해도" /> <span></span></label>
+                                    <label className="radio">
+                                        <input
+                                            type="radio"
+                                            name="baseMap"
+                                            aria-label="전자해도"
+                                            checked={baseMapType === BASE_MAP_TYPES.ENC}
+                                            onChange={() => setBaseMapType(BASE_MAP_TYPES.ENC)}
+                                        />
+                                        <span></span>
+                                    </label>
                                 </li>
                                 <li>
                                     <span>일반지도</span>
-                                    <label className="radio"> <input type="radio" name="map" aria-label="일반지도" /> <span></span></label>
+                                    <label className="radio">
+                                        <input
+                                            type="radio"
+                                            name="baseMap"
+                                            aria-label="일반지도"
+                                            checked={baseMapType === BASE_MAP_TYPES.NORMAL}
+                                            onChange={() => setBaseMapType(BASE_MAP_TYPES.NORMAL)}
+                                        />
+                                        <span></span>
+                                    </label>
                                 </li>
                                 <li>
-                                    <span>영상지도</span>
-                                    <label className="radio"> <input type="radio" name="map" aria-label="영상지도" /> <span></span></label>
+                                    <span>야간지도</span>
+                                    <label className="radio">
+                                        <input
+                                            type="radio"
+                                            name="baseMap"
+                                            aria-label="야간지도"
+                                            checked={baseMapType === BASE_MAP_TYPES.DARK}
+                                            onChange={() => setBaseMapType(BASE_MAP_TYPES.DARK)}
+                                        />
+                                        <span></span>
+                                    </label>
                                 </li>
                             </ul>
                         </li>
diff --git a/src/component/wrap/side/Panel1Component.jsx b/src/component/wrap/side/Panel1Component.jsx
index 65358c2a..905ce205 100644
--- a/src/component/wrap/side/Panel1Component.jsx
+++ b/src/component/wrap/side/Panel1Component.jsx
@@ -1,5 +1,8 @@
 import { useState } from 'react';
 import { Link } from "react-router-dom";
+
+const BASE_URL = import.meta.env.BASE_URL;
+
 export default function Panel1Component({ isOpen, onToggle }) {
 
     // 아코디언
@@ -169,11 +172,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
                     <span>0001</span>
                     <span>1511함A-05</span>
                     <span>
-                    <img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" />
+                    <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
                     </span>
                     <span>(AIS)</span>
                     <span className="legend">
-                    <img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" />
+                    <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
                     </span>
                 </Link>
                 </li>
@@ -183,11 +186,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
                     <span>0001</span>
                     <span>1511함A-05</span>
                     <span>
-                    <img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" />
+                    <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
                     </span>
                     <span>(AIS)</span>
                     <span className="legend">
-                    <img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" />
+                    <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
                     </span>
                 </Link>
                 </li>
@@ -197,11 +200,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
                     <span>0001</span>
                     <span>1511함A-05</span>
                     <span>
-                    <img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" />
+                    <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
                     </span>
                     <span>(AIS)</span>
                     <span className="legend">
-                    <img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" />
+                    <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
                     </span>
                 </Link>
                 </li>
@@ -211,11 +214,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
                     <span>0001</span>
                     <span>1511함A-05</span>
                     <span>
-                    <img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" />
+                    <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
                     </span>
                     <span>(AIS)</span>
                     <span className="legend">
-                    <img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" />
+                    <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
                     </span>
                 </Link>
                 </li>
@@ -258,7 +261,7 @@ export default function Panel1Component({ isOpen, onToggle }) {
                                 <span className="type">Fishing</span>
                             </div>
                             <div className="headerR">
-                                <img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" />
+                                <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
                                 <span className="num">412</span>
                                 <button className="icoArrow"></button>
                             </div>
@@ -344,11 +347,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
                     <span>0001</span>
                     <span>1511함A-05</span>
                     <span>
-                    <img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" />
+                    <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
                     </span>
                     <span>(AIS)</span>
                     <span className="legend">
-                    <img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" />
+                    <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
                     </span>
                 </Link>
                 </li>
@@ -358,11 +361,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
                     <span>0001</span>
                     <span>1511함A-05</span>
                     <span>
-                    <img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" />
+                    <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
                     </span>
                     <span>(AIS)</span>
                     <span className="legend">
-                    <img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" />
+                    <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
                     </span>
                 </Link>
                 </li>
@@ -411,11 +414,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
                     <span>0001</span>
                     <span>1511함A-05</span>
                     <span>
-                    <img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" />
+                    <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
                     </span>
                     <span>(AIS)</span>
                     <span className="legend">
-                    <img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" />
+                    <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
                     </span>
                 </Link>
                 </li>
@@ -425,11 +428,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
                     <span>0001</span>
                     <span>1511함A-05</span>
                     <span>
-                    <img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" />
+                    <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
                     </span>
                     <span>(AIS)</span>
                     <span className="legend">
-                    <img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" />
+                    <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
                     </span>
                 </Link>
                 </li>
@@ -588,11 +591,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
                     <span>0001</span>
                     <span>1511함A-05</span>
                     <span>
-                    <img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" />
+                    <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
                     </span>
                     <span>(AIS)</span>
                     <span className="legend">
-                    <img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" />
+                    <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
                     </span>
                 </Link>
                 </li>
@@ -602,11 +605,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
                     <span>0001</span>
                     <span>1511함A-05</span>
                     <span>
-                    <img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" />
+                    <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
                     </span>
                     <span>(AIS)</span>
                     <span className="legend">
-                    <img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" />
+                    <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
                     </span>
                 </Link>
                 </li>
@@ -660,11 +663,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
                     <span>0001</span>
                     <span>1511함A-05</span>
                     <span>
-                    <img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" />
+                    <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
                     </span>
                     <span>(AIS)</span>
                     <span className="legend">
-                    <img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" />
+                    <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
                     </span>
                 </Link>
                 </li>
@@ -674,11 +677,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
                     <span>0001</span>
                     <span>1511함A-05</span>
                     <span>
-                    <img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" />
+                    <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
                     </span>
                     <span>(AIS)</span>
                     <span className="legend">
-                    <img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" />
+                    <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
                     </span>
                 </Link>
                 </li>
diff --git a/src/component/wrap/side/Panel3Component.jsx b/src/component/wrap/side/Panel3Component.jsx
index 2263b47d..8abc7bbd 100644
--- a/src/component/wrap/side/Panel3Component.jsx
+++ b/src/component/wrap/side/Panel3Component.jsx
@@ -1,5 +1,8 @@
 import { useState } from 'react';
 import { Link } from "react-router-dom";
+
+const BASE_URL = import.meta.env.BASE_URL;
+
 export default function Panel3Component({ isOpen, onToggle }) {
     
     // 탭이동
@@ -136,11 +139,11 @@ export default function Panel3Component({ isOpen, onToggle }) {
                 <div className="legend">
                     <span className="legendTitle">조위관측 범례</span>
                     <ul className="legendList">
-                        <li><img src="/images/ico_obsTide.svg" alt="조위관측소" />조위관측소</li>
-                        <li><img src="/images/ico_obsOcean.svg" alt="해양관측소" />해양관측소</li>
-                        <li><img src="/images/ico_obsBuoy.svg" alt="해양관측부이" />해양관측부이</li>
-                        <li><img src="/images/ico_obsCurrent.svg" alt="해수유동관측소" />해수유동관측소</li>
-                        <li><img src="/images/ico_obsScience.svg" alt="해양과학기지" />해양과학기지</li>
+                        <li><img src={`${BASE_URL}images/ico_obsTide.svg`} alt="조위관측소" />조위관측소</li>
+                        <li><img src={`${BASE_URL}images/ico_obsOcean.svg`} alt="해양관측소" />해양관측소</li>
+                        <li><img src={`${BASE_URL}images/ico_obsBuoy.svg`} alt="해양관측부이" />해양관측부이</li>
+                        <li><img src={`${BASE_URL}images/ico_obsCurrent.svg`} alt="해수유동관측소" />해수유동관측소</li>
+                        <li><img src={`${BASE_URL}images/ico_obsScience.svg`} alt="해양과학기지" />해양과학기지</li>
                     </ul>
                 </div>
             </div>
@@ -187,8 +190,8 @@ export default function Panel3Component({ isOpen, onToggle }) {
                 <div className="legend">
                     <span className="legendTitle">조위관측 범례</span>
                     <ul className="legendList">
-                        <li><img src="/images/ico_obsTide.svg" alt="조위관측소" />조위관측소</li>
-                        <li><img src="/images/ico_obsSunrise.svg" alt="일출몰관측지역" />일출몰관측지역</li>
+                        <li><img src={`${BASE_URL}images/ico_obsTide.svg`} alt="조위관측소" />조위관측소</li>
+                        <li><img src={`${BASE_URL}images/ico_obsSunrise.svg`} alt="일출몰관측지역" />일출몰관측지역</li>
                     </ul>
                 </div>
             </div>
diff --git a/src/component/wrap/side/Panel6Component.jsx b/src/component/wrap/side/Panel6Component.jsx
index 3451b3f1..0abb6593 100644
--- a/src/component/wrap/side/Panel6Component.jsx
+++ b/src/component/wrap/side/Panel6Component.jsx
@@ -1,5 +1,8 @@
 import { useState } from "react";
 import { Link } from "react-router-dom";
+
+const BASE_URL = import.meta.env.BASE_URL;
+
 export default function Panel6Component({ isOpen, onToggle }) {
     
     return (
@@ -13,7 +16,7 @@ export default function Panel6Component({ isOpen, onToggle }) {
                 <li>
                     <Link to="/" className="on">
                         <div className="control"><i></i> ON</div>
-                        <span className="title"><img src="/images/ico_ai_trackgap.svg" alt="소실항적" />소실항적</span>
+                        <span className="title"><img src={`${BASE_URL}images/ico_ai_trackgap.svg`} alt="소실항적" />소실항적</span>
                         <span className="desc">AIS 신호가 소실된 선박</span>
                         <span className="keywords">Signal Gap</span>
                     </Link>
@@ -21,7 +24,7 @@ export default function Panel6Component({ isOpen, onToggle }) {
                 <li>
                     <Link to="/" className="">
                         <div className="control"><i></i> OFF</div>
-                        <span className="title"><img src="/images/ico_ai_route.svg" alt="항로예측" />항로예측</span>
+                        <span className="title"><img src={`${BASE_URL}images/ico_ai_route.svg`} alt="항로예측" />항로예측</span>
                         <span className="desc">AI 기반 선박 항로 예측</span>
                         <span className="keywords">ML Pattern</span>
                     </Link>
@@ -29,7 +32,7 @@ export default function Panel6Component({ isOpen, onToggle }) {
                 <li>
                     <Link to="/" className="">
                         <div className="control"><i></i> OFF</div>
-                        <span className="title"><img src="/images/ico_ai_shiptype.svg" alt="선종분석" />선종분석</span>
+                        <span className="title"><img src={`${BASE_URL}images/ico_ai_shiptype.svg`} alt="선종분석" />선종분석</span>
                         <span className="desc">선박 유형 자동 분류</span>
                         <span className="keywords">Auto Class</span>
                     </Link>
@@ -37,7 +40,7 @@ export default function Panel6Component({ isOpen, onToggle }) {
                 <li>
                     <Link to="/" className="on">
                         <div className="control"><i></i> ON</div>
-                        <span className="title"><img src="/images/ico_ai_fishing.svg" alt="조업분석" />조업분석</span>
+                        <span className="title"><img src={`${BASE_URL}images/ico_ai_fishing.svg`} alt="조업분석" />조업분석</span>
                         <span className="desc">구역별 위험도 평가</span>
                         <span className="keywords">Risk Score</span>
                     </Link>
@@ -45,7 +48,7 @@ export default function Panel6Component({ isOpen, onToggle }) {
                 <li>
                     <Link to="/" className="on">
                         <div className="control"><i></i> ON</div>
-                        <span className="title"><img src="/images/ico_ai_risk.svg" alt="해역별 위험지수" />해역별 위험지수</span>
+                        <span className="title"><img src={`${BASE_URL}images/ico_ai_risk.svg`} alt="해역별 위험지수" />해역별 위험지수</span>
                         <span className="desc">구역별 위험도 평가</span>
                         <span className="keywords">Risk Score</span>
                     </Link>