diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e2a7a6c1f..48f4c98c9 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -4005,7 +4005,7 @@
         },
         "onetime": {
           "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+          "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
           "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
           "dev": true
         },
@@ -12967,9 +12967,9 @@
       }
     },
     "vue": {
-      "version": "2.5.17",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.17.tgz",
-      "integrity": "sha512-mFbcWoDIJi0w0Za4emyLiW72Jae0yjANHbCVquMKijcavBGypqlF7zHRgMa5k4sesdv7hv2rB4JPdZfR+TPfhQ=="
+      "version": "2.5.22",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.22.tgz",
+      "integrity": "sha512-pxY3ZHlXNJMFQbkjEgGVMaMMkSV1ONpz+4qB55kZuJzyJOhn6MSy/YZdzhdnumegNzVTL/Dn3Pp4UrVBYt1j/g=="
     },
     "vue-eslint-parser": {
       "version": "4.0.3",
diff --git a/frontend/package.json b/frontend/package.json
index bc23a6435..82ecbe7b1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -31,7 +31,7 @@
     "popper.js": "^1.14.4",
     "socket.io-client": "^2.1.1",
     "v-dragged": "0.0.5",
-    "vue": "^2.5.17",
+    "vue": "^2.5.22",
     "vue-full-calendar": "^2.7.0",
     "vue-router": "^3.0.2",
     "vue-video-player": "^5.0.2",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 3ac1c2ac1..682ceaa95 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -15,7 +15,7 @@ limitations under the License.*/
 <template>
   <div id="App">
     <Header />
-    <div id="fixed-viewport-app" :style="{width:`${x}px`, height:`${y}px`,}">
+    <div :style="style">
       <Alert />
       <ExamAlert />
       <Nav v-if="isLoggedIn" />
@@ -23,12 +23,12 @@ limitations under the License.*/
       <Feedback />
       <Response />
     </div>
-    <Footer />
+      <Footer />
   </div>
 </template>
 
 <script>
-  import { mapState, mapMutations, mapActions } from 'vuex'
+  import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
   import Alert from './alert'
   import ExamAlert from './exam-alert'
   import Header from './layout/header'
@@ -40,37 +40,19 @@ limitations under the License.*/
   export default {
     name: 'App',
     components: { Nav, Alert, ExamAlert, Header, Socket, Footer, Feedback, Response },
-    created() {
-      this.getSize()
-    },
-    mounted() {
-      this.$nextTick(function() {
-        window.addEventListener('resize', this.getSize)
-      })
-    },
     computed: {
-      ...mapState(['isLoggedIn']),
-    },
-    data() {
-      return {
-        x: 0,
-        y: 0,
+      ...mapState(['isLoggedIn', 'showSchedulingIndicator']),
+      style() {
+        let output = {marginTop: 72+'px', width: '100%', overflowY: 'auto'}
+        if (this.showSchedulingIndicator) {
+          output['marginBottom'] = 100+'px'
+        }
+        if (!this.showSchedulingIndicator) {
+          output['marginBottom'] = 40+'px'
+        }
+        return output
       }
     },
-    methods: {
-      ...mapMutations(['updateViewportSizes']),
-      getSize() {
-        this.x = window.innerWidth
-        this.y = window.innerHeight - 110
-        this.updateStore()
-      },
-      updateStore() {
-        let x =  parseInt(this.x)
-        let y = parseInt(this.y)
-        this.updateViewportSizes({w: x})
-        this.updateViewportSizes({h: y})
-      }
-    }
   }
 </script>
 
@@ -100,8 +82,12 @@ limitations under the License.*/
     display: block;
     overflow-y: auto;
     overflow-x: auto;
+    background-color: blue;
     margin: 0px;
     padding: 0px;
+    position: absolute;
+    left: 0px;
+    top: 72px;
   }
   .view-screen-title {
     font-family: "Helvetica Neue",Arial,sans-serif;
diff --git a/frontend/src/admin.vue b/frontend/src/admin.vue
index 20f620786..62311f4f0 100644
--- a/frontend/src/admin.vue
+++ b/frontend/src/admin.vue
@@ -32,16 +32,17 @@
 <script>
   import Vue from 'vue'
 
-  import { mapState, mapActions, mapMutations } from 'vuex'
+  import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
   export default {
     name: "Admin",
     created() {
       this.loginIframe()
     },
     computed: {
-      ...mapState(['viewPortSizes', 'iframeLogedIn', 'adminNavigation']),
+      ...mapGetters(['view_port']),
+      ...mapState(['iframeLogedIn', 'adminNavigation']),
       frameHeight() {
-        return this.viewPortSizes.h - 80
+        return this.view_port.h - 80
       },
       frameStyle() {
         return {
diff --git a/frontend/src/assets/css/q.css b/frontend/src/assets/css/q.css
index 5eef8e5f2..7706019a8 100644
--- a/frontend/src/assets/css/q.css
+++ b/frontend/src/assets/css/q.css
@@ -70,7 +70,7 @@
 }
 
 .q-calendar-margins {
-  margin-top: -35px;
+  margin-top: -15px;
   margin-left: 15px;
   margin-right: 15px;
   padding: 0px;
diff --git a/frontend/src/booking/booking-modal.vue b/frontend/src/booking/booking-modal.vue
index b7e08c4e2..da0a0c4ca 100644
--- a/frontend/src/booking/booking-modal.vue
+++ b/frontend/src/booking/booking-modal.vue
@@ -8,6 +8,7 @@
            lazy
            @cancel="cancel"
            @ok="postEvent"
+           @show="show"
            hide-header
            size="md">
     <div v-if="showModal">
@@ -103,6 +104,9 @@
         this.toggleSchedulingIndicator(true)
         this.setClickedDate(null)
       },
+      show() {
+        this.selectedInvigilator = null
+      },
       postEvent(e) {
         e.preventDefault()
         let start = new moment(this.date.start).utc()
diff --git a/frontend/src/booking/calendar.vue b/frontend/src/booking/calendar.vue
index c1ff7d7b5..b04a9976e 100644
--- a/frontend/src/booking/calendar.vue
+++ b/frontend/src/booking/calendar.vue
@@ -1,15 +1,42 @@
 <template>
-    <div :style="mainDivStyle">
-      <SchedulingIndicator :cancel="cancel" />
+    <div style="position: relative" ref="calcontainer">`
+      <div style="display: flex; justify-content: flex-start">
+        <div style="padding: 0; margin: -25px 0px -5px 15px">
+          <b-form inline>
+            <label class="mr-2">Filter Exams
+              <font-awesome-icon icon="filter"
+                                 class="m-0 p-0"
+                                 style="font-size: 1rem;"/>
+            </label>
+            <b-form-input v-model="searchTerm" @input="filter"></b-form-input>
+          </b-form>
+        </div>
+        <div class="w-50 mt-2 ml-3 pl-3"
+             style="display: flex; justify-content: space-between;"
+             v-if="calView === 'listYear'">
+          <template v-for="col in roomLegendArray">
+            <div>
+              <b-badge :style="{backgroundColor: `${col.color}`}">
+                <span :style="{color: `${col.color}`}">legend</span>
+              </b-badge>
+              <span>{{ col.title }}</span>
+            </div>
+          </template>
+        </div>
+      </div>
       <keep-alive>
         <full-calendar ref="bookingcal"
                        key="bookingcal"
                        id="bookingcal"
                        class="q-calendar-margins"
+                       @event-selected="eventSelected"
                        @view-render="viewRender"
                        @event-created="selectEvent"
-                       :events="events"
-                       :config="setup"></full-calendar>
+                       @event-render="eventRender"
+                       :events="events()"
+                       :config="setup">
+
+        </full-calendar>
       </keep-alive>
       <div class="w-50 mt-2 ml-3 pl-3" style="display: flex; justify-content: space-between;"
            v-if="calView === 'month'">
@@ -25,89 +52,117 @@
     <BookingModal />
     <ExamInventoryModal v-if="showExamInventoryModal" />
     <OtherBookingModal />
+    <EditBookingModal />
   </div>
 </template>
 
 <script>
-  import { mapActions, mapGetters, mapMutations, mapState, } from 'vuex'
   import { FullCalendar } from 'vue-full-calendar'
+  import { mapActions, mapGetters, mapMutations, mapState, } from 'vuex'
   import BookingModal from './booking-modal'
   import DropdownCalendar from './dropdown-calendar'
-  import OtherBookingModal from './other-booking-modal'
+  import EditBookingModal from './edit-booking-modal'
   import ExamInventoryModal from './exam-inventory-modal'
   import moment from 'moment'
-  import 'fullcalendar/dist/fullcalendar.css'
-  import 'fullcalendar-scheduler'
+  import OtherBookingModal from './other-booking-modal'
   import SchedulingIndicator from './scheduling-indicator'
+  import 'fullcalendar-scheduler'
+  import 'fullcalendar/dist/fullcalendar.css'
 
   export default {
     name: 'Calendar',
-    components: { SchedulingIndicator, BookingModal, DropdownCalendar, ExamInventoryModal, FullCalendar, OtherBookingModal },
+    components: {
+      BookingModal,
+      DropdownCalendar,
+      EditBookingModal,
+      ExamInventoryModal,
+      FullCalendar,
+      OtherBookingModal,
+      SchedulingIndicator,
+    },
     mounted() {
       this.initialize()
+      this.$root.$on('agendaDay', () => { this.agendaDay() })
+      this.$root.$on('agendaWeek', () => { this.agendaWeek() })
+      this.$root.$on('cancel', () => { this.cancel() })
+      this.$root.$on('initialize', () => { this.initialize() })
+      this.$root.$on('month', () => { this.month() })
       this.$root.$on('next', () => { this.next() })
+      this.$root.$on('options', (option) => { this.options(option) })
       this.$root.$on('prev', () => { this.prev() })
       this.$root.$on('today', () => { this.today() })
-      this.$root.$on('month', () => { this.month() })
       this.$root.$on('unselect', () => { this.unselect() })
-      this.$root.$on('agendaWeek', () => { this.agendaWeek() })
-      this.$root.$on('agendaDay', () => { this.agendaDay() })
-      this.$root.$on('options', (option) => { this.options(option) })
-      this.$root.$on('initialize', () => { this.initialize() })
+      this.$root.$on('updateEvent', (event, params) => { this.updateEvent(event, params) })
     },
     data() {
       return {
+        tempEvent: null,
+        listView: false,
+        searchTerm: '',
         setup: {
-          selectable: false,
-          unselectCancel: '.modal, .modal-content',
+          defaultView: 'agendaWeek',
           editable: false,
-          schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
-          showNonCurrentDates: false,
           fixedWeekCount: false,
-          navLinks: true,
+          header: {
+            left: null,
+            center: null,
+            right: null
+          },
           height: 'auto',
+          maxTime: '18:00:00',
+          minTime: '07:00:00',
+          navLinks: true,
+          resources: [],
+          schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
+          selectable: false,
+          showNonCurrentDates: false,
           timezone: 'local',
-          defaultView: 'agendaWeek',
+          unselectCancel: '.modal, .modal-content',
+          weekends: false,
           views: {
             agendaDay: {
               allDaySlot: false,
               groupByResource: true,
+              nowIndicator: true,
             },
             agendaWeek: {
               allDaySlot: false,
               groupByDateAndResource: true,
+              nowIndicator: true,
+            },
+            list: {
+              listDayAltFormat: false,
             },
             month: {
               allDaySlot: false,
               groupByResource: false,
             },
           },
-          resources: [],
-          weekends: false,
-          maxTime: '18:00:00',
-          minTime: '07:00:00',
-          header: {
-            left: null,
-            center: null,
-            right: null
-          },
         },
       }
     },
     computed: {
-      ...mapGetters(['calendar_events', 'room_resources']),
+      ...mapGetters(['calendar_events', 'room_resources', 'view_port']),
       ...mapState([
         'calendarSetup',
-        'exams',
+        'editedBooking',
+        'editedBookingOriginal',
         'exam_types',
+        'exams',
+        'rescheduling',
         'scheduling',
         'schedulingOther',
         'selectedExam',
         'showBookingModal',
         'showExamInventoryModal',
         'showSchedulingIndicator',
-        'viewPortSizes',
       ]),
+      adjustment() {
+        if (this.showSchedulingIndicator) {
+          return 240
+        }
+        return 190
+      },
       calView() {
         if (this.calendarSetup && this.calendarSetup.viewName) {
           return this.calendarSetup.viewName
@@ -122,23 +177,20 @@
         }
         return []
       },
-      events() {
-        if (this.calendar_events.length > 0) {
-          return this.calendar_events
-        }
-        return []
-      },
     },
     destroyed() {
       this.setCalendarSetup(null)
     },
     methods: {
-      ...mapActions(['getBookings', 'finishBooking', 'initializeAgenda', 'getExamTypes']),
+      ...mapActions(['getBookings', 'finishBooking', 'initializeAgenda', 'getExamTypes', 'resetRescheduling']),
       ...mapMutations([
         'setCalendarSetup',
         'setClickedDate',
+        'setEditedBooking',
+        'setEditedBookingOriginal',
         'setSelectedExam',
         'toggleBookingModal',
+        'toggleEditBookingModal',
         'toggleOtherBookingModal',
         'toggleScheduling',
         'toggleSchedulingIndicator',
@@ -151,10 +203,54 @@
         this.$refs.bookingcal.fireMethod('changeView', 'agendaWeek')
       },
       cancel() {
-        //passed to child component SchedulingIndicator as prop
+        if (this.editedBooking) {
+          this.toggleEditBookingModal(true)
+          this.toggleSchedulingIndicator(false)
+          this.$refs.bookingcal.fireMethod('rerenderEvents')
+          return
+        }
         this.finishBooking()
         this.options({name: 'selectable', value: false})
       },
+      filter(event) {
+        if (event) {
+          if (!this.listView) {
+            this.$refs.bookingcal.fireMethod('changeView', 'listYear')
+            this.listView = true
+          }
+        }
+        if (!event) {
+          if (this.listView) {
+            let view = this.calendarSetup.viewName
+            this.$refs.bookingcal.fireMethod('changeView', view)
+            this.listView = false
+          }
+        }
+      },
+      removeEvent() {
+        let event = this.editedBooking
+        event.backgroundColor = 'white '
+        this.$refs.bookingcal.fireMethod('updateEvent', event)
+      },
+      eventSelected(event, jsEvent, view) {
+        if (view.name === 'listYear') {
+          this.goToDate(event.start)
+          this.agendaDay()
+          this.searchTerm = ''
+        }
+        this.setEditedBooking(event)
+        if (Object.keys(event).includes('exam')) {
+          this.setSelectedExam(event.exam)
+        }
+        this.setEditedBookingOriginal(event)
+        this.toggleEditBookingModal(true)
+      },
+      updateEvent(event, params) {
+        Object.keys(params).forEach(key => {
+          event[key] = params[key]
+        })
+        this.$refs.bookingcal.fireMethod('updateEvent', event)
+      },
       initialize() {
         this.getExamTypes()
         this.initializeAgenda().then( rooms => {
@@ -169,11 +265,6 @@
           this.getBookings()
         })
       },
-      mainDivStyle() {
-        return {
-          position: 'relative'
-        }
-      },
       month() {
         this.$refs.bookingcal.fireMethod('changeView', 'month')
       },
@@ -190,46 +281,121 @@
         this.$refs.bookingcal.fireMethod('prev')
       },
       selectEvent(event) {
+        //overrides the default behavior (sets event=all day event on the day) to a view change instead
         if (this.calendarSetup.viewName === 'month') {
           this.goToDate(event.start.local())
           this.agendaDay()
           return
         }
-        if (this.scheduling) {
-          this.setClickedDate(event)
+        if (this.rescheduling) {
+          let booking = this.editedBookingOriginal
+          if (Object.keys(booking).includes('exam')) {
+            this.unselect()
+            let { number_of_hours } = this.selectedExam.exam_type
+            let endTime = new moment(event.start).add(number_of_hours, 'h')
+            event.end = endTime
+            this.setClickedDate(event)
+            let tempEvent = {
+              start: new moment(event.start),
+              end: new moment(event.end),
+              title: '(NEW TIME) ' + booking.title,
+              borderColor: booking.room.color,
+              backgroundColor: 'white',
+              resourceId: event.resource.id,
+            }
+            if (this.tempEvent) {
+              this.$refs.bookingcal.fireMethod('removeEvents', [ this.tempEvent.id ])
+              let id = this.tempEvent.id.split('-')
+              tempEvent.id = id[0] + toString(( parseInt(id[1]) + 1 ))
+            } else {
+              tempEvent.id = 'temp-1'
+            }
+            this.tempEvent = tempEvent
+            console.log(tempEvent)
+            this.$refs.bookingcal.fireMethod('renderEvent', tempEvent, true)
+            this.toggleEditBookingModal(true)
+            return
+          }
           this.toggleSchedulingIndicator(false)
+          this.toggleEditBookingModal(true)
+          this.setClickedDate(event)
+          return
+        }
+        this.setClickedDate(event)
+        this.toggleSchedulingIndicator(false)
+        if (this.scheduling) {
           this.toggleBookingModal(true)
         }
         if (this.schedulingOther) {
-          this.setClickedDate(event)
-          this.toggleSchedulingIndicator(false)
           this.toggleOtherBookingModal(true)
         }
       },
       today() {
         this.$refs.bookingcal.fireMethod('today')
       },
+      eventRender(event, el, view) {
+        if (event.exam) {
+          el.find('td.fc-list-item-title.fc-widget-content').html(
+          `<div style="display: flex; justify-content: center; width: 100%;">
+             <div class="ft-wt-600 mr-1"><b>Exam:</b></div>
+             <div class="ft-wt-400 mr-3">${ event.title }</div>
+             <div class="ft-wt-600 mx-1"><b>Event ID:</b></div>
+             <div class="ft-wt-400 mr-3"> ${ event.exam.event_id }</div>
+             <div class="ft-wt-600 mx-1"><b>Writer:</b></div>
+             <div class="ft-wt-400 mr-3">${ event.exam.examinee_name }</div>
+             <div class="ft-wt-600 mx-1"><b>Received:</b></div>
+             <div class="ft-wt-400 mr-3">${ moment(event.exam.exam_received_date).format('MMM Do, YYYY') }</div>
+             <div class="ft-wt-600 mx-1"><b>Expiry:</b></div>
+             <div class="ft-wt-400 mr-3">${ moment(event.exam.exam_expiry).format('MMM Do, YYYY') }</div>
+             <div class="ft-wt-600 mx-1"><b>Method:</b></div>
+             <div class="ft-wt-400 mr-3">${ event.exam.exam_method }</div>
+             <div class="ft-wt-600 mx-1"><b>Invigilator:</b></div>
+             <div class="ft-wt-400 mr-3">${ event.invigilator.invigilator_name }</div>
+           </div>`
+          )
+        }
+        if  (!event.exam) {
+          el.find('td.fc-list-item-title.fc-widget-content').html(
+          `<div style="display: flex; justify-content: flex-center; width: 100%;">
+             <div class="ft-wt-400 mr-3">${ event.title }</div>
+             <div>Non-Exam / Other Event</div>
+           </div>
+          `
+          )
+        }
+      },
+      events() {
+        return this.calendar_events
+      },
       viewRender(view, el) {
-        this.setCalendarSetup({ title: view.title, viewName: view.name })
+        if (view.name !== 'listYear') {
+          this.setCalendarSetup({ title: view.title, viewName: view.name })
+        }
         if (view.name === 'basicDay') {
           this.$refs.bookingcal.fireMethod('changeView', 'agendaDay')
         }
         if (view.name === 'month') {
-          let adj = 75
-          if (this.scheduling || this.schedulingOther) {
-            adj = 130
-          }
-          this.options({name: 'height', value: this.viewPortSizes.h - adj})
+          this.options({ name: 'height', value: window.innerHeight - this.adjustment })
+        }
+        if (view.name === 'agendaDay' || view.name === 'agendaWeek') {
+          this.options({ name: 'height', value: 'auto' })
         }
-        if (view.name === 'agendaDay' || view.name === 'agendaWeek' ) {
-          this.options({name: 'height', value: 'auto'})
+      },
+      events() {
+        if (this.searchTerm) {
+          return this.$store.getters.filtered_calendar_events(this.searchTerm)
         }
+        return this.calendar_events
       },
       unselect() {
-        this.$refs.$bookingcal.fireMethod('unselect')
+        this.$refs.bookingcal.fireMethod('unselect')
       }
     }
   }
 
 
-</script>
\ No newline at end of file
+</script>
+
+<style>
+
+  </style>
\ No newline at end of file
diff --git a/frontend/src/booking/dropdown-calendar.vue b/frontend/src/booking/dropdown-calendar.vue
index a05aba8e8..3dd330693 100644
--- a/frontend/src/booking/dropdown-calendar.vue
+++ b/frontend/src/booking/dropdown-calendar.vue
@@ -28,6 +28,8 @@
               return 'Weekly Planner'
             case 'month':
               return 'Monthly Planner'
+            case 'listYear':
+              return 'Search Results'
             default:
               return 'Weekly Planner'
           }
diff --git a/frontend/src/booking/edit-booking-modal.vue b/frontend/src/booking/edit-booking-modal.vue
new file mode 100644
index 000000000..f674a35ca
--- /dev/null
+++ b/frontend/src/booking/edit-booking-modal.vue
@@ -0,0 +1,551 @@
+<template>
+  <b-modal v-model="modalVisible"
+           :no-close-on-backdrop="true"
+           :no-close-on-esc="true"
+           :no-enforce-focus="true"
+           :lazy="true"
+           :centered="confirm && !minimized"
+           @shown="show"
+           @cancel="cancel"
+           @ok="submit"
+           :hide-footer="confirm"
+           hide-header
+           :size="confirm && !minimized ? 'sm' : 'md'">
+    <div v-if="showModal" style="margin: 10px">
+      <div v-if="minimized || !confirm" style="display: flex; justify-content: space-between">
+        <div><h5>Edit Booking</h5></div>
+        <div>
+          <button class="btn btn-link"
+                  @click="minimize">{{ minimized ? "Maximize" : "Minimize" }}</button>
+        </div>
+      </div>
+      <template v-if="!confirm">
+        <b-form>
+          <b-form-row v-if="examAssociated">
+            <b-col class="mb-2">
+              <div class="display-div-box">
+                <div class="outer-grid-q">
+                  <div class="grid-top-head">Exam Details</div>
+                  <div>Writer:</div>
+                  <div class="grid-1st-col">{{ this.event.exam.examinee_name }}</div>
+                  <div class="grid-2nd-head">Exam:</div>
+                  <div class="grid-2nd-col">{{ this.event.exam.exam_name }}</div>
+                  <div>Method:</div>
+                  <div class="grid-1st-col">{{ this.event.exam.exam_method }}</div>
+                  <div class="grid-2nd-head">Event ID:</div>
+                  <div class="grid-2nd-col">{{ this.event.exam.event_id }}</div>
+                  <div>Duration:</div>
+                  <div class="grid-1st-col">{{ this.event.exam.exam_type.number_of_hours }} hrs</div>
+                  <div class="grid-2nd-head">Expiry:</div>
+                  <div class="grid-2nd-col">{{ expiryDate }}</div>
+                </div>
+              </div>
+            </b-col>
+          </b-form-row>
+          <b-form-row v-if="!examAssociated">
+            <b-col>
+              <b-form-group>
+                <label :style="{color: labelColor}">Event Title</label><br>
+                <b-input :state="state"
+                         id="title"
+                         type="text"
+                         @input.native="checkValue"
+                         v-model="title" />
+              </b-form-group>
+            </b-col>
+            <b-col cols="3">
+              <b-form-group>
+                <label>Collect Fees</label><br>
+                <b-select v-model="fees"
+                          @input.native="checkValue"
+                          :options="feesOptions" />
+              </b-form-group>
+            </b-col>
+          </b-form-row>
+          <b-form-row v-if="fees">
+            <b-col cols="4">
+              <b-form-group>
+                <label>Fee Option</label>
+                <b-select :options="roomRates" v-model="rate" />
+              </b-form-group>
+            </b-col>
+            <b-col cols="8">
+              <b-form-group>
+                <label>Invoice To</label>
+                <b-select :options="invoiceOptions" v-model="invoice"/>
+              </b-form-group>
+            </b-col>
+          </b-form-row>
+          <b-form-row v-if="invoice==='custom'">
+            <b-col cols="12">
+              <b-form-group>
+                <label>Enter Name of Entity to Invoice</label><br>
+                <b-input />
+              </b-form-group>
+            </b-col>
+          </b-form-row>
+          <b-form-row>
+            <b-col cols="6">
+              <b-form-group>
+                <label>Room</label>
+                <b-input readonly :value="resource.name" />
+              </b-form-group>
+            </b-col>
+            <b-col cols="6">
+              <b-form-group>
+                <label>Date</label>
+                <b-input readonly :value="displayDates.date" />
+              </b-form-group>
+            </b-col>
+          </b-form-row>
+          <b-form-row>
+            <b-col class="w-100">
+              <b-form-group>
+                <label>Start Time</label><br>
+                <b-input type="text"
+                         readonly
+                         :value="displayDates.start" />
+              </b-form-group>
+            </b-col>
+            <b-col class="w-100">
+              <b-form-group>
+                <label>End Time</label><br>
+                <b-input type="text"
+                         readonly
+                         :value="displayDates.end" />
+              </b-form-group>
+            </b-col>
+            <b-col cols="5" v-if="examAssociated">
+              <b-form-group>
+                <label>Invigilator</label><br>
+                <b-select :options="invigilatorDropdown"
+                          id="invigilator"
+                          :value="invigilator"
+                          @change="setInvigilator"/>
+              </b-form-group>
+            </b-col>
+            <b-col cols="5" v-if="!examAssociated">
+              <b-form-group>
+                <label>Duration</label><br>
+                <b-button-group>
+                  <b-button @click="decrement" >
+                    <font-awesome-icon icon="minus"
+                                       class="m-0 p-0"
+                                       style="font-size: .8rem; color: white"/>
+                  </b-button>
+                  <b-input :value="displayDuration"
+                           readonly
+                           id="duration"
+                           @change.native="checkValue"
+                           style="border-radius: 0px" />
+                  <b-button @click="increment" >
+                    <font-awesome-icon icon="plus"
+                                       class="m-0 p-0"
+                                       style="font-size: .8rem; color: white"/>
+                  </b-button>
+                </b-button-group>
+              </b-form-group>
+            </b-col>
+          </b-form-row>
+          <b-form-row>
+            <b-col>
+              <b-form-group>
+                <label>Delete Booking?</label><br>
+                <b-btn class="w-100 btn-danger"
+                       @click="confirm = true">Delete</b-btn>
+              </b-form-group>
+            </b-col>
+            <b-col>
+              <b-form-group>
+                <label>Change Date, Time or Room?</label><br>
+                <b-btn class="w-100 mb-0" @click="reschedule">Reschedule</b-btn>
+              </b-form-group>
+            </b-col>
+          </b-form-row>
+          <b-form-row v-if="message">
+            <b-col>
+              <div style="display: flex; justify-content: flex-end; width: 100%;">
+                <span style="color: red; font-weight: 600; font-size: .9rem;">{{ message }}</span>
+              </div>
+            </b-col>
+          </b-form-row>
+        </b-form>
+      </template>
+      <template v-if="confirm">
+        <template v-if="!minimized">
+          Are you sure you want to delete this booking?<br>
+          <div style="display:flex; justify-content: center">
+            <b-button class="mr-2 btn-primary"
+                      @click="confirm = false">No</b-button>
+            <b-button class="ml-2 btn-danger"
+                      @click="clickYes">Yes</b-button>
+          </div>
+        </template>
+      </template>
+    </div>
+  </b-modal>
+</template>
+
+<script>
+  import { mapActions, mapMutations, mapState } from 'vuex'
+  import { adjustColor } from '../store/helpers'
+  import moment from 'moment'
+
+  export default {
+    name: "EditBooking",
+    data() {
+      return {
+        minimized: false,
+        confirm: false,
+        added: 0,
+        invigilator: null,
+        editedFields: [],
+        fees: false,
+        feesOptions: [
+          {text: 'No', value: false},
+        ],
+        invoice: null,
+        invoiceOptions: [
+          {text: 'Custom', value: 'custom'}
+        ],
+        labelColor: 'black',
+        message: '',
+        newEnd: null,
+        newStart: null,
+        rate: null,
+        roomRates: [
+          {value: 125, text: '$125 for 1/2 Day'},
+          {value: 250, text: '$250 for Whole Day'}
+        ],
+        state: null,
+        title: '',
+      }
+    },
+    mounted() {
+      this.getInvigilators()
+    },
+    computed: {
+      ...mapState(
+        {
+          event: state => state.editedBooking,
+          actualEvent: state => state.editedBookingOriginal,
+          newEvent: state => state.clickedDate,
+          showModal: state => state.showEditBookingModal,
+          invigilators: state => state.invigilators
+        }
+      ),
+      expiryDate() {
+        if (this.examAssociated && this.event.exam) {
+          return new moment(this.event.exam.expiry_date).format('MMM Do, YYYY')
+        }
+      },
+      receivedDate() {
+        if (this.examAssociated && this.event.exam) {
+          return new moment(this.event.exam.received_date).format('MMM Do, YYYY')
+        }
+      },
+      displayDates() {
+        return {
+          end: this.end.format('h:mm a'),
+          start: this.start.format('h:mm a'),
+          date: this.start.format('MMM Do, YYYY')
+        }
+      },
+      invigilatorDropdown() {
+        return this.invigilators.map( i =>
+          ({value: i.invigilator_id,
+            text: i.invigilator_name})
+        )
+      },
+      displayDuration() {
+        let output = this.duration.toFixed(1)
+        return `${output} hrs`
+      },
+      duration() {
+        return this.end.diff(this.start, 'hours', true)
+      },
+      end() {
+        if (this.examAssociated && this.newEvent) {
+          return new moment(this.newEvent.end)
+        }
+        if (this.examAssociated && !this.newEvent) {
+          return new moment(this.event.end)
+        }
+        if (!this.newEnd && this.event && this.event.end) {
+          return new moment(this.event.end).add(this.added, 'hours')
+        }
+        if (this.newEnd) {
+          return new moment(this.newEnd).add(this.added, 'hours')
+        }
+      },
+      examAssociated() {
+        if (this.event && Object.keys(this.event).includes('exam')) {
+          return true
+        }
+        return false
+      },
+      modalVisible: {
+        get() {
+          return this.showModal
+        },
+        set(e) {
+          this.toggleEditBookingModal(e)
+        }
+      },
+      resource() {
+        if (this.newEvent) {
+          return {
+            name: this.newEvent.resource.title,
+            id: this.newEvent.resource.id
+          }
+        }
+        if (this.event) {
+          return {
+            name: this.event.room.room_name,
+            id: this.event.room.room_id
+          }
+        }
+        return ''
+      },
+      start() {
+        if (this.examAssociated && this.newEvent) {
+          return new moment(this.newEvent.start)
+        }
+        if (this.examAssociated && !this.newEvent) {
+          return new moment(this.event.start)
+        }
+        if (!this.newStart && this.event && this.event.start) {
+          return new moment(this.event.start)
+        }
+        if (this.newStart) {
+          return this.newStart
+        }
+      },
+    },
+    methods: {
+      ...mapActions([
+        'deleteBooking',
+        'finishBooking',
+        'getInvigilators',
+        'postBooking',
+        'putBooking',
+        'resetRescheduling',
+      ]),
+      ...mapMutations([
+        'navigationVisible',
+        'setClickedDate',
+        'setEditedBooking',
+        'setSelectedExam',
+        'toggleCalendarControls',
+        'toggleEditBookingModal',
+        'toggleFeedbackModalFromEditModal',
+        'toggleScheduling',
+        'toggleRescheduling',
+        'toggleSchedulingIndicator',
+        'toggleSchedulingOther',
+      ]),
+      cancel() {
+        this.finishBooking()
+        this.$root.$emit('initialize')
+        this.$root.$emit('options', {name: 'selectable', value: false})
+        this.resetModal()
+      },
+      checkValue(e) {
+        if (this.labelColor === 'red') {
+          if (e.target.id === 'title' && e.target.value.length > 0) {
+            this.labelColor = 'black'
+            this.message = ''
+          }
+        }
+        if (this.event[e.target.id] !== e.target.value) {
+          if (!this.editedFields.includes(e.target.id)) {
+            this.editedFields.push(e.target.id)
+          }
+        }
+        if (this.event[e.target.id] === e.target.value) {
+          if (this.editedFields.includes(e.target.id)) {
+            let i = this.editedFields.indexOf(e.target.id)
+            this.editedFields.splice(i,1)
+          }
+        }
+        if (this.message === 'No Changes Made') {
+          if (this.editedFields.length > 0) {
+            this.message = ''
+          }
+        }
+      },
+      clickYes(e) {
+        e.preventDefault()
+        let id = this.event.id
+        this.deleteBooking(id).then(() => {
+          this.finishBooking()
+          this.resetModal()
+        })
+      },
+      decrement() {
+        if (this.duration == .5) {
+          return
+        }
+        this.added -= .5
+        let params = {
+          end: this.end
+        }
+        this.$root.$emit('updateEvent', this.actualEvent, params)
+      },
+      increment() {
+        this.added += .5
+        let params = {
+          end: this.end
+        }
+        this.$root.$emit('updateEvent', this.actualEvent, params)
+      },
+      minimize() {
+        if (this.minimized) {
+          this.minimized = false
+          this.confirm = false
+        } else {
+          this.minimized = true
+          this.confirm =  true
+        }
+      },
+      reschedule() {
+        this.toggleRescheduling(true)
+        this.message = ''
+        this.$root.$emit('options', {name: 'selectable', value: true})
+        let bg = adjustColor(this.actualEvent.room.color, 96)
+        this.$root.$emit('updateEvent', this.actualEvent, {backgroundColor: bg, borderColor: bg,})
+        this.navigationVisible(false)
+        this.toggleCalendarControls(false)
+        this.toggleSchedulingIndicator(true)
+        if (this.examAssociated) {
+          this.toggleScheduling(true)
+          this.setSelectedExam(this.event.exam)
+        } else {
+          this.toggleSchedulingOther(true)
+        }
+        this.toggleEditBookingModal(false)
+      },
+      resetModal() {
+        this.added = null
+        this.newStart = null
+        this.newEnd = null
+        this.editedFields = []
+        this.fee = false
+        this.labelColor = 'black'
+        this.message = null
+        this.state = null
+        this.title = null
+        this.confirm = false
+        this.invigilator = null
+      },
+      setInvigilator(e) {
+        this.message = ''
+        if (this.event.invigilator.invigilator_id !== e) {
+          if (!this.editedFields.includes('invigilator')) {
+            this.editedFields.push('invigilator')
+          }
+        }
+        if (this.event.invigilator.invigilator_id == e) {
+          if (this.editedFields.includes('invigilator')) {
+            this.editedFields.splice(this.editedFields.indexOf('invigilator'), 1)
+          }
+        }
+        this.invigilator = e
+      },
+      show() {
+        this.toggleRescheduling(false)
+        if (this.newEvent && this.newEvent.start) {
+          this.newStart = new moment(this.newEvent.start)
+          this.newEnd = new moment(this.newEvent.end)
+        }
+        if (this.event.invigilator) {
+          if (!this.editedFields.includes('invigilator')) {
+            this.invigilator = this.event.invigilator.invigilator_id
+          }
+        }
+        if (!this.editedFields.includes('title')) {
+          this.title = this.event.title
+        }
+        if (!this.editedFields.includes('fee')) {
+          this.fee = this.event.fee
+        }
+      },
+      submit(e) {
+        e.preventDefault()
+        if (this.title.length === 0) {
+          this.labelColor = 'red'
+          this.state = 'danger'
+          this.message = 'A title is required'
+          return
+        }
+        let changes = {}
+        if (!this.start.isSame(this.event.start)) {
+          if (moment().isAfter(this.start)) {
+            this.message = 'Selected date/time is is in the past. Press Reschedule and pick a new time.'
+            return
+          }
+          changes['start_time'] = this.start.utc().format('YYYY-MM-DD[T]HH:mm:ssZ')
+        }
+        if (!this.end.isSame(this.event.end)) {
+          changes['end_time'] = this.end.utc().format('YYYY-MM-DD[T]HH:mm:ssZ')
+        }
+        if (this.newEvent && !(this.newEvent.resource.id == this.event.resourceId)) {
+          changes['room_id'] = this.newEvent.resource.id
+        }
+        if (this.editedFields.includes('title')) {
+          changes['booking_name'] = this.title
+        }
+        if (this.editedFields.includes('fee')) {
+          changes['fees'] = this.fee
+        }
+        if (this.editedFields.includes('invigilator')) {
+          changes['invigilator_id'] = this.invigilator
+        }
+        if (Object.keys(changes).length === 0) {
+          this.message = 'No Changes Made'
+        } else {
+          let payload = {
+            id: this.event.id,
+            changes
+          }
+          this.putBooking(payload).then(() => {
+            this.$root.$emit('options', { name: 'selectable', value: false })
+            this.finishBooking()
+            this.resetModal()
+          })
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped>
+  .display-div-box {
+    border-radius: 7px;
+    border: 1px solid lightgrey;
+    height: 100%;
+    width: 100%;
+    padding: 7px;
+  }
+  .outer-grid-q {
+    display: grid;
+    grid-template-columns: 2fr 3fr 2fr 3fr;
+  }
+  .grid-1st-col {
+    margin-left: auto;
+    margin-right: 20px;
+  }
+  .grid-2nd-col {
+    margin-left: auto;
+  }
+  .grid-2nd-head {
+    margin-left: 10px;
+  }
+  .grid-top-head {
+    grid-column-start: 1;
+    grid-column-end: 5;
+    margin-right: auto;
+    font-weight: 600;
+    padding-bottom: 5px;
+  }
+</style>
\ No newline at end of file
diff --git a/frontend/src/booking/scheduling-indicator.vue b/frontend/src/booking/scheduling-indicator.vue
index 37892dcbc..07b0da8d7 100644
--- a/frontend/src/booking/scheduling-indicator.vue
+++ b/frontend/src/booking/scheduling-indicator.vue
@@ -2,28 +2,25 @@
   <div class="scheduling-indicator"
        v-if="showSchedulingIndicator">
     <div style="display: flex; justify-content: flex-start; border-radius: 24">
-      <div class="mr-2 flex-min ">
-        <span class="vertical-margins"
-              style="font-weight:600; font-size:1.2rem">Now Scheduling</span><br>
+      <div class="m-2 flex-min" style="font-weight:600; font-size:1.2rem">Now Scheduling | </div>
+      <div style="font-size: 1.1rem;" class="flex-min ml-1 mr-2 mt-2">
+        {{ scheduling ? 'Exam Event | ' : 'Non-Exam Event' }}
       </div>
-      <div style="font-size: 1.1rem;" class="flex-min  mx-3">
-        {{ scheduling ? 'Exam Event' : 'Non-Exam Event' }}
+      <div class="mr-1 mt-2 flex-min" v-if="scheduling" style="font-size: 1.1rem">
+        <span>{{ `Duration: ${selectedExam.exam_type.number_of_hours} HRS | ` }}</span><br>
       </div>
-      <div class="mr-3  flex-min" v-if="scheduling" style="font-size: 1.1rem">
-        <span>Duration: {{ selectedExam.exam_type.number_of_hours }} HRS</span><br>
-      </div>
-      <div class="mr-3 flex-min " v-if="scheduling">
+      <div class="m-2 flex-min" v-if="scheduling">
         <span><b>Exam: </b> {{ selectedExam.exam_name }}</span><br>
         <span><b>Expiry Date: </b>{{ expiryDateFormat }}</span><br>
       </div>
-      <div v-if="schedulingOther" class="w-10 flex-min mx-3 ">
+      <div v-if="schedulingOther" class="flex-min mx-3 mt-1">
         <span class="smaller-font">Click and Drag to select</span><br>
         <span class="smaller-font">a time on the calendar</span><br>
       </div>
       <div class="flex-fill " />
-      <div style="margin-top: auto; margin-bottom: auto;" class="flex-min">
+      <div class="flex-min">
         <b-button @click="cancel"
-                  class="btn-danger ml-3">Cancel</b-button>
+                  class="btn-danger mx-3 mt-1">Cancel</b-button>
       </div>
     </div>
   </div>
@@ -35,30 +32,36 @@
 
   export default {
     name: "SchedulingIndicator",
-    props: ['cancel'],
     computed: {
       ...mapState(['showSchedulingIndicator', 'scheduling', 'schedulingOther', 'selectedExam',]),
       expiryDateFormat() {
-        console.log(this.selectedExam)
         if (this.selectedExam && this.selectedExam.expiry_date) {
           return moment(this.selectedExam.expiry_date).format('MMM-DD-YYYY')
         }
       }
+    },
+    methods: {
+      cancel() {
+        this.$root.$emit('cancel')
+      }
     }
   }
 </script>
 
 <style scoped>
-  flex-min {
+  .flex-min {
     flex-basis: min-content;
   }
-  flex-fill {
+  .flex-fill {
     flex-basis: fill;
   }
   .scheduling-indicator {
-    width: 300;
-    background-color: #a9fcc6;
-    padding: 8px 16px 8px 16px;
-    margin: -5px 15px 10px 15px;
+    border: 1px solid darkgoldenrod;
+    background-color: #f5dc31;
+    width: 100%;
+    bottom: 36px;
+    height: 50px;
+    position: fixed;
+    z-index: 1039;
   }
 </style>
\ No newline at end of file
diff --git a/frontend/src/exams/exam-inventory-table.vue b/frontend/src/exams/exam-inventory-table.vue
index 6f9fd8eb2..6a38b7f8d 100644
--- a/frontend/src/exams/exam-inventory-table.vue
+++ b/frontend/src/exams/exam-inventory-table.vue
@@ -145,3 +145,10 @@
     }
   }
 </script>
+
+invigilatorNull() {
+  if (fields.booking.invigilator.invigilator_name) {
+    return fields.booking.invigilator.invigilator_name
+  }
+  return null
+}
diff --git a/frontend/src/layout/footer.vue b/frontend/src/layout/footer.vue
index eb997a2fc..fbb0bf330 100644
--- a/frontend/src/layout/footer.vue
+++ b/frontend/src/layout/footer.vue
@@ -1,29 +1,32 @@
 <template>
-  <div id="main-footer">
-    <div id="footer-links">
-      <div class="footer-anchor-item">
-        <a href="http://www2.gov.bc.ca/gov/content/home/disclaimer" target="_blank">Disclaimer</a>
+  <div style="outer-header-style">
+    <SchedulingIndicator />
+    <div id="main-footer">
+      <div id="footer-links">
+        <div class="footer-anchor-item">
+          <a href="http://www2.gov.bc.ca/gov/content/home/disclaimer" target="_blank">Disclaimer</a>
+        </div>
+        <div class="footer-anchor-item">
+          <a href="http://www2.gov.bc.ca/gov/content/home/privacy" target="_blank">Privacy</a>
+        </div>
+        <div class="footer-anchor-item">
+          <a href="http://www2.gov.bc.ca/gov/content/home/accessibility" target="_blank">Accessibility</a>
+        </div>
+        <div class="footer-anchor-item-last">
+          <a href="http://www2.gov.bc.ca/gov/content/home/copyright" target="_blank">Copyright</a>
+        </div>
       </div>
-      <div class="footer-anchor-item">
-        <a href="http://www2.gov.bc.ca/gov/content/home/privacy" target="_blank">Privacy</a>
-      </div>
-      <div class="footer-anchor-item">
-        <a href="http://www2.gov.bc.ca/gov/content/home/accessibility" target="_blank">Accessibility</a>
-      </div>
-      <div class="footer-anchor-item-last">
-        <a href="http://www2.gov.bc.ca/gov/content/home/copyright" target="_blank">Copyright</a>
-      </div>
-    </div>
 
 
-    <div class="p-0" style="display:inline-block; color: white;">
-      <div v-if="!this.$store.state.isLoggedIn"
-           class="footer-anchor-item"
-           style="display:inline-block; color: white;">
-        <a href="#" @click="keycloakLogin()" id="keycloak-login">Keycloak Login</a>
-      </div>
-      <div class="footer-anchor-item-last" style="display:inline-block; color: white; margin-right:15px;">
-        v1.0.14
+      <div class="p-0" style="display:inline-block; color: white;">
+        <div v-if="!this.$store.state.isLoggedIn"
+             class="footer-anchor-item"
+             style="display:inline-block; color: white;">
+          <a href="#" @click="keycloakLogin()" id="keycloak-login">Keycloak Login</a>
+        </div>
+        <div class="footer-anchor-item-last" style="display:inline-block; color: white; margin-right:15px;">
+          v1.0.14
+        </div>
       </div>
     </div>
   </div>
@@ -31,9 +34,11 @@
 
 <script>
   import { mapMutations, mapState } from 'vuex'
+  import SchedulingIndicator from '../booking/scheduling-indicator'
 
   export default {
     name: 'Footer',
+    components: { SchedulingIndicator },
     methods: {
       keycloakLogin() {
         this.$keycloak.login()
@@ -43,6 +48,14 @@
 </script>
 
 <style scoped>
+  .outer-header-style {
+    position: fixed;
+    width: 100%;
+    left: 0px;
+    bottom: 0px;
+    display: block;
+    z-index: 3000;
+  }
   #main-footer {
     display: flex;
     justify-content:space-between;
diff --git a/frontend/src/layout/header.vue b/frontend/src/layout/header.vue
index 50fae3843..6eb344f57 100644
--- a/frontend/src/layout/header.vue
+++ b/frontend/src/layout/header.vue
@@ -15,7 +15,7 @@ limitations under the License.*/
 
 
 <template>
-<div id="header" style="top: 0px; left: 0px; width: 100%; height: 70px;">
+<div id="header" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 70px; z-index: 1039">
   <b-navbar variant="faded"
             type="light"
             :style="this.navbarStyle">
diff --git a/frontend/src/layout/nav.vue b/frontend/src/layout/nav.vue
index e8113241c..d0c90d955 100644
--- a/frontend/src/layout/nav.vue
+++ b/frontend/src/layout/nav.vue
@@ -26,6 +26,7 @@
       <div v-if="navigationVisible">
         <b-dropdown variant="outline-primary"
                     class="pl-0 ml-0 mr-3"
+                    boundary="viewport"
                     id="nav-dropdown">
           <template slot="button-content">
             <font-awesome-icon icon="bars"
@@ -80,7 +81,6 @@
         'showGAScreenModal',
         'user',
         'calendarSetup',
-        'viewPortSizes'
       ]),
       isGAorCSR() {
         if (this.user && this.user.role) {
diff --git a/frontend/src/router.js b/frontend/src/router.js
index eead6b71f..55fdecedd 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -73,6 +73,13 @@ export default new Router({
             default: Calendar,
             buttons: ButtonsCalendar,
           }
+        },
+        {
+          path: 'booking/:view/:id',
+          components: {
+            default: Calendar,
+            buttons: ButtonsCalendar,
+          }
         }
       ]
     },
diff --git a/frontend/src/serve-citizen/serve-citizen.vue b/frontend/src/serve-citizen/serve-citizen.vue
index d7deaf88e..66cd4cf3e 100644
--- a/frontend/src/serve-citizen/serve-citizen.vue
+++ b/frontend/src/serve-citizen/serve-citizen.vue
@@ -263,7 +263,7 @@ export default {
 <style scoped>
 .serve-modal {
   position: fixed;
-  z-index: 1;
+  z-index: 1040;
   left: 0;
   top: 0;
   width: 100%;
diff --git a/frontend/src/store/helpers.js b/frontend/src/store/helpers.js
index 034916aad..c5c43e293 100644
--- a/frontend/src/store/helpers.js
+++ b/frontend/src/store/helpers.js
@@ -13,38 +13,46 @@ export function Axios(context) {
   )
 }
 
-export const invitedCitizen = {
-    citizen_comments: null,
-    ticket_number: null,
-    citizen_id: null,
-    qt_xn_citizen_ind: null,
-    start_time: null,
-    priority: null,
-    service_reqs: [
-      {
-        start_time: null,
-        service: {
-          parrent: {}
-        },
-        service_id: null,
-        sr_id: null,
-        channel: {
-          channel_name: null,
-          channel_id: null
-        }
-      }
-    ]
-
+export function adjustColor(col, amt) {
+  col = col.split('#')[1]
+  let num = parseInt(col,16)
+  let r = (num >> 16) + amt
+  if (r > 255) r = 255
+  else if  (r < 0) r = 0
+  let b = ((num >> 8) & 0x00FF) + amt
+  if (b > 255) b = 255
+  else if  (b < 0) b = 0
+  let g = (num & 0x0000FF) + amt
+  if (g > 255) g = 255
+  else if (g < 0) g = 0
+  return '#' + (g | (b << 8) | (r << 16)).toString(16)
 }
 
-export const formData = {
-  citizen:'',
-  setup:'',
-  comments: '',
-  channel: '',
-  search: '',
-  category: '',
-  service:'',
-  quick: false,
-  priority: 2
+export function searchNestedObject(searchObj, search) {
+  let searchTerm = search.toLowerCase()
+  let keys = Object.keys(searchObj)
+  let l = keys.length
+  for (let i = 0; i < l; i++) {
+    let key = keys[i]
+    let val = searchObj[key]
+    if (typeof val === 'string') {
+      if (val.toLowerCase().includes(searchTerm)) {
+        return true
+      }
+    }
+    if (typeof val === 'object' && val !== null) {
+      let keys2 = Object.keys(val)
+      let l2 = keys2.length
+      for (let i2 = 0; i2 < l2; i2++) {
+        let key2 = keys2[i2]
+        let val2 = val[key2]
+        if (typeof val2 === 'string') {
+          if (val2.toLowerCase().includes(searchTerm)) {
+            return true
+          }
+        }
+      }
+    }
+  }
+  return false
 }
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 4869afca1..b58a709d1 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -17,27 +17,14 @@ limitations under the License.*/
 import Vue from 'vue'
 import 'es6-promise/auto'
 import Vuex from 'vuex'
-import { Axios } from './helpers'
+import { Axios, searchNestedObject } from './helpers'
 var flashInt
 
 Vue.use(Vuex)
 
 export const store = new Vuex.Store({
-
+  
   state: {
-    showSchedulingIndicator: false,
-    showOtherBookingModal: false,
-    schedulingOther: false,
-    calendarSetup: null,
-    showCalendarControls: true,
-    scheduling: false,
-    selectedExam: {},
-    selectedBooking: {},
-    showExamInventoryModal: false,
-    showEditExamModalVisible: false,
-    showReturnExamModalVisible: false,
-    clickedDate: '',
-    showBookingModal: false,
     addIndITASteps: [
       {
         step: 1,
@@ -133,47 +120,7 @@ export const store = new Vuex.Store({
         ]
       },
     ],
-    captureITAExamTabSetup: {
-      step: 1,
-      highestStep: 1,
-      stepsValidated: [],
-      errors: [],
-      showRadio: true,
-      success: '',
-      notes: false,
-    },
-    bookings: [],
-    examTypes: [],
-    editExams: [],
-    returnExams: [],
-    examMethods: [
-      {text: 'paper', value: 'paper', id: 'exam_method'},
-      {text: 'online', value: 'online', id: 'exam_method'}
-    ],
-    capturedExam: {
-      event_id: null,
-      exam_name: null,
-      examinee_name: null,
-      expiry_date: null,
-      notes: null,
-      exam_received: false,
-      exam_received_date: null,
-      number_of_students: null,
-      exam_method: 'paper',
-      exam_type_id: null,
-      room_id: null,
-      office_id: null,
-    },
     addIndividualITAExamModalVisibe: false,
-    exams: [],
-    iframeLogedIn: false,
-    invigilators: [],
-    viewPortSizes: {
-      h: null,
-      w: null
-    },
-    navigationVisible: true,
-    adminNavigation: 'csr',
     addModalForm: {
       citizen:'',
       comments: '',
@@ -187,29 +134,76 @@ export const store = new Vuex.Store({
       priority: 2
     },
     addModalSetup: null,
+    addNextService: false,
+    adminNavigation: 'csr',
     alertMessage: '',
     allCitizens: [],
     bearer: '',
+    bookings: [],
+    calendarSetup: null,
+    capturedExam: {
+      event_id: null,
+      exam_name: null,
+      examinee_name: null,
+      expiry_date: null,
+      notes: null,
+      exam_received: false,
+      exam_received_date: null,
+      number_of_students: null,
+      exam_method: 'paper',
+      exam_type_id: null,
+      room_id: null,
+      office_id: null,
+    },
+    captureITAExamTabSetup: {
+      step: 1,
+      highestStep: 1,
+      stepsValidated: [],
+      errors: [],
+      showRadio: true,
+      success: '',
+      notes: false,
+    },
     categories: [],
     channels: [],
-    citizens: [],
     citizenInvited: false,
+    citizens: [],
+    clickedDate: '',
+    csr_states: [],
     csrs: [],
     dismissCount: 0,
-    editExamSuccess: false,
+    editedBooking: null,
+    editedBookingOriginal: null,
     editExamFailure: false,
+    editExams: [],
+    editExamSuccess: false,
     examAlertMessage: '',
     examDismissCount: 0,
+    examMethods: [
+      {text: 'paper', value: 'paper', id: 'exam_method'},
+      {text: 'online', value: 'online', id: 'exam_method'}
+    ],
+    exams: [],
+    examTypes: [],
     feedbackMessage: '',
+    iframeLogedIn: false,
+    invigilators: [],
     isLoggedIn: false,
+    navigationVisible: true,
     nowServing: false,
     officeType: null,
     performingAction: false,
+    rescheduling: false,
+    returnExams: [],
     rooms: [],
+    scheduling: false,
+    schedulingOther: false,
+    selectedBooking: {},
+    selectedExam: {},
+    serveModalAlert: '',
     serveNowAltAction: false,
     serveNowStyle: 'btn-primary',
     serviceBegun: false,
-    serveModalAlert: '',
     serviceModalForm: {
       citizen_id: null,
       service_citizen: null,
@@ -222,11 +216,18 @@ export const store = new Vuex.Store({
     services: [],
     showAddModal: false,
     showAdmin: false,
+    showBookingModal: false,
+    showCalendarControls: true,
+    showEditBookingModal: false,
+    showEditExamModalVisible: false,
+    showExamInventoryModal: false,
     showFeedbackModal: false,
     showGAScreenModal: false,
+    showOtherBookingModal: false,
     showResponseModal: false,
+    showReturnExamModalVisible: false,
+    showSchedulingIndicator: false,
     showServiceModal: false,
-    addNextService: false,
     user: {
       csr_id: null,
       csr_state_id: null,
@@ -247,11 +248,33 @@ export const store = new Vuex.Store({
       qt_xn_csr_ind: true,
       receptionist_ind: null
     },
-    csr_states: [],
-    userLoadingFail: false
+    userLoadingFail: false,
+    viewPortSizes: {
+      h: null,
+      w: null
+    },
   },
 
   getters: {
+    view_port: (state) => {
+      return {
+        h: state.viewPortSizes.h - state.indicatorHeight,
+        w: state.viewPortSizes.w
+      }
+    },
+    
+    get_room_by_id: (state) => (id) => {
+      return state.rooms.find(room => room.id == id)
+    },
+    
+    get_exam_by_id: (state) => (id) => {
+      return state.exams.find(exam => exam.id == id)
+    },
+    
+    get_booking_by_id: (state) => (id) => {
+      return state.bookings.find(booking => booking.id = id)
+    },
+    
     room_resources(state) {
       if (state.rooms.length > 0) {
         return state.rooms.map(room =>
@@ -265,6 +288,10 @@ export const store = new Vuex.Store({
         return []
       }
     },
+  
+    filtered_calendar_events: (state, getters) => (search) => {
+      return getters.calendar_events.filter(booking => searchNestedObject(booking, search))
+    },
     
     calendar_events(state) {
       if (state.bookings.length > 0) {
@@ -509,6 +536,28 @@ export const store = new Vuex.Store({
         context.commit("setNavigation", view)
       }
     },
+  
+    deleteBooking(context, id) {
+      return new Promise((resolve, reject) => {
+        Axios(context).delete(`/bookings/${id}/`).then(resp => {
+          resolve(resp.data)
+        })
+          .catch(error => {
+            reject(error)
+          })
+      })
+    },
+    
+    putBooking(context, payload) {
+      return new Promise((resolve, reject) => {
+        Axios(context).put(`/bookings/${payload.id}/`, payload.changes).then(resp => {
+          resolve(resp.data)
+        })
+          .catch(error => {
+            reject(error)
+          })
+      })
+    },
 
     flashServeNow(context, payload) {
       let flash = () => {
@@ -1202,6 +1251,14 @@ export const store = new Vuex.Store({
         context.commit('setPerformingAction', false)
       })
     },
+    
+    resetRescheduling(context) {
+      context.commit('navigationVisible', true)
+      context.commit('toggleCalendarControls', true)
+      context.commit('toggleSchedulingIndicator', false)
+      context.commit('toggleScheduling', false)
+      context.commit('toggleSchedulingOther', false)
+    },
 
     finishServiceFromGA(context, citizen_id) {
       context.dispatch('postFinishService', {citizen_id, inaccurate:'true'})
@@ -1308,7 +1365,6 @@ export const store = new Vuex.Store({
     },
 
     postFinishService(context, payload) {
-      console.log(payload);
       return new Promise((resolve, reject) => {
         let url = `/citizens/${payload.citizen_id}/finish_service/?inaccurate=${payload.inaccurate}`
         Axios(context).post(url).then(resp=>{
@@ -1427,6 +1483,9 @@ export const store = new Vuex.Store({
       context.commit('toggleOtherBookingModal', false)
       context.commit('setClickedDate', null)
       context.commit('setSelectedExam', null)
+      context.commit('setEditedBooking', null)
+      context.commit('toggleEditBookingModal', false)
+      context.commit('resetRescheduling', false)
     },
 
     postExam(context, payload) {
@@ -2098,5 +2157,21 @@ export const store = new Vuex.Store({
     setEditExamSuccess: (state, payload) => state.editExamSuccess = payload,
 
     setEditExamFailure: (state, payload) => state.editExamFailure = payload,
+  
+    toggleEditBookingModal: (state, payload) => state.showEditBookingModal = payload,
+  
+    setEditedBooking(state, payload) {
+      if (payload) {
+        let eventCopy = Object.assign({}, payload)
+        state.editedBooking = eventCopy
+      }
+      if (!payload) {
+        state.editedBooking = null
+      }
+    },
+  
+    toggleRescheduling: (state, payload) => state.rescheduling = payload,
+  
+    setEditedBookingOriginal: (state, payload) => state.editedBookingOriginal = payload,
   }
 })
diff --git a/frontend/src/store/modules b/frontend/src/store/modules
deleted file mode 100644
index e69de29bb..000000000