diff --git a/app/package.json b/app/package.json
index dc98955..4a56710 100644
--- a/app/package.json
+++ b/app/package.json
@@ -13,7 +13,7 @@
   "dependencies": {
     "@azure/msal-browser": "^4.0.1",
     "@azure/msal-react": "^3.0.1",
-    "@noahspan/noahspan-components": "^1.4.0",
+    "@noahspan/noahspan-components": "^1.5.1",
     "axios": "^1.7.2",
     "dotenv": "^16.4.7",
     "react": "^18.3.1",
diff --git a/app/src/components/logForm/LogForm.tsx b/app/src/components/logForm/LogForm.tsx
index ed99327..5d4e569 100644
--- a/app/src/components/logForm/LogForm.tsx
+++ b/app/src/components/logForm/LogForm.tsx
@@ -13,7 +13,9 @@ import {
   IconName,
   Select,
   TextField,
+  theme,
   Typography,
+  useMediaQuery
 } from '@noahspan/noahspan-components';
 import { useForm, Controller, FormProvider } from 'react-hook-form';
 import { ILogFormProps } from './ILogFormProps';
@@ -63,6 +65,7 @@ const LogForm: React.FC<ILogFormProps> = ({
   };
   const methods = useForm();
   const { pilots } = usePilots();
+  const isMedium = useMediaQuery(theme.breakpoints.up('md'));
 
   const onCancel = () => {
     methods.reset(defaultValues);
@@ -166,7 +169,7 @@ const LogForm: React.FC<ILogFormProps> = ({
       PaperProps={{
         sx: {
           padding: '30px',
-          width: '33%'
+          width: isMedium ? '33%' : '75%'
         }
       }}
     >
@@ -194,10 +197,10 @@ const LogForm: React.FC<ILogFormProps> = ({
                 </Alert>
               </Grid>
             )}
-            <Grid alignItems="center" display="flex" size={4}>
+            <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
               <Typography variant="body1">Pilot *</Typography>
             </Grid>
-            <Grid size={8}>
+            <Grid size={isMedium ? 8 : 12}>
               <Controller
                 name="pilotId"
                 control={methods.control}
@@ -229,10 +232,10 @@ const LogForm: React.FC<ILogFormProps> = ({
                 }}
               />
             </Grid>
-            <Grid alignItems="center" display="flex" size={4}>
+            <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
               <Typography variant="body1">Date *</Typography>
             </Grid>
-            <Grid size={8}>
+            <Grid size={isMedium ? 8 : 12}>
               <Controller
                 name="date"
                 control={methods.control}
@@ -245,10 +248,10 @@ const LogForm: React.FC<ILogFormProps> = ({
                 )}
               />
             </Grid>
-            <Grid alignItems="center" display="flex" size={4}>
+            <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
               <Typography variant="body1">Aircraft Make and Model *</Typography>
             </Grid>
-            <Grid size={8}>
+            <Grid size={isMedium ? 8 : 12}>
               <Controller
                 name="aircraftMakeModel"
                 control={methods.control}
@@ -268,33 +271,37 @@ const LogForm: React.FC<ILogFormProps> = ({
                 )}
               />
             </Grid>
-            <Grid alignItems="center" display="flex" size={4}>
-              <Typography variant="body1">Aircraft Identity *</Typography>
-            </Grid>
-            <Grid size={8}>
-              <Controller
-                name="aircraftIdentity"
-                control={methods.control}
-                render={({ field: { onChange, value } }) => (
-                  <TextField
-                    disabled={state.isDisabled}
-                    error={methods.formState.errors.address ? true : false}
-                    fullWidth
-                    helperText={
-                      methods.formState.errors.address
-                        ? methods.formState.errors.address.message?.toString()
-                        : undefined
-                    }
-                    onChange={onChange}
-                    value={value}
+            {isAuthenticated &&
+              <>
+                <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
+                  <Typography variant="body1">Aircraft Identity *</Typography>
+                </Grid>
+                <Grid size={isMedium ? 8 : 12}>
+                  <Controller
+                    name="aircraftIdentity"
+                    control={methods.control}
+                    render={({ field: { onChange, value } }) => (
+                      <TextField
+                        disabled={state.isDisabled}
+                        error={methods.formState.errors.address ? true : false}
+                        fullWidth
+                        helperText={
+                          methods.formState.errors.address
+                            ? methods.formState.errors.address.message?.toString()
+                            : undefined
+                        }
+                        onChange={onChange}
+                        value={value}
+                      />
+                    )}
                   />
-                )}
-              />
-            </Grid>
-            <Grid alignItems="center" display="flex" size={4}>
+                </Grid>
+              </>
+            }
+            <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
               <Typography variant="body1">Route From</Typography>
             </Grid>
-            <Grid size={8}>
+            <Grid size={isMedium ? 8 : 12}>
               <Controller
                 name="routeFrom"
                 control={methods.control}
@@ -314,10 +321,10 @@ const LogForm: React.FC<ILogFormProps> = ({
                 )}
               />
             </Grid>
-            <Grid alignItems="center" display="flex" size={4}>
+            <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
               <Typography variant="body1">Route To</Typography>
             </Grid>
-            <Grid size={8}>
+            <Grid size={isMedium ? 8 : 12}>
               <Controller
                 name="routeTo"
                 control={methods.control}
@@ -337,10 +344,10 @@ const LogForm: React.FC<ILogFormProps> = ({
                 )}
               />
             </Grid>
-            <Grid alignItems="center" display="flex" size={4}>
+            <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
               <Typography variant="body1">Duration Of Flight</Typography>
             </Grid>
-            <Grid size={8}>
+            <Grid size={isMedium ? 8 : 12}>
               <Controller
                 name="durationOfFlight"
                 control={methods.control}
@@ -366,510 +373,524 @@ const LogForm: React.FC<ILogFormProps> = ({
                 )}
               />
             </Grid>
-            <Grid alignItems="center" display="flex" size={4}>
-              <Typography variant="body1">Single Engine Land</Typography>
-            </Grid>
-            <Grid size={8}>
-              <Controller
-                name="singleEngineLand"
-                control={methods.control}
-                render={({ field: { onChange, value } }) => (
-                  <TextField
-                    disabled={state.isDisabled}
-                    error={methods.formState.errors.address ? true : false}
-                    fullWidth
-                    helperText={
-                      methods.formState.errors.address
-                        ? methods.formState.errors.address.message?.toString()
-                        : undefined
-                    }
-                    onChange={onChange}
-                    slotProps={{
-                      htmlInput: {
-                        step: 0.1
-                      }
-                    }}
-                    type="number"
-                    value={value}
+            {isAuthenticated &&
+              <>
+                <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
+                  <Typography variant="body1">Single Engine Land</Typography>
+                </Grid>
+                <Grid size={isMedium ? 8 : 12}>
+                  <Controller
+                    name="singleEngineLand"
+                    control={methods.control}
+                    render={({ field: { onChange, value } }) => (
+                      <TextField
+                        disabled={state.isDisabled}
+                        error={methods.formState.errors.address ? true : false}
+                        fullWidth
+                        helperText={
+                          methods.formState.errors.address
+                            ? methods.formState.errors.address.message?.toString()
+                            : undefined
+                        }
+                        onChange={onChange}
+                        slotProps={{
+                          htmlInput: {
+                            step: 0.1
+                          }
+                        }}
+                        type="number"
+                        value={value}
+                      />
+                    )}
                   />
-                )}
-              />
-            </Grid>
-            <Grid alignItems="center" display="flex" size={4}>
-              <Typography variant="body1">Simulator or ATD</Typography>
-            </Grid>
-            <Grid size={8}>
-              <Controller
-                name="simulatorAtd"
-                control={methods.control}
-                render={({ field: { onChange, value } }) => (
-                  <TextField
-                    disabled={state.isDisabled}
-                    error={methods.formState.errors.address ? true : false}
-                    fullWidth
-                    helperText={
-                      methods.formState.errors.address
-                        ? methods.formState.errors.address.message?.toString()
-                        : undefined
-                    }
-                    onChange={onChange}
-                    slotProps={{
-                      htmlInput: {
-                        step: 0.1
-                      }
-                    }}
-                    type="number"
-                    value={value}
+                </Grid>
+              </>
+            }
+            {isAuthenticated &&
+              <>
+                <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
+                  <Typography variant="body1">Simulator or ATD</Typography>
+                </Grid>
+                <Grid size={isMedium ? 8 : 12}>
+                  <Controller
+                    name="simulatorAtd"
+                    control={methods.control}
+                    render={({ field: { onChange, value } }) => (
+                      <TextField
+                        disabled={state.isDisabled}
+                        error={methods.formState.errors.address ? true : false}
+                        fullWidth
+                        helperText={
+                          methods.formState.errors.address
+                            ? methods.formState.errors.address.message?.toString()
+                            : undefined
+                        }
+                        onChange={onChange}
+                        slotProps={{
+                          htmlInput: {
+                            step: 0.1
+                          }
+                        }}
+                        type="number"
+                        value={value}
+                      />
+                    )}
                   />
-                )}
-              />
-            </Grid>
-            <Grid size={12}>
-              <Accordion defaultExpanded>
-                <AccordionSummary expandIcon={<Icon iconName={IconName.CHEVRON_DOWN} />}>
-                  <Typography variant="body1">Landings</Typography>
-                </AccordionSummary>
-                <AccordionDetails>
-                  <Grid container spacing={2}>
-                    <Grid alignItems="center" display="flex" size={4}>
-                      <Typography variant="body1">Day</Typography>
-                    </Grid>
-                    <Grid size={8}>
-                      <Controller
-                        name="landingsDay"
-                        control={methods.control}
-                        render={({ field: { onChange, value } }) => (
-                          <TextField
-                            disabled={state.isDisabled}
-                            error={
-                              methods.formState.errors.address ? true : false
-                            }
-                            fullWidth
-                            helperText={
-                              methods.formState.errors.address
-                                ? methods.formState.errors.address.message?.toString()
-                                : undefined
-                            }
-                            onChange={onChange}
-                            slotProps={{
-                              htmlInput: {
-                                step: 1
+                </Grid>
+              </>
+            }
+            {isAuthenticated &&
+              <Grid size={12}>
+                <Accordion defaultExpanded>
+                  <AccordionSummary expandIcon={<Icon iconName={IconName.CHEVRON_DOWN} />}>
+                    <Typography variant="body1">Landings</Typography>
+                  </AccordionSummary>
+                  <AccordionDetails>
+                    <Grid container spacing={2}>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
+                        <Typography variant="body1">Day</Typography>
+                      </Grid>
+                      <Grid size={isMedium ? 8 : 12}>
+                        <Controller
+                          name="landingsDay"
+                          control={methods.control}
+                          render={({ field: { onChange, value } }) => (
+                            <TextField
+                              disabled={state.isDisabled}
+                              error={
+                                methods.formState.errors.address ? true : false
                               }
-                            }}
-                            type="number"
-                            value={value}
-                          />
-                        )}
-                      />
-                    </Grid>
-                    <Grid alignItems="center" display="flex" size={4}>
-                      <Typography variant="body1">Night</Typography>
-                    </Grid>
-                    <Grid size={8}>
-                      <Controller
-                        name="landingsNight"
-                        control={methods.control}
-                        render={({ field: { onChange, value } }) => (
-                          <TextField
-                            disabled={state.isDisabled}
-                            error={
-                              methods.formState.errors.address ? true : false
-                            }
-                            fullWidth
-                            helperText={
-                              methods.formState.errors.address
-                                ? methods.formState.errors.address.message?.toString()
-                                : undefined
-                            }
-                            onChange={onChange}
-                            slotProps={{
-                              htmlInput: {
-                                step: 1
+                              fullWidth
+                              helperText={
+                                methods.formState.errors.address
+                                  ? methods.formState.errors.address.message?.toString()
+                                  : undefined
                               }
-                            }}
-                            type="number"
-                            value={value}
-                          />
-                        )}
-                      />
-                    </Grid>
-                  </Grid>
-                </AccordionDetails>
-              </Accordion>
-            </Grid>
-            <Grid size={12}>
-              <Accordion>
-                <AccordionSummary expandIcon={<Icon iconName={IconName.CHEVRON_DOWN} />}>
-                  Instrument
-                </AccordionSummary>
-                <AccordionDetails>
-                  <Grid container spacing={2}>
-                    <Grid alignItems="center" display="flex" size={4}>
-                      <Typography variant="body1">Actual</Typography>
-                    </Grid>
-                    <Grid size={8}>
-                      <Controller
-                        name="instrumentActual"
-                        control={methods.control}
-                        render={({ field: { onChange, value } }) => (
-                          <TextField
-                            disabled={state.isDisabled}
-                            error={
-                              methods.formState.errors.address ? true : false
-                            }
-                            fullWidth
-                            helperText={
-                              methods.formState.errors.address
-                                ? methods.formState.errors.address.message?.toString()
-                                : undefined
-                            }
-                            onChange={onChange}
-                            slotProps={{
-                              htmlInput: {
-                                step: 0.1
+                              onChange={onChange}
+                              slotProps={{
+                                htmlInput: {
+                                  step: 1
+                                }
+                              }}
+                              type="number"
+                              value={value}
+                            />
+                          )}
+                        />
+                      </Grid>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
+                        <Typography variant="body1">Night</Typography>
+                      </Grid>
+                      <Grid size={isMedium ? 8 : 12}>
+                        <Controller
+                          name="landingsNight"
+                          control={methods.control}
+                          render={({ field: { onChange, value } }) => (
+                            <TextField
+                              disabled={state.isDisabled}
+                              error={
+                                methods.formState.errors.address ? true : false
                               }
-                            }}
-                            type="number"
-                            value={value}
-                          />
-                        )}
-                      />
-                    </Grid>
-                    <Grid alignItems="center" display="flex" size={4}>
-                      <Typography variant="body1">Simulated</Typography>
-                    </Grid>
-                    <Grid size={8}>
-                      <Controller
-                        name="instrumentSimulated"
-                        control={methods.control}
-                        render={({ field: { onChange, value } }) => (
-                          <TextField
-                            disabled={state.isDisabled}
-                            error={
-                              methods.formState.errors.address ? true : false
-                            }
-                            fullWidth
-                            helperText={
-                              methods.formState.errors.address
-                                ? methods.formState.errors.address.message?.toString()
-                                : undefined
-                            }
-                            onChange={onChange}
-                            slotProps={{
-                              htmlInput: {
-                                step: 0.1
+                              fullWidth
+                              helperText={
+                                methods.formState.errors.address
+                                  ? methods.formState.errors.address.message?.toString()
+                                  : undefined
                               }
-                            }}
-                            type="number"
-                            value={value}
-                          />
-                        )}
-                      />
+                              onChange={onChange}
+                              slotProps={{
+                                htmlInput: {
+                                  step: 1
+                                }
+                              }}
+                              type="number"
+                              value={value}
+                            />
+                          )}
+                        />
+                      </Grid>
                     </Grid>
-                    <Grid alignItems="center" display="flex" size={4}>
-                      <Typography variant="body1">
-                        Instrument Approaches
-                      </Typography>
-                    </Grid>
-                    <Grid size={8}>
-                      <Controller
-                        name="instrumentApproaches"
-                        control={methods.control}
-                        render={({ field: { onChange, value } }) => (
-                          <TextField
-                            disabled={state.isDisabled}
-                            error={
-                              methods.formState.errors.address ? true : false
-                            }
-                            fullWidth
-                            helperText={
-                              methods.formState.errors.address
-                                ? methods.formState.errors.address.message?.toString()
-                                : undefined
-                            }
-                            onChange={onChange}
-                            slotProps={{
-                              htmlInput: {
-                                step: 1
+                  </AccordionDetails>
+                </Accordion>
+              </Grid>
+            }
+            {isAuthenticated &&
+              <Grid size={12}>
+                <Accordion>
+                  <AccordionSummary expandIcon={<Icon iconName={IconName.CHEVRON_DOWN} />}>
+                    Instrument
+                  </AccordionSummary>
+                  <AccordionDetails>
+                    <Grid container spacing={2}>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
+                        <Typography variant="body1">Actual</Typography>
+                      </Grid>
+                      <Grid size={isMedium ? 8 : 12}>
+                        <Controller
+                          name="instrumentActual"
+                          control={methods.control}
+                          render={({ field: { onChange, value } }) => (
+                            <TextField
+                              disabled={state.isDisabled}
+                              error={
+                                methods.formState.errors.address ? true : false
                               }
-                            }}
-                            type="number"
-                            value={value}
-                          />
-                        )}
-                      />
-                    </Grid>
-                    <Grid alignItems="center" display="flex" size={4}>
-                      <Typography variant="body1">Holds</Typography>
-                    </Grid>
-                    <Grid size={8}>
-                      <Controller
-                        name="instrumentHolds"
-                        control={methods.control}
-                        render={({ field: { onChange, value } }) => (
-                          <TextField
-                            disabled={state.isDisabled}
-                            error={
-                              methods.formState.errors.address ? true : false
-                            }
-                            fullWidth
-                            helperText={
-                              methods.formState.errors.address
-                                ? methods.formState.errors.address.message?.toString()
-                                : undefined
-                            }
-                            onChange={onChange}
-                            slotProps={{
-                              htmlInput: {
-                                step: 1
+                              fullWidth
+                              helperText={
+                                methods.formState.errors.address
+                                  ? methods.formState.errors.address.message?.toString()
+                                  : undefined
                               }
-                            }}
-                            type="number"
-                            value={value}
-                          />
-                        )}
-                      />
-                    </Grid>
-                    <Grid alignItems="center" display="flex" size={4}>
-                      <Typography variant="body1">Nav / Track</Typography>
-                    </Grid>
-                    <Grid size={8}>
-                      <Controller
-                        name="instrumentNavTrack"
-                        control={methods.control}
-                        render={({ field: { onChange, value } }) => (
-                          <TextField
-                            disabled={state.isDisabled}
-                            error={
-                              methods.formState.errors.address ? true : false
-                            }
-                            fullWidth
-                            helperText={
-                              methods.formState.errors.address
-                                ? methods.formState.errors.address.message?.toString()
-                                : undefined
-                            }
-                            onChange={onChange}
-                            slotProps={{
-                              htmlInput: {
-                                step: 1
+                              onChange={onChange}
+                              slotProps={{
+                                htmlInput: {
+                                  step: 0.1
+                                }
+                              }}
+                              type="number"
+                              value={value}
+                            />
+                          )}
+                        />
+                      </Grid>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
+                        <Typography variant="body1">Simulated</Typography>
+                      </Grid>
+                      <Grid size={isMedium ? 8 : 12}>
+                        <Controller
+                          name="instrumentSimulated"
+                          control={methods.control}
+                          render={({ field: { onChange, value } }) => (
+                            <TextField
+                              disabled={state.isDisabled}
+                              error={
+                                methods.formState.errors.address ? true : false
                               }
-                            }}
-                            type="number"
-                            value={value}
-                          />
-                        )}
-                      />
-                    </Grid>
-                  </Grid>
-                </AccordionDetails>
-              </Accordion>
-            </Grid>
-            <Grid size={12}>
-              <Accordion defaultExpanded>
-                <AccordionSummary expandIcon={<Icon iconName={IconName.CHEVRON_DOWN} />}>
-                  Type of Pilot Experience or Training
-                </AccordionSummary>
-                <AccordionDetails>
-                  <Grid container spacing={2}>
-                    <Grid alignItems="center" display="flex" size={4}>
-                      <Typography variant="body1">
-                        Ground Training Received
-                      </Typography>
-                    </Grid>
-                    <Grid size={8}>
-                      <Controller
-                        name="groundTrainingReceived"
-                        control={methods.control}
-                        render={({ field: { onChange, value } }) => (
-                          <TextField
-                            disabled={state.isDisabled}
-                            error={
-                              methods.formState.errors.address ? true : false
-                            }
-                            fullWidth
-                            helperText={
-                              methods.formState.errors.address
-                                ? methods.formState.errors.address.message?.toString()
-                                : undefined
-                            }
-                            onChange={onChange}
-                            slotProps={{
-                              htmlInput: {
-                                step: 0.1
+                              fullWidth
+                              helperText={
+                                methods.formState.errors.address
+                                  ? methods.formState.errors.address.message?.toString()
+                                  : undefined
                               }
-                            }}
-                            type="number"
-                            value={value}
-                          />
-                        )}
-                      />
-                    </Grid>
-                    <Grid alignItems="center" display="flex" size={4}>
-                      <Typography variant="body1">
-                        Flight Training Received
-                      </Typography>
-                    </Grid>
-                    <Grid size={8}>
-                      <Controller
-                        name="flightTrainingReceived"
-                        control={methods.control}
-                        render={({ field: { onChange, value } }) => (
-                          <TextField
-                            disabled={state.isDisabled}
-                            error={
-                              methods.formState.errors.address ? true : false
-                            }
-                            fullWidth
-                            helperText={
-                              methods.formState.errors.address
-                                ? methods.formState.errors.address.message?.toString()
-                                : undefined
-                            }
-                            onChange={onChange}
-                            slotProps={{
-                              htmlInput: {
-                                step: 0.1
+                              onChange={onChange}
+                              slotProps={{
+                                htmlInput: {
+                                  step: 0.1
+                                }
+                              }}
+                              type="number"
+                              value={value}
+                            />
+                          )}
+                        />
+                      </Grid>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
+                        <Typography variant="body1">
+                          Instrument Approaches
+                        </Typography>
+                      </Grid>
+                      <Grid size={isMedium ? 8 : 12}>
+                        <Controller
+                          name="instrumentApproaches"
+                          control={methods.control}
+                          render={({ field: { onChange, value } }) => (
+                            <TextField
+                              disabled={state.isDisabled}
+                              error={
+                                methods.formState.errors.address ? true : false
                               }
-                            }}
-                            type="number"
-                            value={value}
-                          />
-                        )}
-                      />
-                    </Grid>
-                    <Grid alignItems="center" display="flex" size={4}>
-                      <Typography variant="body1">Cross Country</Typography>
-                    </Grid>
-                    <Grid size={8}>
-                      <Controller
-                        name="crossCountry"
-                        control={methods.control}
-                        render={({ field: { onChange, value } }) => (
-                          <TextField
-                            disabled={state.isDisabled}
-                            error={
-                              methods.formState.errors.address ? true : false
-                            }
-                            fullWidth
-                            helperText={
-                              methods.formState.errors.address
-                                ? methods.formState.errors.address.message?.toString()
-                                : undefined
-                            }
-                            onChange={onChange}
-                            slotProps={{
-                              htmlInput: {
-                                step: 0.1
+                              fullWidth
+                              helperText={
+                                methods.formState.errors.address
+                                  ? methods.formState.errors.address.message?.toString()
+                                  : undefined
                               }
-                            }}
-                            type="number"
-                            value={value}
-                          />
-                        )}
-                      />
-                    </Grid>
-                    <Grid alignItems="center" display="flex" size={4}>
-                      <Typography variant="body1">Night</Typography>
-                    </Grid>
-                    <Grid size={8}>
-                      <Controller
-                        name="night"
-                        control={methods.control}
-                        render={({ field: { onChange, value } }) => (
-                          <TextField
-                            disabled={state.isDisabled}
-                            error={
-                              methods.formState.errors.address ? true : false
-                            }
-                            fullWidth
-                            helperText={
-                              methods.formState.errors.address
-                                ? methods.formState.errors.address.message?.toString()
-                                : undefined
-                            }
-                            onChange={onChange}
-                            slotProps={{
-                              htmlInput: {
-                                step: 0.1
+                              onChange={onChange}
+                              slotProps={{
+                                htmlInput: {
+                                  step: 1
+                                }
+                              }}
+                              type="number"
+                              value={value}
+                            />
+                          )}
+                        />
+                      </Grid>
+                      <Grid alignItems="center" display="flex" size={4}>
+                        <Typography variant="body1">Holds</Typography>
+                      </Grid>
+                      <Grid size={isMedium ? 8 : 12}>
+                        <Controller
+                          name="instrumentHolds"
+                          control={methods.control}
+                          render={({ field: { onChange, value } }) => (
+                            <TextField
+                              disabled={state.isDisabled}
+                              error={
+                                methods.formState.errors.address ? true : false
                               }
-                            }}
-                            type="number"
-                            value={value}
-                          />
-                        )}
-                      />
-                    </Grid>
-                    <Grid alignItems="center" display="flex" size={4}>
-                      <Typography variant="body1">Solo</Typography>
-                    </Grid>
-                    <Grid size={8}>
-                      <Controller
-                        name="solo"
-                        control={methods.control}
-                        render={({ field: { onChange, value } }) => (
-                          <TextField
-                            disabled={state.isDisabled}
-                            error={
-                              methods.formState.errors.address ? true : false
-                            }
-                            fullWidth
-                            helperText={
-                              methods.formState.errors.address
-                                ? methods.formState.errors.address.message?.toString()
-                                : undefined
-                            }
-                            onChange={onChange}
-                            slotProps={{
-                              htmlInput: {
-                                step: 0.1
+                              fullWidth
+                              helperText={
+                                methods.formState.errors.address
+                                  ? methods.formState.errors.address.message?.toString()
+                                  : undefined
                               }
-                            }}
-                            type="number"
-                            value={value}
-                          />
-                        )}
-                      />
-                    </Grid>
-                    <Grid alignItems="center" display="flex" size={4}>
-                      <Typography variant="body1">Pilot in Command</Typography>
-                    </Grid>
-                    <Grid size={8}>
-                      <Controller
-                        name="pilotInCommand"
-                        control={methods.control}
-                        render={({ field: { onChange, value } }) => (
-                          <TextField
-                            disabled={state.isDisabled}
-                            error={
-                              methods.formState.errors.address ? true : false
-                            }
-                            fullWidth
-                            helperText={
-                              methods.formState.errors.address
-                                ? methods.formState.errors.address.message?.toString()
-                                : undefined
-                            }
-                            onChange={onChange}
-                            slotProps={{
-                              htmlInput: {
-                                step: 0.1
+                              onChange={onChange}
+                              slotProps={{
+                                htmlInput: {
+                                  step: 1
+                                }
+                              }}
+                              type="number"
+                              value={value}
+                            />
+                          )}
+                        />
+                      </Grid>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
+                        <Typography variant="body1">Nav / Track</Typography>
+                      </Grid>
+                      <Grid size={isMedium ? 8 : 12}>
+                        <Controller
+                          name="instrumentNavTrack"
+                          control={methods.control}
+                          render={({ field: { onChange, value } }) => (
+                            <TextField
+                              disabled={state.isDisabled}
+                              error={
+                                methods.formState.errors.address ? true : false
                               }
-                            }}
-                            type="number"
-                            value={value}
-                          />
-                        )}
-                      />
+                              fullWidth
+                              helperText={
+                                methods.formState.errors.address
+                                  ? methods.formState.errors.address.message?.toString()
+                                  : undefined
+                              }
+                              onChange={onChange}
+                              slotProps={{
+                                htmlInput: {
+                                  step: 1
+                                }
+                              }}
+                              type="number"
+                              value={value}
+                            />
+                          )}
+                        />
+                      </Grid>
                     </Grid>
-                  </Grid>
-                </AccordionDetails>
-              </Accordion>
-            </Grid>
-            <Grid size={4}>
+                  </AccordionDetails>
+                </Accordion>
+              </Grid>
+            }
+            {isAuthenticated &&
+              <Grid size={12}>
+                <Accordion defaultExpanded>
+                  <AccordionSummary expandIcon={<Icon iconName={IconName.CHEVRON_DOWN} />}>
+                    Type of Pilot Experience or Training
+                  </AccordionSummary>
+                  <AccordionDetails>
+                    <Grid container spacing={2}>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
+                        <Typography variant="body1">
+                          Ground Training Received
+                        </Typography>
+                      </Grid>
+                      <Grid size={isMedium ? 8 : 12}>
+                        <Controller
+                          name="groundTrainingReceived"
+                          control={methods.control}
+                          render={({ field: { onChange, value } }) => (
+                            <TextField
+                              disabled={state.isDisabled}
+                              error={
+                                methods.formState.errors.address ? true : false
+                              }
+                              fullWidth
+                              helperText={
+                                methods.formState.errors.address
+                                  ? methods.formState.errors.address.message?.toString()
+                                  : undefined
+                              }
+                              onChange={onChange}
+                              slotProps={{
+                                htmlInput: {
+                                  step: 0.1
+                                }
+                              }}
+                              type="number"
+                              value={value}
+                            />
+                          )}
+                        />
+                      </Grid>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
+                        <Typography variant="body1">
+                          Flight Training Received
+                        </Typography>
+                      </Grid>
+                      <Grid size={isMedium ? 8 : 12}>
+                        <Controller
+                          name="flightTrainingReceived"
+                          control={methods.control}
+                          render={({ field: { onChange, value } }) => (
+                            <TextField
+                              disabled={state.isDisabled}
+                              error={
+                                methods.formState.errors.address ? true : false
+                              }
+                              fullWidth
+                              helperText={
+                                methods.formState.errors.address
+                                  ? methods.formState.errors.address.message?.toString()
+                                  : undefined
+                              }
+                              onChange={onChange}
+                              slotProps={{
+                                htmlInput: {
+                                  step: 0.1
+                                }
+                              }}
+                              type="number"
+                              value={value}
+                            />
+                          )}
+                        />
+                      </Grid>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
+                        <Typography variant="body1">Cross Country</Typography>
+                      </Grid>
+                      <Grid size={isMedium ? 8 : 12}>
+                        <Controller
+                          name="crossCountry"
+                          control={methods.control}
+                          render={({ field: { onChange, value } }) => (
+                            <TextField
+                              disabled={state.isDisabled}
+                              error={
+                                methods.formState.errors.address ? true : false
+                              }
+                              fullWidth
+                              helperText={
+                                methods.formState.errors.address
+                                  ? methods.formState.errors.address.message?.toString()
+                                  : undefined
+                              }
+                              onChange={onChange}
+                              slotProps={{
+                                htmlInput: {
+                                  step: 0.1
+                                }
+                              }}
+                              type="number"
+                              value={value}
+                            />
+                          )}
+                        />
+                      </Grid>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
+                        <Typography variant="body1">Night</Typography>
+                      </Grid>
+                      <Grid size={isMedium ? 8 : 12}>
+                        <Controller
+                          name="night"
+                          control={methods.control}
+                          render={({ field: { onChange, value } }) => (
+                            <TextField
+                              disabled={state.isDisabled}
+                              error={
+                                methods.formState.errors.address ? true : false
+                              }
+                              fullWidth
+                              helperText={
+                                methods.formState.errors.address
+                                  ? methods.formState.errors.address.message?.toString()
+                                  : undefined
+                              }
+                              onChange={onChange}
+                              slotProps={{
+                                htmlInput: {
+                                  step: 0.1
+                                }
+                              }}
+                              type="number"
+                              value={value}
+                            />
+                          )}
+                        />
+                      </Grid>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
+                        <Typography variant="body1">Solo</Typography>
+                      </Grid>
+                      <Grid size={isMedium ? 8 : 12}>
+                        <Controller
+                          name="solo"
+                          control={methods.control}
+                          render={({ field: { onChange, value } }) => (
+                            <TextField
+                              disabled={state.isDisabled}
+                              error={
+                                methods.formState.errors.address ? true : false
+                              }
+                              fullWidth
+                              helperText={
+                                methods.formState.errors.address
+                                  ? methods.formState.errors.address.message?.toString()
+                                  : undefined
+                              }
+                              onChange={onChange}
+                              slotProps={{
+                                htmlInput: {
+                                  step: 0.1
+                                }
+                              }}
+                              type="number"
+                              value={value}
+                            />
+                          )}
+                        />
+                      </Grid>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
+                        <Typography variant="body1">Pilot in Command</Typography>
+                      </Grid>
+                      <Grid size={isMedium ? 8 : 12}>
+                        <Controller
+                          name="pilotInCommand"
+                          control={methods.control}
+                          render={({ field: { onChange, value } }) => (
+                            <TextField
+                              disabled={state.isDisabled}
+                              error={
+                                methods.formState.errors.address ? true : false
+                              }
+                              fullWidth
+                              helperText={
+                                methods.formState.errors.address
+                                  ? methods.formState.errors.address.message?.toString()
+                                  : undefined
+                              }
+                              onChange={onChange}
+                              slotProps={{
+                                htmlInput: {
+                                  step: 0.1
+                                }
+                              }}
+                              type="number"
+                              value={value}
+                            />
+                          )}
+                        />
+                      </Grid>
+                    </Grid>
+                  </AccordionDetails>
+                </Accordion>
+              </Grid>
+            }
+            <Grid size={isMedium ? 4 : 12}>
               <Typography variant="body1">Notes</Typography>
             </Grid>
-            <Grid size={8}>
+            <Grid size={isMedium ? 8 : 12}>
               <Controller
                 name="notes"
                 control={methods.control}
diff --git a/app/src/components/logbook/ILogbookEntry.ts b/app/src/components/logbook/ILogbookEntry.ts
index a410e3f..428f57f 100644
--- a/app/src/components/logbook/ILogbookEntry.ts
+++ b/app/src/components/logbook/ILogbookEntry.ts
@@ -3,6 +3,7 @@ export interface ILogbookEntry {
   rowKey: string;
   id: string;
   pilotId: string;
+  pilotName: string;
   date: string;
   aircraftMakeModel: string;
   aircraftIdentity: string;
@@ -24,4 +25,5 @@ export interface ILogbookEntry {
   night: number | null;
   solo: number | null;
   pilotInCommand: number | null;
+  notes: string;
 }
diff --git a/app/src/components/logbook/Logbook.tsx b/app/src/components/logbook/Logbook.tsx
index af5a54f..9387133 100644
--- a/app/src/components/logbook/Logbook.tsx
+++ b/app/src/components/logbook/Logbook.tsx
@@ -10,7 +10,9 @@ import {
   IconName,
   Spinner,
   Table,
-  Typography
+  theme,
+  Typography,
+  useMediaQuery
 } from '@noahspan/noahspan-components';
 import { initialState, reducer } from './reducer';
 import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
@@ -21,12 +23,14 @@ import { FormMode } from '../../enums/formMode';
 import ActionMenu from '../actionMenu/ActionMenu';
 import ConfirmationDialog from '../confirmationDialog/ConfirmationDialog';
 import { ILogbookEntry } from './ILogbookEntry';
+import LogbookCard from '../logbookCard/LogbookCard';
 
 const Logbook: React.FC<unknown> = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const httpClient: AxiosInstance = useHttpClient();
   const isAuthenticated = useIsAuthenticated();
   const { getAccessToken } = useAccessToken();
+  const isMedium = useMediaQuery(theme.breakpoints.up('md'));
 
   const getLogbookEntries = async () => {
     try {
@@ -405,10 +409,10 @@ const Logbook: React.FC<unknown> = () => {
   return (
     <Box sx={{ margin: '20px' }}>
       <Grid container spacing={2}>
-        <Grid size={11}>
+        <Grid size={isMedium ? 11 : 6}>
           <Typography variant="h4">Logbook</Typography>
         </Grid>
-        <Grid display="flex" justifyContent="right" size={1}>
+        <Grid display="flex" justifyContent="right" size={isMedium ? 1 : 6}>
           {isAuthenticated &&
             <Button
               onClick={() => onOpenCloseEntryForm(FormMode.ADD)}
@@ -435,9 +439,12 @@ const Logbook: React.FC<unknown> = () => {
         )}
         {!state.isLoading && (
           <Grid size={12}>
-            {state.entries.length > 0 && (
+            {isMedium && state.entries.length > 0 && (
               <Table columns={isAuthenticated ? authColumns : unauthColumns} data={state.entries} />
             )}
+            {!isMedium && state.entries.length > 0 &&
+              <LogbookCard logs={state.entries} onDelete={onDeleteEntry} onOpenCloseForm={onOpenCloseEntryForm} />
+            }
           </Grid>
         )}
         {state.isLoading && !state.alert && (
diff --git a/app/src/components/logbookCard/LogbookCard.tsx b/app/src/components/logbookCard/LogbookCard.tsx
new file mode 100644
index 0000000..a8b9c07
--- /dev/null
+++ b/app/src/components/logbookCard/LogbookCard.tsx
@@ -0,0 +1,74 @@
+import { Card, CardContent, CardHeader, Grid, Typography } from "@noahspan/noahspan-components";
+import { LogbookCardProps } from "./LogbookCardProps.interface";
+import { useEffect } from "react";
+import ActionMenu from "../actionMenu/ActionMenu";
+
+
+const LogbookCard = ({ logs, onDelete, onOpenCloseForm }: LogbookCardProps) => {  
+  return (
+    <Grid container spacing={2}>
+      {logs.map((log) => {
+        return (
+          <Grid size={12}>
+            <Card key={log.rowKey}>
+              <CardHeader
+                action={<ActionMenu id={log.rowKey} onDelete={onDelete} onOpenCloseForm={onOpenCloseForm} />}
+                subheader={log.pilotName}
+                title={log.date}
+                slotProps={{
+                  subheader: {
+                    fontSize: '16px'
+                  },
+                  title: {
+                    fontSize: '24px',
+                  }
+                }}
+              />
+              <CardContent>
+                <Grid container spacing={1}>
+                  <Grid size={12}>
+                    <Typography variant="subtitle2">Aircraft Make and Model</Typography>
+                  </Grid>
+                  <Grid size={12}>
+                    <Typography variant="body1">{log.aircraftMakeModel}</Typography>
+                  </Grid>
+                  <Grid size={12}>
+                    <Typography variant="subtitle2">Route From</Typography>
+                  </Grid>
+                  <Grid size={12}>
+                    <Typography variant="body1">{log.routeFrom}</Typography>
+                  </Grid>
+                  <Grid size={12}>
+                    <Typography variant="subtitle2">Route To</Typography>
+                  </Grid>
+                  <Grid size={12}>
+                    <Typography variant="body1">{log.routeTo}</Typography>
+                  </Grid>
+                  <Grid size={12}>
+                    <Typography variant="subtitle2">Duration Of Flight</Typography>
+                  </Grid>
+                  <Grid size={12}>
+                    <Typography variant="body1">{log.durationOfFlight}</Typography>
+                  </Grid>
+                  {log.notes &&
+                    <>
+                      <Grid size={12}>
+                        <Typography variant="subtitle2">Notes</Typography>
+                      </Grid>
+                      <Grid size={12}>
+                        <Typography variant="body1">{log.notes}</Typography>
+                      </Grid>
+                    </>
+                  }
+                </Grid>
+                
+              </CardContent>
+            </Card>
+          </Grid>
+        )
+      })}
+    </Grid>
+  )
+}
+
+export default LogbookCard;
\ No newline at end of file
diff --git a/app/src/components/logbookCard/LogbookCardProps.interface.ts b/app/src/components/logbookCard/LogbookCardProps.interface.ts
new file mode 100644
index 0000000..5f57c21
--- /dev/null
+++ b/app/src/components/logbookCard/LogbookCardProps.interface.ts
@@ -0,0 +1,8 @@
+import { FormMode } from "../../enums/formMode";
+import { ILogbookEntry } from "../logbook/ILogbookEntry";
+
+export interface LogbookCardProps {
+  logs: ILogbookEntry[];
+  onDelete: (entryId: string) => void;
+  onOpenCloseForm: (formMode: FormMode, id: string) => void;
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b672219..8a9ccca 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -149,8 +149,8 @@ importers:
         specifier: ^3.0.1
         version: 3.0.1(@azure/msal-browser@4.0.1)(react@18.3.1)
       '@noahspan/noahspan-components':
-        specifier: ^1.4.0
-        version: 1.4.0(@mui/system@6.4.6(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(less@4.2.2)(moment@2.30.1)(postcss@8.5.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.3(prettier@3.2.5))(typescript@5.7.3)(webpack@5.97.1(esbuild@0.18.20))
+        specifier: ^1.5.1
+        version: 1.5.1(@mui/system@6.4.6(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(less@4.2.2)(moment@2.30.1)(postcss@8.5.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.3(prettier@3.2.5))(typescript@5.7.3)(webpack@5.97.1(esbuild@0.18.20))
       axios:
         specifier: ^1.7.2
         version: 1.7.9
@@ -1564,8 +1564,8 @@ packages:
       '@nestjs/common': ^9.0.0 || ^10.0.0
       '@nestjs/core': ^9.0.0 || ^10.0.0
 
-  '@noahspan/noahspan-components@1.4.0':
-    resolution: {integrity: sha512-Urq/hHr3KCbmnKO6NhruZQhJnFjiycQ8yReV/JFoxNdlN7WTWGIGEca9MnqNH11WmRK+RtecU4ByehrHqqqK3Q==}
+  '@noahspan/noahspan-components@1.5.1':
+    resolution: {integrity: sha512-GDowrEyxP/uZ1esrJVXWNKCzmG8s/OHra7JVudBKfQhDzxWE9o+RDqIHhX78YwbMsE1cu4BEvNAM8oa6jTaAuQ==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       react: ^18.2.0
@@ -7289,7 +7289,7 @@ snapshots:
       - stream-browserify
       - supports-color
 
-  '@noahspan/noahspan-components@1.4.0(@mui/system@6.4.6(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(less@4.2.2)(moment@2.30.1)(postcss@8.5.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.3(prettier@3.2.5))(typescript@5.7.3)(webpack@5.97.1(esbuild@0.18.20))':
+  '@noahspan/noahspan-components@1.5.1(@mui/system@6.4.6(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1))(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(less@4.2.2)(moment@2.30.1)(postcss@8.5.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.3(prettier@3.2.5))(typescript@5.7.3)(webpack@5.97.1(esbuild@0.18.20))':
     dependencies:
       '@emotion/react': 11.14.0(@types/react@18.3.18)(react@18.3.1)
       '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@18.3.18)(react@18.3.1))(@types/react@18.3.18)(react@18.3.1)