diff --git a/app/assets/javascripts/property_hire_calendar_frontend.js b/app/assets/javascripts/property_hire_calendar_frontend.js
index f2513da..4bb9d37 100644
--- a/app/assets/javascripts/property_hire_calendar_frontend.js
+++ b/app/assets/javascripts/property_hire_calendar_frontend.js
@@ -162,6 +162,8 @@ var Calendar = function(dom, property_id, valid_range, currentView, display_hire
 				});
 			},
 			// events: 'https://fullcalendar.io/demo-events.json',
+			editable: true,
+	        selectable: true,
 			headerToolbar: false,
 			fixedWeekCount: false,
 			initialView: dview,
diff --git a/app/views/admin/property_hires/_admin_hire.html.erb b/app/views/admin/property_hires/_admin_hire.html.erb
index 8671fcc..1131fe5 100644
--- a/app/views/admin/property_hires/_admin_hire.html.erb
+++ b/app/views/admin/property_hires/_admin_hire.html.erb
@@ -110,6 +110,32 @@
    all_day_settings = property.all_day_settings
 %>
 <style type="text/css">
+.ui-widget-header{
+  background: #000000!important;
+  border-color: #000000!important;
+  color: #fff !important;
+}
+.ui-state-default{
+  background: #fff !important;
+    border: 0 !important;
+    text-align: center !important;
+}
+.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{
+  border: 0 !important;
+  background: silver !important;
+}
+.ui-widget-header a{
+  color: #fff!important;
+}
+.ui-widget-header .ui-icon{
+  filter: brightness(500%);
+}
+.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover, .ui-button.ui-state-active.hover-class{
+  border: 0 !important;
+  background: silver !important;
+  color:#000!important;
+}
+
 .w-ba-banner{
   position: relative;
 }
@@ -138,7 +164,28 @@ ul.list-unstyled li {
     float: left;
   }
 }
+@media(max-width:480px){
+  #pick_start_date{
+    margin-left: 0!important;
+    margin-top: 1em;
+}
+  #pick_end_date{
+    margin-left: 0!important;
+    margin-top: 1em;
+  }
+}
+@media (max-width: 768px){
+  #orbit_calendar{
+    padding: 1em;
+  }
+  .form-horizontal{
+    padding: 1em;
+  }
+}
 @media (min-width: 768px){
+  .content-box{
+    float: right;
+  }
   .form-horizontal .col-sm-4 {
     width: 33.33333333%;
   }
@@ -293,9 +340,14 @@ ul.list-unstyled li {
       width: 25%;
     }
   }
+  select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input{
+      height: auto;
+  }
+  .input-append .add-on, .input-prepend .add-on{
+    height: auto;
+  }
   form#hire_form .form-group input,form#hire_form .form-group select, form#hire_form .form-group textarea{
-    min-width: 100%;
-    max-width: 300px;
+
   }
   form#hire_form .form-group input[name="_rucaptcha"], form#hire_form .form-group input[type="submit"], form#hire_form .form-group input[type="radio"], form#hire_form .form-group input[type="checkbox"]{
     width: auto;
@@ -700,13 +752,14 @@ ul.list-unstyled li {
     </div>
   </div>
   <div class="form-group">
-    <div class="content-box">
+    <div class="content-box col-sm-8">
       <%= render partial: 'admin/member_selects/email_selection_box', locals: {field: 'userid', email_members: []} %>
     </div>
   </div>
-  <% default_values = {"hiring_person_email" => ( current_user.member_profile.email rescue ""),
-                      "hiring_person_number" => ( current_user.member_profile.mobile_no rescue ""),
-                      "hiring_person_name" => ( current_user.name rescue "")
+  <% default_values = {"hiring_person_name" => ( current_user.name rescue ""),
+                       "hiring_person_email" => ( current_user.member_profile.email rescue ""),
+                       "hiring_person_number" => ( current_user.member_profile.mobile_no rescue "")
+
                       } %>
   <% if recover
     default_values = default_values.merge(Property::FIELDSNAME.map{|f| [f,hire.send(f)]}.to_h)
@@ -957,8 +1010,8 @@ const callback = (mutationList, observer) => {
           "type" : "get",
           "dataType" : "json"
         }).done(function (data) {
-          $("#p_hire_hiring_person_email").val(data.email);
           $("#p_hire_hiring_person_name").val(data.name);
+          $("#p_hire_hiring_person_email").val(data.email);
           $("#p_hire_hiring_person_number").val(data.phone);
         })
       }
diff --git a/app/views/property_hires/hire.html.erb b/app/views/property_hires/hire.html.erb
index abe253e..a99d63b 100644
--- a/app/views/property_hires/hire.html.erb
+++ b/app/views/property_hires/hire.html.erb
@@ -21,13 +21,16 @@
   label_col = 2
   input_col = 10
   if calendar_type == 0
-    right_col -= 7
+    right_col -= 12
     label_col += 2
     input_col -= 2
   end
 %>
 
 <style type="text/css">
+.content-box{
+  margin-left: 13%;
+}
   .full-size-img img {
     width: 100%;
   }