diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/validation.ts b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/validation.ts
index dea35535d..0fc54c74d 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/validation.ts
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/validation.ts
@@ -14,8 +14,10 @@ export const formSchema = z.object({
     .default(16),
   prefix: z
     .string()
-    .trim()
-    .max(8, { message: "Please limit the prefix to under 8 characters." })
+    .max(8, { message: "Prefixes cannot be longer than 8 characters" })
+    .refine((prefix) => !prefix.includes(" "), {
+      message: "Prefixes cannot contain spaces.",
+    })
     .optional(),
   ownerId: z.string().trim().optional(),
   name: z.string().trim().optional(),
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/default-bytes.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/default-bytes.tsx
index a57cafb9d..061681066 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/settings/default-bytes.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/default-bytes.tsx
@@ -8,7 +8,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { FormField } from "@/components/ui/form";
+import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
@@ -36,7 +36,12 @@ type Props = {
 export const DefaultBytes: React.FC<Props> = ({ keyAuth }) => {
   const router = useRouter();
   const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
+    resolver: async (data, context, options) => {
+      return zodResolver(formSchema)(data, context, options);
+    },
+    mode: "all",
+    shouldFocusError: true,
+    delayError: 100,
     defaultValues: {
       defaultBytes: keyAuth.defaultBytes ?? undefined,
       keyAuthId: keyAuth.id,
@@ -64,43 +69,53 @@ export const DefaultBytes: React.FC<Props> = ({ keyAuth }) => {
   }
 
   return (
-    <form onSubmit={form.handleSubmit(onSubmit)}>
-      <Card>
-        <CardHeader>
-          <CardTitle>Default Bytes</CardTitle>
-          <CardDescription>
-            Set default Bytes for the keys under this API. Default byte size must be between{" "}
-            <span className="font-bold">8 to 255</span>
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="flex flex-col space-y-2">
-            <input type="hidden" name="keyAuthId" value={keyAuth.id} />
-            <label className="hidden sr-only">Default Bytes</label>
-            <FormField
-              control={form.control}
-              name="defaultBytes"
-              render={({ field }) => (
-                <Input
-                  className="max-w-sm"
-                  {...field}
-                  autoComplete="off"
-                  onChange={(e) => field.onChange(Number(e.target.value.replace(/\D/g, "")))}
-                />
-              )}
-            />
-          </div>
-        </CardContent>
-        <CardFooter className="justify-end">
-          <Button
-            variant="primary"
-            disabled={!form.formState.isValid || form.formState.isSubmitting}
-            type="submit"
-          >
-            {form.formState.isSubmitting ? <Loading /> : "Save"}
-          </Button>
-        </CardFooter>
-      </Card>
-    </form>
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <Card>
+          <CardHeader>
+            <CardTitle>Default Bytes</CardTitle>
+            <CardDescription>
+              Set default Bytes for the keys under this API. Default byte size must be between{" "}
+              <span className="font-bold">8 to 255</span>
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-col space-y-2">
+              <input type="hidden" name="keyAuthId" value={keyAuth.id} />
+              <label htmlFor="defaultBytes" className="hidden sr-only">
+                Default Bytes
+              </label>
+              <FormField
+                control={form.control}
+                name="defaultBytes"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="defaultBytes"
+                        className="max-w-sm"
+                        {...field}
+                        autoComplete="off"
+                        onChange={(e) => field.onChange(Number(e.target.value.replace(/\D/g, "")))}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+          </CardContent>
+          <CardFooter className="justify-end">
+            <Button
+              variant="primary"
+              disabled={!form.formState.isValid || form.formState.isSubmitting}
+              type="submit"
+            >
+              {form.formState.isSubmitting ? <Loading /> : "Save"}
+            </Button>
+          </CardFooter>
+        </Card>
+      </form>
+    </Form>
   );
 };
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/default-prefix.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/default-prefix.tsx
index 89af88491..a253e42c6 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/settings/default-prefix.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/settings/default-prefix.tsx
@@ -7,7 +7,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { FormField } from "@/components/ui/form";
+import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
@@ -19,7 +19,12 @@ import { z } from "zod";
 
 const formSchema = z.object({
   keyAuthId: z.string(),
-  defaultPrefix: z.string(),
+  defaultPrefix: z
+    .string()
+    .max(8, { message: "Prefixes cannot be longer than 8 characters" })
+    .refine((prefix) => !prefix.includes(" "), {
+      message: "Prefixes cannot contain spaces.",
+    }),
 });
 
 type Props = {
@@ -32,7 +37,12 @@ type Props = {
 export const DefaultPrefix: React.FC<Props> = ({ keyAuth }) => {
   const router = useRouter();
   const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
+    resolver: async (data, context, options) => {
+      return zodResolver(formSchema)(data, context, options);
+    },
+    mode: "all",
+    shouldFocusError: true,
+    delayError: 100,
     defaultValues: {
       defaultPrefix: keyAuth.defaultPrefix ?? undefined,
       keyAuthId: keyAuth.id,
@@ -50,9 +60,6 @@ export const DefaultPrefix: React.FC<Props> = ({ keyAuth }) => {
     },
   });
   async function onSubmit(values: z.infer<typeof formSchema>) {
-    if (values.defaultPrefix.length > 8) {
-      return toast.error("Default prefix is too long, maximum length is 8 characters.");
-    }
     if (values.defaultPrefix === keyAuth.defaultPrefix) {
       return toast.error("Please provide a different prefix than already existing one as default");
     }
@@ -60,34 +67,57 @@ export const DefaultPrefix: React.FC<Props> = ({ keyAuth }) => {
   }
 
   return (
-    <form onSubmit={form.handleSubmit(onSubmit)}>
-      <Card>
-        <CardHeader>
-          <CardTitle>Default Prefix</CardTitle>
-          <CardDescription>Set default prefix for the keys under this API.</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="flex flex-col space-y-2">
-            <input type="hidden" name="keyAuthId" value={keyAuth.id} />
-            <label className="hidden sr-only">Default Prefix</label>
-            <FormField
-              control={form.control}
-              name="defaultPrefix"
-              render={({ field }) => <Input className="max-w-sm" {...field} autoComplete="off" />}
-            />
-          </div>
-        </CardContent>
-        <CardFooter className="justify-end">
-          <Button
-            variant="primary"
-            disabled={!form.formState.isValid || form.formState.isSubmitting}
-            type="submit"
-            loading={form.formState.isSubmitting}
-          >
-            Save
-          </Button>
-        </CardFooter>
-      </Card>
-    </form>
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <Card>
+          <CardHeader>
+            <CardTitle>Default Prefix</CardTitle>
+            <CardDescription>
+              Set default prefix for the keys under this API. Don't add a trailing underscore, we'll
+              do that automatically
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-col space-y-2">
+              <input type="hidden" name="keyAuthId" value={keyAuth.id} />
+              <label htmlFor="defaultPrefix" className="hidden sr-only">
+                Default Prefix
+              </label>
+              <FormField
+                control={form.control}
+                name="defaultPrefix"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        id="defaultPrefix"
+                        className="max-w-sm"
+                        {...field}
+                        onBlur={(e) => {
+                          if (e.target.value === "") {
+                            return;
+                          }
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+          </CardContent>
+          <CardFooter className="justify-end">
+            <Button
+              variant="primary"
+              disabled={!form.formState.isValid || form.formState.isSubmitting}
+              type="submit"
+              loading={form.formState.isSubmitting}
+            >
+              Save
+            </Button>
+          </CardFooter>
+        </Card>
+      </form>
+    </Form>
   );
 };
diff --git a/apps/dashboard/lib/trpc/routers/api/setDefaultPrefix.ts b/apps/dashboard/lib/trpc/routers/api/setDefaultPrefix.ts
index 1fd0dea30..718a05618 100644
--- a/apps/dashboard/lib/trpc/routers/api/setDefaultPrefix.ts
+++ b/apps/dashboard/lib/trpc/routers/api/setDefaultPrefix.ts
@@ -9,7 +9,12 @@ export const setDefaultApiPrefix = t.procedure
   .use(auth)
   .input(
     z.object({
-      defaultPrefix: z.string().max(8, "Prefix can be a maximum of 8 characters"),
+      defaultPrefix: z
+        .string()
+        .max(8, { message: "Prefixes cannot be longer than 8 characters" })
+        .refine((prefix) => !prefix.includes(" "), {
+          message: "Prefixes cannot contain spaces.",
+        }),
       keyAuthId: z.string(),
     }),
   )
diff --git a/apps/dashboard/lib/trpc/routers/key/create.ts b/apps/dashboard/lib/trpc/routers/key/create.ts
index 692d3ee4f..afe0e9ae1 100644
--- a/apps/dashboard/lib/trpc/routers/key/create.ts
+++ b/apps/dashboard/lib/trpc/routers/key/create.ts
@@ -10,7 +10,13 @@ export const createKey = t.procedure
   .use(auth)
   .input(
     z.object({
-      prefix: z.string().optional(),
+      prefix: z
+        .string()
+        .max(8, { message: "Prefixes cannot be longer than 8 characters" })
+        .refine((prefix) => !prefix.includes(" "), {
+          message: "Prefixes cannot contain spaces.",
+        })
+        .optional(),
       bytes: z.number().int().gte(16).default(16),
       keyAuthId: z.string(),
       ownerId: z.string().nullish(),