diff --git a/apps/web/components/dashboard/categories/EditCategoryDialog.tsx b/apps/web/components/dashboard/categories/EditCategoryDialog.tsx
index b0061f1..38c8d3b 100644
--- a/apps/web/components/dashboard/categories/EditCategoryDialog.tsx
+++ b/apps/web/components/dashboard/categories/EditCategoryDialog.tsx
@@ -34,6 +34,7 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { zUpdateCategoryRequestSchema, ZUpdateCategoryRequest } from "@lifetracker/shared/types/categories";
+import { Textarea } from "@/components/ui/textarea";
 
 export default function EditCategoryDialog({
   category: initialCategory,
@@ -88,51 +89,70 @@ export default function EditCategoryDialog({
         <Form {...form}>
           <form onSubmit={form.handleSubmit((val) => mutate(val))}>
             <div className="flex w-full flex-col space-y-2">
-              <FormField
-                control={form.control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Name</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="text"
-                        placeholder="Name"
-                        {...field}
-                        className="w-full rounded border p-2"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="code"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Code</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="number"
-                        placeholder="Code"
-                        {...field}
-                        className="w-full rounded border p-2"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+              <div style={{ display: "grid", gridTemplateColumns: "5em 1fr 75px", gap: "10px" }}>
+                <FormField
+                  control={form.control}
+                  name="code"
+                  render={({ field }) => (
+                    <FormItem>
+                      {/* <FormLabel>Code</FormLabel> */}
+                      <FormControl>
+                        <Input
+                          type="text"
+                          placeholder="Code"
+                          {...field}
+                          className="w-full rounded border p-2"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem>
+                      {/* <FormLabel>Name</FormLabel> */}
+                      <FormControl>
+                        <Input
+                          type="text"
+                          placeholder="Name"
+                          {...field}
+                          className="w-full rounded border p-2"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="color.name"
+                  render={({ field }) => (
+                    <FormItem>
+                      {/* <FormLabel>Color</FormLabel> */}
+                      <FormControl>
+                        <Input
+                          type="text"
+                          placeholder="Color"
+                          {...field}
+                          className="w-full rounded border p-2"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
               <FormField
                 control={form.control}
                 name="description"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Description</FormLabel>
+                    {/* <FormLabel>Description</FormLabel> */}
                     <FormControl>
-                      <Input
-                        type="text"
+                      <Textarea
                         placeholder="Description"
                         {...field}
                         className="w-full rounded border p-2"
@@ -142,24 +162,6 @@ export default function EditCategoryDialog({
                   </FormItem>
                 )}
               />
-              {/* <FormField
-                control={form.control}
-                name="colorId"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Color</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="text"
-                        placeholder="Color"
-                        {...field}
-                        className="w-full rounded border p-2"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              /> */}
               <DialogFooter className="sm:justify-end">
                 <DialogClose asChild>
                   <Button type="button" variant="secondary">
diff --git a/packages/shared/types/categories.ts b/packages/shared/types/categories.ts
index b72fe59..3588ee5 100644
--- a/packages/shared/types/categories.ts
+++ b/packages/shared/types/categories.ts
@@ -32,11 +32,13 @@ export const zGetCategoryResponseSchema = z.object({
 export type ZGetCategoryResponse = z.infer<typeof zGetCategoryResponseSchema>;
 
 export const zUpdateCategoryRequestSchema = z.object({
-    code: z.number().nullish(),
+    code: z.number(),
     name: z.string().optional(),
     description: z.string().optional(),
-    colorId: z.string().nullish(),
     parentId: z.string().nullish(),
     categoryId: z.string(),
+    color: z.object({
+        name: z.string(),
+    }),
 });
 export type ZUpdateCategoryRequest = z.infer<typeof zUpdateCategoryRequestSchema>;
\ No newline at end of file
diff --git a/packages/trpc/routers/categories.ts b/packages/trpc/routers/categories.ts
index a55586f..fd6a2b0 100644
--- a/packages/trpc/routers/categories.ts
+++ b/packages/trpc/routers/categories.ts
@@ -222,13 +222,19 @@ export const categoriesAppRouter = router({
             }),
         )
         .mutation(async ({ input, ctx }) => {
-            console.log("Updating");
+            const colorIdQuery = await ctx.db.select({ id: colors.id }).from(colors).where(
+                and(
+                    eq(colors.name, input.color.name),
+                    eq(colors.userId, ctx.user.id),
+                )
+            );
             const res = await ctx.db
                 .update(categories)
                 .set({
                     name: input.name,
                     description: input.description,
                     code: input.code,
+                    colorId: colorIdQuery[0].id,
                 })
                 .where(
                     and(
@@ -236,7 +242,6 @@ export const categoriesAppRouter = router({
                         eq(categories.userId, ctx.user.id),
                     ),
                 ).returning();
-            console.log(res);
             return res[0];
         }),
     delete: authedProcedure