diff --git a/websiteFunctions/static/websiteFunctions/websiteFunctions.js b/websiteFunctions/static/websiteFunctions/websiteFunctions.js
index 5b042f691..d8e82a0a0 100755
--- a/websiteFunctions/static/websiteFunctions/websiteFunctions.js
+++ b/websiteFunctions/static/websiteFunctions/websiteFunctions.js
@@ -2945,6 +2945,73 @@ app.controller('listWebsites', function ($scope, $http, $window) {
 
     };
 
+    $scope.togglePasswordProtection = function(wp) {
+        if (wp.passwordProtection) {
+            // Show modal for credentials
+            $('#Passwordprotection').modal('show');
+            // Store the current WordPress site for later use
+            $scope.currentWPSite = wp;
+        } else {
+            // Disable password protection
+            $scope.updateSetting(wp, 'password-protection');
+        }
+    };
+
+    $scope.enablePasswordProtection = function() {
+        if (!$scope.PPUsername || !$scope.PPPassword) {
+            new PNotify({
+                title: 'Error!',
+                text: 'Please provide both username and password',
+                type: 'error'
+            });
+            return;
+        }
+
+        var data = {
+            siteId: $scope.currentWPSite.id,
+            setting: 'password-protection',
+            PPUsername: $scope.PPUsername,
+            PPPassword: $scope.PPPassword
+        };
+
+        var config = {
+            headers: {
+                'X-CSRFToken': getCookie('csrftoken')
+            }
+        };
+
+        $http.post('/websites/UpdateWPSettings', data, config).then(
+            function(response) {
+                if (response.data.status) {
+                    new PNotify({
+                        title: 'Success!',
+                        text: 'Password protection enabled successfully',
+                        type: 'success'
+                    });
+                    $('#Passwordprotection').modal('hide');
+                    // Clear the credentials
+                    $scope.PPUsername = '';
+                    $scope.PPPassword = '';
+                } else {
+                    $scope.currentWPSite.passwordProtection = false;
+                    new PNotify({
+                        title: 'Error!',
+                        text: response.data.error_message || 'Failed to enable password protection',
+                        type: 'error'
+                    });
+                }
+            },
+            function(response) {
+                $scope.currentWPSite.passwordProtection = false;
+                new PNotify({
+                    title: 'Error!',
+                    text: 'Could not connect to server',
+                    type: 'error'
+                });
+            }
+        );
+    };
+
 });
 
 app.controller('listChildDomainsMain', function ($scope, $http, $timeout) {
@@ -6338,6 +6405,73 @@ app.controller('listWebsites', function ($scope, $http, $window) {
 
     };
 
+    $scope.togglePasswordProtection = function(wp) {
+        if (wp.passwordProtection) {
+            // Show modal for credentials
+            $('#Passwordprotection').modal('show');
+            // Store the current WordPress site for later use
+            $scope.currentWPSite = wp;
+        } else {
+            // Disable password protection
+            $scope.updateSetting(wp, 'password-protection');
+        }
+    };
+
+    $scope.enablePasswordProtection = function() {
+        if (!$scope.PPUsername || !$scope.PPPassword) {
+            new PNotify({
+                title: 'Error!',
+                text: 'Please provide both username and password',
+                type: 'error'
+            });
+            return;
+        }
+
+        var data = {
+            siteId: $scope.currentWPSite.id,
+            setting: 'password-protection',
+            PPUsername: $scope.PPUsername,
+            PPPassword: $scope.PPPassword
+        };
+
+        var config = {
+            headers: {
+                'X-CSRFToken': getCookie('csrftoken')
+            }
+        };
+
+        $http.post('/websites/UpdateWPSettings', data, config).then(
+            function(response) {
+                if (response.data.status) {
+                    new PNotify({
+                        title: 'Success!',
+                        text: 'Password protection enabled successfully',
+                        type: 'success'
+                    });
+                    $('#Passwordprotection').modal('hide');
+                    // Clear the credentials
+                    $scope.PPUsername = '';
+                    $scope.PPPassword = '';
+                } else {
+                    $scope.currentWPSite.passwordProtection = false;
+                    new PNotify({
+                        title: 'Error!',
+                        text: response.data.error_message || 'Failed to enable password protection',
+                        type: 'error'
+                    });
+                }
+            },
+            function(response) {
+                $scope.currentWPSite.passwordProtection = false;
+                new PNotify({
+                    title: 'Error!',
+                    text: 'Could not connect to server',
+                    type: 'error'
+                });
+            }
+        );
+    };
+
 });
 
 app.controller('listChildDomainsMain', function ($scope, $http, $timeout) {
diff --git a/websiteFunctions/templates/websiteFunctions/listWebsites.html b/websiteFunctions/templates/websiteFunctions/listWebsites.html
index 3fd35f039..12c7ecf79 100755
--- a/websiteFunctions/templates/websiteFunctions/listWebsites.html
+++ b/websiteFunctions/templates/websiteFunctions/listWebsites.html
@@ -16,6 +16,37 @@
         });
     </script>
 
+    <!-- Password Protection Modal -->
+    <div id="Passwordprotection" class="modal fade" role="dialog">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    <h4 class="modal-title">Enable Password Protection</h4>
+                </div>
+                <div class="modal-body">
+                    <div>
+                        <label class="col-sm-4">Username</label>
+                        <input ng-model="PPUsername" required class="col-lg-8"
+                               type="text" placeholder="Username">
+                    </div>
+                    <div style="margin-top: 36px;">
+                        <label class="col-sm-4">Password</label>
+                        <input ng-model="PPPassword" required class="col-lg-8"
+                               type="password" placeholder="*******************">
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-primary"
+                            ng-click="enablePasswordProtection()">Enable</button>
+                    <button type="button" class="btn btn-default" data-dismiss="modal">
+                        Cancel
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div ng-controller="listWebsites" class="container">
 
         <div id="page-title">
@@ -196,7 +227,7 @@
                                                     <div class="col-sm-6">
                                                         <div class="checkbox">
                                                             <label>
-                                                                <input type="checkbox" ng-model="wp.passwordProtection" ng-change="updateSetting(wp, 'password-protection')">
+                                                                <input type="checkbox" ng-model="wp.passwordProtection" ng-change="togglePasswordProtection(wp)">
                                                                 Password protection
                                                             </label>
                                                         </div>