diff --git a/apps/accounts/templates/accounts/backup_account_report.html b/apps/accounts/templates/accounts/backup_account_report.html
index 5c9ca543a..95179770b 100644
--- a/apps/accounts/templates/accounts/backup_account_report.html
+++ b/apps/accounts/templates/accounts/backup_account_report.html
@@ -3,52 +3,71 @@
 
 
 <div class="report-container">
-    <header class="header">
-        {% autoescape off %}
-            {{ logo }}
-        {% endautoescape %}
-    </header>
+    <section class="basic-info-section">
+    <div class="header-container">
+      <span
+        class="triangle-down-icon collapse-toggle"
+        data-target="basic-info"
+      ></span>
 
-    <div class="info-section">
-        <h2 class="info">
-            {% trans 'The following is a summary of account backup tasks, please review and handle them' %}
-        </h2>
+      <h2>{% trans 'Basic Information' %}</h2>
     </div>
 
-    <main class="main-section">
-        <div class="synopsis-section">
-            <div class="synopsis-item">
-                <div class="synopsis-item-content">
-                    <p>
-                        <span class="item-label">{% trans 'Task name' %}</span>:
-                        <span>{{ execution.automation.name }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Date start' %}</span>:
-                        <span>{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Date end' %}</span>:
-                        <span>{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Time using' %}</span>:
-                        <span>{{ execution.duration }}s</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Accounts amount' %}</span>:
-                        <span>{{ summary.total_accounts }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Type count' %}</span>:
-                        <span>{{ summary.total_types }}</span>
-                    </p>
-                </div>
-            </div>
-        </div>
-    </main>
+    <div class="container-section collapsible-content" id="basic-info-content">
+      <div class="item">
+        <span class="item-label">{% trans 'Date start' %}</span>
+        <span class="item-value">{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
+      </div>
+
+      <div class="item">
+        <span class="item-label">{% trans 'Date end' %}</span>
+        <span class="item-value">{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
+      </div>
+
+      <div class="item">
+        <span class="item-label">{% trans 'Accounts amount' %}</span>
+        <span class="item-value">{{ summary.total_accounts }}</span>
+      </div>
+
+      <div class="item">
+        <span class="item-label">{% trans 'Task name' %}</span>
+        <span class="item-value">{{ execution.automation.name }}</span>
+      </div>
+
+      <div class="item">
+        <span class="item-label">{% trans 'Time using' %}</span>
+        <span class="item-value">{{ execution.duration }}s</span>
+      </div>
+
+      <div class="item">
+        <span class="item-label">{% trans 'Type count' %}</span>
+        <span class="item-value">{{ summary.total_types }}</span>
+      </div>
+    </div>
+  </section>
 </div>
 
 <style>
     {% include './css/report.css' %}
-</style>
\ No newline at end of file
+</style>
+
+<script>
+    const toggleButtons = document.querySelectorAll('.collapse-toggle')
+  
+    toggleButtons.forEach((button) => {
+      button.addEventListener('click', function () {
+        const targetId = this.getAttribute('data-target')
+        const targetContent = document.getElementById(`${targetId}-content`)
+  
+        if (this.classList.contains('triangle-down-icon')) {
+          this.classList.remove('triangle-down-icon')
+          this.classList.add('triangle-right-icon')
+          targetContent.classList.add('collapsed')
+        } else {
+          this.classList.remove('triangle-right-icon')
+          this.classList.add('triangle-down-icon')
+          targetContent.classList.remove('collapsed')
+        }
+      })
+    })
+  </script>
\ No newline at end of file
diff --git a/apps/accounts/templates/accounts/change_secret_report.html b/apps/accounts/templates/accounts/change_secret_report.html
index 8edd6f3ae..17b74f94b 100644
--- a/apps/accounts/templates/accounts/change_secret_report.html
+++ b/apps/accounts/templates/accounts/change_secret_report.html
@@ -4,124 +4,159 @@
 <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
 
 <div class="report-container">
-    <header class="header">
-        {% autoescape off %}
-            {{ logo }}
-        {% endautoescape %}
-    </header>
+    <section class="basic-info-section">
+        <div class="header-container">
+          <span
+            class="triangle-down-icon collapse-toggle"
+            data-target="basic-info"
+          ></span>
+    
+          <h2>{% trans 'Basic Information' %}</h2>
+        </div>
+    
+        <div class="container-section collapsible-content" id="basic-info-content">
+          <div class="item">
+            <span class="item-label">{% trans 'Date start' %}</span>
+            <span class="item-value">{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
+          </div>
+    
+          <div class="item">
+            <span class="item-label">{% trans 'Date end' %}</span>
+            <span class="item-value">{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
+          </div>
+    
+          <div class="item">
+            <span class="item-label">{% trans 'Assets amount' %}</span>
+            <span class="item-value">{{ summary.total_assets }}</span>
+          </div>
+    
+          <div class="item">
+            <span class="item-label">{% trans 'Asset success count' %}</span>
+            <span class="item-value">{{ summary.ok_assets | default:0 }}</span>
+          </div>
+    
+          <div class="item">
+            <span class="item-label">{% trans 'Asset failed count' %}</span>
+            <span class="item-value">{{ summary.fail_assets | default:0 }}</span>
+          </div>
+    
+          <div class="item">
+            <span class="item-label">{% trans 'Asset not support count' %}</span>
+            <span class="item-value">{{ summary.error_assets | default:0 }}</span>
+          </div>
+    
+          <div class="item">
+            <span class="item-label">{% trans 'Task name' %}</span>
+            <span class="item-value">{{ execution.automation.name }}</span>
+          </div>
+    
+          <div class="item">
+            <span class="item-label">{% trans 'Time using' %}</span>
+            <span class="item-value">{{ execution.duration }}s</span>
+          </div>
+        </div>
+    </section>
 
-    <div class="info-section">
-        <h2 class="info">
-            {% trans 'The following is a summary of account change secret tasks, please read and process' %}
-        </h2>
-    </div>
-
-    <main class="main-section">
-        <div class="synopsis-section">
-            <div class="synopsis-item">
-                <div class="synopsis-item-content">
-                    <p>
-                        <span class="item-label">{% trans 'Task name' %}</span>:
-                        <span>{{ execution.automation.name }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Date start' %}</span>:
-                        <span>{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Date end' %}</span>:
-                        <span>{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Time using' %}</span>:
-                        <span>{{ execution.duration }}s</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Assets amount' %}</span>:
-                        <span>{{ summary.total_assets }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Asset success count' %}</span>:
-                        <span>{{ summary.ok_assets | default:0 }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Asset failed count' %}</span>:
-                        <span>{{ summary.fail_assets | default:0 }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Asset not support count' %}</span>:
-                        <span>{{ summary.error_assets | default:0 }}</span>
-                    </p>
-                </div>
-            </div>
+    <section class="success">
+        <div class="header-container">
+            <span
+              class="triangle-down-icon collapse-toggle"
+              data-target="success"
+            ></span>
+      
+            <h2>
+                {% trans 'Success accounts' %}:
+      
+              <span> {{ summary.ok_accounts | default:0 }} </span>
+            </h2>
         </div>
 
-        <div class="tabel-section tabel-summery-section">
-            <div class="new-accounts result-section table-responsive">
-                <div class="section-header">
-                    <h3>
-                        {% trans 'Success accounts' %}:
-                        <span>{{ summary.ok_accounts | default:0 }}</span>
-                    </h3>
-                </div>
-                {% if summary.ok_accounts %}
-                    <table class="custom-table table-striped table-hover data-table">
-                        <thead>
-                        <tr>
-                            <th>{% trans 'No' %}</th>
-                            <th>{% trans 'Asset' %}</th>
-                            <th>{% trans 'Username' %}</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        {% for account in result.ok_accounts %}
-                            <tr>
-                                <td>{{ forloop.counter }}</td>
-                                <td>{{ account.asset }}</td>
-                                <td>{{ account.username }}</td>
-                            </tr>
-                        {% endfor %}
-                        </tbody>
-                    </table>
-                {% else %}
-                    <p class="no-data">{% trans 'No new accounts found' %}</p>
-                {% endif %}
-            </div>
-
-            <div class="lost-accounts result-section table-responsive">
-                <div class="section-header">
-                    <h3>
-                        {% trans 'Failed accounts' %}:
-                        <span>{{ summary.fail_accounts | default:0 }}</span>
-                    </h3>
-                </div>
-
-                {% if summary.fail_accounts %}
-                    <table class="custom-table table-hover data-table">
-                        <thead>
-                        <tr>
-                            <th>{% trans 'No' %}</th>
-                            <th>{% trans 'Asset' %}</th>
-                            <th>{% trans 'Username' %}</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        {% for account in result.fail_accounts %}
-                            <tr>
-                                <td>{{ forloop.counter }}</td>
-                                <td>{{ account.asset }}</td>
-                                <td>{{ account.username }}</td>
-                            </tr>
-                        {% endfor %}
-                        </tbody>
-                    </table>
-                {% else %}
-                    <p class="no-data">{% trans 'No new accounts found' %}</p>
-                {% endif %}
-            </div>
+        <div class="container-section collapsible-content" id="success-content">
+            {% if summary.ok_accounts %}
+            <table class="custom-table table-striped table-hover data-table">
+                <thead>
+                <tr>
+                    <th>{% trans 'No' %}</th>
+                    <th>{% trans 'Asset' %}</th>
+                    <th>{% trans 'Username' %}</th>
+                </tr>
+                </thead>
+                <tbody>
+                {% for account in result.ok_accounts %}
+                    <tr>
+                        <td>{{ forloop.counter }}</td>
+                        <td>{{ account.asset }}</td>
+                        <td>{{ account.username }}</td>
+                    </tr>
+                {% endfor %}
+                </tbody>
+            </table>
+            {% else %}
+                <p class="no-data">{% trans 'No new accounts found' %}</p>
+            {% endif %}
         </div>
-    </main>
+    </section>
+
+    <section class="failed">
+        <div class="header-container">
+            <span
+              class="triangle-down-icon collapse-toggle"
+              data-target="failed"
+            ></span>
+      
+            <h2>
+                {% trans 'Failed accounts' %}:
+      
+              <span> {{ summary.fail_accounts | default:0 }} </span>
+            </h2>
+        </div>
+
+        <div class="container-section collapsible-content" id="failed-content">
+            {% if summary.fail_accounts %}
+            <table class="custom-table table-hover data-table">
+                <thead>
+                <tr>
+                    <th>{% trans 'No' %}</th>
+                    <th>{% trans 'Asset' %}</th>
+                    <th>{% trans 'Username' %}</th>
+                </tr>
+                </thead>
+                <tbody>
+                {% for account in result.fail_accounts %}
+                    <tr>
+                        <td>{{ forloop.counter }}</td>
+                        <td>{{ account.asset }}</td>
+                        <td>{{ account.username }}</td>
+                    </tr>
+                {% endfor %}
+                </tbody>
+            </table>
+            {% else %}
+                <p class="no-data">{% trans 'No new accounts found' %}</p>
+            {% endif %}
+        </div>
+    </section>
 </div>
 <style>
     {% include './css/report.css' %}
-</style>
\ No newline at end of file
+</style>
+<script>
+  const toggleButtons = document.querySelectorAll('.collapse-toggle')
+
+  toggleButtons.forEach((button) => {
+    button.addEventListener('click', function () {
+      const targetId = this.getAttribute('data-target')
+      const targetContent = document.getElementById(`${targetId}-content`)
+
+      if (this.classList.contains('triangle-down-icon')) {
+        this.classList.remove('triangle-down-icon')
+        this.classList.add('triangle-right-icon')
+        targetContent.classList.add('collapsed')
+      } else {
+        this.classList.remove('triangle-right-icon')
+        this.classList.add('triangle-down-icon')
+        targetContent.classList.remove('collapsed')
+      }
+    })
+  })
+</script>
\ No newline at end of file
diff --git a/apps/accounts/templates/accounts/check_account_report.html b/apps/accounts/templates/accounts/check_account_report.html
index b0dab6944..af00a8ed5 100644
--- a/apps/accounts/templates/accounts/check_account_report.html
+++ b/apps/accounts/templates/accounts/check_account_report.html
@@ -3,103 +3,132 @@
 
 
 <div class="report-container">
-    <header class="header">
-        {% autoescape off %}
-            {{ logo }}
-        {% endautoescape %}
-    </header>
+    <section class="basic-info-section">
+        <div class="header-container">
+        <span
+            class="triangle-down-icon collapse-toggle"
+            data-target="basic-info"
+        ></span>
 
-    <div class="info-section">
-        <h2 class="info">
-            {% trans 'The following is a summary of the account check tasks. Please review and handle them' %}
-        </h2>
-    </div>
-
-    <main class="main-section">
-        <div class="synopsis-section">
-            <div class="synopsis-item">
-                <div class="synopsis-item-content">
-                    <p>
-                        <span class="item-label">{% trans 'Task name' %}</span>:
-                        <span>{{ execution.automation.name }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Date start' %}</span>:
-                        <span>{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Date end' %}</span>:
-                        <span>{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Time using' %}</span>:
-                        <span>{{ execution.duration }}s</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Accounts amount' %}</span>:
-                        <span>{{ summary.accounts }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Ok count' %}</span>:
-                        <span>{{ summary.ok }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'No password count' %}</span>:
-                        <span>{{ summary.no_secret }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Asset success count' %}</span>:
-                        <span>{{ summary.ok_assets | default:0 }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Asset failed count' %}</span>:
-                        <span>{{ summary.fail_assets | default:0 }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Asset not support count' %}</span>:
-                        <span>{{ summary.error_assets | default:0 }}</span>
-                    </p>
-                </div>
-            </div>
+        <h2>{% trans 'Basic Information' %}</h2>
         </div>
 
-        <div class="tabel-section tabel-summery-section">
-            <div class="new-accounts result-section table-responsive">
-                <div class="section-header">
-                    <h3>
-                        {% trans 'Weak password' %}:
-                        <span>{{ summary.weak_password | default:0 }}</span>
-                    </h3>
-                </div>
-                {% if summary.ok_accounts %}
-                    <table class="custom-table table-striped table-hover data-table">
-                        <thead>
+        <div class="container-section collapsible-content" id="basic-info-content">
+            <div class="item">
+                <span class="item-label">{% trans 'Date start' %}</span>
+                <span class="item-value">{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
+            </div>
+
+            <div class="item">
+                <span class="item-label">{% trans 'Date end' %}</span>
+                <span class="item-value">{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
+            </div>
+
+            <div class="item">
+                <span class="item-label">{% trans 'Accounts amount' %}</span>
+                <span class="item-value">{{ summary.accounts }}</span>
+            </div>
+
+            <div class="item">
+                <span class="item-label">{% trans 'Asset success count' %}</span>
+                <span class="item-value">{{ summary.ok_assets | default:0 }}</span>
+            </div>
+
+            <div class="item">
+                <span class="item-label">{% trans 'Asset failed count' %}</span>
+                <span class="item-value">{{ summary.fail_assets | default:0 }}</span>
+            </div>
+
+            <div class="item">
+                <span class="item-label">{% trans 'Asset not support count' %}</span>
+                <span class="item-value">{{ summary.error_assets | default:0 }}</span>
+            </div>
+
+            <div class="item">
+                <span class="item-label">{% trans 'Task name' %}</span>
+                <span class="item-value">{{ execution.automation.name }}</span>
+            </div>
+
+            <div class="item">
+                <span class="item-label">{% trans 'Time using' %}</span>
+                <span class="item-value">{{ execution.duration }}s</span>
+            </div>
+
+            <div class="item">
+                <span class="item-label">{% trans 'Ok count' %}</span>
+                <span class="item-value">{{ summary.ok }}</span>
+            </div>
+
+            <div class="item">
+                <span class="item-label">{% trans 'No password count' %}</span>
+                <span class="item-value">{{ summary.no_secret }}</span>
+            </div>
+        </div>
+    </section>
+
+    <section class="success">
+        <div class="header-container">
+            <span
+                class="triangle-down-icon collapse-toggle"
+                data-target="success"
+            ></span>
+
+            <h2>
+               {% trans 'Weak password' %}:
+
+                <span> {{ summary.weak_password | default:0 }} </span>
+            </h2>
+        </div>
+
+        <div class="container-section collapsible-content" id="success-content">
+            {% if summary.ok_accounts %}
+                <table class="custom-table table-striped table-hover data-table">
+                    <thead>
+                    <tr>
+                        <th>{% trans 'No' %}</th>
+                        <th>{% trans 'Asset' %}</th>
+                        <th>{% trans 'Username' %}</th>
+                        <th>{% trans 'Result' %}</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {% for account in result.weak_password %}
                         <tr>
-                            <th>{% trans 'No' %}</th>
-                            <th>{% trans 'Asset' %}</th>
-                            <th>{% trans 'Username' %}</th>
-                            <th>{% trans 'Result' %}</th>
+                            <td>{{ forloop.counter }}</td>
+                            <td>{{ account.asset }}</td>
+                            <td>{{ account.username }}</td>
+                            <td style="color: red">{% trans 'Weak password' %}</td>
                         </tr>
-                        </thead>
-                        <tbody>
-                        {% for account in result.weak_password %}
-                            <tr>
-                                <td>{{ forloop.counter }}</td>
-                                <td>{{ account.asset }}</td>
-                                <td>{{ account.username }}</td>
-                                <td style="color: red">{% trans 'Weak password' %}</td>
-                            </tr>
-                        {% endfor %}
-                        </tbody>
-                    </table>
-                {% else %}
-                    <p class="no-data">{% trans 'No weak password' %}</p>
-                {% endif %}
-            </div>
+                    {% endfor %}
+                    </tbody>
+                </table>
+            {% else %}
+                <p class="no-data">{% trans 'No weak password' %}</p>
+            {% endif %}
         </div>
-    </main>
+    </section>
 </div>
 
 <style>
     {% include './css/report.css' %}
-</style>
\ No newline at end of file
+</style>
+<script>
+  const toggleButtons = document.querySelectorAll('.collapse-toggle')
+
+  toggleButtons.forEach((button) => {
+    button.addEventListener('click', function () {
+      const targetId = this.getAttribute('data-target')
+      const targetContent = document.getElementById(`${targetId}-content`)
+
+      if (this.classList.contains('triangle-down-icon')) {
+        this.classList.remove('triangle-down-icon')
+        this.classList.add('triangle-right-icon')
+        targetContent.classList.add('collapsed')
+      } else {
+        this.classList.remove('triangle-right-icon')
+        this.classList.add('triangle-down-icon')
+        targetContent.classList.remove('collapsed')
+      }
+    })
+  })
+</script>
\ No newline at end of file
diff --git a/apps/accounts/templates/accounts/css/report.css b/apps/accounts/templates/accounts/css/report.css
index 5443116db..b78ff2dda 100644
--- a/apps/accounts/templates/accounts/css/report.css
+++ b/apps/accounts/templates/accounts/css/report.css
@@ -11,138 +11,115 @@ p {
 .report-container {
     display: flex;
     flex-direction: column;
+    row-gap: 16px;
 }
 
-.report-container .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 4rem;
-    padding: 0.3rem 1rem;
-    background-color: #148f76;
-}
-
-.report-container .header svg {
-    height: 100%
-}
-
-.info-section {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: #f5f5f5;
-    height: 4rem;
-    padding: 0 1rem;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.info-section .info {
-    margin: unset;
-    font-size: 1.6rem;
-}
-
-.main-section {
-    margin-top: 3rem;
-    padding: 0 1rem;
-}
-
-.main-section .synopsis-section {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    gap: 2rem;
-}
-
-.main-section .synopsis-section .synopsis-item {
+.basic-info-section,
+.success,
+.failed {
     display: flex;
     flex-direction: column;
-    flex: 1;
-    padding: 1rem 2rem;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
-    height: 350px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.main-section .synopsis-section .synopsis-item h3 {
-    font-weight: 500;
-    font-size: 1.5rem;
-}
-
-.main-section .synopsis-section .synopsis-item .synopsis-item-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: flex-start;
     height: 100%;
-    cursor: pointer;
+    padding: 16px 20px;
+    margin: 0 20px;
+    border: 1px solid #dee0e3;
+    border-radius: 6px;
+    background-color: #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+    transition: all 0.2s ease;
 }
 
-.main-section .synopsis-section .synopsis-item .synopsis-item-content p {
-    display: inline-flex;
-    width: 100%;
-    line-height: 1;
-    gap: 2rem;
-    font-size: 14px;
-}
-
-.main-section .synopsis-section .synopsis-item .synopsis-item-content p .item-label {
-    width: 18rem;
-}
-
-.main-section .synopsis-section .synopsis-item .synopsis-item-content span {
+.header-container {
+    display: flex;
+    justify-content: flex-start;
     align-items: center;
-    justify-content: center;
+    height: 32px;
+    margin-bottom: 12px;
+    border-bottom: 1px solid #f0f0f0;
+    padding-bottom: 8px;
+}
+
+.header-container h2 {
+    color: #1f2329;
+    font: 500 16px/24px 'PingFang SC';
+    margin: 0;
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+.header-container h2 span {
+    display: inline-flex;
+    margin-left: 8px;
     font-weight: normal;
 }
 
-.main-section .tabel-summery-section {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    align-items: flex-start;
-    gap: 2rem;
-    width: inherit;
-    margin-top: 2rem;
+.triangle-right-icon {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-left: 8px solid #1f2329;
+    margin-right: 10px;
+    cursor: pointer;
 }
 
-.main-section .tabel-summery-section .result-section {
+.triangle-down-icon {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 8px solid #1f2329;
+    margin-right: 10px;
+    cursor: pointer;
+}
+
+.container-section {
+    display: flex;
+    flex-wrap: wrap;
     width: 100%;
-    padding: 1rem;
-    background: #fff;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
+    height: 100%;
+    row-gap: 16px;
+    column-gap: 10px;
 }
 
-.main-section .tabel-execution-section h3 {
-    font-size: 1.5rem;
-    color: #2c3e50;
+.collapsible-content {
+    overflow: hidden;
+    max-height: 1000px;
+    opacity: 1;
+    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
 }
 
-.section-header {
-    padding-bottom: 0.5rem;
-    margin-bottom: 1rem;
-    font-size: 1.5rem;
-}
-
-.section-header h3 {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
+.collapsible-content.collapsed {
+    max-height: 0;
+    opacity: 0;
     margin: 0;
-    color: #2c3e50;
-    font-size: inherit;
+    padding: 0;
 }
 
-.section-header span {
-    background: #e8f5e9;
-    color: #2e7d32;
-    padding: 0.2rem 0.8rem;
-    border-radius: 1rem;
-    font-size: inherit;
+.container-section .item {
+    display: flex;
+    flex-basis: calc(33.33% - 10px);
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 4px;
+    padding: 4px 0;
 }
 
+.container-section .item .item-label {
+    color: #646a73;
+    font: 400 14px/22px 'PingFang SC';
+}
+
+.container-section .item .item-value {
+    color: #1f2329;
+    font: 500 14px/22px 'PingFang SC';
+}
+
+
 .custom-table {
     margin-bottom: 0;
     width: 100%;
@@ -151,17 +128,19 @@ p {
 }
 
 .custom-table th {
-    background: #f6f6f6;
-    color: #495057;
-    padding: 0.75rem;
-    font-size: 1.5rem;
-    border-bottom: 2px solid #e0e0e0;
+    background-color: #f5f7fa;
+    color: #646A73;
+    font: 500 14px/22px 'PingFang SC';
+    text-align: left;
+    padding: 12px 8px;
+    border-bottom: 1px solid #ebeef5;
 }
 
 .custom-table td {
-    padding: 0.75rem;
-    font-size: 14px;
-    border-bottom: 1px solid #e0e0e0;
+    color: #1F2329;
+    font: 400 14px/22px 'PingFang SC';
+    padding: 12px 8px;
+    border-bottom: 1px solid #ebeef5;
 }
 
 .custom-table tr:nth-child(even) {
@@ -173,13 +152,15 @@ p {
 }
 
 .no-data {
+    color: #909399;
+    font: 400 14px/22px 'PingFang SC';
     text-align: center;
-    color: #6c757d;
-    padding: 2rem;
-    background: #f6f6f6;
-    border-radius: 8px;
-    margin: 1rem 0;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    font-style: italic;
+    background-color: #f9f9f9;
+    border-radius: 4px;
+    margin: 10px 0;
+    width: 100%;
 }
 
 .new-accounts .section-header span {
diff --git a/apps/accounts/templates/accounts/gather_account_report.html b/apps/accounts/templates/accounts/gather_account_report.html
index 3ca68c96d..a19d10086 100644
--- a/apps/accounts/templates/accounts/gather_account_report.html
+++ b/apps/accounts/templates/accounts/gather_account_report.html
@@ -1,127 +1,161 @@
-{% load i18n %}
-{% load static %}
-
+{% load i18n %} {% load static %}
 
 <div class="report-container">
-    <header class="header">
-        {% autoescape off %}
-            {{ logo }}
-        {% endautoescape %}
-    </header>
+  <section class="basic-info-section">
+    <div class="header-container">
+      <span
+        class="triangle-down-icon collapse-toggle"
+        data-target="basic-info"
+      ></span>
 
-    <div class="info-section">
-        <h2 class="info">
-            {% trans 'The following is a summary of the account check tasks. Please review and handle them' %}
-        </h2>
+      <h2>{% trans 'Basic Information' %}</h2>
     </div>
 
-    <main class="main-section">
-        <div class="synopsis-section">
-            <div class="synopsis-item">
-                <div class="synopsis-item-content">
-                    <p>
-                        <span class="item-label">{% trans 'Task name' %}</span>:
-                        <span>{{ execution.automation.name }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Date start' %}</span>:
-                        <span>{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Date end' %}</span>:
-                        <span>{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Time using' %}</span>:
-                        <span>{{ execution.duration }}s</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Assets amount' %}</span>:
-                        <span>{{ summary.total_assets }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Asset success count' %}</span>:
-                        <span>{{ summary.ok_assets | default:0 }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Asset failed count' %}</span>:
-                        <span>{{ summary.fail_assets | default:0 }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Asset not support count' %}</span>:
-                        <span>{{ summary.error_assets | default:0 }}</span>
-                    </p>
-                </div>
-            </div>
-        </div>
+    <div class="container-section collapsible-content" id="basic-info-content">
+      <div class="item">
+        <span class="item-label">{% trans 'Date start' %}</span>
+        <span class="item-value">{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
+      </div>
 
-        <div class="tabel-section tabel-summery-section">
-            <div class="new-accounts result-section table-responsive">
-                <div class="section-header">
-                    <h3>
-                        {% trans 'New found accounts' %}:
-                        <span>{{ summary.new_accounts | default:0 }}</span>
-                    </h3>
-                </div>
-                {% if summary.new_accounts %}
-                    <table class="custom-table table-striped table-hover data-table">
-                        <thead>
-                        <tr>
-                            <th>{% trans 'No' %}</th>
-                            <th>{% trans 'Asset' %}</th>
-                            <th>{% trans 'Username' %}</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        {% for account in result.new_accounts %}
-                            <tr>
-                                <td>{{ forloop.counter }}</td>
-                                <td>{{ account.asset }}</td>
-                                <td>{{ account.username }}</td>
-                            </tr>
-                        {% endfor %}
-                        </tbody>
-                    </table>
-                {% else %}
-                    <p class="no-data">{% trans 'No new accounts found' %}</p>
-                {% endif %}
-            </div>
+      <div class="item">
+        <span class="item-label">{% trans 'Date end' %}</span>
+        <span class="item-value">{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
+      </div>
 
-            <div class="lost-accounts result-section table-responsive">
-                <div class="section-header">
-                    <h3>
-                        {% trans 'Lost accounts' %}:
-                        <span>{{ summary.lost_accounts | default:0 }}</span>
-                    </h3>
-                </div>
+      <div class="item">
+        <span class="item-label">{% trans 'Assets amount' %}</span>
+        <span class="item-value">{{ summary.total_assets }}</span>
+      </div>
 
-                {% if summary.lost_accounts %}
-                    <table class="custom-table table-hover data-table">
-                        <thead>
-                        <tr>
-                            <th>{% trans 'No' %}</th>
-                            <th>{% trans 'Asset' %}</th>
-                            <th>{% trans 'Username' %}</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        {% for account in result.lost_accounts %}
-                            <tr>
-                                <td>{{ forloop.counter }}</td>
-                                <td>{{ account.asset }}</td>
-                                <td>{{ account.username }}</td>
-                            </tr>
-                        {% endfor %}
-                        </tbody>
-                    </table>
-                {% else %}
-                    <p class="no-data">{% trans 'No new accounts found' %}</p>
-                {% endif %}
-            </div>
-        </div>
-    </main>
+      <div class="item">
+        <span class="item-label">{% trans 'Asset success count' %}</span>
+        <span class="item-value">{{ summary.ok_assets | default:0 }}</span>
+      </div>
+
+      <div class="item">
+        <span class="item-label">{% trans 'Asset failed count' %}</span>
+        <span class="item-value">{{ summary.fail_assets | default:0 }}</span>
+      </div>
+
+      <div class="item">
+        <span class="item-label">{% trans 'Asset not support count' %}</span>
+        <span class="item-value">{{ summary.error_assets | default:0 }}</span>
+      </div>
+
+      <div class="item">
+        <span class="item-label">{% trans 'Task name' %}</span>
+        <span class="item-value">{{ execution.automation.name }}</span>
+      </div>
+
+      <div class="item">
+        <span class="item-label">{% trans 'Time using' %}</span>
+        <span class="item-value">{{ execution.duration }}s</span>
+      </div>
+    </div>
+  </section>
+
+  <section class="success">
+    <div class="header-container">
+      <span
+        class="triangle-down-icon collapse-toggle"
+        data-target="success"
+      ></span>
+
+      <h2>
+        {% trans 'New found accounts' %}:
+
+        <span> {{ summary.new_accounts | default:0 }} </span>
+      </h2>
+    </div>
+
+    <div class="container-section collapsible-content" id="success-content">
+      {% if summary.new_accounts %}
+      <table class="custom-table table-striped table-hover data-table">
+        <thead>
+          <tr>
+            <th width="10%">No.</th>
+            <th width="45%">{% trans 'Asset' %}</th>
+            <th width="45%">{% trans 'Username' %}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for account in result.new_accounts %}
+          <tr>
+            <td>{{ forloop.counter }}</td>
+            <td>{{ account.asset }}</td>
+            <td>{{ account.username }}</td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+      {% else %}
+      <p class="no-data">{% trans 'No new accounts found' %}</p>
+      {% endif %}
+    </div>
+  </section>
+
+  <section class="failed">
+    <div class="header-container">
+      <span
+        class="triangle-down-icon collapse-toggle"
+        data-target="failed"
+      ></span>
+
+      <h2>
+        {% trans 'Lost accounts' %}:
+
+        <span> {{ summary.lost_accounts | default:0 }} </span>
+      </h2>
+    </div>
+
+    <div class="container-section collapsible-content" id="failed-content">
+      {% if summary.lost_accounts %}
+      <table class="custom-table table-hover data-table">
+        <thead>
+          <tr>
+            <th width="10%">No.</th>
+            <th width="45%">{% trans 'Asset' %}</th>
+            <th width="45%">{% trans 'Username' %}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for account in result.lost_accounts %}
+          <tr>
+            <td>{{ forloop.counter }}</td>
+            <td>{{ account.asset }}</td>
+            <td>{{ account.username }}</td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+      {% else %}
+      <p class="no-data">{% trans 'No new accounts found' %}</p>
+      {% endif %}
+    </div>
+  </section>
 </div>
 
 <style>
-    {% include './css/report.css' %}
+  {% include './css/report.css' %}
 </style>
+
+<script>
+  const toggleButtons = document.querySelectorAll('.collapse-toggle')
+
+  toggleButtons.forEach((button) => {
+    button.addEventListener('click', function () {
+      const targetId = this.getAttribute('data-target')
+      const targetContent = document.getElementById(`${targetId}-content`)
+
+      if (this.classList.contains('triangle-down-icon')) {
+        this.classList.remove('triangle-down-icon')
+        this.classList.add('triangle-right-icon')
+        targetContent.classList.add('collapsed')
+      } else {
+        this.classList.remove('triangle-right-icon')
+        this.classList.add('triangle-down-icon')
+        targetContent.classList.remove('collapsed')
+      }
+    })
+  })
+</script>
diff --git a/apps/accounts/templates/accounts/push_account_report.html b/apps/accounts/templates/accounts/push_account_report.html
index 6f723b950..e8138856f 100644
--- a/apps/accounts/templates/accounts/push_account_report.html
+++ b/apps/accounts/templates/accounts/push_account_report.html
@@ -4,125 +4,161 @@
 <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
 
 <div class="report-container">
-    <header class="header">
-        {% autoescape off %}
-            {{ logo }}
-        {% endautoescape %}
-    </header>
+    <section class="basic-info-section">
+        <div class="header-container">
+          <span
+            class="triangle-down-icon collapse-toggle"
+            data-target="basic-info"
+          ></span>
+    
+          <h2>{% trans 'Basic Information' %}</h2>
+        </div>
+    
+        <div class="container-section collapsible-content" id="basic-info-content">
+          <div class="item">
+            <span class="item-label">{% trans 'Date start' %}</span>
+            <span class="item-value">{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
+          </div>
+    
+          <div class="item">
+            <span class="item-label">{% trans 'Date end' %}</span>
+            <span class="item-value">{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
+          </div>
+    
+          <div class="item">
+            <span class="item-label">{% trans 'Assets amount' %}</span>
+            <span class="item-value">{{ summary.total_assets }}</span>
+          </div>
+    
+          <div class="item">
+            <span class="item-label">{% trans 'Asset success count' %}</span>
+            <span class="item-value">{{ summary.ok_assets | default:0 }}</span>
+          </div>
+    
+          <div class="item">
+            <span class="item-label">{% trans 'Asset failed count' %}</span>
+            <span class="item-value">{{ summary.fail_assets | default:0 }}</span>
+          </div>
+    
+          <div class="item">
+            <span class="item-label">{% trans 'Asset not support count' %}</span>
+            <span class="item-value">{{ summary.error_assets | default:0 }}</span>
+          </div>
+    
+          <div class="item">
+            <span class="item-label">{% trans 'Task name' %}</span>
+            <span class="item-value">{{ execution.automation.name }}</span>
+          </div>
+    
+          <div class="item">
+            <span class="item-label">{% trans 'Time using' %}</span>
+            <span class="item-value">{{ execution.duration }}s</span>
+          </div>
+        </div>
+    </section>
 
-    <div class="info-section">
-        <h2 class="info">
-            {% trans 'The following is a summary of account push tasks, please read and process' %}
-        </h2>
-    </div>
-
-    <main class="main-section">
-        <div class="synopsis-section">
-            <div class="synopsis-item">
-                <div class="synopsis-item-content">
-                    <p>
-                        <span class="item-label">{% trans 'Task name' %}</span>:
-                        <span>{{ execution.automation.name }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Date start' %}</span>:
-                        <span>{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Date end' %}</span>:
-                        <span>{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Time using' %}</span>:
-                        <span>{{ execution.duration }}s</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Assets amount' %}</span>:
-                        <span>{{ summary.total_assets }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Asset success count' %}</span>:
-                        <span>{{ summary.ok_assets | default:0 }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Asset failed count' %}</span>:
-                        <span>{{ summary.fail_assets | default:0 }}</span>
-                    </p>
-                    <p>
-                        <span class="item-label">{% trans 'Asset not support count' %}</span>:
-                        <span>{{ summary.error_assets | default:0 }}</span>
-                    </p>
-                </div>
-            </div>
+    <section class="success">
+        <div class="header-container">
+            <span
+              class="triangle-down-icon collapse-toggle"
+              data-target="success"
+            ></span>
+      
+            <h2>
+                {% trans 'Success accounts' %}:
+      
+              <span> {{ summary.ok_accounts | default:0 }} </span>
+            </h2>
         </div>
 
-        <div class="tabel-section tabel-summery-section">
-            <div class="new-accounts result-section table-responsive">
-                <div class="section-header">
-                    <h3>
-                        {% trans 'Success accounts' %}:
-                        <span>{{ summary.ok_accounts | default:0 }}</span>
-                    </h3>
-                </div>
-                {% if summary.ok_accounts %}
-                    <table class="custom-table table-striped table-hover data-table">
-                        <thead>
-                        <tr>
-                            <th>{% trans 'No' %}</th>
-                            <th>{% trans 'Asset' %}</th>
-                            <th>{% trans 'Username' %}</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        {% for account in result.ok_accounts %}
-                            <tr>
-                                <td>{{ forloop.counter }}</td>
-                                <td>{{ account.asset }}</td>
-                                <td>{{ account.username }}</td>
-                            </tr>
-                        {% endfor %}
-                        </tbody>
-                    </table>
-                {% else %}
-                    <p class="no-data">{% trans 'No new accounts found' %}</p>
-                {% endif %}
-            </div>
-
-            <div class="lost-accounts result-section table-responsive">
-                <div class="section-header">
-                    <h3>
-                        {% trans 'Failed accounts' %}:
-                        <span>{{ summary.fail_accounts | default:0 }}</span>
-                    </h3>
-                </div>
-
-                {% if summary.fail_accounts %}
-                    <table class="custom-table table-hover data-table">
-                        <thead>
-                        <tr>
-                            <th>{% trans 'No' %}</th>
-                            <th>{% trans 'Asset' %}</th>
-                            <th>{% trans 'Username' %}</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        {% for account in result.fail_accounts %}
-                            <tr>
-                                <td>{{ forloop.counter }}</td>
-                                <td>{{ account.asset }}</td>
-                                <td>{{ account.username }}</td>
-                            </tr>
-                        {% endfor %}
-                        </tbody>
-                    </table>
-                {% else %}
-                    <p class="no-data">{% trans 'No new accounts found' %}</p>
-                {% endif %}
-            </div>
+        <div class="container-section collapsible-content" id="success-content">
+            {% if summary.ok_accounts %}
+            <table class="custom-table table-striped table-hover data-table">
+                <thead>
+                <tr>
+                    <th>{% trans 'No' %}</th>
+                    <th>{% trans 'Asset' %}</th>
+                    <th>{% trans 'Username' %}</th>
+                </tr>
+                </thead>
+                <tbody>
+                {% for account in result.ok_accounts %}
+                    <tr>
+                        <td>{{ forloop.counter }}</td>
+                        <td>{{ account.asset }}</td>
+                        <td>{{ account.username }}</td>
+                    </tr>
+                {% endfor %}
+                </tbody>
+            </table>
+            {% else %}
+                <p class="no-data">{% trans 'No new accounts found' %}</p>
+            {% endif %}
         </div>
-    </main>
+    </section>
+
+    <section class="failed">
+        <div class="header-container">
+            <span
+              class="triangle-down-icon collapse-toggle"
+              data-target="failed"
+            ></span>
+
+            <h2>
+                {% trans 'Failed accounts' %}:
+      
+              <span> {{ summary.fail_accounts | default:0 }} </span>
+            </h2>
+        </div>
+
+        <div class="container-section collapsible-content" id="failed-content">
+            {% if summary.fail_accounts %}
+            <table class="custom-table table-hover data-table">
+                <thead>
+                <tr>
+                    <th>{% trans 'No' %}</th>
+                    <th>{% trans 'Asset' %}</th>
+                    <th>{% trans 'Username' %}</th>
+                </tr>
+                </thead>
+                <tbody>
+                {% for account in result.fail_accounts %}
+                    <tr>
+                        <td>{{ forloop.counter }}</td>
+                        <td>{{ account.asset }}</td>
+                        <td>{{ account.username }}</td>
+                    </tr>
+                {% endfor %}
+                </tbody>
+            </table>
+            {% else %}
+                <p class="no-data">{% trans 'No new accounts found' %}</p>
+            {% endif %}
+        </div>
+    </section>
 </div>
 
 <style>
     {% include './css/report.css' %}
 </style>
+
+<script>
+    const toggleButtons = document.querySelectorAll('.collapse-toggle')
+  
+    toggleButtons.forEach((button) => {
+      button.addEventListener('click', function () {
+        const targetId = this.getAttribute('data-target')
+        const targetContent = document.getElementById(`${targetId}-content`)
+  
+        if (this.classList.contains('triangle-down-icon')) {
+          this.classList.remove('triangle-down-icon')
+          this.classList.add('triangle-right-icon')
+          targetContent.classList.add('collapsed')
+        } else {
+          this.classList.remove('triangle-right-icon')
+          this.classList.add('triangle-down-icon')
+          targetContent.classList.remove('collapsed')
+        }
+      })
+    })
+  </script>
\ No newline at end of file