diff --git a/src/tapis-api/apps/createApp.ts b/src/tapis-api/apps/createApp.ts
new file mode 100644
index 000000000..cad240718
--- /dev/null
+++ b/src/tapis-api/apps/createApp.ts
@@ -0,0 +1,20 @@
+import { Apps } from '@tapis/tapis-typescript';
+import { apiGenerator, errorDecoder } from 'tapis-api/utils';
+
+const createApp = (
+  createAppVersionRequest: Apps.CreateAppVersionRequest,
+  basepath: string,
+  jwt: string
+) => {
+  const api: Apps.ApplicationsApi = apiGenerator<Apps.ApplicationsApi>(
+    Apps,
+    Apps.ApplicationsApi,
+    basepath,
+    jwt
+  );
+  return errorDecoder<Apps.RespBasic>(() =>
+    api.createAppVersion(createAppVersionRequest)
+  );
+};
+
+export default createApp;
diff --git a/src/tapis-api/apps/index.ts b/src/tapis-api/apps/index.ts
index c71f31d46..a13ee9a12 100644
--- a/src/tapis-api/apps/index.ts
+++ b/src/tapis-api/apps/index.ts
@@ -1,2 +1,3 @@
 export { default as list } from './list';
 export { default as detail } from './detail';
+export { default as createApp } from './createApp';
diff --git a/src/tapis-app/Apps/_Layout/Layout.tsx b/src/tapis-app/Apps/_Layout/Layout.tsx
index 40b2a5b45..225897765 100644
--- a/src/tapis-app/Apps/_Layout/Layout.tsx
+++ b/src/tapis-app/Apps/_Layout/Layout.tsx
@@ -6,6 +6,7 @@ import {
   LayoutHeader,
   LayoutNavWrapper,
 } from 'tapis-ui/_common';
+import AppsToolbar from '../_components/AppsToolbar';
 
 import { Router } from '../_Router';
 
@@ -13,6 +14,7 @@ const Layout: React.FC = () => {
   const header = (
     <LayoutHeader>
       <div>Apps</div>
+      <AppsToolbar />
     </LayoutHeader>
   );
 
diff --git a/src/tapis-app/Apps/_components/AppsToolbar/AppsToolbar.module.scss b/src/tapis-app/Apps/_components/AppsToolbar/AppsToolbar.module.scss
new file mode 100644
index 000000000..9d0a6e26d
--- /dev/null
+++ b/src/tapis-app/Apps/_components/AppsToolbar/AppsToolbar.module.scss
@@ -0,0 +1,20 @@
+.toolbar-wrapper {
+  padding: 0;
+  margin: 0;
+  margin-top: 0.5em;
+  display: flex !important;
+}
+
+.toolbar-btn {
+  height: 2rem;
+  align-items: center;
+  margin-left: 0.5em;
+  font-size: 0.7em !important;
+  border-radius: 0 !important;
+  background-color: #f4f4f4 !important;
+  color: #333333 !important;
+}
+
+.toolbar-btn:disabled {
+  color: #999999 !important;
+}
diff --git a/src/tapis-app/Apps/_components/AppsToolbar/AppsToolbar.tsx b/src/tapis-app/Apps/_components/AppsToolbar/AppsToolbar.tsx
new file mode 100644
index 000000000..2da8d6a22
--- /dev/null
+++ b/src/tapis-app/Apps/_components/AppsToolbar/AppsToolbar.tsx
@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { Button } from 'reactstrap';
+import { Icon } from 'tapis-ui/_common';
+import styles from './AppsToolbar.module.scss';
+import { useLocation } from 'react-router-dom';
+import CreateAppModal from './CreateAppModal';
+
+type ToolbarButtonProps = {
+  text: string;
+  icon: string;
+  onClick: () => void;
+  disabled: boolean;
+};
+
+export type ToolbarModalProps = {
+  toggle: () => void;
+};
+
+export const ToolbarButton: React.FC<ToolbarButtonProps> = ({
+  text,
+  icon,
+  onClick,
+  disabled = true,
+  ...rest
+}) => {
+  return (
+    <div>
+      <Button
+        disabled={disabled}
+        onClick={onClick}
+        className={styles['toolbar-btn']}
+        {...rest}
+      >
+        <Icon name={icon}></Icon>
+        <span> {text}</span>
+      </Button>
+    </div>
+  );
+};
+
+const AppsToolbar: React.FC = () => {
+  const [modal, setModal] = useState<string | undefined>(undefined);
+  const { pathname } = useLocation();
+
+  const toggle = () => {
+    setModal(undefined);
+  };
+  return (
+    <div id="file-operation-toolbar">
+      {pathname && (
+        <div className={styles['toolbar-wrapper']}>
+          <ToolbarButton
+            text="Create a New App"
+            icon="add"
+            disabled={false}
+            onClick={() => setModal('createApp')}
+            aria-label="createApp"
+          />
+
+          {modal === 'createApp' && <CreateAppModal toggle={toggle} />}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AppsToolbar;
diff --git a/src/tapis-app/Apps/_components/AppsToolbar/CreateAppModal/CreateAppModal.module.scss b/src/tapis-app/Apps/_components/AppsToolbar/CreateAppModal/CreateAppModal.module.scss
new file mode 100644
index 000000000..811ec6742
--- /dev/null
+++ b/src/tapis-app/Apps/_components/AppsToolbar/CreateAppModal/CreateAppModal.module.scss
@@ -0,0 +1,24 @@
+.modal-settings {
+  max-height: 38rem;
+  overflow-y: scroll;
+}
+
+.item {
+  border: 1px dotted lightgray;
+  padding: 0.5em 0.5em 0.5em 0.5em;
+  margin-bottom: 1em;
+}
+
+.array {
+  border: 1px solid gray;
+  padding: 0.5em 0.5em 0.5em 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.hidden {
+  display: none;
+}
+
+.section-divider {
+  margin-bottom: 100px;
+}
diff --git a/src/tapis-app/Apps/_components/AppsToolbar/CreateAppModal/CreateAppModal.tsx b/src/tapis-app/Apps/_components/AppsToolbar/CreateAppModal/CreateAppModal.tsx
new file mode 100644
index 000000000..9aed47fd9
--- /dev/null
+++ b/src/tapis-app/Apps/_components/AppsToolbar/CreateAppModal/CreateAppModal.tsx
@@ -0,0 +1,547 @@
+/* eslint-disable no-template-curly-in-string */
+import { Button, Input, FormGroup, Label } from 'reactstrap';
+import { GenericModal } from 'tapis-ui/_common';
+import { SubmitWrapper } from 'tapis-ui/_wrappers';
+import { ToolbarModalProps } from '../AppsToolbar';
+import { ErrorMessage, Form, Formik } from 'formik';
+import { FormikInput } from 'tapis-ui/_common';
+import { FormikSelect } from 'tapis-ui/_common/FieldWrapperFormik';
+import { useEffect, useCallback, useState } from 'react';
+import styles from './CreateAppModal.module.scss';
+import * as Yup from 'yup';
+import { useQueryClient } from 'react-query';
+import { default as queryKeys } from 'tapis-hooks/apps/queryKeys';
+import AdvancedSettings from './Settings/AdvancedSettings';
+
+import { useCreateApp } from 'tapis-hooks/apps';
+import {
+  RuntimeEnum,
+  RuntimeOptionEnum,
+  JobTypeEnum,
+} from '@tapis/tapis-typescript-apps';
+
+import {
+  AppArgSpec,
+  KeyValuePair,
+  ParameterSetArchiveFilter,
+  ParameterSetLogConfig,
+  AppFileInput,
+  AppFileInputArray,
+} from '@tapis/tapis-typescript-apps';
+
+const CreateAppModal: React.FC<ToolbarModalProps> = ({ toggle }) => {
+  const queryClient = useQueryClient();
+  const onSuccess = useCallback(() => {
+    queryClient.invalidateQueries(queryKeys.list);
+  }, [queryClient]);
+
+  const { isLoading, isSuccess, error, reset, createApp } = useCreateApp();
+
+  useEffect(() => {
+    reset();
+  }, [reset]);
+
+  const [simplified, setSimplified] = useState(false);
+  const onChange = useCallback(() => {
+    setSimplified(!simplified);
+  }, [setSimplified, simplified]);
+
+  const runtimeValues = Object.values(RuntimeEnum);
+  const runtimeOptionsValues = Object.values(RuntimeOptionEnum); // as RuntimeOptionEnum[];
+
+  const validationSchema = Yup.object({
+    id: Yup.string()
+      .min(1, 'ID must be at least 1 character long')
+      .max(80, 'ID should not be longer than 80 characters')
+      .matches(
+        /^[a-zA-Z0-9_.-]+$/,
+        "ID must contain only alphanumeric characters, '.', '_', or '-'"
+      )
+      .required('ID is a required field'),
+    version: Yup.string()
+      .min(1, 'Version must be at least 1 character long')
+      .max(80, 'Version should not be longer than 80 characters')
+      .matches(
+        /^[a-zA-Z0-9_.-]+$/,
+        "Version must contain only alphanumeric characters, '.', '_', or '-'"
+      )
+      .required('Version is a required field'),
+    containerImage: Yup.string()
+      .min(1, 'Container Image must be at least 1 character long')
+      .max(80, 'Container Image should not be longer than 80 characters')
+      .matches(
+        /^[a-zA-Z0-9_.\-/:]+$/,
+        "Container Image must contain only alphanumeric characters, '.', '_', '-', '/', ':'"
+      )
+      .required('Container Image is a required field'),
+    description: Yup.string().max(
+      2048,
+      'Description should not be longer than 2048 characters'
+    ),
+    owner: Yup.string().max(
+      60,
+      'Owner should not be longer than 60 characters'
+    ),
+    enabled: Yup.boolean(),
+    locked: Yup.boolean(),
+    runtimeVersion: Yup.string(),
+    runtimeOptions: Yup.string()
+      .nullable(true)
+      .oneOf([...runtimeOptionsValues, ''], 'Invalid runtime option')
+      .required('Runtime option is required unless using Docker'),
+    maxJobs: Yup.number().integer('Max Jobs must be an integer').nullable(),
+    maxJobsPerUser: Yup.number()
+      .integer('Max Jobs Per User must be an integer')
+      .nullable(),
+    strictFileInputs: Yup.boolean(),
+    tags: Yup.array().of(
+      Yup.string().max(50, 'Tags should not be longer than 50 characters')
+    ),
+    jobAttributes: Yup.object({
+      dynamicExecSystem: Yup.boolean(),
+      execSystemId: Yup.string(),
+      execSystemExecDir: Yup.string(),
+      execSystemInputDir: Yup.string(),
+      execSystemOutputDir: Yup.string(),
+      execSystemLogicalQueue: Yup.string(),
+      archiveSystemId: Yup.string(),
+      archiveSystemDir: Yup.string(),
+      archiveOnAppError: Yup.boolean(),
+      isMpi: Yup.boolean(),
+      mpiCmd: Yup.string(),
+      cmdPrefix: Yup.string(),
+      nodeCount: Yup.number()
+        .integer()
+        .min(1, 'Node count must be at least 1')
+        .nullable(),
+      coresPerNode: Yup.number()
+        .integer()
+        .min(1, 'Cores per node must be at least 1')
+        .nullable(),
+      memoryMB: Yup.number()
+        .integer()
+        .min(1, 'Memory in MB must be at least 1')
+        .nullable(),
+      maxMinutes: Yup.number()
+        .integer()
+        .min(1, 'Max minutes must be at least 1')
+        .nullable(),
+      parameterSet: Yup.object({
+        envVariables: Yup.array(
+          Yup.object({
+            key: Yup.string()
+              .min(1)
+              .required('A key name is required for this environment variable'),
+            value: Yup.string().required(
+              'A value is required for this environment variable'
+            ),
+          })
+        ),
+        archiveFilter: Yup.object({
+          includes: Yup.array(
+            Yup.string()
+              .min(1)
+              .required('A pattern must be specified for this include')
+          ),
+          excludes: Yup.array(
+            Yup.string()
+              .min(1)
+              .required('A pattern must be specified for this exclude')
+          ),
+          includeLaunchFiles: Yup.boolean(),
+        }),
+        fileInputs: Yup.array().of(
+          Yup.object().shape({
+            name: Yup.string().min(1).required('A fileInput name is required'),
+            targetPath: Yup.string()
+              .min(1)
+              .required('A targetPath is required'),
+            autoMountLocal: Yup.boolean(),
+          })
+        ),
+        fileInputArrays: Yup.array().of(
+          Yup.object().shape({
+            name: Yup.string()
+              .min(1)
+              .required('A fileInputArray name is required'),
+            targetDir: Yup.string().min(1).required('A targetDir is required'),
+          })
+        ),
+      }),
+    }),
+  });
+
+  const initialValues = {
+    // Top Level Attributes
+    id: '',
+    version: '1.0',
+    containerImage: '',
+    description: undefined,
+    runtime: undefined,
+    runtimeOptions: undefined,
+    jobType: undefined,
+
+    // Advanced Attributes
+    // eslint-disable-next-line no-template-curly-in-string
+    owner: '${apiUserId}',
+    enabled: true,
+    locked: false,
+    runtimeVersion: undefined,
+    maxJobs: -1,
+    maxJobsPerUser: -1,
+    strictFileInputs: false,
+    tags: [],
+
+    jobAttributes: {
+      description: '',
+      dynamicExecSystem: false,
+      execSystemConstraints: undefined,
+      execSystemId: undefined,
+      execSystemExecDir: undefined,
+      execSystemInputDir: undefined,
+      execSystemOutputDir: undefined,
+      execSystemLogicalQueue: undefined,
+
+      archiveSystemId: undefined,
+      archiveSystemDir: undefined,
+      archiveOnAppError: true,
+      isMpi: undefined,
+      mpiCmd: undefined,
+      cmdPrefix: undefined,
+
+      parameterSet: {
+        appArgs: undefined,
+        containerArgs: undefined,
+        schedulerOptions: undefined,
+        envVariables: undefined,
+        archiveFilter: undefined,
+        logConfig: undefined,
+      },
+      fileInputs: undefined,
+      fileInputArrays: undefined,
+      nodeCount: undefined,
+      coresPerNode: undefined,
+      memoryMB: undefined,
+      maxMinutes: undefined,
+    },
+  };
+
+  const onSubmit = ({
+    id,
+    version,
+    containerImage,
+    description,
+    runtime,
+    runtimeOptions,
+    jobType,
+    owner,
+    enabled,
+    locked,
+    runtimeVersion,
+    maxJobs,
+    maxJobsPerUser,
+    strictFileInputs,
+    tags,
+    jobAttributes: {
+      // eslint-disable-next-line @typescript-eslint/no-redeclare
+      // description,
+      dynamicExecSystem,
+      execSystemConstraints,
+      execSystemId,
+      execSystemExecDir,
+      execSystemInputDir,
+      execSystemOutputDir,
+      execSystemLogicalQueue,
+      archiveSystemId,
+      archiveSystemDir,
+      archiveOnAppError,
+      isMpi,
+      mpiCmd,
+      cmdPrefix,
+      parameterSet: {
+        appArgs,
+        containerArgs,
+        schedulerOptions,
+        envVariables,
+        archiveFilter,
+        logConfig,
+      },
+      fileInputs,
+      fileInputArrays,
+      nodeCount,
+      coresPerNode,
+      memoryMB,
+      maxMinutes,
+    },
+  }: {
+    id: string;
+    version: string;
+    containerImage: string;
+    description: string | undefined;
+    runtime: RuntimeEnum | undefined;
+    runtimeOptions: RuntimeOptionEnum | undefined;
+    jobType: JobTypeEnum | undefined;
+    owner: string | undefined;
+    enabled: boolean | undefined;
+    locked: boolean | undefined;
+    runtimeVersion: string | undefined;
+    maxJobs: number | undefined;
+    maxJobsPerUser: number | undefined;
+    strictFileInputs: boolean | undefined;
+    tags: string[] | undefined;
+
+    // jobAttributes: JobAttributes;
+    jobAttributes: {
+      // jobDescription: string | undefined;
+      dynamicExecSystem: boolean | undefined;
+      execSystemConstraints: string[] | undefined;
+      execSystemId: string | undefined;
+      execSystemExecDir: string | undefined;
+      execSystemInputDir: string | undefined;
+      execSystemOutputDir: string | undefined;
+      execSystemLogicalQueue: string | undefined;
+      archiveSystemId: string | undefined;
+      archiveSystemDir: string | undefined;
+      archiveOnAppError: boolean | undefined;
+      isMpi: boolean | undefined;
+      mpiCmd: string | undefined;
+      cmdPrefix: string | undefined;
+      // parameterSet: ParameterSet;
+      parameterSet: {
+        appArgs: Array<AppArgSpec> | undefined;
+        containerArgs: Array<AppArgSpec> | undefined;
+        schedulerOptions: Array<AppArgSpec> | undefined;
+        envVariables: Array<KeyValuePair> | undefined;
+        archiveFilter: ParameterSetArchiveFilter | undefined;
+        logConfig: ParameterSetLogConfig | undefined;
+      };
+      fileInputs: Array<AppFileInput> | undefined;
+      fileInputArrays: AppFileInputArray[] | undefined;
+      nodeCount: number | undefined;
+      coresPerNode: number | undefined;
+      memoryMB: number | undefined;
+      maxMinutes: number | undefined;
+    };
+  }) => {
+    console.log('Submitting form with values:', {
+      id,
+      version,
+      containerImage,
+      description,
+      runtime,
+      runtimeOptions,
+      jobType,
+      owner,
+      enabled,
+      locked,
+      runtimeVersion,
+      maxJobs,
+      maxJobsPerUser,
+      strictFileInputs,
+
+      tags,
+      jobAttributes: {
+        // eslint-disable-next-line @typescript-eslint/no-redeclare
+        // description,
+        dynamicExecSystem,
+        execSystemConstraints,
+        execSystemId,
+        execSystemExecDir,
+        execSystemInputDir,
+        execSystemOutputDir,
+        execSystemLogicalQueue,
+        archiveSystemId,
+        archiveSystemDir,
+        archiveOnAppError,
+        isMpi,
+        mpiCmd,
+        cmdPrefix,
+        parameterSet: {
+          appArgs,
+          containerArgs,
+          schedulerOptions,
+          envVariables,
+          archiveFilter,
+          logConfig,
+        },
+        fileInputs,
+        fileInputArrays,
+        nodeCount,
+        coresPerNode,
+        memoryMB,
+        maxMinutes,
+      },
+    });
+
+    const runtimeOptionsArray = runtimeOptions ? [runtimeOptions] : undefined;
+
+    createApp(
+      {
+        reqPostApp: {
+          id,
+          version,
+          containerImage,
+          description,
+          runtime,
+          runtimeOptions: runtimeOptionsArray,
+          jobType,
+          owner,
+          enabled,
+          locked,
+          runtimeVersion,
+          maxJobs,
+          maxJobsPerUser,
+          strictFileInputs,
+
+          tags,
+          jobAttributes: {
+            // eslint-disable-next-line @typescript-eslint/no-redeclare
+            // jobDescription,
+            dynamicExecSystem,
+            execSystemConstraints,
+            execSystemId,
+            execSystemExecDir,
+            execSystemInputDir,
+            execSystemOutputDir,
+            execSystemLogicalQueue,
+            archiveSystemId,
+            archiveSystemDir,
+            archiveOnAppError,
+            isMpi,
+            mpiCmd,
+            cmdPrefix,
+            parameterSet: {
+              appArgs,
+              containerArgs,
+              schedulerOptions,
+              envVariables,
+              archiveFilter,
+              logConfig,
+            },
+            fileInputs,
+            fileInputArrays,
+            nodeCount,
+            coresPerNode,
+            memoryMB,
+            maxMinutes,
+          },
+        },
+      },
+      true,
+      { onSuccess }
+    );
+  };
+
+  return (
+    <GenericModal
+      toggle={toggle}
+      title="Create New App"
+      body={
+        <div className={styles['modal-settings']}>
+          <Formik
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+            onSubmit={onSubmit}
+          >
+            {(formikProps) => (
+              <Form id="newapp-form">
+                <ErrorMessage
+                  name="name"
+                  component="div"
+                  className="field-error"
+                />
+                <FormikInput
+                  name="id"
+                  label="Application ID"
+                  required={true}
+                  description={`App ID`}
+                  aria-label="Input"
+                />
+                <FormikInput
+                  name="version"
+                  label="Application Version"
+                  required={true}
+                  description={`App Version`}
+                  aria-label="Input"
+                />
+                <FormikInput
+                  name="containerImage"
+                  description="Container Image"
+                  label="Container Image"
+                  required={true}
+                  aria-label="Input"
+                />
+                <FormikInput
+                  name="description"
+                  label="Description"
+                  required={false}
+                  description={`App Description`}
+                  aria-label="Input"
+                />
+                <FormikSelect
+                  name="runtime"
+                  description="The application runtime"
+                  label="Runtime Type"
+                  required={false}
+                  data-testid="runtime"
+                >
+                  <option defaultValue={''}>Please select a runtime</option>
+                  {runtimeValues.map((values) => {
+                    return <option>{values}</option>;
+                  })}
+                </FormikSelect>
+
+                {formikProps.values.runtime !== RuntimeEnum.Docker && (
+                  <FormikSelect
+                    name="runtimeOptions"
+                    description="The runtime command for the application"
+                    label="Runtime Options"
+                    required={false}
+                    data-testid="runtimeOptions"
+                  >
+                    <option defaultValue={''}>
+                      Please select a runtime option
+                    </option>
+                    {runtimeOptionsValues.map((values) => {
+                      return <option>{values}</option>;
+                    })}
+                  </FormikSelect>
+                )}
+
+                <FormGroup check>
+                  <Label check size="sm" className={`form-field__label`}>
+                    <Input type="checkbox" onChange={onChange} />
+                    Advanced Settings
+                  </Label>
+                </FormGroup>
+                <AdvancedSettings simplified={simplified} />
+                {/* <AdvancedSettings simplified/> */}
+              </Form>
+            )}
+          </Formik>
+        </div>
+      }
+      footer={
+        <SubmitWrapper
+          className={styles['modal-footer']}
+          isLoading={isLoading}
+          error={error}
+          success={isSuccess ? `Successfully created a new app` : ''}
+          reverse={true}
+        >
+          <Button
+            form="newapp-form"
+            color="primary"
+            disabled={isLoading || isSuccess}
+            aria-label="Submit"
+            type="submit"
+          >
+            Create a new app
+          </Button>
+        </SubmitWrapper>
+      }
+    />
+  );
+};
+
+export default CreateAppModal;
diff --git a/src/tapis-app/Apps/_components/AppsToolbar/CreateAppModal/Settings/AdvancedSettings.tsx b/src/tapis-app/Apps/_components/AppsToolbar/CreateAppModal/Settings/AdvancedSettings.tsx
new file mode 100644
index 000000000..7b9bf5c31
--- /dev/null
+++ b/src/tapis-app/Apps/_components/AppsToolbar/CreateAppModal/Settings/AdvancedSettings.tsx
@@ -0,0 +1,26 @@
+import AppAttributes from './AppAttributes';
+import JobAttributes from './JobAttributes';
+import TagsSettings from './TagsSettings';
+
+type AdvancedSettingsProp = {
+  simplified: boolean;
+};
+
+const AdvancedSettings: React.FC<AdvancedSettingsProp> = ({ simplified }) => {
+  if (simplified) {
+    return (
+      <div>
+        <hr />
+        <AppAttributes />
+        <hr />
+        <JobAttributes />
+        <hr />
+        <TagsSettings />
+      </div>
+    );
+  } else {
+    return null;
+  }
+};
+
+export default AdvancedSettings;
diff --git a/src/tapis-app/Apps/_components/AppsToolbar/CreateAppModal/Settings/AppAttributes.tsx b/src/tapis-app/Apps/_components/AppsToolbar/CreateAppModal/Settings/AppAttributes.tsx
new file mode 100644
index 000000000..1fe1dc171
--- /dev/null
+++ b/src/tapis-app/Apps/_components/AppsToolbar/CreateAppModal/Settings/AppAttributes.tsx
@@ -0,0 +1,67 @@
+import { FormikInput, Collapse } from 'tapis-ui/_common';
+import { FormikCheck } from 'tapis-ui/_common/FieldWrapperFormik';
+import styles from '../CreateAppModal.module.scss';
+
+const AppAttributes: React.FC = () => {
+  return (
+    <div>
+      <h2>Application Attributes</h2>
+      <Collapse title="Application Attributes" className={styles['array']}>
+        <FormikInput
+          name="owner"
+          label="Application Owner"
+          required={false}
+          description={`App Owner`}
+          aria-label="Input"
+        />
+        <FormikCheck
+          name="enabled"
+          required={false}
+          label="Application Enabled?"
+          description={
+            'Indicates if application currently enabled for use. Default is TRUE.'
+          }
+        />
+        <FormikCheck
+          name="locked"
+          required={false}
+          label="Application Version Locked?"
+          description={
+            'Indicates if version is currently locked. Locking disallows updates. Default is FALSE'
+          }
+        />
+        <FormikInput
+          name="runtimeVersion"
+          label="Runtime Version"
+          required={false}
+          description={`Optional version or range of versions required.`}
+          aria-label="Input"
+        />
+        <FormikInput
+          name="maxJobs"
+          label="Max Jobs"
+          required={false}
+          description={`Max number of jobs that can be running for this app on a system. System may also limit the number of jobs. Set to -1 for unlimited. Default is unlimited.`}
+          aria-label="Input"
+        />
+        <FormikInput
+          name="maxJobsPerUser"
+          label="Max Jobs Per User"
+          required={false}
+          description={`Max number of jobs per job owner. System may also limit the number of jobs. Set to -1 for unlimited. Default is unlimited.`}
+          aria-label="Input"
+        />
+        <FormikCheck
+          name="strictFileInputs"
+          required={false}
+          label="Strict File Inputs?"
+          description={
+            'Indicates if a job request is allowed to have unnamed file inputs. If TRUE then a job request may only use named file inputs defined in the app. Default is FALSE.'
+          }
+        />
+      </Collapse>
+    </div>
+  );
+};
+
+export default AppAttributes;
diff --git a/src/tapis-app/Apps/_components/AppsToolbar/CreateAppModal/Settings/JobAttributes.tsx b/src/tapis-app/Apps/_components/AppsToolbar/CreateAppModal/Settings/JobAttributes.tsx
new file mode 100644
index 000000000..fda56782b
--- /dev/null
+++ b/src/tapis-app/Apps/_components/AppsToolbar/CreateAppModal/Settings/JobAttributes.tsx
@@ -0,0 +1,45 @@
+import { Collapse } from 'tapis-ui/_common';
+import styles from '../CreateAppModal.module.scss';
+import { FileInputArrays } from 'tapis-ui/components/apps/AppCreate/JobAttributes/FileInputArrays';
+import { FileInputs } from 'tapis-ui/components/apps/AppCreate/JobAttributes/FileInputs';
+import { ExecOptions } from 'tapis-ui/components/apps/AppCreate/JobAttributes/ExecOptions';
+import { Args } from 'tapis-ui/components/apps/AppCreate/JobAttributes/Args';
+import { SchedulerOptions } from 'tapis-ui/components/apps/AppCreate/JobAttributes/SchedulerOptions';
+import { EnvVariables } from 'tapis-ui/components/apps/AppCreate/JobAttributes/EnvVariables';
+import { Archive } from 'tapis-ui/components/apps/AppCreate/JobAttributes/Archive';
+
+const JobSettings: React.FC = () => {
+  return (
+    <div>
+      <h2>Exec Options</h2>
+      <Collapse title="Execution Options" className={styles['array']}>
+        <ExecOptions />
+      </Collapse>
+      <hr />
+
+      <h2>App Arguments</h2>
+      <Args />
+      <hr />
+
+      <h2>Scheduler Arguments</h2>
+      <SchedulerOptions />
+      <hr />
+
+      <h2>Environment Variables</h2>
+      <EnvVariables />
+      <hr />
+
+      <h2>Archive Options</h2>
+      <Collapse title="Archive Options" className={styles['array']}>
+        <Archive />
+      </Collapse>
+      <hr />
+
+      <h2>File Options</h2>
+      <FileInputs />
+      <FileInputArrays />
+    </div>
+  );
+};
+
+export default JobSettings;
diff --git a/src/tapis-app/Apps/_components/AppsToolbar/CreateAppModal/Settings/TagsSettings.tsx b/src/tapis-app/Apps/_components/AppsToolbar/CreateAppModal/Settings/TagsSettings.tsx
new file mode 100644
index 000000000..9556c2ee3
--- /dev/null
+++ b/src/tapis-app/Apps/_components/AppsToolbar/CreateAppModal/Settings/TagsSettings.tsx
@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { Button, Input, FormGroup, Label, Collapse } from 'reactstrap';
+import { useFormikContext, FieldArray } from 'formik';
+import { Apps } from '@tapis/tapis-typescript';
+
+const TagsSettings: React.FC = () => {
+  const { values, setFieldValue } = useFormikContext<Apps.ReqPostApp>();
+  const [newTag, setNewTag] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+
+  const tags = values.tags ?? [];
+
+  const toggleCollapse = () => setIsOpen(!isOpen);
+
+  const handleAddTag = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && newTag.trim() !== '') {
+      e.preventDefault(); // Prevent form submission
+      const newTags = [...tags, newTag.trim()];
+      setFieldValue('tags', newTags);
+      setNewTag(''); // Clear input for next tag
+    }
+  };
+
+  const handleRemoveTag = (index: number) => {
+    const newTags = tags.filter((_, tagIndex) => index !== tagIndex);
+    setFieldValue('tags', newTags);
+  };
+
+  return (
+    <>
+      <Button
+        color="secondary"
+        onClick={toggleCollapse}
+        style={{ marginBottom: '1rem' }}
+      >
+        Manage Tags
+      </Button>
+      <Collapse isOpen={isOpen}>
+        <Input
+          type="text"
+          value={newTag}
+          onChange={(e) => setNewTag(e.target.value)}
+          onKeyDown={handleAddTag}
+          placeholder="Type tag and press Enter"
+        />
+        <FieldArray
+          name="tags"
+          render={() => (
+            <>
+              {tags.map((tag, index) => (
+                <FormGroup key={index} row>
+                  <Label className="col-md-10">{tag}</Label>
+                  <Button
+                    className="col-md-2"
+                    size="sm"
+                    onClick={() => handleRemoveTag(index)}
+                  >
+                    Remove
+                  </Button>
+                </FormGroup>
+              ))}
+            </>
+          )}
+        />
+      </Collapse>
+    </>
+  );
+};
+
+export default TagsSettings;
diff --git a/src/tapis-app/Apps/_components/AppsToolbar/CreateAppModal/index.ts b/src/tapis-app/Apps/_components/AppsToolbar/CreateAppModal/index.ts
new file mode 100644
index 000000000..3f36c341b
--- /dev/null
+++ b/src/tapis-app/Apps/_components/AppsToolbar/CreateAppModal/index.ts
@@ -0,0 +1,3 @@
+import CreateAppModal from './CreateAppModal';
+
+export default CreateAppModal;
diff --git a/src/tapis-app/Apps/_components/AppsToolbar/index.ts b/src/tapis-app/Apps/_components/AppsToolbar/index.ts
new file mode 100644
index 000000000..c846981d9
--- /dev/null
+++ b/src/tapis-app/Apps/_components/AppsToolbar/index.ts
@@ -0,0 +1,3 @@
+import AppsToolbar from './AppsToolbar';
+
+export default AppsToolbar;
diff --git a/src/tapis-app/_Router/Router.tsx b/src/tapis-app/_Router/Router.tsx
index e0578c84a..7a5408cfc 100644
--- a/src/tapis-app/_Router/Router.tsx
+++ b/src/tapis-app/_Router/Router.tsx
@@ -10,7 +10,6 @@ import Jobs from '../Jobs';
 import Systems from '../Systems';
 import Files from '../Files';
 import Workflows from '../Workflows';
-import Pods from '../Pods';
 import UIPatterns from '../UIPatterns';
 
 const Router: React.FC = () => {
@@ -49,9 +48,6 @@ const Router: React.FC = () => {
       <ProtectedRoute path="/ml-hub">
         {/* TODO: create ML Hub */}
       </ProtectedRoute>
-      <ProtectedRoute path="/pods">
-        <Pods />
-      </ProtectedRoute>
       <Route path="/uipatterns">
         <SectionHeader>UI Patterns</SectionHeader>
         <UIPatterns />
diff --git a/src/tapis-hooks/apps/index.ts b/src/tapis-hooks/apps/index.ts
index 8e9a9e3cc..66300c064 100644
--- a/src/tapis-hooks/apps/index.ts
+++ b/src/tapis-hooks/apps/index.ts
@@ -1,2 +1,3 @@
 export { default as useList } from './useList';
 export { default as useDetail } from './useDetail';
+export { default as useCreateApp } from './useCreateApp';
diff --git a/src/tapis-hooks/apps/queryKeys.ts b/src/tapis-hooks/apps/queryKeys.ts
index bc854539b..0aa49452c 100644
--- a/src/tapis-hooks/apps/queryKeys.ts
+++ b/src/tapis-hooks/apps/queryKeys.ts
@@ -1,5 +1,6 @@
 const QueryKeys = {
   list: 'apps/list',
+  createApp: 'apps/createApp',
 };
 
 export default QueryKeys;
diff --git a/src/tapis-hooks/apps/useCreateApp.ts b/src/tapis-hooks/apps/useCreateApp.ts
new file mode 100644
index 000000000..034b00ee4
--- /dev/null
+++ b/src/tapis-hooks/apps/useCreateApp.ts
@@ -0,0 +1,40 @@
+import { useMutation, MutateOptions } from 'react-query';
+import { useTapisConfig } from '../context';
+import QueryKeys from './queryKeys';
+import { Apps } from '@tapis/tapis-typescript';
+import { createApp } from 'tapis-api/apps';
+
+type createAppParams = {
+  createAppVersionRequest: Apps.CreateAppVersionRequest;
+  skipCredentialCheck: boolean;
+};
+
+const useCreateApp = () => {
+  const { basePath, accessToken } = useTapisConfig();
+  const jwt = accessToken?.access_token || '';
+
+  const { mutate, isLoading, isError, isSuccess, data, error, reset } =
+    useMutation<Apps.RespBasic, Error, createAppParams>(
+      [QueryKeys.createApp, basePath, jwt],
+      ({ createAppVersionRequest }) =>
+        createApp(createAppVersionRequest, basePath, jwt)
+    );
+
+  return {
+    isLoading,
+    isError,
+    isSuccess,
+    data,
+    error,
+    reset,
+    createApp: (
+      createAppVersionRequest: Apps.CreateAppVersionRequest,
+      skipCredentialCheck: boolean = true,
+      options?: MutateOptions<Apps.RespBasic, Error, createAppParams>
+    ) => {
+      return mutate({ createAppVersionRequest, skipCredentialCheck }, options);
+    },
+  };
+};
+
+export default useCreateApp;
diff --git a/src/tapis-ui/components/apps/AppCreate/JobAttributes/Archive.tsx b/src/tapis-ui/components/apps/AppCreate/JobAttributes/Archive.tsx
new file mode 100644
index 000000000..d76f00c08
--- /dev/null
+++ b/src/tapis-ui/components/apps/AppCreate/JobAttributes/Archive.tsx
@@ -0,0 +1,191 @@
+import React from 'react';
+import { Apps } from '@tapis/tapis-typescript';
+import FieldWrapper from 'tapis-ui/_common/FieldWrapper';
+import { Input } from 'reactstrap';
+import { Button } from 'reactstrap';
+import fieldArrayStyles from './FieldArray.module.scss';
+import { Collapse } from 'tapis-ui/_common';
+import {
+  FieldArray,
+  useFormikContext,
+  Field,
+  ErrorMessage,
+  FieldProps,
+} from 'formik';
+
+import { InputGroup, InputGroupAddon } from 'reactstrap';
+import {
+  FormikCheck,
+  FormikTapisFile,
+  FormikSelect,
+} from 'tapis-ui/_common/FieldWrapperFormik';
+import formStyles from 'tapis-ui/_common/FieldWrapperFormik/FieldWrapperFormik.module.css';
+import { useList } from 'tapis-hooks/systems';
+import { ListTypeEnum } from '@tapis/tapis-typescript-systems';
+
+type ArrayGroupProps = {
+  values: Array<string>;
+  name: string;
+  label: string;
+  description: string;
+};
+
+const ArrayGroup: React.FC<ArrayGroupProps> = ({
+  values,
+  name,
+  label,
+  description,
+}) => {
+  return (
+    <FieldArray
+      name={name}
+      render={(arrayHelpers) => (
+        <Collapse
+          open={values.length > 0}
+          title={label}
+          note={`${values.length} items`}
+          isCollapsable={true}
+          className={fieldArrayStyles.array}
+        >
+          <FieldWrapper
+            label={label}
+            required={false}
+            description={description}
+          >
+            <div className={fieldArrayStyles['array-group']}>
+              {values.map((value, index) => (
+                <>
+                  <Field name={`${name}.${index}`}>
+                    {({ field }: FieldProps) => (
+                      <InputGroup>
+                        <Input {...field} bsSize="sm" />
+                        <InputGroupAddon addonType="append">
+                          <Button
+                            size="sm"
+                            onClick={() => arrayHelpers.remove(index)}
+                          >
+                            Remove
+                          </Button>
+                        </InputGroupAddon>
+                      </InputGroup>
+                    )}
+                  </Field>
+                  <ErrorMessage
+                    name={`${name}.${index}`}
+                    className="form-field__help"
+                  >
+                    {(message) => (
+                      <div
+                        className={`${formStyles['form-field__help']} ${fieldArrayStyles.description}`}
+                      >
+                        {message}
+                      </div>
+                    )}
+                  </ErrorMessage>
+                </>
+              ))}
+            </div>
+            <Button onClick={() => arrayHelpers.push('')} size="sm">
+              + Add
+            </Button>
+          </FieldWrapper>
+        </Collapse>
+      )}
+    />
+  );
+};
+
+const ArchiveFilterRender: React.FC = () => {
+  const { values } = useFormikContext();
+  const includes =
+    (values as Partial<Apps.ReqPostApp>).jobAttributes?.parameterSet
+      ?.archiveFilter?.includes ?? [];
+  const excludes =
+    (values as Partial<Apps.ReqPostApp>).jobAttributes?.parameterSet
+      ?.archiveFilter?.excludes ?? [];
+  return (
+    <div>
+      <h3>Archive Filters</h3>
+      <ArrayGroup
+        name="jobAttributes.parameterSet.archiveFilter.includes"
+        label="Includes"
+        description="File patterns specified here will be included during job archiving"
+        values={includes}
+      />
+      <ArrayGroup
+        name="jobAttributes.parameterSet.archiveFilter.excludes"
+        label="Excludes"
+        description="File patterns specified here will be excluded from job archiving"
+        values={excludes}
+      />
+      <FormikCheck
+        name="jobAttributes.parameterSet.archiveFilter.includeLaunchFiles"
+        label="Include Launch Files"
+        description="If checked, launch files will be included during job archiving"
+        required={false}
+      />
+    </div>
+  );
+};
+
+const ArchiveOptions: React.FC = () => {
+  const { data, isLoading, isError } = useList({ listType: ListTypeEnum.All });
+
+  const { values } = useFormikContext<Apps.ReqPostApp>();
+
+  if (isLoading) return <div>Loading systems...</div>;
+  if (isError) return <div>Error loading systems.</div>;
+
+  const archiveSystemId = values.jobAttributes?.archiveSystemId;
+
+  return (
+    <>
+      <div className={fieldArrayStyles.item}>
+        <FormikSelect
+          name="jobAttributes.archiveSystemId"
+          label="Archive System ID"
+          description="If selected, this system ID will be used for job archiving instead of the execution system default"
+          required={false}
+        >
+          <option value={undefined}></option>
+          {data?.result?.map((system) => (
+            <option
+              value={system.id}
+              key={`archive-system-select-${system.id}`}
+            >
+              {system.id}
+            </option>
+          ))}
+        </FormikSelect>
+        <FormikTapisFile
+          allowSystemChange={false}
+          systemId={archiveSystemId}
+          disabled={!archiveSystemId}
+          name="jobAttributes.archiveSystemDir"
+          label="Archive System Directory"
+          description="The directory on the selected system in which to place archived files"
+          required={false}
+          files={false}
+          dirs={true}
+        />
+        <FormikCheck
+          name="jobAttributes.archiveOnAppError"
+          label="Archive On App Error"
+          description="If checked, the job will be archived even if there is an execution error"
+          required={false}
+        />
+      </div>
+    </>
+  );
+};
+
+export const Archive: React.FC = () => {
+  return (
+    <div>
+      <ArchiveOptions />
+      <ArchiveFilterRender />
+    </div>
+  );
+};
+
+export default Archive;
diff --git a/src/tapis-ui/components/apps/AppCreate/JobAttributes/Args.tsx b/src/tapis-ui/components/apps/AppCreate/JobAttributes/Args.tsx
new file mode 100644
index 000000000..8280b7055
--- /dev/null
+++ b/src/tapis-ui/components/apps/AppCreate/JobAttributes/Args.tsx
@@ -0,0 +1,190 @@
+import React, { useMemo } from 'react';
+import { Apps, Jobs } from '@tapis/tapis-typescript';
+import { Button } from 'reactstrap';
+import fieldArrayStyles from './FieldArray.module.scss';
+import { Collapse } from 'tapis-ui/_common';
+import {
+  FieldArray,
+  useField,
+  FieldArrayRenderProps,
+  useFormikContext,
+} from 'formik';
+import { FormikInput } from 'tapis-ui/_common';
+import { FormikCheck } from 'tapis-ui/_common/FieldWrapperFormik';
+import { getArgMode } from 'tapis-api/utils/jobArgs';
+import * as Yup from 'yup';
+
+type ArgFieldProps = {
+  index: number;
+  name: string;
+  argType: string;
+  arrayHelpers: FieldArrayRenderProps;
+  inputMode?: Apps.ArgInputModeEnum;
+};
+
+export const ArgField: React.FC<ArgFieldProps> = ({
+  index,
+  name,
+  argType,
+  arrayHelpers,
+  inputMode,
+}) => {
+  const [field] = useField(`${name}.name`);
+  const argName = useMemo(() => field.value, [field]);
+  return (
+    <Collapse
+      key={`${argType}.${index}`}
+      title={!!argName && argName.length ? argName : argType}
+      className={fieldArrayStyles.item}
+    >
+      <FormikInput
+        name={`${name}.name`}
+        required={true}
+        label="Name"
+        disabled={!!inputMode}
+        description={`The name for this ${argType} ${
+          !!inputMode
+            ? 'is defined in the application and cannot be changed'
+            : ''
+        }`}
+      />
+      <FormikInput
+        name={`${name}.arg`}
+        required={true}
+        label="Value"
+        disabled={inputMode === Apps.ArgInputModeEnum.Fixed}
+        description={`A value for this ${argType}`}
+      />
+      <FormikInput
+        name={`${name}.description`}
+        required={false}
+        label="Description"
+        disabled={inputMode === Apps.ArgInputModeEnum.Fixed}
+        description={`A description for this ${argType}`}
+      />
+      <FormikCheck
+        name={`${name}.include`}
+        required={false}
+        label="Include"
+        disabled={
+          inputMode === Apps.ArgInputModeEnum.Fixed ||
+          inputMode === Apps.ArgInputModeEnum.Required
+        }
+        description={
+          inputMode === Apps.ArgInputModeEnum.Fixed ||
+          inputMode === Apps.ArgInputModeEnum.Required
+            ? `This ${argType} must be included`
+            : `If checked, this ${argType} will be included`
+        }
+      />
+      <Button size="sm" onClick={() => arrayHelpers.remove(index)}>
+        Remove
+      </Button>
+    </Collapse>
+  );
+};
+
+type ArgsFieldArrayProps = {
+  argSpecs: Array<Apps.AppArgSpec>;
+  name: string;
+  argType: string;
+};
+
+export const ArgsFieldArray: React.FC<ArgsFieldArrayProps> = ({
+  argSpecs,
+  name,
+  argType,
+}) => {
+  const [field] = useField(name);
+  const args = useMemo(
+    () => (field.value as Array<Apps.AppArgSpec>) ?? [],
+    [field]
+  );
+  return (
+    <FieldArray
+      name={name}
+      render={(arrayHelpers) => (
+        <div className={fieldArrayStyles.array}>
+          <h3>{`${argType}s`}</h3>
+          <div className={fieldArrayStyles['array-group']}>
+            {args.map((arg, index) => {
+              const inputMode = arg.name
+                ? getArgMode(arg.name, argSpecs)
+                : undefined;
+              return (
+                <ArgField
+                  index={index}
+                  arrayHelpers={arrayHelpers}
+                  name={`${name}.${index}`}
+                  argType={argType}
+                  inputMode={inputMode}
+                />
+              );
+            })}
+          </div>
+          <Button
+            onClick={() =>
+              arrayHelpers.push({
+                include: true,
+              })
+            }
+            size="sm"
+          >
+            + Add
+          </Button>
+        </div>
+      )}
+    />
+  );
+};
+
+export const argsSchema = Yup.array(
+  Yup.object({
+    name: Yup.string(),
+    description: Yup.string(),
+    include: Yup.boolean(),
+    arg: Yup.string().min(1).required('The argument cannot be blank'),
+  })
+);
+
+export const Args: React.FC = () => {
+  const { values } = useFormikContext();
+
+  const appArgSpecs = useMemo(
+    () =>
+      (values as Partial<Apps.ReqPostApp>).jobAttributes?.parameterSet
+        ?.appArgs ?? [],
+    [values]
+  );
+  const containerArgSpecs = useMemo(
+    () =>
+      (values as Partial<Apps.ReqPostApp>).jobAttributes?.parameterSet
+        ?.containerArgs ?? [],
+    [values]
+  );
+
+  return (
+    <div>
+      {/* delete? */}
+      <ArgsFieldArray
+        name="jobAttributes.parameterSet.appArgs"
+        argType="App Argument"
+        argSpecs={appArgSpecs}
+      />
+      <ArgsFieldArray
+        name="jobAttributes.parameterSet.containerArgs"
+        argType="Container Argument"
+        argSpecs={containerArgSpecs}
+      />
+    </div>
+  );
+};
+
+export const assembleArgSpec = (argSpecs: Array<Jobs.JobArgSpec>) =>
+  argSpecs.reduce(
+    (previous, current) =>
+      `${previous}${current.include ? ` ${current.arg}` : ``}`,
+    ''
+  );
+
+export default <Args />;
diff --git a/src/tapis-ui/components/apps/AppCreate/JobAttributes/EnvVariables.tsx b/src/tapis-ui/components/apps/AppCreate/JobAttributes/EnvVariables.tsx
new file mode 100644
index 000000000..4787d6fa1
--- /dev/null
+++ b/src/tapis-ui/components/apps/AppCreate/JobAttributes/EnvVariables.tsx
@@ -0,0 +1,98 @@
+import React, { useMemo } from 'react';
+import { Apps } from '@tapis/tapis-typescript';
+import { Button } from 'reactstrap';
+import fieldArrayStyles from './FieldArray.module.scss';
+import { Collapse } from 'tapis-ui/_common';
+import {
+  FieldArray,
+  useFormikContext,
+  useField,
+  FieldArrayRenderProps,
+} from 'formik';
+import { FormikInput } from 'tapis-ui/_common';
+
+type EnvVariableFieldProps = {
+  index: number;
+  arrayHelpers: FieldArrayRenderProps;
+};
+
+const EnvVariableField: React.FC<EnvVariableFieldProps> = ({
+  index,
+  arrayHelpers,
+}) => {
+  const [field] = useField(
+    `jobAttributes.parameterSet.envVariables.${index}.key`
+  );
+  const key = useMemo(() => field.value, [field]);
+  return (
+    <Collapse
+      key={`envVariables.${index}`}
+      title={!!key && key.length ? key : 'Environment Variable'}
+      className={fieldArrayStyles.item}
+    >
+      <FormikInput
+        name={`jobAttributes.parameterSet.envVariables.${index}.key`}
+        required={true}
+        label="Key"
+        description="The key name for this environment variable"
+      />
+      <FormikInput
+        name={`jobAttributes.parameterSet.envVariables.${index}.value`}
+        required={true}
+        label="Value"
+        description="A value for this environment variable"
+      />
+      <Button size="sm" onClick={() => arrayHelpers.remove(index)}>
+        Remove
+      </Button>
+    </Collapse>
+  );
+};
+
+const EnvVariablesRender: React.FC = () => {
+  const { values } = useFormikContext();
+  const envVariables =
+    (values as Partial<Apps.ReqPostApp>).jobAttributes?.parameterSet
+      ?.envVariables ?? [];
+
+  return (
+    <FieldArray
+      name={'jobAttributes.parameterSet.envVariables'}
+      render={(arrayHelpers) => (
+        <>
+          <div className={fieldArrayStyles.array}>
+            <h3>{`Environment Variables`}</h3>
+            <div className={fieldArrayStyles['array-group']}>
+              {envVariables.map((envVariable, index) => (
+                <EnvVariableField index={index} arrayHelpers={arrayHelpers} />
+              ))}
+            </div>
+            <Button
+              onClick={() =>
+                arrayHelpers.push({
+                  key: '',
+                  value: '',
+                  description: '',
+                  arg: '',
+                })
+              }
+              size="sm"
+            >
+              + Add
+            </Button>
+          </div>
+        </>
+      )}
+    />
+  );
+};
+
+export const EnvVariables: React.FC = () => {
+  return (
+    <div>
+      <EnvVariablesRender />
+    </div>
+  );
+};
+
+export default EnvVariables;
diff --git a/src/tapis-ui/components/apps/AppCreate/JobAttributes/ExecOptions.tsx b/src/tapis-ui/components/apps/AppCreate/JobAttributes/ExecOptions.tsx
new file mode 100644
index 000000000..8468e5cda
--- /dev/null
+++ b/src/tapis-ui/components/apps/AppCreate/JobAttributes/ExecOptions.tsx
@@ -0,0 +1,242 @@
+import { useMemo, useEffect, useState } from 'react';
+import { Apps, Systems } from '@tapis/tapis-typescript';
+import {
+  FormikInput,
+  FormikCheck,
+  FormikSelect,
+  FormikTapisFile,
+} from 'tapis-ui/_common/FieldWrapperFormik';
+import { useFormikContext } from 'formik';
+import { Collapse } from 'tapis-ui/_common';
+import React from 'react';
+import fieldArrayStyles from './FieldArray.module.scss';
+import { useList } from 'tapis-hooks/systems';
+import { ListTypeEnum } from '@tapis/tapis-typescript-systems';
+import { JobTypeEnum } from '@tapis/tapis-typescript-apps';
+
+const ExecSystemDirs: React.FC = () => {
+  const { values } = useFormikContext();
+  const execSystemId = useMemo(
+    () => (values as Partial<Apps.ReqPostApp>).jobAttributes?.execSystemId,
+    [values]
+  );
+  return (
+    <Collapse title="Execution System Directories">
+      <FormikTapisFile
+        allowSystemChange={false}
+        systemId={execSystemId}
+        disabled={!execSystemId}
+        name="jobAttributes.execSystemExecDir"
+        label="Execution System Execution Directory"
+        description="The directory on the selected selection system for execution files"
+        required={false}
+        files={false}
+        dirs={true}
+      />
+      <FormikTapisFile
+        allowSystemChange={false}
+        systemId={execSystemId}
+        disabled={!execSystemId}
+        name="jobAttributes.execSystemInputDir"
+        label="Execution System Input Directory"
+        description="The directory on the selected selection system for input files"
+        required={false}
+        files={false}
+        dirs={true}
+      />
+      <FormikTapisFile
+        allowSystemChange={false}
+        systemId={execSystemId}
+        disabled={!execSystemId}
+        name="jobAttributes.execSystemOutputDir"
+        label="Execution System Output Directory"
+        description="The directory on the selected selection system for output files"
+        required={false}
+        files={false}
+        dirs={true}
+      />
+    </Collapse>
+  );
+};
+
+const ExecSystemQueueOptions: React.FC = () => {
+  const { errors } = useFormikContext();
+  const queueErrors = errors as QueueErrors;
+  const hasErrors =
+    queueErrors.coresPerNode ||
+    queueErrors.maxMinutes ||
+    queueErrors.memoryMB ||
+    queueErrors.nodeCount;
+  return (
+    <Collapse title="Queue Parameters" isCollapsable={!hasErrors}>
+      <FormikInput
+        name="jobAttributes.nodeCount"
+        label="Node Count"
+        description="The number of nodes to use for this job"
+        required={false}
+        type="number"
+      />
+      <FormikInput
+        name="jobAttributes.coresPerNode"
+        label="Cores Per Node"
+        description="The number of cores to use per node"
+        required={false}
+        type="number"
+      />
+      <FormikInput
+        name="jobAttributes.memoryMB"
+        label="Memory, in Megabytes"
+        description="The amount of memory to use per node in megabytes"
+        required={false}
+        type="number"
+      />
+      <FormikInput
+        name="jobAttributes.maxMinutes"
+        label="Maximum Minutes"
+        description="The maximum amount of time in minutes for this job"
+        required={false}
+        type="number"
+      />
+    </Collapse>
+  );
+};
+
+const MPIOptions: React.FC = () => {
+  const { values } = useFormikContext();
+  const isMpi = useMemo(
+    () => (values as Partial<Apps.ReqPostApp>).jobAttributes?.isMpi,
+    [values]
+  );
+  return (
+    <Collapse title="MPI Options">
+      <FormikCheck
+        name="jobAttributes.isMpi"
+        label="Is MPI?"
+        description="If checked, this job will be run as an MPI job"
+        required={false}
+      />
+      <FormikInput
+        name="jobAttributes.mpiCmd"
+        label="MPI Command"
+        description="If this is an MPI job, you may specify the MPI command"
+        required={false}
+        disabled={!isMpi}
+      />
+      <FormikInput
+        name="jobAttributes.cmdPrefix"
+        label="Command Prefix"
+        description="If this is not an MPI job, you may specify a command prefix"
+        required={false}
+        disabled={!!isMpi}
+      />
+    </Collapse>
+  );
+};
+
+export const ExecOptions: React.FC = () => {
+  const { values, setFieldValue } = useFormikContext<Apps.ReqPostApp>();
+  const isBatch = useMemo(
+    () => values?.jobType === JobTypeEnum.Batch,
+    [values?.jobType]
+  );
+
+  const { data, isLoading, isError } = useList({
+    listType: ListTypeEnum.All,
+    select: 'allAttributes',
+  });
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [selectedSystem, setSelectedSystem] =
+    useState<Systems.TapisSystem | null>(null);
+  const [queues, setQueues] = useState<Array<Systems.LogicalQueue>>([]);
+
+  const getLogicalQueues = (system?: Systems.TapisSystem) =>
+    system?.batchLogicalQueues ?? [];
+
+  useEffect(() => {
+    const systemId = values.jobAttributes?.execSystemId;
+    const system = data?.result?.find((sys) => sys.id === systemId) || null;
+    setSelectedSystem(system);
+
+    if (system) {
+      const newQueues = getLogicalQueues(system);
+      setQueues(newQueues);
+    } else {
+      setQueues([]);
+    }
+
+    if (!isBatch) {
+      setFieldValue('jobAttributes.execSystemLogicalQueue', undefined);
+    }
+  }, [
+    data?.result,
+    values.jobAttributes?.execSystemId,
+    setFieldValue,
+    isBatch,
+  ]);
+
+  if (isLoading) return <div>Loading systems...</div>;
+  if (isError) return <div>Error fetching systems.</div>;
+
+  return (
+    <div>
+      {/* System selection */}
+      <div className={fieldArrayStyles.item}>
+        <FormikSelect
+          name="jobAttributes.execSystemId"
+          label="Execution System"
+          required={true}
+          description={''}
+        >
+          <option value="">Please select a system</option>
+          {data?.result?.map((system) => (
+            <option key={system.id} value={system.id}>
+              {system.id}
+            </option>
+          ))}
+        </FormikSelect>
+        {/* Job type selection */}
+        <FormikSelect
+          name="jobType"
+          label="Job Type"
+          required={true}
+          description={''}
+        >
+          <option value="">Please select a job type</option>
+          <option value={JobTypeEnum.Batch}>Batch</option>
+          <option value={JobTypeEnum.Fork}>Fork</option>
+        </FormikSelect>
+        {/* Queue selection for batch jobs */}
+        {isBatch && (
+          <FormikSelect
+            name="jobAttributes.execSystemLogicalQueue"
+            label="Batch Logical Queue"
+            required={false}
+            description={''}
+          >
+            <option value="">Please select a queue</option>
+            {queues.map((queue) => (
+              <option key={queue.name} value={queue.name}>
+                {queue.name}
+              </option>
+            ))}
+          </FormikSelect>
+        )}
+      </div>
+      <ExecSystemDirs />
+      {isBatch && <ExecSystemQueueOptions />}
+      <MPIOptions />
+    </div>
+  );
+};
+
+type QueueErrors = {
+  nodeCount?: string;
+  coresPerNode?: string;
+  memoryMB?: string;
+  maxMinutes?: string;
+  execSystemId?: string;
+  execSystemLogicalQueue?: string;
+};
+
+export default <ExecOptions />;
diff --git a/src/tapis-ui/components/apps/AppCreate/JobAttributes/FieldArray.module.scss b/src/tapis-ui/components/apps/AppCreate/JobAttributes/FieldArray.module.scss
new file mode 100644
index 000000000..e175189b7
--- /dev/null
+++ b/src/tapis-ui/components/apps/AppCreate/JobAttributes/FieldArray.module.scss
@@ -0,0 +1,21 @@
+.array {
+  border: 1px solid gray;
+  padding: 0.5em 0.5em 0.5em 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.item {
+  border: 1px dotted lightgray;
+  padding: 0.5em 0.5em 0.5em 0.5em;
+  margin-bottom: 1em;
+}
+
+.array-group {
+  margin-bottom: 0.5em;
+}
+
+.description {
+  font-style: italic;
+  font-size: smaller;
+  margin-bottom: 0.5em;
+}
diff --git a/src/tapis-ui/components/apps/AppCreate/JobAttributes/FileInputArrays.module.scss b/src/tapis-ui/components/apps/AppCreate/JobAttributes/FileInputArrays.module.scss
new file mode 100644
index 000000000..440f5c852
--- /dev/null
+++ b/src/tapis-ui/components/apps/AppCreate/JobAttributes/FileInputArrays.module.scss
@@ -0,0 +1,7 @@
+.sourceUrls {
+  margin-bottom: 0.5em;
+}
+
+.inputMargin {
+  margin-bottom: 5px;
+}
diff --git a/src/tapis-ui/components/apps/AppCreate/JobAttributes/FileInputArrays.tsx b/src/tapis-ui/components/apps/AppCreate/JobAttributes/FileInputArrays.tsx
new file mode 100644
index 000000000..f55b9f790
--- /dev/null
+++ b/src/tapis-ui/components/apps/AppCreate/JobAttributes/FileInputArrays.tsx
@@ -0,0 +1,399 @@
+import React, { useMemo, useCallback } from 'react';
+import { Apps, Files, Jobs } from '@tapis/tapis-typescript';
+import { Input, Button, FormGroup } from 'reactstrap';
+import { generateFileInputArrayFromAppInput } from 'tapis-api/utils/jobFileInputArrays';
+import { Collapse, Icon, FieldWrapper } from 'tapis-ui/_common';
+import { useModal } from 'tapis-ui/_common/GenericModal';
+import { FileSelectModal } from 'tapis-ui/components/files';
+import {
+  FieldArray,
+  useFormikContext,
+  FieldArrayRenderProps,
+  Field,
+  ErrorMessage,
+  FieldProps,
+} from 'formik';
+import {
+  FormikInput,
+  FormikTapisFileInput,
+} from 'tapis-ui/_common/FieldWrapperFormik';
+import arrayStyles from './FileInputArrays.module.scss';
+import styles from './FileInputs.module.scss';
+import fieldArrayStyles from './FieldArray.module.scss';
+import { useJobLauncher } from 'tapis-ui/components/jobs/JobLauncher/components';
+
+export type FieldWrapperProps = {
+  fileInputArrayIndex: number;
+  arrayHelpers: FieldArrayRenderProps;
+};
+
+const SourceUrlsField: React.FC<FieldWrapperProps> = ({
+  fileInputArrayIndex,
+  arrayHelpers,
+}) => {
+  const { values, setFieldValue } =
+    useFormikContext<Partial<Apps.ReqPostApp>>();
+
+  const { modal, open, close } = useModal();
+  const { push } = arrayHelpers;
+
+  const sourceUrls: Array<string> = useMemo(
+    () =>
+      values.jobAttributes?.fileInputArrays?.[fileInputArrayIndex]
+        ?.sourceUrls ?? [],
+    [values, fileInputArrayIndex]
+  );
+
+  const onSelect = useCallback(
+    (systemId: string | null, files: Array<Files.FileInfo>) => {
+      files.forEach((file) => {
+        const newSourceUrl = `tapis://${systemId ?? 'here'}${file.path}`;
+        if (!sourceUrls.some((sourceUrl) => sourceUrl === newSourceUrl)) {
+          push(newSourceUrl);
+        }
+      });
+    },
+    [push, sourceUrls]
+  );
+
+  const handleUrlChange = useCallback(
+    (index, event) => {
+      const newUrls = [...sourceUrls];
+      newUrls[index] = event.target.value;
+      setFieldValue(
+        `jobAttributes.fileInputArrays.${fileInputArrayIndex}.sourceUrls`,
+        newUrls
+      );
+    },
+    [sourceUrls, setFieldValue, fileInputArrayIndex]
+  );
+
+  const addUrlField = () => {
+    const newUrls = [...sourceUrls, ''];
+    setFieldValue(
+      `jobAttributes.fileInputArrays.${fileInputArrayIndex}.sourceUrls`,
+      newUrls
+    );
+  };
+
+  return (
+    <FormGroup>
+      <div className={arrayStyles.sourceUrls}>
+        {sourceUrls.map((url, index) => (
+          <div
+            className={arrayStyles.inputMargin}
+            key={`sourceUrl-${fileInputArrayIndex}-${index}`}
+          >
+            <Field
+              name={`jobAttributes.fileInputArrays.${fileInputArrayIndex}.sourceUrls.${index}`}
+            >
+              {({ field }: FieldProps) => (
+                <FormikTapisFileInput
+                  {...field}
+                  value={url}
+                  onChange={(event: any) => handleUrlChange(index, event)}
+                  append={
+                    <Button
+                      size="sm"
+                      onClick={() => arrayHelpers.remove(index)}
+                      disabled={sourceUrls.length === 1 && index === 0}
+                    >
+                      <Icon name="close" />
+                    </Button>
+                  }
+                />
+              )}
+            </Field>
+
+            <ErrorMessage
+              name={`jobAttributes.fileInputArrays.${fileInputArrayIndex}.sourceUrls.${index}`}
+              className="form-field__help"
+            />
+          </div>
+        ))}
+      </div>
+      <div>
+        <Button size="sm" style={{ marginRight: '5px' }} onClick={addUrlField}>
+          + Add Source URL
+        </Button>
+        <Button size="sm" onClick={() => open()}>
+          + Browse for Files
+        </Button>
+      </div>
+      {modal && <FileSelectModal toggle={close} onSelect={onSelect} />}
+    </FormGroup>
+  );
+};
+
+type AppInputArrayFieldProps = {
+  item: Apps.AppFileInputArray;
+  index: number;
+  remove: (index: number) => Apps.AppFileInputArray | undefined;
+};
+
+const upperCaseFirstLetter = (str: string) => {
+  const lower = str.toLowerCase();
+  return `${lower.slice(0, 1).toUpperCase()}${lower.slice(1)}`;
+};
+
+const AppInputArrayField: React.FC<AppInputArrayFieldProps> = ({
+  item,
+  index,
+  remove,
+}) => {
+  const { name, sourceUrls } = item;
+  const inputMode: Apps.FileInputModeEnum | undefined = undefined;
+  const isRequired = inputMode === Apps.FileInputModeEnum.Required;
+  const note = `${
+    inputMode ? upperCaseFirstLetter(inputMode) : 'User Defined'
+  }`;
+  return (
+    <Collapse
+      open={!sourceUrls}
+      title={name ?? 'File Input Array'}
+      note={note}
+      className={fieldArrayStyles.item}
+    >
+      <FormikInput
+        name={`jobAttributes.fileInputArrays.${index}.name`}
+        label="Name"
+        required={true}
+        description={`${
+          isRequired
+            ? 'This input is required and cannot be renamed'
+            : 'Name of this input'
+        }`}
+        disabled={isRequired}
+      />
+      <FieldArray
+        name={`jobAttributes.fileInputArrays.${index}.sourceUrls`}
+        render={(arrayHelpers) => (
+          <FieldWrapper
+            label="Source URLs"
+            required={true}
+            // eslint-disable-next-line no-template-curly-in-string
+            description="Input TAPIS files as pathnames, TAPIS URIs or web URLs
+            in the form of: 'tapis://systemId.path...'
+            "
+          >
+            <SourceUrlsField
+              fileInputArrayIndex={index}
+              arrayHelpers={arrayHelpers}
+            />
+          </FieldWrapper>
+        )}
+      />
+      <FormikInput
+        name={`jobAttributes.fileInputArrays.${index}.targetDir`}
+        label="Target Directory"
+        required={true}
+        description="File mount path inside of running container"
+      />
+      <FormikInput
+        name={`jobAttributes.fileInputArrays.${index}.description`}
+        label="Description"
+        required={false}
+        description="Description of this input"
+      />
+      {!isRequired && (
+        <Button
+          onClick={() => {
+            console.log('Remove index', index);
+            remove(index);
+          }}
+          size="sm"
+        >
+          Remove
+        </Button>
+      )}
+    </Collapse>
+  );
+};
+
+const getFileInputArraysOfMode = (
+  app: Apps.TapisApp,
+  inputMode: Apps.FileInputModeEnum
+) =>
+  app.jobAttributes?.fileInputArrays?.filter(
+    (appInputArray) => appInputArray.inputMode === inputMode
+  ) ?? [];
+
+const inputArrayIncluded = (
+  input: Apps.AppFileInputArray,
+  jobInputArrays: Array<Jobs.JobFileInputArray>
+) => {
+  return jobInputArrays.some(
+    (jobInputArray) => jobInputArray.name === input.name
+  );
+};
+
+type OptionalInputArrayProps = {
+  inputArray: Apps.AppFileInputArray;
+  included: boolean;
+  onInclude: () => any;
+};
+
+const OptionalInputArray: React.FC<OptionalInputArrayProps> = ({
+  inputArray,
+  included,
+  onInclude,
+}) => {
+  return (
+    <Collapse
+      title={`${inputArray.name} ${included ? '(included)' : ''}`}
+      className={styles['optional-input']}
+    >
+      <div className={fieldArrayStyles.description}>
+        {inputArray.description ?? ''}
+      </div>
+      <FieldWrapper
+        label="Source URLs"
+        required={true}
+        description="Input TAPIS files as pathnames, TAPIS URIs or web URLs"
+      >
+        {inputArray.sourceUrls?.map((sourceUrl) => (
+          <Input bsSize="sm" defaultValue={sourceUrl} disabled={true} />
+        ))}
+      </FieldWrapper>
+      <FieldWrapper
+        label="Target Path"
+        required={true}
+        description="File mount path inside of running container"
+      >
+        <Input
+          bsSize="sm"
+          defaultValue={inputArray.targetDir}
+          disabled={true}
+        />
+      </FieldWrapper>
+      <Button onClick={() => onInclude()} disabled={included} size="sm">
+        Include
+      </Button>
+      {included && (
+        <div className={fieldArrayStyles.description}>
+          This optional input array has already been included with your job file
+          inputs.
+        </div>
+      )}
+    </Collapse>
+  );
+};
+
+const OptionalInputArrays: React.FC<{ arrayHelpers: FieldArrayRenderProps }> =
+  ({ arrayHelpers }) => {
+    const { app } = useJobLauncher();
+    const { values } = useFormikContext();
+
+    const optionalInputArrays = useMemo(
+      () => getFileInputArraysOfMode(app, Apps.FileInputModeEnum.Optional),
+      /* eslint-disable-next-line */
+      [app.id, app.version]
+    );
+
+    const formFileInputArrays =
+      (values as Partial<Apps.ReqPostApp>)?.jobAttributes?.fileInputArrays ??
+      [];
+
+    return !!optionalInputArrays.length ? (
+      <Collapse
+        title="Optional File Input Arrays"
+        open={true}
+        note={`${optionalInputArrays.length} additional files`}
+        className={fieldArrayStyles.array}
+      >
+        <div className={fieldArrayStyles.description}>
+          These File Inputs are defined in the application and can be included
+          with your job.
+        </div>
+        {optionalInputArrays.map((optionalInputArray) => {
+          const alreadyIncluded = inputArrayIncluded(
+            optionalInputArray,
+            formFileInputArrays
+          );
+          const onInclude = () => {
+            arrayHelpers.push(
+              generateFileInputArrayFromAppInput(optionalInputArray)
+            );
+          };
+          return (
+            <div
+              className={fieldArrayStyles.item}
+              key={`optional-input-array-${optionalInputArray.name}`}
+            >
+              <OptionalInputArray
+                inputArray={optionalInputArray}
+                onInclude={onInclude}
+                included={alreadyIncluded}
+              />
+            </div>
+          );
+        })}
+      </Collapse>
+    ) : null;
+  };
+
+const AppInputArrays: React.FC<{ arrayHelpers: FieldArrayRenderProps }> = ({
+  arrayHelpers,
+}) => {
+  const { values, setFieldValue } =
+    useFormikContext<Partial<Apps.ReqPostApp>>();
+  let requiredText = '';
+  const appInputArrays =
+    (values as Partial<Apps.ReqPostApp>)?.jobAttributes?.fileInputArrays ?? [];
+
+  return (
+    <Collapse
+      open={false}
+      title="File Inputs Arrays"
+      note={`${appInputArrays.length} items`}
+      requiredText={requiredText}
+      isCollapsable={true}
+      className={fieldArrayStyles.array}
+    >
+      <div className={fieldArrayStyles.description}>
+        These File Input Arrays will be submitted with your job.
+      </div>
+      {appInputArrays.map((appInputArray, index) => (
+        <AppInputArrayField
+          item={appInputArray}
+          index={index}
+          remove={arrayHelpers.remove}
+          key={`render-fileInputArrays.${index}`}
+        />
+      ))}
+      <Button
+        onClick={() => {
+          const fileInputArrays = values.jobAttributes?.fileInputArrays || [];
+          const newFileInputArray = { sourceUrls: [''] };
+          const newFileInputArrays = [...fileInputArrays, newFileInputArray];
+          setFieldValue('jobAttributes.fileInputArrays', newFileInputArrays);
+        }}
+        size="sm"
+      >
+        + Add File Input Array
+      </Button>
+    </Collapse>
+  );
+};
+
+export const FileInputArrays: React.FC = () => {
+  return (
+    <div>
+      <h2>File Input Arrays</h2>
+      <FieldArray
+        name="jobAttributes.fileInputArrays"
+        render={(arrayHelpers) => {
+          return (
+            <>
+              <AppInputArrays arrayHelpers={arrayHelpers} />
+              <OptionalInputArrays arrayHelpers={arrayHelpers} />
+              {/* <FixedInputArrays /> */}
+            </>
+          );
+        }}
+      />
+    </div>
+  );
+};
+
+export default FileInputArrays;
diff --git a/src/tapis-ui/components/apps/AppCreate/JobAttributes/FileInputs.module.scss b/src/tapis-ui/components/apps/AppCreate/JobAttributes/FileInputs.module.scss
new file mode 100644
index 000000000..23cb29f05
--- /dev/null
+++ b/src/tapis-ui/components/apps/AppCreate/JobAttributes/FileInputs.module.scss
@@ -0,0 +1,12 @@
+.remove {
+  margin-top: 0.75em;
+}
+
+.nospace {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.job-input {
+  margin-bottom: 0.5em;
+}
diff --git a/src/tapis-ui/components/apps/AppCreate/JobAttributes/FileInputs.tsx b/src/tapis-ui/components/apps/AppCreate/JobAttributes/FileInputs.tsx
new file mode 100644
index 000000000..5c56143d2
--- /dev/null
+++ b/src/tapis-ui/components/apps/AppCreate/JobAttributes/FileInputs.tsx
@@ -0,0 +1,151 @@
+import React from 'react';
+import { Jobs } from '@tapis/tapis-typescript';
+import { Button } from 'reactstrap';
+import fieldArrayStyles from './FieldArray.module.scss';
+import { Collapse } from 'tapis-ui/_common';
+import { FieldArray, useFormikContext, FieldArrayRenderProps } from 'formik';
+import {
+  FormikInput,
+  FormikCheck,
+  FormikTapisFile,
+  FormikSelect,
+} from 'tapis-ui/_common/FieldWrapperFormik';
+
+import { FileInputModeEnum } from '@tapis/tapis-typescript-apps';
+
+type FileInputFieldProps = {
+  item: Jobs.JobFileInput;
+  index: number;
+  remove: (index: number) => Jobs.JobFileInput | undefined;
+};
+
+const JobInputField: React.FC<FileInputFieldProps> = ({
+  item,
+  index,
+  remove,
+}) => {
+  const { name, sourceUrl } = item;
+  const isRequired = false;
+  const note = 'User Defined';
+  const fileInputModeValues = Object.values(FileInputModeEnum);
+
+  return (
+    <>
+      <Collapse
+        open={!sourceUrl}
+        title={name ?? 'File Input'}
+        note={note}
+        className={fieldArrayStyles.item}
+      >
+        <FormikInput
+          name={`jobAttributes.fileInputs.${index}.name`}
+          label="Name"
+          required={true}
+          description={`${
+            isRequired
+              ? 'This input is required and cannot be renamed'
+              : 'Name of this input'
+          }`}
+          disabled={isRequired}
+        />
+        <FormikTapisFile
+          name={`jobAttributes.fileInputs.${index}.sourceUrl`}
+          label="Source URL"
+          required={false}
+          description="Input TAPIS file as a pathname, TAPIS URI or web URL"
+        />
+        <FormikInput
+          name={`jobAttributes.fileInputs.${index}.targetPath`}
+          label="Target Path"
+          required={true}
+          description="File mount path inside of running container"
+        />
+        <FormikInput
+          name={`jobAttributes.fileInputs.${index}.description`}
+          label="Description"
+          required={false}
+          description="Description of this input"
+        />
+
+        <FormikSelect
+          name={`jobAttributes.fileInputs.${index}.inputMode`}
+          description="The input mode for the file"
+          label="File Input Mode"
+          required={false}
+          data-testid="file Input Type"
+        >
+          <option value={''} selected>
+            -- select input value type --
+          </option>
+          {fileInputModeValues.map((values) => {
+            return <option>{values}</option>;
+          })}
+        </FormikSelect>
+        <FormikCheck
+          name={`jobAttributes.fileInputs.${index}.autoMountLocal`}
+          label="Auto-mount Local"
+          required={false}
+          description="If this is true, the source URL will be mounted from the execution system's local file system"
+        />
+        {!isRequired && (
+          <Button onClick={() => remove(index)} size="sm">
+            Remove
+          </Button>
+        )}
+      </Collapse>
+    </>
+  );
+};
+
+const JobInputs: React.FC<{ arrayHelpers: FieldArrayRenderProps }> = ({
+  arrayHelpers,
+}) => {
+  const { values } = useFormikContext();
+  let requiredText = '';
+  const jobInputs = (values as Partial<Jobs.ReqSubmitJob>)?.fileInputs ?? [];
+
+  return (
+    <Collapse
+      open={false}
+      title="File Inputs"
+      note={`${jobInputs.length} items`}
+      requiredText={requiredText}
+      isCollapsable={true}
+      className={fieldArrayStyles.array}
+    >
+      <div className={fieldArrayStyles.description}>
+        These File Inputs will be submitted with your job.
+      </div>
+      {jobInputs.map((jobInput, index) => (
+        <JobInputField
+          key={`fileInputs.${index}`}
+          item={jobInput}
+          index={index}
+          remove={arrayHelpers.remove}
+        />
+      ))}
+      <Button onClick={() => arrayHelpers.push({})} size="sm">
+        + Add File Input
+      </Button>
+    </Collapse>
+  );
+};
+
+export const FileInputs: React.FC = () => {
+  return (
+    <div>
+      <FieldArray
+        name="fileInputs"
+        render={(arrayHelpers) => {
+          return (
+            <>
+              <JobInputs arrayHelpers={arrayHelpers} />
+            </>
+          );
+        }}
+      />
+    </div>
+  );
+};
+
+export default FileInputs;
diff --git a/src/tapis-ui/components/apps/AppCreate/JobAttributes/SchedulerOptions.module.scss b/src/tapis-ui/components/apps/AppCreate/JobAttributes/SchedulerOptions.module.scss
new file mode 100644
index 000000000..d24abc588
--- /dev/null
+++ b/src/tapis-ui/components/apps/AppCreate/JobAttributes/SchedulerOptions.module.scss
@@ -0,0 +1,9 @@
+.scheduler-option {
+  font-size: 0.75em;
+}
+
+.scheduler-option-list {
+  dd {
+    padding-left: 1rem !important;
+  }
+}
diff --git a/src/tapis-ui/components/apps/AppCreate/JobAttributes/SchedulerOptions.tsx b/src/tapis-ui/components/apps/AppCreate/JobAttributes/SchedulerOptions.tsx
new file mode 100644
index 000000000..8e67a33a5
--- /dev/null
+++ b/src/tapis-ui/components/apps/AppCreate/JobAttributes/SchedulerOptions.tsx
@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react';
+import { Jobs } from '@tapis/tapis-typescript';
+import { Button } from 'reactstrap';
+import fieldArrayStyles from './FieldArray.module.scss';
+import { FieldArray, useField } from 'formik';
+import { ArgField } from './Args';
+
+const SchedulerOptionArray: React.FC = () => {
+  const [field] = useField('jobAttributes.parameterSet.schedulerOptions');
+  const args = useMemo(
+    () => (field.value as Array<Jobs.JobArgSpec>) ?? [],
+    [field]
+  );
+
+  return (
+    <FieldArray
+      name="jobAttributes.parameterSet.schedulerOptions"
+      render={(arrayHelpers) => (
+        <>
+          <div className={fieldArrayStyles.array}>
+            <h3>{`Scheduler Arguments`}</h3>
+            <div className={fieldArrayStyles['array-group']}>
+              {args.map((arg, index) => {
+                return (
+                  <ArgField
+                    index={index}
+                    arrayHelpers={arrayHelpers}
+                    name={`jobAttributes.parameterSet.schedulerOptions.${index}`}
+                    argType={'scheduler option'}
+                    inputMode={undefined}
+                  />
+                );
+              })}
+            </div>
+            <Button
+              onClick={() =>
+                arrayHelpers.push({
+                  name: '',
+                  description: '',
+                  include: true,
+                  arg: '',
+                })
+              }
+              size="sm"
+            >
+              + Add
+            </Button>
+          </div>
+        </>
+      )}
+    />
+  );
+};
+
+export const SchedulerOptions: React.FC = () => {
+  return (
+    <div>
+      <SchedulerOptionArray />
+    </div>
+  );
+};
+
+export default SchedulerOptions;
diff --git a/src/tapis-ui/components/apps/AppCreate/JobAttributes/index.ts b/src/tapis-ui/components/apps/AppCreate/JobAttributes/index.ts
new file mode 100644
index 000000000..925785779
--- /dev/null
+++ b/src/tapis-ui/components/apps/AppCreate/JobAttributes/index.ts
@@ -0,0 +1,7 @@
+export { default as Archive } from './Archive';
+export { default as Args } from './Args';
+export { default as EnvVariables } from './EnvVariables';
+export { default as ExecOptions } from './ExecOptions';
+export { default as FileInputArrays } from './FileInputArrays';
+export { default as FileInputs } from './FileInputs';
+export { default as SchedulerOptions } from './SchedulerOptions';
diff --git a/src/tapis-ui/components/apps/AppCreate/JobAttributes/utils.ts b/src/tapis-ui/components/apps/AppCreate/JobAttributes/utils.ts
new file mode 100644
index 000000000..9dbfc3a74
--- /dev/null
+++ b/src/tapis-ui/components/apps/AppCreate/JobAttributes/utils.ts
@@ -0,0 +1,16 @@
+export const upperCaseFirstLetter = (str: string) => {
+  const lower = str.toLowerCase();
+  return `${lower.slice(0, 1).toUpperCase()}${lower.slice(1)}`;
+};
+
+export const capitalize = (str: string) => {
+  return str!.charAt(0).toUpperCase() + str!.slice(1);
+};
+
+export const reduceRecord = (record: Record<'id', string>) => {
+  const { id, ...contents } = record;
+  return Object.values(contents).reduce(
+    (prev, current) => ((prev as string) + current) as string,
+    ''
+  );
+};