diff --git a/css/order.css b/css/order.css
index d58d87c8460b59fd880f4d29e91af64a88dbfe23..bcfcc827da5a8cdad4d994cccbe368db3638329d 100755
--- a/css/order.css
+++ b/css/order.css
@@ -61,9 +61,13 @@
 #preferred_driver {
 }
 
+form#submit_cmplt_ordr div {
+	size: 
+}
+
 .star {
-	size: 300%;
-	color: yellow;
+	font-size: 50px;
+	color: gray;
 }
 
 #order_link {
diff --git a/order/complete_order.php b/order/complete_order.php
index 96db455b2b32c6eb7bd8057a3c37ee7a4cac1ee5..7cc38c2a4f1a9793dd31e09fc6518de9b3262ec8 100644
--- a/order/complete_order.php
+++ b/order/complete_order.php
@@ -60,17 +60,18 @@
 				</h2>
 				<div>
 					<?php echo "
-					<img class='driver_pict' src='../profile/getProfilePict.php?id=".$user_id."'>"
+					<img class='driver_pict' src='../profile/getProfilePict.php?id=".$seldrv."'>"
 					;?>
 					<p> @<?php echo $driver_username;?></p>
 					<p> <?php echo $driver_name;?></p>
 				</div>
 				<div class="rating_bar">
-					<span class="star" id="1-star">&starf;</span>
-					<span class="star" id="2-star">&starf;</span>
-					<span class="star" id="3-star">&starf;</span>
-					<span class="star" id="4-star">&starf;</span>
-					<span class="star" id="5-star">&starf;</span>
+					<span class="star" id="1-star" onclick="rate1()" onmouseover="light1()">&starf;</span>
+					<span class="star" id="2-star" onclick="rate2()" onmouseover="light2()">&starf;</span>
+					<span class="star" id="3-star" onclick="rate3()" onmouseover="light3()">&starf;</span>
+					<span class="star" id="4-star" onclick="rate4()" onmouseover="light4()">&starf;</span>
+					<span class="star" id="5-star" onclick="rate5()" onmouseover="light5()">&starf;</span>
+					<input type="hidden" name="rating" id="rating">
 				</div>
 				<div>
 					<textarea id="comment" name="comment" form="submit_cmplt_ordr">
@@ -89,8 +90,69 @@
 	var star3 = document.getElementById('3-star');
 	var star4 = document.getElementById('4-star');
 	var	star5 = document.getElementById('5-star');
+	var rate = document.getElementById('rating');
 
-	star1.
+	function rate1() {
+		rate.value = 1;
+		light1();
+	}	
+	function rate2() {
+		rate.value = 2;
+		light2();
+	}
+	function rate3() {
+		rate.value = 3;
+		light3();
+	}
+	function rate4() {
+		rate.value = 4;
+		light4();
+	}
+	function rate5() {
+		rate.value = 5;
+		light5();
+	}	
+
+	function light1() {
+		rate.value = 1;
+		star1.style.color = "yellow";
+		star2.style.color = "gray";
+		star3.style.color = "gray";
+		star4.style.color = "gray";
+		star5.style.color = "gray";
+	}
+	function light2() {
+		rate.value = 2;
+		star1.style.color = "yellow";
+		star2.style.color = "yellow";
+		star3.style.color = "gray";
+		star4.style.color = "gray";
+		star5.style.color = "gray";
+	}
+	function light3() {
+		rate.value = 3;
+		star1.style.color = "yellow";
+		star2.style.color = "yellow";
+		star3.style.color = "yellow";
+		star4.style.color = "gray";
+		star5.style.color = "gray";
+	}
+	function light4() {
+		rate.value = 4;
+		star1.style.color = "yellow";
+		star2.style.color = "yellow";
+		star3.style.color = "yellow";
+		star4.style.color = "yellow";
+		star5.style.color = "gray";
+	}
+	function light5() {
+		rate.value = 5;
+		star1.style.color = "yellow";
+		star2.style.color = "yellow";
+		star3.style.color = "yellow";
+		star4.style.color = "yellow";
+		star5.style.color = "yellow";
+	}
 
 </script>
 </html>
\ No newline at end of file