diff --git a/apps/webservice/src/app/[workspaceSlug]/SidebarCreateMenu.tsx b/apps/webservice/src/app/[workspaceSlug]/SidebarCreateMenu.tsx
index 5fc2c8db..9c1d73c1 100644
--- a/apps/webservice/src/app/[workspaceSlug]/SidebarCreateMenu.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/SidebarCreateMenu.tsx
@@ -1,3 +1,4 @@
+import type { Workspace } from "@ctrlplane/db/schema";
 import { useState } from "react";
 import { TbPlus } from "react-icons/tb";
 
@@ -16,10 +17,10 @@ import { CreateReleaseDialog } from "./_components/CreateRelease";
 import { CreateSystemDialog } from "./_components/CreateSystem";
 
 export const SidebarCreateMenu: React.FC<{
-  workspaceId: string;
+  workspace: Workspace;
   deploymentId?: string;
   systemId?: string;
-}> = ({ workspaceId, deploymentId, systemId }) => {
+}> = (props) => {
   const [open, setOpen] = useState(false);
   return (
     <DropdownMenu open={open} onOpenChange={setOpen}>
@@ -38,21 +39,20 @@ export const SidebarCreateMenu: React.FC<{
         forceMount
       >
         <DropdownMenuGroup>
-          <CreateSystemDialog workspaceId={workspaceId}>
+          <CreateSystemDialog
+            workspace={props.workspace}
+            onSuccess={() => setOpen(false)}
+          >
             <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
               New System
             </DropdownMenuItem>
           </CreateSystemDialog>
-          <CreateDeploymentDialog defaultSystemId={systemId}>
+          <CreateDeploymentDialog {...props} onSuccess={() => setOpen(false)}>
             <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
               New Deployment
             </DropdownMenuItem>
           </CreateDeploymentDialog>
-          <CreateReleaseDialog
-            deploymentId={deploymentId}
-            systemId={systemId}
-            onClose={() => setOpen(false)}
-          >
+          <CreateReleaseDialog {...props} onClose={() => setOpen(false)}>
             <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
               New Release
             </DropdownMenuItem>
diff --git a/apps/webservice/src/app/[workspaceSlug]/SidebarMain.tsx b/apps/webservice/src/app/[workspaceSlug]/SidebarMain.tsx
index 373e22dd..7f5a16bf 100644
--- a/apps/webservice/src/app/[workspaceSlug]/SidebarMain.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/SidebarMain.tsx
@@ -55,7 +55,7 @@ export const SidebarMain: React.FC<{
           </SearchDialog>
 
           <SidebarCreateMenu
-            workspaceId={workspace.id}
+            workspace={workspace}
             systemId={system.data?.id}
             deploymentId={deployment.data?.id}
           />
diff --git a/apps/webservice/src/app/[workspaceSlug]/SidebarSystems.tsx b/apps/webservice/src/app/[workspaceSlug]/SidebarSystems.tsx
index f40b369d..1ff1130f 100644
--- a/apps/webservice/src/app/[workspaceSlug]/SidebarSystems.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/SidebarSystems.tsx
@@ -83,7 +83,7 @@ export const SidebarSystems: React.FC<{
       </CollapsibleTrigger>
       <CollapsibleContent className="space-y-1">
         {systems.length === 0 && (
-          <CreateSystemDialog workspaceId={workspace.id}>
+          <CreateSystemDialog workspace={workspace}>
             <Button
               className="flex w-full items-center justify-start gap-1.5 text-left"
               variant="ghost"
diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/CreateDeployment.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/CreateDeployment.tsx
index a1e2ca07..be820ce4 100644
--- a/apps/webservice/src/app/[workspaceSlug]/_components/CreateDeployment.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/_components/CreateDeployment.tsx
@@ -1,10 +1,11 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 import slugify from "slugify";
 import { z } from "zod";
 
+import { deploymentSchema } from "@ctrlplane/db/schema";
 import { Button } from "@ctrlplane/ui/button";
 import {
   Dialog,
@@ -21,6 +22,8 @@ import {
   FormField,
   FormItem,
   FormLabel,
+  FormMessage,
+  FormRootError,
   useForm,
 } from "@ctrlplane/ui/form";
 import { Input } from "@ctrlplane/ui/input";
@@ -36,68 +39,68 @@ import { Textarea } from "@ctrlplane/ui/textarea";
 
 import { api } from "~/trpc/react";
 
-const deploymentForm = z.object({
-  name: z.string().min(3).max(255),
-  slug: z.string().min(3).max(255),
-  systemId: z.string().uuid(),
-  description: z.string(),
-});
+const deploymentForm = z.object(deploymentSchema.omit({ id: true }).shape);
 
 export const CreateDeploymentDialog: React.FC<{
-  defaultSystemId?: string;
   children?: React.ReactNode;
-}> = ({ children, defaultSystemId = "" }) => {
+  defaultSystemId?: string;
+  onSuccess?: () => void;
+}> = ({ children, defaultSystemId = undefined, onSuccess }) => {
+  const [open, setOpen] = useState(false);
   const { workspaceSlug } = useParams<{ workspaceSlug: string }>();
   const workspace = api.workspace.bySlug.useQuery(workspaceSlug);
-  const create = api.deployment.create.useMutation();
+  const systems = api.system.list.useQuery(
+    { workspaceId: workspace.data?.id ?? "" },
+    { enabled: workspace.isSuccess },
+  );
+  const createDeployment = api.deployment.create.useMutation();
+  const router = useRouter();
+
   const form = useForm({
     schema: deploymentForm,
     defaultValues: {
-      systemId: defaultSystemId,
+      systemId: defaultSystemId ?? systems.data?.items[0]?.id,
       name: "",
       slug: "",
       description: "",
     },
+    mode: "onSubmit",
   });
 
-  const { systemId, name } = form.watch();
-  useEffect(
-    () => form.setValue("slug", slugify(name, { lower: true })),
-    [form, name],
-  );
-  const [open, setOpen] = useState(false);
-  useEffect(() => {
-    if (!open) return;
-    if (defaultSystemId === "") return;
-    window.requestAnimationFrame(() => {
-      form.setFocus("name");
-    });
-  }, [open, form, defaultSystemId]);
+  const { handleSubmit, watch, setValue, setError } = form;
 
-  const systems = api.system.list.useQuery(
-    { workspaceId: workspace.data?.id ?? "" },
-    { enabled: workspace.isSuccess },
-  );
-  useEffect(() => {
-    if (defaultSystemId !== "") return;
-    if (systemId !== "") return;
-    const firstSystem = systems.data?.items.at(0);
-    if (firstSystem == null) return;
-    form.setValue("systemId", firstSystem.id);
-  }, [defaultSystemId, form, systems, systemId]);
+  watch((data, { name: fieldName }) => {
+    if (fieldName === "name")
+      setValue("slug", slugify(data.name ?? "", { lower: true }), {
+        shouldTouch: true,
+      });
+  });
 
-  const router = useRouter();
-  const onSubmit = form.handleSubmit(async (data) => {
-    const deployment = await create.mutateAsync(data);
-    router.refresh();
-    const slug = systems.data?.items.find(
-      (system) => system.id === deployment.systemId,
+  const onSubmit = handleSubmit(async (deployment) => {
+    const systemSlug = systems.data?.items.find(
+      (system) => system.id === form.getValues("systemId"),
     )?.slug;
-    if (slug == null) return;
-    router.push(
-      `/${workspaceSlug}/systems/${slug}/deployments/${deployment.slug}`,
-    );
-    setOpen(false);
+    await createDeployment
+      .mutateAsync(
+        deployment as {
+          systemId: string;
+          name: string;
+          slug: string;
+          description: string;
+        },
+      )
+      .then(() => {
+        router.push(
+          `/${workspaceSlug}/systems/${systemSlug}/deployments/${deployment.slug}`,
+        );
+        setOpen(false);
+        onSuccess?.();
+      })
+      .catch(() => {
+        setError("root", {
+          message: "Deployment with this slug already exists",
+        });
+      });
   });
 
   return (
@@ -136,6 +139,7 @@ export const CreateDeploymentDialog: React.FC<{
                       </SelectContent>
                     </Select>
                   </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -151,6 +155,7 @@ export const CreateDeploymentDialog: React.FC<{
                       {...field}
                     />
                   </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -163,6 +168,7 @@ export const CreateDeploymentDialog: React.FC<{
                   <FormControl>
                     <Input {...field} />
                   </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -175,9 +181,11 @@ export const CreateDeploymentDialog: React.FC<{
                   <FormControl>
                     <Textarea {...field} />
                   </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />
+            <FormRootError />
             <DialogFooter>
               <Button type="submit">Create</Button>
             </DialogFooter>
diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/CreateRelease.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/CreateRelease.tsx
index 37afeefb..72cce779 100644
--- a/apps/webservice/src/app/[workspaceSlug]/_components/CreateRelease.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/_components/CreateRelease.tsx
@@ -23,6 +23,7 @@ import {
   FormField,
   FormItem,
   FormLabel,
+  FormRootError,
   useFieldArray,
   useForm,
 } from "@ctrlplane/ui/form";
@@ -368,6 +369,7 @@ export const CreateReleaseDialog: React.FC<{
               <Button type="submit">Create</Button>
             </DialogFooter>
           </form>
+          <FormRootError />
         </Form>
       </DialogContent>
     </Dialog>
diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/CreateSystem.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/CreateSystem.tsx
index d1a751c1..09024ae1 100644
--- a/apps/webservice/src/app/[workspaceSlug]/_components/CreateSystem.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/_components/CreateSystem.tsx
@@ -1,10 +1,12 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
-import { useParams, useRouter } from "next/navigation";
+import type { Workspace } from "@ctrlplane/db/schema";
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
 import slugify from "slugify";
 import { z } from "zod";
 
+import { systemSchema } from "@ctrlplane/db/schema";
 import { Button } from "@ctrlplane/ui/button";
 import {
   Dialog,
@@ -21,6 +23,8 @@ import {
   FormField,
   FormItem,
   FormLabel,
+  FormMessage,
+  FormRootError,
   useForm,
 } from "@ctrlplane/ui/form";
 import { Input } from "@ctrlplane/ui/input";
@@ -28,47 +32,48 @@ import { Textarea } from "@ctrlplane/ui/textarea";
 
 import { api } from "~/trpc/react";
 
-const systemForm = z.object({
-  name: z.string().min(3).max(255),
-  slug: z.string().min(3).max(255),
-  description: z.string().default(""),
-});
+const systemForm = z.object(systemSchema.shape);
 
 export const CreateSystemDialog: React.FC<{
   children: React.ReactNode;
-  workspaceId: string;
-}> = ({ children, workspaceId }) => {
+  workspace: Workspace;
+  onSuccess?: () => void;
+}> = ({ children, workspace, onSuccess }) => {
   const [open, setOpen] = useState(false);
-  const { workspaceSlug } = useParams<{ workspaceSlug: string }>();
-  const create = api.system.create.useMutation();
+  const createSystem = api.system.create.useMutation();
+  const router = useRouter();
+
   const form = useForm({
     schema: systemForm,
-    defaultValues: {
-      name: "",
-      slug: "",
-      description: "",
-    },
+    defaultValues: { name: "", slug: "", description: "" },
+    mode: "onSubmit",
   });
 
-  const router = useRouter();
-  const utils = api.useUtils();
-  const onSubmit = form.handleSubmit(async (values) => {
-    try {
-      const system = await create.mutateAsync({ workspaceId, ...values });
-      await utils.system.list.invalidate();
-      router.push(`/${workspaceSlug}/systems/${system.slug}`);
-      router.refresh();
-    } catch (e) {
-      console.error(e);
-    }
-    setOpen(false);
+  const { handleSubmit, watch, setValue, setError } = form;
+
+  watch((data, { name: fieldName }) => {
+    if (fieldName === "name")
+      setValue("slug", slugify(data.name ?? "", { lower: true }), {
+        shouldValidate: true,
+      });
   });
 
-  const { name } = form.watch();
-  useEffect(
-    () => form.setValue("slug", slugify(name, { lower: true })),
-    [form, name],
-  );
+  const onSubmit = handleSubmit(async (system) => {
+    const systemSlug = system.slug;
+    await createSystem
+      .mutateAsync({ workspaceId: workspace.id, ...system })
+      .then(() => {
+        router.push(`/${workspace.slug}/systems/${systemSlug}`);
+        router.refresh();
+        setOpen(false);
+        onSuccess?.();
+      })
+      .catch(() => {
+        setError("root", {
+          message: "System with this slug already exists",
+        });
+      });
+  });
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -79,11 +84,10 @@ export const CreateSystemDialog: React.FC<{
             <DialogHeader>
               <DialogTitle>New System</DialogTitle>
               <DialogDescription>
-                Systems are a group of processes, releases, and runbooks for an
+                Systems are a group of processes, releases, and runbooks for
                 applications or services.
               </DialogDescription>
             </DialogHeader>
-
             <FormField
               control={form.control}
               name="name"
@@ -96,6 +100,7 @@ export const CreateSystemDialog: React.FC<{
                       {...field}
                     />
                   </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -111,6 +116,7 @@ export const CreateSystemDialog: React.FC<{
                       {...field}
                     />
                   </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -121,13 +127,20 @@ export const CreateSystemDialog: React.FC<{
                 <FormItem>
                   <FormLabel>Description</FormLabel>
                   <FormControl>
-                    <Textarea placeholder="" {...field} />
+                    <Textarea
+                      placeholder="Describe your system..."
+                      {...field}
+                    />
                   </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />
+            <FormRootError />
             <DialogFooter>
-              <Button type="submit">Create</Button>
+              <Button type="submit" disabled={createSystem.isPending}>
+                Create system
+              </Button>
             </DialogFooter>
           </form>
         </Form>
diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/DeleteDeployment.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/DeleteDeployment.tsx
index cd908d1c..952768e3 100644
--- a/apps/webservice/src/app/[workspaceSlug]/_components/DeleteDeployment.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/_components/DeleteDeployment.tsx
@@ -31,7 +31,7 @@ export const DeleteDeploymentDialog: React.FC<DeleteDeploymentProps> = ({
   const deleteDeployment = api.deployment.delete.useMutation();
 
   const onDelete = async () => {
-    await deleteDeployment.mutateAsync(id);
+    await deleteDeployment.mutateAsync(id).catch(console.error);
     router.refresh();
     setIsOpen(false);
   };
diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/DeploymentOptionsDropdown.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/DeploymentOptionsDropdown.tsx
index 2a53c1aa..a4cc70b4 100644
--- a/apps/webservice/src/app/[workspaceSlug]/_components/DeploymentOptionsDropdown.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/_components/DeploymentOptionsDropdown.tsx
@@ -20,6 +20,7 @@ export const DeploymentOptionsDropdown: React.FC<{
   name: string;
   slug: string;
   description: string;
+  systemId: string;
 }> = (props) => {
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
@@ -43,7 +44,7 @@ export const DeploymentOptionsDropdown: React.FC<{
                 Edit
               </DropdownMenuItem>
             </EditDeploymentDialog>
-            <DropdownMenuItem onSelect={() => setDeleteDialogOpen(true)}>
+            <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
               <TbTrash className="mr-2" />
               Delete
             </DropdownMenuItem>
diff --git a/apps/webservice/src/app/[workspaceSlug]/_components/EditDeploymentDialog.tsx b/apps/webservice/src/app/[workspaceSlug]/_components/EditDeploymentDialog.tsx
index e89e5020..d22e35aa 100644
--- a/apps/webservice/src/app/[workspaceSlug]/_components/EditDeploymentDialog.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/_components/EditDeploymentDialog.tsx
@@ -2,11 +2,10 @@
 
 import React, { useState } from "react";
 import { useRouter } from "next/navigation";
-import { zodResolver } from "@hookform/resolvers/zod";
 import isEqual from "lodash/isEqual";
-import { useForm } from "react-hook-form";
 import { z } from "zod";
 
+import { deploymentSchema } from "@ctrlplane/db/schema";
 import { Button } from "@ctrlplane/ui/button";
 import { CopyButton } from "@ctrlplane/ui/copy-button";
 import {
@@ -24,41 +23,66 @@ import {
   FormField,
   FormItem,
   FormLabel,
+  FormMessage,
+  FormRootError,
+  useForm,
 } from "@ctrlplane/ui/form";
 import { Input } from "@ctrlplane/ui/input";
 import { Textarea } from "@ctrlplane/ui/textarea";
 
 import { api } from "~/trpc/react";
 
-const deploymentForm = z.object({
-  id: z.string().uuid(),
-  name: z.string().min(3).max(255),
-  slug: z.string().min(3).max(255),
-  description: z.string().optional(),
-});
+const deploymentForm = z.object(deploymentSchema.shape);
 
-type DeploymentFormValues = z.infer<typeof deploymentForm>;
-
-export const EditDeploymentDialog: React.FC<
-  DeploymentFormValues & { children?: React.ReactNode }
-> = ({ id, name, slug, description, children }) => {
-  const router = useRouter();
-  const update = api.deployment.update.useMutation();
+export const EditDeploymentDialog: React.FC<{
+  children: React.ReactNode;
+  systemId: string;
+  id: string;
+  name: string;
+  slug: string;
+  description: string;
+}> = ({ children, ...props }) => {
   const [open, setOpen] = useState(false);
+  const updateDeployment = api.deployment.update.useMutation();
+  const router = useRouter();
+  const { systemId, id, name, slug, description } = props;
 
   const form = useForm({
-    resolver: zodResolver(deploymentForm),
-    defaultValues: { id, name, slug, description },
+    schema: deploymentForm,
+    defaultValues: { ...props },
+    mode: "onSubmit",
   });
 
-  const onSubmit = form.handleSubmit(async (data) => {
-    setOpen(false);
-    const isDataChanged = !isEqual(data, { name, slug, description });
-    if (!isDataChanged) return;
+  const { handleSubmit, setError } = form;
+
+  const onSubmit = handleSubmit(async (data) => {
+    const isDataChanged = !isEqual(data, {
+      id,
+      name,
+      slug,
+      description,
+      systemId,
+    });
+    console.log("isDataChanged", isDataChanged);
+    console.log("data", data);
+    console.log("props", props);
 
-    await update.mutateAsync({ id, data });
+    if (!isDataChanged) {
+      setError("root", { message: "No changes made to the deployment." });
+      return;
+    }
 
-    router.refresh();
+    await updateDeployment
+      .mutateAsync({ id: props.id, data })
+      .then(() => {
+        setOpen(false);
+        router.refresh();
+      })
+      .catch(() => {
+        setError("root", {
+          message: "Deployment with this slug already exists",
+        });
+      });
   });
 
   return (
@@ -85,6 +109,7 @@ export const EditDeploymentDialog: React.FC<
                       {...field}
                     />
                   </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -97,6 +122,7 @@ export const EditDeploymentDialog: React.FC<
                   <FormControl>
                     <Input {...field} />
                   </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -109,6 +135,7 @@ export const EditDeploymentDialog: React.FC<
                   <FormControl>
                     <Textarea {...field} />
                   </FormControl>
+                  <FormMessage />
                 </FormItem>
               )}
             />
@@ -119,15 +146,16 @@ export const EditDeploymentDialog: React.FC<
                 <FormItem>
                   <FormLabel>ID</FormLabel>
                   <Input
-                    value={id}
+                    value={props.id}
                     readOnly
                     className="bg-gray-800 text-gray-100"
                   />
                 </FormItem>
               )}
             />
+            <FormRootError />
             <DialogFooter>
-              <CopyButton textToCopy={id} />
+              <CopyButton textToCopy={props.id} />
               <div className="flex-grow" />
               <Button type="submit">Save</Button>
             </DialogFooter>
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/SystemGettingStarted.tsx b/apps/webservice/src/app/[workspaceSlug]/systems/SystemGettingStarted.tsx
index 18cbccae..ba330343 100644
--- a/apps/webservice/src/app/[workspaceSlug]/systems/SystemGettingStarted.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/systems/SystemGettingStarted.tsx
@@ -1,12 +1,13 @@
+import type { Workspace } from "@ctrlplane/db/schema";
 import { TbTopologyComplex } from "react-icons/tb";
 
 import { Button } from "@ctrlplane/ui/button";
 
 import { CreateSystemDialog } from "../_components/CreateSystem";
 
-export const SystemGettingStarted: React.FC<{ workspaceId: string }> = ({
-  workspaceId,
-}) => {
+export const SystemGettingStarted: React.FC<{
+  workspace: Workspace;
+}> = (props) => {
   return (
     <div className="h-full w-full p-20">
       <div className="container m-auto max-w-xl space-y-6 p-20">
@@ -23,7 +24,7 @@ export const SystemGettingStarted: React.FC<{ workspaceId: string }> = ({
           </p>
         </div>
         <div className="flex items-center gap-2">
-          <CreateSystemDialog workspaceId={workspaceId}>
+          <CreateSystemDialog {...props}>
             <Button size="sm">Create System</Button>
           </CreateSystemDialog>
           <Button size="sm" variant="secondary">
diff --git a/apps/webservice/src/app/[workspaceSlug]/systems/page.tsx b/apps/webservice/src/app/[workspaceSlug]/systems/page.tsx
index e8ea6d72..f5f0cc74 100644
--- a/apps/webservice/src/app/[workspaceSlug]/systems/page.tsx
+++ b/apps/webservice/src/app/[workspaceSlug]/systems/page.tsx
@@ -26,7 +26,7 @@ export default async function SystemsPage({
         <SystemBreadcrumbNavbar params={params} />
       </TopNav>
       {systemsAll.total === 0 ? (
-        <SystemGettingStarted workspaceId={workspace.id} />
+        <SystemGettingStarted workspace={workspace} />
       ) : (
         <>
           <JobHistoryChart workspace={workspace} />
diff --git a/apps/webservice/src/app/workspaces/create/page.tsx b/apps/webservice/src/app/workspaces/create/page.tsx
index 6806e16b..a51c9596 100644
--- a/apps/webservice/src/app/workspaces/create/page.tsx
+++ b/apps/webservice/src/app/workspaces/create/page.tsx
@@ -1,12 +1,14 @@
 "use client";
 
-import { useEffect } from "react";
 import { useRouter } from "next/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { signOut, useSession } from "next-auth/react";
+import { useForm } from "react-hook-form";
 import { TbCheck } from "react-icons/tb";
 import slugify from "slugify";
 import { z } from "zod";
 
+import { workspaceSchema } from "@ctrlplane/db/schema";
 import { Button } from "@ctrlplane/ui/button";
 import { Card } from "@ctrlplane/ui/card";
 import {
@@ -23,42 +25,42 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-  useForm,
+  FormRootError,
 } from "@ctrlplane/ui/form";
 import { Input } from "@ctrlplane/ui/input";
 
 import { api } from "~/trpc/react";
 
-const workspaceForm = z.object({
-  name: z.string().min(3).max(30),
-  slug: z
-    .string()
-    .min(3)
-    .max(30)
-    .refine((slug) => slug === slugify(slug, { lower: true }), {
-      message: "Must be a valid URL",
-    }),
-});
+const workspaceForm = z.object(workspaceSchema.shape);
+type WorkspaceFormValues = z.infer<typeof workspaceForm>;
 
 export default function WorkspaceJoin() {
   const { data: session } = useSession();
   const create = api.workspace.create.useMutation();
-  const form = useForm({
-    disabled: create.isPending,
-    schema: workspaceForm,
+  const router = useRouter();
+
+  const form = useForm<WorkspaceFormValues>({
+    resolver: zodResolver(workspaceForm),
     defaultValues: { name: "", slug: "" },
   });
 
-  const { name } = form.watch();
-  useEffect(
-    () => form.setValue("slug", slugify(name, { lower: true })),
-    [form, name],
-  );
+  const { handleSubmit, watch, setValue, setError } = form;
 
-  const router = useRouter();
-  const onSubmit = form.handleSubmit(async (data) => {
-    await create.mutateAsync(data);
-    router.push(`/${data.slug}`);
+  watch((data, { name: fieldName }) => {
+    if (fieldName === "name")
+      setValue("slug", slugify(data.name ?? "", { lower: true }));
+  });
+
+  const onSubmit = handleSubmit(async (data) => {
+    try {
+      await create.mutateAsync(data);
+      router.push(`/${data.slug}`);
+    } catch {
+      setError("root", {
+        message: "Workspace with this name already exists",
+        type: "manual",
+      });
+    }
   });
 
   return (
@@ -120,7 +122,7 @@ export default function WorkspaceJoin() {
                   </FormItem>
                 )}
               />
-
+              <FormRootError />
               <Button
                 disabled={create.isPending}
                 size="lg"
diff --git a/docker-compose.yaml b/docker-compose.yaml
index aa60b576..86d92350 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -1,5 +1,3 @@
-version: "3.8"
-
 services:
   database:
     container_name: ctrlplane-database
diff --git a/packages/api/src/router/workspace.ts b/packages/api/src/router/workspace.ts
index 90ad9825..9af72292 100644
--- a/packages/api/src/router/workspace.ts
+++ b/packages/api/src/router/workspace.ts
@@ -241,10 +241,8 @@ export const workspaceRouter = createTRPCRouter({
 
         await tx.insert(entityRole).values({
           roleId: predefinedRoles.admin.id,
-
           scopeType: "workspace",
           scopeId: w.id,
-
           entityType: "user",
           entityId: ctx.session.user.id,
         });
diff --git a/packages/db/src/index.ts b/packages/db/src/index.ts
index 83d64ff7..dc132e56 100644
--- a/packages/db/src/index.ts
+++ b/packages/db/src/index.ts
@@ -1,3 +1,8 @@
 export * from "drizzle-orm/sql";
 export * from "drizzle-orm/pg-core";
 export * from "./common.js";
+export {
+  deploymentSchema,
+  workspaceSchema,
+  systemSchema,
+} from "./schema/index.js";
diff --git a/packages/db/src/schema/deployment.ts b/packages/db/src/schema/deployment.ts
index 98d8090f..4eaf24ff 100644
--- a/packages/db/src/schema/deployment.ts
+++ b/packages/db/src/schema/deployment.ts
@@ -7,6 +7,27 @@ import { githubConfigFile } from "./github.js";
 import { jobAgent } from "./job-agent.js";
 import { system } from "./system.js";
 
+export const deploymentSchema = z.object({
+  systemId: z.string().uuid(),
+  id: z.string().uuid({ message: "Invalid ID format." }),
+  name: z
+    .string()
+    .min(3, { message: "Deployment name must be at least 3 characters long." })
+    .max(255, {
+      message: "Deployment name must be at most 255 characters long.",
+    }),
+  slug: z
+    .string()
+    .min(3, { message: "Slug must be at least 3 characters long." })
+    .max(255, { message: "Slug must be at most 255 characters long." }),
+  description: z
+    .string()
+    .max(255, { message: "Description must be at most 255 characters long." })
+    .refine((val) => !val || val.length >= 3, {
+      message: "Description must be at least 3 characters long if provided.",
+    }),
+});
+
 export const deployment = pgTable(
   "deployment",
   {
@@ -33,8 +54,7 @@ export const deployment = pgTable(
 );
 
 const deploymentInsert = createInsertSchema(deployment, {
-  slug: z.string().min(1),
-  name: z.string().min(1),
+  ...deploymentSchema.shape,
   jobAgentConfig: z.record(z.any()),
 }).omit({ id: true });
 
diff --git a/packages/db/src/schema/system.ts b/packages/db/src/schema/system.ts
index 3e1ca2e1..7f8c61d3 100644
--- a/packages/db/src/schema/system.ts
+++ b/packages/db/src/schema/system.ts
@@ -1,9 +1,28 @@
 import type { InferSelectModel } from "drizzle-orm";
 import { pgTable, text, uniqueIndex, uuid } from "drizzle-orm/pg-core";
 import { createInsertSchema } from "drizzle-zod";
+import { z } from "zod";
 
 import { workspace } from "./workspace.js";
 
+export const systemSchema = z.object({
+  name: z
+    .string()
+    .min(3, { message: "System name must be at least 3 characters long." })
+    .max(30, { message: "System Name must be at most 30 characters long." }),
+  slug: z
+    .string()
+    .min(3, { message: "Slug must be at least 3 characters long." })
+    .max(255, { message: "Slug must be at most 255 characters long." }),
+  description: z
+    .string()
+    .max(255, { message: "Description must be at most 255 characters long." })
+    .optional()
+    .refine((val) => !val || val.length >= 3, {
+      message: "Description must be at least 3 characters long if provided.",
+    }),
+});
+
 export const system = pgTable(
   "system",
   {
@@ -18,10 +37,10 @@ export const system = pgTable(
   (t) => ({ uniq: uniqueIndex().on(t.workspaceId, t.slug) }),
 );
 
-export const createSystem = createInsertSchema(system).omit({ id: true });
+export const createSystem = createInsertSchema(system, systemSchema.shape).omit(
+  { id: true },
+);
 
-export const updateSystem = createInsertSchema(system)
-  .partial()
-  .omit({ id: true });
+export const updateSystem = createSystem.partial();
 
 export type System = InferSelectModel<typeof system>;
diff --git a/packages/db/src/schema/workspace.ts b/packages/db/src/schema/workspace.ts
index f55cbfaf..9474e177 100644
--- a/packages/db/src/schema/workspace.ts
+++ b/packages/db/src/schema/workspace.ts
@@ -10,19 +10,27 @@ export const workspace = pgTable("workspace", {
   googleServiceAccountEmail: text("google_service_account_email"),
 });
 
-export const createWorkspace = createInsertSchema(workspace, {
-  name: z.string().max(50).min(3),
+export const workspaceSchema = z.object({
+  name: z
+    .string()
+    .min(3, { message: "Workspace name must be at least 3 characters long." })
+    .max(30, { message: "Workspace Name must be at most 30 characters long." }),
   slug: z
     .string()
-    .min(3)
-    .max(50)
+    .min(3, { message: "URL must be at least 3 characters long." })
+    .max(50, { message: "URL must be at most 50 characters long." })
     .refine((slug) => slug === slug.toLowerCase(), {
       message: "Slug must be lowercase",
     })
     .refine((slug) => !slug.includes(" "), {
       message: "Slug cannot contain spaces",
     }),
-}).omit({ id: true });
+});
+
+export const createWorkspace = createInsertSchema(
+  workspace,
+  workspaceSchema.shape,
+).omit({ id: true });
 
 export const updateWorkspace = createWorkspace.partial();
 
diff --git a/packages/ui/src/form.tsx b/packages/ui/src/form.tsx
index 5f191489..17e6b08d 100644
--- a/packages/ui/src/form.tsx
+++ b/packages/ui/src/form.tsx
@@ -179,7 +179,7 @@ const FormMessage = React.forwardRef<
     <p
       ref={ref}
       id={formMessageId}
-      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      className={cn("text-sm font-medium text-destructive", className)}
       {...props}
     >
       {body}