diff --git a/digitalglarus/forms.py b/digitalglarus/forms.py
index f5bb53aa..b6fb9ea7 100644
--- a/digitalglarus/forms.py
+++ b/digitalglarus/forms.py
@@ -8,7 +8,7 @@ from utils.models import BillingAddress
 from utils.forms import LoginFormMixin, SignupFormMixin, BillingAddressForm
 
 from .models import MembershipType, MembershipOrder
-from .models import Booking
+from .models import Booking, BookingOrder
 
 
 class LoginForm(LoginFormMixin):
@@ -74,6 +74,21 @@ class BookingBillingForm(BillingAddressForm):
         }
 
 
+class CancelBookingForm(forms.ModelForm):
+    status = forms.CharField(widget=forms.HiddenInput(), required=False)
+
+    class Meta:
+        model = BookingOrder
+        fields = ['status']
+
+    def clean(self):
+        booking = self.instance.booking
+        days_to_start = (booking.start_date - datetime.today().date()).days
+        if days_to_start < 7:
+            raise forms.ValidationError("You can't cancel your booking")
+        return self.cleaned_data
+
+
 class BookingDateForm(forms.Form):
     start_date = forms.DateField(required=False,
                                  widget=forms.TextInput(attrs={'id': 'booking-date-1',
diff --git a/digitalglarus/migrations/0023_bookingorder_status.py b/digitalglarus/migrations/0023_bookingorder_status.py
new file mode 100644
index 00000000..80f6cd83
--- /dev/null
+++ b/digitalglarus/migrations/0023_bookingorder_status.py
@@ -0,0 +1,20 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9.4 on 2016-11-25 03:04
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('digitalglarus', '0022_auto_20161023_0218'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='bookingorder',
+            name='status',
+            field=models.PositiveIntegerField(choices=[(1, 'Approved'), (2, 'Cancelled')], default=1),
+        ),
+    ]
diff --git a/digitalglarus/models.py b/digitalglarus/models.py
index ae91db47..82f6b35b 100644
--- a/digitalglarus/models.py
+++ b/digitalglarus/models.py
@@ -238,9 +238,18 @@ class Booking(models.Model):
 
 
 class BookingOrder(Ordereable, models.Model):
+
+    APPROVED, CANCELLED = range(1, 3)
+
+    STATUS_CHOICES = (
+        (APPROVED, 'Approved'),
+        (CANCELLED, 'Cancelled')
+    )
+
     booking = models.OneToOneField(Booking)
     original_price = models.FloatField()
     special_month_price = models.FloatField()
+    status = models.PositiveIntegerField(choices=STATUS_CHOICES, default=1)
 
     @classmethod
     def user_has_not_bookings(cls, user):
@@ -255,6 +264,15 @@ class BookingOrder(Ordereable, models.Model):
     def booking_days(self):
         return (self.booking.end_date - self.booking.start_date).days + 1
 
+    def cancellation_available(self):
+        days_to_start = (booking.start_date - datetime.today()).days
+        return False if days_to_start < 7 else True
+
+
+    def cancel(self):
+        self.status = self.CANCELLED
+        self.save()
+
 
 class Supporter(models.Model):
     name = models.CharField(max_length=200)
diff --git a/digitalglarus/templates/digitalglarus/booking_orders_detail.html b/digitalglarus/templates/digitalglarus/booking_orders_detail.html
index 9dd8a25c..2cfe2f76 100644
--- a/digitalglarus/templates/digitalglarus/booking_orders_detail.html
+++ b/digitalglarus/templates/digitalglarus/booking_orders_detail.html
@@ -20,10 +20,22 @@
           <div class="payment-box">
             <h2 class="section-heading payment-head">Your Booking Detail</h2>
             <hr class="greyline-long">
+            {% bootstrap_form_errors form type='non_fields'%}
+            {% if messages %}
+                <ul class="list-unstyled">
+                {% for message in messages %}
+                    <li>{{ message }}</li>
+                {% endfor %}
+                </ul>
+            {% endif %}
+
             <h2 class="billing-head">Invoice<btn class="btn btn-primary btn-grey btn-edit  print hidden-print" data-print="price">Get PDF</btn></h2>                              
                                
             <h2 class="order-head">Order Number</h2>
             <h2 class="member-name">#{{order.id}}</h2>
+
+            <h2 class="order-head">Status</h2>
+            <h2 class="member-name">{{order.get_status_display}}</h2>
                                 
             <h2 class="order-head">Billed to :</h2>
             <h2 class="history-name">{{user.name}}<br>
@@ -55,11 +67,50 @@
 
             <p class="">
               View my bookings <br/><a class="btn btn-primary btn-sm btn-blck "  href="{% url 'digitalglarus:booking_orders_list' %}">Go to my page</a>            
-            </p>         
+            </p> 
+            {% if not order.get_status_display == 'Cancelled' %}
+            <form method="POST" action="">
+              {% csrf_token %} 
+              <p class="">
+                <input type="hidden" name="start_date" value="{{order.booking.start_date}}">
+                <!-- <a class=""  href="{% url 'digitalglarus:booking_orders_list' %}" data-toggle="modal" data-target="#cancel-booking-modal">Cancel booking</a> -->
+                <button type="button" class="btn btn-edit btn-sm btn-blue" data-toggle="modal" data-target="#cancel-booking-modal">Cancel booking</button>
+              </p>
+              
+
+              <div class="modal fade bs-example-modal-sm" id="cancel-booking-modal" tabindex="-1" role="dialog">
+                <div class="modal-dialog" role="document">
+                  <div class="modal-content">
+                    <div class="modal-header">
+                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                      <h4 class="modal-title">Cancel booking</h4>
+                    </div>
+                    <div class="modal-body">
+                      <p>Do you want to cancel your booking?</p>
+                    </div>
+                    <div class="modal-footer text-center">
+                      <button type="button" class="btn btn-primary btn-grey" data-dismiss="modal">No</button>
+                      <button type="submit" class="btn btn-primary">Yes</button>
+                    </div>
+                  </div><!-- /.modal-content -->
+                </div><!-- /.modal-dialog -->
+              </div><!-- /.modal -->
+
+            </form>
+            {% endif %}
+
+
+
+
+
+
           </div>
 
     </div>              
      
+
+
+
     <div class="col-xs-12 col-sm-4 col-lg-4 wow fadeInDown hidden-print"> 
         <div class="order-summary">
            <div class="header text-center">
diff --git a/digitalglarus/templates/digitalglarus/emails/booking_cancellation.html b/digitalglarus/templates/digitalglarus/emails/booking_cancellation.html
new file mode 100644
index 00000000..f2294335
--- /dev/null
+++ b/digitalglarus/templates/digitalglarus/emails/booking_cancellation.html
@@ -0,0 +1,137 @@
+{% load static from staticfiles %}
+<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Oxygen Invoice</title>
+</head>
+<body bgcolor="#f7f7f7" style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; color: white; margin: 0;">
+<style type="text/css">
+@media only screen and (max-width: 480px) {
+  table[class*="container-for-gmail-android"] {
+    min-width: 290px !important; width: 100% !important;
+  }
+  img[class="force-width-gmail"] {
+    display: none !important; width: 0 !important; height: 0 !important;
+  }
+  table[class="w320"] {
+    width: 320px !important;
+  }
+  td[class*="mobile-header-padding-left"] {
+    width: 160px !important; padding-left: 0 !important;
+  }
+  td[class*="mobile-header-padding-right"] {
+    width: 160px !important; padding-right: 0 !important;
+  }
+  td[class="header-lg"] {
+    font-size: 24px !important; padding-bottom: 5px !important;
+  }
+  td[class="content-padding"] {
+    padding: 5px 0 5px !important;
+  }
+  td[class="button"] {
+    padding: 5px 5px 30px !important;
+  }
+  td[class*="free-text"] {
+    padding: 10px 18px 30px !important;
+  }
+  td[class~="mobile-hide-img"] {
+    display: none !important; height: 0 !important; width: 0 !important; line-height: 0 !important;
+  }
+  td[class~="item"] {
+    width: 140px !important; vertical-align: top !important;
+  }
+  td[class~="quantity"] {
+    width: 50px !important;
+  }
+  td[class~="price"] {
+    width: 90px !important;
+  }
+  td[class="item-table"] {
+    padding: 30px 20px !important;
+  }
+  td[class="mini-container-left"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+  td[class="mini-container-right"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+}
+</style>
+<table align="center" cellpadding="0" cellspacing="0" class="container-for-gmail-android" width="100%" style="border-collapse: collapse !important; min-width: 600px; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="left" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff url(http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg) repeat-x;" bgcolor="#ffffff">
+      <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+      <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; background: transparent;"><tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px; background-color: #0f1221" align="center">
+            <!--[if gte mso 9]>
+            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:80px; v-text-anchor:middle;">
+              <v:fill type="tile" src="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" color="#ffffff" />
+              <v:textbox inset="0,0,0,0">
+            <![endif]-->
+              <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+                <table cellpadding="0" cellspacing="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="pull-left mobile-header-padding-left" style="vertical-align: middle; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: left; line-height: 21px; width: 290px; padding-left: 10px;" align="left" valign="middle">
+                      <a href="{{base_url}}" style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; color: #676767; text-decoration: none !important;"><img width="137" src="{{base_url}}{% static 'digitalglarus/img/logo_white.svg' %}" alt="logo" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; border: none;"></a>
+                    </td>
+                    <td class="pull-right mobile-header-padding-right" style="color: #4d4d4d; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; text-align: right; line-height: 21px; width: 290px; padding-left: 10px;" align="right">
+                    </td>
+                  </tr></table>
+</center>
+              <!--[if gte mso 9]>
+              </v:textbox>
+            </v:rect>
+            <![endif]-->
+            </td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7; padding: 20px 0 5px;" class="content-padding" bgcolor="#f7f7f7">
+      <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="header-lg" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 32px; color: #4d4d4d; text-align: center; line-height: normal; font-weight: 700; padding: 35px 0 0;" align="center">
+              Your booking is cancelled.
+            </td>
+          </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="free-text" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; width: 100% !important; padding: 40px 60px 20px;" align="center">
+             Your booking order from following dates has been cancelled. <br/> {{booking.start_date|date}} to {{booking.end_date|date}} <br/>
+             You can book new dates by visiting our homepage,<br/> or simply clicking the button below. 
+            </td>
+          </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="button" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 30px 0;" align="center">
+              <div style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<!--[if mso]>
+                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:45px;v-text-anchor:middle;width:155px;" arcsize="15%" strokecolor="#ffffff" fillcolor="#ff6f6f">
+                  <w:anchorlock/>
+                  <center style="color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;">My Account</center>
+                </v:roundrect>
+              <![endif]--><a href="{{ base_url }}{% url 'digitalglarus:booking' %}" style="border-radius: 2px; color: #ffffff; display: inline-block; font-family: 'Montserrat', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 13px; font-weight: 600; line-height: 37px; text-align: center; text-decoration: none !important; width: 120px; -webkit-text-size-adjust: none; mso-hide: all; background: #5699b9;">BOOK A DATE</a>
+</div>
+            </td>
+          </tr>
+</table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="height: 100px; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7;" bgcolor="#f7f7f7">
+      <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 15px; color: #777777; text-align: center; line-height: 21px;;" align="center">
+              <strong style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">Your Digital Glarus Team</strong><br style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+</td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+</table>
+</body>
+</html>
+
diff --git a/digitalglarus/templates/digitalglarus/emails/booking_cancellation.txt b/digitalglarus/templates/digitalglarus/emails/booking_cancellation.txt
new file mode 100644
index 00000000..f2294335
--- /dev/null
+++ b/digitalglarus/templates/digitalglarus/emails/booking_cancellation.txt
@@ -0,0 +1,137 @@
+{% load static from staticfiles %}
+<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Oxygen Invoice</title>
+</head>
+<body bgcolor="#f7f7f7" style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; color: white; margin: 0;">
+<style type="text/css">
+@media only screen and (max-width: 480px) {
+  table[class*="container-for-gmail-android"] {
+    min-width: 290px !important; width: 100% !important;
+  }
+  img[class="force-width-gmail"] {
+    display: none !important; width: 0 !important; height: 0 !important;
+  }
+  table[class="w320"] {
+    width: 320px !important;
+  }
+  td[class*="mobile-header-padding-left"] {
+    width: 160px !important; padding-left: 0 !important;
+  }
+  td[class*="mobile-header-padding-right"] {
+    width: 160px !important; padding-right: 0 !important;
+  }
+  td[class="header-lg"] {
+    font-size: 24px !important; padding-bottom: 5px !important;
+  }
+  td[class="content-padding"] {
+    padding: 5px 0 5px !important;
+  }
+  td[class="button"] {
+    padding: 5px 5px 30px !important;
+  }
+  td[class*="free-text"] {
+    padding: 10px 18px 30px !important;
+  }
+  td[class~="mobile-hide-img"] {
+    display: none !important; height: 0 !important; width: 0 !important; line-height: 0 !important;
+  }
+  td[class~="item"] {
+    width: 140px !important; vertical-align: top !important;
+  }
+  td[class~="quantity"] {
+    width: 50px !important;
+  }
+  td[class~="price"] {
+    width: 90px !important;
+  }
+  td[class="item-table"] {
+    padding: 30px 20px !important;
+  }
+  td[class="mini-container-left"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+  td[class="mini-container-right"] {
+    padding: 0 15px 15px !important; display: block !important; width: 290px !important;
+  }
+}
+</style>
+<table align="center" cellpadding="0" cellspacing="0" class="container-for-gmail-android" width="100%" style="border-collapse: collapse !important; min-width: 600px; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="left" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff url(http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg) repeat-x;" bgcolor="#ffffff">
+      <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+      <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; background: transparent;"><tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px; background-color: #0f1221" align="center">
+            <!--[if gte mso 9]>
+            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:80px; v-text-anchor:middle;">
+              <v:fill type="tile" src="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" color="#ffffff" />
+              <v:textbox inset="0,0,0,0">
+            <![endif]-->
+              <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+                <table cellpadding="0" cellspacing="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="pull-left mobile-header-padding-left" style="vertical-align: middle; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: left; line-height: 21px; width: 290px; padding-left: 10px;" align="left" valign="middle">
+                      <a href="{{base_url}}" style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; color: #676767; text-decoration: none !important;"><img width="137" src="{{base_url}}{% static 'digitalglarus/img/logo_white.svg' %}" alt="logo" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; border: none;"></a>
+                    </td>
+                    <td class="pull-right mobile-header-padding-right" style="color: #4d4d4d; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; text-align: right; line-height: 21px; width: 290px; padding-left: 10px;" align="right">
+                    </td>
+                  </tr></table>
+</center>
+              <!--[if gte mso 9]>
+              </v:textbox>
+            </v:rect>
+            <![endif]-->
+            </td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7; padding: 20px 0 5px;" class="content-padding" bgcolor="#f7f7f7">
+      <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="header-lg" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 32px; color: #4d4d4d; text-align: center; line-height: normal; font-weight: 700; padding: 35px 0 0;" align="center">
+              Your booking is cancelled.
+            </td>
+          </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="free-text" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; width: 100% !important; padding: 40px 60px 20px;" align="center">
+             Your booking order from following dates has been cancelled. <br/> {{booking.start_date|date}} to {{booking.end_date|date}} <br/>
+             You can book new dates by visiting our homepage,<br/> or simply clicking the button below. 
+            </td>
+          </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td class="button" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 30px 0;" align="center">
+              <div style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<!--[if mso]>
+                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:45px;v-text-anchor:middle;width:155px;" arcsize="15%" strokecolor="#ffffff" fillcolor="#ff6f6f">
+                  <w:anchorlock/>
+                  <center style="color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;">My Account</center>
+                </v:roundrect>
+              <![endif]--><a href="{{ base_url }}{% url 'digitalglarus:booking' %}" style="border-radius: 2px; color: #ffffff; display: inline-block; font-family: 'Montserrat', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 13px; font-weight: 600; line-height: 37px; text-align: center; text-decoration: none !important; width: 120px; -webkit-text-size-adjust: none; mso-hide: all; background: #5699b9;">BOOK A DATE</a>
+</div>
+            </td>
+          </tr>
+</table>
+</center>
+    </td>
+  </tr>
+<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td align="center" valign="top" width="100%" style="height: 100px; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #f7f7f7;" bgcolor="#f7f7f7">
+      <center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+        <table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Oxygen', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+<td style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 15px; color: #777777; text-align: center; line-height: 21px;;" align="center">
+              <strong style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">Your Digital Glarus Team</strong><br style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
+</td>
+          </tr></table>
+</center>
+    </td>
+  </tr>
+</table>
+</body>
+</html>
+
diff --git a/digitalglarus/urls.py b/digitalglarus/urls.py
index 09678b96..004d60ec 100644
--- a/digitalglarus/urls.py
+++ b/digitalglarus/urls.py
@@ -28,6 +28,8 @@ urlpatterns = [
     url(_(r'booking/payment/?$'), BookingPaymentView.as_view(), name='booking_payment'),
     url(_(r'booking/orders/(?P<pk>\d+)/?$'), OrdersBookingDetailView.as_view(),
         name='booking_orders_detail'),
+    # url(_(r'booking/orders/(?P<pk>\d+)/cancel/?$'), BookingCancelView.as_view(),
+    #     name='booking_orders_cancel'),
     url(_(r'booking/orders/?$'), BookingOrdersListView.as_view(),
         name='booking_orders_list'),
     url(_(r'membership/payment/?$'), MembershipPaymentView.as_view(), name='membership_payment'),
diff --git a/digitalglarus/views.py b/digitalglarus/views.py
index 39b7ae32..13cf9908 100644
--- a/digitalglarus/views.py
+++ b/digitalglarus/views.py
@@ -13,7 +13,7 @@ from django.utils.translation import get_language
 from djangocms_blog.models import Post
 from django.contrib import messages
 from django.http import JsonResponse
-from django.views.generic import View, DetailView, ListView
+from django.views.generic import View, DetailView, ListView, DeleteView
 
 
 from .models import Supporter
@@ -34,7 +34,7 @@ from utils.models import UserBillingAddress
 
 
 from .forms import LoginForm, SignupForm, MembershipBillingForm, BookingDateForm,\
-    BookingBillingForm
+    BookingBillingForm, CancelBookingForm
 
 from .models import MembershipType, Membership, MembershipOrder, Booking, BookingPrice,\
     BookingOrder
@@ -568,14 +568,63 @@ class OrdersMembershipDetailView(LoginRequiredMixin, DetailView):
         return context
 
 
-class OrdersBookingDetailView(LoginRequiredMixin, DetailView):
+# class BookingCancelView(FormView):
+#     success_message = "Your booking has been cancelled"
+#     model = BookingOrder
+#     form_class = CancelBookingForm
+
+#     def get_success_url(self):
+#         pk = self.kwargs.get(self.pk_url_kwarg)
+#         return reverse_lazy('digitalglarus:booking_orders_list', kwargs={'pk': pk})
+
+#     def form_valid(self, form):
+#         booking_order = self.get_object()
+#         # booking_order.cancel()
+#         request = self.request
+
+#         return HttpResponseRedirect(self.get_success_url())
+
+
+class OrdersBookingDetailView(LoginRequiredMixin, UpdateView):
     template_name = "digitalglarus/booking_orders_detail.html"
     context_object_name = "order"
     login_url = reverse_lazy('digitalglarus:login')
+    form_class = CancelBookingForm
+    success_message = "You booking has been cancelled"
     # permission_required = ['view_hostingorder']
     model = BookingOrder
 
-    def get_context_data(self, *args, **kwargs):
+    def get_success_url(self):
+        pk = self.kwargs.get(self.pk_url_kwarg)
+        return reverse_lazy('digitalglarus:booking_orders_detail', kwargs={'pk': pk})
+
+    def form_valid(self, form):
+
+        booking_order = self.get_object()
+        booking_order.cancel()
+        request = self.request
+
+        context = {
+            'order': booking_order,
+            'booking': booking_order.booking,
+            'base_url': "{0}://{1}".format(request.scheme, request.get_host())
+
+        }
+        email_data = {
+            'subject': 'Your membership has been charged',
+            'to': request.user.email,
+            'context': context,
+            'template_name': 'booking_cancellation',
+            'template_path': 'digitalglarus/emails/'
+        }
+        email = BaseEmail(**email_data)
+        email.send()
+
+        messages.add_message(self.request, messages.SUCCESS, self.success_message)
+
+        return HttpResponseRedirect(self.get_success_url())
+
+    def get_context_data(self, **kwargs):
 
         context = super(OrdersBookingDetailView, self).get_context_data(**kwargs)