diff --git a/css/history.css b/css/history.css
index f54827c6fdfbcd9f1c89eff19daaa8b8f9816154..95ec0a2fd4fc1d2b304cac18488e0b21da4ec653 100755
--- a/css/history.css
+++ b/css/history.css
@@ -1,5 +1,4 @@
 .history_container {
-    margin-top: 10%;
     height: 79%;
 }
 
@@ -11,19 +10,6 @@
 	
 }
 
-.page_menu {
-    list-style-type: none;
-	margin: 0;
-	padding: 0;
-	overflow: hidden;
-}
-
-.page_menu > li {
-	width: 50%;
-	display: inline;
-	float: left;
-}
-
 .history_menu {
 	border: 0.5px solid black; 
     text-align: center;
@@ -52,8 +38,9 @@ table.history_table {
 }
 
 table.history_table p {
-	margin: 5px 0;
+	margin: 0 0 5px 0;
 	padding: 0;
+	font-size: 12px;
 	font-style: "Lucida Console", Monaco, monospace;
 }
 
@@ -61,29 +48,16 @@ td.history_column {
 	padding: 2px 0 0 8px;
 }
 
-p.history_date {
-	font-size: 14px;
+table.history_table p.history_date {
 	color: grey;
 	font-weight: bold;
 }
 
-p.history_username {
+table.history_table p.history_username {
 	font-size: 20px;
 	font-weight: bold;
 }
 
-p.history_loc {
-	font-size: 14px;
-}
-
-p.history_rating {
-	font-size: 14px;
-}
-
-p.history_comment {
-	font-size: 14px;
-}
-
 table.history_table th, td {
     padding: 0 5px;
     border-collapse: collapse;
@@ -118,4 +92,12 @@ button.hide_hist_button {
 	font-size: 20px;
 	color: orange;
 	vertical-align: middle;
+}
+
+ul#history_nav.nav_bar > li {
+	width: 50%;
+}
+	
+ul#history_nav {
+	margin-bottom: 7px;
 }
\ No newline at end of file
diff --git a/history/driver_history.php b/history/driver_history.php
index 16f0e00afdd826ec44d20d2e3ad8f8e86502b31e..2d757f5f8402e863719e6b69ed5bb0e2febb04bc 100644
--- a/history/driver_history.php
+++ b/history/driver_history.php
@@ -5,6 +5,8 @@
 	<link rel="stylesheet" type="text/css" href="../css/default_style.css">
     <link rel="stylesheet" type="text/css" href="../css/history.css">
     <link rel="stylesheet" type="text/css" href="../css/header.css">
+    
+    <script type="text/javascript" src="format_date.js"></script>
 </head>
 <body>
 	<div class="frame">
@@ -34,7 +36,7 @@
         		<div class="title"><h1>Transaction History</h1></div>
         	</div>
 
-    		<ul class="page_menu">
+    		<ul class="nav_bar" id="history_nav">
     			<li>
     				<a class="history_menu" href=<?php echo 'transaction_history.php?id='.$user_id; ?>>
 						<h3>MY PREVIOUS ORDER</h3>
@@ -60,12 +62,18 @@
 
                             if(mysqli_num_rows($query_order)!=0)
                             {
+                                $i = 1;
                                 while($row=mysqli_fetch_assoc($query_order)) {
                                     $driver_query=mysqli_query($con,"SELECT username FROM user WHERE user_id='".$row['cust_id']."'") or die(mysqli_error());
                                     $driver_row=mysqli_fetch_assoc($driver_query);
                                     $driver_name=$driver_row['username'];
                                     $given_score=(int)$row['score'];
 
+                                    echo 
+                                        '<script>
+                                            var order_date = new Date("'.$row['date'].'");
+                                        </script>';
+
                                     echo
                                         "<tr>
                                             <td>
@@ -73,7 +81,10 @@
                                                 <button class='hide_hist_button' type='button' value='hide' onclick='hide_row(this)'>Hide</button>
                                             </td>
                                             <td class='order_data'> 
-                                                <p class='history_date'>".$row['date']."</p>
+                                                <p class='history_date' id='row".$i."'></p>
+                                                <script>
+                                                    document.getElementById('row".$i."').innerHTML=format_date(order_date);
+                                                </script>
                                                 <p class='history_username'>".$driver_name."</p>
                                                 <p class='history_loc'>".$row['pick_city']." - ".$row['dest_city']."</p>
                                                 <p class='history_rating'>gave <span class='yellow_score'>&nbsp&nbsp".$given_score."&nbsp</span> stars for this order</p>
@@ -81,6 +92,8 @@
                                                 <p class='history_comment' style='margin-left: 30px;'>".$row['comment']."</p>
                                             </td>
                                         </tr>";
+
+                                        $i++;
                                 }
                             }
                             mysqli_close($con);
@@ -90,7 +103,6 @@
             </div>
         </div>
 	</div>
+    <script type="text/javascript" src="hide_history.js"></script>
 </body>
 </html>
-
-<script type="text/javascript" src="hide_history.js"></script>
\ No newline at end of file
diff --git a/history/format_date.js b/history/format_date.js
new file mode 100644
index 0000000000000000000000000000000000000000..87cf44f0cca2fc11e4a927013ad4cdb2482ddee0
--- /dev/null
+++ b/history/format_date.js
@@ -0,0 +1,126 @@
+function format_date(order_date) {
+	var day;
+	switch (order_date.getDay()) {
+		case 0:
+			day = "Sunday";
+			break;
+
+		case 1:
+			day = "Monday";
+			break;
+
+		case 2:
+			day = "Tuesday";
+			break;
+
+		case 3:
+			day = "Wednesday";
+			break;
+
+		case 4:
+			day = "Thursday";
+			break;
+
+		case 5:
+			day = "Friday";
+			break;
+
+		case 6:
+			day = "Saturday";
+			break;
+
+		default:
+			day = "Error: day out of range";
+			break;
+	}
+
+	var month;
+	switch (order_date.getMonth()) {
+		case 0:
+			month = "January";
+			break;
+
+		case 1:
+			month = "February";
+			break;
+
+		case 2:
+			month = "March";
+			break;
+
+		case 3:
+			month = "April";
+			break;
+
+		case 4:
+			month = "May";
+			break;
+
+		case 5:
+			month = "June";
+			break;
+
+		case 6:
+			month = "July";
+			break;
+
+		case 7:
+			month = "August";
+			break;
+
+		case 8:
+			month = "September";
+			break;
+
+		case 9:
+			month = "October";
+			break;
+
+		case 10:
+			month = "November";
+			break;
+
+		case 11:
+			month = "December";
+			break;
+
+		default:
+			month = "Error: month out of range";
+			break;
+	}
+
+	var dateSuffix;
+	switch (order_date.getDate) {
+		case 1:
+			dateSuffix = "st";
+			break;
+
+		case 2:
+			dateSuffix = "nd";
+
+		case 3:
+			dateSuffix = "rd";
+
+		case 21:
+			dateSuffix = "st";
+
+		case 23:
+			dateSuffix = "nd";
+			break;
+
+		case 23:
+			dateSuffix = "rd";
+			break;
+
+		case 31:
+			dateSuffix = "st";
+			break;
+
+		default:
+			dateSuffix = "th";
+			break;
+	}
+
+
+	return (day + ", " + month + " " + order_date.getDate() + dateSuffix + " " + order_date.getFullYear());
+};
\ No newline at end of file
diff --git a/history/transaction_history.php b/history/transaction_history.php
index 068d2cea11b42bcbcf380a96e1042f1a75738172..7c562460f3e6e6d3bfc5eae3653cf512c1ceb45d 100644
--- a/history/transaction_history.php
+++ b/history/transaction_history.php
@@ -6,9 +6,9 @@
 	<link rel="stylesheet" type="text/css" href="../css/default_style.css">
     <link rel="stylesheet" type="text/css" href="../css/history.css">
     <link rel="stylesheet" type="text/css" href="../css/header.css">
-    <script type="text/javascript" src="hide_history.js">
+
+	<script type="text/javascript" src="format_date.js"></script>
     </script>
-}
 </head>
 <body>
 	<div class="frame">
@@ -37,7 +37,7 @@
         	<div class="subheader">
         		<div class="title"><h1>Transaction History</h1></div>
         	</div>
-    		<ul class="page_menu">
+    		<ul id="history_nav" class="nav_bar">
     			<li>
     				<a class="history_menu menu_active" href=<?php echo 'transaction_history.php?id='.$user_id; ?>>
 						<h3>MY PREVIOUS ORDER</h3>
@@ -63,10 +63,17 @@
 
 		                    if(mysqli_num_rows($query_order)!=0)
 		                    {
+		                    	$i = 1;
 		                        while($row=mysqli_fetch_assoc($query_order)) {
 			                    	$driver_query=mysqli_query($con,"SELECT username FROM user WHERE user_id='".$row['driver_id']."'") or die(mysqli_error());
 			                    	$driver_row=mysqli_fetch_assoc($driver_query);
 			                    	$driver_name=$driver_row['username'];
+
+			                    	echo 
+                                        '<script>
+                                            var order_date = new Date("'.$row['date'].'");
+                                        </script>';
+
 		                            echo
 		                            	"<tr>
 		                            		<td>
@@ -74,7 +81,10 @@
 		                            			<button class='hide_hist_button' type='button' value='hide' onclick='hide_row(this)'>Hide</button>
 		                            		</td>
 		                            		<td class='order_data'>
-		                            			<p class='history_date'>".$row['date']."</p>
+		                            			<p class='history_date' id='row".$i."'></p>
+		                            			 <script>
+                                                    document.getElementById('row".$i."').innerHTML=format_date(order_date);
+                                                </script>
 						    					<p class='history_username'>".$driver_name."</p>
 						    					<p class='history_loc'>".$row['pick_city']." - ".$row['dest_city']."</p>
 						    					<p class='history_rating'>You rated: ";
@@ -89,6 +99,8 @@
 						    					<p class='history_comment' style='margin-left: 30px;'>".$row['comment']."</p>
 		                            		</td>
 		                            	</tr>";
+
+		                            $i++;
 		                        }
 		                    }
 		                    mysqli_close($con);