diff --git a/apps/fo/app/pages/(with-layout)/dashboard/facilityInfo/page.tsx b/apps/fo/app/pages/(with-layout)/dashboard/facilityInfo/page.tsx
index e65fe3cc8..d4cfb7bab 100644
--- a/apps/fo/app/pages/(with-layout)/dashboard/facilityInfo/page.tsx
+++ b/apps/fo/app/pages/(with-layout)/dashboard/facilityInfo/page.tsx
@@ -226,7 +226,7 @@ export default function ProcessFacilitySearch({searchYear = '', fcltyList = []}:
         <LoadingOverlay isLoading={isLoadingPlanFclty} />
         <div className="grid grid-cols-12 gap-1">
           <div className="col-span-5">
-            <Table variant="secondary">
+            <Table variant="default">
               <TableHeader>
                 {upChangeRePlanFclty}
               </TableHeader>
@@ -239,7 +239,7 @@ export default function ProcessFacilitySearch({searchYear = '', fcltyList = []}:
                       :((index === 6 || index === 7 || index === 8) && (head.id === 'now' || head.id === 'stepOne' || head.id === 'stepThree' || head.id === 'stepFour'))?
                       null
                       :((index ===  5) && (head.id === 'provisionalApproval' || head.id === 'stepTwo'))?
-                      <TableCell colSpan={3} className="text-center border border-[var(--border)] bg-[rgb(234,243,251)] text-[rgb(100,119,132)]" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>
+                      <TableCell colSpan={3} className="text-center border border-[var(--border)] bg-[rgb(141,141,148)] !text-[rgb(255,255,255)]" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>
                       :((index ===  5) && (head.id === 'now' || head.id === 'stepOne' || head.id === 'stepThree'|| head.id === 'stepFour'))?
                       null
                       :(index < 5 || index > 5)&& (index!= 4) && (head.id ==='provisionalApproval'||head.id ==='now'||head.id ==='stepOne'||head.id ==='stepTwo'||head.id ==='stepThree'||head.id ==='stepFour')
@@ -250,7 +250,7 @@ export default function ProcessFacilitySearch({searchYear = '', fcltyList = []}:
                       ?null
                       :(head.id === 'item' && index != 5)?
                       <TableCell className="text-center text-[rgb(100,119,132)]" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>
-                      :<TableCell className="text-center border border-[var(--border)] bg-[rgb(234,243,251)] text-[rgb(100,119,132)]" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>
+                      :<TableCell className="text-center border border-[var(--border)] bg-[rgb(141,141,148)] !text-[rgb(255,255,255)]" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>
                     ))}
                   </TableRow>
                 ))}
@@ -260,7 +260,7 @@ export default function ProcessFacilitySearch({searchYear = '', fcltyList = []}:
           <div className="col-span-7 h-[600px] overflow-x-auto">
             <div className="w-[200%]">
               <LoadingOverlay isLoading={isLoadingOperationStatus} />
-              <Table variant="secondary">
+              <Table variant="default">
                 <TableHeader>
                   {upChangeHeadListOperationStatus}
                 </TableHeader>
diff --git a/apps/fo/app/pages/(with-layout)/dashboardMain/page.tsx b/apps/fo/app/pages/(with-layout)/dashboardMain/page.tsx
index 67e704570..05d906500 100644
--- a/apps/fo/app/pages/(with-layout)/dashboardMain/page.tsx
+++ b/apps/fo/app/pages/(with-layout)/dashboardMain/page.tsx
@@ -1,5 +1,5 @@
 /**
- * 대시보드 - 표로보기 상단구역 페에지
+ * 대시보드 - 표로보기 상단구역 페이지
  * 
  * - 대시보드 - 표로보기의 3개의 탭 상단에 조회년도, 행정정보, 시설명의 구역을 컴포넌트
  */
diff --git a/apps/fo/src/app/styles/components-red.css b/apps/fo/src/app/styles/components-red.css
index cadffac52..c78e23183 100644
--- a/apps/fo/src/app/styles/components-red.css
+++ b/apps/fo/src/app/styles/components-red.css
@@ -15,12 +15,12 @@
   }
 
   [data-theme="red"] {
-    .card-border {
+    /* .card-border {
       @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
     }
     .card-header {
       @apply border-b-[#3f4042];
-    }
+    } */
   }
 
   input[type="file"] {
diff --git a/apps/wr/src/app/styles/components-black.css b/apps/wr/src/app/styles/components-black.css
index fd651fe6c..d337b1ba1 100644
--- a/apps/wr/src/app/styles/components-black.css
+++ b/apps/wr/src/app/styles/components-black.css
@@ -15,6 +15,52 @@
   }
 
   [data-theme="black"] {
+    .card {
+        color: #fff;
+        background-color: #0a0a0a !important;
+    }
+    form {
+        color: rgb(255 255 255);
+    }
+    label {
+        color: rgb(241, 241, 241);
+    }
+    input {
+        height: 3.2rem;
+        background-color: #1a1a1a;
+        border: 1px solid #262626;
+        border-radius: 4px;
+    }
+    input.text-gray-600 {
+        color: #f1f1f1;
+    }
+    button {
+        color: #171717;
+    }
+    button[role="combobox"] {
+        color: #f1f1f1;
+        background-color: rgb(26, 26, 26);
+    }
+    div [role='tablist'] {
+        border: unset;
+        gap: 4px;
+    }
+    .tabs-trigger[data-state="inactive"] {
+        color: #a4b7bf;
+        background: #55595d;
+    }
+    .tabs-trigger[data-state="inactive"]:hover {
+        color: #6bbaff;
+        background: #4c4f52;
+    }
+    .card-border {
+        box-shadow: 0 0 10px -1px #0000000f;
+        border: 1px solid #393939;
+    }
+    a[aria-current="page"] {
+        background-color: rgb(32, 148, 250);
+        color: #000;
+    }
     .card-border {
       @apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
     }
@@ -77,6 +123,13 @@
     .gis-layer-toggle:hover {
       background: #1a1c20;
     }
+
+    .table-ui.secondary th {
+        background-color : rgb(98, 104, 109) !important;
+    }
+    .table-ui.secondary tr {
+        background-color : rgb(84, 85, 86) !important;
+    }
   }
 
   input[type="file"] {
diff --git a/packages/common/business_components/src/ui/tab/index.tsx b/packages/common/business_components/src/ui/tab/index.tsx
index 273a4b907..2c69f3f7d 100644
--- a/packages/common/business_components/src/ui/tab/index.tsx
+++ b/packages/common/business_components/src/ui/tab/index.tsx
@@ -30,7 +30,7 @@ const UITab = React.forwardRef<
           <TabsTrigger 
             key={tab.value}
             value={tab.value}
-            className="py-2 px-4 text-sm font-medium border-b-2 focus:outline-none data-[state=active]:border-blue-500 data-[state=active]:text-blue-600 data-[state=inactive]:border-transparent data-[state=inactive]:text-gray-500 hover:text-gray-700 hover:border-gray-300"
+            className="py-2 px-4 text-sm font-medium border-b-2 focus:outline-none data-[state=active]:border-primary data-[state=active]:text-blue-600 data-[state=inactive]:border-transparent data-[state=inactive]:text-gray-500 hover:text-gray-700 hover:border-gray-300"
           >
             {tab.label}
           </TabsTrigger>
diff --git a/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx b/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx
index b3d3fdc40..3ad4c8e23 100644
--- a/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx
+++ b/packages/common/business_components/src/ui/table/HeadMakeColSpan.tsx
@@ -29,7 +29,7 @@ const HeadMakeColSpan = ({ upHeadList }: { upHeadList: TableUpperProps[] }) => {
               colSpan={head.colSpan || 1} 
               rowSpan={head.rowSpan || 1} 
               style={{ whiteSpace: 'pre-line' }} 
-              className="bg-gray-50"
+              className=""
             >
               {head.title}
             </TableHead>  
diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx
index ed05a7f19..15aef7fa9 100644
--- a/packages/common/business_components/src/ui/table/index.tsx
+++ b/packages/common/business_components/src/ui/table/index.tsx
@@ -152,7 +152,7 @@ export function UiTable<T extends object = Record<string, unknown>>({
         <></>
       )}
       <div className={`card !p-0r !m-[1.2rem] ${className}`}>
-        <Table variant="secondary" className={widthFixed ? "table-fixed" : ""}>
+        <Table variant="default" className={widthFixed ? "table-fixed" : ""}>
           {widthFixed ?
             <colgroup>
               {leafCols.map(col => (
diff --git a/packages/common/components/src/ui/tabs/tabs.css b/packages/common/components/src/ui/tabs/tabs.css
index b1227b0ce..bb097be0e 100644
--- a/packages/common/components/src/ui/tabs/tabs.css
+++ b/packages/common/components/src/ui/tabs/tabs.css
@@ -22,4 +22,6 @@
   .tabs[data-variant="outline"] .tabs-trigger {
     @apply relative rounded-none rounded-t-sm border-border bg-background text-muted-foreground after:absolute after:bottom-0 after:left-0 after:h-[0.1rem] after:w-full after:bg-border after:content-[''] data-[state=active]:border data-[state=active]:border-b-0 data-[state=active]:border-border data-[state=active]:text-foreground data-[state=active]:after:bg-transparent;
   }
+
+
 }