diff --git a/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/mdm.page.policies/public/js/policy-list.js b/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/mdm.page.policies/public/js/policy-list.js
index 763d70245e..d6c121ebe7 100644
--- a/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/mdm.page.policies/public/js/policy-list.js
+++ b/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/mdm.page.policies/public/js/policy-list.js
@@ -61,9 +61,9 @@ function InitiateViewOption() {
  * Modal related stuff are as follows.
  */
 
-var modalPopup = ".wr-modalpopup";
-var modalPopupContainer = modalPopup + " .modalpopup-container";
-var modalPopupContent = modalPopup + " .modalpopup-content";
+var modalPopup = ".modal";
+var modalPopupContainer = modalPopup + " .modal-content";
+var modalPopupContent = modalPopup + " .modal-content";
 var body = "body";
 
 /*
@@ -81,8 +81,8 @@ function setPopupMaxHeight() {
  * show popup function.
  */
 function showPopup() {
-    $(modalPopup).show();
-    setPopupMaxHeight();
+    $(modalPopup).modal('show');
+    //setPopupMaxHeight();
 }
 
 /*
@@ -90,7 +90,9 @@ function showPopup() {
  */
 function hidePopup() {
     $(modalPopupContent).html('');
-    $(modalPopup).hide();
+    $(modalPopup).modal('hide');
+    $('body').removeClass('modal-open').css('padding-right','0px');
+    $('.modal-backdrop').remove();
 }
 
 /*
diff --git a/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.device.operation-bar/public/js/operation-bar.js b/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.device.operation-bar/public/js/operation-bar.js
index 0485b20e09..6d9ef5567a 100644
--- a/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.device.operation-bar/public/js/operation-bar.js
+++ b/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.device.operation-bar/public/js/operation-bar.js
@@ -21,8 +21,8 @@
  */
 
 var operations = '.wr-operations',
-    modalPopup = '.wr-modalpopup',
-    modalPopupContent = modalPopup + ' .modalpopup-content',
+    modalPopup = '.modal',
+    modalPopupContent = modalPopup + ' .modal-content',
     navHeight = $('#nav').height(),
     headerHeight = $('header').height(),
     offset = (headerHeight + navHeight),
diff --git a/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.device.operation-bar/public/templates/operations.hbs b/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.device.operation-bar/public/templates/operations.hbs
index 27d0d40625..54257292ad 100644
--- a/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.device.operation-bar/public/templates/operations.hbs
+++ b/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.device.operation-bar/public/templates/operations.hbs
@@ -1,63 +1,66 @@
 <div id="errorOperations" class="operation">
-    <div class="content">
-        <div class="row">
-            <div class="col-lg-5 col-md-6 col-centered">
-                <h3>
-                    <span class="fw-stack">
-                        <i class="fw fw-ring fw-stack-2x"></i>
-                        <i class="fw fw-error fw-stack-1x"></i>
-                    </span>
-                    Operation cannot be performed !
-                </h3>
-                <h4>
-                    Please select a device or a list of devices to perform an operation.
-                </h4>
-                <div class="buttons">
-                    <a href="javascript:hidePopup()" class="btn-operations">Ok</a>
-                </div>
-            </div>
+    <div class="modal-header">
+        <h3 class="pull-left modal-title">
+            <span class="fw-stack">
+                <i class="fw fw-ring fw-stack-2x"></i>
+                <i class="fw fw-error fw-stack-1x"></i>
+            </span>
+            Operation cannot be performed !
+        </h3>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+    </div>
+    <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+        <h4>
+            Please select a device or a list of devices to perform an operation.
+        </h4>
+    </div>
+    <div class="modal-footer">
+        <div class="buttons">
+            <a href="javascript:hidePopup()" class="btn-operations">Ok</a>
         </div>
     </div>
 </div>
 <div id="errorOperationUnexpected" class="operation">
-    <div class="content">
-        <div class="row">
-            <div class="col-lg-5 col-md-6 col-centered">
-                <h3>
-                    <span class="fw-stack">
-                        <i class="fw fw-ring fw-stack-2x"></i>
-                        <i class="fw fw-error fw-stack-1x"></i>
-                    </span>
-                    Operation cannot be performed !
-                </h3>
-                <h4>
-                    Unexpected error occurred. Please Try again later.
-                </h4>
-                <div class="buttons">
-                    <a href="javascript:hidePopup()" class="btn-operations">Ok</a>
-                </div>
-            </div>
+    <div class="modal-header">
+        <h3 class="pull-left modal-title">
+            <span class="fw-stack">
+                <i class="fw fw-ring fw-stack-2x"></i>
+                <i class="fw fw-error fw-stack-1x"></i>
+            </span>
+            Operation cannot be performed !
+        </h3>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+    </div>
+    <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+        <h4>
+            Unexpected error occurred. Please Try again later.
+        </h4>
+    </div>
+    <div class="modal-footer">
+        <div class="buttons">
+            <a href="javascript:hidePopup()" class="btn-operations">Ok</a>
         </div>
     </div>
 </div>
 <div id="operationSuccess" class="operation">
-    <div class="content">
-        <div class="row">
-            <div class="col-lg-5 col-md-6 col-centered">
-                <h3>
-                    <span class="fw-stack">
-                        <i class="fw fw-ring fw-stack-2x"></i>
-                        <i class="fw fw-check fw-stack-1x"></i>
-                    </span>
-                    Operation queued successfully !
-                </h3>
-                <h4>
-                    Operation has been queued successfully to be sent to the device.
-                </h4>
-                <div class="buttons">
-                    <a href="javascript:hidePopup()" class="btn-operations">Ok</a>
-                </div>
-            </div>
+    <div class="modal-header">
+        <h3 class="pull-left modal-title">
+            <span class="fw-stack">
+                <i class="fw fw-ring fw-stack-2x"></i>
+                <i class="fw fw-check fw-stack-1x"></i>
+            </span>
+            Operation queued successfully !
+        </h3>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+    </div>
+    <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+        <h4>
+            Operation has been queued successfully to be sent to the device.
+        </h4>
+    </div>
+    <div class="modal-footer">
+        <div class="buttons">
+            <a href="javascript:hidePopup()" class="btn-operations">Ok</a>
         </div>
     </div>
 </div>
@@ -76,6 +79,7 @@
                 <h4>
                     Message has been queued to be sent to the device.
                 </h4>
+
                 <div class="buttons">
                     <a href="javascript:hidePopup()" class="btn-operations">Ok</a>
                 </div>
@@ -89,150 +93,69 @@
         <span>{{name}}</span>
     </a>
     <div class="operation" data-operation-code="{{code}}">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>
-                        <span class="fw-stack">
-                            <i class="fw fw-ring fw-stack-2x"></i>
-                            <i class="fw {{icon}} fw-stack-1x"></i>
-                        </span>
-                        {{name}}
-                        <br>
-                    </h3>
-                    <h4>
-                        {{#equal code "WIPE_DATA"}}
-                            {{#equal type "android"}}
-                                Enter PIN code (Optional - This is required only if the device type is BYOD).
-                                <br><br>
-                                <div>
-                                    <input type="password" class="form-control modal-input operationDataKeys" id="pin"
-                                           data-key="pin">
-                                </div>
-                                <br>
-                            {{/equal}}
-                        {{/equal}}
-                        {{#equal code "NOTIFICATION"}}
-                            Type your message below.
+
+        <div class="modal-content clearfix">
+            <div class="modal-header">
+                <h3 class="pull-left modal-title">
+                    <span class="fw-stack">
+                        <i class="fw fw-ring fw-stack-2x"></i>
+                        <i class="fw {{icon}} fw-stack-1x"></i>
+                    </span>
+                    {{name}}
+                    <br>
+                </h3>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+            </div>
+            <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+                <h4>
+                    {{#equal code "WIPE_DATA"}}
+                        {{#equal type "android"}}
+                            Enter PIN code (Optional - This is required only if the device type
+                            is BYOD).
                             <br><br>
-                            <div id="notification-error-msg" class="alert alert-danger hidden" role="alert">
-                                <i class="icon fw fw-error"></i><span></span>
-                            </div>
-                            <div class="form-group">
-                                <input class="form-control modal-input operationDataKeys"
-                                       id="messageTitle" data-key="messageTitle"  placeholder="Title here..." />
-                            </div>
-                            <div class="form-group">
-                                <textarea class="form-control modal-input operationDataKeys"
-                                          id="messageText" data-key="messageText" placeholder="Message here..."></textarea>
+
+                            <div>
+                                <input type="password"
+                                       class="form-control modal-input operationDataKeys"
+                                       id="pin" data-key="pin"></textarea>
                             </div>
                             <br>
                         {{/equal}}
-                        {{#equal code "CHANGE_LOCK_CODE"}}
-                            Type new lock-code below.
-                            <br><br>
-                            <input type="password" class="form-control modal-input operationDataKeys" id="lockcode"
-                                   data-key="lockCode" placeholder="Enter Lockcode"/>
-                            <br>
-                        {{/equal}}
-                        {{#equal code "DEVICE_LOCK"}}
-                            {{#equal type "android"}}
-                                Type your message to be shown in the lock screen (Optional).
-                                <br><br>
-                                <div>
-                                    <textarea class="form-control modal-input operationDataKeys" id="lock-message"
-                                              data-key="lock-message"></textarea>
-                                </div>
-                                <br>
-                                <label class="wr-input-control checkbox">
-                                    <input id="hard-lock" type="checkbox" class="form-control operationDataKeys"
-                                           data-key="hard-lock"/>
-                                    <span class="helper" title="Once it enables, device will be blocked permanently.">
-                                            &nbsp;&nbsp;&nbsp;Enable Permanent Lock
-                                        <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
-                                        </span>
-                                </label>
-                            {{/equal}}
-                        {{/equal}}
-                        {{#equal code "UPGRADE_FIRMWARE"}}
-                            {{#equal type "android"}}
-                                Enter firmware upgrade scheduling information.
-                                <br><br>
-                                <label class="wr-input-control checkbox">
-                                    <input id="instant-upgrade" type="checkbox" class="form-control operationDataKeys"
-                                           data-key="instant-upgrade"/>
-                                    <span class="helper"
-                                          title="Once enabled, device firmware upgrade process will start instantly.">
-                                            &nbsp;&nbsp;&nbsp;Instant Upgrade
-                                        <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
-                                        </span>
-                                </label>
-                                <br><br>
-                                <div class='input-group date' id='dateTimePicker'>
-                                    Enter the date and time to schedule firmware upgrade.
-                                    <br><br>
-                                    <div id="firmware-error-msg" class="alert alert-danger hidden" role="alert">
-                                        <i class="icon fw fw-error"></i><span></span>
-                                    </div>
-                                    <input type='text' class="form-control modal-input operationDataKeys"
-                                           style="z-index : 900;" name="daterange" id="schedule" data-key="schedule"/>
-                                </div>
-                                <br><br>
-                                <div class='wr-input-control' id='firmwareServerInfo'>
-                                    Enter firmware upgrade server URL (ie. http://abc.com or http://abc.com/ota)
-                                    (Optional).
-                                    <br><br>
-                                    <input type='text' class="form-control modal-input operationDataKeys" id="server"
-                                           data-key="server"/>
-                                </div>
-                                <script type="text/javascript">
-                                    $(function () {
-                                        $('.modalpopup-bg').css('z-index', '1000');
-                                        $('.modalpopup-container').css('z-index', '1200');
-
-                                        $('input[name="daterange"]').daterangepicker({
-                                            singleDatePicker: true,
-                                            timePicker: true,
-                                            showDropdowns: true,
-                                            timePickerIncrement: 1,
-                                            locale: {
-                                                format: 'MM-DD-YYYY hh:mm a'
-                                            }
-                                        });
-                                    });
-                                    $('#instant-upgrade').change(function () {
-                                        if ($(this).is(":checked")) {
-                                            $('#dateTimePicker').addClass("hidden");
-                                            $("#schedule").val('');
+                    {{/equal}}
+                    {{#equal code "NOTIFICATION"}}
+                        Type your message below.
+                        <br><br>
 
-                                        } else {
-                                            $('#dateTimePicker').removeClass("hidden");
-                                            $('input[name="daterange"]').daterangepicker({
-                                                singleDatePicker: true,
-                                                timePicker: true,
-                                                showDropdowns: true,
-                                                timePickerIncrement: 1,
-                                                locale: {
-                                                    format: 'MM-DD-YYYY hh:mm a'
-                                                }
-                                            });
-                                        }
-                                    });
-                                </script>
-                                <br>
-                            {{/equal}}
-                        {{/equal}}
+                        <div id="notification-error-msg" class="alert alert-danger hidden"
+                             role="alert">
+                            <i class="icon fw fw-error"></i><span></span>
+                        </div>
+                        <div>
+                            <textarea class="form-control modal-input operationDataKeys"
+                                      id="message" data-key="message"></textarea>
+                        </div>
+                        <br>
+                    {{/equal}}
+                    {{#equal code "CHANGE_LOCK_CODE"}}
+                        Type new lock-code below.
                         <br><br>
-                        Do you want to perform this operation on selected device(s) ?
+                        <input type="password"
+                               class="form-control modal-input operationDataKeys" id="lockcode"
+                               data-key="lockCode" placeholder="Enter Lockcode"/>
                         <br>
-                    </h4>
-                    <div class="buttons">
-                        <a href="javascript:runOperation('{{code}}')" class="btn-operations">Yes</a>
-                        <a href="javascript:hidePopup()" class="btn-operations">No</a>
-                    </div>
+                    {{/equal}}
+                    Do you want to perform this operation on selected device(s) ?
+                    <br>
+                </h4>
+            </div>
+            <div class="modal-footer">
+                <div class="buttons">
+                    <a href="javascript:runOperation('{{code}}')" class="btn-operations">Yes</a>
+                    <a href="javascript:hidePopup()" class="btn-operations">No</a>
                 </div>
             </div>
         </div>
+
     </div>
 {{/each}}
 <br class="c-both"/>
\ No newline at end of file
diff --git a/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.ui.navbar.nav-menu/public/js/nav-menu.js b/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.ui.navbar.nav-menu/public/js/nav-menu.js
index 495ed8870f..f3c4ea4e30 100644
--- a/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.ui.navbar.nav-menu/public/js/nav-menu.js
+++ b/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.ui.navbar.nav-menu/public/js/nav-menu.js
@@ -16,9 +16,9 @@
  * under the License.
  */
 
-var modalPopup = ".wr-modalpopup",
-    modalPopupContainer = modalPopup + " .modalpopup-container",
-    modalPopupContent = modalPopup + " .modalpopup-content";
+var modalPopup = ".modal",
+    modalPopupContainer = modalPopup + " .modal-content",
+    modalPopupContent = modalPopup + " .modal-content";
 
 var emmAdminBasePath = "/api/device-mgt/v1.0";
 
@@ -46,8 +46,8 @@ function setPopupMaxHeight() {
  * show popup function.
  */
 function showPopup() {
-    $(modalPopup).show();
-    setPopupMaxHeight();
+    $(modalPopup).modal('show');
+    //setPopupMaxHeight();
 }
 
 /*
@@ -56,7 +56,9 @@ function showPopup() {
 function hidePopup() {
     $(modalPopupContent).html("");
     $(modalPopupContent).removeClass("operation-data");
-    $(modalPopup).hide();
+    $(modalPopup).modal('hide');
+    $('body').removeClass('modal-open').css('padding-right','0px');
+    $('.modal-backdrop').remove();
 }
 
 /*
@@ -72,8 +74,8 @@ function generateQRCode(qrCodeClass) {
 }
 
 function toggleEnrollment() {
-    $(".modalpopup-content").html($("#qr-code-modal").html());
-    generateQRCode(".modalpopup-content .qr-code");
+    $(".modal-body").html($("#qr-code-modal").html());
+    generateQRCode(".modal-body .qr-code");
     showPopup();
 }