diff --git a/apps/wr/app/(with-layout)/matMng/coMat/coMatRvw/page.tsx b/apps/wr/app/(with-layout)/matMng/coMat/coMatRvw/page.tsx
index 4996b1cd9..2fba54fb6 100644
--- a/apps/wr/app/(with-layout)/matMng/coMat/coMatRvw/page.tsx
+++ b/apps/wr/app/(with-layout)/matMng/coMat/coMatRvw/page.tsx
@@ -93,7 +93,7 @@ const EMPTY_DETAIL_FORM: Partial<DmdCoReqType> = {
 };
 
 export default function CoMatRvw() {
-  const readOnlyInputClass = "bg-slate-50 text-gray-700";
+  const readOnlyInputClass = "bg-secondary text-secondary-foreground";
   const { auth, code, coRvw, coMatRvwInit, coMatRvwSearch, coMatRvwInqua } =
     useWrStore((state) => state);
   const { coMatRvwRes, coMatRvwCount } = coRvw;
@@ -305,7 +305,7 @@ export default function CoMatRvw() {
                   />
                   <div className="col-span-7 w-full">
                     <div className="flex flex-row items-center">
-                      <Label className="text-xl text-gray-600 mx-6">
+                      <Label className="mx-6 text-xl text-label">
                         수요신청년도
                       </Label>
                       <SelectBox
@@ -522,7 +522,7 @@ export default function CoMatRvw() {
                               />
                               {/* TODO:  총대장균군수 확인 필요*/}
                               {field.value != -1 ? (
-                                <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+                                <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xl text-placeholder">
                                   이하
                                 </span>
                               ) : (
@@ -549,7 +549,7 @@ export default function CoMatRvw() {
                                 value={formatNumberWithComma(field.value)}
                                 readOnly
                               />
-                              <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+                              <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xl text-placeholder">
                                 이상
                               </span>
                             </div>
@@ -573,7 +573,7 @@ export default function CoMatRvw() {
                                 value={formatNumberWithComma(field.value)}
                                 readOnly
                               />
-                              <span className=" text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+                              <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xl text-placeholder">
                                 이하
                               </span>
                             </div>
@@ -601,7 +601,7 @@ export default function CoMatRvw() {
                                 value={formatNumberWithComma(field.value)}
                                 readOnly
                               />
-                              <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+                              <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xl text-placeholder">
                                 이하
                               </span>
                             </div>
@@ -643,7 +643,7 @@ export default function CoMatRvw() {
                                 value={formatNumberWithComma(field.value)}
                                 readOnly
                               />
-                              <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+                              <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xl text-placeholder">
                                 이하
                               </span>
                             </div>
@@ -670,7 +670,7 @@ export default function CoMatRvw() {
                                 value={formatNumberWithComma(field.value)}
                                 readOnly
                               />
-                              <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+                              <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xl text-placeholder">
                                 이하
                               </span>
                             </div>
@@ -697,7 +697,7 @@ export default function CoMatRvw() {
                                 value={formatNumberWithComma(field.value)}
                                 readOnly
                               />
-                              <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+                              <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xl text-placeholder">
                                 이하
                               </span>
                             </div>
@@ -748,7 +748,7 @@ export default function CoMatRvw() {
                                 value={formatNumberWithComma(field.value)}
                                 readOnly
                               />
-                              <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+                              <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xl text-placeholder">
                                 이하
                               </span>
                             </div>
@@ -775,7 +775,7 @@ export default function CoMatRvw() {
                                 value={formatNumberWithComma(field.value)}
                                 readOnly
                               />
-                              <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+                              <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xl text-placeholder">
                                 이하
                               </span>
                             </div>
diff --git a/apps/wr/app/(with-layout)/matMng/coMat/ruseCaseMng/page.tsx b/apps/wr/app/(with-layout)/matMng/coMat/ruseCaseMng/page.tsx
index 9fc636427..b8ca96ca1 100644
--- a/apps/wr/app/(with-layout)/matMng/coMat/ruseCaseMng/page.tsx
+++ b/apps/wr/app/(with-layout)/matMng/coMat/ruseCaseMng/page.tsx
@@ -347,7 +347,7 @@ export default function RuseCaseMng() {
                   }}
                   resetPageNo={resetPage}
                 />
-                <span className="text-2xl font-bold text-gray-500">
+                <span className="text-2xl font-bold text-muted-foreground">
                   ☞ 본 사례의 사업비는 재원협의 단계의 정보이므로, 최종확정된 비용이 아닙니다.
                 </span>
               </div>
diff --git a/apps/wr/app/(with-layout)/matMng/coMat/ruseRvwHstry/page.tsx b/apps/wr/app/(with-layout)/matMng/coMat/ruseRvwHstry/page.tsx
index b142bff16..83f6fbe69 100644
--- a/apps/wr/app/(with-layout)/matMng/coMat/ruseRvwHstry/page.tsx
+++ b/apps/wr/app/(with-layout)/matMng/coMat/ruseRvwHstry/page.tsx
@@ -250,7 +250,7 @@ export default function RuseRvwHstry() {
                 </SelectBox>
                 <div className="col-span-4 w-full">
                   <div className="flex flex-row items-center">
-                    <Label className="text-xl text-gray-600 ml-4 mr-4">
+                    <Label className="ml-4 mr-4 text-xl text-label">
                       수요신청년도
                     </Label>
                     <div className="flex flex-row mt-2">
diff --git a/apps/wr/app/(with-layout)/matMng/coMng/coSttn/page.tsx b/apps/wr/app/(with-layout)/matMng/coMng/coSttn/page.tsx
index 71ec60cf0..894a27c71 100644
--- a/apps/wr/app/(with-layout)/matMng/coMng/coSttn/page.tsx
+++ b/apps/wr/app/(with-layout)/matMng/coMng/coSttn/page.tsx
@@ -363,7 +363,7 @@ export default function CoSttn() {
                 getDemandCompList(searchText, pageCnt);
               }}
               rtnInputData={handleRtnInputData}
-              bodyClassNm={"w-full mx-auto bg-white rounded-lg shadow-md p-6"}
+              bodyClassNm={"w-full mx-auto bg-background rounded-lg shadow-md p-6"}
               updateList={updateData}
               openNetwork={true}
             ></SdmInsertForm>
diff --git a/apps/wr/app/(with-layout)/matMng/coMng/drgtSttn/page.tsx b/apps/wr/app/(with-layout)/matMng/coMng/drgtSttn/page.tsx
index 1aafb4318..00ce07183 100644
--- a/apps/wr/app/(with-layout)/matMng/coMng/drgtSttn/page.tsx
+++ b/apps/wr/app/(with-layout)/matMng/coMng/drgtSttn/page.tsx
@@ -171,7 +171,7 @@ export default function DrgtSttn() {
                                     />
                                     <div className="col-span-5 w-auto">
                                         <div className="flex flex-row items-center">
-                                            <Label className="text-xl text-gray-600 ml-8">조회기간</Label>
+                                            <Label className="ml-8 text-xl text-label">조회기간</Label>
                                             <div className="flex flex-row w-1/4">
                                                 <DateMonthPicker
                                                     field={{
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx
index d9ca92126..2476d1a10 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx
@@ -244,7 +244,7 @@ export default function PbnstSttn() {
                       setSearchYear(String(val))
                     }
                   />
-                  <Label className="w-full ml-4 text-xl text-gray-600">
+                  <Label className="ml-4 w-full text-xl text-label">
                     {"하수처리시설명"}
                   </Label>
                   <SearchInput
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/TableHead.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/TableHead.tsx
index 72069f4d8..9fbcf716c 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/TableHead.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/TableHead.tsx
@@ -14,7 +14,7 @@ export const headMakeprfmnc = (
             .map((head: TableUpperProps) =>
               !head.upSequnce ? (
                 <TableHead
-                  className={`border border-gray-600 px-2 py-1 `}
+                  className={`border border-border px-2 py-1 `}
                   rowSpan={2}
                   key={head.id}
                   style={{ width: head.widthPercent ? `${head.widthPercent}%` : undefined }}
@@ -23,7 +23,7 @@ export const headMakeprfmnc = (
                 </TableHead>
               ) : head.upSequnce === 1 ? (
                 <TableHead
-                  className={`border border-gray-600 px-2 py-1 `}
+                  className={`border border-border px-2 py-1 `}
                   key={head.id}
                   rowSpan={1}
                   colSpan={
@@ -43,7 +43,7 @@ export const headMakeprfmnc = (
             .map((head: TableUpperProps) =>
               makeHeadNm?.find((ch) => ch.headNm === head.upName) ? (
                 <TableHead
-                  className={`border border-gray-600 px-2 py-1 `}
+                  className={`border border-border px-2 py-1 `}
                   key={head.id}
                   style={{ width: head.widthPercent ? `${head.widthPercent}%` : undefined }}
                 >
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/page.tsx
index d2fab71c2..6f3cb2d84 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/page.tsx
@@ -250,7 +250,7 @@ export default function Page() {
           <SearchDiv>
             <SearchFormLeft>
               <div className="col-span-2 flex flex-row space-x-2">
-                <Label className="w-fit shrink-0 whitespace-nowrap self-center text-xl text-gray-600">
+                <Label className="w-fit shrink-0 whitespace-nowrap self-center text-xl text-label">
                   {"지도점검년도"}
                 </Label>
                 <SelectBox
@@ -265,7 +265,7 @@ export default function Page() {
                 />
               </div>
               <div className="col-span-2 flex flex-row space-x-2">
-                <Label className="w-fit shrink-0 whitespace-nowrap self-center text-xl text-gray-600 ">
+                <Label className="w-fit shrink-0 whitespace-nowrap self-center text-xl text-label ">
                   {"시설구분"}
                 </Label>
                 <SelectBox
@@ -281,7 +281,7 @@ export default function Page() {
                 />
               </div>
               <div className="col-span-2 flex flex-row space-x-2">
-                <Label className="w-fit shrink-0 whitespace-nowrap self-center text-xl text-gray-600 ">
+                <Label className="w-fit shrink-0 whitespace-nowrap self-center text-xl text-label ">
                   {"시설명"}
                 </Label>
                 <SearchInput
@@ -378,7 +378,7 @@ export default function Page() {
                 readonly={mdfcnAuthrtYn === 'N'}
               />
             )}
-            <span className="text-2xl font-bold text-gray-500">
+            <span className="text-2xl font-bold text-muted-foreground">
               ☞ 연도별 점검일 최종 데이터를 기준으로 통계 작성합니다.
             </span>
           </ListDiv>
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/pbnstPrfmncReg/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/pbnstPrfmncReg/page.tsx
index 4838624a2..a2013102e 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/pbnstPrfmncReg/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/prfmncReg/pbnstPrfmncReg/page.tsx
@@ -240,7 +240,7 @@ export default function PrfmncPrfmncReg() {
             <SearchDiv>
               <SearchFormLeft>
                 <div className="col-span-3 flex flex-row space-x-2">
-                  <Label className="w-fit shrink-0 whitespace-nowrap self-center text-xl text-gray-600 ">
+                  <Label className="w-fit shrink-0 whitespace-nowrap self-center text-xl text-label ">
                     {"실적등록년도"}
                   </Label>
                   <SelectBox
@@ -255,7 +255,7 @@ export default function PrfmncPrfmncReg() {
                   />
                 </div>
                 <div className="col-span-3 flex flex-row space-x-2">
-                  <Label className="w-fit shrink-0 whitespace-nowrap self-center text-xl text-gray-600">
+                  <Label className="w-fit shrink-0 whitespace-nowrap self-center text-xl text-label">
                     {"시설명"}
                   </Label>
                   <SearchInput
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/prfmncSttn/chkgdnSttn/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/prfmncSttn/chkgdnSttn/page.tsx
index ac3c72bc1..1750a2b6b 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/prfmncSttn/chkgdnSttn/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/prfmncSttn/chkgdnSttn/page.tsx
@@ -301,7 +301,7 @@ export default function Page() {
           <SearchDiv>
             <SearchFormLeft>
               <div className="col-span-2 flex flex-row space-x-2">
-                <Label className="w-28 mt-2 text-xl text-gray-600">
+                <Label className="mt-2 w-28 text-xl text-label">
                   {"시도"}
                 </Label>
                 <SelectBox
@@ -318,7 +318,7 @@ export default function Page() {
                 />
               </div>
               <div className="col-span-2 flex flex-row space-x-2">
-                <Label className="w-28 mt-2 text-xl text-gray-600">
+                <Label className="mt-2 w-28 text-xl text-label">
                   {"시군구"}
                 </Label>
                 <SelectBox
@@ -337,7 +337,7 @@ export default function Page() {
                 />
               </div>
               <div className="col-span-2 flex flex-row space-x-2">
-                <Label className="w-48 mt-2 text-xl text-gray-600">
+                <Label className="mt-2 w-48 text-xl text-label">
                   {"지도점검년도"}
                 </Label>
                 <SelectBox
@@ -352,7 +352,7 @@ export default function Page() {
                 />
               </div>
               <div className="col-span-2 flex flex-row space-x-2">
-                <Label className="w-28 mt-2 text-xl text-gray-600">
+                <Label className="mt-2 w-28 text-xl text-label">
                   {"시설구분"}
                 </Label>
                 <SelectBox
@@ -368,7 +368,7 @@ export default function Page() {
                 />
               </div>
               <div className="col-span-2 flex flex-row space-x-2">
-                <Label className="w-28 mt-2 text-xl text-gray-600">
+                <Label className="mt-2 w-28 text-xl text-label">
                   {"시설명"}
                 </Label>
                 <SearchInput
diff --git a/apps/wr/app/(with-layout)/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx b/apps/wr/app/(with-layout)/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx
index 34d4a4ffe..53617689d 100644
--- a/apps/wr/app/(with-layout)/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx
+++ b/apps/wr/app/(with-layout)/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx
@@ -626,7 +626,7 @@ export default function PbnstPrfmncSttn() {
                                     {/* <div className="flex flex-row items-center"> */}
                                     <div className="flex flex-row items-center gap-x-4 flex-nowrap">
                                         {/* <Label className="w-full text-xl text-gray-600"> */}
-                                        <Label className="flex-none whitespace-nowrap text-xl text-gray-600">
+                                        <Label className="flex-none whitespace-nowrap text-xl text-label">
                                             하수 재이용년도</Label>
                                         <SelectBox
                                             // className="w-full h-full text-2xl mx-4"
diff --git a/apps/wr/app/store/common/code/index.ts b/apps/wr/app/store/common/code/index.ts
index 5e6600960..66f66126a 100644
--- a/apps/wr/app/store/common/code/index.ts
+++ b/apps/wr/app/store/common/code/index.ts
@@ -11,7 +11,7 @@ import {
   ruseSeCd,
   yn,
 } from "./basicCode";
-export const btnClass = "p-4 m-2 text-white rounded-sm text-lg font-medium ";
+export const btnClass = "p-4 m-2 rounded-sm text-lg font-medium text-primary-foreground ";
 
 const laeSecd = "41";
 export const lwCds: Record<string, SelectDataType[]> = {};
diff --git a/apps/wr/components/lib/func/TableData.tsx b/apps/wr/components/lib/func/TableData.tsx
index 03c000dd6..ad0526532 100644
--- a/apps/wr/components/lib/func/TableData.tsx
+++ b/apps/wr/components/lib/func/TableData.tsx
@@ -252,7 +252,7 @@ export const chRowspanTable = (
                           "splyUswtrUtztnQnt",
                           "ruseFcltUtztnQnt",
                         ].includes(head.id)
-                          ? "underline text-blue-600 cursor-pointer"
+                          ? "cursor-pointer underline text-primary"
                           : ""
                       }
                     >
@@ -270,7 +270,7 @@ export const chRowspanTable = (
         <TableRow>
           <TableCell
             colSpan={headList.length}
-            className="h-24 text-center text-gray-500"
+            className="h-24 text-center text-muted-foreground"
           >
             조회된 결과가 없습니다.
           </TableCell>
@@ -361,9 +361,9 @@ export const InputTableBody = (
         const isTotal = data["구분"] === 0;
 
         const bgClass = isTotal
-          ? "bg-[#d5e1eb] font-bold"
+          ? "bg-accent text-accent-foreground font-bold"
           : isSubTotal
-            ? "bg-[#e6eef5] font-semibold"
+            ? "bg-secondary text-secondary-foreground font-semibold"
             : "";
 
         return (
@@ -381,7 +381,7 @@ export const InputTableBody = (
                   <TableCell
                     key={head.id + headIndex}
                     colSpan={2}
-                    className="font-bold text-center bg-[#d5e1eb]"
+                    className="bg-accent text-accent-foreground font-bold text-center"
                   >
                     총합계
                   </TableCell>
@@ -397,7 +397,7 @@ export const InputTableBody = (
                 return (
                   <TableCell
                     key={head.id + headIndex}
-                    className="bg-[#d5e1eb] font-bold text-right"
+                    className="bg-accent text-accent-foreground font-bold text-right"
                   >
                     {Number(data[head.id])
                       ? formatCommaNumber(data[head.id as keyof any])
@@ -482,7 +482,7 @@ export const InputTableBody = (
         <TableRow>
           <TableCell
             colSpan={headList.length}
-            className="h-24 text-center text-gray-500"
+            className="h-24 text-center text-muted-foreground"
           >
             조회된 결과가 없습니다.
           </TableCell>
@@ -519,9 +519,9 @@ export const pbnstTableBody = (
         const isTotal = data["구분"] === 0;
 
         const bgClass = isTotal
-          ? "bg-[#d5e1eb] font-bold"
+          ? "bg-accent text-accent-foreground font-bold"
           : isSubTotal
-            ? "bg-[#e6eef5] font-semibold"
+            ? "bg-secondary text-secondary-foreground font-semibold"
             : "";
 
         return (
@@ -552,7 +552,7 @@ export const pbnstTableBody = (
                   <TableCell
                     key={head.id + headIndex}
                     colSpan={2}
-                    className="font-bold text-center bg-[#d5e1eb]"
+                    className="bg-accent text-accent-foreground font-bold text-center"
                   >
                     총합계
                   </TableCell>
@@ -571,7 +571,7 @@ export const pbnstTableBody = (
                 return (
                   <TableCell
                     key={head.id + headIndex}
-                    className="bg-[#d5e1eb] font-bold text-right"
+                    className="bg-accent text-accent-foreground font-bold text-right"
                   >
                     {Number(data[head.id])
                       ? formatCommaNumber(data[head.id as keyof any])
@@ -645,7 +645,7 @@ export const pbnstTableBody = (
         <TableRow>
           <TableCell
             colSpan={headList.length}
-            className="h-24 text-center text-gray-500"
+            className="h-24 text-center text-muted-foreground"
           >
             조회된 결과가 없습니다.
           </TableCell>
diff --git a/apps/wr/components/lib/func/common.tsx b/apps/wr/components/lib/func/common.tsx
index 7afeda993..e03baddb6 100644
--- a/apps/wr/components/lib/func/common.tsx
+++ b/apps/wr/components/lib/func/common.tsx
@@ -291,16 +291,16 @@ export const showConfirmToast = (message: string) => {
   toast.custom(
     (t) => (
       <div
-        className={`w-[500px] min-h-[140px] bg-white shadow-lg rounded-xl p-6 border border-gray-200
+        className={`min-h-[140px] w-[500px] rounded-xl border border-border bg-card p-6 text-card-foreground shadow-lg
       ${t.visible ? "animate-enter" : "animate-leave"}`}
       >
-        <div className="text-3xl font-extrabold text-red-600 bg-yellow-100 px-4 py-2 rounded-md shadow-md">
+        <div className="rounded-md bg-accent px-4 py-2 text-3xl font-extrabold text-destructive shadow-md">
           {message}
         </div>{" "}
         <div className="flex justify-end gap-2">
           <Button
             size={"sm"}
-            className="px-4 py-1.5 rounded bg-gray-200 text-sm hover:bg-gray-300"
+            className="rounded bg-secondary px-4 py-1.5 text-sm text-secondary-foreground hover:bg-accent"
             onClick={() => toast.dismiss(t.id)}
           >
             확인완료
diff --git a/apps/wr/components/ui/form/coMat/conCostForm/conCostForm.tsx b/apps/wr/components/ui/form/coMat/conCostForm/conCostForm.tsx
index 7813f1e27..2bc1861ce 100644
--- a/apps/wr/components/ui/form/coMat/conCostForm/conCostForm.tsx
+++ b/apps/wr/components/ui/form/coMat/conCostForm/conCostForm.tsx
@@ -79,7 +79,7 @@ export default function ConCostForm({
   const activeForm = form || localForm;
   const isSim = type === "simulation";
 
-  const readOnlyInputClass = "bg-slate-50 text-gray-700";
+  const readOnlyInputClass = "bg-secondary text-secondary-foreground";
   const {
     constCostRes, // 표준사업비
     rateFeeRes,   // 부대경비요율
diff --git a/apps/wr/components/ui/form/fcltReg/htdflReg/htdflRegForm.tsx b/apps/wr/components/ui/form/fcltReg/htdflReg/htdflRegForm.tsx
index 508d8f22e..15be1a64a 100644
--- a/apps/wr/components/ui/form/fcltReg/htdflReg/htdflRegForm.tsx
+++ b/apps/wr/components/ui/form/fcltReg/htdflReg/htdflRegForm.tsx
@@ -271,7 +271,7 @@ export default function HtdflRegForm({
         <form onSubmit={form.handleSubmit(onSubmit)}>
           {/* <div className="flex justify-between items-center mx-3"> */}
           <div>
-            <h1 className="text-2xl font-bold text-gray-900 mt-3 ml-1">
+            <h1 className="mt-3 ml-1 text-2xl font-bold text-foreground">
               {readonly && `(시설명 : ${htdflForm?.bdstNm})`}
             </h1>
             <div className="grid grid-cols-12 flex items-center card-header">
@@ -289,7 +289,7 @@ export default function HtdflRegForm({
                   </Button>
                   <Button
                     type="button"
-                    className="!bg-red-500 text-white"
+                    variant="destructive"
                     size={"sm"}
                     onClick={onDelete}
                   >
@@ -619,7 +619,7 @@ export default function HtdflRegForm({
                             readOnly={readonly}
                             maxLength={6}
                           />
-                          <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+                          <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xl text-placeholder">
                             이하
                           </span>
                         </div>
@@ -649,7 +649,7 @@ export default function HtdflRegForm({
                             readOnly={readonly}
                             maxLength={6}
                           />{" "}
-                          <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+                          <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xl text-placeholder">
                             이하
                           </span>
                         </div>
@@ -704,7 +704,7 @@ export default function HtdflRegForm({
                             readOnly={readonly}
                             maxLength={6}
                           />
-                          <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+                          <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xl text-placeholder">
                             이하
                           </span>
                         </div>
@@ -739,7 +739,7 @@ export default function HtdflRegForm({
                             readOnly={readonly}
                             maxLength={6}
                           />
-                          <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+                          <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xl text-placeholder">
                             이상
                           </span>
                         </div>
@@ -768,7 +768,7 @@ export default function HtdflRegForm({
                             readOnly={readonly}
                             maxLength={numSize}
                           />
-                          <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+                          <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xl text-placeholder">
                             이상
                           </span>
                         </div>
@@ -800,7 +800,7 @@ export default function HtdflRegForm({
                             readOnly={readonly}
                             maxLength={numSize}
                           />
-                          <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+                          <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xl text-placeholder">
                             이하
                           </span>
                         </div>
@@ -830,7 +830,7 @@ export default function HtdflRegForm({
                             readOnly={readonly}
                             maxLength={7}
                           />
-                          <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+                          <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xl text-placeholder">
                             이하
                           </span>
                         </div>
@@ -886,7 +886,7 @@ export default function HtdflRegForm({
                             readOnly={readonly}
                             maxLength={numSize}
                           />
-                          <span className="text-xl absolute inset-y-0 right-3 flex items-center text-gray-500 pointer-events-none">
+                          <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xl text-placeholder">
                             이하
                           </span>
                         </div>
diff --git a/apps/wr/components/ui/form/fcltReg/rswtrReg/rswtrRegForm.tsx b/apps/wr/components/ui/form/fcltReg/rswtrReg/rswtrRegForm.tsx
index fb6b84b4b..8784f87b2 100644
--- a/apps/wr/components/ui/form/fcltReg/rswtrReg/rswtrRegForm.tsx
+++ b/apps/wr/components/ui/form/fcltReg/rswtrReg/rswtrRegForm.tsx
@@ -179,7 +179,7 @@ export default function RswtrRegForm({
         <form onSubmit={form.handleSubmit(onSubmit)}>
           {/* <div className="flex justify-between items-center mx-3"> */}
           <div>
-            <h1 className="text-2xl font-bold text-gray-900 mt-3 ml-1">
+            <h1 className="mt-3 ml-1 text-2xl font-bold text-foreground">
               {readonly && `(시설명 : ${rswtForm?.bdstNm})`}
             </h1>
             <div className="grid grid-cols-12 flex items-center card-header">
@@ -197,7 +197,7 @@ export default function RswtrRegForm({
                   </Button>
                   <Button
                     type="button"
-                    className="!bg-red-500 text-white"
+                    variant="destructive"
                     size={"sm"}
                     onClick={onDelete}
                   >
diff --git a/apps/wr/components/ui/map/LayerPopUp/HasuFacilty/HasuFacility.tsx b/apps/wr/components/ui/map/LayerPopUp/HasuFacilty/HasuFacility.tsx
index beaf26b81..5a622b2c6 100644
--- a/apps/wr/components/ui/map/LayerPopUp/HasuFacilty/HasuFacility.tsx
+++ b/apps/wr/components/ui/map/LayerPopUp/HasuFacilty/HasuFacility.tsx
@@ -81,7 +81,7 @@ export function HasuFacility({rtnFeature}:{rtnFeature:(feature:any)=>void } ) {
               rightChildren={<></>}
               leftChildren={
                 <div className="col-span-3 flex items-center">
-                  <Label className="w-full mt-2 ml-4 text-xl text-gray-600">
+                  <Label className="mt-2 ml-4 w-full text-xl text-label">
                     {"하수처리시설명"}
                   </Label>
                   <SearchInput
diff --git a/apps/wr/components/ui/map/LayerPopUp/RuseFacilty/RuseFacility.tsx b/apps/wr/components/ui/map/LayerPopUp/RuseFacilty/RuseFacility.tsx
index 8ed06293b..07e00ddf7 100644
--- a/apps/wr/components/ui/map/LayerPopUp/RuseFacilty/RuseFacility.tsx
+++ b/apps/wr/components/ui/map/LayerPopUp/RuseFacilty/RuseFacility.tsx
@@ -109,7 +109,7 @@ export function RuseFacility({
                     className={""}
                     selectContentClass={''}
                   />
-                  <Label className="w-full mt-2 ml-4 text-xl text-gray-600">
+                  <Label className="mt-2 ml-4 w-full text-xl text-label">
                     {"하수처리시설명"}
                   </Label>
                   <SearchInput
diff --git a/apps/wr/components/ui/map/detailPopup/coSttnDetailPopup/coSttnDetailPopup.tsx b/apps/wr/components/ui/map/detailPopup/coSttnDetailPopup/coSttnDetailPopup.tsx
index 9f8db7409..bb655f923 100644
--- a/apps/wr/components/ui/map/detailPopup/coSttnDetailPopup/coSttnDetailPopup.tsx
+++ b/apps/wr/components/ui/map/detailPopup/coSttnDetailPopup/coSttnDetailPopup.tsx
@@ -20,7 +20,7 @@ export default function CoSttnDetailPopup({isDetail} :{isDetail:DemandCompType})
               rtnInputData={async (data) => {
                 console.log(data)
               }}
-              bodyClassNm={"w-full mx-auto bg-white rounded-lg shadow-md p-6"}
+              bodyClassNm={"w-full mx-auto bg-background rounded-lg shadow-md p-6"}
               updateList={isDetail}
               readOnly={true}
               openNetwork={false}
@@ -28,4 +28,4 @@ export default function CoSttnDetailPopup({isDetail} :{isDetail:DemandCompType})
         
         </div>
     )
-}
\ No newline at end of file
+}
diff --git a/apps/wr/components/ui/modal/chkgd/chkgdExcel/chkgdExcel.tsx b/apps/wr/components/ui/modal/chkgd/chkgdExcel/chkgdExcel.tsx
index 0e4152db6..6cdebc4c4 100644
--- a/apps/wr/components/ui/modal/chkgd/chkgdExcel/chkgdExcel.tsx
+++ b/apps/wr/components/ui/modal/chkgd/chkgdExcel/chkgdExcel.tsx
@@ -265,7 +265,7 @@ export default function ChkgdExcel({
               ></Title>
             </div>
             <div className="flex justify-between">
-              <h3 className="text-2xl font-bold text-gray-900 mt-1 ml-7">
+              <h3 className="mt-1 ml-7 text-2xl font-bold text-foreground">
                 {"점검정보 입력"}
               </h3>
 
diff --git a/apps/wr/components/ui/modal/chkgd/chkgdModal/chkgdModal.tsx b/apps/wr/components/ui/modal/chkgd/chkgdModal/chkgdModal.tsx
index c5ba35e17..90bb0c91c 100644
--- a/apps/wr/components/ui/modal/chkgd/chkgdModal/chkgdModal.tsx
+++ b/apps/wr/components/ui/modal/chkgd/chkgdModal/chkgdModal.tsx
@@ -289,7 +289,7 @@ export default function ChkgdModal({
               <></>
             )}
           </div>
-          <h3 className="text-2xl font-bold text-gray-900 mt-2 ml-6">
+          <h3 className="mt-2 ml-6 text-2xl font-bold text-foreground">
             {type === "RNB"
               ? `시설명 : (${obj.bdstNm})`
               : `시설명 : (${obj.building.bdstNm})`}
diff --git a/apps/wr/components/ui/modal/chkgd/pbnPrfExcelModal/pbnPrfExcelModal.tsx b/apps/wr/components/ui/modal/chkgd/pbnPrfExcelModal/pbnPrfExcelModal.tsx
index 0857340e3..d1d4fcd59 100644
--- a/apps/wr/components/ui/modal/chkgd/pbnPrfExcelModal/pbnPrfExcelModal.tsx
+++ b/apps/wr/components/ui/modal/chkgd/pbnPrfExcelModal/pbnPrfExcelModal.tsx
@@ -102,7 +102,7 @@ export default function PbnPrfExcelModal({
                 저장
               </Button>
             </div>
-            <h3 className="text-2xl font-bold text-gray-900 my-3 ml-7">
+            <h3 className="my-3 ml-7 text-2xl font-bold text-foreground">
               {"점검정보 입력"}
             </h3>
 
diff --git a/apps/wr/components/ui/modal/coMat/constCostFeeTable.tsx b/apps/wr/components/ui/modal/coMat/constCostFeeTable.tsx
index d3f02e278..f1d80a9be 100644
--- a/apps/wr/components/ui/modal/coMat/constCostFeeTable.tsx
+++ b/apps/wr/components/ui/modal/coMat/constCostFeeTable.tsx
@@ -106,7 +106,7 @@ export function ConstCostFeeTable() {
         <hr className="mt-4 mb-4"/>
         <div className="col-span-5 flex items-center justify-between">
           <div className="flex items-center">
-            <Label className="mr-1 text-xl text-gray-600">기준년도</Label>
+            <Label className="mr-1 text-xl text-label">기준년도</Label>
             <SelectBox
               className="h-full w-32 text-2xl"
               label=""
@@ -117,7 +117,7 @@ export function ConstCostFeeTable() {
               }
             />
           </div>
-          <span className="mr-2 text-xl text-gray-600">단위: 백만원</span>
+          <span className="mr-2 text-xl text-label">단위: 백만원</span>
         </div>
         <UiTable
           headName={""}
@@ -128,7 +128,7 @@ export function ConstCostFeeTable() {
           cellClick={undefined}
           onPageChange={() => { }}
         />
-        <div className="px-3 text-lg text-gray-700 leading-relaxed">
+        <div className="px-3 text-lg leading-relaxed text-foreground">
           시설용량 구간내 공사비는 직선보간법에 의하여 산출
         </div>
       </div>
diff --git a/apps/wr/components/ui/modal/coMat/rateFeeModal.tsx b/apps/wr/components/ui/modal/coMat/rateFeeModal.tsx
index 5439d489c..40bac420c 100644
--- a/apps/wr/components/ui/modal/coMat/rateFeeModal.tsx
+++ b/apps/wr/components/ui/modal/coMat/rateFeeModal.tsx
@@ -104,14 +104,14 @@ export function RateFeeTableModal() {
 
   return (
     <ListDiv className="min-w-[460px] h-[50vh]  overflow-auto">
-      <div className="sticky top-0 z-10 grid grid-cols-6 gap-4 p-4 bg-white">
+      <div className="sticky top-0 z-10 grid grid-cols-6 gap-4 bg-background p-4">
         <h3 className="col-span-6 text-2xl font-medium text-label">
           시설부대경비 요율(%)
         </h3>
-        <hr className="col-span-6 border-gray-300" />
+        <hr className="col-span-6 border-border" />
 
         <div className="col-span-5 flex items-center">
-          <Label className="mr-1 text-xl text-gray-600">기준년도</Label>
+          <Label className="mr-1 text-xl text-label">기준년도</Label>
           <SelectBox
             className="h-full w-32 text-2xl"
             label=""
@@ -135,7 +135,7 @@ export function RateFeeTableModal() {
             cellClick={undefined}
           />
         </div>
-        <div className="col-span-6 px-3 text-lg text-gray-700 leading-relaxed">
+        <div className="col-span-6 px-3 text-lg leading-relaxed text-foreground">
           출처 : 하수도분야 보조금 편성 및 실무요령
           <br />
           시설부대경비 및 감리비 요율적용시 공사비가 요율표의 중간에 있을 때는 직선보간법에 의하여 산출
diff --git a/apps/wr/components/ui/modal/coMat/ruseCaseMng/ruseCaseMngExcelModal.tsx b/apps/wr/components/ui/modal/coMat/ruseCaseMng/ruseCaseMngExcelModal.tsx
index 8f0445cd6..e85234c03 100644
--- a/apps/wr/components/ui/modal/coMat/ruseCaseMng/ruseCaseMngExcelModal.tsx
+++ b/apps/wr/components/ui/modal/coMat/ruseCaseMng/ruseCaseMngExcelModal.tsx
@@ -185,7 +185,7 @@ export default function RuseCaseMngExcel({setIsExcelOpen}:{setIsExcelOpen: (isOp
               <Title title={"물재이용 사례 등록"}></Title>
             </div>
             <div className="flex justify-between">
-              <h3 className="text-2xl font-bold text-gray-900 mt-1 ml-7">
+              <h3 className="mt-1 ml-7 text-2xl font-bold text-foreground">
                 {"물재이용 사례 파일"}
               </h3>
               <Button className="" type="submit" size={"sm"}>
diff --git a/apps/wr/components/ui/modal/coReg/coRegExcel/coRegExcelModal.tsx b/apps/wr/components/ui/modal/coReg/coRegExcel/coRegExcelModal.tsx
index c1bfda0ff..b64ee49a0 100644
--- a/apps/wr/components/ui/modal/coReg/coRegExcel/coRegExcelModal.tsx
+++ b/apps/wr/components/ui/modal/coReg/coRegExcel/coRegExcelModal.tsx
@@ -108,7 +108,7 @@ export default function CoRegExcel({
               <Title title={"잠재수요처 등록"}></Title>
             </div>
             <div className="flex justify-between">
-              <h3 className="text-2xl font-bold text-gray-900 mt-1 ml-7">
+              <h3 className="mt-1 ml-7 text-2xl font-bold text-foreground">
                 {"잠재수요처 파일"}
               </h3>
               <div className="flex gap-2">
diff --git a/apps/wr/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal.tsx b/apps/wr/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal.tsx
index 236797711..b3c5dcfcf 100644
--- a/apps/wr/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal.tsx
+++ b/apps/wr/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal.tsx
@@ -177,7 +177,7 @@ export function BdstReg<T extends MoType>({
         >
           {" "}
         </SelectBox>
-        <Label className="w-full text-xl text-gray-600 text-right">
+        <Label className="w-full text-right text-xl text-label">
           시설명
         </Label>
         <Input
@@ -196,11 +196,11 @@ export function BdstReg<T extends MoType>({
           조회
         </Button>
       </div>
-      <div className="border-t border-gray-300 my-4"></div>
+      <div className="my-4 border-t border-border"></div>
       <div className="h-auto">
         <h1 className="text-2xl font-medium text-label pl-8">
           건축물 목록
-          <span className="!text-2xl text-base  text-blue-500">
+          <span className="text-base !text-2xl text-primary">
             (유의 사항: 신규등록하려는 건축물이 목록에 없을 경우 하단 건축물
             정보에 추가하여 주시기 바랍니다.)
           </span>
@@ -221,7 +221,7 @@ export function BdstReg<T extends MoType>({
             ></UiTable>
           </div>
         </ScrollArea>
-        <div className="border-t border-gray-300 my-4"></div>
+        <div className="my-4 border-t border-border"></div>
         <ScrollArea className="h-[40vh]">
           <div>
             {moType === "RNB" ? (
diff --git a/apps/wr/components/ui/modal/fcltReg/fcOrgwtsRegModal/fcOrgwtsRegModal.tsx b/apps/wr/components/ui/modal/fcltReg/fcOrgwtsRegModal/fcOrgwtsRegModal.tsx
index 3be1806f8..0b5707b6e 100644
--- a/apps/wr/components/ui/modal/fcltReg/fcOrgwtsRegModal/fcOrgwtsRegModal.tsx
+++ b/apps/wr/components/ui/modal/fcltReg/fcOrgwtsRegModal/fcOrgwtsRegModal.tsx
@@ -105,14 +105,14 @@ export default function FcOrgwtsRegModal({
 
   return (
     <div className="flex flex-col h-[80vh]">
-      <div className="shrink-0 p-4 border-b z-10 bg-white">
+      <div className="z-10 shrink-0 border-b border-border bg-background p-4">
         <div className="flex items-center">
           <Title title="취수하수처리장 추가" />
           
           <div className="flex items-center gap-2 mt-8">
 
 
-            <Label className="text-xl text-gray-600">시설명</Label>
+            <Label className="text-xl text-label">시설명</Label>
             <Input
               className="w-48 text-xl"
               type="text"
@@ -144,7 +144,7 @@ export default function FcOrgwtsRegModal({
         {/* 왼쪽 테이블 */}
 
         <div className="w-5/12 min-w-[400px]">
-          <Label className="text-2xl text-gray-600 mb-2 block text-right">
+          <Label className="mb-2 block text-right text-2xl text-label">
             공공하수처리시설 목록
           </Label>
           <RuseMngTable
@@ -170,7 +170,7 @@ export default function FcOrgwtsRegModal({
               }
               setbdstTable(unchecked ?? []);
             }}
-            className="w-8 h-8 text-gray-500 cursor-pointer"
+            className="h-8 w-8 cursor-pointer text-muted-foreground"
           />
           <ArrowLeft
             onClick={() => {
@@ -187,13 +187,13 @@ export default function FcOrgwtsRegModal({
               }
               setRightData(unchecked ?? []);
             }}
-            className="w-8 h-8 text-gray-500 cursor-pointer"
+            className="h-8 w-8 cursor-pointer text-muted-foreground"
           />
         </div>
 
         {/* 오른쪽 테이블 */}
         <div className="w-5/12 min-w-[400px]">
-          <Label className="text-2xl text-gray-600 mb-2 block text-right">
+          <Label className="mb-2 block text-right text-2xl text-label">
             취수하수처리장 목록
           </Label>
           <RuseMngTable
diff --git a/apps/wr/components/ui/modal/fcltReg/pbnstRegModal/pbnstRegModal.tsx b/apps/wr/components/ui/modal/fcltReg/pbnstRegModal/pbnstRegModal.tsx
index fcb6fe392..c1dd95f95 100644
--- a/apps/wr/components/ui/modal/fcltReg/pbnstRegModal/pbnstRegModal.tsx
+++ b/apps/wr/components/ui/modal/fcltReg/pbnstRegModal/pbnstRegModal.tsx
@@ -72,7 +72,7 @@ export function PbnstRegModal({
         하수재이용 시설 신규등록
       </h1>
 
-      <div className="border-t border-gray-300 my-4"></div>
+      <div className="my-4 border-t border-border"></div>
 
       <Tabs defaultValue="mng" onValueChange={handleTabChange}>
         <div className="flex justify-between items-center">
diff --git a/apps/wr/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable.tsx b/apps/wr/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable.tsx
index 2e056a401..12e0061a3 100644
--- a/apps/wr/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable.tsx
+++ b/apps/wr/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable.tsx
@@ -60,7 +60,7 @@ const RuseMngTable = React.forwardRef<any, RuseMngTableProps>(
                 {headList.map((head) => (
                   <TableHead
                     key={"table-head-row " + head.id}
-                    className={`border border-gray-600 px-2 py-1 `}
+                    className={`border border-border px-2 py-1 `}
                   >
                     {head.title}
                   </TableHead>
diff --git a/apps/wr/components/ui/table/pbnstReg/ruseMngTableForm/ruseMngTableForm.tsx b/apps/wr/components/ui/table/pbnstReg/ruseMngTableForm/ruseMngTableForm.tsx
index 298c2bf5e..380cb9c88 100644
--- a/apps/wr/components/ui/table/pbnstReg/ruseMngTableForm/ruseMngTableForm.tsx
+++ b/apps/wr/components/ui/table/pbnstReg/ruseMngTableForm/ruseMngTableForm.tsx
@@ -84,7 +84,7 @@ const RuseMngTableForm = React.forwardRef<any, RuseMngTableProps>(
                 {headList.map((head) => (
                   <TableHead
                     key={"table-head-row " + head.id}
-                    className={`border border-gray-600 px-2 py-1 `}
+                    className={`border border-border px-2 py-1 `}
                   >
                     {head.title}
                   </TableHead>
@@ -118,7 +118,7 @@ const RuseMngTableForm = React.forwardRef<any, RuseMngTableProps>(
                         <FormUi label="">
                           {head.edit === true ? (
                             <Input
-                              className={`${head.type === "number" ? "text-right" : "text-center"} text-gray-600`}
+                              className={`${head.type === "number" ? "text-right" : "text-center"} text-foreground`}
                               type="text"
                               onChange={(txt) => {
                                 if (head.type === "number") {
@@ -186,7 +186,7 @@ const RuseMngTableForm = React.forwardRef<any, RuseMngTableProps>(
                               value={
                                 field.value? moment(field.value, "YYYYMMDD").format( "YYYY-MM-DD"): ""
                               }
-                              className={"w-full text-gray-600"}
+                              className={"w-full text-foreground"}
                               readOnly={readonly||head.readonly ? true : false}
                             />
                           ) : head.type === "checkbox" ? (
@@ -202,7 +202,7 @@ const RuseMngTableForm = React.forwardRef<any, RuseMngTableProps>(
                               }}
                             ></Checkbox>
                           ) : (
-                            <span className="text-black">
+                            <span className="text-foreground">
                               {head.type === "number"
                                 ? formatCommaNumber(field.value)
                                 : field.value || ""}
diff --git a/apps/wr/components/ui/toast/toastFromUi.tsx b/apps/wr/components/ui/toast/toastFromUi.tsx
index 5886c2e0b..4590d7b38 100644
--- a/apps/wr/components/ui/toast/toastFromUi.tsx
+++ b/apps/wr/components/ui/toast/toastFromUi.tsx
@@ -16,7 +16,7 @@ export function ToastFormUi({ body, title, url, buttonName }: toastFormType) {
     <div
       className={`${
         t.visible ? "animate-enter" : "animate-leave"
-      }  w-4/12 h-40 bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
+      }  h-40 w-4/12 pointer-events-auto flex rounded-lg border border-border bg-popover text-popover-foreground shadow-lg`}
     >
       <div className="w-full flex-1 py-10">
         <div className="flex items-start">