diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 7c4234d..0f354cd 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -1114,8 +1114,9 @@ function summarizeProfileDefenses(defenses: ProfileDefense[]): Summary {
               </p>
             </form>
             <div className="subsection">
-              <h3>Existing Categories</h3>
-              <ul className="list compact">
+              <details>
+                <summary><h3>Existing Categories</h3></summary>
+                <ul className="list compact">
                 {categories.length ? (
                   categories.map((category) => (
                     <li key={category.id} className="list-item">
@@ -1198,8 +1199,9 @@ function summarizeProfileDefenses(defenses: ProfileDefense[]): Summary {
               </p>
             </form>
             <div className="subsection">
-              <h3>Manage Bases</h3>
-              <ul className="list compact">
+              <details>
+                <summary><h3>Manage Bases</h3></summary>
+                <ul className="list compact">
                 {bases.length ? (
                   bases.map((base) => (
                     <li key={base.id} className="list-item">
@@ -1391,8 +1393,9 @@ function summarizeProfileDefenses(defenses: ProfileDefense[]): Summary {
               </p>
             </form>
             <div className="subsection">
-              <h3>Manage Attacks</h3>
-              <ul className="list compact">
+              <details>
+                <summary><h3>Manage Attacks</h3></summary>
+                <ul className="list compact">
                 {defenses.length ? (
                   defenses.slice(0, 10).map((defense) => {
                     const categoryName =
@@ -1704,8 +1707,9 @@ function summarizeProfileDefenses(defenses: ProfileDefense[]): Summary {
             </div>
           </div>
           <div className="card">
-            <h3>Army Categories vs This Base</h3>
-            <ul id="base-detail-categories" className="list">
+            <details open>
+              <summary><h3>Army Categories vs This Base</h3></summary>
+              <ul id="base-detail-categories" className="list">
               {baseDetail && baseDetail.categories.length ? (
                 baseDetail.categories.map((category) => (
                   <li
@@ -1769,8 +1773,9 @@ function summarizeProfileDefenses(defenses: ProfileDefense[]): Summary {
             </details>
           </div>
           <div className="card">
-            <h3>Defenses</h3>
-            <ul id="base-detail-defenses" className="list">
+            <details open>
+              <summary><h3>Defenses</h3></summary>
+              <ul id="base-detail-defenses" className="list">
               {defenses.filter((defense) => defense.baseId === selectedBaseId).length ? (
                 defenses
                   .filter((defense) => defense.baseId === selectedBaseId)
@@ -1892,7 +1897,7 @@ function summarizeProfileDefenses(defenses: ProfileDefense[]): Summary {
                           <div className="defense-header">
                             <span>{new Date(reset.date).toLocaleDateString()}</span>
                             <div className="defense-meta">
-                              <span>{reset.trophiesAtStart} trophies at start</span>
+                              <span>{reset.trophiesAtStart} trophies </span>
                               <span>{formatTrophies(reset.trophiesLost)} lost</span>
                               <span>{reset.numberOfDefenses} defenses</span>
                             </div>
@@ -1906,26 +1911,28 @@ function summarizeProfileDefenses(defenses: ProfileDefense[]): Summary {
                 </details>
               </div>
               <div className="card">
-                <h3>Defenses</h3>
-                <ul className="list">
-                  {profileSelectedBase.defenses.length ? (
-                    profileSelectedBase.defenses.map((defense) => (
-                      <li key={defense.id} className="list-item">
-                        <div className="defense-header">
-                          <strong>{defense.armyCategoryName || '(No category)'}</strong>
-                          <div>
-                            <strong>{defense.stars}★</strong> • {defense.percent}% • {formatTrophies(defense.trophies)}
+                <details>
+                  <summary><h3>Defenses</h3></summary>
+                  <ul className="list">
+                    {profileSelectedBase.defenses.length ? (
+                      profileSelectedBase.defenses.map((defense) => (
+                        <li key={defense.id} className="list-item">
+                          <div className="defense-header">
+                            <strong>{defense.armyCategoryName || '(No category)'}</strong>
+                            <div>
+                              <strong>{defense.stars}★</strong> • {defense.percent}% • {formatTrophies(defense.trophies)}
+                            </div>
                           </div>
-                        </div>
-                        <div className="defense-meta">
-                          <span>{new Date(defense.createdAt).toLocaleString()}</span>
-                        </div>
-                      </li>
-                    ))
-                  ) : (
-                    <li>No defenses recorded yet.</li>
-                  )}
-                </ul>
+                          <div className="defense-meta">
+                            <span>{new Date(defense.createdAt).toLocaleString()}</span>
+                          </div>
+                        </li>
+                      ))
+                    ) : (
+                      <li>No defenses recorded yet.</li>
+                    )}
+                  </ul>
+                </details>
               </div>
             </>
           ) : (