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/policies.hbs b/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/mdm.page.policies/policies.hbs
index d71b65cf60..5737957bd1 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/policies.hbs
+++ b/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/mdm.page.policies/policies.hbs
@@ -261,378 +261,388 @@
     </div>
 
     <div id="remove-policy-modal-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>Do you really want to remove the selected policy(s)?</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="remove-policy-yes-link" class="btn-operations">
-                            Remove
-                        </a>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">
+                Do you really want to remove the selected policy(s)?
+            </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">
 
-                        <a href="#" id="remove-policy-cancel-link" class="btn-operations">
-                            Cancel
-                        </a>
-                    </div>
-                </div>
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="remove-policy-yes-link" class="btn-operations">Remove</a>
+                <a href="#" id="remove-policy-cancel-link" class="btn-operations">Cancel</a>
             </div>
         </div>
     </div>
 
     <div id="remove-policy-success-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>Done. Selected policy was successfully removed.</h3>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">
+                Done. Selected policy was successfully removed.
+            </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">
 
-                    <div class="buttons">
-                        <a href="#" id="remove-policy-success-link" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="remove-policy-success-link" class="btn-operations">Ok</a>
             </div>
         </div>
     </div>
 
     <div id="remove-policy-error-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>An unexpected error occurred. Please try again later.</h3>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">
+                An unexpected error occurred. Please try again later
+            </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">
 
-                    <div class="buttons">
-                        <a href="#" id="remove-policy-error-link" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="remove-policy-error-link" class="btn-operations">Ok</a>
             </div>
         </div>
     </div>
 
     <div id="remove-active-policy-error-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>
-                        You cannot remove policies that have been already applied to devices.
-                        Please deselect active policies from your selection and try again.
-                    </h3>
-
-                    <div class="buttons">
-                        <a href="#" id="remove-active-policy-error-link" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">
+                Please Try again.
+            </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>You cannot remove policies that have been already applied to devices.
+                Please deselect active policies from your selection and try again.</h4>
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="remove-active-policy-error-link" class="btn-operations">Ok</a>
             </div>
         </div>
     </div>
 
     <div id="publish-policy-modal-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>Do you really want to publish the selected policy(s)?</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="publish-policy-yes-link" class="btn-operations">Yes</a>
-                        <a href="#" id="publish-policy-cancel-link" class="btn-operations">No</a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">
+                Do you really want to publish the selected policy(s)?
+            </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">
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="publish-policy-yes-link" class="btn-operations">Yes</a>
+                <a href="#" id="publish-policy-cancel-link" class="btn-operations">No</a>
             </div>
         </div>
     </div>
 
     <div id="publish-policy-success-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>Done. Selected policy was successfully published.</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="publish-policy-success-link" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">
+                Done. Selected policy was successfully published.
+            </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">
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="publish-policy-success-link" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
 
     <div id="publish-policy-error-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>An unexpected error occurred. Please try again later.</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="publish-policy-error-link" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">
+                An unexpected error occurred. Please try again later.
+            </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">
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="publish-policy-error-link" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
 
     <div id="unpublish-policy-modal-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>Do you really want to unpublish the selected policy(s)?</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="unpublish-policy-yes-link" class="btn-operations">
-                            Yes
-                        </a>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">
+                Do you really want to unpublish the selected policy(s)?
+            </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">
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="unpublish-policy-yes-link" class="btn-operations">
+                    Yes
+                </a>
 
-                        <a href="#" id="unpublish-policy-cancel-link" class="btn-operations">
-                            No
-                        </a>
-                    </div>
-                </div>
+                <a href="#" id="unpublish-policy-cancel-link" class="btn-operations">
+                    No
+                </a>
             </div>
         </div>
     </div>
 
     <div id="unpublish-policy-success-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>Done. Selected policy was successfully unpublished.</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="unpublish-policy-success-link" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">
+                Done. Selected policy was successfully unpublished.
+            </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">
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="unpublish-policy-success-link" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
 
     <div id="unpublish-policy-error-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>An unexpected error occurred. Please try again later.</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="unpublish-policy-error-link" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">
+                An unexpected error occurred. Please try again later.
+            </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">
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="unpublish-policy-error-link" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
 
     <div id="save-policy-priorities-success-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>Done. New Policy priorities were successfully updated.</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="save-policy-priorities-success-link" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">
+                Done. New Policy priorities were successfully updated.
+            </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">
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="save-policy-priorities-success-link" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
 
     <div id="save-policy-priorities-error-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>An unexpected error occurred. Please try again later.</h3>
-                    <h4 class="message-from-server"></h4>
-
-                    <div class="buttons">
-                        <a href="#" id="save-policy-priorities-error-link" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">
+                An unexpected error occurred. Please try again later.
+            </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">
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="save-policy-priorities-error-link" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
 
     <div id="change-policy-modal-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>Do you really want to apply changes to all policies?</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="change-policy-yes-link" class="btn-operations">
-                            Yes
-                        </a>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">
+                Do you really want to apply changes to all policies?
+            </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">
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="change-policy-yes-link" class="btn-operations">
+                    Yes
+                </a>
 
-                        <a href="#" id="change-policy-cancel-link" class="btn-operations">
-                            No
-                        </a>
-                    </div>
-                </div>
+                <a href="#" id="change-policy-cancel-link" class="btn-operations">
+                    No
+                </a>
             </div>
         </div>
     </div>
 
     <div id="change-policy-success-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>Done. Changes applied successfully.</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="change-policy-success-link" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">
+                Done. Changes applied 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">
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="change-policy-success-link" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
 
     <div id="change-policy-error-content" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>An unexpected error occurred. Please try again later.</h3>
-
-                    <div class="buttons">
-                        <a href="#" id="change-policy-error-link" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">
+                An unexpected error occurred. Please try again later.
+            </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">
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="#" id="change-policy-error-link" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
 
     <div id="errorPolicyUnPublish" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>
-                    <span class="fw-stack">
+        <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>
-                        Action cannot be performed !
-                    </h3>
-                    <h4>
-                        Please select a policy or a list of policies to un-publish.
-                    </h4>
-
-                    <div class="buttons">
-                        <a href="javascript:hidePopup()" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+                Action 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 policy or a list of policies to un-publish.</h4>
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="javascript:hidePopup()" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
     <div id="errorPolicyUnPublishSelection" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>
-                    <span class="fw-stack">
+        <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>
-                        Action cannot be performed !
-                    </h3>
-                    <h4>
-                        You cannot select already inactive policies to be unpublished.
-                        Please deselect inactive policies and try again.
-                    </h4>
-
-                    <div class="buttons">
-                        <a href="javascript:hidePopup()" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+                Action 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>You cannot select already inactive policies to be unpublished.
+                Please deselect inactive policies and try again.</h4>
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="javascript:hidePopup()" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
     <div id="active-policy-selection-error" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>
-                    <span class="fw-stack">
+        <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>
-                        Action cannot be performed !
-                    </h3>
-                    <h4>
-                        You cannot select already active policies. Please deselect active policies and try again.
-                    </h4>
-
-                    <div class="buttons">
-                        <a href="javascript:hidePopup()" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+                Action 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>You cannot select already active policies. Please deselect active policies and try again.</h4>
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="javascript:hidePopup()" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
     <div id="policy-publish-error" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>
-                    <span class="fw-stack">
+        <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>
-                        Action cannot be performed !
-                    </h3>
-                    <h4>
-                        Please select a policy or a list of policies to publish.
-                    </h4>
-
-                    <div class="buttons">
-                        <a href="javascript:hidePopup()" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+                Action 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 policy or a list of policies to publish.</h4>
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="javascript:hidePopup()" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
     <div id="policy-remove-error" class="hide">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>
-                    <span class="fw-stack">
+        <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>
-                        Action cannot be performed !
-                    </h3>
-                    <h4>
-                        Please select a policy or a list of policies to remove.
-                    </h4>
-
-                    <div class="buttons">
-                        <a href="javascript:hidePopup()" class="btn-operations">
-                            Ok
-                        </a>
-                    </div>
-                </div>
+                Action 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 policy or a list of policies to remove.</h4>
+        </div>
+        <div class="modal-footer">
+            <div class="buttons">
+                <a href="javascript:hidePopup()" class="btn-operations">
+                    Ok
+                </a>
             </div>
         </div>
     </div>
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 d6c121ebe7..e6eb9bf045 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
@@ -82,7 +82,6 @@ function setPopupMaxHeight() {
  */
 function showPopup() {
     $(modalPopup).modal('show');
-    //setPopupMaxHeight();
 }
 
 /*
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.qr-modal/qr-modal.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.qr-modal/qr-modal.hbs
index d1c3e40a1c..5da7c3427e 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.qr-modal/qr-modal.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.qr-modal/qr-modal.hbs
@@ -17,20 +17,27 @@
 }}
 {{#zone "content"}}
     <div id="qr-code-modal" data-enrollment-url="{{enrollmentURL}}" class="hidden">
-        <div class="content">
-            <div class="row">
-                <div class="col-lg-5 col-md-6 col-centered">
-                    <h3>Scan QR code to start enrollment</h3>
-                    <h4>
-                        Please scan the QR code using your mobile device to retrieve enrollment URL.
-                    </h4>
-                    <div class="panel panel-default">
-                        <div class="panel-body col-centered text-center">
-                            <div class="qr-code"></div>
-                        </div>
+        <div class="modal-header">
+            <h3 class="pull-left modal-title">
+                Scan QR code to start enrollment
+            </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">
+            <div>
+                <h4>
+                    Please scan the QR code using your mobile device to retrieve enrollment URL.
+                </h4>
+                <div class="panel panel-default">
+                    <div class="panel-body col-centered text-center">
+                        <div class="qr-code"></div>
                     </div>
                 </div>
             </div>
         </div>
+        <div class="modal-footer">
+            <div class="buttons">
+            </div>
+        </div>
     </div>
 {{/zone}}
\ 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 f3c4ea4e30..0fd23a58d7 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
@@ -47,7 +47,6 @@ function setPopupMaxHeight() {
  */
 function showPopup() {
     $(modalPopup).modal('show');
-    //setPopupMaxHeight();
 }
 
 /*
@@ -74,8 +73,8 @@ function generateQRCode(qrCodeClass) {
 }
 
 function toggleEnrollment() {
-    $(".modal-body").html($("#qr-code-modal").html());
-    generateQRCode(".modal-body .qr-code");
+    $(".modal-content").html($("#qr-code-modal").html());
+    generateQRCode(".modal-content .qr-code");
     showPopup();
 }