diff --git a/websiteFunctions/templates/websiteFunctions/WPsitesList.html b/websiteFunctions/templates/websiteFunctions/WPsitesList.html
index 80c76fd22..5c222dc1a 100644
--- a/websiteFunctions/templates/websiteFunctions/WPsitesList.html
+++ b/websiteFunctions/templates/websiteFunctions/WPsitesList.html
@@ -3,6 +3,7 @@
 {% block title %}{% trans "WordPress Toolkit - CyberPanel" %}{% endblock %}
 
 {% block header_scripts %}
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script>
         // Create or get the CyberCP module
         try {
@@ -21,6 +22,14 @@
             $scope.isAdmin = $scope.debug.is_admin;
             $scope.wpSitesCount = $scope.debug.wp_sites_count;
 
+            $scope.getFullUrl = function(url) {
+                if (!url) return '';
+                if (url.startsWith('http://') || url.startsWith('https://')) {
+                    return url;
+                }
+                return 'https://' + url;
+            };
+
             $scope.deleteWPSite = function(site) {
                 if (confirm('Are you sure you want to delete this WordPress site? This action cannot be undone.')) {
                     window.location.href = "{% url 'ListWPSites' %}?DeleteID=" + site.id;
@@ -106,6 +115,7 @@
             // Fetch site data for each site
             function fetchSiteData(site) {
                 var data = { WPid: site.id };
+                site.fullUrl = $scope.getFullUrl(site.url); // Add full URL to site object
 
                 GLobalAjaxCall($http, "{% url 'FetchWPdata' %}", data,
                     function(response) {
@@ -117,7 +127,6 @@
                             site.debugging = data.debugging === 1;
                             site.passwordProtection = data.passwordprotection === 1;
                             site.maintenanceMode = data.maintenanceMode === 1;
-                            // After getting basic site data, fetch plugins and themes
                             fetchPluginData(site);
                             fetchThemeData(site);
                         }
@@ -436,114 +445,99 @@
 {% endblock %}
 
 {% block content %}
-    {% load static %}
-    {% csrf_token %}
-
-    <div class="container" ng-controller="listWordPressSites">
-        <div class="alert alert-info" ng-if="debug">
-            <h4>Debug Information</h4>
-            <p>Total WordPress Sites: {$ totalSites $}</p>
-            <p>User ID: {$ userId $}</p>
-            <p>Is Admin: {$ isAdmin $}</p>
-            <p>WP Sites Count: {$ wpSitesCount $}</p>
-        </div>
-
-        <div class="alert alert-info" ng-if="!wpSites || wpSites.length === 0">
-            No WordPress sites found. <a href="{% url 'createWordpress' %}" class="alert-link">Install WordPress</a> to get started.
-        </div>
-
-        <div ng-if="wpSites && wpSites.length > 0">
-            <div class="top-actions">
-                <h2>WordPress Toolkit {% if help_url %}<a href="{{ help_url }}" class="btn-tool">Help</a>{% endif %}</h2>
-                <div>
-                    <input type="text" class="search-box" ng-model="searchTerm" placeholder="Search WordPress installations...">
-                    <a href="{% url 'createWordpress' %}" class="btn btn-primary">Install WordPress</a>
+    <div class="container-fluid py-4" ng-controller="listWordPressSites">
+        <div class="row mb-4">
+            <div class="col-12">
+                <div class="card">
+                    <div class="card-header d-flex justify-content-between align-items-center">
+                        <h5 class="mb-0">WordPress Sites</h5>
+                        <div class="d-flex gap-2">
+                            <input type="text" class="form-control" ng-model="searchTerm" placeholder="Search WordPress installations...">
+                            <a href="{% url 'createWordpress' %}" class="btn btn-primary">Install WordPress</a>
+                        </div>
+                    </div>
                 </div>
             </div>
+        </div>
 
-            <div class="card mb-3" ng-repeat="site in wpSites">
-                <div class="card-body">
-                    <div class="row">
-                        <div class="col-md-3">
-                            <div class="site-preview">
-                                <div class="preview-placeholder" style="background-color: #f8f9fa; min-height: 200px; display: flex; align-items: center; justify-content: center; border-radius: 8px; overflow: hidden;">
-                                    <img ng-src="https://api.microlink.io/?url={$ site.url $}&screenshot=true&meta=false&embed=screenshot.url" 
-                                         alt="{$ site.title $}" 
-                                         style="max-width: 100%; height: auto;"
-                                         loading="lazy"
-                                         onerror="this.onerror=null; this.src='https://s.wordpress.org/style/images/about/WordPress-logotype-standard.png';">
-                                </div>
-                                <a href="{$ site.url $}" target="_blank" class="btn btn-sm btn-outline-primary mt-2">
-                                    <i class="fas fa-external-link-alt"></i> Visit Site
-                                </a>
-                            </div>
-                        </div>
-                        <div class="col-md-9">
-                            <div class="d-flex justify-content-between align-items-start">
-                                <h5 class="card-title mb-3">{$ site.title $}</h5>
-                                <div>
-                                    <button class="btn btn-primary btn-sm" ng-click="window.location.href='{% url 'WPHome' %}?ID=' + site.id">
-                                        <i class="fas fa-cog"></i> Manage
-                                    </button>
-                                    <button class="btn btn-danger btn-sm" ng-click="deleteWPSite(site)">
-                                        <i class="fas fa-trash"></i> Delete
-                                    </button>
+        <div class="row">
+            <div class="col-12">
+                <div class="card mb-4" ng-repeat="site in wpSites">
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-md-3">
+                                <div class="site-preview">
+                                    <div class="preview-placeholder rounded overflow-hidden" style="background-color: #f8f9fa; min-height: 200px;">
+                                        <img ng-src="https://api.microlink.io/?url={$ getFullUrl(site.url) $}&screenshot=true&meta=false&embed=screenshot.url" 
+                                             alt="{$ site.title $}" 
+                                             class="img-fluid w-100"
+                                             loading="lazy"
+                                             onerror="this.onerror=null; this.src='https://s.wordpress.org/style/images/about/WordPress-logotype-standard.png';">
+                                    </div>
+                                    <a ng-href="{$ getFullUrl(site.url) $}" target="_blank" class="btn btn-sm btn-outline-primary mt-2 w-100">
+                                        <i class="fas fa-external-link-alt"></i> Visit Site
+                                    </a>
                                 </div>
                             </div>
-                            
-                            <div class="row mb-3">
-                                <div class="col-md-3">
-                                    <small class="text-muted">WordPress</small>
-                                    <div>{$ site.version $}</div>
+                            <div class="col-md-9">
+                                <div class="d-flex justify-content-between align-items-start mb-3">
+                                    <h5 class="card-title">{$ site.title $}</h5>
+                                    <div class="btn-group">
+                                        <a ng-href="{% url 'WPHome' %}?ID={$ site.id $}" class="btn btn-primary btn-sm">
+                                            <i class="fas fa-cog"></i> Manage
+                                        </a>
+                                        <button class="btn btn-danger btn-sm" ng-click="deleteWPSite(site)">
+                                            <i class="fas fa-trash"></i> Delete
+                                        </button>
+                                    </div>
                                 </div>
-                                <div class="col-md-3">
-                                    <small class="text-muted">Plugins</small>
-                                    <div>{$ site.activePlugins || 0 $} active</div>
-                                </div>
-                                <div class="col-md-3">
-                                    <small class="text-muted">Theme</small>
-                                    <div>{$ site.activeTheme || 'Loading...' $}</div>
-                                </div>
-                                <div class="col-md-3">
-                                    <small class="text-muted">PHP Version</small>
-                                    <div>{$ site.phpVersion || 'Loading...' $}</div>
-                                </div>
-                            </div>
 
-                            <div class="row">
-                                <div class="col-md-6">
-                                    <div class="form-group">
-                                        <div class="custom-control custom-switch">
-                                            <input type="checkbox" class="custom-control-input" id="search-indexing-{$ site.id $}" 
+                                <div class="row mb-4">
+                                    <div class="col-md-3">
+                                        <small class="text-muted d-block">WordPress</small>
+                                        <strong>{$ site.version $}</strong>
+                                    </div>
+                                    <div class="col-md-3">
+                                        <small class="text-muted d-block">Plugins</small>
+                                        <strong>{$ site.activePlugins || 0 $} active</strong>
+                                    </div>
+                                    <div class="col-md-3">
+                                        <small class="text-muted d-block">Theme</small>
+                                        <strong>{$ site.activeTheme || 'Loading...' $}</strong>
+                                    </div>
+                                    <div class="col-md-3">
+                                        <small class="text-muted d-block">PHP Version</small>
+                                        <strong>{$ site.phpVersion || 'Loading...' $}</strong>
+                                    </div>
+                                </div>
+
+                                <div class="row">
+                                    <div class="col-md-6">
+                                        <div class="form-check form-switch mb-2">
+                                            <input type="checkbox" class="form-check-input" id="search-indexing-{$ site.id $}" 
                                                    ng-model="site.searchIndex" 
                                                    ng-change="updateSetting(site, 'search-indexing')">
-                                            <label class="custom-control-label" for="search-indexing-{$ site.id $}">Search engine indexing</label>
+                                            <label class="form-check-label" for="search-indexing-{$ site.id $}">Search engine indexing</label>
                                         </div>
-                                    </div>
-                                    <div class="form-group">
-                                        <div class="custom-control custom-switch">
-                                            <input type="checkbox" class="custom-control-input" id="debugging-{$ site.id $}" 
+                                        <div class="form-check form-switch">
+                                            <input type="checkbox" class="form-check-input" id="debugging-{$ site.id $}" 
                                                    ng-model="site.debugging" 
                                                    ng-change="updateSetting(site, 'debugging')">
-                                            <label class="custom-control-label" for="debugging-{$ site.id $}">Debugging</label>
+                                            <label class="form-check-label" for="debugging-{$ site.id $}">Debugging</label>
                                         </div>
                                     </div>
-                                </div>
-                                <div class="col-md-6">
-                                    <div class="form-group">
-                                        <div class="custom-control custom-switch">
-                                            <input type="checkbox" class="custom-control-input" id="password-protection-{$ site.id $}" 
+                                    <div class="col-md-6">
+                                        <div class="form-check form-switch mb-2">
+                                            <input type="checkbox" class="form-check-input" id="password-protection-{$ site.id $}" 
                                                    ng-model="site.passwordProtection" 
                                                    ng-change="updateSetting(site, 'password-protection')">
-                                            <label class="custom-control-label" for="password-protection-{$ site.id $}">Password protection</label>
+                                            <label class="form-check-label" for="password-protection-{$ site.id $}">Password protection</label>
                                         </div>
-                                    </div>
-                                    <div class="form-group">
-                                        <div class="custom-control custom-switch">
-                                            <input type="checkbox" class="custom-control-input" id="maintenance-mode-{$ site.id $}" 
+                                        <div class="form-check form-switch">
+                                            <input type="checkbox" class="form-check-input" id="maintenance-mode-{$ site.id $}" 
                                                    ng-model="site.maintenanceMode" 
                                                    ng-change="updateSetting(site, 'maintenance-mode')">
-                                            <label class="custom-control-label" for="maintenance-mode-{$ site.id $}">Maintenance mode</label>
+                                            <label class="form-check-label" for="maintenance-mode-{$ site.id $}">Maintenance mode</label>
                                         </div>
                                     </div>
                                 </div>