diff --git a/src/main/webapp/WEB-INF/jsp/include/top.jsp b/src/main/webapp/WEB-INF/jsp/include/top.jsp
index 5b273977..99c88adc 100644
--- a/src/main/webapp/WEB-INF/jsp/include/top.jsp
+++ b/src/main/webapp/WEB-INF/jsp/include/top.jsp
@@ -1,7 +1,7 @@
 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
 <%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
 <!-- Navbar -->
-<nav class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
+<nav class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center"
      id="layout-navbar" style="min-width:1500px;flex-wrap:nowrap;margin-top:0px;height:4.5rem"
 >
   <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
@@ -33,7 +33,8 @@
       </button>
     </div>
     <div class="me-1" style="min-width: max-content;">
-      <div class="form-check-inline custom-option custom-option-basic me-1" style="background-color: #d9dee3">
+      <div class="form-check-inline custom-option custom-option-basic me-1" 
+      style="background-color: #d9dee3;border:black solid 1px">
         <label for="securityMode--top" class="form-check-label custom-option-content d-flex justify-content-center">
           <input type="checkbox" id="securityMode--top" name="securityMode" 
           class="form-check-input me-1 align-self-center" value="Y" />
@@ -42,7 +43,8 @@
           </span>
         </label>
       </div>
-      <div class="form-check-inline custom-option custom-option-basic me-1" style="background-color: #d9dee3">
+      <div class="form-check-inline custom-option custom-option-basic me-1" 
+      style="background-color: #d9dee3;border:black solid 1px">
         <label for="photoMask--top" class="form-check-label custom-option-content d-flex justify-content-center">
           <input type="checkbox" id="photoMask--top" name="photoMask" 
           class="form-check-input me-1 align-self-center" value="Y" checked />
@@ -90,8 +92,8 @@
             <img src="<c:url value="/resources/image/user-circle-solid-24.svg"/>" alt 
             class="w-px-40 h-auto rounded-circle" />
             <div class="d-flex" style="flex-flow:column">
-          		<span class="fw-semibold">${currentUser.name}</span>
-            	<small class="text-muted">${currentUser.account}</small>
+          		<span class="fw-semibold" style="color:black">${currentUser.name}</span>
+            	<small style="color:black">${currentUser.account}</small>
             </div>
           </div>
         </a>
diff --git a/src/main/webapp/WEB-INF/jsp/index.jsp b/src/main/webapp/WEB-INF/jsp/index.jsp
index 0bbcea38..13e8aa9e 100644
--- a/src/main/webapp/WEB-INF/jsp/index.jsp
+++ b/src/main/webapp/WEB-INF/jsp/index.jsp
@@ -193,12 +193,15 @@
 		    } else {
 		    	$("#layout-navbar input[name='taskSeCd']").eq(0).prop("checked", true);
 		    }
-   			
-			//좌측상단제목
+
+			//좌측상단제목, 최상단 배경색
 			var checkedId = $("#layout-navbar input[name='taskSeCd']:checked")[0].id;
 			var checkedText = $("label[for='"+checkedId+"']").text();
 			$("#home").html("과태료통합관리시스템<br/>("+checkedText+")");
-		    	
+			
+			var taskTheme = "task-theme-" + $("#layout-navbar input[name='taskSeCd']:checked").val().toLowerCase();
+			$("#layout-navbar").addClass(taskTheme);
+			
 			//대시보드 로드
 		    ${dashboardScript}
     	}
@@ -306,6 +309,6 @@
             });
         });
     </script>
-    
+
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/webapp/resources/3rd-party/sneat/css/docs.css b/src/main/webapp/resources/3rd-party/sneat/css/docs.css
index b21e83ce..75d4ee06 100644
--- a/src/main/webapp/resources/3rd-party/sneat/css/docs.css
+++ b/src/main/webapp/resources/3rd-party/sneat/css/docs.css
@@ -1169,10 +1169,6 @@ li.ui-timepicker-selected, .ui-timepicker-list .ui-timepicker-selected:hover {
     background-color: #696cff !important
 }
 
-.bg-navbar-theme {
-    background-color: #fff !important;
-    color: #697a8d
-}
 
 .bg-navbar-theme .navbar-brand, .bg-navbar-theme .navbar-brand a {
     color: #566a7f
@@ -1232,10 +1228,7 @@ li.ui-timepicker-selected, .ui-timepicker-list .ui-timepicker-selected:hover {
     border-color: rgba(86, 106, 127, .075)
 }
 
-.layout-navbar {
-    background-color: rgba(255, 255, 255, .95) !important;
-    backdrop-filter: saturate(200%) blur(6px)
-}
+
 
 .layout-horizontal .layout-navbar {
     box-shadow: 0 1px 0 #d9dee3
diff --git a/src/main/webapp/resources/3rd-party/sneat/css/theme-default.css b/src/main/webapp/resources/3rd-party/sneat/css/theme-default.css
index 1db65483..fc8b9e56 100644
--- a/src/main/webapp/resources/3rd-party/sneat/css/theme-default.css
+++ b/src/main/webapp/resources/3rd-party/sneat/css/theme-default.css
@@ -1246,11 +1246,6 @@ li.ui-timepicker-selected,
   border-color: rgba(86, 106, 127, 0.075);
 }
 
-.layout-navbar {
-  background-color: rgba(255, 255, 255, 0.95) !important;
-  -webkit-backdrop-filter: saturate(200%) blur(6px);
-          backdrop-filter: saturate(200%) blur(6px);
-}
 
 .layout-horizontal .layout-navbar {
   box-shadow: 0 1px 0 #d9dee3;
diff --git a/src/main/webapp/resources/css/fims/framework/common/xit-core-extend.css b/src/main/webapp/resources/css/fims/framework/common/xit-core-extend.css
index 72a1e0a7..25c8cdf3 100644
--- a/src/main/webapp/resources/css/fims/framework/common/xit-core-extend.css
+++ b/src/main/webapp/resources/css/fims/framework/common/xit-core-extend.css
@@ -18,7 +18,12 @@ select {
 	--pdf-black : rgb(0,0,0);
 }
 
-
+.task-theme-pvs { background : rgba(66,76,157,0.4) !important; }
+.task-theme-bpv { background : rgba(117,123,74,0.4) !important; }
+.task-theme-eca { background : rgba(173,215,115,0.4) !important; }
+.task-theme-dpv { background : rgba(238,199,177,0.4) !important; }
+.task-theme-pes { background : rgba(239,122,115,0.4) !important }
+.task-theme-dvs { background : rgba(162,225,221,0.4) !important }
 
 .doc-example .doc-example-content::before {
 	font-size : 15px!important;