diff --git a/web/css/stdb.css b/web/css/stdb.css
index c1fbe5f..9f24d85 100644
--- a/web/css/stdb.css
+++ b/web/css/stdb.css
@@ -116,6 +116,14 @@ img{
 	background-color: #FFF;
 	border: 1px solid navy;
 }
+.cardSearch{
+	border-radius: 5px;
+	width: auto;
+	height: 40px;
+	margin-top: 5px;
+	background-color: #F0F0F0;
+	border: 1px solid navy;
+}
 .cardAdd{
 	width: auto;
 	background-color:unset;
@@ -194,4 +202,13 @@ img{
 .addStyle{
 	position: fixed;
 
+}
+.buttonSearch{
+	background-color: #263238;
+	color:#000;
+	width: 80px;
+	height: 40px;
+	border-radius: 5px;
+	border: 0px;
+	
 }
\ No newline at end of file
diff --git a/web/js/stdb.js b/web/js/stdb.js
index db35479..790fb49 100644
--- a/web/js/stdb.js
+++ b/web/js/stdb.js
@@ -64,7 +64,7 @@ function getStat(){
 	}
 }
 
-function getUser(){
+function getUser(status){
 	token = sessionStorage.getItem("token")
 	// console.log(token)
 	// console.log('======== 2 ======')
@@ -80,11 +80,29 @@ function getUser(){
 			// console.log(respone)
 			userData = respone
 			organ = '<div>'+respone.organizations[0].name+'</div>'
+
 			document.getElementById("nameOrgan").innerHTML =  organ
 			token = sessionStorage.getItem("token")
+			var searchText = ''
+			if (status === 'search'){
+				console.log("search")
+				dataInstrument = []
+				searchText = '&search='+document.getElementById("searchId").value
+				start = 0
+				$('#modalAll').html('');
+				$('#card').html("");
+				htmlText = '';
+				modalText = '';
+				dataInstrument = [];
+				console.log(' >>  end of search button');
+				console.log(dataInstrument)
+				console.log($('#card').html());
+			}
+			var url = 'http://www.serv.stdb.most.go.th/api/v2/instrument/?organization='+respone.organizations[0].id+searchText;
+			console.log('url = ' + url)
 			$.ajax({
 				type: "GET",
-				url: 'http://www.serv.stdb.most.go.th/api/v2/instrument/?organization='+respone.organizations[0].id,
+				url: url, 
 				headers :{
 					Authorization: 'Bearer '+ token,
 					Accept: 'application/json, text/javascript',
@@ -100,7 +118,7 @@ function getUser(){
 }			
 
 function getDataStat(respone){
-	getUser();
+	getUser('first');
 	// console.log(respone)
 	document.getElementById("like").innerHTML =  '0'
 	document.getElementById("status").innerHTML = '+'+respone.items.recent_update 
@@ -113,17 +131,20 @@ function getData(respone) {
 	// console.log(dataInstrument)	
 	// console.log(respone)	
 	// console.log(respone.results)	
-	dataInstrument = dataInstrument.concat(respone.results)
-	// console.log('****************')	
 	console.log(dataInstrument)	
-	var cardText = ''
+	dataInstrument = dataInstrument.concat(respone.results)
+	console.log('*******ฬฬฬฬฬฬฬฬฬ*********')	
+	console.log(respone.results)	
+	var htmlText = ''
 	var modalText = ''
+
 	for (i=start;i<dataInstrument.length;i++ ){
+		console.log('========='+i+'==========')
 		// console.log(dataInstrument[i].name)
 		htmlText = htmlText+"<div id='"+i.toString()+"'' class='cardStyle' onclick='modalItem("+i.toString()+")'>"
 		+'<h3 style="font-size:26px;margin-left:20px " >'+dataInstrument[i].name+'</h3>'
 		+'<h3 style="color:#9E9E9E;font-size:22px;margin-left:20px " >#'+dataInstrument[i].custom_id+'</h3>'
-		+'<h3 style="color:#9E9E9E;font-size:22px;margin-left:20px " >@'+dataInstrument[i].location+'</h3>'
+		+'<h3 style="color:#9E9E9E;font-size:22px;margin-left:20px " >@'+dataInstrument[i].caretaker+'</h3>'
 		+'</div>';
 
 		if(dataInstrument[i].clips.length === 0){
@@ -198,33 +219,33 @@ function getData(respone) {
 											+'<a style="font-size:18px">Upload</a></div>'
 										+'<input type="file" name="upload" onclick="uploadImage('+i.toString()+')"/>'
 									+'</div>'				
-		}
-		modalText = modalText+'<div id="modal'+i.toString()+'" class="modal" style="max-height: 100%;display: none;">'
-								+'<div class="modal-content cardStyle" >'
-									+imageTag
-										+'<div>'
-											+'<div style="font-size:20px;margin-top:20px">ชื่อครุภัณฑ์วิทยาศาสตร์</div>'
-											+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="name'+i+'" name="name'+i+'"  placeholder="เลขครุภัณฑ์" value="'+dataInstrument[i].name+'"></div>'
-										+'</div>'
-										+'<div>'
-											+'<div style="font-size:20px;margin-top:20px">จุดประสงค์การใช้งาน</div>'
-											+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="note'+i+'" name="note'+i+'"  placeholder="เลขครุภัณฑ์" value="'+dataInstrument[i].note+'"></div>'
-										+'</div>'
-										+'<div>'
-											+'<div style="font-size:20px;margin-top:20px">เลขครุภัณฑ์</div>'
-											+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="id'+i+'" name="id'+i+'"  placeholder="เลขครุภัณฑ์" value="'+dataInstrument[i].custom_id+'"></div>'
-										+'</div>'
-										+'<div>'
-											+'<div style="font-size:20px;margin-top:20px">ผู้ดูแล</div>'
-											+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="cr'+i+'" name="cr'+i+'"  placeholder="เลขครุภัณฑ์" value="'+dataInstrument[i].caretaker+'"></div>'
-										+'</div>'
-										+'<div class="flexCenterSpace" style="margin-top:20px">'
-											+'<input type="button" onclick="updateData('+i+')" class="buttonUpdate" value="Update">'
-											+'<input type="button" onclick="deleteData('+i+')" class="buttonDelete "value="Delete">'
-											+'<input type="button" onclick="backData('+i+')" class="buttonBack" value="Back">'
+			}
+			modalText = modalText+'<div id="modal'+i.toString()+'" class="modal" style="max-height: 100%;display: none;padding-top:10px;">'
+									+'<div class="modal-content cardStyle" >'
+										+imageTag
+											+'<div>'
+												+'<div style="font-size:20px;margin-top:20px">ชื่อครุภัณฑ์วิทยาศาสตร์</div>'
+												+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="name'+i+'" name="name'+i+'"  placeholder="เลขครุภัณฑ์" value="'+dataInstrument[i].name+'"></div>'
+											+'</div>'
+											+'<div>'
+												+'<div style="font-size:20px;margin-top:20px">จุดประสงค์การใช้งาน</div>'
+												+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="note'+i+'" name="note'+i+'"  placeholder="เลขครุภัณฑ์" value="'+dataInstrument[i].note+'"></div>'
+											+'</div>'
+											+'<div>'
+												+'<div style="font-size:20px;margin-top:20px">เลขครุภัณฑ์</div>'
+												+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="id'+i+'" name="id'+i+'"  placeholder="เลขครุภัณฑ์" value="'+dataInstrument[i].custom_id+'"></div>'
+											+'</div>'
+											+'<div>'
+												+'<div style="font-size:20px;margin-top:20px">ผู้ดูแล</div>'
+												+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="cr'+i+'" name="cr'+i+'"  placeholder="เลขครุภัณฑ์" value="'+dataInstrument[i].caretaker+'"></div>'
+											+'</div>'
+											+'<div class="flexCenterSpace" style="margin-top:20px">'
+												+'<input type="button" onclick="updateData('+i+')" class="buttonUpdate" value="Update">'
+												+'<input type="button" onclick="deleteData('+i+')" class="buttonDelete "value="Delete">'
+												+'<input type="button" onclick="backData('+i+')" class="buttonBack" value="Back">'
+											+'</div>'
 										+'</div>'
-									+'</div>'
-							+'</div>';
+								+'</div>';
 	}
 	if(respone.next != null){
 		moreText = "<div class='cardStyle flexCenter' style='margin-bottom:10px;height:60px;background-color: #E0E0E0;' onClick='getNextUrl()'>"
@@ -234,9 +255,10 @@ function getData(respone) {
 		document.getElementById("more").innerHTML =  moreText;
 	} 
 	start = dataInstrument.length
-	// console.log(start)
+
 	document.getElementById("modalAll").innerHTML =  document.getElementById("modalAll").innerHTML+modalText
 	document.getElementById("card").innerHTML =  document.getElementById("card").innerHTML+htmlText
+
 }
 
 function getNextUrl(){
@@ -264,7 +286,9 @@ function modalItem(idCard){
 	window.onclick = function(event) {
 			if (event.target == modal) {
 					modal.style.display = "none";
-					removeImage(idCard)
+					if(idCard != 'search'){
+						removeImage(idCard)
+					}
 					dataUri = []
 			}
 	}		
@@ -315,11 +339,17 @@ function addData(){
 
 	data = {
 		'name':document.getElementById("nameI").value,
-		'note':document.getElementById("noteI").value,
-		'caretaker':document.getElementById("idI").value,
-		'instrument_id':document.getElementById("CrI").value,
 		'organization': userData.organizations[0].id,
 	}
+	if(document.getElementById("noteI").value != ''){
+		data.caretaker = document.getElementById("idI").value
+	}
+	if(document.getElementById("noteI").value != ''){
+		data.instrument_id = document.getElementById("CrI").value
+	}
+	if(document.getElementById("noteI").value != ''){
+		data.note = document.getElementById("noteI").value
+	}
 	if(dataUri.length != 0){
 		data.clips = dataUri
 	}
diff --git a/web/login.html b/web/login.html
index e54b9ea..2637366 100644
--- a/web/login.html
+++ b/web/login.html
@@ -21,124 +21,140 @@
 </style>
 </head>
 <body>
-	<div>
-		<ul class="titleIn">
-			<center>
-				<li><a href="javascript:history.go(0)" class="active">Instrument</a></li>
-			  <li style="float:right;font-size:18px"><a onClick="LogoutPage()">Logout</a></li>
-			  <li style="float:right;font-size:18px"><a onClick="modalItem('add')">Add Instrument</a></li>
-			  <li style="float:right;"><a class="material-icons" onclick="searchItem()" style="color:#FFF;">search</a></li>
-			</center>
-		</ul>
-	</div>
-	<div class="boxShow">
-		<div id="nameOrgan" class="flexCenter" style="margin-top:120px;font-size:40px;color:#F0F0F0"></div>
-	</div>
-	<div class="boxShow"> 
-	<!--  like -->	
-		<div style="margin-top:20px;">
-			<li class="cardData" >
+
+		<div>
+			<ul class="titleIn">
+				<center>
+					<li><a href="javascript:history.go(0)" class="active">Instrument</a></li>
+				  <li style="float:right;font-size:18px"><a onClick="LogoutPage()">Logout</a></li>
+				  <li style="float:right;font-size:18px"><a onClick="modalItem('add')">Add Instrument</a></li>
+				  <li style="float:right;"><a class="material-icons" onclick="modalItem('search')" style="color:#FFF;">search</a></li>
+				</center>
+			</ul>
+		</div>
+		<div class="boxShow">
+			<div id="nameOrgan" class="flexCenter" style="margin-top:120px;font-size:40px;color:#F0F0F0"></div>
+		</div>
+		<div class="boxShow">
+		<!--  like -->	
+			<div style="margin-top:20px;">
+				<li class="cardData" >
+					<div>
+						<i class="medium material-icons " style="">thumb_up</i>
+						<div class="flexCenter" style="font-size:18px;" id='like'></div>
+					</div>
+					
+				</li>
+			<!--  status -->
+				<li class="cardData" >
+					<div>
+						<i class="medium material-icons " style="color:#4CAF50">trending_up</i>
+						<div class="flexCenter" style="font-size:18px;" id='status'></div>	
+					</div>
+					
+				</li>
+			<!--  accountActive -->	
+				<li class="cardData" >
+					<div>
+						<i class="medium material-icons " style="">people</i>
+						<div class="flexCenter" style="font-size:18px;" id='accountActive'></div>
+					</div>
+					
+				</li>
+			<!--  equipment -->		
+				<li class="cardData" style="width: 300px;display:block;" >
+					<center><h1 style="font-size:18px;margin-top:10px;margin-bottom:15px">อุปกรณ์</h1></center>
+					<div class="flexCenterSpace">
+						<i class="medium material-icons ">featured_play_list</i>
+						<i class="medium material-icons ">photo</i>
+					</div>
+					<div class="flexCenterSpace" style="margin-top:-3px;">
+						<i style='margin-right:15px'>ทั้งหมด</i>
+						<i style='margin-right:10px'>มีรูป</i>
+					</div>
+					<div class="flexCenterSpace" style="margin-top:-5px;">
+						<i id="numAll" style='margin-right:15px'>0</i>
+						<i id="numPhoto" style='margin-right:10px'>0</i>
+					</div>
+					
+				</li>
+			</div>
+		</div>
+		
+		<div id="card" class="container" style="max-width:800px"></div>
+					
+		<div id="modalAll" ></div>
+
+		<div id="more" class="container" style="max-width:800px;height:80px">	</div >
+		
+		<div id="modaladd" class="modal" style="max-height: 100%;display: none;padding-top:10px;">
+			<div class="modal-content cardStyle" >
+				<div class="flexCenter">
+					<div class="flexCenter bgImage">
+						<div class="flexCenter">
+							<img id="myImg0add" src="" alt=""/>
+							<div class="bgImage flexCenter"><h2>ไม่มีรูปภาพ</h2></div>
+						</div>
+						<div class="column bgMiniImage" style="margin-left:10px">
+							<img id="myImg1add" class="miniImage" src="" alt=""/>
+							<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>
+							<img id="myImg2add" class="miniImage" src="" alt=""/>
+							<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>
+							<img id="myImg3add" class="miniImage" style="margin-top:5px" src="" alt=""/>
+							<h6 class="miniImage flexCenter" style="margin-top:5px">ไม่มีรูปภาพ</h6>
+						</div>
+					</div>
+					</div>
+					<div class="flexCenter" style="margin-top:5px;">
+						<div class="upload flexCenter">
+							<a style="font-size:18px">Upload</a></div>
+						<input type="file" name="upload" onclick="uploadImage('add')"/>'
+					</div>'
 				<div>
-					<i class="medium material-icons " style="">thumb_up</i>
-					<div class="flexCenter" style="font-size:18px;" id='like'></div>
+					<div style="font-size:20px;margin-top:10px">ชื่อครุภัณฑ์วิทยาศาสตร์</div>
+					<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="nameI" name="nameI" value="" placeholder="ชื่อครุภัณฑ์วิทยาศาสตร์"></div>
 				</div>
-				
-			</li>
-		<!--  status -->
-			<li class="cardData" >
 				<div>
-					<i class="medium material-icons " style="color:#4CAF50">trending_up</i>
-					<div class="flexCenter" style="font-size:18px;" id='status'></div>	
+					<div style="font-size:20px;margin-top:10px">จุดประสงค์การใช้งาน</div>
+					<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="noteI" name="noteI" value="" placeholder="จุดประสงค์การใช้งาน"></div>
 				</div>
-				
-			</li>
-		<!--  accountActive -->	
-			<li class="cardData" >
 				<div>
-					<i class="medium material-icons " style="">people</i>
-					<div class="flexCenter" style="font-size:18px;" id='accountActive'></div>
+					<div style="font-size:20px;margin-top:10px">เลขครุภัณฑ์</div>
+					<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="idI" name="idI" value="" placeholder="เลขครุภัณฑ์"></div>
 				</div>
-				
-			</li>
-		<!--  equipment -->		
-			<li class="cardData" style="width: 300px;display:block;" >
-				<center><h1 style="font-size:18px;margin-top:10px;margin-bottom:15px">อุปกรณ์</h1></center>
-				<div class="flexCenterSpace">
-					<i class="medium material-icons ">featured_play_list</i>
-					<i class="medium material-icons ">photo</i>
-				</div>
-				<div class="flexCenterSpace" style="margin-top:-3px;">
-					<i style='margin-right:15px'>ทั้งหมด</i>
-					<i style='margin-right:10px'>มีรูป</i>
+				<div>
+					<div style="font-size:20px;margin-top:10px">ผู้ดูแล</div>
+					<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="CrI" name="CrI" value="" placeholder="ชื่อ นามสกุล"></div>
 				</div>
-				<div class="flexCenterSpace" style="margin-top:-5px;">
-					<i id="numAll" style='margin-right:15px'>0</i>
-					<i id="numPhoto" style='margin-right:10px'>0</i>
+				<div class="flexCenterSpace" style="margin-top:20px">
+					<input type="button" onclick="addData('add')" class="buttonUpdate" value="Add">
+					<input type="button" onclick="backData('add')" class="buttonBack" value="Back">
 				</div>
-				
-			</li>
+			</div>
 		</div>
-	</div>
-	
-	<div id="card" class="container" style="max-width:800px"></div>
-				
-	<div id="modalAll" ></div>
 
-	<div id="more" class="container" style="max-width:800px;height:80px">	</div >
-	
-	<div id="modaladd" class="modal" style="max-height: 100%;display: none;padding-top:10px;">
-		<div class="modal-content cardStyle" >
-			<div class="flexCenter">
-				<div class="flexCenter bgImage">
-					<div class="flexCenter">
-						<img id="myImg0add" src="" alt=""/>
-						<div class="bgImage flexCenter"><h2>ไม่มีรูปภาพ</h2></div>
-					</div>
-					<div class="column bgMiniImage" style="margin-left:10px">
-						<img id="myImg1add" class="miniImage" src="" alt=""/>
-						<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>
-						<img id="myImg2add" class="miniImage" src="" alt=""/>
-						<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>
-						<img id="myImg3add" class="miniImage" style="margin-top:5px" src="" alt=""/>
-						<h6 class="miniImage flexCenter" style="margin-top:5px">ไม่มีรูปภาพ</h6>
+		<div id="modalsearch" class="modal" style="max-height: 100%;display: none;padding-top:100px;">
+			<div class="modal-content cardStyle" >
+				<div>
+					<input type="text" class="cardSearch" id="searchId" value="" placeholder="Search">
+					<div class="flexEnd">
+						<button class="buttonSearch flexCenter" onclick="searchItem('search')">
+							<a class="material-icons" style="color:#FFF;">search</a>
+						</button>
 					</div>
-				</div>
-				</div>
-				<div class="flexCenter" style="margin-top:5px;">
-					<div class="upload flexCenter">
-						<a style="font-size:18px">Upload</a></div>
-					<input type="file" name="upload" onclick="uploadImage('add')"/>'
-				</div>'
-			<div>
-				<div style="font-size:20px;margin-top:10px">ชื่อครุภัณฑ์วิทยาศาสตร์</div>
-				<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="nameI" name="nameI" value="" placeholder="ชื่อครุภัณฑ์วิทยาศาสตร์"></div>
-			</div>
-			<div>
-				<div style="font-size:20px;margin-top:10px">จุดประสงค์การใช้งาน</div>
-				<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="noteI" name="noteI" value="" placeholder="จุดประสงค์การใช้งาน"></div>
-			</div>
-			<div>
-				<div style="font-size:20px;margin-top:10px">เลขครุภัณฑ์</div>
-				<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="idI" name="idI" value="" placeholder="เลขครุภัณฑ์"></div>
-			</div>
-			<div>
-				<div style="font-size:20px;margin-top:10px">ผู้ดูแล</div>
-				<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="CrI" name="CrI" value="" placeholder="ชื่อ นามสกุล"></div>
-			</div>
-			<div class="flexCenterSpace" style="margin-top:20px">
-				<input type="button" onclick="addData('add')" class="buttonUpdate" value="Add">
-				<input type="button" onclick="backData('add')" class="buttonBack" value="Back">
+				</div>	
 			</div>
 		</div>
-	</div>
 
 
 </body>
 <script language="javascript">
 
-	function searchItem(){
+	function searchItem(idSearch){
+		var modal = document.getElementById('modal'+idSearch);
+		modal.style.display = "none";
+		getUser('search')
+	}		
 
-	}
-	
 </script>
 </html>