diff --git a/api/Schema/Queries/UserQuery.cs b/api/Schema/Queries/UserQuery.cs
index 21b983d3..2a431a92 100644
--- a/api/Schema/Queries/UserQuery.cs
+++ b/api/Schema/Queries/UserQuery.cs
@@ -27,5 +27,15 @@ public async Task<List<User>> GetAllESLUsers([Service] UserService _userService,
         {
             return await _userService.ESLUsers(exceptUserId);
         }
+
+        public async Task<List<Position>> GetAllPositions()
+        {
+            return await _userService.GetAllPositions();
+        }
+
+        public async Task<List<Role>> GetAllRoles()
+        {
+            return await _userService.GetAllRoles();
+        }
     }
 }
diff --git a/api/Services/UserService.cs b/api/Services/UserService.cs
index 62284864..92b5117f 100644
--- a/api/Services/UserService.cs
+++ b/api/Services/UserService.cs
@@ -56,5 +56,21 @@ public async Task<List<User>> ESLUsers(int? exceptUserId)
                     .ToListAsync();
             }
         }
+
+        public async Task<List<Position>> GetAllPositions()
+        {
+            using (HrisContext context = _contextFactory.CreateDbContext())
+            {
+                return await context.Positions.ToListAsync();
+            }
+        }
+
+        public async Task<List<Role>> GetAllRoles()
+        {
+            using (HrisContext context = _contextFactory.CreateDbContext())
+            {
+                return await context.Roles.ToListAsync();
+            }
+        }
     }
 }
diff --git a/client/src/components/molecules/AddNewEmployeeModal/index.tsx b/client/src/components/molecules/AddNewEmployeeModal/index.tsx
index 3154ed13..73f7274a 100644
--- a/client/src/components/molecules/AddNewEmployeeModal/index.tsx
+++ b/client/src/components/molecules/AddNewEmployeeModal/index.tsx
@@ -1,16 +1,23 @@
-import { useForm } from 'react-hook-form'
-import { yupResolver } from '@hookform/resolvers/yup'
+import toast from 'react-hot-toast'
+import isEmpty from 'lodash/isEmpty'
+import ReactSelect from 'react-select'
 import React, { FC, useEffect } from 'react'
-import { User, Save, Mail, Award, RefreshCcw, X } from 'react-feather'
+import { yupResolver } from '@hookform/resolvers/yup'
+import { User, Save, Mail, RefreshCcw, X } from 'react-feather'
+import { Controller, SubmitHandler, useForm } from 'react-hook-form'
 
 import TextField from './../TextField'
 import Input from '~/components/atoms/Input'
+import useEmployee from '~/hooks/useEmployee'
+import { queryClient } from '~/lib/queryClient'
+import useUserQuery from '~/hooks/useUserQuery'
 import SpinnerIcon from '~/utils/icons/SpinnerIcon'
 import { NewEmployeeSchema } from '~/utils/validation'
 import Button from '~/components/atoms/Buttons/ButtonAction'
 import { customStyles } from '~/utils/customReactSelectStyles'
 import ModalTemplate from '~/components/templates/ModalTemplate'
 import { NewEmployeeFormValues } from '~/utils/types/formValues'
+import { IEmployeeInput } from '~/utils/interfaces/employeeInterface'
 import ModalHeader from '~/components/templates/ModalTemplate/ModalHeader'
 import ModalFooter from '~/components/templates/ModalTemplate/ModalFooter'
 
@@ -20,8 +27,18 @@ type Props = {
 }
 
 const AddNewEmployeeModal: FC<Props> = ({ isOpen, closeModal }): JSX.Element => {
+  // USER HOOKS -> Get Positions, Get Roles
+  const { getAllPositionQuery, getAllRoleQuery } = useUserQuery()
+  const positionData = getAllPositionQuery()
+  const roleData = getAllRoleQuery()
+
+  // EMPLOYEE HOOKS
+  const { handleAddNewEmployeeMutation } = useEmployee()
+  const addEmployeeMutation = handleAddNewEmployeeMutation()
+
   const {
     reset,
+    control,
     register,
     handleSubmit,
     formState: { errors, isSubmitting }
@@ -31,12 +48,27 @@ const AddNewEmployeeModal: FC<Props> = ({ isOpen, closeModal }): JSX.Element =>
   })
 
   // This will handle Submit and Save New Overtime
-  const handleSave = async (data: NewEmployeeFormValues): Promise<void> => {
+  const handleSave: SubmitHandler<NewEmployeeFormValues> = async (data): Promise<void> => {
     return await new Promise((resolve) => {
-      setTimeout(() => {
-        alert(JSON.stringify({ ...data }, null, 2))
-        resolve()
-      }, 2000)
+      const request: IEmployeeInput = {
+        email: data.email,
+        firstName: data.first_name,
+        middleName: data.middle_name ?? '',
+        lastName: data.last_name,
+        positionId: parseInt(data.position.value),
+        roleId: parseInt(data.role.value)
+      }
+
+      addEmployeeMutation.mutate(request, {
+        onSuccess: () => {
+          // TODO: Please Specify the query key of all Employee
+          void queryClient.invalidateQueries().then(() => {
+            toast.success('Added New Employee Successfully!')
+            resolve()
+            closeModal()
+          })
+        }
+      })
     })
   }
 
@@ -58,9 +90,14 @@ const AddNewEmployeeModal: FC<Props> = ({ isOpen, closeModal }): JSX.Element =>
   }, [isOpen])
 
   const handleReset = (): void => {
+    const emptySelect = {
+      value: '',
+      label: ''
+    }
     reset({
       email: '',
-      position: '',
+      position: emptySelect,
+      role: emptySelect,
       first_name: '',
       middle_name: '',
       last_name: ''
@@ -107,18 +144,73 @@ const AddNewEmployeeModal: FC<Props> = ({ isOpen, closeModal }): JSX.Element =>
 
           {/* Position */}
           <section className="col-span-2 overflow-visible">
-            <TextField title="Position" Icon={Award} isRequired className="flex-1">
-              <Input
-                type="text"
-                disabled={isSubmitting}
-                placeholder=""
-                {...register('position')}
-                className="py-2.5 pl-11 text-xs"
-                iserror={errors.position !== null && errors?.position !== undefined}
+            <TextField title="Position" Icon={Mail} isRequired className="flex-1">
+              <Controller
+                name="position"
+                control={control}
+                rules={{ required: true }}
+                render={({ field }) => (
+                  <ReactSelect
+                    {...field}
+                    isClearable
+                    placeholder=""
+                    className="w-full"
+                    styles={customStyles}
+                    classNames={{
+                      control: (state) =>
+                        state.isFocused
+                          ? 'border-primary'
+                          : !isEmpty(errors.position)
+                          ? 'border-rose-500 ring-rose-500'
+                          : 'border-slate-300'
+                    }}
+                    value={field.value}
+                    onChange={field.onChange}
+                    isLoading={positionData.isLoading}
+                    isDisabled={isSubmitting || positionData.isLoading}
+                    options={positionData.data}
+                  />
+                )}
+              />
+            </TextField>
+            {errors.position !== null && errors.position !== undefined && (
+              <span className="error text-[10px]">Position is required</span>
+            )}
+          </section>
+
+          {/* Role */}
+          <section className="col-span-2 overflow-visible">
+            <TextField title="Role" isRequired className="flex-1">
+              <Controller
+                name="role"
+                control={control}
+                rules={{ required: true }}
+                render={({ field }) => (
+                  <ReactSelect
+                    {...field}
+                    isClearable
+                    placeholder=""
+                    className="w-full"
+                    styles={customStyles}
+                    classNames={{
+                      control: (state) =>
+                        state.isFocused
+                          ? 'border-primary'
+                          : !isEmpty(errors.role)
+                          ? 'border-rose-500 ring-rose-500'
+                          : 'border-slate-300'
+                    }}
+                    value={field.value}
+                    onChange={field.onChange}
+                    isLoading={roleData.isLoading}
+                    isDisabled={isSubmitting || roleData.isLoading}
+                    options={roleData.data}
+                  />
+                )}
               />
             </TextField>
-            {errors?.position !== null && errors?.position !== undefined && (
-              <span className="error text-[10px]">{errors.position?.message}</span>
+            {errors.role !== null && errors.role !== undefined && (
+              <span className="error text-[10px]">Role is required</span>
             )}
           </section>
 
diff --git a/client/src/components/molecules/TextField/index.tsx b/client/src/components/molecules/TextField/index.tsx
index 079cd110..4c7b5a63 100644
--- a/client/src/components/molecules/TextField/index.tsx
+++ b/client/src/components/molecules/TextField/index.tsx
@@ -20,7 +20,7 @@ const TextField: FC<Props> = (props): JSX.Element => {
   return (
     <label className={classNames('group space-y-0.5', className)}>
       {title} {isRequired === true ? <span className="text-rose-500">*</span> : ''}{' '}
-      {isOptional === true ? <span className="italic text-slate-500">({optionalText})</span> : ''}
+      {isOptional === true ? <small className="italic text-slate-500">({optionalText})</small> : ''}
       <div className="relative flex items-center">
         <div
           className={classNames(
diff --git a/client/src/graphql/mutations/employeeMutation.ts b/client/src/graphql/mutations/employeeMutation.ts
new file mode 100644
index 00000000..42baa50f
--- /dev/null
+++ b/client/src/graphql/mutations/employeeMutation.ts
@@ -0,0 +1,7 @@
+import { gql } from 'graphql-request'
+
+export const CREATE_NEW_EMPLOYEE_MUTATION = gql`
+  mutation ($request: AddNewEmployeeRequestInput!) {
+    addNewEmployee(request: $request)
+  }
+`
diff --git a/client/src/graphql/queries/positionQuery.ts b/client/src/graphql/queries/positionQuery.ts
new file mode 100644
index 00000000..6f435d42
--- /dev/null
+++ b/client/src/graphql/queries/positionQuery.ts
@@ -0,0 +1,10 @@
+import { gql } from 'graphql-request'
+
+export const GET_ALL_POSITION_QUERY = gql`
+  query {
+    allPositions {
+      id
+      name
+    }
+  }
+`
diff --git a/client/src/graphql/queries/roleQuery.ts b/client/src/graphql/queries/roleQuery.ts
new file mode 100644
index 00000000..c9119980
--- /dev/null
+++ b/client/src/graphql/queries/roleQuery.ts
@@ -0,0 +1,10 @@
+import { gql } from 'graphql-request'
+
+export const GET_ALL_ROLE_QUERY = gql`
+  query {
+    allRoles {
+      id
+      name
+    }
+  }
+`
diff --git a/client/src/hooks/useEmployee.ts b/client/src/hooks/useEmployee.ts
new file mode 100644
index 00000000..f643fd59
--- /dev/null
+++ b/client/src/hooks/useEmployee.ts
@@ -0,0 +1,31 @@
+import toast from 'react-hot-toast'
+import { useMutation, UseMutationResult } from '@tanstack/react-query'
+
+import { client } from '~/utils/shared/client'
+import { IEmployeeInput } from '~/utils/interfaces/employeeInterface'
+import { CREATE_NEW_EMPLOYEE_MUTATION } from '~/graphql/mutations/employeeMutation'
+
+type EmployeeFuncReturnType = UseMutationResult<any, Error, IEmployeeInput, unknown>
+
+type HookReturnType = {
+  handleAddNewEmployeeMutation: () => UseMutationResult<any, Error, IEmployeeInput, unknown>
+}
+
+const useEmployee = (): HookReturnType => {
+  const handleAddNewEmployeeMutation = (): EmployeeFuncReturnType =>
+    useMutation({
+      mutationFn: async (request: IEmployeeInput) => {
+        return await client.request(CREATE_NEW_EMPLOYEE_MUTATION, { request })
+      },
+      onError: async (err: Error) => {
+        const [errorMessage] = err.message.split(/:\s/, 2)
+        toast.error(errorMessage)
+      }
+    })
+
+  return {
+    handleAddNewEmployeeMutation
+  }
+}
+
+export default useEmployee
diff --git a/client/src/hooks/useUserQuery.ts b/client/src/hooks/useUserQuery.ts
index 5f0752b5..40a0f451 100644
--- a/client/src/hooks/useUserQuery.ts
+++ b/client/src/hooks/useUserQuery.ts
@@ -1,42 +1,48 @@
 import { useQuery, UseQueryResult } from '@tanstack/react-query'
+
+import { client } from '~/utils/shared/client'
+import { User } from '~/utils/types/userTypes'
+import { ReactSelectOption } from '~/utils/types/formValues'
+import { GET_ALL_ROLE_QUERY } from '~/graphql/queries/roleQuery'
+import { GET_ALL_POSITION_QUERY } from '~/graphql/queries/positionQuery'
 import {
-  GET_ALL_ESL_USERS_QUERY,
+  GET_USER_QUERY,
   GET_ALL_USERS_QUERY,
-  GET_USER_QUERY
+  GET_ALL_ESL_USERS_QUERY
 } from '~/graphql/queries/UserQuery'
-import { client } from '~/utils/shared/client'
-import { User } from '~/utils/types/userTypes'
 
-type handleUserQueryType = UseQueryResult<
+type UserPickData = Array<Pick<User, 'id' | 'name'>>
+type UserQueryType = UseQueryResult<
   {
     userById: User
   },
   unknown
 >
-
-type handleAllUsersQueryType = UseQueryResult<
+type AllUsersQueryType = UseQueryResult<
   {
     allUsers: User[]
   },
   unknown
 >
-
 type ESLUserReturnType = UseQueryResult<
   {
-    allESLUsers: Array<Pick<User, 'id' | 'name'>>
+    allESLUsers: UserPickData
   },
   unknown
 >
-
-type returnType = {
-  handleUserQuery: () => handleUserQueryType
-  handleAllUsersQuery: (ready?: boolean) => handleAllUsersQueryType
+type PositionReturnType = UseQueryResult<ReactSelectOption[], unknown>
+type RoleReturnType = UseQueryResult<ReactSelectOption[], unknown>
+type HookReturnType = {
+  handleUserQuery: () => UserQueryType
+  handleAllUsersQuery: (ready?: boolean) => AllUsersQueryType
   getESLUserQuery: (ready?: boolean) => ESLUserReturnType
+  getAllPositionQuery: () => PositionReturnType
+  getAllRoleQuery: () => RoleReturnType
 }
 
 // GET SPECIFIC USER
-const useUserQuery = (): returnType => {
-  const handleUserQuery = (): handleUserQueryType =>
+const useUserQuery = (): HookReturnType => {
+  const handleUserQuery = (): UserQueryType =>
     useQuery({
       queryKey: ['GET_USER_QUERY'],
       queryFn: async () => await client.request(GET_USER_QUERY),
@@ -44,7 +50,7 @@ const useUserQuery = (): returnType => {
     })
 
   // GET ALL USERS
-  const handleAllUsersQuery = (ready: boolean = true): handleAllUsersQueryType =>
+  const handleAllUsersQuery = (ready: boolean = true): AllUsersQueryType =>
     useQuery({
       queryKey: ['GET_ALL_USERS_QUERY'],
       queryFn: async () => await client.request(GET_ALL_USERS_QUERY),
@@ -58,14 +64,40 @@ const useUserQuery = (): returnType => {
       queryKey: ['GET_ESL_USERS_QUERY'],
       queryFn: async () =>
         await client.request(GET_ALL_ESL_USERS_QUERY, { requestingUserId: null }),
-      select: (data: { allESLUsers: Array<Pick<User, 'id' | 'name'>> }) => data,
+      select: (data: { allESLUsers: UserPickData }) => data,
       enabled: ready
     })
 
+  // GET ALL POSITIONS
+  const getAllPositionQuery = (): PositionReturnType =>
+    useQuery({
+      queryKey: ['GET_ALL_POSITION_QUERY'],
+      queryFn: async () => await client.request(GET_ALL_POSITION_QUERY),
+      select: (data: { allPositions: UserPickData }) =>
+        data.allPositions.map((position) => ({
+          value: position.id.toString(),
+          label: position.name
+        }))
+    })
+
+  // GET ALL ROLES
+  const getAllRoleQuery = (): RoleReturnType =>
+    useQuery({
+      queryKey: ['GET_ALL_ROLE_QUERY'],
+      queryFn: async () => await client.request(GET_ALL_ROLE_QUERY),
+      select: (data: { allRoles: UserPickData }) =>
+        data.allRoles.map((role) => ({
+          value: role.id.toString(),
+          label: role.name
+        }))
+    })
+
   return {
     handleUserQuery,
+    getESLUserQuery,
+    getAllRoleQuery,
     handleAllUsersQuery,
-    getESLUserQuery
+    getAllPositionQuery
   }
 }
 
diff --git a/client/src/pages/employee-management.tsx b/client/src/pages/employee-management.tsx
index f245ec5c..5c82bc38 100644
--- a/client/src/pages/employee-management.tsx
+++ b/client/src/pages/employee-management.tsx
@@ -52,9 +52,10 @@ const EmployeeManagement: NextPage = (): JSX.Element => {
               type="button"
               variant="primary"
               onClick={handleToggle}
-              className="px-1.5 py-[3px]"
+              className="flex items-center space-x-1 px-1.5 py-[3px]"
             >
-              <Plus className="h-4 w-4" />
+              <Plus className="h-4 w-4" /> {''}
+              <span>Employee</span>
             </Button>
           </div>
         ) : (
diff --git a/client/src/utils/interfaces/employeeInterface.ts b/client/src/utils/interfaces/employeeInterface.ts
new file mode 100644
index 00000000..e812bb40
--- /dev/null
+++ b/client/src/utils/interfaces/employeeInterface.ts
@@ -0,0 +1,8 @@
+export interface IEmployeeInput {
+  email: string
+  positionId: number
+  roleId: number
+  firstName: string
+  middleName: string
+  lastName: string
+}
diff --git a/client/src/utils/types/formValues.ts b/client/src/utils/types/formValues.ts
index 1470bdff..84e181ac 100644
--- a/client/src/utils/types/formValues.ts
+++ b/client/src/utils/types/formValues.ts
@@ -72,7 +72,8 @@ export type NewBulkOvertimeFormValues = {
 export type NewEmployeeFormValues = {
   // eslint-disable-next-line @typescript-eslint/array-type
   email: string
-  position: string
+  position: ReactSelectOption
+  role: ReactSelectOption
   first_name: string
   middle_name?: string
   last_name: string
diff --git a/client/src/utils/validation/index.ts b/client/src/utils/validation/index.ts
index fcb89828..d420068f 100644
--- a/client/src/utils/validation/index.ts
+++ b/client/src/utils/validation/index.ts
@@ -98,7 +98,8 @@ export const MyBulkOvertimeSchema = yup.object().shape({
 
 export const NewEmployeeSchema = yup.object().shape({
   email: yup.string().required().label('Email'),
-  position: yup.string().required().label('Position'),
+  position: SelectSchema.required().label('Position'),
+  role: SelectSchema.required().label('Role'),
   first_name: yup.string().required().label('First Name'),
   middle_name: yup.string().label('Middle Name'),
   last_name: yup.string().required().label('Last Name')