diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index a80da49c..952e743e 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -167,16 +167,16 @@ span.has-danger,
 }
 
 .m-timeline-2 .m-timeline-2__items .m-timeline-2__item .m-timeline-2__item-cricle {
-	left: 6.1rem;
+	left: 10.1rem;
 	top: 0.3rem;
 }
 
 .m-timeline-2 .m-timeline-2__items .m-timeline-2__item .m-timeline-2__item-text {
-	padding-left: 7rem;
+	padding-left: 12rem;
 }
 
 .m-timeline-2:before {
-	left: 7.95rem;
+	left: 11.95rem;
 }
 
 .m-timeline-2 .m-timeline-2__items .m-timeline-2__item .m-timeline-2__item-time {
@@ -189,4 +189,4 @@ span.has-danger,
 	.modal-lg {
 		max-width: 1024px;
 	}
-}
\ No newline at end of file
+}
diff --git a/src/Controller/JobOrderController.php b/src/Controller/JobOrderController.php
index 6d7b86cb..6f4cedbc 100644
--- a/src/Controller/JobOrderController.php
+++ b/src/Controller/JobOrderController.php
@@ -12,6 +12,7 @@ use App\Ramcar\InvoiceCriteria;
 use App\Ramcar\InvoiceStatus;
 use App\Ramcar\ModeOfPayment;
 use App\Ramcar\TransactionOrigin;
+use App\Ramcar\JOEventType;
 
 use App\Entity\JobOrder;
 use App\Entity\BatteryManufacturer;
@@ -22,6 +23,7 @@ use App\Entity\Hub;
 use App\Entity\Promo;
 use App\Entity\Rider;
 use App\Entity\Battery;
+use App\Entity\JOEvent;
 
 use App\Service\InvoiceCreator;
 use App\Service\MapTools;
@@ -311,6 +313,15 @@ class JobOrderController extends BaseController
 
         // validated! save the entity
         $em->persist($obj);
+
+        // the event
+        $event = new JOEvent();
+        $event->setDateHappen(new DateTime())
+            ->setTypeID(JOEventType::CREATE)
+            ->setUser($this->getUser())
+            ->setJobOrder($obj);
+        $em->persist($event);
+
         $em->flush();
 
         // return successful response
@@ -752,6 +763,14 @@ class JobOrderController extends BaseController
             ], 422);
         }
 
+        // the event
+        $event = new JOEvent();
+        $event->setDateHappen(new DateTime())
+            ->setTypeID(JOEventType::HUB_ASSIGN)
+            ->setUser($this->getUser())
+            ->setJobOrder($obj);
+        $em->persist($event);
+
         // validated! save the entity
         $em->flush();
 
@@ -905,6 +924,14 @@ class JobOrderController extends BaseController
         // set rider unavailable
         $rider->setAvailable(false);
 
+        // the event
+        $event = new JOEvent();
+        $event->setDateHappen(new DateTime())
+            ->setTypeID(JOEventType::RIDER_ASSIGN)
+            ->setUser($this->getUser())
+            ->setJobOrder($obj);
+        $em->persist($event);
+
         // validated! save the entity
         $em->flush();
 
@@ -1022,6 +1049,14 @@ class JobOrderController extends BaseController
         if ($rider != null)
             $rider->setAvailable();
 
+        // the event
+        $event = new JOEvent();
+        $event->setDateHappen(new DateTime())
+            ->setTypeID(JOEventType::FULFILL)
+            ->setUser($this->getUser())
+            ->setJobOrder($obj);
+        $em->persist($event);
+
         // validated! save the entity
         $em->flush();
 
@@ -1408,6 +1443,14 @@ class JobOrderController extends BaseController
         if ($rider != null)
             $rider->setAvailable();
 
+        // the event
+        $event = new JOEvent();
+        $event->setDateHappen(new DateTime())
+            ->setTypeID(JOEventType::CANCEL)
+            ->setUser($this->getUser())
+            ->setJobOrder($obj);
+        $em->persist($event);
+
         // save
         $em->flush();
 
diff --git a/src/Entity/JOEvent.php b/src/Entity/JOEvent.php
new file mode 100644
index 00000000..7d0d5d31
--- /dev/null
+++ b/src/Entity/JOEvent.php
@@ -0,0 +1,118 @@
+<?php
+
+namespace App\Entity;
+
+use Doctrine\ORM\Mapping as ORM;
+use DateTime;
+use App\Ramcar\JOEventType;
+
+/**
+ * @ORM\Entity
+ * @ORM\Table(name="jo_event")
+ */
+class JOEvent
+{
+    // unique id
+    /**
+     * @ORM\Id
+     * @ORM\Column(type="integer")
+     * @ORM\GeneratedValue(strategy="AUTO")
+     */
+    protected $id;
+
+    // date the entry was created
+    /**
+     * @ORM\Column(type="datetime")
+     */
+    protected $date_create;
+
+    // date that the event happened
+    /**
+     * @ORM\Column(type="datetime")
+     */
+    protected $date_happen;
+
+    // the event
+    /**
+     * @ORM\Column(type="string", length=30)
+     */
+    protected $type_id;
+
+    // user who initiated event
+    /**
+     * @ORM\ManyToOne(targetEntity="User", inversedBy="job_orders_events")
+     * @ORM\JoinColumn(name="create_user_id", referencedColumnName="id", nullable=true)
+     */
+    protected $user;
+
+    // job order event was applied to
+    /**
+     * @ORM\ManyToOne(targetEntity="JobOrder", inversedBy="events")
+     * @ORM\JoinColumn(name="job_order_id", referencedColumnName="id")
+     */
+    protected $job_order;
+
+	public function __construct()
+    {
+        $this->date_create = new DateTime();
+    }
+
+    public function getID()
+    {
+        return $this->id;
+    }
+
+    public function getDateCreate()
+    {
+        return $this->date_create;
+    }
+
+    public function setDateHappen(DateTime $date)
+    {
+        $this->date_happen = $date;
+        return $this;
+    }
+
+    public function getDateHappen()
+    {
+        return $this->date_happen;
+    }
+
+    public function setTypeID($type_id)
+    {
+        $this->type_id = $type_id;
+        return $this;
+    }
+
+    public function getTypeID()
+    {
+        return $this->type_id;
+    }
+
+    public function getTypeName()
+    {
+        return JOEventType::getName($this->type_id);
+    }
+
+    public function setUser(User $user)
+    {
+        $this->user = $user;
+        return $this;
+    }
+
+    public function getUser()
+    {
+        return $this->user;
+    }
+
+    public function setJobOrder(JobOrder $job_order)
+    {
+        $this->job_order = $job_order;
+        return $this;
+    }
+
+    public function getJobOrder()
+    {
+        return $this->job_order;
+    }
+}
diff --git a/src/Entity/JobOrder.php b/src/Entity/JobOrder.php
index be1cf920..bac98580 100644
--- a/src/Entity/JobOrder.php
+++ b/src/Entity/JobOrder.php
@@ -8,7 +8,9 @@ use Symfony\Component\Validator\Constraints as Assert;
 
 use CrEOF\Spatial\PHP\Types\Geometry\Point;
 use DateTime;
+
 use App\Ramcar\ModeOfPayment;
+use App\Ramcar\JOStatus;
 
 /**
  * @ORM\Entity
@@ -217,6 +219,12 @@ class JobOrder
      */
     protected $promo_detail;
 
+    // events triggered
+    /**
+     * @ORM\OneToMany(targetEntity="JOEvent", mappedBy="job_order")
+     */
+    protected $events;
+
     public function __construct()
     {
         $this->date_create = new DateTime();
@@ -228,6 +236,8 @@ class JobOrder
         $this->or_name = '';
         $this->landmark = '';
         $this->promo_detail = '';
+
+        $this->events = new ArrayCollection();
     }
 
     public function getID()
@@ -571,4 +581,25 @@ class JobOrder
     {
         return $this->promo_detail;
     }
+
+    public function getEvents()
+    {
+        return $this->events;
+    }
+
+    public function isClosed()
+    {
+        if ($this->status == JOStatus::CANCELLED)
+            return true;
+
+        if ($this->status == JOStatus::FULFILLED)
+            return true;
+
+        return false;
+    }
+
+    public function isOpen()
+    {
+        return !$this->isClosed();
+    }
 }
diff --git a/src/Ramcar/JOEventType.php b/src/Ramcar/JOEventType.php
new file mode 100644
index 00000000..c7ade56f
--- /dev/null
+++ b/src/Ramcar/JOEventType.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Ramcar;
+
+class JOEventType extends NameValue
+{
+    const CREATE        = 'create';
+    const HUB_ASSIGN    = 'hub_assign';
+    const RIDER_ASSIGN  = 'rider_assign';
+    const CANCEL        = 'cancel';
+    const FULFILL       = 'fulfill';
+
+    const COLLECTION = [
+        'create' => 'Created',
+        'hub_assign' => 'Assigned to Hub',
+        'rider_assign' => 'Assigned Rider',
+        'cancel' => 'Cancelled',
+        'fulfill' => 'Fulfilled',
+    ];
+}
diff --git a/templates/job-order/form.html.twig b/templates/job-order/form.html.twig
index afbfac8f..db19e928 100644
--- a/templates/job-order/form.html.twig
+++ b/templates/job-order/form.html.twig
@@ -725,17 +725,17 @@
 										<div class="col-lg-12">
 											<div class="m-timeline-2">
 												<div class="m-timeline-2__items  m--padding-top-25 m--padding-bottom-25">
-													{% for item in timeline %}
+													{% for event in obj.getEvents %}
 														<div class="m-timeline-2__item{{ loop.index > 1 ? ' m--margin-top-40' }}">
 															<span class="m-timeline-2__item-time">
-																<small>{{ item.date }}</small>
-																<div>{{ item.time }}</div>
+																<small>{{ event.getDateHappen|date("M j, Y") }}</small>
+																<div>{{ event.getDateHappen|date("h:i:s a") }}</div>
 															</span>
 															<div class="m-timeline-2__item-cricle">
-																<i class="fa fa-genderless" style="color: {{ item.color }};"></i>
+																<i class="fa fa-genderless" style="color: #f4516c;"></i>
 															</div>
 															<div class="m-timeline-2__item-text  m--padding-top-5">
-																{{ item.event }}
+																{{ event.getTypeName }} by {{ event.getUser.getFullName|default('Application') }}
 															</div>
 														</div>
 													{% endfor %}
@@ -776,7 +776,7 @@
 										{% if mode != 'update-all' %}
 											<button type="submit" class="btn btn-success">{{ mode == 'update-fulfillment' ? 'Fulfill' : 'Submit' }}</button>
 										{% endif %}
-										{% if mode != 'create' and mode != 'create_vehicle' and is_granted('joborder.cancel') and obj.getStatus != 'status_cancelled' %}
+										{% if mode != 'create' and mode != 'create_vehicle' and is_granted('joborder.cancel') and obj.isOpen %}
 											<a href="{{ url('jo_cancel', {'id': obj.getID}) }}" class="btn btn-danger btn-cancel-job-order">Cancel Job Order</button>
 										{% endif %}
 										{% if mode != 'create' %}