diff --git a/admin-spa/src/components/VerticalTabForm.tsx b/admin-spa/src/components/VerticalTabForm.tsx
index ff73297..6953e10 100644
--- a/admin-spa/src/components/VerticalTabForm.tsx
+++ b/admin-spa/src/components/VerticalTabForm.tsx
@@ -119,8 +119,8 @@ export function VerticalTabForm({ tabs, children, className }: VerticalTabFormPr
           className="flex-1 overflow-y-auto pr-2"
         >
           {React.Children.map(children, (child) => {
-            if (React.isValidElement(child) && child.props['data-section-id']) {
-              const sectionId = child.props['data-section-id'];
+            if (React.isValidElement(child) && child.props.id) {
+              const sectionId = child.props.id as string;
               const isActive = sectionId === activeTab;
               const originalClassName = child.props.className || '';
               return React.cloneElement(child as React.ReactElement<any>, {
@@ -136,8 +136,8 @@ export function VerticalTabForm({ tabs, children, className }: VerticalTabFormPr
       {/* Mobile: Content Area */}
       <div className="lg:hidden">
         {React.Children.map(children, (child) => {
-          if (React.isValidElement(child) && child.props['data-section-id']) {
-            const sectionId = child.props['data-section-id'];
+          if (React.isValidElement(child) && child.props.id) {
+            const sectionId = child.props.id as string;
             const isActive = sectionId === activeTab;
             const originalClassName = child.props.className || '';
             return React.cloneElement(child as React.ReactElement<any>, {