diff --git a/index.js b/index.js
index 7547ad4..5a7f955 100644
--- a/index.js
+++ b/index.js
@@ -10,11 +10,11 @@ app.use(express.static('public'));
 io.on('connection', (socket) => {
 	console.log('a user connected');
 	
-	socket.on('draw', (line) => {
+	socket.on('picture', (line) => {
 		console.log(line);
-		socket.broadcast.emit("draw",line);
+		socket.broadcast.emit("dingdong",line);
 	});
-	
+
 	socket.on('disconnect', () => {
 		console.log('user disconnected');
 	});
diff --git a/package.json b/package.json
index 058184c..d54d120 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "description": "lets draw together",
   "dependencies": {
     "express": "^4.18.2",
-    "socket.io": "^4.7.4"
+    "socket.io": "^4.7.4",
+    "socketio": "^1.0.0"
   }
 }
diff --git a/public/index.html b/public/index.html
index 5c48a31..5c55512 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,81 +1,85 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-	<title>untitled</title>
-	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
+	<title>drawing</title>
 	<style>
-body{
-	margin: 0 auto;
-}		
-
-#drawing{
-	display: block;
-	margin-top: 100px;
-	margin-right: auto;
-	margin-left: auto;
-	border: 1px solid #000;
-	box-shadow: 0px 0px 10px #000;
-	
-}
+		.center{
+			text-align: center;
+		}
+		
+		#drawing{
+			border: 1px solid #000;
+			box-shadow: 0px 0px 10px #000;
+			margin-left: 10px;
+		}
 	</style>
 </head>
-
 <body>
-	<canvas id="drawing" width="400" height="400" ></canvas>
-	Width:<input type="range" min="1" max="20" value="5"  id="lineWidth">
-	Color:<input type="color" id="color" value="#000000" />
+	<h1 class="center">drawing editor</h1>
+	<canvas id="drawing" width="400" height="400"></canvas><br>
+	Stroke width: <input type="range" min="0.5" max="50" value="1" id="width"><br>
+	Color: <input type="color" id="color">
+	Brush: <select id="linecap">
+		<option value="square">square</option>
+		<option value="round">round</option>
+		<option value="butt">butt</option>
+	</select>
 </body>
 <script src="/socket.io/socket.io.js"></script>
 <script>
 var socket = io();
+	
+	
+var lineWidth = 1;
+var color = "#000000";
+var brush = "square";
+document.getElementById("linecap").addEventListener('change', function(){
+	brush = this.value;
+});
+document.getElementById("color").addEventListener('change', function(){
+	color = this.value;
+});
+document.getElementById("width").addEventListener('change', function(){
+	lineWidth = this.value;
+});
 
 var canvas = document.getElementById("drawing");
-
 var ctx = canvas.getContext('2d');
-	
-var pos = { x: 0, y: 0 };
-var lineWidth = 5;
-var color = "#000000";
+var pos = {x: 0, y: 0};
 
 document.addEventListener('mousemove', draw);
 document.addEventListener('mousedown', setPosition);
-document.addEventListener('mouseenter', setPosition);
 
-function setPosition(e) {
+function setPosition(e){
 	pos.x = e.clientX - canvas.offsetLeft;
 	pos.y = e.clientY - canvas.offsetTop;
 }
 
-function draw(e) {
-	if (e.buttons !== 1) return;
-	ctx.beginPath();
+function draw(e){
+	if(e.buttons !== 1) return;
 	ctx.lineWidth = lineWidth;
-	ctx.lineCap = 'round';
+	ctx.lineCap = brush;
 	ctx.strokeStyle = color;
-	ctx.moveTo(pos.x, pos.y);
-	var oldpos = { x: pos.x, y: pos.y };
+	ctx.beginPath();
+	ctx.moveTo(pos.x,pos.y);
+	var startPos = {x: pos.x, y: pos.y};
 	setPosition(e);
-	ctx.lineTo(pos.x, pos.y);
-	ctx.stroke(); 
-	socket.emit('draw', {oldpos, pos, lineWidth, color});
+	ctx.lineTo(pos.x,pos.y);
+	ctx.stroke();
+	socket.emit("picture", {
+		startPos, 
+		pos,
+		color, 
+		lineWidth
+	});
 }
 
-document.getElementById("lineWidth").addEventListener('change', function(){
-	lineWidth = this.value;
-});
-
-document.getElementById("color").addEventListener('change', function(){
-	color = this.value;
+socket.on("dingdong", (line) => {
+	console.log(line);
+	ctx.lineWidth = line.lineWidth;
+	ctx.strokeStyle = line.color;
+	ctx.beginPath();
+	ctx.moveTo(line.startPos.x, line.startPos.y);
+	ctx.lineTo(line.pos.x, line.pos.y);
+	ctx.stroke();
 });
 
-
-socket.on("draw", function(input){
-	ctx.lineWidth = input.lineWidth;
-	ctx.strokeStyle = input.color;
-	ctx.moveTo(input.oldpos.x, input.oldpos.y);
-	ctx.lineTo(input.pos.x, input.pos.y);
-	ctx.stroke(); 
-});
 </script>
-</html>
