diff --git a/client/src/components/eula/eula.component.jsx b/client/src/components/eula/eula.component.jsx
index c1130c783..4ffc4be97 100644
--- a/client/src/components/eula/eula.component.jsx
+++ b/client/src/components/eula/eula.component.jsx
@@ -1,28 +1,28 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {useCallback, useEffect, useRef, useState} from "react";
 import {Button, Card, Checkbox, Col, Form, Input, Modal, notification, Row} from "antd";
 import Markdown from "react-markdown";
-import { createStructuredSelector } from "reselect";
-import { selectCurrentEula, selectCurrentUser } from "../../redux/user/user.selectors";
-import { connect } from "react-redux";
-import { FormDatePicker } from "../form-date-picker/form-date-picker.component";
-import { INSERT_EULA_ACCEPTANCE } from "../../graphql/user.queries";
-import { useMutation } from "@apollo/client";
-import { acceptEula } from "../../redux/user/user.actions";
-import { useTranslation } from "react-i18next";
+import {createStructuredSelector} from "reselect";
+import {selectCurrentEula, selectCurrentUser} from "../../redux/user/user.selectors";
+import {connect} from "react-redux";
+import {FormDatePicker} from "../form-date-picker/form-date-picker.component";
+import {INSERT_EULA_ACCEPTANCE} from "../../graphql/user.queries";
+import {useMutation} from "@apollo/client";
+import {acceptEula} from "../../redux/user/user.actions";
+import {useTranslation} from "react-i18next";
 import day from '../../utils/day';
 
 import './eula.styles.scss';
 
-const Eula = ({ currentEula, currentUser, acceptEula }) => {
+const Eula = ({currentEula, currentUser, acceptEula}) => {
     const [formReady, setFormReady] = useState(false);
     const [hasEverScrolledToBottom, setHasEverScrolledToBottom] = useState(false);
     const [insertEulaAcceptance] = useMutation(INSERT_EULA_ACCEPTANCE);
     const [form] = Form.useForm();
     const markdownCardRef = useRef(null);
-    const { t } = useTranslation();
+    const {t} = useTranslation();
     const [api, contextHolder] = notification.useNotification();
 
-    const handleScroll =  useCallback((e) => {
+    const handleScroll = useCallback((e) => {
         const bottom = e.target.scrollHeight - 100 <= e.target.scrollTop + e.target.clientHeight;
         if (bottom && !hasEverScrolledToBottom) {
             setHasEverScrolledToBottom(true);
@@ -32,11 +32,11 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
     }, [hasEverScrolledToBottom, setHasEverScrolledToBottom]);
 
     useEffect(() => {
-        handleScroll({ target: markdownCardRef.current });
+        handleScroll({target: markdownCardRef.current});
     }, [handleScroll]);
 
     const handleChange = useCallback(() => {
-        form.validateFields({ validateOnly: true })
+        form.validateFields({validateOnly: true})
             .then(() => setFormReady(hasEverScrolledToBottom))
             .catch(() => setFormReady(false));
     }, [form, hasEverScrolledToBottom]);
@@ -45,12 +45,12 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
         handleChange();
     }, [handleChange, hasEverScrolledToBottom, form]);
 
-    const onFinish = async ({ acceptTerms, ...formValues }) => {
+    const onFinish = async ({acceptTerms, ...formValues}) => {
         const eulaId = currentEula.id;
         const useremail = currentUser.email;
 
         try {
-            const { accepted_terms, ...otherFormValues } = formValues;
+            const {accepted_terms, ...otherFormValues} = formValues;
             await insertEulaAcceptance({
                 variables: {
                     eulaAcceptance: {
@@ -63,7 +63,7 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
             });
             acceptEula();
         } catch (err) {
-           api.error({
+            api.error({
                 message: t('eula.errors.acceptance.message'),
                 description: t('eula.errors.acceptance.description'),
                 placement: 'bottomRight',
@@ -99,25 +99,25 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
                 )}
                 closable={false}
             >
-                    <Card type='inner' className='eula-markdown-card' onScroll={handleScroll} ref={markdownCardRef}>
-                        <div id='markdowndiv' className='eula-markdown-div'>
-                            <Markdown children={currentEula?.content?.replace(/\\n/g, '\n')} />
-                        </div>
+                <Card type='inner' className='eula-markdown-card' onScroll={handleScroll} ref={markdownCardRef}>
+                    <div id='markdowndiv' className='eula-markdown-div'>
+                        <Markdown children={currentEula?.content?.replace(/\\n/g, '\n')}/>
+                    </div>
+                </Card>
+
+                <EulaFormComponent form={form} handleChange={handleChange} onFinish={onFinish} t={t}/>
+
+                {!hasEverScrolledToBottom && (
+                    <Card className='eula-never-scrolled' type='inner'>
+                        <h3>{t('eula.content.never_scrolled')}</h3>
                     </Card>
-
-                    <EulaFormComponent form={form} handleChange={handleChange} onFinish={onFinish} t={t} />
-
-                    {!hasEverScrolledToBottom && (
-                        <Card className='eula-never-scrolled' type='inner'>
-                            <h3>{t('eula.content.never_scrolled')}</h3>
-                        </Card>
-                    )}
+                )}
             </Modal>
         </>
     )
 }
 
-const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
+const EulaFormComponent = ({form, handleChange, onFinish, t}) => (
     <Card type='inner' title={t('eula.titles.upper_card')} style={{marginTop: '10px'}}>
         <Form id='tosForm' onChange={handleChange} onFinish={onFinish} form={form}>
             <Row gutter={24}>
@@ -125,20 +125,28 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
                     <Form.Item
                         label={t('eula.labels.first_name')}
                         name="first_name"
-                        rules={[{ required: true, message: t('eula.messages.first_name') }]}
+                        rules={[{
+                            required: true,
+                            validator: (_, value) =>
+                                value.trim() !== '' ? Promise.resolve() : Promise.reject(new Error(t('eula.messages.first_name'))),
+                        },]}
                     >
                         <Input placeholder={t('eula.labels.first_name')}
-                               aria-label={t('eula.labels.first_name')} />
+                               aria-label={t('eula.labels.first_name')}/>
                     </Form.Item>
                 </Col>
                 <Col span={12}>
                     <Form.Item
                         label={t('eula.labels.last_name')}
                         name="last_name"
-                        rules={[{ required: true, message: t('eula.messages.last_name') }]}
+                        rules={[{
+                            required: true,
+                            validator: (_, value) =>
+                                value.trim() !== '' ? Promise.resolve() : Promise.reject(new Error(t('eula.messages.last_name'))),
+                        }]}
                     >
                         <Input placeholder={t('eula.labels.last_name')}
-                               aria-label={t('eula.labels.last_name')} />
+                               aria-label={t('eula.labels.last_name')}/>
                     </Form.Item>
                 </Col>
             </Row>
@@ -147,10 +155,13 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
                     <Form.Item
                         label={t('eula.labels.business_name')}
                         name="business_name"
-                        rules={[{ required: true, message: t('eula.messages.business_name') }]}
+                        rules={[{
+                            required: true,
+                            validator: (_, value) =>
+                                value.trim() !== '' ? Promise.resolve() : Promise.reject(new Error(t('eula.messages.business_name'))),
+                        }]}
                     >
-                        <Input placeholder={t('eula.labels.business_name')}
-                               aria-label={t('eula.labels.business_name')} />
+                        <Input placeholder={t('eula.labels.business_name')} aria-label={t('eula.labels.business_name')}/>
                     </Form.Item>
                 </Col>
                 <Col span={12}>
@@ -165,7 +176,7 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
                         ]}
                     >
                         <Input placeholder={t('eula.labels.phone_number')}
-                               aria-label={t('eula.labels.phone_number')} />
+                               aria-label={t('eula.labels.phone_number')}/>
                     </Form.Item>
                 </Col>
             </Row>
@@ -175,7 +186,7 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
                         label={t('eula.labels.address')}
                         name="address"
                     >
-                        <Input placeholder={t('eula.labels.address')} aria-label={t('eula.labels.address')} />
+                        <Input placeholder={t('eula.labels.address')} aria-label={t('eula.labels.address')}/>
                     </Form.Item>
                 </Col>
                 <Col span={12}>
@@ -183,8 +194,8 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
                         label={t('eula.labels.date_accepted')}
                         name="date_accepted"
                         rules={[
-                            { required: true },
                             {
+                                required: true,
                                 validator: (_, value) => {
                                     if (day(value).isSame(day(), 'day')) {
                                         return Promise.resolve();
@@ -194,8 +205,7 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
                             },
                         ]}
                     >
-                        <FormDatePicker onChange={handleChange} onlyToday
-                                        aria-label={t('eula.labels.date_accepted')} />
+                        <FormDatePicker onChange={handleChange} onlyToday aria-label={t('eula.labels.date_accepted')}/>
                     </Form.Item>
                 </Col>
             </Row>
@@ -206,13 +216,13 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
                         valuePropName="checked"
                         rules={[
                             {
+                                required: true,
                                 validator: (_, value) =>
                                     value ? Promise.resolve() : Promise.reject(new Error(t('eula.messages.accepted_terms'))),
                             },
                         ]}
                     >
-                        <Checkbox
-                            aria-label={t('eula.labels.accepted_terms')}>{t('eula.labels.accepted_terms')}</Checkbox>
+                        <Checkbox aria-label={t('eula.labels.accepted_terms')}>{t('eula.labels.accepted_terms')}</Checkbox>
                     </Form.Item>
                 </Col>
             </Row>