diff --git a/websiteFunctions/static/websiteFunctions/websiteFunctions.js b/websiteFunctions/static/websiteFunctions/websiteFunctions.js
index 807ee0cd1..68c8b171a 100755
--- a/websiteFunctions/static/websiteFunctions/websiteFunctions.js
+++ b/websiteFunctions/static/websiteFunctions/websiteFunctions.js
@@ -2371,6 +2371,14 @@ app.controller('listWebsites', function ($scope, $http, $window) {
     $scope.currentPage = 1;
     $scope.recordsToShow = 10;
 
+    $scope.expandedSites = {};
+    $scope.toggleSite = function(site) {
+        $scope.expandedSites[site.domain] = !$scope.expandedSites[site.domain];
+    };
+    $scope.isExpanded = function(domain) {
+        return !!$scope.expandedSites[domain];
+    };
+
     // Initial fetch of websites
     $scope.getFurtherWebsitesFromDB = function () {
         $scope.loading = true; // Set loading to true when starting fetch
@@ -2392,6 +2400,11 @@ app.controller('listWebsites', function ($scope, $http, $window) {
                 $scope.WebSitesList = JSON.parse(response.data.data);
                 $scope.pagination = response.data.pagination;
                 $("#listFail").hide();
+                // Expand the first website by default
+                if ($scope.WebSitesList.length > 0) {
+                    $scope.expandedSites = {};
+                    $scope.expandedSites[$scope.WebSitesList[0].domain] = true;
+                }
             } else {
                 $("#listFail").fadeIn();
                 $scope.errorMessage = response.data.error_message;
@@ -5510,6 +5523,14 @@ app.controller('listWebsites', function ($scope, $http, $window) {
     $scope.currentPage = 1;
     $scope.recordsToShow = 10;
 
+    $scope.expandedSites = {};
+    $scope.toggleSite = function(site) {
+        $scope.expandedSites[site.domain] = !$scope.expandedSites[site.domain];
+    };
+    $scope.isExpanded = function(domain) {
+        return !!$scope.expandedSites[domain];
+    };
+
     // Initial fetch of websites
     $scope.getFurtherWebsitesFromDB = function () {
         $scope.loading = true; // Set loading to true when starting fetch
@@ -5531,6 +5552,11 @@ app.controller('listWebsites', function ($scope, $http, $window) {
                 $scope.WebSitesList = JSON.parse(response.data.data);
                 $scope.pagination = response.data.pagination;
                 $("#listFail").hide();
+                // Expand the first website by default
+                if ($scope.WebSitesList.length > 0) {
+                    $scope.expandedSites = {};
+                    $scope.expandedSites[$scope.WebSitesList[0].domain] = true;
+                }
             } else {
                 $("#listFail").fadeIn();
                 $scope.errorMessage = response.data.error_message;
@@ -8996,6 +9022,14 @@ app.controller('listWebsites', function ($scope, $http, $window) {
     $scope.currentPage = 1;
     $scope.recordsToShow = 10;
 
+    $scope.expandedSites = {};
+    $scope.toggleSite = function(site) {
+        $scope.expandedSites[site.domain] = !$scope.expandedSites[site.domain];
+    };
+    $scope.isExpanded = function(domain) {
+        return !!$scope.expandedSites[domain];
+    };
+
     // Initial fetch of websites
     $scope.getFurtherWebsitesFromDB = function () {
         $scope.loading = true; // Set loading to true when starting fetch
@@ -9017,6 +9051,11 @@ app.controller('listWebsites', function ($scope, $http, $window) {
                 $scope.WebSitesList = JSON.parse(response.data.data);
                 $scope.pagination = response.data.pagination;
                 $("#listFail").hide();
+                // Expand the first website by default
+                if ($scope.WebSitesList.length > 0) {
+                    $scope.expandedSites = {};
+                    $scope.expandedSites[$scope.WebSitesList[0].domain] = true;
+                }
             } else {
                 $("#listFail").fadeIn();
                 $scope.errorMessage = response.data.error_message;
diff --git a/websiteFunctions/templates/websiteFunctions/listWebsites.html b/websiteFunctions/templates/websiteFunctions/listWebsites.html
index 4e09feade..793b5d4ca 100755
--- a/websiteFunctions/templates/websiteFunctions/listWebsites.html
+++ b/websiteFunctions/templates/websiteFunctions/listWebsites.html
@@ -81,192 +81,178 @@
                 </div>
             </div>
 
-            <div ng-repeat="web in WebSitesList track by $index" class="panel col-md-12"
-                 style="padding: 0px; box-shadow: 0px 0px 1px 0px #888888;">
-                <div class="">
-                    <div class="table-responsive no-gutter text-nowrap" style="overflow-x: hidden;">
-
-                        <div style="border-bottom: 1px solid #888888" class="col-md-12">
-                            <div class="col-lg-10 content-box-header" style="text-transform: none;">
-                                <a href="http://{$ web.domain $}" target="_blank" title="Visit Site">
-                                    <h2 style="display: inline; color: #414C59;" ng-bind="web.domain"></h2>
-                                </a>
-                                <a target="_self" href="/filemanager/{$ web.domain $}" title="Open File Manager"> --
-                                    {% trans "File Manager" %}</a>
-                            </div>
-                            <div class="col-md-2 content-box-header" style="text-transform: none;">
-                                <a href="/websites/{$ web.domain $}" target="_self" title="Manage Website">
-                                    <i class="p fa fa-external-link btn-icon">&emsp;</i>
-                                    <span>{% trans "Manage" %}</span>
-                                </a>
-                            </div>
+            <div ng-repeat="web in WebSitesList track by $index" class="wp-site-item">
+                <div class="row wp-site-header" ng-click="toggleSite(web)" style="cursor:pointer;align-items:center;">
+                    <div class="col-sm-1">
+                        <img ng-src="https://api.microlink.io/?url={$ web.domain $}&screenshot=true&meta=false&embed=screenshot.url"
+                             onerror="this.onerror=null; this.src='/static/images/icons/default-site.png';"
+                             class="img-responsive" style="max-width: 60px; min-height:40px; background:#f5f5f5;">
+                    </div>
+                    <div class="col-sm-9">
+                        <h4 style="margin:0;display:inline-block;">
+                            <i class="fas" ng-class="{'fa-chevron-down': isExpanded(web.domain), 'fa-chevron-right': !isExpanded(web.domain)}" style="margin-right:10px;"></i>
+                            {$ web.domain $}
+                        </h4>
+                    </div>
+                    <div class="col-sm-2 text-right">
+                        <a href="/websites/{$ web.domain $}" target="_self" title="Manage Website" class="btn btn-primary btn-sm">
+                            <i class="fa fa-external-link"></i> {% trans "Manage" %}
+                        </a>
+                    </div>
+                </div>
+                <div class="wp-site-content" ng-if="isExpanded(web.domain)">
+                    <div class="row">
+                        <div class="col-md-3 content-box-header">
+                            <i class="p fa fa-sticky-note btn-icon text-muted" data-toggle="tooltip" data-placement="right" title="State">&emsp;</i>
+                            <span ng-bind="web.state" style="text-transform: none"></span>
                         </div>
-
-                        <div class="col-md-12">
-                            <div class="col-md-3 content-box-header">
-                                <i class="p fa fa-sticky-note btn-icon text-muted" data-toggle="tooltip"
-                                   data-placement="right" title="State">&emsp;</i>
-                                <span ng-bind="web.state" style="text-transform: none"></span>
-                            </div>
-                            <div class="col-md-3 content-box-header">
-                                <i class="p fa fa-map-marker btn-icon text-muted" data-toggle="tooltip"
-                                   data-placement="right" title="IP Address">&emsp;</i>
-                                <span ng-bind="web.ipAddress"></span>
-                            </div>
-                            <div class="col-md-3 content-box-header">
-                                <i class="p fa fa-lock btn-icon text-muted" data-toggle="tooltip" data-placement="right"
-                                   title="SSL">&emsp;</i>
-                                <span><a ng-click="issueSSL(web.domain)" href=""
-                                         style="text-transform: none">{% trans "Issue SSL" %}</a></span>
-                            </div>
-                            <div class="col-md-3 content-box-header">
-                                <span ng-bind="web.phpVersion"></span>
-                            </div>
+                        <div class="col-md-3 content-box-header">
+                            <i class="p fa fa-map-marker btn-icon text-muted" data-toggle="tooltip" data-placement="right" title="IP Address">&emsp;</i>
+                            <span ng-bind="web.ipAddress"></span>
                         </div>
-
-                        <div class="col-md-12">
-                            <div class="col-md-3 content-box-header">
-                                <i class="fa-solid fa-hard-drive btn-icon text-muted" data-toggle="tooltip"
-                                   data-placement="right"
-                                   title="Disk Usage">&emsp;</i>
-                                <span ng-bind="web.diskUsed" style="text-transform: none"></span>
-                            </div>
-                            <div class="col-md-3 content-box-header">
-                                <i class="fa-solid fa-cubes btn-icon text-muted" data-toggle="tooltip"
-                                   data-placement="right"
-                                   title="Packages">&emsp;</i>
-                                <span ng-bind="web.package" style="text-transform: none"></span>
-                            </div>
-                            <div class="col-md-3 content-box-header">
-                                <i class="fa-solid fa-user btn-icon text-muted" data-toggle="tooltip" data-placement="right"
-                                   title="Owner">&emsp;</i>
-                                <span ng-bind="web.admin" style="text-transform: none"></span>
-                            </div>
-                            <div class="col-md-3 content-box-header">
-                                <a href="javascript:void(0);" ng-click="showWPSites(web.domain)" class="wp-sites-link">
-                                    <i class="fa-brands fa-wordpress btn-icon text-muted" data-toggle="tooltip" 
-                                       data-placement="right" title="Show WordPress Sites"></i>
-                                    <span ng-if="!web.loadingWPSites" class="wp-sites-count">
-                                        {$ (web.wp_sites && web.wp_sites.length) || 0 $} WordPress Sites
-                                    </span>
-                                    <span ng-if="web.loadingWPSites" class="loading-indicator">
-                                        Loading <i class="fa fa-spinner fa-spin"></i>
-                                    </span>
-                                </a>
-                            </div>
+                        <div class="col-md-3 content-box-header">
+                            <i class="p fa fa-lock btn-icon text-muted" data-toggle="tooltip" data-placement="right" title="SSL">&emsp;</i>
+                            <span><a ng-click="issueSSL(web.domain)" href="" style="text-transform: none">{% trans "Issue SSL" %}</a></span>
                         </div>
-
-                        <!-- WordPress Sites Section -->
-                        <div class="col-md-12" ng-if="web.showWPSites && web.wp_sites && web.wp_sites.length > 0" style="padding: 15px 30px;">
-                            <div ng-repeat="wp in web.wp_sites" class="wp-site-item">
-                                <div class="row">
-                                    <div class="col-sm-12">
-                                        <div class="wp-site-header">
-                                            <div class="row">
-                                                <div class="col-sm-8">
-                                                    <h4>
-                                                        <i class="fa-brands fa-wordpress" style="color: #00749C; margin-right: 8px;"></i>
-                                                        {$ wp.title $}
-                                                        <span ng-if="wp.loading || wp.loadingPlugins || wp.loadingTheme" class="loading-indicator">
-                                                            <i class="fa fa-spinner fa-spin" style="color: #00749C; font-size: 14px;"></i>
-                                                        </span>
-                                                    </h4>
-                                                </div>
-                                                <div class="col-sm-4 text-right">
-                                                    <button class="btn btn-outline-primary btn-sm wp-action-btn" ng-click="manageWP(wp.id)">
-                                                        <i class="fa-solid fa-cog"></i> Manage
-                                                    </button>
-                                                    <button class="btn btn-outline-danger btn-sm wp-action-btn" ng-click="deleteWPSite(wp)">
-                                                        <i class="fa-solid fa-trash"></i> Delete
-                                                    </button>
-                                                </div>
+                        <div class="col-md-3 content-box-header">
+                            <span ng-bind="web.phpVersion"></span>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-3 content-box-header">
+                            <i class="fa-solid fa-hard-drive btn-icon text-muted" data-toggle="tooltip" data-placement="right" title="Disk Usage">&emsp;</i>
+                            <span ng-bind="web.diskUsed" style="text-transform: none"></span>
+                        </div>
+                        <div class="col-md-3 content-box-header">
+                            <i class="fa-solid fa-cubes btn-icon text-muted" data-toggle="tooltip" data-placement="right" title="Packages">&emsp;</i>
+                            <span ng-bind="web.package" style="text-transform: none"></span>
+                        </div>
+                        <div class="col-md-3 content-box-header">
+                            <i class="fa-solid fa-user btn-icon text-muted" data-toggle="tooltip" data-placement="right" title="Owner">&emsp;</i>
+                            <span ng-bind="web.admin" style="text-transform: none"></span>
+                        </div>
+                        <div class="col-md-3 content-box-header">
+                            <a href="javascript:void(0);" ng-click="$event.stopPropagation(); showWPSites(web.domain)" class="wp-sites-link">
+                                <i class="fa-brands fa-wordpress btn-icon text-muted" data-toggle="tooltip" data-placement="right" title="Show WordPress Sites"></i>
+                                <span ng-if="!web.loadingWPSites" class="wp-sites-count">
+                                    {$ (web.wp_sites && web.wp_sites.length) || 0 $} WordPress Sites
+                                </span>
+                                <span ng-if="web.loadingWPSites" class="loading-indicator">
+                                    Loading <i class="fa fa-spinner fa-spin"></i>
+                                </span>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- WordPress Sites Section -->
+                    <div class="col-md-12" ng-if="web.showWPSites && web.wp_sites && web.wp_sites.length > 0" style="padding: 15px 30px;">
+                        <div ng-repeat="wp in web.wp_sites" class="wp-site-item">
+                            <div class="row">
+                                <div class="col-sm-12">
+                                    <div class="wp-site-header">
+                                        <div class="row">
+                                            <div class="col-sm-8">
+                                                <h4>
+                                                    <i class="fa-brands fa-wordpress" style="color: #00749C; margin-right: 8px;"></i>
+                                                    {$ wp.title $}
+                                                    <span ng-if="wp.loading || wp.loadingPlugins || wp.loadingTheme" class="loading-indicator">
+                                                        <i class="fa fa-spinner fa-spin" style="color: #00749C; font-size: 14px;"></i>
+                                                    </span>
+                                                </h4>
+                                            </div>
+                                            <div class="col-sm-4 text-right">
+                                                <button class="btn btn-outline-primary btn-sm wp-action-btn" ng-click="manageWP(wp.id)">
+                                                    <i class="fa-solid fa-cog"></i> Manage
+                                                </button>
+                                                <button class="btn btn-outline-danger btn-sm wp-action-btn" ng-click="deleteWPSite(wp)">
+                                                    <i class="fa-solid fa-trash"></i> Delete
+                                                </button>
                                             </div>
                                         </div>
-                                        <div class="wp-site-content">
-                                            <div class="row">
-                                                <div class="col-sm-3">
-                                                    <img ng-src="{$ wp.screenshot $}" 
-                                                         alt="{$ wp.title $}" 
-                                                         class="img-responsive"
-                                                         style="max-width: 100%; margin-bottom: 10px; min-height: 150px; background: #f5f5f5;"
-                                                         onerror="this.onerror=null; this.src='https://s.wordpress.org/style/images/about/WordPress-logotype-standard.png';">
-                                                    <div class="text-center wp-action-buttons">
-                                                        <a href="javascript:void(0);" ng-click="visitSite(wp)" class="btn btn-outline-secondary btn-sm wp-action-btn">
-                                                            <i class="fa-solid fa-external-link"></i> Visit Site
-                                                        </a>
-                                                        <a href="{% url 'AutoLogin' %}?id={$ wp.id $}" target="_blank" class="btn btn-outline-primary btn-sm wp-action-btn">
-                                                            <i class="fa-brands fa-wordpress"></i> WP Login
-                                                        </a>
+                                    </div>
+                                    <div class="wp-site-content">
+                                        <div class="row">
+                                            <div class="col-sm-3">
+                                                <img ng-src="{$ wp.screenshot $}" 
+                                                     alt="{$ wp.title $}" 
+                                                     class="img-responsive"
+                                                     style="max-width: 100%; margin-bottom: 10px; min-height: 150px; background: #f5f5f5;"
+                                                     onerror="this.onerror=null; this.src='https://s.wordpress.org/style/images/about/WordPress-logotype-standard.png';">
+                                                <div class="text-center wp-action-buttons">
+                                                    <a href="javascript:void(0);" ng-click="visitSite(wp)" class="btn btn-outline-secondary btn-sm wp-action-btn">
+                                                        <i class="fa-solid fa-external-link"></i> Visit Site
+                                                    </a>
+                                                    <a href="{% url 'AutoLogin' %}?id={$ wp.id $}" target="_blank" class="btn btn-outline-primary btn-sm wp-action-btn">
+                                                        <i class="fa-brands fa-wordpress"></i> WP Login
+                                                    </a>
+                                                </div>
+                                            </div>
+                                            <div class="col-sm-9">
+                                                <div class="row">
+                                                    <div class="col-sm-3">
+                                                        <div class="info-box">
+                                                            <label>WordPress</label>
+                                                            <span>{$ wp.version || 'Loading...' $}</span>
+                                                            <i ng-if="wp.loading" class="fa fa-spinner fa-spin" style="margin-left: 5px; font-size: 12px;"></i>
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-sm-3">
+                                                        <div class="info-box">
+                                                            <label>PHP Version</label>
+                                                            <span>{$ wp.phpVersion || 'Loading...' $}</span>
+                                                            <i ng-if="wp.loading" class="fa fa-spinner fa-spin" style="margin-left: 5px; font-size: 12px;"></i>
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-sm-3">
+                                                        <div class="info-box">
+                                                            <label>Theme</label>
+                                                            <span>{$ wp.theme || 'Loading...' $}</span>
+                                                            <i ng-if="wp.loadingTheme" class="fa fa-spinner fa-spin" style="margin-left: 5px; font-size: 12px;"></i>
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-sm-3">
+                                                        <div class="info-box">
+                                                            <label>Plugins</label>
+                                                            <span>{$ wp.activePlugins || '0' $} active</span>
+                                                            <i ng-if="wp.loadingPlugins" class="fa fa-spinner fa-spin" style="margin-left: 5px; font-size: 12px;"></i>
+                                                        </div>
                                                     </div>
                                                 </div>
-                                                <div class="col-sm-9">
-                                                    <div class="row">
-                                                        <div class="col-sm-3">
-                                                            <div class="info-box">
-                                                                <label>WordPress</label>
-                                                                <span>{$ wp.version || 'Loading...' $}</span>
-                                                                <i ng-if="wp.loading" class="fa fa-spinner fa-spin" style="margin-left: 5px; font-size: 12px;"></i>
-                                                            </div>
+                                                <div class="row mt-3">
+                                                    <div class="col-sm-6">
+                                                        <div class="checkbox">
+                                                            <label>
+                                                                <input type="checkbox" 
+                                                                       ng-click="updateSetting(wp, 'search-indexing')"
+                                                                       ng-checked="wp.searchIndex == 1">
+                                                                Search engine indexing
+                                                            </label>
                                                         </div>
-                                                        <div class="col-sm-3">
-                                                            <div class="info-box">
-                                                                <label>PHP Version</label>
-                                                                <span>{$ wp.phpVersion || 'Loading...' $}</span>
-                                                                <i ng-if="wp.loading" class="fa fa-spinner fa-spin" style="margin-left: 5px; font-size: 12px;"></i>
-                                                            </div>
-                                                        </div>
-                                                        <div class="col-sm-3">
-                                                            <div class="info-box">
-                                                                <label>Theme</label>
-                                                                <span>{$ wp.theme || 'Loading...' $}</span>
-                                                                <i ng-if="wp.loadingTheme" class="fa fa-spinner fa-spin" style="margin-left: 5px; font-size: 12px;"></i>
-                                                            </div>
-                                                        </div>
-                                                        <div class="col-sm-3">
-                                                            <div class="info-box">
-                                                                <label>Plugins</label>
-                                                                <span>{$ wp.activePlugins || '0' $} active</span>
-                                                                <i ng-if="wp.loadingPlugins" class="fa fa-spinner fa-spin" style="margin-left: 5px; font-size: 12px;"></i>
-                                                            </div>
+                                                        <div class="checkbox">
+                                                            <label>
+                                                                <input type="checkbox" 
+                                                                       ng-click="updateSetting(wp, 'debugging')"
+                                                                       ng-checked="wp.debugging == 1">
+                                                                Debugging
+                                                            </label>
                                                         </div>
                                                     </div>
-                                                    <div class="row mt-3">
-                                                        <div class="col-sm-6">
-                                                            <div class="checkbox">
-                                                                <label>
-                                                                    <input type="checkbox" 
-                                                                           ng-click="updateSetting(wp, 'search-indexing')"
-                                                                           ng-checked="wp.searchIndex == 1">
-                                                                    Search engine indexing
-                                                                </label>
-                                                            </div>
-                                                            <div class="checkbox">
-                                                                <label>
-                                                                    <input type="checkbox" 
-                                                                           ng-click="updateSetting(wp, 'debugging')"
-                                                                           ng-checked="wp.debugging == 1">
-                                                                    Debugging
-                                                                </label>
-                                                            </div>
+                                                    <div class="col-sm-6">
+                                                        <div class="checkbox">
+                                                            <label>
+                                                                <input type="checkbox" 
+                                                                       ng-model="wp.passwordProtection"
+                                                                       ng-init="wp.passwordProtection = wp.passwordProtection || false"
+                                                                       ng-change="togglePasswordProtection(wp)">
+                                                                Password protection
+                                                            </label>
                                                         </div>
-                                                        <div class="col-sm-6">
-                                                            <div class="checkbox">
-                                                                <label>
-                                                                    <input type="checkbox" 
-                                                                           ng-model="wp.passwordProtection"
-                                                                           ng-init="wp.passwordProtection = wp.passwordProtection || false"
-                                                                           ng-change="togglePasswordProtection(wp)">
-                                                                    Password protection
-                                                                </label>
-                                                            </div>
-                                                            <div class="checkbox">
-                                                                <label>
-                                                                    <input type="checkbox" 
-                                                                           ng-click="updateSetting(wp, 'maintenance-mode')"
-                                                                           ng-checked="wp.maintenanceMode == 1">
-                                                                    Maintenance mode
-                                                                </label>
-                                                            </div>
+                                                        <div class="checkbox">
+                                                            <label>
+                                                                <input type="checkbox" 
+                                                                       ng-click="updateSetting(wp, 'maintenance-mode')"
+                                                                       ng-checked="wp.maintenanceMode == 1">
+                                                                Maintenance mode
+                                                            </label>
                                                         </div>
                                                     </div>
                                                 </div>
@@ -276,145 +262,9 @@
                                 </div>
                             </div>
                         </div>
-
-                        <style>
-                            .wp-site-item {
-                                border: 1px solid #e0e0e0;
-                                margin-bottom: 20px;
-                                border-radius: 8px;
-                                background: white;
-                                box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-                            }
-                            .wp-site-header {
-                                padding: 15px 20px;
-                                border-bottom: 1px solid #e0e0e0;
-                                background: #f8f9fa;
-                                border-radius: 8px 8px 0 0;
-                            }
-                            .wp-site-header h4 {
-                                margin: 0;
-                                font-size: 18px;
-                                line-height: 34px;
-                                color: #2c3338;
-                                font-weight: 500;
-                            }
-                            .wp-site-content {
-                                padding: 20px;
-                            }
-                            .info-box {
-                                margin-bottom: 15px;
-                                background: #f8f9fa;
-                                padding: 10px;
-                                border-radius: 6px;
-                            }
-                            .info-box label {
-                                display: block;
-                                font-size: 12px;
-                                color: #646970;
-                                margin-bottom: 5px;
-                                font-weight: 500;
-                            }
-                            .info-box span {
-                                font-size: 14px;
-                                font-weight: 600;
-                                color: #2c3338;
-                            }
-                            .checkbox {
-                                margin-bottom: 10px;
-                            }
-                            .mt-3 {
-                                margin-top: 1rem;
-                            }
-                            /* Updated button styles */
-                            .wp-action-btn {
-                                margin: 0 4px;
-                                padding: 6px 12px;
-                                font-size: 13px;
-                                font-weight: 500;
-                                transition: all 0.2s ease;
-                                border-width: 1.5px;
-                                line-height: 1.5;
-                                display: inline-flex;
-                                align-items: center;
-                                justify-content: center;
-                                vertical-align: middle;
-                                height: 32px;
-                            }
-                            .wp-action-btn i {
-                                margin-right: 6px;
-                                font-size: 14px;
-                                display: inline-flex;
-                                align-items: center;
-                            }
-                            .wp-action-buttons {
-                                margin-top: 12px;
-                                display: flex;
-                                gap: 8px;
-                                justify-content: center;
-                            }
-                            .wp-action-buttons .wp-action-btn {
-                                min-width: 110px;
-                                flex: 0 1 auto;
-                            }
-                            .btn-outline-primary {
-                                color: #0073aa;
-                                border-color: #0073aa;
-                            }
-                            .btn-outline-primary:hover {
-                                background-color: #0073aa;
-                                color: white;
-                            }
-                            .btn-outline-secondary {
-                                color: #50575e;
-                                border-color: #50575e;
-                            }
-                            .btn-outline-secondary:hover {
-                                background-color: #50575e;
-                                color: white;
-                            }
-                            .btn-outline-danger {
-                                color: #dc3545;
-                                border-color: #dc3545;
-                            }
-                            .btn-outline-danger:hover {
-                                background-color: #dc3545;
-                                color: white;
-                            }
-                            .wp-sites-link {
-                                cursor: pointer;
-                                display: inline-flex;
-                                align-items: center;
-                                gap: 8px;
-                                color: inherit;
-                                text-decoration: none;
-                            }
-                            .wp-sites-link:hover {
-                                color: inherit;
-                                text-decoration: none;
-                            }
-                            .wp-sites-link i.btn-icon {
-                                margin-right: 4px;
-                            }
-                            .wp-sites-count {
-                                text-transform: none;
-                            }
-                            .loading-indicator {
-                                display: inline-flex;
-                                align-items: center;
-                                gap: 8px;
-                                color: #00749C;
-                                font-size: 14px;
-                                padding: 0 8px;
-                            }
-                            .loading-indicator i {
-                                font-size: 14px;
-                                margin-left: 4px;
-                            }
-                        </style>
-
-                        <div id="listFail" class="alert alert-danger">
-                            <p>{% trans "Cannot list websites. Error message:" %} {$ errorMessage $}</p>
-                        </div>
+                    </div>
+                    <div id="listFail" class="alert alert-danger">
+                        <p>{% trans "Cannot list websites. Error message:" %} {$ errorMessage $}</p>
                     </div>
                 </div>
             </div>
@@ -437,4 +287,139 @@
         </div>
     </div>
 
+    <style>
+        .wp-site-item {
+            border: 1px solid #e0e0e0;
+            margin-bottom: 20px;
+            border-radius: 8px;
+            background: white;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+        }
+        .wp-site-header {
+            padding: 15px 20px;
+            border-bottom: 1px solid #e0e0e0;
+            background: #f8f9fa;
+            border-radius: 8px 8px 0 0;
+            cursor:pointer;
+        }
+        .wp-site-header h4 {
+            margin: 0;
+            font-size: 18px;
+            line-height: 34px;
+            color: #2c3338;
+            font-weight: 500;
+        }
+        .wp-site-content {
+            padding: 20px;
+        }
+        .info-box {
+            margin-bottom: 15px;
+            background: #f8f9fa;
+            padding: 10px;
+            border-radius: 6px;
+        }
+        .info-box label {
+            display: block;
+            font-size: 12px;
+            color: #646970;
+            margin-bottom: 5px;
+            font-weight: 500;
+        }
+        .info-box span {
+            font-size: 14px;
+            font-weight: 600;
+            color: #2c3338;
+        }
+        .checkbox {
+            margin-bottom: 10px;
+        }
+        .mt-3 {
+            margin-top: 1rem;
+        }
+        .wp-action-btn {
+            margin: 0 4px;
+            padding: 6px 12px;
+            font-size: 13px;
+            font-weight: 500;
+            transition: all 0.2s ease;
+            border-width: 1.5px;
+            line-height: 1.5;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            vertical-align: middle;
+            height: 32px;
+        }
+        .wp-action-btn i {
+            margin-right: 6px;
+            font-size: 14px;
+            display: inline-flex;
+            align-items: center;
+        }
+        .wp-action-buttons {
+            margin-top: 12px;
+            display: flex;
+            gap: 8px;
+            justify-content: center;
+        }
+        .wp-action-buttons .wp-action-btn {
+            min-width: 110px;
+            flex: 0 1 auto;
+        }
+        .btn-outline-primary {
+            color: #0073aa;
+            border-color: #0073aa;
+        }
+        .btn-outline-primary:hover {
+            background-color: #0073aa;
+            color: white;
+        }
+        .btn-outline-secondary {
+            color: #50575e;
+            border-color: #50575e;
+        }
+        .btn-outline-secondary:hover {
+            background-color: #50575e;
+            color: white;
+        }
+        .btn-outline-danger {
+            color: #dc3545;
+            border-color: #dc3545;
+        }
+        .btn-outline-danger:hover {
+            background-color: #dc3545;
+            color: white;
+        }
+        .wp-sites-link {
+            cursor: pointer;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            color: inherit;
+            text-decoration: none;
+        }
+        .wp-sites-link:hover {
+            color: inherit;
+            text-decoration: none;
+        }
+        .wp-sites-link i.btn-icon {
+            margin-right: 4px;
+        }
+        .wp-sites-count {
+            text-transform: none;
+        }
+        .loading-indicator {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            color: #00749C;
+            font-size: 14px;
+            padding: 0 8px;
+        }
+        .loading-indicator i {
+            font-size: 14px;
+            margin-left: 4px;
+        }
+    </style>
+
 {% endblock %}