diff --git a/client/src/components/FlightCreationForm/FlightCreationForm.scss b/client/src/components/FlightCreationForm/FlightCreationForm.scss
new file mode 100644
index 0000000000000000000000000000000000000000..98e722293a41afbd2697f5fbe621dbc8ee72523e
--- /dev/null
+++ b/client/src/components/FlightCreationForm/FlightCreationForm.scss
@@ -0,0 +1,12 @@
+.flightCreationForm {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.register-card {
+  width: 20vw;
+  min-width: 350px;
+}
diff --git a/client/src/components/FlightCreationForm/FlightCreationForm.tsx b/client/src/components/FlightCreationForm/FlightCreationForm.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..84836565ca8b98a8a1e1747e7407965576ce97b7
--- /dev/null
+++ b/client/src/components/FlightCreationForm/FlightCreationForm.tsx
@@ -0,0 +1,86 @@
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+
+interface IFlightCreationForm {
+    origin: string;
+    destination: string;
+    departure: string;
+    arrival: string;
+    economyCapacity: number;
+    businessCapacity: number;
+    economyPrice: number;
+    businessPrice: number;
+}
+
+function FlightCreationForm() {
+  const [error, setError] = useState('');
+  const { register, handleSubmit } = useForm<IFlightCreationForm>({mode: 'onChange'});
+
+  const onSubmit = (formValue : IFlightCreationForm) => {
+    if (!Number.isInteger(formValue.businessCapacity) || !Number.isInteger(formValue.economyCapacity)) {
+        setError('Please enter an integer for the capacity.')
+        return;
+    }
+  }
+
+  return (
+    <>
+      <div className='flightCreationForm'>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className='card register-card'>
+
+            <div className='form-group'>
+              <label>Origin</label>
+              <input type='text' placeholder='Enter origin' {...register('origin', { required: true })} />
+            </div>
+            
+            <div className='form-group'>
+              <label>Destination</label>
+              <input type='text' placeholder='Enter destination' {...register('destination', { required: true })} />
+            </div>
+
+            <div className='form-group'>
+              <label>Departure Time</label>
+              <input type='datetime-local' placeholder='Enter departure time' {...register('departure', { required: true })} />
+            </div>
+
+            <div className='form-group'>
+              <label>Arrival Time</label>
+              <input type='datetime-local' placeholder='Enter arrival time' {...register('arrival', { required: true })} />
+            </div>
+
+            <div className='form-group'>
+              <label>Economy Class Capacity</label>
+              <input type='number' placeholder='Enter capacity' {...register('economyCapacity', { required: true })} />
+            </div>
+
+            <div className='form-group'>
+              <label>Business Class Capacity</label>
+              <input type='number' placeholder='Enter capacity' {...register('businessCapacity', { required: true })} />
+            </div>
+
+            <div className='form-group'>
+              <label>Economy Class Price</label>
+              <input type='number' placeholder='Enter price' {...register('economyPrice', { required: true })} />
+            </div>
+
+            <div className='form-group'>
+              <label>Business Class Price</label>
+              <input type='number' placeholder='Enter price' {...register('businessPrice', { required: true })} />
+            </div>
+
+            <div className='form-group'>
+              <button type='submit'>Submit</button>
+            </div>
+
+            <div className='form-group'>
+              {error && <span>{error}</span>}
+            </div>
+          </div>
+        </form>
+      </div>
+    </>
+  )
+}
+
+export default FlightCreationForm;