diff --git a/components/admin/guide-section-editor.tsx b/components/admin/guide-section-editor.tsx
index 91c45d0..84a002c 100644
--- a/components/admin/guide-section-editor.tsx
+++ b/components/admin/guide-section-editor.tsx
@@ -4376,8 +4376,8 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
       })),
     })),
   );
-  const [openSectionIds, setOpenSectionIds] = useState(() =>
-    initial.extras.map((section) => section.id),
+  const [openRowIds, setOpenRowIds] = useState(() =>
+    initial.extras.flatMap((section) => section.rows.map((row) => row.id)),
   );
   const value = {
     sections: sections.map((section) => ({
@@ -4438,7 +4438,11 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
         })),
       }));
       setSections(restoredSections);
-      setOpenSectionIds(restoredSections.map((section) => section.clientId));
+      setOpenRowIds(
+        restoredSections.flatMap((section) =>
+          section.rows.map((row) => row.clientId),
+        ),
+      );
     },
   });
   const handleRowDragEnd = (sectionId: string, { active, over }: DragEndEvent) => {
@@ -4462,15 +4466,9 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
         </CardDescription>
       </CardHeader>
       <CardContent className="flex flex-col gap-5">
-        <Accordion
-          multiple
-          value={openSectionIds}
-          onValueChange={setOpenSectionIds}
-          className="gap-5"
-        >
-            {sections.map((section, sectionIndex) => (
-          <AccordionItem key={section.clientId} value={section.clientId} className="border-0">
+        {sections.map((section, sectionIndex) => (
           <Card
+            key={section.clientId}
             size="sm"
             className={cn(
               extraIssue("sections", sectionIndex, "title") && "border-destructive",
@@ -4516,15 +4514,8 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
                   <Trash2Icon />
                   <span className="sr-only">ลบส่วน</span>
                 </DeleteConfirmationDialog>
-                <AccordionTrigger
-                  className="size-8 flex-none items-center justify-center p-0 hover:no-underline"
-                  headerClassName="flex-none"
-                  aria-label={`${openSectionIds.includes(section.clientId) ? "ซ่อน" : "แสดง"} ${section.title || `Extra section ${sectionIndex + 1}`}`}
-                  title={openSectionIds.includes(section.clientId) ? "ซ่อนส่วนนี้" : "แสดงส่วนนี้"}
-                />
               </CardAction>
             </CardHeader>
-            <AccordionContent className="pb-0">
             <CardContent className="flex flex-col gap-4">
               <DndContext
                 sensors={extraSensors}
@@ -4535,6 +4526,12 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
                   items={section.rows.map((row) => row.clientId)}
                   strategy={verticalListSortingStrategy}
                 >
+                  <Accordion
+                    multiple
+                    value={openRowIds}
+                    onValueChange={setOpenRowIds}
+                    className="gap-4"
+                  >
                   {section.rows.map((row, rowIndex) => (
                     <SortableExtraItem
                       key={row.clientId}
@@ -4542,6 +4539,7 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
                       label={`ลากเพื่อจัดลำดับ ${row.heading || `แถว ${rowIndex + 1}`}`}
                     >
                       {(rowDragHandle) => (
+                <AccordionItem value={row.clientId} className="border-0">
                 <Card
                   size="sm"
                   className={cn(
@@ -4583,8 +4581,15 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
                         <Trash2Icon />
                         <span className="sr-only">ลบแถว</span>
                       </DeleteConfirmationDialog>
+                      <AccordionTrigger
+                        className="size-8 flex-none items-center justify-center p-0 hover:no-underline"
+                        headerClassName="flex-none"
+                        aria-label={`${openRowIds.includes(row.clientId) ? "ซ่อน" : "แสดง"} ${row.heading || `แถว ${rowIndex + 1}`}`}
+                        title={openRowIds.includes(row.clientId) ? "ซ่อนส่วนนี้" : "แสดงส่วนนี้"}
+                      />
                     </CardAction>
                   </CardHeader>
+                  <AccordionContent className="pb-0">
                   <CardContent>
                     <FieldGroup>
                       {row.imageUrl ? (
@@ -4965,16 +4970,21 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
                       </FieldSet>
                     </FieldGroup>
                   </CardContent>
+                  </AccordionContent>
                 </Card>
+                </AccordionItem>
                       )}
                     </SortableExtraItem>
                   ))}
+                  </Accordion>
                 </SortableContext>
               </DndContext>
               <Button
                 type="button"
                 variant="outline"
-                onClick={() =>
+                onClick={() => {
+                  const clientId = createClientId("extra-row");
+                  setOpenRowIds((current) => [...current, clientId]);
                   setSections(
                     sections.map((item, index) =>
                       index === sectionIndex
@@ -4996,24 +5006,21 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
                                 sheet: null,
                                 catalogItems: [],
                                 highlights: [],
-                                clientId: createClientId("extra-row"),
+                                clientId,
                               },
                             ],
                           }
-                        : item,
+                      : item,
                     ),
-                  )
-                }
+                  );
+                }}
               >
                 <PlusIcon data-icon="inline-start" />
                 เพิ่มแถว
               </Button>
             </CardContent>
-            </AccordionContent>
           </Card>
-          </AccordionItem>
-            ))}
-        </Accordion>
+        ))}
       </CardContent>
       <CardFooter className="flex-wrap justify-end gap-3">
         <AutosaveStatus
diff --git a/components/public/structured-guide.tsx b/components/public/structured-guide.tsx
index 0af8c6e..7f01ff4 100644
--- a/components/public/structured-guide.tsx
+++ b/components/public/structured-guide.tsx
@@ -1323,7 +1323,7 @@ function ExtraSectionContent({
               </div>
             ) : null}
             {row.catalogItems.length ? (
-              <CardContent className="grid grid-cols-2 gap-2 pt-5">
+              <CardContent className="grid grid-cols-2 gap-2 pt-5 sm:grid-cols-4">
                 {row.catalogItems.map((item) => (
                   <a
                     key={`${item.kind}:${item.key}`}