diff --git a/frontend/src/App.css b/frontend/src/App.css
index d0f58f5..4aa9948 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -2315,7 +2315,19 @@ a.app-footer__repo:hover {
 
 /* ── Sub-topics inside card ───────────────────────────────────────────────── */
 
+.topic-subtopics-wrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 300ms ease;
+}
+
+.topic-subtopics-wrapper[data-expanded="true"] {
+  grid-template-rows: 1fr;
+}
+
 .topic-subtopics {
+  overflow: hidden;
+  min-height: 0;
   border-top: 1px solid var(--color-border);
 }
 
diff --git a/frontend/src/pages/TopicsBrowse.tsx b/frontend/src/pages/TopicsBrowse.tsx
index 044b918..97a5ca1 100644
--- a/frontend/src/pages/TopicsBrowse.tsx
+++ b/frontend/src/pages/TopicsBrowse.tsx
@@ -34,8 +34,8 @@ export default function TopicsBrowse() {
         const data = await fetchTopics();
         if (!cancelled) {
           setCategories(data);
-          // All expanded by default
-          setExpanded(new Set(data.map((c) => c.name)));
+          // Start collapsed
+          setExpanded(new Set());
         }
       } catch (err) {
         if (!cancelled) {
@@ -151,7 +151,7 @@ export default function TopicsBrowse() {
                   </button>
                 </div>
 
-                {isExpanded && (
+                <div className="topic-subtopics-wrapper" data-expanded={isExpanded}>
                   <div className="topic-subtopics">
                     {cat.sub_topics.map((st) => {
                       const stSlug = st.name.toLowerCase().replace(/\s+/g, "-");
@@ -175,7 +175,7 @@ export default function TopicsBrowse() {
                       );
                     })}
                   </div>
-                )}
+                </div>
               </div>
             );
           })}