diff --git a/frontend/src/container/Licenses/ApplyLicenseForm.tsx b/frontend/src/container/Licenses/ApplyLicenseForm.tsx
index e16569988a..f0f4b76888 100644
--- a/frontend/src/container/Licenses/ApplyLicenseForm.tsx
+++ b/frontend/src/container/Licenses/ApplyLicenseForm.tsx
@@ -9,22 +9,27 @@ import { AppState } from 'store/reducers';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps } from 'types/api/licenses/getAll';
 import AppReducer from 'types/reducer/app';
+import { requireErrorMessage } from 'utils/form/requireErrorMessage';
 
-import { ApplyForm, ApplyFormContainer, LicenseInput } from './styles';
-
-const FormItem = Form.Item;
+import {
+	ApplyForm,
+	ApplyFormContainer,
+	KeyPreview,
+	LicenseInput,
+} from './styles';
 
 function ApplyLicenseForm({
 	licenseRefetch,
 }: ApplyLicenseFormProps): JSX.Element {
 	const { t } = useTranslation(['licenses']);
-	const [key, setKey] = useState('');
 	const [loading, setLoading] = useState(false);
+	const [form] = Form.useForm<FormValues>();
 	const { featureResponse } = useSelector<AppState, AppReducer>(
 		(state) => state.app,
 	);
 
 	const { notifications } = useNotifications();
+	const key = Form.useWatch('key', form);
 
 	const onFinish = async (values: unknown | { key: string }): Promise<void> => {
 		const params = values as { key: string };
@@ -66,16 +71,19 @@ function ApplyLicenseForm({
 
 	return (
 		<ApplyFormContainer>
-			<ApplyForm layout="inline" onFinish={onFinish}>
-				<LicenseInput labelAlign="left" name="key">
-					<Input
-						onChange={(e): void => {
-							setKey(e.target.value as string);
-						}}
-						placeholder={t('placeholder_license_key')}
-					/>
+			<ApplyForm
+				form={form}
+				layout="inline"
+				onFinish={onFinish}
+				autoComplete="off"
+			>
+				<LicenseInput
+					name="key"
+					rules={[{ required: true, message: requireErrorMessage('License Key') }]}
+				>
+					<Input placeholder={t('placeholder_license_key')} />
 				</LicenseInput>
-				<FormItem>
+				<Form.Item>
 					<Button
 						loading={loading}
 						disabled={loading}
@@ -84,9 +92,9 @@ function ApplyLicenseForm({
 					>
 						{t('button_apply')}
 					</Button>
-				</FormItem>
+				</Form.Item>
 			</ApplyForm>
-			{key && <div style={{ paddingLeft: '0.5em', color: '#666' }}> {key}</div>}
+			{key && <KeyPreview>{key}</KeyPreview>}
 		</ApplyFormContainer>
 	);
 }
@@ -99,4 +107,8 @@ interface ApplyLicenseFormProps {
 	>;
 }
 
+interface FormValues {
+	key: string;
+}
+
 export default ApplyLicenseForm;
diff --git a/frontend/src/container/Licenses/styles.ts b/frontend/src/container/Licenses/styles.ts
index e1be5a1803..c67b772438 100644
--- a/frontend/src/container/Licenses/styles.ts
+++ b/frontend/src/container/Licenses/styles.ts
@@ -23,3 +23,8 @@ export const LicenseInput = styled(Form.Item)`
 		}
 	}
 `;
+
+export const KeyPreview = styled.div`
+	padding-left: 0.5em;
+	color: #666;
+`;