diff --git a/docs/src/app/[locale]/mykey/Form.tsx b/docs/src/app/[locale]/mykey/Form.tsx
new file mode 100644
index 0000000..03d242d
--- /dev/null
+++ b/docs/src/app/[locale]/mykey/Form.tsx
@@ -0,0 +1,176 @@
+"use client";
+
+import { useFormState, useFormStatus } from "react-dom";
+
+const initialState = {
+	message: "",
+};
+
+export default function MyKeyForm({
+	translateLocal,
+}: Readonly<{
+	translateLocal: (
+		prevState: any,
+		formData: FormData,
+	) => Promise<{
+		message: string;
+	}>;
+}>) {
+	const [state, formAction] = useFormState(translateLocal, initialState);
+
+	return (
+		<form action={formAction} method="post" className="space-y-5">
+			<div>
+				<label
+					htmlFor="ownkey"
+					className="mb-1 block text-sm font-medium text-gray-700"
+				>
+					Secret Key
+				</label>
+				<input
+					type="text"
+					name="ownkey"
+					id="ownkey"
+					className="w-full rounded-md border border-gray-300 p-3 text-gray-700 focus:border-blue-500 focus:outline-none focus:ring focus:ring-blue-200"
+					placeholder="Enter your secret key"
+				/>
+			</div>
+			<div>
+				<label
+					htmlFor="ownendpoint"
+					className="mb-1 block text-sm font-medium text-gray-700"
+				>
+					Azure Endpoint
+				</label>
+				<input
+					type="text"
+					name="ownendpoint"
+					id="ownendpoint"
+					className="w-full rounded-md border border-gray-300 p-3 text-gray-700 focus:border-blue-500 focus:outline-none focus:ring focus:ring-blue-200"
+					placeholder="Enter your Azure endpoint"
+					defaultValue="https://api.cognitive.microsofttranslator.com"
+				/>
+			</div>
+			<div>
+				<label
+					htmlFor="ownlocation"
+					className="mb-1 block text-sm font-medium text-gray-700"
+				>
+					Location
+				</label>
+				<input
+					type="text"
+					name="ownlocation"
+					id="ownlocation"
+					className="w-full rounded-md border border-gray-300 p-3 text-gray-700 focus:border-blue-500 focus:outline-none focus:ring focus:ring-blue-200"
+					placeholder="Enter your location: e.g. westus"
+				/>
+			</div>
+
+			<div className="space-y-2">
+				<label
+					htmlFor="ownfromlang"
+					className="mb-1 block text-sm font-medium text-gray-700"
+				>
+					From Language
+				</label>
+				<select
+					name="ownfromlang"
+					id="ownfromlang"
+					className="w-full rounded-md border border-gray-300 p-3 text-gray-700 focus:border-blue-500 focus:outline-none focus:ring focus:ring-blue-200"
+					defaultValue="en"
+				>
+					<option value="en">English</option>
+					<option value="pt">Portuguese</option>
+					<option value="fr">French</option>
+					<option value="de">German</option>
+					<option value="it">Italian</option>
+					<option value="es">Spanish</option>
+				</select>
+
+				<label
+					htmlFor="owntolang"
+					className="mb-1 block text-sm font-medium text-gray-700"
+				>
+					To Languages
+				</label>
+
+				<select
+					name="owntolang"
+					id="owntolang"
+					className="w-full rounded-md border border-gray-300 p-3 text-gray-700 focus:border-blue-500 focus:outline-none focus:ring focus:ring-blue-200"
+					defaultValue="pt"
+				>
+					<option value="en">English</option>
+					<option value="pt">Portuguese</option>
+					<option value="fr">French</option>
+					<option value="de">German</option>
+					<option value="it">Italian</option>
+					<option value="es">Spanish</option>
+				</select>
+			</div>
+
+			<div>
+				<label
+					htmlFor="owntexttotranslate"
+					className="mb-1 block text-sm font-medium text-gray-700"
+				>
+					Text to translate
+				</label>
+				<textarea
+					name="owntexttotranslate"
+					id="owntexttotranslate"
+					className="max-h-60 min-h-20 w-full rounded-md border border-gray-300 p-3 text-gray-700 focus:border-blue-500 focus:outline-none focus:ring focus:ring-blue-200"
+					placeholder="Enter text to translate"
+				/>
+			</div>
+			<div>
+				<label
+					htmlFor="owntexttranslated"
+					className="mb-1 block text-sm font-medium text-gray-700"
+				>
+					Translated text (if any)
+				</label>
+				<textarea
+					name="owntexttranslated"
+					id="owntexttranslated"
+					disabled
+					className="max-h-40 min-h-32 w-full rounded-md border border-gray-300 p-3 text-gray-700 focus:border-blue-500 focus:outline-none focus:ring focus:ring-blue-200"
+					placeholder="Translated text will appear here"
+					value={state.message}
+				/>
+			</div>
+			<div className="text-center">
+				<Button />
+			</div>
+		</form>
+	);
+}
+
+function Button() {
+	const { pending } = useFormStatus();
+
+	return (
+		<>
+			{pending ? (
+				<LoadingSpinner />
+			) : (
+				<button
+					type="submit"
+					disabled={pending}
+					className="mt-6 inline-flex items-center justify-center rounded-md bg-blue-600 px-5 py-3 font-semibold text-white transition duration-150 ease-in-out hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2"
+				>
+					Test Key
+				</button>
+			)}
+		</>
+	);
+}
+
+function LoadingSpinner() {
+	return (
+		<div className="flex items-center justify-center">
+			<div className="h-16 w-16 animate-spin rounded-full border-4 border-blue-500 border-t-transparent"></div>
+		</div>
+	);
+}
diff --git a/docs/src/app/[locale]/mykey/page.tsx b/docs/src/app/[locale]/mykey/page.tsx
new file mode 100644
index 0000000..0b4ae89
--- /dev/null
+++ b/docs/src/app/[locale]/mykey/page.tsx
@@ -0,0 +1,66 @@
+import { translateText } from "azure-translator-code";
+
+import MyKeyForm from "./Form";
+
+export default async function MyKeyPage() {
+	async function translateLocal(prevState: any, formData: FormData) {
+		"use server";
+		const data = {
+			secretKey: formData.get("ownkey") as string,
+			endpoint: formData.get("ownendpoint") as string,
+			location: formData.get("ownlocation") as string,
+			text: formData.get("owntexttotranslate") as string,
+			fromLang: formData.get("ownfromlang") as string,
+			toLang: formData.get("owntolang") as string,
+		};
+
+		try {
+			if (
+				!data.secretKey.trim() ||
+				!data.endpoint.trim() ||
+				!data.location.trim() ||
+				!data.text.trim() ||
+				!data.fromLang.trim() ||
+				!data.toLang.trim()
+			) {
+				return {
+					message: "Please fill in all fields",
+				};
+			}
+
+			const response = await translateText(
+				data.text,
+				data.fromLang,
+				[data.toLang],
+				data.endpoint,
+				data.secretKey,
+				data.location,
+			);
+
+			return {
+				message: response[0].translations[0].text as unknown as string,
+			};
+		} catch {
+			return {
+				message: "An error occurred, check your secret key and try again",
+			};
+		}
+	}
+	return (
+		<main className="flex min-h-screen items-center justify-center bg-gradient-to-br from-blue-50 to-blue-200 p-4 sm:p-8">
+			<div className="relative mx-auto mt-5 w-full max-w-3xl rounded-lg bg-white p-8 shadow-lg">
+				<h1 className="mb-6 text-center text-3xl font-extrabold text-gray-800">
+					Test your Secret Key
+				</h1>
+				<p className="mb-6 text-center text-lg text-gray-600">
+					Enter your secret key, endpoint, location, text to translate, and
+					translation languages to test your key. !!! IMPORTANT !!! We do not
+					store your secret key, endpoint, location, or any other information
+					you enter here. This is a test page to check if your key is working
+					correctly.
+				</p>
+				<MyKeyForm translateLocal={translateLocal} />
+			</div>
+		</main>
+	);
+}