diff --git a/css/bootstrap-theme.min.css b/css/bootstrap-theme.min.css
old mode 100644
new mode 100755
diff --git a/css/bootstrap-theme.min.css.map b/css/bootstrap-theme.min.css.map
old mode 100644
new mode 100755
diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css
old mode 100644
new mode 100755
diff --git a/css/bootstrap.min.css.map b/css/bootstrap.min.css.map
old mode 100644
new mode 100755
diff --git a/css/materialize.css b/css/materialize.css
old mode 100644
new mode 100755
diff --git a/css/materialize.min.css b/css/materialize.min.css
old mode 100644
new mode 100755
diff --git a/css/stdb.css b/css/stdb.css
old mode 100644
new mode 100755
index 9f24d85..122ade0
--- a/css/stdb.css
+++ b/css/stdb.css
@@ -68,6 +68,7 @@ img{
 	width: 100%;
 	color:#FFF;
 	font-size:30px;
+	z-index:1;
 }
 .container{
 	margin-right: auto;
@@ -155,7 +156,7 @@ img{
 	left: 0;
 	top: 0;
 	width: 100%; 
-	height: 1000px; 
+	height: 100%; 
 	overflow: auto;
 	background-color: rgb(0,0,0);
 	background-color: rgba(0,0,0,0.4);
@@ -211,4 +212,55 @@ img{
 	border-radius: 5px;
 	border: 0px;
 	
+}
+
+/* Author :: Apirak */
+/* Add cover image to display */
+.box-left {
+  width: 20%;
+  height: 100%;
+  display: inline-table;
+}
+
+.box-right {
+  /*float: right;*/
+  width: 80%;
+  height: 100%;
+  display: inline-table;
+}
+img.cover-img {
+  width: 120px;
+  height: 120px;
+  margin-top: -2%;
+  margin-left: 1%;
+}
+/* End */
+
+/* upload img */
+a.btn-edit{
+	position: relative;
+	margin-left: 70%;
+	margin-top: 15%;
+	padding-left: 5px;
+	padding-right: 5px;
+	background-color: rgba(0,0,0,0.13);
+	border-radius: 10px;
+	color: white;
+}
+.modal h2{
+	margin-left: -300%;
+}
+a.btn-edit#order0{
+	margin-top: -85%;
+	margin-left: 84%;
+}
+.upload{
+	z-index: -1;
+}
+iframe{
+	margin-left: 13%;
+    margin-top: -13%;
+}
+img.img-with-youtube{
+	height: 300px;
 }
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
old mode 100644
new mode 100755
diff --git a/font/material-design-icons/LICENSE.txt b/font/material-design-icons/LICENSE.txt
old mode 100644
new mode 100755
diff --git a/font/material-design-icons/Material-Design-Icons.eot b/font/material-design-icons/Material-Design-Icons.eot
old mode 100644
new mode 100755
diff --git a/font/material-design-icons/Material-Design-Icons.svg b/font/material-design-icons/Material-Design-Icons.svg
old mode 100644
new mode 100755
diff --git a/font/material-design-icons/Material-Design-Icons.ttf b/font/material-design-icons/Material-Design-Icons.ttf
old mode 100644
new mode 100755
diff --git a/font/material-design-icons/Material-Design-Icons.woff b/font/material-design-icons/Material-Design-Icons.woff
old mode 100644
new mode 100755
diff --git a/font/material-design-icons/Material-Design-Icons.woff2 b/font/material-design-icons/Material-Design-Icons.woff2
old mode 100644
new mode 100755
diff --git a/font/roboto/Roboto-Bold.eot b/font/roboto/Roboto-Bold.eot
old mode 100644
new mode 100755
diff --git a/font/roboto/Roboto-Bold.ttf b/font/roboto/Roboto-Bold.ttf
old mode 100644
new mode 100755
diff --git a/font/roboto/Roboto-Bold.woff b/font/roboto/Roboto-Bold.woff
old mode 100644
new mode 100755
diff --git a/font/roboto/Roboto-Bold.woff2 b/font/roboto/Roboto-Bold.woff2
old mode 100644
new mode 100755
diff --git a/font/roboto/Roboto-Light.eot b/font/roboto/Roboto-Light.eot
old mode 100644
new mode 100755
diff --git a/font/roboto/Roboto-Light.ttf b/font/roboto/Roboto-Light.ttf
old mode 100644
new mode 100755
diff --git a/font/roboto/Roboto-Light.woff b/font/roboto/Roboto-Light.woff
old mode 100644
new mode 100755
diff --git a/font/roboto/Roboto-Light.woff2 b/font/roboto/Roboto-Light.woff2
old mode 100644
new mode 100755
diff --git a/font/roboto/Roboto-Medium.eot b/font/roboto/Roboto-Medium.eot
old mode 100644
new mode 100755
diff --git a/font/roboto/Roboto-Medium.ttf b/font/roboto/Roboto-Medium.ttf
old mode 100644
new mode 100755
diff --git a/font/roboto/Roboto-Medium.woff b/font/roboto/Roboto-Medium.woff
old mode 100644
new mode 100755
diff --git a/font/roboto/Roboto-Medium.woff2 b/font/roboto/Roboto-Medium.woff2
old mode 100644
new mode 100755
diff --git a/font/roboto/Roboto-Regular.eot b/font/roboto/Roboto-Regular.eot
old mode 100644
new mode 100755
diff --git a/font/roboto/Roboto-Regular.ttf b/font/roboto/Roboto-Regular.ttf
old mode 100644
new mode 100755
diff --git a/font/roboto/Roboto-Regular.woff b/font/roboto/Roboto-Regular.woff
old mode 100644
new mode 100755
diff --git a/font/roboto/Roboto-Regular.woff2 b/font/roboto/Roboto-Regular.woff2
old mode 100644
new mode 100755
diff --git a/font/roboto/Roboto-Thin.eot b/font/roboto/Roboto-Thin.eot
old mode 100644
new mode 100755
diff --git a/font/roboto/Roboto-Thin.ttf b/font/roboto/Roboto-Thin.ttf
old mode 100644
new mode 100755
diff --git a/font/roboto/Roboto-Thin.woff b/font/roboto/Roboto-Thin.woff
old mode 100644
new mode 100755
diff --git a/font/roboto/Roboto-Thin.woff2 b/font/roboto/Roboto-Thin.woff2
old mode 100644
new mode 100755
diff --git a/fonts/roboto/Roboto-Bold.eot b/fonts/roboto/Roboto-Bold.eot
old mode 100644
new mode 100755
diff --git a/fonts/roboto/Roboto-Bold.ttf b/fonts/roboto/Roboto-Bold.ttf
old mode 100644
new mode 100755
diff --git a/fonts/roboto/Roboto-Bold.woff b/fonts/roboto/Roboto-Bold.woff
old mode 100644
new mode 100755
diff --git a/fonts/roboto/Roboto-Bold.woff2 b/fonts/roboto/Roboto-Bold.woff2
old mode 100644
new mode 100755
diff --git a/fonts/roboto/Roboto-Light.eot b/fonts/roboto/Roboto-Light.eot
old mode 100644
new mode 100755
diff --git a/fonts/roboto/Roboto-Light.ttf b/fonts/roboto/Roboto-Light.ttf
old mode 100644
new mode 100755
diff --git a/fonts/roboto/Roboto-Light.woff b/fonts/roboto/Roboto-Light.woff
old mode 100644
new mode 100755
diff --git a/fonts/roboto/Roboto-Light.woff2 b/fonts/roboto/Roboto-Light.woff2
old mode 100644
new mode 100755
diff --git a/fonts/roboto/Roboto-Medium.eot b/fonts/roboto/Roboto-Medium.eot
old mode 100644
new mode 100755
diff --git a/fonts/roboto/Roboto-Medium.ttf b/fonts/roboto/Roboto-Medium.ttf
old mode 100644
new mode 100755
diff --git a/fonts/roboto/Roboto-Medium.woff b/fonts/roboto/Roboto-Medium.woff
old mode 100644
new mode 100755
diff --git a/fonts/roboto/Roboto-Medium.woff2 b/fonts/roboto/Roboto-Medium.woff2
old mode 100644
new mode 100755
diff --git a/fonts/roboto/Roboto-Regular.eot b/fonts/roboto/Roboto-Regular.eot
old mode 100644
new mode 100755
diff --git a/fonts/roboto/Roboto-Regular.ttf b/fonts/roboto/Roboto-Regular.ttf
old mode 100644
new mode 100755
diff --git a/fonts/roboto/Roboto-Regular.woff b/fonts/roboto/Roboto-Regular.woff
old mode 100644
new mode 100755
diff --git a/fonts/roboto/Roboto-Regular.woff2 b/fonts/roboto/Roboto-Regular.woff2
old mode 100644
new mode 100755
diff --git a/fonts/roboto/Roboto-Thin.eot b/fonts/roboto/Roboto-Thin.eot
old mode 100644
new mode 100755
diff --git a/fonts/roboto/Roboto-Thin.ttf b/fonts/roboto/Roboto-Thin.ttf
old mode 100644
new mode 100755
diff --git a/fonts/roboto/Roboto-Thin.woff b/fonts/roboto/Roboto-Thin.woff
old mode 100644
new mode 100755
diff --git a/fonts/roboto/Roboto-Thin.woff2 b/fonts/roboto/Roboto-Thin.woff2
old mode 100644
new mode 100755
diff --git a/index.html b/index.html
old mode 100644
new mode 100755
index 4d3c57e..afc4953
--- a/index.html
+++ b/index.html
@@ -3,115 +3,45 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <meta name="viewport"
-    content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1">
-  <title>Login Form</title>
-  <link rel="stylesheet" href="css/style.css">
+  <title>Traffy</title>
+  <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
+  <link type="text/css" rel="stylesheet" href="css/stdb.css"  media="screen,projection"/>
   <link rel="shortcut icon" type="image/png" href="https://avatars1.githubusercontent.com/u/17867603?v=3&s=200"/>
   <script src="js/jquery-3.0.0.min.js"></script>
   <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
   <style>
-    .flexCenter {
-      display:flex;
-      height: 550px;
-      justify-content: center;
-      align-items:center;
-    }  
+
+	html {
+	   height: 100%;
+	}
+
+	body {
+	   min-height: 100%;
+	}
+	a:active {
+		-webkit-text-fill-color: #000000;
+		-webkit-text-stroke-width: 2px;
+		-webkit-text-stroke-color: #000000;
+	}
   </style>
 </head>
 
 
-<body>
-  <section id="boxlogin" class="container">
-    
-  </section>
-</body>
-<script language="javascript">
-
-  var token = ''
+<body class="flexCenter" style="background-color:#0ca3d2;">
 
-  function pasuser(form) {
-    var data = {"username": form.login.value, "password": form.password.value}
-    // console.log(form.login.value)
-    // console.log(form.password.value)
-    // console.log(data)
-    $.ajax({
-      type: "POST",
-      url: 'http://www.serv.stdb.most.go.th/api-token-auth/',
-      data: data,
-      success: success,
-      dataType: 'json'
-    });
-  }
 
-  function success(respone) {
-    // console.log(respone)
-    // console.log(respone.token)
-    localStorage.setItem("token", respone.token);
-    getToken();
-  }
-  
-  function getToken(){
-    sesToken = sessionStorage.getItem('token');
-    if( sesToken === null){
-      token = localStorage.getItem("token")
-      // console.log(token)
-      // console.log('==================')
-      if( token != null ){
-        $.ajax({
-          type: "POST",
-          url: 'http://www.serv.stdb.most.go.th/api-token-verify/',
-          data: { "token" : token },
-          header: {
-            Authorization: 'Bearer '+ token,
-          },
-          success: checkToken,
-          dataType: 'json'
-        });
-      }
-      else{
-        loginPage();
-      }
-    }
-    else{
-      window.location.href = 'login.html';
-    }
-  }
+	<div >
+		<div>
+			<a href="login.html" style="font-size:100px;color:#F0F0F0;" >LOGIN</a>
+			<h style="font-size:200px;color:#F0F0F0;" >|</h>
+			<a href="stat.html" style="font-size:100px;color:#F0F0F0;" >STAT</a>
+		</div>
+	</div>
 
-  function checkToken(tokenrespone) {
-    sessionStorage.getItem('token',tokenrespone.token);
-    try {
-      if( tokenrespone.token === token ){
-        window.location.href = 'login.html';
-        // console.log('go to page');
-        // console.log(tokenrespone.token);
-      }
-    }
-    catch(err) {
-      // console.log(err.message);
-      loginPage();
-    }
+		
 
-  }
-
-  function loginPage(){
-    localStorage.removeItem('token');
-    var loginTag = '<div class="login">'
-                    +'<h1>Login to STDB</h1>'
-                    +'<form method="post" >'
-                      +'<p><input type="text" name="login" value="" placeholder="Username or Email"></p>'
-                      +'<p><input type="password" name="password" value="" placeholder="Password"></p>'
-                      +'<p class="remember_me">'
-                        +'<label>'
-                          +'<input type="checkbox" name="remember_me" id="remember_me">'
-                          +'Remember me on this computer'
-                        +'</label>'
-                      +'</p>'
-                     +' <p class="submit"><input type="button" value="Login" onClick="pasuser(this.form)"></p>'
-                    +'</form>'
-                  +'</div>'
-    document.getElementById("boxlogin").innerHTML = loginTag
-  }
-  getToken()
+</body>
+<script language="javascript">
+	
 </script>
 </html>
diff --git a/instrument.html b/instrument.html
new file mode 100755
index 0000000..21ccd58
--- /dev/null
+++ b/instrument.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en"> 
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <!--  <meta name="viewport"
+    content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1"> -->
+  <title>Traffy STDB</title>
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="shortcut icon" type="image/png" href="https://avatars1.githubusercontent.com/u/17867603?v=3&s=200"/>
+  <script src="js/jquery-3.0.0.min.js"></script>
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <script type="text/javascript" src="js/materialize.min.js"></script>
+  <script type="text/javascript" src="js/jwtDecode.min.js"></script>
+  <script type="text/javascript" src="js/stdb.js"></script>
+  <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
+  <link type="text/css" rel="stylesheet" href="css/stdb.css"  media="screen,projection"/>
+  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+<style>
+	
+</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="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 style="font-size:14px;color:#868686" id='like'>(Last 7 day)</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:14px;color:#868686" id='like'>(Last 7 day)</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:14px;color:#868686" id='like'>(Last 7 day)</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'></i>
+						<i id="numPhoto" style='margin-right:10px'></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>
+					<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>
+					<div style="font-size:20px;margin-top:10px">วีดีโอ(youtube)</div>
+					<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="YlI" name="YlI" value="" placeholder="https://www.youtube.com/watch?v=xxxxx"></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 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>
+
+
+</body>
+<script language="javascript">
+
+	function searchItem(idSearch){
+		var modal = document.getElementById('modal'+idSearch);
+		modal.style.display = "none";
+		getUser('search')
+	}		
+
+</script>
+</html>
diff --git a/js/bootstrap.js b/js/bootstrap.js
old mode 100644
new mode 100755
diff --git a/js/bootstrap.min.js b/js/bootstrap.min.js
old mode 100644
new mode 100755
diff --git a/js/jquery-3.0.0.min.js b/js/jquery-3.0.0.min.js
old mode 100644
new mode 100755
diff --git a/js/jwtDecode.min.js b/js/jwtDecode.min.js
old mode 100644
new mode 100755
diff --git a/js/materialize.js b/js/materialize.js
old mode 100644
new mode 100755
diff --git a/js/materialize.min.js b/js/materialize.min.js
old mode 100644
new mode 100755
diff --git a/js/npm.js b/js/npm.js
old mode 100644
new mode 100755
diff --git a/js/stdb.js b/js/stdb.js
old mode 100644
new mode 100755
index 790fb49..71a297e
--- a/js/stdb.js
+++ b/js/stdb.js
@@ -30,7 +30,7 @@ function getStartPage(){
 			});
 		}
 		else{
-			window.location.href = 'index.html'
+			window.location.href = 'login.html'
 		}
 	}
 	else{
@@ -85,7 +85,7 @@ function getUser(status){
 			token = sessionStorage.getItem("token")
 			var searchText = ''
 			if (status === 'search'){
-				console.log("search")
+				// console.log("search")
 				dataInstrument = []
 				searchText = '&search='+document.getElementById("searchId").value
 				start = 0
@@ -94,12 +94,12 @@ function getUser(status){
 				htmlText = '';
 				modalText = '';
 				dataInstrument = [];
-				console.log(' >>  end of search button');
-				console.log(dataInstrument)
-				console.log($('#card').html());
+				// 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)
+			// console.log('url = ' + url)
 			$.ajax({
 				type: "GET",
 				url: url, 
@@ -120,7 +120,7 @@ function getUser(status){
 function getDataStat(respone){
 	getUser('first');
 	// console.log(respone)
-	document.getElementById("like").innerHTML =  '0'
+	document.getElementById("like").innerHTML =  respone.items.completed
 	document.getElementById("status").innerHTML = '+'+respone.items.recent_update 
 	document.getElementById("accountActive").innerHTML = respone.users.active
 	document.getElementById("numAll").innerHTML = respone.items.all
@@ -129,7 +129,9 @@ function getDataStat(respone){
 
 function getData(respone) {
 	// console.log(dataInstrument)	
-	// console.log(respone)	
+	console.log(respone)
+	console.log("---------------- Next")
+	console.log(respone.next)	
 	// console.log(respone.results)	
 	console.log(dataInstrument)	
 	dataInstrument = dataInstrument.concat(respone.results)
@@ -139,75 +141,98 @@ function getData(respone) {
 	var modalText = ''
 
 	for (i=start;i<dataInstrument.length;i++ ){
-		console.log('========='+i+'==========')
+		// console.log('========='+i+'==========')
 		// console.log(dataInstrument[i].name)
+		var imageInstrument = ''
+		if (dataInstrument[i].clips.length != 0) {
+			var cover_img = getCoverImg(dataInstrument[i].clips);
+			imageInstrument = '<div class="box-left">'
+			+'<img src="'+cover_img+'" class="cover-img">'
+		    +'</div>'
+		}
 		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].caretaker+'</h3>'
+		// Author :: Apirak
+		+ imageInstrument
+		// end of left
+	    +'<div class="box-right">'
+	    +'<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].caretaker+'</h3>'
+	    +'</div>'// end of right
+	    // End
 		+'</div>';
-
+		// console.log(dataInstrument[i].clips.length)
+		var backup = dataInstrument[i].clips;
+		dataInstrument[i].clips = addNullData(dataInstrument[i].clips);
 		if(dataInstrument[i].clips.length === 0){
+			// console.log('========= = 0 =========')
 			imageTag = '<div class="flexCenter">'
-									+'<div class="flexCenter bgImage">'
-										+'<div class="flexCenter">'
-											+'<img id="myImg0'+i+'" src="" alt=""/>'
-											+'<div class="bgImage flexCenter"><h2>ไม่มีรูปภาพ</h2></div>'
-										+'</div>'
-										+'<div class="column bgMiniImage" style="margin-left:10px">'
-											+'<img id="myImg1'+i+'" class="miniImage" src="" alt=""/>'
-											+'<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>'
-											+'<img id="myImg2'+i+'" class="miniImage" src="" alt=""/>'
-											+'<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>'
-											+'<img id="myImg3'+i+'" 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('+i.toString()+')"/>'
-									+'</div>'
+						+'<div class="flexCenter bgImage">'
+							+'<div class="flexCenter">'
+								+'<img id="myImg0'+i+'" src="" alt=""/>'
+								+'<div class="bgImage flexCenter"><h2>ไม่มีรูปภาพ</h2></div>'
+							+'</div>'
+							+'<div class="column bgMiniImage" style="margin-left:10px">'
+								+'<img id="myImg1'+i+'" class="miniImage" src="" alt=""/>'
+								+'<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>'
+								+'<img id="myImg2'+i+'" class="miniImage" src="" alt=""/>'
+								+'<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>'
+								+'<img id="myImg3'+i+'" 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('+i.toString()+')"/>'
+						+'</div>'
 		}
 		else{
-			if(dataInstrument[i].clips.length > 1){
+			var style4 = ''
+			if(dataInstrument[i].clips.length >= 2){
+				// console.log('*********** >= 2 ***********')
 				var tagMiniImage = ''
 				var loopImage = dataInstrument[i].clips.length
-				var style4 = ''
-				for(j=1;j<loopImage-1;j++){
+				if (loopImage > 4){
+					loopImage = 4
+				}
+				for(j=1;j<loopImage;j++){
 					if (j==3){
-						style4 = 'style="margin-top:5px"'
+						style4 = 'margin-top:5px'
 					}
 					tagMiniImage = tagMiniImage
-											+'<img id="myImg'+j+''+i+'" class="miniImage" '+style4+' src="'+dataInstrument[i].clips[j].photo+'" alt=""/>'
-											+'<h6 class="miniImage flexCenter" ></h6>';
+									+'<img id="myImg'+j+''+i+'" class="miniImage" style="'+style4+'" src="'+dataInstrument[i].clips[j].photo+'" alt=""/>'
+									+'<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>';
 				}
-				for(j=loopImage-1;j<3;j++){
+				for(j=loopImage;j<4;j++){
 					if (j==3){
-						style4 = 'style="margin-top:5px"'
+						style4 = 'margin-top:5px'
 					}
 					tagMiniImage = tagMiniImage
-												+'<img id="myImg'+j+''+i+'" class="miniImage" '+style4+' src="" alt=""/>'
-												+'<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>';
+									+'<img id="myImg'+j+''+i+'" class="miniImage" style="'+style4+'" src="" alt=""/>'
+									+'<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>';
 				}		
 			}
 			else{
+				// console.log('*********** < 2 ***********')
+				var tagMiniImage = ''
 				for(j=1;j<4;j++){
 					if (j==3){
-						style4 = 'style="margin-top:5px"'
+						style4 = 'margin-top:5px'
 					}
 					tagMiniImage = tagMiniImage
-												+'<img id="myImg'+j+''+i+'" class="miniImage" '+style4+' src="" alt=""/>'
-												+'<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>';
+									+'<img id="myImg'+j+''+i+'" class="miniImage" style="'+style4+'" src="" alt=""/>'
+									+'<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>';
+
 				}
 			}
-			console.log(dataInstrument)
+
 			imageTag = '<div class="flexCenter">'
 									+'<div class="flexCenter bgImage">'
 										+'<div class="flexCenter">'
 											+'<img id="myImg0'+i+'" src="'+dataInstrument[i].clips[0].photo+'" alt=""/>'
-											+'<div class="bgImage flexCenter"><h2></h2></div>'
+											+'<div class="bgImage flexCenter"><h2>ไม่มีรูปภาพ</h2></div>'
 										+'</div>'
 										+'<div class="column bgMiniImage" style="margin-left:10px">'
 											+tagMiniImage
@@ -219,46 +244,100 @@ 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;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>'
+		}
+		var youtube_tag = getYoutubeTag(dataInstrument[i].model,i);
+		modalText = modalText+'<div id="modal'+i.toString()+'" class="modal" style="max-height: 100%;display: none;padding-top:10px;">'
+								+'<div class="modal-content cardStyle" >'
+									+imageTag
+									    +youtube_tag
+										+'<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>'
+											+'<div style="font-size:20px;margin-top:20px">วีดีโอ(youtube)</div>'
+											+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="yl'+i+'" name="yl'+i+'"  placeholder="https://www.youtube.com/watch?v=xxxxx" value="'+dataInstrument[i].model+'"></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>';
+		dataInstrument[i].clips = backup;
 	}
 	if(respone.next != null){
+		nextUrl = ''
+		moreText = ''
 		moreText = "<div class='cardStyle flexCenter' style='margin-bottom:10px;height:60px;background-color: #E0E0E0;' onClick='getNextUrl()'>"
 									+"<h4>More</h4>"
 								+"</div>";
 		nextUrl = respone.next
 		document.getElementById("more").innerHTML =  moreText;
-	} 
+	}
+	else{
+		nextUrl = ''
+		moreText = ''
+		document.getElementById("more").innerHTML =  moreText;
+	}
 	start = dataInstrument.length
 
 	document.getElementById("modalAll").innerHTML =  document.getElementById("modalAll").innerHTML+modalText
 	document.getElementById("card").innerHTML =  document.getElementById("card").innerHTML+htmlText
+    
+    /* Apirak */
+    $("img[id*='myImg']").each(function(){
+    	var id    = $(this).attr('id');
+    	var order = id.substring(5,6);
+    	var idInstrument = id.substring(6,7);
+    	if(idInstrument == 'a'){idInstrument='add';}
+    	$("<a id='order"+order+"' class='btn-edit' onclick='uploadWithOrder("+order+",\""+idInstrument+"\")'>Edit</a>").insertAfter( $(this) );
+    	$(this).parent().css({"position": "relative"});
+    	$(this).css({"margin-top": "0px"});
+    });
+    $("iframe").each(function(){
+    	var index = $(this).attr('id');
+    	index = index.replace("youtube-","");
+    	$("img#myImg0"+index).addClass("img-with-youtube");
+    });
+}
+
+function uploadWithOrder(order,idInstrument){
+	$("#modal"+idInstrument+" input[name='upload']").attr('order',order);
+	$("#modal"+idInstrument+" input[name='upload']").click();
+}
+
+function getYoutubeTag(link,index){
 
+	//https://www.youtube.com/watch?v=hYgTVD-bxOY
+	//http://www.youtube.com/v/hYgTVD-bxOY
+	link = link.replace("https","http");
+	link = link.replace("watch?v=","v/");
+	var youtube_tag = '';
+	if( youtube_tag.indexOf("http") < 0 ){return youtube_tag;}
+	if(link != '')
+	{
+		youtube_tag = '<iframe width="420" height="315" src="'+link+'" frameborder="0" class="youtube" id="youtube-'+index+'" allowfullscreen></iframe>';
+		$("iframe").css("margin-left","13%");
+		$("iframe").css("margin-top","-13%");
+	}
+	else{
+		youtube_tag="";
+	}
+	return youtube_tag;
 }
 
 function getNextUrl(){
@@ -277,6 +356,29 @@ function getNextUrl(){
 	});
 }
 
+function addNullData(arr){
+	var temp_arr = [{content_type:'',id:'',object_id:'',order:'',photo:"",user:''},
+					{content_type:'',id:'',object_id:'',order:'',photo:"",user:''},
+					{content_type:'',id:'',object_id:'',order:'',photo:"",user:''},
+					{content_type:'',id:'',object_id:'',order:'',photo:"",user:''}];
+ 	$.each(arr,function(index,obj){
+ 		temp_arr[obj.order] = obj;
+ 	});
+ 	return temp_arr;
+}
+
+function getCoverImg(arr){
+	var link="";
+	$.each(arr,function(index,obj){
+
+		if(obj.order == 0)
+		{	
+			link=obj.photo;
+		}
+	});
+	return link;
+}
+
 function modalItem(idCard){
 	var modal = document.getElementById('modal'+idCard);
 	// console.log(modal)
@@ -296,13 +398,16 @@ function modalItem(idCard){
 
 function uploadImage(idImage) {
 		var check = 0
+		var order = $("#modal"+idImage+" input[name='upload']").attr('order');
 		$(":file").change(function () {
 				if (this.files && this.files[0] && check===0) {
 						var reader = new FileReader();
-						console.log(reader)
+						// console.log(reader)
 						reader.onload = function(e) {
 							instrument = dataInstrument[parseInt(idImage)]
-							var uriAdd = [{'uri':e.target.result}];
+							// console.log(instrument)
+							// console.log('-------------xxxx-------------')
+							var uriAdd = [{'uri':e.target.result,'order':parseInt(order)}];
 							dataUri = dataUri.concat(uriAdd);
 							if(idImage == 'add'){
 								loopImage = 0
@@ -310,24 +415,28 @@ function uploadImage(idImage) {
 							else{
 								var loopImage = instrument.clips.length
 								for(idImg=0;idImg<loopImage;idImg++){
-										$('#myImg'+idImg+''+idImage).attr('src', dataInstrument[idData].clips[idImg].photo);
+										$('#myImg'+idImg+''+idImage).attr('src', dataInstrument[idImage].clips[idImg].photo);
 								}
 							}
-							console.log(idImage)
+							// console.log(idImage)
 							var dataUriSort = dataUri
 							idloopImage = loopImage
 							if(loopImage==0){
-								loopImage = 1
 								idloopImage = 0
 							}
 							var idUri = 0
-							console.log(loopImage-1)
-							for(idImg=loopImage-1;idImg<idloopImage+dataUri.length;idImg++){
+							// console.log(dataUri)
+							// console.log(loopImage-1)
+							// console.log(idloopImage+dataUri.length)
+							/*for(idImg=loopImage;idImg<idloopImage+dataUri.length;idImg++){
 								 $('#myImg'+idImg+''+idImage).attr('src', dataUri[idUri].uri);
 								 idUri += 1
-							}
-							console.log('---------------------------')
-							console.log(dataUri)
+							}*/
+							$.each(dataUri,function(index,obj){
+								$('#myImg'+obj.order+''+idImage).attr('src', obj.uri);
+							});
+							// console.log('---------------------------')
+							// console.log(dataUri)
 							check += 1
 						};
 						reader.readAsDataURL(this.files[0]);       
@@ -341,15 +450,18 @@ function addData(){
 		'name':document.getElementById("nameI").value,
 		'organization': userData.organizations[0].id,
 	}
-	if(document.getElementById("noteI").value != ''){
-		data.caretaker = document.getElementById("idI").value
+	if(document.getElementById("CrI").value != ''){
+		data.caretaker = document.getElementById("CrI").value
 	}
-	if(document.getElementById("noteI").value != ''){
-		data.instrument_id = document.getElementById("CrI").value
+	if(document.getElementById("idI").value != ''){
+		data.instrument_id = document.getElementById("idI").value
 	}
 	if(document.getElementById("noteI").value != ''){
 		data.note = document.getElementById("noteI").value
 	}
+	if(document.getElementById("YlI").value != ''){
+		data.model = document.getElementById("YlI").value
+	}
 	if(dataUri.length != 0){
 		data.clips = dataUri
 	}
@@ -367,7 +479,7 @@ function addData(){
 			'Authorization': 'Bearer ' + token,
 		},
 		success: function(respone){
-			console.log(respone)
+			// console.log(respone)
 			window.location.reload(true);
 		},
 		dataType: 'json'
@@ -382,8 +494,9 @@ function updateData(idData){
 	dataUpdate = {
 		'name':document.getElementById("name"+idData).value,
 		'note':document.getElementById("note"+idData).value,
-		'caretaker':document.getElementById("id"+idData).value,
-		'instrument_id':document.getElementById("cr"+idData).value,
+		'caretaker':document.getElementById("cr"+idData).value,
+		'instrument_id':document.getElementById("id"+idData).value,
+		'model':document.getElementById("yl"+idData).value,
 	}
 	if(dataUri.length != 0){
 		dataUpdate.clips = dataUri
@@ -399,7 +512,7 @@ function updateData(idData){
 			'Authorization': 'Bearer ' + token,
 		},
 		success: function(respone){
-			console.log(respone)
+			// console.log(respone)
 			window.location.reload(true);
 		},
 		dataType: 'json'
@@ -420,7 +533,7 @@ function deleteData(idData){
 			'Authorization': 'Bearer ' + token,
 		},
 		success: function(respone){
-			console.log(respone)
+			// console.log(respone)
 			window.location.reload(true);
 		},
 		dataType: 'json'
@@ -441,12 +554,18 @@ function removeImage(idData){
 		loopImage = 1
 	}
 	else{
+		var time = new Date()
 		var loopImage = dataInstrument[idData].clips.length
+		// console.log(dataInstrument[idData])
 		for(j=0;j<loopImage;j++){
-			$('#myImg'+j+''+idData).attr('src', loopImage[j]);		
+			// console.log('#myImg'+j+''+idData)
+			document.getElementById("myImg"+j+''+idData).src = dataInstrument[idData].clips[j].photo+'?'+time;
+			// console.log(document.getElementById("myImg"+j+''+idData).src)
+			// console.log(document.getElementById("myImg"+j+''+idData))
+
 		}
 	}	
-	for(j=loopImage-1;j<4;j++){
+	for(j=loopImage;j<4;j++){
 		$('#myImg'+j+''+idData).attr('src','');
 	}
 }
diff --git a/login.html b/login.html
old mode 100644
new mode 100755
index 2637366..99bd07f
--- a/login.html
+++ b/login.html
@@ -3,158 +3,116 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-   <meta name="viewport"
-    content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1">
-  <title>Login Form</title>
+  <title>Login</title>
   <link rel="stylesheet" href="css/style.css">
   <link rel="shortcut icon" type="image/png" href="https://avatars1.githubusercontent.com/u/17867603?v=3&s=200"/>
   <script src="js/jquery-3.0.0.min.js"></script>
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <script type="text/javascript" src="js/materialize.min.js"></script>
-  <script type="text/javascript" src="js/jwtDecode.min.js"></script>
-  <script type="text/javascript" src="js/stdb.js"></script>
-  <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
-  <link type="text/css" rel="stylesheet" href="css/stdb.css"  media="screen,projection"/>
   <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
-<style>
-	
-</style>
+  <style>
+    .flexCenter {
+      display:flex;
+      height: 550px;
+      justify-content: center;
+      align-items:center;
+    }  
+  </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="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>
-					<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>
+<body>
+  <section id="boxlogin" class="container">
+    
+  </section>
+</body>
+<script language="javascript">
 
-		<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>
+  var token = ''
 
+  function pasuser(form) {
+    var data = {"username": form.login.value, "password": form.password.value}
+    // console.log(form.login.value)
+    // console.log(form.password.value)
+    // console.log(data)
+    $.ajax({
+      type: "POST",
+      url: 'http://www.serv.stdb.most.go.th/api-token-auth/',
+      data: data,
+      success: success,
+      dataType: 'json'
+    });
+  }
 
-</body>
-<script language="javascript">
+  function success(respone) {
+    // console.log(respone)
+    // console.log(respone.token)
+    localStorage.setItem("token", respone.token);
+    getToken();
+  }
+  
+  function getToken(){
+    sesToken = sessionStorage.getItem('token');
+    if( sesToken === null){
+      token = localStorage.getItem("token")
+      // console.log(token)
+      // console.log('==================')
+      if( token != null ){
+        $.ajax({
+          type: "POST",
+          url: 'http://www.serv.stdb.most.go.th/api-token-verify/',
+          data: { "token" : token },
+          header: {
+            Authorization: 'Bearer '+ token,
+          },
+          success: checkToken,
+          error: tokenError,
+          dataType: 'json'
+        });
+      }
+      else{
+        loginPage();
+      }
+    }
+    else{
+      window.location.href = 'instrument.html';
+    }
+  }
 
-	function searchItem(idSearch){
-		var modal = document.getElementById('modal'+idSearch);
-		modal.style.display = "none";
-		getUser('search')
-	}		
+  function checkToken(tokenrespone) {
+    sessionStorage.getItem('token',tokenrespone.token);
+    try {
+      if( tokenrespone.token === token ){
+        window.location.href = 'instrument.html';
+        // console.log('go to page');
+        // console.log(tokenrespone.token);
+      }
+    }
+    catch(err) {
+      // console.log(err.message);
+      loginPage();
+    }
 
+  }
+  function tokenError(){
+    loginPage();
+  }
+  function loginPage(){
+    localStorage.removeItem('token');
+    var loginTag = '<div class="login">'
+                    +'<h1>Login to STDB</h1>'
+                    +'<form method="post" >'
+                      +'<p><input type="text" name="login" value="" placeholder="Username or Email"></p>'
+                      +'<p><input type="password" name="password" value="" placeholder="Password"></p>'
+                      +'<p class="remember_me">'
+                        +'<label>'
+                          +'<input type="checkbox" name="remember_me" id="remember_me">'
+                          +'Remember me on this computer'
+                        +'</label>'
+                      +'</p>'
+                     +' <p class="submit"><input type="button" value="Login" onClick="pasuser(this.form)"></p>'
+                    +'</form>'
+                  +'</div>'
+    document.getElementById("boxlogin").innerHTML = loginTag
+  }
+  getToken()
 </script>
 </html>
diff --git a/scss/style.scss b/scss/style.scss
old mode 100644
new mode 100755
diff --git a/stat.html b/stat.html
new file mode 100755
index 0000000..82eaf0b
--- /dev/null
+++ b/stat.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en"> 
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>Traffy STDB Stat</title>
+  <link rel="shortcut icon" type="image/png" href="https://avatars1.githubusercontent.com/u/17867603?v=3&s=200"/>
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <script src="js/jquery-3.0.0.min.js"></script>
+  <script type="text/javascript" src="js/materialize.min.js"></script>
+  <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
+  <link type="text/css" rel="stylesheet" href="css/stdb.css"  media="screen,projection"/>
+  <style>
+
+	html {
+	   height: 100%;
+	}
+
+	body {
+	   min-height: 100%;
+	}
+	a:active {
+		-webkit-text-fill-color: #000000;
+		-webkit-text-stroke-width: 2px;
+		-webkit-text-stroke-color: #000000;
+	}
+	.column { 
+	  -webkit-flex-direction: column; 
+	  flex-direction: column; 
+	  float: left;
+	}
+	.column li {
+	  background: deepskyblue;
+	}
+	.flex-container {
+	  padding: 0;
+	  margin: 0;
+	  list-style: none;
+	  
+	  -ms-box-orient: horizontal;
+	  display: -webkit-box;
+	  display: -moz-box;
+	  display: -ms-flexbox;
+	  display: -moz-flex;
+	  display: -webkit-flex;
+	  display: flex;
+	}
+  </style>
+</head>
+
+
+<body class="flexCenter" style="background-color:#0ca3d2;">
+
+	<div>
+		<div style="max-width:800px;color:#F0F0F0;">
+			<div class="flexCenter">
+				<h1>หน่วยงานทั้งหมด</h1>
+			</div>
+		</div>
+
+		<div id="organiz" style="max-width:800px"></div>
+
+	</div>
+
+		
+
+</body>
+<script language="javascript">
+	function getStatAll(){
+		urlStat = 'http://expert.traffy.xyz/api/v2/organization/stats/'
+		// console.log(urlStat)
+		$.ajax({
+			type: "GET",
+			url: urlStat,
+			success: getData,
+			dataType: 'json',
+		});
+	}
+
+	function getData(respone){
+		// console.log(respone)
+		var htmlText = ''
+		for (i=0;i<respone.length;i++ ){ 
+			htmlText = htmlText+"<div class='cardStyle' style='width:800px;height:200px'>"
+			+"<h3 style='font-size:26px;margin-left:20px '>"+respone[i].organization.name+' ('+respone[i].organization.abbv_en+') '+"</h3>"
+			+"<div class='flexCenterSpace'>"
+				+"<div class='flex-container column flexCenter'>"
+					+"<i class='medium material-icons ' style=''>thumb_up</i>"
+					+"<i class='' style=''>ข้อมูลครบ</i>"
+					+"<i class='' style=''>"+respone[i].items.completed+"</i>"
+				+"</div>"
+				+"<div class='flex-container column flexCenter'>"
+					+"<i class='medium material-icons ' style=''>trending_up</i>"
+					+"<i class='' style=''>ข้อมูลอัพเดท</i>"
+					+"<i class='' style=''>"+respone[i].items.recent_update+"</i>"
+				+"</div>"
+				+"<div class='flex-container column flexCenter'>"
+					+"<i class='medium material-icons ' style=''>featured_play_list</i>"
+					+"<i class='' style=''>ทั้งหมด</i>"
+					+"<i class='' style=''>"+respone[i].items.all+"</i>"
+				+"</div>"
+				+"<div class='flex-container column flexCenter'>"
+					+"<i class='medium material-icons ' style=''>photo</i>"
+					+"<i class='' style=''>มีรูป</i>"
+					+"<i class='' style=''>"+respone[i].items.photos+"</i>"
+				+"</div>"
+			+"</div>"
+		+"</div>"
+
+		}
+		document.getElementById("organiz").innerHTML = htmlText
+	}
+	getStatAll()
+</script>
+</html>