src/Components/PatientForm/FamilyFormSection2.tsx

@@ -101,13 +101,7 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
             </Grid>
            
             <Grid item xs={4} className='collapsable-form-style '></Grid>
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style '>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style '>
                 <TextField 
                 
                 variant="outlined" 
@@ -125,13 +119,7 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 disabled={type=='display'}
                 />
             </Grid>
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style '>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-            className='collapsable-form-style '>
                 <TextField 
                 // required
                 variant="outlined" 
@@ -149,13 +137,7 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 />
                
             </Grid>
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style '>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style '>
                  <TextField 
                  variant="outlined" 
                  label="Hours/Week" 
@@ -173,13 +155,7 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                  />
                  
             </Grid>
-            <Grid
+            <Grid item xs={4} className='collapsable-form-style '>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style '>
                 <TextField 
                 variant="outlined" 
                 label="Employer" 
@@ -195,13 +171,7 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 disabled={type=='display'}
                 />
             </Grid>
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style '>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style '>
                 <TextField 
                 variant="outlined" 
                 label="Business Phone" 
@@ -219,24 +189,13 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 />
             </Grid>
 
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style '></Grid>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style '></Grid>
 
             <Grid item xs={12} className='collapsable-form-style '> 
                 <FormLabel sx={{fontWeight:600}}>Spouse's Information:</FormLabel>
             </Grid>
 
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style '>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12} className='collapsable-form-style '>
                  <TextField 
                  variant="outlined" 
                  label="Spouse's Name" 
@@ -252,13 +211,7 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 disabled={type=='display'}
                  />
             </Grid>
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style '>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style '>
                  <TextField 
                  variant="outlined" 
                  label="Spouse's Employer" 
@@ -274,13 +227,7 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 disabled={type=='display'}
                  />
             </Grid>
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style '>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style '>
                   <TextField 
                   variant="outlined" 
                   label="Business Phone" 
@@ -303,13 +250,7 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
             </Grid>
            
 
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style '>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style '>
                    <TextField 
                    variant="outlined" 
                    label="Emergency Contact" 
@@ -325,13 +266,7 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                 disabled={type=='display'}
                    />
             </Grid>
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style '>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style '>
                     <TextField 
                     variant="outlined" 
                     label="Relationship" 
@@ -347,12 +282,7 @@ export default function FamilyFormSection({handleFormSection2Data,patientDataDip
                     disabled={type=='display'}
                     />
             </Grid>
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style '>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12} className='collapsable-form-style '>
                      <TextField 
                      variant="outlined" 
                      type="number"

src/Components/PatientForm/MedicalHistorySection3.tsx

@@ -76,13 +76,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
         </Grid>
 
         <Grid container direction="row">
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style'>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="Family physician" 
@@ -97,13 +91,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 disabled={type=='display'}
                 />
             </Grid>
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style'>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="City" 
@@ -118,13 +106,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 disabled={type=='display'}
                 />
             </Grid>
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style'>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style'>
                  <TextField 
                  variant="outlined"
                  label="State" 
@@ -139,13 +121,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 disabled={type=='display'}
                  />
             </Grid>
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style'>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="Phone" 
@@ -162,30 +138,14 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 />
             </Grid>
             
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style'></Grid>
-            xs={12}
+            <Grid item xs={4} className='collapsable-form-style'></Grid>
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12} className='collapsable-form-style'></Grid>
-            <Grid item 
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12} className='collapsable-form-style'></Grid>
 
             <Grid item xs={12} className='collapsable-form-style '> 
                 <FormLabel sx={{fontWeight:600}}>Chiropractor Information:</FormLabel>
             </Grid>
 
-            <Grid item 
+            <Grid item xs={4} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons'>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                 <FormLabel>Previous Chiropractic Care:</FormLabel>
                 <RadioGroup
@@ -206,13 +166,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                 </FormControl>
             </Grid>
 
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style'>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style'>
                  <TextField 
                  variant="outlined"
                  label="Chiropractor's Name" 
@@ -228,13 +182,7 @@ export default function MedicalHistoryForm({handleFormSection3Data,patientDataDi
                  />
             </Grid>
 
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style'>
-            xs={12}
-            xl={3}
-            lg={4}
-            md={6}
-            sm={12}
-             className='collapsable-form-style'>
                  <TextField 
                  variant="outlined"
                  label="City/State" 

src/Components/PatientForm/PastTreatment5.tsx

@@ -121,12 +121,7 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
           </Grid>
           
         
-          <Grid item 
+          <Grid item xs={4} className='collapsable-form-style-form7'>
-          xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 variant="outlined"
                 label="If yes, when?" 
@@ -140,12 +135,7 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
                 }}
                 />
             </Grid>
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style-form7'>
-            xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 variant="outlined"
                 label="Was treatment provided?If yes, by whom?" 
@@ -160,12 +150,7 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
                 }}
                 />
             </Grid>
-            <Grid item 
+            <Grid item xs={4} className='collapsable-form-style-form7'>
-            xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 variant="outlined"
                 label="Outcome?" 
@@ -302,11 +287,7 @@ export default function PastTreatment5({handleFormSection5Data,patientDataDiplay
                 type={type}/>
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-multiline'>
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-multiline'>
           <FormLabel>Please list current supplements or drugs you may be taking:</FormLabel>
                 <TextField 
                 multiline

src/Components/PatientForm/PatientForm.tsx

@@ -507,7 +507,7 @@ export default function PatientForm({ type }: Props) {
                 id='panel9d-header'
               >
                 <Typography sx={{ fontSize: 18 }}>
-                  Patient's Pain Zone
+                  Patient's Injury Image
                 </Typography>
               </AccordionSummary>
 

src/Components/PatientForm/PersonalSection1.tsx

@@ -1,540 +1,389 @@
 import * as React from 'react';
-import {
+import { Button, FormControl, FormControlLabel, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
-  Button,
-  FormControl,
-  FormControlLabel,
-  FormLabel,
-  Grid,
-  Paper,
-  Radio,
-  RadioGroup,
-  TextField,
-} from '@mui/material';
 import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { useEffect } from 'react';
 
 interface Patient {
-  fullName: string;
+    fullName: string;
-  homePhone: string;
+    homePhone: string;
-  cellPhone: string;
+    cellPhone: string;
-  email: string;
+    email: string;
-  age: number | string;
+    age: number | string;
-  dateOfBirth: string;
+    dateOfBirth: string;
-  socialSecurityNumber: string;
+    socialSecurityNumber: string;
-  mailingAddress: string;
+    mailingAddress: string;
-  city: string;
+    city: string;
-  state: string;
+    state: string;
-  zipCode: string;
+    zipCode: string;
-  gender: string;
+    gender: string;
-}
+  }
 
-type Props = {
+  type Props = {
-  handleFormSection1Data: (
+    handleFormSection1Data:(
-    fullName?: string | undefined,
+        fullName?: string|undefined,
-    homePhone?: string | undefined,
+        homePhone?: string|undefined,
-    cellPhone?: string | undefined,
+        cellPhone?: string|undefined,
-    email?: string | undefined,
+        email?: string|undefined,
-    age?: number | undefined | string,
+        age?: number|undefined|string,
-    dateOfBirth?: string | undefined,
+        dateOfBirth?: string|undefined,
-    socialSecurityNumber?: string | undefined,
+        socialSecurityNumber?: string|undefined,
-    mailingAddress?: string | undefined,
+        mailingAddress?: string|undefined,
-    city?: string | undefined,
+        city?: string|undefined,
-    state?: string | undefined,
+        state?: string|undefined,
-    zipCode?: string | undefined,
+        zipCode?: string|undefined,
-    gender?: string | undefined
+        gender?: string|undefined,
-  ) => void;
+    )=> void
-  patientDataDiplay: any;
+    patientDataDiplay:any;
-  type: string;
+    type:string;
-};
+  }
+  
 
-export default function PersonalSection({
+export default function PersonalSection({handleFormSection1Data,patientDataDiplay,type}:Props){
-  handleFormSection1Data,
-  patientDataDiplay,
-  type,
-}: Props) {
-  const [birthDateValue, setBirthDateValue] = React.useState<any>();
-  const [patient, setPatient] = React.useState<any>({
-    fullName: '',
-    fullNameError: false,
-    homePhone: '',
-    cellPhone: '',
-    cellPhoneError: false,
-    email: '',
-    emailError: false,
-    age: '',
-    ageError: false,
-    dateOfBirth: birthDateValue,
-    socialSecurityNumber: '',
-    mailingAddress: '',
-    mailingAddressFalse: false,
-    city: '',
-    state: '',
-    zipCode: '',
-    gender: 'male',
-  });
 
-  useEffect(() => {
+    const [birthDateValue, setBirthDateValue] = React.useState<any>();
-    handleFormSection1Data(
+    const [patient, setPatient] = React.useState<any>({
-      patient.fullName,
+        fullName: "",
-      patient.homePhone,
+        fullNameError:false,
-      patient.cellPhone,
+        homePhone: "",
-      patient.email,
+        cellPhone: "",
-      patient.age,
+        cellPhoneError: false,
-      birthDateValue,
+        email: "",
-      patient.socialSecurityNumber,
+        emailError: false,
-      patient.mailingAddress,
+        age: "",
-      patient.city,
+        ageError: false,
-      patient.state,
+        dateOfBirth: birthDateValue,
-      patient.zipCode,
+        socialSecurityNumber: "",
-      patient.gender
+        mailingAddress:"",
-    );
+        mailingAddressFalse:false,
-  }, [patient]);
+        city: "",
+        state: "",
+        zipCode: "",
+        gender: "male",
+      });
 
-  return (
-    <>
-      <Grid container direction='row' className='section1-test-class'>
-        <Grid
-          item
-          xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12}
-          className='collapsable-form-style '
-        >
-          <TextField
-            variant='outlined'
-            label="Patient's Full Name"
-            name='fullName'
-            placeholder='Please enter your name'
-            value={
-              type == 'display' ? patientDataDiplay.fullName : patient.fullName
-            }
-            disabled={type == 'display'}
-            onChange={(e) => {
-              setPatient((prevValues: any) => ({
-                ...prevValues,
-                fullName: e.target.value,
-              }));
-            }}
-            onBlur={(e) => {
-              if (e.target.value === '') {
-                setPatient((prevValues: any) => ({
-                  ...prevValues,
-                  fullNameError: true,
-                }));
-              } else {
-                setPatient((prevValues: any) => ({
-                  ...prevValues,
-                  fullNameError: false,
-                }));
-              }
-            }}
-            required
-            error={patient.fullNameError}
-            helperText={patient.fullNameError ? 'Please enter your name' : ''}
-          />
-        </Grid>
 
-        <Grid
+      useEffect(()=>{
-          item
+        handleFormSection1Data(
-          xs={12}
+            patient.fullName,
-          xl={3}
+            patient.homePhone,
-          lg={4}
+            patient.cellPhone,
-          md={6}
+            patient.email,
-          sm={12}
+            patient.age,
-          className='collapsable-form-style'
+            birthDateValue,
-        >
+            patient.socialSecurityNumber,
-          <TextField
+            patient.mailingAddress,
-              required
+            patient.city,
-              variant='outlined'
+            patient.state,
-              label='Phone Number'
+            patient.zipCode,
-              name='cellPhone'
+            patient.gender,
-              type='number'
+        )
-              placeholder='Please enter your cell Phone number'
+      },[patient])    
-              value={
-                type == 'display'
-                  ? patientDataDiplay.cellPhone
-                  : patient.cellPhone
-              }
-              disabled={type == 'display'}
-              onChange={(e) => {
-                let value = e.target.value;
-                if (value[0] === '0') {
-                  value = value.slice(1);
-                }
-                setPatient((prevValues: any) => ({
-                  ...prevValues,
-                  cellPhone: value,
-                }));
-              }}
-              onBlur={(e) => {
-                if (!/^\d{10}$/.test(e.target.value)) {
-                  setPatient((prevValues: any) => ({
-                    ...prevValues,
-                    cellPhoneError: true,
-                  }));
-                } else {
-                  setPatient((prevValues: any) => ({
-                    ...prevValues,
-                    cellPhoneError: false,
-                  }));
-                }
-              }}
-              error={patient.cellPhoneError}
-              helperText={
-                patient.cellPhoneError
-                  ? 'Please enter a valid 10-digit phone number'
-                  : ''
-              }
-            />
 
-        </Grid>
+     
+    
+    return(
+        <>
+        <Grid container direction="row" className='section1-test-class'>
+        <Grid item xs={4} className='collapsable-form-style '>
+                    <TextField
+                        variant="outlined"
+                        label="Patient's Full Name"
+                        name="fullName"
+                        placeholder='Please enter your name'
+                        value={type=='display'?patientDataDiplay.fullName:patient.fullName}
+                        disabled={type=='display'}
+                        onChange={(e)=>{
+                            setPatient((prevValues:any) => ({
+                                ...prevValues,
+                                fullName: e.target.value,
+                            }));
+                        }}
+                        onBlur={(e) => {
+                            if (e.target.value === "") {
+                                setPatient((prevValues:any) => ({
+                                    ...prevValues,
+                                    fullNameError: true,
+                                }));
+                            } else {
+                                setPatient((prevValues:any) => ({
+                                    ...prevValues,
+                                    fullNameError: false,
+                                }));
+                            }
+                        }}
+                        required
+                        error={patient.fullNameError}
+                        helperText={patient.fullNameError ? "Please enter your name" : ""}
+                    />
+                </Grid>
 
-        <Grid
+               
-          item
+                <Grid item xs={4} className='collapsable-form-style'>
-          xs={12}
+                <TextField
-          xl={3}
+                    required
-          lg={4}
+                    variant="outlined"
-          md={6}
+                    label="Phone Number"
-          sm={12}
+                    name="cellPhone"
-          className='collapsable-form-style'
+                    type="number"
-        >
+                    placeholder='Please enter your cell Phone number'
-          <TextField
+                    value={type=='display'?patientDataDiplay.cellPhone:patient.cellPhone}
-            variant='outlined'
+                    disabled={type=='display'}
-            label='Home Phone Number'
+                    onChange={(e)=>{
-            name='homePhone'
+                        setPatient((prevValues:any) => ({
-            type='number'
+                            ...prevValues,
-            placeholder='Please enter your home phone'
+                            cellPhone: e.target.value,
-            value={
+                          }));
-              type == 'display'
+                    }}
-                ? patientDataDiplay.homePhone
+                    onBlur={(e) => {
-                : patient.homePhone
+                        if (!(/^\d{10}$/.test(e.target.value))) {
-            }
+                            setPatient((prevValues:any) => ({
-            disabled={type == 'display'}
+                                ...prevValues,
-            onChange={(e) => {
+                                cellPhoneError: true,
-              setPatient((prevValues: any) => ({
+                            }));
-                ...prevValues,
+                        } else {
-                homePhone: e.target.value,
+                            setPatient((prevValues:any) => ({
-              }));
+                                ...prevValues,
-            }}
+                                cellPhoneError: false,
-            // error={!(/^\d{10}$/.test(patient.homePhone))}
+                            }));
-            // helperText={!(/^\d{10}$/.test(patient.homePhone)) ? "Please enter a valid 10-digit phone number" : ""}
+                        }
-          />
+                    }}
-        </Grid>
+                    error={patient.cellPhoneError}
+                    helperText={patient.cellPhoneError? "Please enter a valid 10-digit phone number" : ""}
+                />
+                </Grid>
 
-        <Grid
+                <Grid item xs={4} className='collapsable-form-style'>
-          item
+                <TextField
-          xs={12}
+                    variant="outlined"
-          xl={3}
+                    label="Home Phone Number"
-          lg={4}
+                    name="homePhone"
-          md={6}
+                    type='number'
-          sm={12}
+                    placeholder='Please enter your home phone'
-          className='collapsable-form-style'
+                    value={type=='display'?patientDataDiplay.homePhone:patient.homePhone}
-        >
+                    disabled={type=='display'}
-          <TextField
+                    onChange={(e)=>{
-            required
+                        setPatient((prevValues:any) => ({
-            variant='outlined'
+                            ...prevValues,
-            label='Email'
+                            homePhone: e.target.value,
-            name='email'
+                          }));
-            placeholder='Please enter your email'
+                    }}
-            value={type == 'display' ? patientDataDiplay.email : patient.email}
+                    // error={!(/^\d{10}$/.test(patient.homePhone))}
-            disabled={type == 'display'}
+                    // helperText={!(/^\d{10}$/.test(patient.homePhone)) ? "Please enter a valid 10-digit phone number" : ""}
-            onChange={(e) => {
+                />
-              setPatient((prevValues: any) => ({
+                </Grid>
-                ...prevValues,
-                email: e.target.value,
-              }));
-            }}
-            onBlur={(e) => {
-              if (!/^\S+@\S+\.\S+$/.test(e.target.value)) {
-                setPatient((prevValues: any) => ({
-                  ...prevValues,
-                  emailError: true,
-                }));
-              } else {
-                setPatient((prevValues: any) => ({
-                  ...prevValues,
-                  emailError: false,
-                }));
-              }
-            }}
-            error={patient.emailError}
-            helperText={
-              patient.emailError ? 'Please enter a valid email address' : ''
-            }
-          />
-        </Grid>
-        <Grid
-          item
-          xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12}
-          className='collapsable-form-style'
-        >
-          <TextField
-            required
-            variant='outlined'
-            label='Age'
-            name='age'
-            type='number'
-            placeholder='Please enter your age'
-            value={type == 'display' ? patientDataDiplay.age : patient.age}
-            disabled={type == 'display'}
-            onChange={(e) => {
-              setPatient((prevValues: any) => ({
-                ...prevValues,
-                age: e.target.value,
-              }));
-            }}
-            onBlur={(e) => {
-              if (e.target.value === '') {
-                setPatient((prevValues: any) => ({
-                  ...prevValues,
-                  ageError: true,
-                }));
-              } else {
-                setPatient((prevValues: any) => ({
-                  ...prevValues,
-                  ageError: false,
-                }));
-              }
-            }}
-            error={patient.ageError}
-            helperText={patient.ageError ? 'Please enter your age' : ''}
-          />
-        </Grid>
 
-        <Grid
+                <Grid item xs={4} className='collapsable-form-style'>
-          item
+                <TextField
-          xs={12}
+                    required
-          xl={3}
+                    variant="outlined"
-          lg={4}
+                    label="Email"
-          md={6}
+                    name="email"
-          sm={12}
+                    placeholder='Please enter your email'
-          className='collapsable-form-style'
+                    value={type=='display'?patientDataDiplay.email:patient.email}
-        >
+                    disabled={type=='display'}
-          <FormControl>
+                    onChange={(e)=>{
-            <LocalizationProvider dateAdapter={AdapterDayjs}>
+                        setPatient((prevValues:any) => ({
-              <DatePicker
+                            ...prevValues,
-                label='Date of Birth'
+                            email: e.target.value,
-                value={
+                          }));
-                  type == 'display'
+                    }}
-                    ? patientDataDiplay.dateOfBirth
+                    onBlur={(e) => {
-                    : birthDateValue
+                        if (!(/^\S+@\S+\.\S+$/.test(e.target.value))) {
-                }
+                            setPatient((prevValues:any) => ({
-                disabled={type == 'display'}
+                                ...prevValues,
-                onChange={(newValue) => {
+                                emailError: true,
-                  setBirthDateValue(newValue);
+                            }));
-                }}
+                        } else {
-                renderInput={(params) => (
+                            setPatient((prevValues:any) => ({
-                  <TextField variant='outlined' {...params} />
+                                ...prevValues,
-                )}
+                                emailError: false,
-              />
+                            }));
-            </LocalizationProvider>
+                        }
-          </FormControl>
+                    }}
-        </Grid>
+                    error={patient.emailError}
+                    helperText={patient.emailError? "Please enter a valid email address" : ""}
+                />
+                </Grid>
+                <Grid item xs={4} className='collapsable-form-style'>
+                <TextField
+                    required
+                    variant="outlined"
+                    label="Age"
+                    name="age"
+                    type="number"
+                    placeholder='Please enter your age'
+                    value={type=='display'?patientDataDiplay.age:patient.age}
+                    disabled={type=='display'}
+                    onChange={(e)=>{
+                        setPatient((prevValues:any) => ({
+                            ...prevValues,
+                            age: e.target.value,
+                          }));
+                    }}
+                    onBlur={(e) => {
+                        if (e.target.value === "") {
+                            setPatient((prevValues:any) => ({
+                                ...prevValues,
+                                ageError: true,
+                            }));
+                        } else {
+                            setPatient((prevValues:any) => ({
+                                ...prevValues,
+                                ageError: false,
+                            }));
+                        }
+                    }}
+                    error={patient.ageError}
+                    helperText={patient.ageError ? "Please enter your age" : ""}
+                    
+                />
+                </Grid>
 
-        <Grid
+                <Grid item xs={4} className='collapsable-form-style'>
-          item
+                <FormControl >
-          xs={12}
+                <LocalizationProvider dateAdapter={AdapterDayjs}>
-          xl={3}
+                    <DatePicker
-          lg={4}
+                    label="Date of Birth"
-          md={6}
+                    value={type=='display'?patientDataDiplay.dateOfBirth:birthDateValue}
-          sm={12}
+                    disabled={type=='display'}
-          className='collapsable-form-style'
+                    onChange={(newValue) => {
-        >
+                        setBirthDateValue(newValue);
-          <TextField
+                    }}
-            variant='outlined'
+                    renderInput={(params) => <TextField  variant="outlined" {...params} />}
-            label='Social Security Number'
+                    />
-            name='socialSecurityNumber'
+                </LocalizationProvider>
-            value={
+                </FormControl>
-              type == 'display'
+            
-                ? patientDataDiplay.socialSecurityNumber
+                </Grid>
-                : patient.socialSecurityNumber
-            }
-            disabled={type == 'display'}
-            onChange={(e) => {
-              setPatient((prevValues: any) => ({
-                ...prevValues,
-                socialSecurityNumber: e.target.value,
-              }));
-            }}
-            // onBlur={formik.handleBlur}
-            // error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
-            // helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
-          />
-        </Grid>
 
-        <Grid
+                <Grid item xs={4} className='collapsable-form-style'>
-          item
+                <TextField
-          xs={12}
+                    variant="outlined"
-          xl={3}
+                    label="Social Security Number"
-          lg={4}
+                    name="socialSecurityNumber"
-          md={6}
+                    value={type=='display'?patientDataDiplay.socialSecurityNumber:patient.socialSecurityNumber}
-          sm={12}
+                    disabled={type=='display'}
-          className='collapsable-form-style'
+                    onChange={(e)=>{
-        >
+                        setPatient((prevValues:any) => ({
-          <TextField
+                            ...prevValues,
-            required
+                            socialSecurityNumber: e.target.value,
-            variant='outlined'
+                          }));
-            label='Mailing Address'
+                    }}
-            name='mailingAddress'
+                    // onBlur={formik.handleBlur}
-            value={
+                    // error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
-              type == 'display'
+                    // helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
-                ? patientDataDiplay.mailingAddress
+                />
-                : patient.mailingAddress
+                </Grid>
-            }
-            disabled={type == 'display'}
-            onChange={(e) => {
-              setPatient((prevValues: any) => ({
-                ...prevValues,
-                mailingAddress: e.target.value,
-              }));
-            }}
-            onBlur={(e) => {
-              if (e.target.value === '') {
-                setPatient((prevValues: any) => ({
-                  ...prevValues,
-                  mailingAddressError: true,
-                }));
-              } else {
-                setPatient((prevValues: any) => ({
-                  ...prevValues,
-                  mailingAddressError: false,
-                }));
-              }
-            }}
-            error={patient.mailingAddressError}
-            helperText={
-              patient.mailingAddressError
-                ? 'Please enter your mailing address'
-                : ''
-            }
-          />
-        </Grid>
 
-        <Grid
+                <Grid item xs={4} className='collapsable-form-style'>
-          item
+                    <TextField
-          xs={12}
+                        required
-          xl={3}
+                        variant="outlined"
-          lg={4}
+                        label="Mailing Address"
-          md={6}
+                        name="mailingAddress"
-          sm={12}
+                        value={type=='display'?patientDataDiplay.mailingAddress:patient.mailingAddress}
-          className='collapsable-form-style'
+                        disabled={type=='display'}
-        >
+                        onChange={(e)=>{
-          <TextField
+                            setPatient((prevValues:any) => ({
-            variant='outlined'
+                                ...prevValues,
-            label='State'
+                                mailingAddress: e.target.value,
-            name='state'
+                              }));
-            value={type == 'display' ? patientDataDiplay.state : patient.state}
+                        }}
-            disabled={type == 'display'}
+                        onBlur={(e) => {
-            onChange={(e) => {
+                            if (e.target.value === "") {
-              setPatient((prevValues: any) => ({
+                                setPatient((prevValues:any) => ({
-                ...prevValues,
+                                    ...prevValues,
-                state: e.target.value,
+                                    mailingAddressError: true,
-              }));
+                                }));
-            }}
+                            } else {
-          />
+                                setPatient((prevValues:any) => ({
-        </Grid>
+                                    ...prevValues,
+                                    mailingAddressError: false,
+                                }));
+                            }
+                        }}
+                        error={patient.mailingAddressError}
+                        helperText={patient.mailingAddressError? "Please enter your mailing address" : ""}
+                    />
+                </Grid>                
+            
+                <Grid item xs={4} className='collapsable-form-style'>
+                <TextField
+                    variant="outlined"
+                    label="State"
+                    name="state"
+                    value={type=='display'?patientDataDiplay.state:patient.state}
+                    disabled={type=='display'}
+                    onChange={(e)=>{
+                        setPatient((prevValues:any) => ({
+                            ...prevValues,
+                            state: e.target.value,
+                          }));
+                    }}
+                />
+                </Grid>
 
-        <Grid
+                <Grid item xs={4} className='collapsable-form-style'>
-          item
+                    <TextField
-          xs={12}
+                        variant="outlined"
-          xl={3}
+                        label="City"
-          lg={4}
+                        name="city"
-          md={6}
+                        value={type=='display'?patientDataDiplay.city:patient.city}
-          sm={12}
+                        disabled={type=='display'}
-          className='collapsable-form-style'
+                        onChange={(e)=>{
-        >
+                            setPatient((prevValues:any) => ({
-          <TextField
+                                ...prevValues,
-            variant='outlined'
+                                city: e.target.value,
-            label='City'
+                              }));
-            name='city'
+                        }}
-            value={type == 'display' ? patientDataDiplay.city : patient.city}
+                    />
-            disabled={type == 'display'}
+                </Grid>
-            onChange={(e) => {
+                
-              setPatient((prevValues: any) => ({
+                <Grid item xs={4} className='collapsable-form-style'>
-                ...prevValues,
+                <TextField
-                city: e.target.value,
+                    variant="outlined"
-              }));
+                    label="Zip Code"
-            }}
+                    name="zipCode"
-          />
+                    value={type=='display'?patientDataDiplay.zipCode:patient.zipCode}
-        </Grid>
+                    disabled={type=='display'}
+                    onChange={(e)=>{
+                        setPatient((prevValues:any) => ({
+                            ...prevValues,
+                            zipCode: e.target.value,
+                          }));
+                    }}
+                    // onBlur={formik.handleBlur}
+                    // error={formik.touched.zipCode && Boolean(formik.errors.zipCode)}
+                    // helperText={formik.touched.zipCode && formik.errors.zipCode}
+                />
+                </Grid>
 
-        <Grid
+                <Grid item xs={4} className='collapsable-form-style-radioButtons'>
-          item
+                <FormControl >
-          xs={12}
+                <FormLabel>Gender</FormLabel>
-          xl={3}
+                <RadioGroup
-          lg={4}
+                    aria-labelledby="demo-radio-buttons-group-label"
-          md={6}
+                    defaultValue={type=='display'?patientDataDiplay.gender:patient.gender}
-          sm={12}
+                    name="radio-buttons-group"
-          className='collapsable-form-style'
+                    onChange={(e)=>{
-        >
+                        setPatient((prevValues:any) => ({
-          <TextField
+                            ...prevValues,
-            variant='outlined'
+                            gender: e.target.value,
-            label='Zip Code'
+                          }));
-            name='zipCode'
+                    }}
-            value={
+                    sx={{display:'flex', flexDirection:'row'}}
-              type == 'display' ? patientDataDiplay.zipCode : patient.zipCode
+                >
-            }
+                    <FormControlLabel
-            disabled={type == 'display'}
+                        disabled={type=='display'}
-            onChange={(e) => {
+                         value="male" control={<Radio />} label="Male" />
-              setPatient((prevValues: any) => ({
+                    <FormControlLabel 
-                ...prevValues,
+                        disabled={type=='display'}
-                zipCode: e.target.value,
+                        value="female" control={<Radio />} label="Female" />
-              }));
+                </RadioGroup>
-            }}
+                </FormControl>
-            // onBlur={formik.handleBlur}
+                </Grid>
-            // error={formik.touched.zipCode && Boolean(formik.errors.zipCode)}
+            </Grid>       
-            // helperText={formik.touched.zipCode && formik.errors.zipCode}
+        </>
-          />
+    )
-        </Grid>
+}
-
-        <Grid
-          item
-          xs={12}
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12}
-          className='collapsable-form-style-radioButtons'
-        >
-          <FormControl>
-            <FormLabel>Gender</FormLabel>
-            <RadioGroup
-              aria-labelledby='demo-radio-buttons-group-label'
-              defaultValue={
-                type == 'display' ? patientDataDiplay.gender : patient.gender
-              }
-              name='radio-buttons-group'
-              onChange={(e) => {
-                setPatient((prevValues: any) => ({
-                  ...prevValues,
-                  gender: e.target.value,
-                }));
-              }}
-              sx={{ display: 'flex', flexDirection: 'row' }}
-            >
-              <FormControlLabel
-                disabled={type == 'display'}
-                value='male'
-                control={<Radio />}
-                label='Male'
-              />
-              <FormControlLabel
-                disabled={type == 'display'}
-                value='female'
-                control={<Radio />}
-                label='Female'
-              />
-            </RadioGroup>
-          </FormControl>
-        </Grid>
-      </Grid>
-    </>
-  );
-}

src/Components/PatientForm/RecreationalHobbiesSection7.tsx

@@ -136,11 +136,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Do you excercise?</FormLabel>
                     <RadioGroup
@@ -160,11 +156,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-form7'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.excercise!=='Yes'||type=='display'}
                 variant="outlined"
@@ -180,11 +172,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
             </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Use tobacco?</FormLabel>
                     <RadioGroup
@@ -204,11 +192,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-form7'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.tobacco!=='Yes'||type=='display'}
                 value={type=='display'?patientDataDiplay.tobaccoExplanation:patient.tobaccoExplanation}
@@ -224,11 +208,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
             </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Consume alcohol?</FormLabel>
                     <RadioGroup
@@ -248,11 +228,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-form7'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.alcohol!=='Yes'||type=='display'}
                 value={type=='display'?patientDataDiplay.alcoholExplanation:patient.alcoholExplanation}
@@ -268,11 +244,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
             </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Have a healthy diet?</FormLabel>
                     <RadioGroup
@@ -292,11 +264,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-form7'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.healthyDiet!=='No'||type=='display'}
                 value={type=='display'?patientDataDiplay.healthyDietExplanation:patient.healthyDietExplanation}
@@ -312,11 +280,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Get adequate sleep?</FormLabel>
                     <RadioGroup
@@ -336,11 +300,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-form7'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.sleep!=='No'||type=='display'}
                 value={type=='display'?patientDataDiplay.sleepExplanation:patient.sleepExplanation}
@@ -356,11 +316,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Is Work/School stressful to you?</FormLabel>
                     <RadioGroup
@@ -380,11 +336,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-form7'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.workSchool!=='Yes'||type=='display'}
                 value={type=='display'?patientDataDiplay.workSchool:patient.workSchool}
@@ -400,11 +352,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Family life stressful to you?</FormLabel>
                     <RadioGroup
@@ -424,11 +372,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-form7'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.familyLife!=='Yes'||type=='display'}
                 value={type=='display'?patientDataDiplay.familyLifeExplanation:patient.familyLifeExplanation}
@@ -444,11 +388,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
                 />
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Use recreational drugs?</FormLabel>
                     <RadioGroup
@@ -468,11 +408,7 @@ export default function RecreationalHobbiesSection7({handleFormSection7Data,pati
               </FormControl>
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={6} className='collapsable-form-style-form7'>
-          xl={3}
-          // lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-form7'>
                 <TextField 
                 disabled={patient.drugs!=='Yes'||type=='display'}
                 value={type=='display'?patientDataDiplay.drugsExplanation:patient.drugsExplanation}

src/Components/PatientForm/SyestemReviewSection6.tsx

@@ -93,11 +93,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
             <FormLabel sx={{fontWeight:600}}>Please choose body areas or systems where you may have problems:</FormLabel>
         </Grid>
         <Grid container direction="row">
-        <Grid item xs={12}
+        <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Eyes</FormLabel>
                     <RadioGroup
@@ -116,11 +112,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={12}
+          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Intestines/Bowls</FormLabel>
                     <RadioGroup
@@ -139,11 +131,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={12}
+          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Joints/Bones</FormLabel>
                     <RadioGroup
@@ -162,11 +150,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={12}
+          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Allergies</FormLabel>
                     <RadioGroup
@@ -185,11 +169,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={12}
+          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Ears, Nose, Mouth, Throat</FormLabel>
                     <RadioGroup
@@ -208,11 +188,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={12}
+          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Urinary</FormLabel>
                     <RadioGroup
@@ -231,11 +207,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={12}
+          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Skin</FormLabel>
                     <RadioGroup
@@ -254,11 +226,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={12}
+          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Psychological/Emotional</FormLabel>
                     <RadioGroup
@@ -277,11 +245,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={12}
+          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Heart</FormLabel>
                     <RadioGroup
@@ -300,11 +264,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={12}
+          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Muscles</FormLabel>
                     <RadioGroup
@@ -323,11 +283,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={12}
+          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Internal Organs</FormLabel>
                     <RadioGroup
@@ -346,11 +302,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={12}
+          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Gynecological menstrual/Brest</FormLabel>
                     <RadioGroup
@@ -370,11 +322,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
               </FormControl>
           </Grid>
 
-          <Grid item xs={12}
+          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Lungs/Breathing</FormLabel>
                     <RadioGroup
@@ -393,11 +341,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={12}
+          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Nerves</FormLabel>
                     <RadioGroup
@@ -416,11 +360,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={12}
+          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Blood</FormLabel>
                     <RadioGroup
@@ -439,11 +379,7 @@ export default function SystemReviewSection6({handleFormSection6Data,patientData
                     </RadioGroup>
               </FormControl>
           </Grid>
-          <Grid item xs={12}
+          <Grid item xs={3} className='collapsable-form-style-radioButtons'>
-          xl={3}
-          lg={4}
-          md={6}
-          sm={12} className='collapsable-form-style-radioButtons'>
                 <FormControl>
                     <FormLabel>Prostate/Testicular/Penile</FormLabel>
                     <RadioGroup