diff --git a/apps/wr/app/(popUp-layout)/mapDrgtPopUp/drgtLegend.tsx b/apps/wr/app/(popUp-layout)/mapDrgtPopUp/drgtLegend.tsx
index e20ce9f36..4c38b30b3 100644
--- a/apps/wr/app/(popUp-layout)/mapDrgtPopUp/drgtLegend.tsx
+++ b/apps/wr/app/(popUp-layout)/mapDrgtPopUp/drgtLegend.tsx
@@ -15,34 +15,34 @@ export function DrgtLegend() {
       <div className="flex items-center gap-2 w-full">
         <span
           className="inline-block w-16 h-6"
-          style={{ backgroundColor: color, border: "1px solid #ccc" }}
+          style={{ backgroundColor: color, border: "1px solid var(--border)" }}
         />
-        <span className="text-xl text-gray-900 font-bold">{label}</span>
+        <span className="text-xl font-bold text-foreground">{label}</span>
       </div>
     );
   }
 
   
   return (
-    <div className="bg-white rounded-lg shadow-lg border border-gray-200 w-[160px] px-4 py-3">
+    <div className="w-[160px] rounded-lg border border-border bg-popover px-4 py-3 text-popover-foreground shadow-lg">
       <div className="flex items-center justify-between mx-2 my-4">
-        <Label className="text-3xl text-gray-900 font-bold">가뭄정보 범례</Label>
+        <Label className="text-3xl font-bold text-foreground">가뭄정보 범례</Label>
       </div>
       <div className="mb-3">
-        <div className="w-full bg-gray-200 rounded-full h-1">
+        <div className="h-1 w-full rounded-full bg-secondary">
           <div className="bg-blue-900 h-1 rounded-full transition-all duration-300 ease-in-out" />
         </div>
       </div>
       <div className="w-[140px] mx-auto flex flex-col items-center">
         <div className="bg-blue-900 text-white text-2xl text-center py-1 mb-2 rounded w-full">가 뭄 정 보</div>
         <div className="space-y-1 w-full">
-          <Label className="text-xl text-gray-900 font-bold">관심</Label>
+          <Label className="text-xl font-bold text-foreground">관심</Label>
           <LegendItem color="rgba(222,235,247, 1)" label="1회 미만" /> {/* 관심 - 1회 미만 */}
           <LegendItem color="rgba(46, 117, 182, 1)" label="1회 이상" /> {/* 관심 - 1회 이상 */}
-          <Label className="text-xl text-gray-900 font-bold">주의</Label>
+          <Label className="text-xl font-bold text-foreground">주의</Label>
           <LegendItem color="rgba(255, 242, 204, 1)" label="1회 미만" /> {/* 주의 - 1회 미만 */}
           <LegendItem color="rgba(255, 217, 102, 1)" label="1회 이상" /> {/* 주의 - 1회 이상 */}
-          <Label className="text-xl text-gray-900 font-bold">관심 + 주의</Label>
+          <Label className="text-xl font-bold text-foreground">관심 + 주의</Label>
           <LegendItem color="rgba(251, 229, 214, 1)" label="1회 미만" /> {/* 관심+주의 - 1회 미만 */}
           <LegendItem color="rgba(237, 125, 49, 1)" label="1회 이상" /> {/* 관심+주의 - 1회 이상 */}
         </div>
@@ -50,4 +50,4 @@ export function DrgtLegend() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/wr/app/(popUp-layout)/mapDrgtPopUp/searchBar.tsx b/apps/wr/app/(popUp-layout)/mapDrgtPopUp/searchBar.tsx
index 75a938672..6514f5c06 100644
--- a/apps/wr/app/(popUp-layout)/mapDrgtPopUp/searchBar.tsx
+++ b/apps/wr/app/(popUp-layout)/mapDrgtPopUp/searchBar.tsx
@@ -172,12 +172,12 @@ export function SearchBar({ gisMaps, ctpvCode, sggCode }: CtpvSggPrcsFcltSelectB
 
 
   return (
-    <div className="flex items-center gap-4 bg-white min-h-[48px] min-w-[430px] px-5 py-3 rounded-lg shadow">
+    <div className="flex min-h-[48px] min-w-[430px] items-center gap-4 rounded-lg bg-card px-5 py-3 text-card-foreground shadow">
       <div className={`flex items-center justify-center mr-8`}>
-        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">시도</Label>
+        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">시도</Label>
         <SelectBox
           className="w-60 mr-8"
-          selectClass="rounded-lg bg-white"
+          selectClass="rounded-lg"
           label=""
           selectArray={[DEFAULT_OPTION, ...ctpv]}
           value={ctpvCd}
@@ -187,10 +187,10 @@ export function SearchBar({ gisMaps, ctpvCode, sggCode }: CtpvSggPrcsFcltSelectB
           }}
           selectContentClass="z-[101]"
         />
-        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">시군구</Label>
+        <Label className="mr-2 whitespace-nowrap text-xl font-medium text-label">시군구</Label>
         <SelectBox
           className="w-48"
-          selectClass="w-48 rounded-lg bg-white truncate"
+          selectClass="w-48 truncate rounded-lg"
           label=""
           selectArray={
             [DEFAULT_OPTION,
@@ -207,4 +207,4 @@ export function SearchBar({ gisMaps, ctpvCode, sggCode }: CtpvSggPrcsFcltSelectB
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/wr/app/(popUp-layout)/mapFeaturePopup/page.tsx b/apps/wr/app/(popUp-layout)/mapFeaturePopup/page.tsx
index 90b1cbc8a..e94529e29 100644
--- a/apps/wr/app/(popUp-layout)/mapFeaturePopup/page.tsx
+++ b/apps/wr/app/(popUp-layout)/mapFeaturePopup/page.tsx
@@ -94,7 +94,7 @@ export default function MapFeaturePopup() {
   return (
     <>
       {isDetail ? (
-        <div className="m-0 bg-white p-4 md:p-6 pb-24 box-border">
+        <div className="box-border m-0 bg-background p-4 pb-24 text-foreground md:p-6">
           {layerNm === "tb_wr_bdst_ruse_fclt" ? (
             <RuseDetailPopup bscFctCd={isDetail} />
           ) : layerNm === "tb_il_swage_prcs_fclt" ? (
diff --git a/apps/wr/app/(popUp-layout)/splyPopup/SearchInputText/SearchInputText.tsx b/apps/wr/app/(popUp-layout)/splyPopup/SearchInputText/SearchInputText.tsx
index 05f41d09b..e1e77e1c7 100644
--- a/apps/wr/app/(popUp-layout)/splyPopup/SearchInputText/SearchInputText.tsx
+++ b/apps/wr/app/(popUp-layout)/splyPopup/SearchInputText/SearchInputText.tsx
@@ -94,7 +94,7 @@ export default function SearchInputText({
         value={textValue || ""}
         onChange={handleInputChange}
         onKeyDown={handleKeyDown}
-        className="w-full h-[3.2rem] !text-xl pl-3 text-gray-600 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        className="h-[3.2rem] w-full rounded-md border border-input pl-3 !text-xl text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
         placeholder={`${label}을(를) 입력하세요`}
         onClick={() => {
           setTextValue("");
@@ -103,7 +103,7 @@ export default function SearchInputText({
         }}
       />
       {isOpen && (
-        <div className="absolute top-full left-0 z-50 mb-2 max-h-72 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
+        <div className="absolute left-0 top-full z-50 mb-2 max-h-72 w-full overflow-auto rounded-md border border-border bg-popover text-popover-foreground shadow-lg">
           <div className="max-h-72">
             {searchList.length > 0 ? (
               searchList.map((item, index) => (
@@ -111,8 +111,8 @@ export default function SearchInputText({
                   key={index}
                   className={`w-full cursor-pointer overflow-auto px-5 py-3 text-left !text-xl ${
                     highlightIndex === index
-                      ? "bg-blue-100"
-                      : "hover:bg-gray-100"
+                      ? "bg-accent text-accent-foreground"
+                      : "hover:bg-accent hover:text-accent-foreground"
                   }`}
                   onClick={() => handleSuggestionClick(item.bscFctNm)}
                   role="button"
@@ -127,7 +127,7 @@ export default function SearchInputText({
                 </div>
               ))
             ) : (
-              <div className="!text-xl w-full px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto">
+              <div className="w-full cursor-pointer overflow-auto px-5 py-3 !text-xl text-muted-foreground hover:bg-accent hover:text-accent-foreground">
                 검색 결과가 없습니다.
               </div>
             )}
diff --git a/apps/wr/app/(popUp-layout)/splyPopup/page.tsx b/apps/wr/app/(popUp-layout)/splyPopup/page.tsx
index eac81032e..2947b2abf 100644
--- a/apps/wr/app/(popUp-layout)/splyPopup/page.tsx
+++ b/apps/wr/app/(popUp-layout)/splyPopup/page.tsx
@@ -200,17 +200,17 @@ const Map = () => {
 
               // HTML 또는 React 오버레이 컴포넌트 구성
               const overlayContent = `
-              <div class="rounded-md border border-gray-300 bg-white shadow-md text-sm w-[120px]">
+              <div class="w-[120px] rounded-md border border-border bg-popover text-sm text-popover-foreground shadow-md">
                 <!-- 헤더 -->
-                <div class="bg-cyan-700 text-white px-3 py-2 text-[11px] font-semibold text-center rounded-t-md">
+                <div class="rounded-t-md bg-primary px-3 py-2 text-center text-[11px] font-semibold text-primary-foreground">
                   ${feature.get("swtrmt_fclt_nm") || "-"} 
                 </div>
             
                 <!-- 테이블 -->
-                <table class="w-full text-sm text-gray-800 border-t border-gray-200">
+                <table class="w-full border-t border-border text-sm text-foreground">
                   <tbody>
-                    <tr class="border-b border-gray-200">
-                      <th class="bg-gray-100 text-gray-600 font-semibold text-[10px] text-left">용량(m³/일)</th>
+                    <tr class="border-b border-border">
+                      <th class="bg-secondary text-secondary-foreground font-semibold text-[10px] text-left">용량(m³/일)</th>
                       <td class="text-right text-[10px] font-bold">${formatNumber(feature.get("fclt_cpct"))}</td>
                     </tr>
                   </tbody>
diff --git a/apps/wr/app/(popUp-layout)/splyPopup/searchBar/searchBar.tsx b/apps/wr/app/(popUp-layout)/splyPopup/searchBar/searchBar.tsx
index 0f5430771..7abb3af50 100644
--- a/apps/wr/app/(popUp-layout)/splyPopup/searchBar/searchBar.tsx
+++ b/apps/wr/app/(popUp-layout)/splyPopup/searchBar/searchBar.tsx
@@ -60,12 +60,12 @@ export function SearchBar({
 
   return (
     <div className="flex justify-center w-full px-4 py-3">
-      <div className="flex items-center w-full max-w-screen-lg rounded-xl bg-white shadow-md px-6 py-4 space-x-3">
+      <div className="flex w-full max-w-screen-lg items-center space-x-3 rounded-xl bg-card px-6 py-4 text-card-foreground shadow-md">
         <SelectBox
           labelClass="w-[40px]"
           className="w-[200px]"
           label="시도"
-          selectClass="rounded-lg bg-white"
+          selectClass="rounded-lg"
           selectArray={code.cityCd || []}
           onSelectValue={(val) => onSelectValue(val.toString(), "ctpvCd")}
           value={sidoValue}
@@ -74,12 +74,12 @@ export function SearchBar({
           labelClass="w-[65px]"
           className="w-[200px]"
           label="시군구"
-          selectClass="rounded-lg bg-white"
+          selectClass="rounded-lg"
           selectArray={filteredSigunData || []}
           onSelectValue={(val) => onSelectValue(val.toString(), "sggCd")}
           value={sigunValue}
         />
-        <Label className="text-gray-600">하수재이용시설</Label>
+        <Label className="text-label">하수재이용시설</Label>
         <SearchInputText
           label="시설명"
           initValue={undefined}
@@ -101,7 +101,7 @@ export function SearchBar({
         />
         <Button
           color="sky"
-          className="ml-2 text-white"
+          className="ml-2"
           size="sm"
           onClick={() => {
             onApply();
diff --git a/apps/wr/app/(popUp-layout)/splyPopup/selectedFcltList.tsx b/apps/wr/app/(popUp-layout)/splyPopup/selectedFcltList.tsx
index deb58b906..29e9219df 100644
--- a/apps/wr/app/(popUp-layout)/splyPopup/selectedFcltList.tsx
+++ b/apps/wr/app/(popUp-layout)/splyPopup/selectedFcltList.tsx
@@ -24,13 +24,13 @@ export default function SelectedFcltList({
   };
 
   return (
-    <div className="fixed right-40 top-[8rem] w-[40rem] max-h-[130rem] overflow-auto bg-white shadow-lg rounded p-4 border border-gray-300 z-50">
-      <h3 className="bg-cyan-700 text-white text-xl font-bold mb-2 p-2">
+    <div className="fixed right-40 top-[8rem] z-50 max-h-[130rem] w-[40rem] overflow-auto rounded border border-border bg-popover p-4 text-popover-foreground shadow-lg">
+      <h3 className="mb-2 bg-primary p-2 text-xl font-bold text-primary-foreground">
         선택된 시설
       </h3>
       <div className="overflow-x-auto">
-        <table className="w-full text-sm text-gray-800 border border-gray-200">
-          <thead className="bg-gray-100 text-gray-700 text-[13px]">
+        <table className="w-full border border-border text-sm text-foreground">
+          <thead className="bg-secondary text-[13px] text-secondary-foreground">
             <tr>
               <th className="px-3 py-2 text-left border-b">시설명</th>
               <th className="px-3 py-2 text-right border-b">
@@ -60,7 +60,7 @@ export default function SelectedFcltList({
                   <td className="px-3 py-2 text-center">
                     <button
                       onClick={() => handleDelete(item.pbnstRuseFcltId)}
-                      className="text-red-500 hover:text-red-700 text-sm font-bold"
+                      className="text-sm font-bold text-destructive hover:opacity-80"
                       aria-label="삭제"
                       title="삭제"
                     >
@@ -71,7 +71,7 @@ export default function SelectedFcltList({
               ))
             ) : (
               <tr>
-                <td colSpan={4} className="px-3 py-6 text-center text-[12px] text-gray-500">
+                <td colSpan={4} className="px-3 py-6 text-center text-[12px] text-muted-foreground">
                   선택된 시설이 없습니다.
                 </td>
               </tr>
diff --git a/apps/wr/components/ui/map/wrOverLay/WrOverLayTable/WrOverLayTable.tsx b/apps/wr/components/ui/map/wrOverLay/WrOverLayTable/WrOverLayTable.tsx
index db992a507..3a036cb9d 100644
--- a/apps/wr/components/ui/map/wrOverLay/WrOverLayTable/WrOverLayTable.tsx
+++ b/apps/wr/components/ui/map/wrOverLay/WrOverLayTable/WrOverLayTable.tsx
@@ -11,14 +11,14 @@ export default function WrOverLayTable({overLayData}:{overLayData:any,}){
           <TableBody>
             {Object.entries(overLayData).map(([key, value]) => (
               <TableRow key={key}>
-                <TableCell className=" w-1/3 bg-slate-100 text-slate-800 font-medium text-sm align-middle border border-slate-300">
+                <TableCell className="w-1/3 border border-border bg-secondary text-secondary-foreground font-medium text-sm align-middle">
                   {" "}
                   {key}{" "}
                 </TableCell>
 
                 <TableCell
                   className={
-                    "w-1/3 bg-white text-right pr-3 text-sm align-middle border border-slate-300"
+                    "w-1/3 border border-border bg-background pr-3 text-right text-sm align-middle text-foreground"
                   }
                 >
                   {" "}
@@ -30,4 +30,4 @@ export default function WrOverLayTable({overLayData}:{overLayData:any,}){
         </Table>
         </>
     )
-}
\ No newline at end of file
+}
diff --git a/apps/wr/components/ui/map/wrOverLay/wrOverLay.tsx b/apps/wr/components/ui/map/wrOverLay/wrOverLay.tsx
index a6d04973d..36c733951 100644
--- a/apps/wr/components/ui/map/wrOverLay/wrOverLay.tsx
+++ b/apps/wr/components/ui/map/wrOverLay/wrOverLay.tsx
@@ -43,16 +43,16 @@ export default function WrOverLay({
           onDrag={(e, data) => setPos({ x: data.x, y: data.y })}
         >
           <div ref={dragRef}>
-            <Card className="w-[320px] p-0 shadow-md rounded-xl overflow-hidden border border-slate-300 relative">
+            <Card className="relative w-[320px] overflow-hidden rounded-xl border border-border bg-card p-0 text-card-foreground shadow-md">
               {/* 헤더: 제목 바 + 우측 정렬 버튼 (절대배치 제거, 타이틀 중앙 정렬 유지) */}
-              <div className="bg-sky-600 text-white font-semibold py-2 text-xl">
+              <div className="bg-primary py-2 text-xl font-semibold text-primary-foreground">
                 <div className="grid grid-cols-[auto_1fr_auto] items-center gap-2 px-2">
                   {/* 좌측 스페이서: 우측 버튼과 동일한 너비를 차지하도록 동일 버튼을 투명하게 복제 */}
                   <div className="opacity-0 pointer-events-none">
                     <div className="flex gap-2">
                       <button
                         onClick={() => setPos({ x: 0, y: 0 })}
-                        className="p-2  bg-gray-200 text-gray-700 shadow hover:bg-gray-300 hover:shadow-md transition"
+                        className="bg-secondary p-2 text-secondary-foreground shadow transition hover:bg-accent hover:text-accent-foreground hover:shadow-md"
                         title="원위치"
                       >
                         ↺
@@ -62,7 +62,7 @@ export default function WrOverLay({
                         onClick={() => setOpen(false)}
                         aria-label="축소"
                         title="축소"
-                        className="p-2  bg-gray-200 text-gray-700 shadow hover:bg-gray-300 hover:shadow-md transition"
+                        className="bg-secondary p-2 text-secondary-foreground shadow transition hover:bg-accent hover:text-accent-foreground hover:shadow-md"
                       >
                         –
                       </button>
@@ -78,7 +78,7 @@ export default function WrOverLay({
                   <div className="flex gap-2 justify-end">
                     <button
                       onClick={() => setPos({ x: 0, y: 0 })}
-                      className="p-2  bg-gray-200 text-gray-700 shadow hover:bg-gray-300 hover:shadow-md transition"
+                      className="bg-secondary p-2 text-secondary-foreground shadow transition hover:bg-accent hover:text-accent-foreground hover:shadow-md"
                       title="원위치"
                     >
                       ↺
@@ -88,7 +88,7 @@ export default function WrOverLay({
                       onClick={() => setOpen(false)}
                       aria-label="축소"
                       title="축소"
-                      className="p-2  bg-gray-200 text-gray-700 shadow hover:bg-gray-300 hover:shadow-md transition"
+                      className="bg-secondary p-2 text-secondary-foreground shadow transition hover:bg-accent hover:text-accent-foreground hover:shadow-md"
                     >
                       –
                     </button>
@@ -110,7 +110,7 @@ export default function WrOverLay({
           onClick={() => setOpen(true)}
           aria-label="확장"
           title={title || "정보 보기"}
-          className="w-[30px] h-[30px]  bg-white font-bold shadow flex items-center justify-center border border-slate-300"
+          className="flex h-[30px] w-[30px] items-center justify-center border border-border bg-popover font-bold text-popover-foreground shadow"
         >
           {bubbleLabel}
         </button>