diff --git a/api/src/app.controller.ts b/api/src/app.controller.ts
index b6aec36..22b27b5 100644
--- a/api/src/app.controller.ts
+++ b/api/src/app.controller.ts
@@ -7,10 +7,12 @@ import {
 import { FeatureFlagValue } from '@azure/app-configuration';
 import { Public } from '@noahspan/noahspan-modules';
 import { Person } from '@microsoft/microsoft-graph-types';
+import { AppService } from './app.service';
 
 @Controller()
 export class AppController {
   constructor(
+    private readonly appService: AppService,
     private readonly appConfigService: AppConfigService,
     private readonly msGraphService: MsGraphService
   ) {}
@@ -66,9 +68,10 @@ export class AppController {
     @Query('search') search: any
   ): Promise<Person[]> {
     try {
+      const accessToken: string = headers.authorization.replace('Bearer ', '');
       const personSearchResults: Person[] =
-        await getPersonSearshResults(search);
-
+        await this.appService.getPersonSearchResults(accessToken, search);
+      console.log(personSearchResults);
       return personSearchResults;
     } catch (error) {
       return error;
diff --git a/api/src/app.service.ts b/api/src/app.service.ts
index 975acd0..75b8c72 100644
--- a/api/src/app.service.ts
+++ b/api/src/app.service.ts
@@ -10,18 +10,35 @@ export class AppService {
     return 'Hello World!';
   }
 
-  async getPersonSearchResults(accessToken: string): Person[] {
-    const graphToken: string = await this.msGraphService.getMsGraphAuth(
-      accessToken,
-      ['user.read']
-    );
-    console.log(graphToken);
-    const client: MsGraphClient =
-      await this.msGraphService.getMsGraphClientDelegated(graphToken);
-    const results: any = await client.api(`me/people/?$search=${search}`).get();
-    console.log(results);
-    const personResults: Person[] = results.values ? results.values : [];
+  async getPersonSearchResults(
+    accessToken: string,
+    search: string
+  ): Promise<Person[]> {
+    try {
+      const graphToken: string = await this.msGraphService.getMsGraphAuth(
+        accessToken,
+        ['user.read']
+      );
+      const client: MsGraphClient =
+        await this.msGraphService.getMsGraphClientDelegated(graphToken);
+      const results: any = await client
+        .api(`me/people/?$search=${search}`)
+        .get();
+      let personResults: Person[];
 
-    return personResults;
+      if (results.value) {
+        personResults = results.value.filter((result: Person) => {
+          if (result.userPrincipalName !== null) {
+            return result;
+          }
+        });
+      } else {
+        personResults = [];
+      }
+
+      return personResults;
+    } catch (error) {
+      throw new Error(error);
+    }
   }
 }
diff --git a/app/package.json b/app/package.json
index 5a03cbb..1ae382e 100644
--- a/app/package.json
+++ b/app/package.json
@@ -16,7 +16,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@noahspan/noahspan-components": "^0.4.5",
+    "@noahspan/noahspan-components": "^0.4.9",
     "axios": "^1.7.2",
     "framer-motion": "^11.1.7",
     "react": "^18.2.0",
diff --git a/app/src/components/pilotForm/PilotForm.tsx b/app/src/components/pilotForm/PilotForm.tsx
index 5f87f83..169e799 100644
--- a/app/src/components/pilotForm/PilotForm.tsx
+++ b/app/src/components/pilotForm/PilotForm.tsx
@@ -4,33 +4,42 @@ import {
   Accordion,
   AccordionBody,
   AccordionHeader,
+  Button,
   ChevronDownIcon,
   ChevronUpIcon,
   DatePicker,
+  Drawer,
+  DrawerBody,
+  DrawerHeader,
+  DrawerFooter,
   Input,
   Option,
   PeoplePicker,
-  Select
+  Select,
+  Typography
 } from '@noahspan/noahspan-components';
 import PilotFormCertificates from '../pilotFormCertificates/PilotFormCertificates';
 import PilotFormEndorsements from '../pilotFormEndorsements/PilotFormEndorsements';
-// import { Person } from '@microsoft/microsoft-graph-types';
+import { Person } from '@microsoft/microsoft-graph-types';
 import { AxiosInstance, AxiosResponse } from 'axios';
 import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
 import { useAccessToken } from '../../hooks/accessToken/UseAcessToken';
 
-const PilotForm: React.FC<unknown> = () => {
+interface PilotFormProps {
+  isDrawerOpen: boolean;
+  onOpenCloseDrawer: () => void;
+}
+
+const PilotForm: React.FC<PilotFormProps> = ({
+  isDrawerOpen,
+  onOpenCloseDrawer
+}: PilotFormProps) => {
   const httpClient: AxiosInstance = useHttpClient();
-  const [open, setOpen] = useState<number>(0);
-  const [peoplePickerResults, setPeoplePickerResults] = useState<any[]>([]);
+  const [peoplePickerResults, setPeoplePickerResults] = useState<Person[]>([]);
   const [isPeoplePickerLoading, setIsPeoplePickerLoading] =
     useState<boolean>(false);
   const { getAccessToken } = useAccessToken();
-  const handleOpen = (value: number) => {
-    setOpen(open === value ? 0 : value);
-  };
   const methods = useForm();
-  const { control, handleSubmit } = methods;
 
   const onSubmit = (data: unknown) => {
     console.log(data);
@@ -42,6 +51,8 @@ const PilotForm: React.FC<unknown> = () => {
     setIsPeoplePickerLoading(true);
 
     try {
+      methods.setValue('name', event.target.value);
+
       const searchString: string = event.target.value;
       const accessToken: string = await getAccessToken();
       const response: AxiosResponse = await httpClient.get(
@@ -62,24 +73,33 @@ const PilotForm: React.FC<unknown> = () => {
   };
 
   return (
-    <FormProvider {...methods}>
-      <form className="m-10" onSubmit={handleSubmit(onSubmit)}>
-        <Accordion
-          open={open === 1}
-          icon={open === 1 ? <ChevronDownIcon /> : <ChevronUpIcon />}
-        >
-          <AccordionHeader onClick={() => handleOpen(1)}>Info</AccordionHeader>
-          <AccordionBody>
+    <Drawer
+      open={isDrawerOpen}
+      placement="right"
+      size={1000}
+      data-testid="pilot-drawer"
+    >
+      <FormProvider {...methods}>
+        <DrawerHeader text="Add Pilot" onClose={onOpenCloseDrawer} />
+        <form onSubmit={methods.handleSubmit(onSubmit)}>
+          <DrawerBody>
             <div className="grid grid-cols-1 gap-4">
+              <div className="col-span-1">
+                <Typography variant="h5">Info</Typography>
+                <hr className="my-3" />
+              </div>
               <div className="col-span-1">
                 <Controller
                   name="name"
-                  control={control}
-                  render={() => (
+                  control={methods.control}
+                  render={({ field: { disabled, value } }) => (
                     <PeoplePicker
                       results={peoplePickerResults}
                       inputProps={{
-                        onChange: handlePeoplePickerOnChange
+                        disabled: disabled,
+                        label: 'Name',
+                        onChange: (event) => handlePeoplePickerOnChange(event),
+                        value: value
                       }}
                       loading={isPeoplePickerLoading}
                     />
@@ -89,115 +109,115 @@ const PilotForm: React.FC<unknown> = () => {
               <div className="col-span-1">
                 <Controller
                   name="address"
-                  control={control}
-                  render={({ field }) => (
-                    <Input
-                      disabled={field.disabled}
-                      label="Address"
-                      value={field.value}
-                    />
-                  )}
+                  control={methods.control}
+                  render={({ field }) => <Input label="Address" {...field} />}
                 />
               </div>
               <div className="col-span-1">
                 <Controller
                   name="city"
-                  control={control}
-                  render={({ field }) => (
-                    <Input
-                      disabled={field.disabled}
-                      label="City"
-                      value={field.value}
-                    />
-                  )}
+                  control={methods.control}
+                  render={({ field }) => <Input label="City" {...field} />}
                 />
               </div>
               <div className="col-span-1">
                 <Controller
                   name="state"
-                  control={control}
-                  render={({ field }) => (
-                    <Input
-                      disabled={field.disabled}
-                      label="State"
-                      value={field.value}
-                    />
-                  )}
+                  control={methods.control}
+                  render={({ field }) => <Input label="State" {...field} />}
                 />
               </div>
               <div className="col-span-1">
                 <Controller
                   name="postalCode"
-                  control={control}
+                  control={methods.control}
                   render={({ field }) => (
-                    <Input
-                      disabled={field.disabled}
-                      label="Postal Code"
-                      value={field.value}
-                    />
-                  )}
-                />
-              </div>
-            </div>
-          </AccordionBody>
-        </Accordion>
-        <Accordion
-          open={open === 2}
-          icon={open === 2 ? <ChevronDownIcon /> : <ChevronUpIcon />}
-        >
-          <AccordionHeader onClick={() => handleOpen(2)}>
-            Certificates
-          </AccordionHeader>
-          <AccordionBody>
-            <PilotFormCertificates certificates={[]} />
-          </AccordionBody>
-        </Accordion>
-        <Accordion
-          open={open === 3}
-          icon={open === 3 ? <ChevronDownIcon /> : <ChevronUpIcon />}
-        >
-          <AccordionHeader onClick={() => handleOpen(3)}>
-            Endorsements
-          </AccordionHeader>
-          <AccordionBody>
-            <PilotFormEndorsements endorsements={[]} />
-          </AccordionBody>
-        </Accordion>
-        <Accordion
-          open={open === 4}
-          icon={open === 4 ? <ChevronDownIcon /> : <ChevronUpIcon />}
-        >
-          <AccordionHeader onClick={() => handleOpen(4)}>
-            Medical
-          </AccordionHeader>
-          <AccordionBody>
-            <div className="grid grid-cols-1 gap-4">
-              <div className="col-span1">
-                <Controller
-                  name="medicalClass"
-                  control={control}
-                  render={({ field }) => (
-                    <Select label="Class" value={field.value}>
-                      <Option>First</Option>
-                      <Option>Second</Option>
-                      <Option>Third</Option>
-                      <Option>Basic Med</Option>
-                    </Select>
+                    <Input label="Postal Code" {...field} />
                   )}
                 />
               </div>
+              <div className="col-span-1">
+                <Controller
+                  name="email"
+                  control={methods.control}
+                  render={({ field }) => <Input label="Email" {...field} />}
+                />
+              </div>
+              <div className="col-span-1">
+                <Controller
+                  name="phone"
+                  control={methods.control}
+                  render={({ field }) => <Input label="Phone" {...field} />}
+                />
+              </div>
+              <div className="col-span-1">
+                <Typography variant="h5">Certificates</Typography>
+                <hr className="my-3" />
+              </div>
+              <PilotFormCertificates certificates={[]} />
+              <div className="col-span-1">
+                <Typography variant="h5">Endorsements</Typography>
+                <hr className="my-3" />
+              </div>
+              <PilotFormEndorsements endorsements={[]} />
+              <div className="col-span-1">
+                <Typography variant="h5">Medical</Typography>
+                <hr className="my-3" />
+              </div>
+              <div className="col-span1">
+                <Controller
+                  name="medicalClass"
+                  control={methods.control}
+                  render={({ field }) => {
+                    return (
+                      <Select label="Class" {...field}>
+                        <Option key="first" value="First">
+                          First
+                        </Option>
+                        <Option key="second" value="Second">
+                          Second
+                        </Option>
+                        <Option key="third" value="Third">
+                          Third
+                        </Option>
+                        <Option key="basicMed" value="Basic Med">
+                          Basic Med
+                        </Option>
+                      </Select>
+                    );
+                  }}
+                />
+              </div>
               <div className="col-span-1">
                 <Controller
                   name="medicalExpiration"
-                  control={control}
+                  control={methods.control}
                   render={() => <DatePicker />}
                 />
               </div>
             </div>
-          </AccordionBody>
-        </Accordion>
-      </form>
-    </FormProvider>
+          </DrawerBody>
+          <DrawerFooter>
+            <div className="flex gap-2 justify-end justify-self-center">
+              <div>
+                <Button
+                  variant="outlined"
+                  onClick={onOpenCloseDrawer}
+                  data-testid="pilot-drawer-cancel-button"
+                >
+                  Cancel
+                </Button>
+              </div>
+              <div>
+                <Button variant="filled" type="submit">
+                  Save
+                </Button>
+              </div>
+            </div>
+          </DrawerFooter>
+        </form>
+      </FormProvider>
+    </Drawer>
   );
 };
 
diff --git a/app/src/components/pilotFormCertificates/PilotFormCertificates.tsx b/app/src/components/pilotFormCertificates/PilotFormCertificates.tsx
index bd1c1f1..560cff1 100644
--- a/app/src/components/pilotFormCertificates/PilotFormCertificates.tsx
+++ b/app/src/components/pilotFormCertificates/PilotFormCertificates.tsx
@@ -59,7 +59,7 @@ const PilotFormCertificates: React.FC<IPilotFormCertificates> = ({
               <Controller
                 name={`certificates.${index}.number`}
                 control={control}
-                render={() => {
+                render={({ field }) => {
                   return <Input label="Number" {...field} />;
                 }}
               />
@@ -68,7 +68,7 @@ const PilotFormCertificates: React.FC<IPilotFormCertificates> = ({
               <Controller
                 name={`certificates.${index}.dateOfIssue`}
                 control={control}
-                render={() => {
+                render={({ field }) => {
                   return <DatePicker />;
                 }}
               />
diff --git a/app/src/components/pilotFormEndorsements/PilotFormEndorsements.tsx b/app/src/components/pilotFormEndorsements/PilotFormEndorsements.tsx
index 50b4fa7..2917329 100644
--- a/app/src/components/pilotFormEndorsements/PilotFormEndorsements.tsx
+++ b/app/src/components/pilotFormEndorsements/PilotFormEndorsements.tsx
@@ -23,7 +23,7 @@ const PilotFormEndorsements: React.FC<IPilotFormEndorsements> = ({
   });
 
   return (
-    <div className="grid grid-cols-4 gap-4">
+    <div className="grid grid-cols-3 gap-4">
       {fields.map((field, index) => {
         return (
           <>
@@ -35,16 +35,16 @@ const PilotFormEndorsements: React.FC<IPilotFormEndorsements> = ({
                 render={({ field }) => {
                   return (
                     <Select label="Type" {...field}>
-                      <Option key="student" value="Student">
+                      <Option key="complex" value="Complex">
                         Complex
                       </Option>
-                      <Option key="private" value="Private">
+                      <Option key="highPerformance" value="High Performance">
                         High Performance
                       </Option>
-                      <Option key="instrument" value="Instrument">
+                      <Option key="highAltitude" value="High Altitude">
                         High Altitude
                       </Option>
-                      <Option key="recreational" value="Recreational">
+                      <Option key="tailwheel" value="Tailwheel">
                         Tailwheel
                       </Option>
                     </Select>
@@ -52,15 +52,6 @@ const PilotFormEndorsements: React.FC<IPilotFormEndorsements> = ({
                 }}
               />
             </div>
-            <div>
-              <Controller
-                name={`endorsements.${index}.number`}
-                control={control}
-                render={({ field }) => {
-                  return <Input label="Number" {...field} />;
-                }}
-              />
-            </div>
             <div>
               <Controller
                 name={`endorsements.${index}.dateOfIssue`}
diff --git a/app/src/components/pilots/Pilots.tsx b/app/src/components/pilots/Pilots.tsx
index f70cdb2..f04abfa 100644
--- a/app/src/components/pilots/Pilots.tsx
+++ b/app/src/components/pilots/Pilots.tsx
@@ -1,14 +1,6 @@
 import { useState } from 'react';
 import PilotForm from '../pilotForm/PilotForm';
-import {
-  Button,
-  DatePicker,
-  Drawer,
-  DrawerBody,
-  DrawerHeader,
-  DrawerFooter,
-  PlusIcon
-} from '@noahspan/noahspan-components';
+import { Button, PlusIcon } from '@noahspan/noahspan-components';
 
 const Pilots: React.FC<unknown> = () => {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
@@ -30,37 +22,11 @@ const Pilots: React.FC<unknown> = () => {
           <PlusIcon size="lg" />
           Add Pilot
         </Button>
-        <DatePicker />
-        <Drawer
-          open={isDrawerOpen}
-          placement="right"
-          size={1000}
-          data-testid="pilot-drawer"
-        >
-          <DrawerHeader text="Add Pilot" onClose={onOpenCloseDrawer} />
 
-          <DrawerBody>
-            <PilotForm />
-          </DrawerBody>
-          <DrawerFooter>
-            <div className="flex gap-2 justify-end justify-self-center">
-              <div>
-                <Button
-                  variant="outlined"
-                  onClick={onOpenCloseDrawer}
-                  data-testid="pilot-drawer-cancel-button"
-                >
-                  Cancel
-                </Button>
-              </div>
-              <div>
-                <Button variant="filled" onClick={onOpenCloseDrawer}>
-                  Save
-                </Button>
-              </div>
-            </div>
-          </DrawerFooter>
-        </Drawer>
+        <PilotForm
+          isDrawerOpen={isDrawerOpen}
+          onOpenCloseDrawer={onOpenCloseDrawer}
+        />
       </div>
     </div>
   );
diff --git a/package-lock.json b/package-lock.json
index b0ba1f5..9bdb70c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -74,7 +74,7 @@
         "@fortawesome/free-regular-svg-icons": "^6.5.2",
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.2",
-        "@noahspan/noahspan-components": "^0.4.5",
+        "@noahspan/noahspan-components": "^0.4.9",
         "axios": "^1.7.2",
         "framer-motion": "^11.1.7",
         "react": "^18.2.0",
@@ -3004,8 +3004,7 @@
     "node_modules/@microsoft/microsoft-graph-types": {
       "version": "2.40.0",
       "resolved": "https://registry.npmjs.org/@microsoft/microsoft-graph-types/-/microsoft-graph-types-2.40.0.tgz",
-      "integrity": "sha512-1fcPVrB/NkbNcGNfCy+Cgnvwxt6/sbIEEFgZHFBJ670zYLegENYJF8qMo7x3LqBjWX2/Eneq5BVVRCLTmlJN+g==",
-      "dev": true
+      "integrity": "sha512-1fcPVrB/NkbNcGNfCy+Cgnvwxt6/sbIEEFgZHFBJ670zYLegENYJF8qMo7x3LqBjWX2/Eneq5BVVRCLTmlJN+g=="
     },
     "node_modules/@motionone/animation": {
       "version": "10.18.0",
@@ -3386,9 +3385,9 @@
       "link": true
     },
     "node_modules/@noahspan/noahspan-components": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/@noahspan/noahspan-components/-/noahspan-components-0.4.5.tgz",
-      "integrity": "sha512-OT2b0foCAhmoSBVlvwE/CCLuho+vii2LfCLWQxF+jZZH9/cA50uxkriJ0t25psNVhbKzsHurqcw9KkBPojJBUA==",
+      "version": "0.4.9",
+      "resolved": "https://registry.npmjs.org/@noahspan/noahspan-components/-/noahspan-components-0.4.9.tgz",
+      "integrity": "sha512-Cr+cQZkCjY2JQokQrhbgCTXdD4vzFHRL4t9D5sutdouHFJAsW+vx1Qj35EyZ1quOwaisLbmMc/UqJgZldcFPaw==",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
         "@fortawesome/free-brands-svg-icons": "^6.5.2",
@@ -3396,6 +3395,7 @@
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
         "@material-tailwind/react": "^2.1.9",
+        "@microsoft/microsoft-graph-types": "^2.40.0",
         "@tanstack/react-table": "^8.17.3",
         "date-fns": "^3.6.0",
         "framer-motion": "^11.1.9",