diff --git a/src/devTool.tsx b/src/devTool.tsx
index 6f43226..de393ba 100644
--- a/src/devTool.tsx
+++ b/src/devTool.tsx
@@ -10,7 +10,7 @@ if (typeof window !== 'undefined') {
   createStore(
     {
       visible: false,
-      isCollapse: false,
+      isCollapse: true,
       filterName: '',
     },
     {
diff --git a/src/panel.tsx b/src/panel.tsx
index 4cdc956..e451e63 100644
--- a/src/panel.tsx
+++ b/src/panel.tsx
@@ -19,6 +19,8 @@ function PanelChildren<T, K, L, M, G>({
   dirtyFields,
   state,
   fieldsValues,
+  fieldCollapseStates,
+  toggleFieldCollapse,
 }: {
   fields: T;
   fieldsValues: K;
@@ -29,6 +31,8 @@ function PanelChildren<T, K, L, M, G>({
   touchedFields: M;
   errors: L;
   dirtyFields: G;
+  fieldCollapseStates: Record<string, boolean>;
+  toggleFieldCollapse: (fieldName: string) => void;
 }) {
   return (
     <>
@@ -58,6 +62,8 @@ function PanelChildren<T, K, L, M, G>({
                     dirtyFields,
                     state,
                     fieldsValues,
+                    fieldCollapseStates,
+                    toggleFieldCollapse,
                   }}
                 />
               );
@@ -93,6 +99,10 @@ function PanelChildren<T, K, L, M, G>({
                     errorType={errorType}
                     isDirty={isDirty}
                     fieldsValues={fieldsValues}
+                    isFieldCollapsed={
+                      fieldCollapseStates[value?._f.name] ?? state.isCollapse
+                    }
+                    onToggleCollapse={() => toggleFieldCollapse(value?._f.name)}
                   />
                 </section>
               );
@@ -113,6 +123,33 @@ const Panel = ({ control, control: { _fields } }: { control: Control }) => {
   });
   const [, setData] = React.useState({});
   const [showFormState, setShowFormState] = React.useState(false);
+  const [fieldCollapseStates, setFieldCollapseStates] = React.useState<
+    Record<string, boolean>
+  >({});
+
+  const toggleFieldCollapse = React.useCallback(
+    (fieldName: string) => {
+      setFieldCollapseStates((prev) => {
+        const currentState = prev[fieldName] ?? state.isCollapse;
+        const newState = !currentState;
+        const updatedStates = {
+          ...prev,
+          [fieldName]: newState,
+        };
+
+        return updatedStates;
+      });
+    },
+    [state.isCollapse],
+  );
+
+  const setAllFieldsCollapse = React.useCallback((isCollapsed: boolean) => {
+    setFieldCollapseStates((prev) =>
+      Object.fromEntries(
+        Object.keys(prev).map((fieldName) => [fieldName, isCollapsed]),
+      ),
+    );
+  }, []);
   const fieldsValues = useWatch({
     control,
   });
@@ -161,11 +198,13 @@ const Panel = ({ control, control: { _fields } }: { control: Control }) => {
           }}
           title="Toggle entire fields"
           onClick={() => {
-            actions.setCollapse(!state.isCollapse);
+            const newCollapseState = !state.isCollapse;
+            actions.setCollapse(newCollapseState);
+            setAllFieldsCollapse(newCollapseState);
           }}
           type="button"
         >
-          {state.isCollapse ? '[-] COLLAPSE' : '[+] EXPAND'}
+          {state.isCollapse ? '[+] EXPAND' : '[-] COLLAPSE'}
         </Button>
 
         <Input
@@ -203,6 +242,8 @@ const Panel = ({ control, control: { _fields } }: { control: Control }) => {
           dirtyFields={dirtyFields}
           fieldsValues={fieldsValues}
           state={state}
+          fieldCollapseStates={fieldCollapseStates}
+          toggleFieldCollapse={toggleFieldCollapse}
         />
       </div>
 
diff --git a/src/panelTable.tsx b/src/panelTable.tsx
index 0cb9f9a..2dda7cc 100644
--- a/src/panelTable.tsx
+++ b/src/panelTable.tsx
@@ -19,6 +19,8 @@ type Props = {
   name: string;
   collapseAll: boolean;
   refObject: any;
+  isFieldCollapsed: boolean;
+  onToggleCollapse: () => void;
 };
 
 const PanelTable = ({
@@ -32,14 +34,9 @@ const PanelTable = ({
   type,
   isTouched,
   name,
-  collapseAll,
+  isFieldCollapsed,
+  onToggleCollapse,
 }: Props) => {
-  const [collapse, setCollapse] = React.useState(false);
-
-  React.useEffect(() => {
-    setCollapse(!collapseAll);
-  }, [collapseAll]);
-
   let value = fieldsValues ? get(fieldsValues, name) : '';
   let isValueWrappedInPre = false;
 
@@ -78,7 +75,7 @@ const PanelTable = ({
         <tr>
           <td valign="top" style={{ width: 85, lineHeight: '22px' }}>
             <Button
-              onClick={() => setCollapse(!collapse)}
+              onClick={onToggleCollapse}
               title="Toggle field table"
               style={{
                 border: `1px solid ${colors.lightBlue}`,
@@ -93,7 +90,7 @@ const PanelTable = ({
               }}
               type="button"
             >
-              {collapse ? '+' : '-'}
+              {isFieldCollapsed ? '+' : '-'}
             </Button>
             <Button
               onClick={() => {
@@ -145,7 +142,7 @@ const PanelTable = ({
           </td>
         </tr>
       </thead>
-      {!collapse && (
+      {!isFieldCollapsed && (
         <tbody>
           {type && (
             <tr>