diff --git a/src/main/resources/static/css/common.css b/src/main/resources/static/css/common.css
index 2c92f5c..ed88a99 100644
--- a/src/main/resources/static/css/common.css
+++ b/src/main/resources/static/css/common.css
@@ -43,7 +43,7 @@ html [lang] {
 }
 
 /* input element styles */
-input:not([type='radio'], [type='checkbox']), select, textarea {
+input:not([type='radio'], [type='checkbox'], [type='button']), select, textarea {
     color: var(--md-sys-color-on-surface);
     vertical-align: middle;
     box-sizing: border-box;
@@ -55,8 +55,8 @@ input:not([type='radio'], [type='checkbox']), select, textarea {
     margin: 2px 0;
 }
 
-input:not([type='radio'], [type='checkbox']):hover, select:hover, textarea:hover,
-input:not([type='radio'], [type='checkbox']):focus, select:focus, textarea:focus {
+input:not([type='radio'], [type='checkbox'], [type='button']):hover, select:hover, textarea:hover,
+input:not([type='radio'], [type='checkbox'], [type='button']):focus, select:focus, textarea:focus {
     border: 1px solid var(--md-sys-color-outline-variant);
 }
 
diff --git a/src/main/resources/static/css/common.pub.css b/src/main/resources/static/css/common.pub.css
index 6cad56e..67e2ef1 100644
--- a/src/main/resources/static/css/common.pub.css
+++ b/src/main/resources/static/css/common.pub.css
@@ -1,5 +1,15 @@
 @charset "utf-8";
 
+.icon-search {
+    display: inline-block;
+    height: 27px;
+    width: 27px;
+    background-image: var(--njs-icon-search);
+    background-size: 19px;
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
+
 /* search-panel */
 .view_context__ form:not(.select_input_container__) label {
     white-space: nowrap;
diff --git a/src/main/resources/static/html/com/app/sample/type0201.html b/src/main/resources/static/html/com/app/sample/type0201.html
index edbb2f9..0320213 100644
--- a/src/main/resources/static/html/com/app/sample/type0201.html
+++ b/src/main/resources/static/html/com/app/sample/type0201.html
@@ -73,8 +73,8 @@
             <tr>
                 <td><input id="about" type="text"></td>
                 <td colspan="2">
-                    <input id="deptNm" type="text" data-validate='[["required"]]' style="width: 75%;" readonly="readonly">
-                    <button id="btnDept" data-opts='{ "size": "middle" }'>Q</button>
+                    <input id="deptNm" type="text" data-validate='[["required"]]' style="max-width: 75%;" readonly="readonly">
+                    <button id="btnDeptCd" data-opts='{ "type": "outlined" }' class="icon-search"></button>
                 </td>
                 <td colspan="2"><input id="greeting" type="text"></td>
             </tr>
@@ -176,7 +176,7 @@
             inst : "p.grid.master"
         });
     },
-    "e.btnDept.click" : function(e, idx) {
+    "e.btnDeptCd.click" : function(e, idx) {
         e.preventDefault();
 
         cont.selIdx = idx;
diff --git a/src/main/resources/static/html/com/app/sample/type0401.html b/src/main/resources/static/html/com/app/sample/type0401.html
index ee9a2e9..d4e7e69 100644
--- a/src/main/resources/static/html/com/app/sample/type0401.html
+++ b/src/main/resources/static/html/com/app/sample/type0401.html
@@ -64,7 +64,7 @@
                         <span>Department</span>
                         <input id="deptNm" type="text" data-validate='[["required"]]' readonly="readonly" style="width: 70%;">
                     </label>
-                    <button id="btnDeptCd" data-opts='{ "size": "middle" }'>Q</button>
+                    <button id="btnDeptCd" data-opts='{ "type": "outlined" }' class="icon-search"></button>
                 </li>
                 <li>
                     <label>
diff --git a/src/main/resources/static/html/com/app/sample/type0402.html b/src/main/resources/static/html/com/app/sample/type0402.html
index 9c384cb..090749b 100644
--- a/src/main/resources/static/html/com/app/sample/type0402.html
+++ b/src/main/resources/static/html/com/app/sample/type0402.html
@@ -71,7 +71,7 @@
                     <span>Department</span>
                     <input id="deptNm" type="text" data-validate='[["required"]]' readonly="readonly" style="width: 70%;">
                 </label>
-                <button id="btnDeptCd" data-opts='{ "size": "middle" }'>Q</button>
+                <button id="btnDeptCd" data-opts='{ "type": "outlined" }' class="icon-search"></button>
             </li>
             <li>
                 <label>
diff --git a/src/main/resources/static/html/com/app/sample/type0501.html b/src/main/resources/static/html/com/app/sample/type0501.html
index 0a7ed00..c5c4890 100644
--- a/src/main/resources/static/html/com/app/sample/type0501.html
+++ b/src/main/resources/static/html/com/app/sample/type0501.html
@@ -70,7 +70,7 @@
                         <span>Department</span>
                         <input id="deptNm" type="text" data-validate='[["required"]]' readonly="readonly" style="width: 70%;">
                     </label>
-                    <button id="btnDeptCd" data-opts='{ "size": "middle" }'>Q</button>
+                    <button id="btnDeptCd" data-opts='{ "type": "outlined" }' class="icon-search"></button>
                 </li>
                 <li>
                     <label>
diff --git a/src/main/resources/static/js/natural_js/css/natural.ui.css b/src/main/resources/static/js/natural_js/css/natural.ui.css
index 2c14329..b3d1c93 100644
--- a/src/main/resources/static/js/natural_js/css/natural.ui.css
+++ b/src/main/resources/static/js/natural_js/css/natural.ui.css
@@ -314,38 +314,38 @@ a.btn_tertiary_container__, input[type='button'].btn_tertiary_container__, butto
 a.btn_primary__.btn_outlined__, input[type='button'].btn_primary__.btn_outlined__, button.btn_primary__.btn_outlined__ {
     border: 1px solid var(--md-sys-color-primary);
     color: var(--md-sys-color-on-surface);
-    background: none;
+    background-color: transparent;
 }
 a.btn_primary_container__.btn_outlined__, input[type='button'].btn_primary_container__.btn_outlined__, button.btn_primary_container__.btn_outlined__ {
     border: 1px solid var(--md-sys-color-primary-container);
     color: var(--md-sys-color-on-surface);
-    background: none;
+    background-color: transparent;
 }
 a.btn_secondary__.btn_outlined__, input[type='button'].btn_secondary__.btn_outlined__, button.btn_secondary__.btn_outlined__ {
     border: 1px solid var(--md-sys-color-secondary);
     color: var(--md-sys-color-on-surface);
-    background: none;
+    background-color: transparent;
 }
 a.btn_secondary_container__.btn_outlined__, input[type='button'].btn_secondary_container__.btn_outlined__, button.btn_secondary_container__.btn_outlined__ {
     border: 1px solid var(--md-sys-color-secondary-container);
     color: var(--md-sys-color-on-surface);
-    background: none;
+    background-color: transparent;
 }
 a.btn_tertiary__.btn_outlined__, input[type='button'].btn_tertiary__.btn_outlined__, button.btn_tertiary__.btn_outlined__ {
     border: 1px solid var(--md-sys-color-tertiary);
     color: var(--md-sys-color-on-surface);
-    background: none;
+    background-color: transparent;
 }
 a.btn_tertiary_container__.btn_outlined__, input[type='button'].btn_tertiary_container__.btn_outlined__, button.btn_tertiary_container__.btn_outlined__ {
     border: 1px solid var(--md-sys-color-tertiary-container);
     color: var(--md-sys-color-on-surface);
-    background: none;
+    background-color: transparent;
 }
 
 a.btn_elevated__, input[type='button'].btn_elevated__, button.btn_elevated__ {
     border: 1px solid transparent;
     color: var(--md-sys-color-on-surface);
-    background: none;
+    background-color: transparent;
     box-shadow: var(--njs-elevation-s);;
 }
 
@@ -609,7 +609,7 @@ a.btn_elevated__, input[type='button'].btn_elevated__, button.btn_elevated__ {
     height: 22px;
     width: 22px;
     background: var(--njs-icon-search) 50% 50% no-repeat;
-    background-size: 18px;
+    background-size: 14px;
     position: absolute;
     right: 4px;
     margin-top: 1px;
diff --git a/src/main/resources/templates/common/app/file/manager.html b/src/main/resources/templates/common/app/file/manager.html
index 141e59d..52340d2 100644
--- a/src/main/resources/templates/common/app/file/manager.html
+++ b/src/main/resources/templates/common/app/file/manager.html
@@ -51,11 +51,11 @@
 .file_manager__ .delete_file_item__ > span, .file_manager__ .delete_file__ > span {
     display: inline-block;
     text-indent: -1000px;
-    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wIYCDkVrZsQowAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAADZSURBVDjLtZOxDgFBEIa/uIv23sA7aEm8BI03uUJDwRNodBoaCp6AggjRX0NBLSERxTU0u8lmM3PuEiaZbHbn3293Z2bhx1YBVsAQCBRNB9gBVQ1wAt7GpwJo4MRvEmjtCKxPHFBfiF/t5tCMCdDwwG0jvgCxcPvEXygDM+E0zTdAJOUlL2irAVzQvCig5M1T6a2OnYHnt17p5XjOOKOP6BZIrAiKFfEeWCqxkQ85KoDIJHshxO8+pAY8HMHBq4IPSoGWlJO6+RNaH9jyv4BmVnWCHL895B/2AShtccx+lX2aAAAAAElFTkSuQmCC') no-repeat right 4px;
-    background-size: 12px 12px;
+    background: var(--njs-icon-delete) no-repeat right 50%;
+    background-size: 16px 16px;
     height: 20px;
-    width: 12px;
-    margin-left: 10px;
+    width: 16px;
+    margin-left: 6px;
 }
 
 .file_manager__ .desc > ul {