diff --git a/apps/client/package.json b/apps/client/package.json
index c1592ce..52bc207 100644
--- a/apps/client/package.json
+++ b/apps/client/package.json
@@ -32,11 +32,13 @@
     "framer-motion": "^11.11.17",
     "lexorank": "^1.0.5",
     "lucide-react": "^0.454.0",
+    "next-themes": "^0.4.3",
     "react": "^18.3.1",
     "react-day-picker": "8.10.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.2",
     "socket.io-client": "^4.8.1",
+    "sonner": "^1.7.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"
diff --git a/apps/client/src/components/ui/date-range-picker.tsx b/apps/client/src/components/ui/date-range-picker.tsx
index 6b8b3d0..7c0e46e 100644
--- a/apps/client/src/components/ui/date-range-picker.tsx
+++ b/apps/client/src/components/ui/date-range-picker.tsx
@@ -58,7 +58,7 @@ export function DateRangePicker({ className, date, onChange }: DateRangePickerPr
           <Button
             id="date"
             variant="outline"
-            className={cn('w-[300px] justify-start text-left font-normal', !dateState && '')}
+            className={cn('max-w-xs justify-start text-left font-normal', !dateState && '')}
           >
             <CalendarIcon className="mr-2 h-4 w-4" />
             {getDateRangeText()}
diff --git a/apps/client/src/components/ui/sonner.tsx b/apps/client/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..4192bae
--- /dev/null
+++ b/apps/client/src/components/ui/sonner.tsx
@@ -0,0 +1,27 @@
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner } from 'sonner';
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+function Toaster({ ...props }: ToasterProps) {
+  const { theme = 'system' } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          description: 'group-[.toast]:text-muted-foreground',
+          actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+          cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+        },
+      }}
+      {...props}
+    />
+  );
+}
+
+export { Toaster };
diff --git a/apps/client/src/features/project/label/components/CreateLabel.tsx b/apps/client/src/features/project/label/components/CreateLabel.tsx
index 848c3ae..fddcab5 100644
--- a/apps/client/src/features/project/label/components/CreateLabel.tsx
+++ b/apps/client/src/features/project/label/components/CreateLabel.tsx
@@ -1,6 +1,8 @@
 import { useForm } from 'react-hook-form';
 import { Plus, Shuffle } from 'lucide-react';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { UseMutationResult } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
 import { Input } from '@/components/ui/input.tsx';
 import { Button } from '@/components/ui/button.tsx';
 import {
@@ -14,13 +16,27 @@ import {
 import { ColorInput } from '@/features/project/label/components/ColorInput.tsx';
 import { generateRandomColor } from '@/features/project/label/generateRandomColor.ts';
 import { labelFormSchema, LabelFormValues } from '@/features/project/label/labelSchema.ts';
+import { BaseResponse } from '@/features/types.ts';
+import { CreateLabelDto } from '@/features/project/types.ts';
+import { useToast } from '@/lib/useToast.tsx';
 
 interface CreateLabelProps {
-  onCreate: (data: LabelFormValues) => void;
+  createMutation: UseMutationResult<BaseResponse, AxiosError, CreateLabelDto>;
 }
 
-export function CreateLabel({ onCreate }: CreateLabelProps) {
-  const createForm = useForm<LabelFormValues>({
+export function CreateLabel({ createMutation }: CreateLabelProps) {
+  const toast = useToast();
+
+  const { mutate } = createMutation;
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    setError,
+    formState: { errors },
+  } = useForm<LabelFormValues>({
     resolver: zodResolver(labelFormSchema),
     defaultValues: {
       name: '',
@@ -29,17 +45,37 @@ export function CreateLabel({ onCreate }: CreateLabelProps) {
     },
   });
 
-  const handleRandomColor = () => {
-    createForm.setValue('color', generateRandomColor(), { shouldValidate: true });
+  const onCreate = (data: LabelFormValues) => {
+    mutate(
+      {
+        name: data.name.trim(),
+        description: data.description.trim(),
+        color: data.color,
+      },
+      { onSuccess, onError }
+    );
   };
 
-  const handleSubmit = (data: LabelFormValues) => {
-    onCreate(data);
-    createForm.reset({
-      name: '',
-      description: '',
-      color: generateRandomColor(),
-    });
+  const onSuccess = () => {
+    toast.success('Label created successfully');
+    setValue('name', '');
+    setValue('description', '');
+    setValue('color', generateRandomColor());
+  };
+
+  const onError = (error: AxiosError) => {
+    if (error?.response?.status === 409) {
+      setError('name', {
+        message: 'Label with this name already exists',
+      });
+      return;
+    }
+
+    toast.error('Failed to create label');
+  };
+
+  const handleRandomColor = () => {
+    setValue('color', generateRandomColor(), { shouldValidate: true });
   };
 
   return (
@@ -49,23 +85,19 @@ export function CreateLabel({ onCreate }: CreateLabelProps) {
         <CardDescription>Add a new label to your project.</CardDescription>
       </CardHeader>
       <CardContent>
-        <form onSubmit={createForm.handleSubmit(handleSubmit)} className="space-y-4">
+        <form onSubmit={handleSubmit(onCreate)} className="space-y-4">
           <div className="flex gap-4">
             <div className="flex-1">
               <label htmlFor="name" className="block text-sm font-medium text-gray-700">
                 Name
                 <Input
-                  {...createForm.register('name')}
+                  {...register('name')}
                   placeholder="Label name"
                   className="mt-1 h-10"
                   id="name"
                 />
               </label>
-              {createForm.formState.errors.name && (
-                <p className="mt-1 text-sm text-red-500">
-                  {createForm.formState.errors.name.message}
-                </p>
-              )}
+              {errors.name && <p className="mt-1 text-sm text-red-500">{errors.name.message}</p>}
             </div>
             <div className="flex">
               <div className="mt-1 flex min-w-[200px] items-end gap-2">
@@ -75,8 +107,8 @@ export function CreateLabel({ onCreate }: CreateLabelProps) {
                 >
                   Color
                   <ColorInput
-                    value={createForm.watch('color')}
-                    onChange={(value) => createForm.setValue('color', value)}
+                    value={watch('color')}
+                    onChange={(value) => setValue('color', value)}
                     className="flex-1"
                   />
                 </label>
@@ -96,16 +128,14 @@ export function CreateLabel({ onCreate }: CreateLabelProps) {
             <label htmlFor="description" className="block text-sm font-medium text-gray-700">
               Description
               <Input
-                {...createForm.register('description')}
+                {...register('description')}
                 placeholder="Label description"
                 className="mt-1"
                 id="description"
               />
             </label>
-            {createForm.formState.errors.description && (
-              <p className="mt-1 text-sm text-red-500">
-                {createForm.formState.errors.description.message}
-              </p>
+            {errors.description && (
+              <p className="mt-1 text-sm text-red-500">{errors.description.message}</p>
             )}
           </div>
           <Button type="submit" className="w-full bg-black hover:bg-black/80">
diff --git a/apps/client/src/features/project/label/components/LabelList.tsx b/apps/client/src/features/project/label/components/LabelList.tsx
index a698503..f484045 100644
--- a/apps/client/src/features/project/label/components/LabelList.tsx
+++ b/apps/client/src/features/project/label/components/LabelList.tsx
@@ -2,6 +2,8 @@ import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Pencil, X, Shuffle } from 'lucide-react';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { AxiosError } from 'axios';
+import { UseMutationResult } from '@tanstack/react-query';
 import { Input } from '@/components/ui/input.tsx';
 import { Button } from '@/components/ui/button.tsx';
 import {
@@ -14,32 +16,100 @@ import {
 import { ColorInput } from '@/features/project/label/components/ColorInput.tsx';
 import { generateRandomColor } from '@/features/project/label/generateRandomColor.ts';
 import { labelFormSchema, LabelFormValues } from '@/features/project/label/labelSchema.ts';
-import { Label } from '@/features/types.ts';
+import { BaseResponse, Label } from '@/features/types.ts';
+import { UpdateLabelDto } from '@/features/project/types.ts';
+import { useToast } from '@/lib/useToast.tsx';
 
 interface LabelListProps {
   labels: Label[];
-  onUpdate: (labelId: number, data: Partial<Label>) => void;
-  onDelete: (labelId: number) => void;
+  updateMutation: UseMutationResult<
+    BaseResponse,
+    AxiosError,
+    {
+      labelId: number;
+      updateLabelDto: UpdateLabelDto;
+    }
+  >;
+  deleteMutation: UseMutationResult<BaseResponse, AxiosError, number>;
 }
 
-export function LabelList({ labels, onUpdate, onDelete }: LabelListProps) {
+export function LabelList({ labels, updateMutation, deleteMutation }: LabelListProps) {
+  const toast = useToast();
+
   const [editingId, setEditingId] = useState<number | null>(null);
 
-  const editForm = useForm<LabelFormValues>({
+  const { mutate: updateLabel } = updateMutation;
+
+  const { mutate: deleteLabel } = deleteMutation;
+
+  const {
+    handleSubmit,
+    register,
+    watch,
+    setValue,
+    setError,
+    reset,
+    formState: { errors },
+  } = useForm<LabelFormValues>({
     resolver: zodResolver(labelFormSchema),
   });
 
   const startEditing = (label: Label) => {
     setEditingId(label.id);
-    editForm.reset({
+    reset({
       name: label.name,
       description: label.description,
       color: label.color,
     });
   };
 
+  const onUpdate = (labelId: number, data: LabelFormValues) => {
+    updateLabel(
+      {
+        labelId,
+        updateLabelDto: {
+          name: data.name.trim(),
+          description: data.description.trim(),
+          color: data.color,
+        },
+      },
+      { onSuccess: onUpdateSuccess, onError: onUpdateError }
+    );
+  };
+
+  const onDelete = (labelId: number) => {
+    deleteLabel(labelId, {
+      onSuccess: onDeleteSuccess,
+      onError: onDeleteError,
+    });
+  };
+
+  const onUpdateSuccess = () => {
+    toast.success('Label updated successfully');
+    setEditingId(null);
+  };
+
+  const onUpdateError = (error: AxiosError) => {
+    if (error?.response?.status === 409) {
+      setError('name', {
+        message: 'Label with this name already exists',
+      });
+      return;
+    }
+
+    toast.error('Label update failed');
+  };
+
+  const onDeleteSuccess = () => {
+    toast.success('Label deleted successfully');
+  };
+
+  const onDeleteError = () => {
+    toast.error('Label deletion failed');
+  };
+
   const handleRandomColor = () => {
-    editForm.setValue('color', generateRandomColor(), { shouldValidate: true });
+    setValue('color', generateRandomColor(), { shouldValidate: true });
   };
 
   return (
@@ -58,21 +128,29 @@ export function LabelList({ labels, onUpdate, onDelete }: LabelListProps) {
               {editingId === label.id ? (
                 <form
                   className="flex w-full flex-col gap-4"
-                  onSubmit={editForm.handleSubmit((data) => {
+                  onSubmit={handleSubmit((data) => {
                     onUpdate(label.id, data);
-                    setEditingId(null);
                   })}
                 >
-                  <div className="flex items-center gap-4">
-                    <Input
-                      {...editForm.register('name')}
-                      className="h-10 flex-1"
-                      placeholder="Name"
-                    />
-                    <div className="flex min-w-[200px] gap-2">
+                  <div className="flex items-start gap-4">
+                    <div className="flex-1">
+                      <label htmlFor="name" className="block text-sm font-medium text-gray-700">
+                        Name
+                        <Input
+                          {...register('name')}
+                          placeholder="Label name"
+                          className="mt-1 h-10"
+                          id="name"
+                        />
+                      </label>
+                      {errors.name && (
+                        <p className="mt-1 text-sm text-red-500">{errors.name.message}</p>
+                      )}
+                    </div>
+                    <div className="mt-6 flex min-w-[200px] gap-2">
                       <ColorInput
-                        value={editForm.watch('color')}
-                        onChange={(value) => editForm.setValue('color', value)}
+                        value={watch('color')}
+                        onChange={(value) => setValue('color', value)}
                         className="flex-1"
                       />
                       <Button
@@ -88,7 +166,7 @@ export function LabelList({ labels, onUpdate, onDelete }: LabelListProps) {
                   </div>
                   <div className="flex gap-4">
                     <Input
-                      {...editForm.register('description')}
+                      {...register('description')}
                       className="flex-1"
                       placeholder="Description"
                     />
diff --git a/apps/client/src/features/project/label/useLabelMutations.ts b/apps/client/src/features/project/label/useLabelMutations.ts
index 7788217..55b5d98 100644
--- a/apps/client/src/features/project/label/useLabelMutations.ts
+++ b/apps/client/src/features/project/label/useLabelMutations.ts
@@ -1,6 +1,8 @@
+import { AxiosError } from 'axios';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { projectAPI } from '@/features/project/api.ts';
 import { CreateLabelDto, UpdateLabelDto } from '@/features/project/types.ts';
+import { BaseResponse } from '@/features/types.ts';
 
 export const useLabelMutations = (projectId: number) => {
   const queryCleint = useQueryClient();
@@ -12,25 +14,25 @@ export const useLabelMutations = (projectId: number) => {
   };
 
   return {
-    create: useMutation({
-      mutationFn: (createLabelDto: CreateLabelDto) =>
-        projectAPI.createLabel(projectId, createLabelDto),
+    create: useMutation<BaseResponse, AxiosError, CreateLabelDto>({
+      mutationFn: (createLabelDto) => projectAPI.createLabel(projectId, createLabelDto),
       onSuccess: invalidateLabels,
     }),
 
-    update: useMutation({
-      mutationFn: ({
-        labelId,
-        updateLabelDto,
-      }: {
+    update: useMutation<
+      BaseResponse,
+      AxiosError,
+      {
         labelId: number;
         updateLabelDto: UpdateLabelDto;
-      }) => projectAPI.updateLabel(labelId, updateLabelDto),
+      }
+    >({
+      mutationFn: ({ labelId, updateLabelDto }) => projectAPI.updateLabel(labelId, updateLabelDto),
       onSuccess: invalidateLabels,
     }),
 
-    delete: useMutation({
-      mutationFn: (labelId: number) => projectAPI.deleteLabel(labelId),
+    delete: useMutation<BaseResponse, AxiosError, number>({
+      mutationFn: (labelId) => projectAPI.deleteLabel(labelId),
       onSuccess: invalidateLabels,
     }),
   };
diff --git a/apps/client/src/features/project/sprint/components/CreateSprint.tsx b/apps/client/src/features/project/sprint/components/CreateSprint.tsx
new file mode 100644
index 0000000..fa491ce
--- /dev/null
+++ b/apps/client/src/features/project/sprint/components/CreateSprint.tsx
@@ -0,0 +1,116 @@
+import { AxiosError } from 'axios';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm, Controller } from 'react-hook-form';
+import { Plus } from 'lucide-react';
+import { UseMutationResult } from '@tanstack/react-query';
+import { Input } from '@/components/ui/input';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { DateRangePicker } from '@/components/ui/date-range-picker';
+import { sprintFormSchema, SprintFormValues } from '@/features/project/sprint/sprintSchema.ts';
+import { BaseResponse } from '@/features/types.ts';
+import { CreateSprintDto } from '@/features/project/types.ts';
+import { useToast } from '@/lib/useToast.tsx';
+
+interface CreateProjectSprintProps {
+  createMutation: UseMutationResult<BaseResponse, AxiosError, CreateSprintDto>;
+}
+
+const 일주일 = 7 * 24 * 60 * 60 * 1000;
+
+export function CreateSprint({ createMutation }: CreateProjectSprintProps) {
+  const toast = useToast();
+
+  const { mutate } = createMutation;
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    setError,
+    setValue,
+    formState: { errors },
+  } = useForm<SprintFormValues>({
+    resolver: zodResolver(sprintFormSchema),
+    defaultValues: {
+      name: '',
+      dateRange: {
+        from: new Date(),
+        to: new Date(new Date().getTime() + 일주일),
+      },
+    },
+  });
+
+  const onCreate = (data: SprintFormValues) => {
+    mutate(
+      {
+        name: data.name.trim(),
+        startDate: data.dateRange.from.toISOString().split('T')[0],
+        endDate: data.dateRange.to.toISOString().split('T')[0],
+      },
+      { onSuccess, onError }
+    );
+  };
+
+  const onSuccess = () => {
+    toast.success('Sprint created successfully');
+    setValue('name', '');
+    setValue('dateRange', {
+      from: new Date(),
+      to: new Date(new Date().getTime() + 일주일),
+    });
+  };
+
+  const onError = (error: AxiosError) => {
+    if (error?.response?.status === 409) {
+      setError('name', {
+        message: 'Sprint with this name already exists',
+      });
+    }
+
+    toast.error('Failed to create sprint');
+  };
+
+  return (
+    <Card className="bg-white">
+      <CardHeader>
+        <CardTitle className="text-xl">Create Sprint</CardTitle>
+        <CardDescription>Add a new sprint to your project.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit(onCreate)} className="space-y-4">
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium text-gray-700">
+                Name
+                <Input {...register('name')} placeholder="Sprint name" className="mt-1" id="name" />
+              </label>
+              {errors.name && <p className="mt-1 text-sm text-red-500">{errors.name.message}</p>}
+            </div>
+            <div>
+              <label className="block w-fit text-sm font-medium text-gray-700">
+                Duration
+                <div className="mt-1">
+                  <Controller
+                    control={control}
+                    name="dateRange"
+                    render={({ field }) => (
+                      <DateRangePicker date={field.value} onChange={field.onChange} />
+                    )}
+                  />
+                  {errors.dateRange && (
+                    <p className="mt-1 text-sm text-red-500">{errors.dateRange.message}</p>
+                  )}
+                </div>
+              </label>
+            </div>
+          </div>
+          <Button type="submit" className="w-full bg-black hover:bg-black/80">
+            <Plus className="mr-2 h-4 w-4" />
+            Create Sprint
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/apps/client/src/features/project/sprint/components/CreateSrpint.tsx b/apps/client/src/features/project/sprint/components/CreateSrpint.tsx
deleted file mode 100644
index 3d23597..0000000
--- a/apps/client/src/features/project/sprint/components/CreateSrpint.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm, Controller } from 'react-hook-form';
-import { Plus } from 'lucide-react';
-import { Input } from '@/components/ui/input';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { DateRangePicker } from '@/components/ui/date-range-picker';
-import { sprintFormSchema, SprintFormValues } from '@/features/project/sprint/sprintSchema.ts';
-
-interface CreateProjectSprintProps {
-  onCreate: (data: SprintFormValues) => void;
-}
-
-export function CreateSrpint({ onCreate }: CreateProjectSprintProps) {
-  const createForm = useForm<SprintFormValues>({
-    resolver: zodResolver(sprintFormSchema),
-    defaultValues: {
-      name: '',
-      dateRange: {
-        from: new Date(),
-        to: new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000), // Default to 1 week
-      },
-    },
-  });
-
-  const handleSubmit = (data: SprintFormValues) => {
-    onCreate(data);
-    createForm.reset({
-      name: '',
-      dateRange: {
-        from: new Date(),
-        to: new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000),
-      },
-    });
-  };
-
-  return (
-    <Card className="bg-white">
-      <CardHeader>
-        <CardTitle className="text-xl">Create Sprint</CardTitle>
-        <CardDescription>Add a new sprint to your project.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form onSubmit={createForm.handleSubmit(handleSubmit)} className="space-y-4">
-          <div className="space-y-4">
-            <div>
-              <label htmlFor="name" className="block text-sm font-medium text-gray-700">
-                Name
-                <Input
-                  {...createForm.register('name')}
-                  placeholder="Sprint name"
-                  className="mt-1"
-                  id="name"
-                />
-              </label>
-              {createForm.formState.errors.name && (
-                <p className="mt-1 text-sm text-red-500">
-                  {createForm.formState.errors.name.message}
-                </p>
-              )}
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700">
-                Duration
-                <div className="mt-1">
-                  <Controller
-                    control={createForm.control}
-                    name="dateRange"
-                    render={({ field }) => (
-                      <DateRangePicker date={field.value} onChange={field.onChange} />
-                    )}
-                  />
-                  {createForm.formState.errors.dateRange && (
-                    <p className="mt-1 text-sm text-red-500">
-                      {createForm.formState.errors.dateRange.message}
-                    </p>
-                  )}
-                </div>
-              </label>
-            </div>
-          </div>
-          <Button type="submit" className="w-full bg-black hover:bg-black/80">
-            <Plus className="mr-2 h-4 w-4" />
-            Create Sprint
-          </Button>
-        </form>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/client/src/features/project/sprint/components/SprintList.tsx b/apps/client/src/features/project/sprint/components/SprintList.tsx
index 6ebf18d..d81f5a6 100644
--- a/apps/client/src/features/project/sprint/components/SprintList.tsx
+++ b/apps/client/src/features/project/sprint/components/SprintList.tsx
@@ -2,6 +2,8 @@ import { useState } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Pencil, X } from 'lucide-react';
+import { UseMutationResult } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
 import { Input } from '@/components/ui/input';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -10,24 +12,47 @@ import { DateRangePicker } from '@/components/ui/date-range-picker';
 import { sprintFormSchema, SprintFormValues } from '@/features/project/sprint/sprintSchema.ts';
 import { getStatusColor } from '@/features/project/sprint/getStatusColor.ts';
 import { getSprintStatus } from '@/features/project/sprint/getSprintStatus.ts';
-import { Sprint } from '@/features/types.ts';
+import { BaseResponse, Sprint } from '@/features/types.ts';
+
+import { UpdateSprintDto } from '@/features/project/types.ts';
+import { useToast } from '@/lib/useToast.tsx';
 
 interface ProjectSprintManagerProps {
   sprints: Sprint[];
-  onUpdate: (sprintId: number, data: SprintFormValues) => void;
-  onDelete: (sprintId: number) => void;
+  updateMutation: UseMutationResult<
+    BaseResponse,
+    AxiosError,
+    {
+      sprintId: number;
+      updateSprintDto: UpdateSprintDto;
+    }
+  >;
+  deleteMutation: UseMutationResult<BaseResponse, AxiosError, number>;
 }
 
-export function SprintList({ sprints, onUpdate, onDelete }: ProjectSprintManagerProps) {
+export function SprintList({ sprints, updateMutation, deleteMutation }: ProjectSprintManagerProps) {
+  const toast = useToast();
+
   const [editingId, setEditingId] = useState<number | null>(null);
 
-  const editForm = useForm<SprintFormValues>({
+  const { mutate: updateSprint } = updateMutation;
+
+  const { mutate: deleteSprint } = deleteMutation;
+
+  const {
+    handleSubmit,
+    register,
+    setError,
+    control,
+    reset,
+    formState: { errors },
+  } = useForm<SprintFormValues>({
     resolver: zodResolver(sprintFormSchema),
   });
 
   const startEditing = (sprint: Sprint) => {
     setEditingId(sprint.id);
-    editForm.reset({
+    reset({
       name: sprint.name,
       dateRange: {
         from: new Date(sprint.startDate),
@@ -36,6 +61,48 @@ export function SprintList({ sprints, onUpdate, onDelete }: ProjectSprintManager
     });
   };
 
+  const dateToYYYYMMDD = (date: Date) => date.toISOString().split('T')[0];
+
+  const onUpdate = (sprintId: number, data: SprintFormValues) => {
+    updateSprint(
+      {
+        sprintId,
+        updateSprintDto: {
+          name: data.name,
+          startDate: dateToYYYYMMDD(data.dateRange.from),
+          endDate: dateToYYYYMMDD(data.dateRange.to),
+        },
+      },
+      { onSuccess: onUpdateSuccess, onError: onUpdateError }
+    );
+  };
+
+  const onDelete = (sprintId: number) => {
+    deleteSprint(sprintId, { onSuccess: onDeleteSuccess, onError: onDeleteError });
+  };
+
+  const onUpdateSuccess = () => {
+    toast.success('Sprint updated successfully');
+    setEditingId(null);
+  };
+
+  const onUpdateError = (error: AxiosError) => {
+    if (error.response?.status === 409) {
+      setError('name', { message: 'Sprint with this name already exists' });
+      return;
+    }
+
+    toast.error('Failed to update sprint');
+  };
+
+  const onDeleteSuccess = () => {
+    toast.success('Sprint deleted successfully');
+  };
+
+  const onDeleteError = () => {
+    toast.error('Failed to delete sprint');
+  };
+
   return (
     <Card className="bg-white">
       <CardHeader>
@@ -52,17 +119,27 @@ export function SprintList({ sprints, onUpdate, onDelete }: ProjectSprintManager
               {editingId === sprint.id ? (
                 <form
                   className="flex w-full flex-wrap gap-4"
-                  onSubmit={editForm.handleSubmit((data) => {
+                  onSubmit={handleSubmit((data) => {
                     onUpdate(sprint.id, data);
-                    setEditingId(null);
                   })}
                 >
-                  <div className="w-full">
-                    <Input {...editForm.register('name')} className="flex-1" />
+                  <div className="flex-1">
+                    <label htmlFor="name" className="block text-sm font-medium text-gray-700">
+                      Name
+                      <Input
+                        {...register('name')}
+                        placeholder="Label name"
+                        className="mt-1"
+                        id="name"
+                      />
+                    </label>
+                    {errors.name && (
+                      <p className="mt-1 text-sm text-red-500">{errors.name.message}</p>
+                    )}
                   </div>
-                  <div className="w-full">
+                  <div className="mt-6">
                     <Controller
-                      control={editForm.control}
+                      control={control}
                       name="dateRange"
                       render={({ field }) => (
                         <DateRangePicker date={field.value} onChange={field.onChange} />
diff --git a/apps/client/src/features/project/sprint/useSprintMutations.ts b/apps/client/src/features/project/sprint/useSprintMutations.ts
index a8c39b4..d19d7f5 100644
--- a/apps/client/src/features/project/sprint/useSprintMutations.ts
+++ b/apps/client/src/features/project/sprint/useSprintMutations.ts
@@ -1,6 +1,8 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
 import { projectAPI } from '@/features/project/api.ts';
 import { CreateSprintDto, UpdateSprintDto } from '@/features/project/types.ts';
+import { BaseResponse } from '@/features/types.ts';
 
 export const useSprintMutations = (projectId: number) => {
   const queryClient = useQueryClient();
@@ -12,25 +14,26 @@ export const useSprintMutations = (projectId: number) => {
   };
 
   return {
-    create: useMutation({
-      mutationFn: (createSprintDto: CreateSprintDto) =>
-        projectAPI.createSprint(projectId, createSprintDto),
+    create: useMutation<BaseResponse, AxiosError, CreateSprintDto>({
+      mutationFn: (createSprintDto) => projectAPI.createSprint(projectId, createSprintDto),
       onSuccess: invalidateSprints,
     }),
 
-    update: useMutation({
-      mutationFn: ({
-        sprintId,
-        updateSprintDto,
-      }: {
+    update: useMutation<
+      BaseResponse,
+      AxiosError,
+      {
         sprintId: number;
         updateSprintDto: UpdateSprintDto;
-      }) => projectAPI.updateSprint(sprintId, updateSprintDto),
+      }
+    >({
+      mutationFn: ({ sprintId, updateSprintDto }) =>
+        projectAPI.updateSprint(sprintId, updateSprintDto),
       onSuccess: invalidateSprints,
     }),
 
-    delete: useMutation({
-      mutationFn: (sprintId: number) => projectAPI.deleteSprint(sprintId),
+    delete: useMutation<BaseResponse, AxiosError, number>({
+      mutationFn: (sprintId) => projectAPI.deleteSprint(sprintId),
       onSuccess: invalidateSprints,
     }),
   };
diff --git a/apps/client/src/lib/useToast.tsx b/apps/client/src/lib/useToast.tsx
new file mode 100644
index 0000000..a1a4f0e
--- /dev/null
+++ b/apps/client/src/lib/useToast.tsx
@@ -0,0 +1,35 @@
+import { toast } from 'sonner';
+import { cn } from '@/lib/utils.ts';
+
+type ToastType = 'success' | 'error' | 'info';
+
+interface ToastOptions {
+  message: string;
+  type?: ToastType;
+  duration?: number;
+}
+
+export const useToast = () => {
+  const showToast = ({ message, type = 'info', duration = 2000 }: ToastOptions) => {
+    const styles = {
+      success: 'bg-green-500 hover:bg-green-600',
+      error: 'bg-red-500 hover:bg-red-600',
+      info: 'bg-gray-200 hover:bg-slate-300',
+    };
+
+    toast(message, {
+      duration,
+      className: cn(
+        'text-white py-3 px-4 rounded-md shadow-lg font-medium text-sm border-transparent',
+        styles[type]
+      ),
+    });
+  };
+
+  return {
+    success: (message: string, duration?: number) =>
+      showToast({ message, type: 'success', duration }),
+    error: (message: string, duration?: number) => showToast({ message, type: 'error', duration }),
+    info: (message: string, duration?: number) => showToast({ message, type: 'info', duration }),
+  };
+};
diff --git a/apps/client/src/pages/LabelsSettings.tsx b/apps/client/src/pages/LabelsSettings.tsx
index b486474..1c4681a 100644
--- a/apps/client/src/pages/LabelsSettings.tsx
+++ b/apps/client/src/pages/LabelsSettings.tsx
@@ -3,11 +3,12 @@ import { useLabelsQuery } from '@/features/project/label/useLabelsQuery.ts';
 import { useLabelMutations } from '@/features/project/label/useLabelMutations.ts';
 import { LabelList } from '@/features/project/label/components/LabelList.tsx';
 import { CreateLabel } from '@/features/project/label/components/CreateLabel.tsx';
-import { LabelFormValues } from '@/features/project/label/labelSchema.ts';
 
 export default function LabelsSettings() {
   const { projectId } = useLoaderData({ from: '/_auth/$project/settings/labels' });
+
   const { data: labels = [] } = useLabelsQuery(projectId);
+
   const {
     create: createMutation,
     update: updateMutation,
@@ -16,18 +17,8 @@ export default function LabelsSettings() {
 
   return (
     <div className="space-y-6">
-      <LabelList
-        labels={labels}
-        onUpdate={(labelId, data) =>
-          updateMutation.mutate({
-            labelId,
-            updateLabelDto: data,
-          })
-        }
-        onDelete={(labelId) => deleteMutation.mutate(labelId)}
-      />
-
-      <CreateLabel onCreate={(data: LabelFormValues) => createMutation.mutate(data)} />
+      <LabelList labels={labels} updateMutation={updateMutation} deleteMutation={deleteMutation} />
+      <CreateLabel createMutation={createMutation} />
     </div>
   );
 }
diff --git a/apps/client/src/pages/SprintsSettings.tsx b/apps/client/src/pages/SprintsSettings.tsx
index 9a9534d..551c5a9 100644
--- a/apps/client/src/pages/SprintsSettings.tsx
+++ b/apps/client/src/pages/SprintsSettings.tsx
@@ -2,8 +2,7 @@ import { useLoaderData } from '@tanstack/react-router';
 import { useSprintsQuery } from '@/features/project/sprint/useSprintsQuery';
 import { useSprintMutations } from '@/features/project/sprint/useSprintMutations';
 import { SprintList } from '@/features/project/sprint/components/SprintList.tsx';
-import { CreateSrpint } from '@/features/project/sprint/components/CreateSrpint.tsx';
-import { SprintFormValues } from '@/features/project/sprint/sprintSchema.ts';
+import { CreateSprint } from '@/features/project/sprint/components/CreateSprint.tsx';
 
 export default function SprintsSettings() {
   const { projectId } = useLoaderData({ from: '/_auth/$project/settings/sprints' });
@@ -14,33 +13,14 @@ export default function SprintsSettings() {
     delete: deleteMutation,
   } = useSprintMutations(projectId);
 
-  const dateToYYYYMMDD = (date: Date) => date.toISOString().split('T')[0];
-
   return (
     <div className="space-y-6">
       <SprintList
         sprints={sprints}
-        onUpdate={(sprintId, data) =>
-          updateMutation.mutate({
-            sprintId,
-            updateSprintDto: {
-              name: data.name,
-              startDate: dateToYYYYMMDD(data.dateRange.from),
-              endDate: dateToYYYYMMDD(data.dateRange.to),
-            },
-          })
-        }
-        onDelete={(sprintId) => deleteMutation.mutate(sprintId)}
-      />
-      <CreateSrpint
-        onCreate={(data: SprintFormValues) =>
-          createMutation.mutate({
-            name: data.name,
-            startDate: dateToYYYYMMDD(data.dateRange.from),
-            endDate: dateToYYYYMMDD(data.dateRange.to),
-          })
-        }
+        updateMutation={updateMutation}
+        deleteMutation={deleteMutation}
       />
+      <CreateSprint createMutation={createMutation} />
     </div>
   );
 }
diff --git a/apps/client/src/routes/_auth.$project.settings.tsx b/apps/client/src/routes/_auth.$project.settings.tsx
index 8464305..0fcd752 100644
--- a/apps/client/src/routes/_auth.$project.settings.tsx
+++ b/apps/client/src/routes/_auth.$project.settings.tsx
@@ -17,14 +17,14 @@ function ProjectSettingsLayout() {
   return (
     <div className="flex h-[calc(100vh-100px)] flex-col">
       <div className="w-full border-b">
-        <div className="mx-auto max-w-screen-lg">
+        <div className="mx-auto max-w-[1280px]">
           <div className="px-6 py-8">
             <h1 className="text-3xl">Settings</h1>
           </div>
         </div>
       </div>
 
-      <div className="mx-auto flex min-h-0 w-full max-w-screen-lg flex-1">
+      <div className="mx-auto flex min-h-0 w-full max-w-[1280px] flex-1">
         <div className="w-64 flex-shrink-0 border-r">
           <div className="px-6 py-6">
             <div className="w-full space-y-1">
diff --git a/apps/client/src/routes/_auth.tsx b/apps/client/src/routes/_auth.tsx
index c4ed4ca..214ae0e 100644
--- a/apps/client/src/routes/_auth.tsx
+++ b/apps/client/src/routes/_auth.tsx
@@ -1,6 +1,7 @@
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { Link, Outlet, createFileRoute, redirect, useParams } from '@tanstack/react-router';
 import { ChevronsUpDownIcon, LogOut } from 'lucide-react';
+import { SlashIcon } from '@radix-ui/react-icons';
 import { Harmony } from '@/components/logo';
 import { Topbar } from '@/components/navigation/topbar';
 import {
@@ -11,6 +12,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { axiosInstance } from '@/lib/axios.ts';
 import { useAuth } from '@/features/auth/useAuth.ts';
+import { Toaster } from '@/components/ui/sonner.tsx';
 
 type Project = {
   id: number;
@@ -76,6 +78,8 @@ function AuthLayout() {
     }, 100);
   };
 
+  const currentProject = projects.find((project) => project.id === Number(params.project));
+
   return (
     <div>
       <Topbar
@@ -84,8 +88,9 @@ function AuthLayout() {
             <Link to={params.project === undefined ? '/account' : '/$project'}>
               <Harmony />
             </Link>
+            <SlashIcon className="h-5 text-gray-300" />
             <div className="flex items-center gap-2">
-              <h2>{params.project ?? 'My Account'}</h2>
+              <h2>{(params.project && currentProject?.title) ?? 'My Account'}</h2>
               <DropdownMenu>
                 <DropdownMenuTrigger className="h-8">
                   <ChevronsUpDownIcon className="h-4 w-4" />
@@ -132,6 +137,7 @@ function AuthLayout() {
         }
       />
       <Outlet />
+      <Toaster position="bottom-left" />
     </div>
   );
 }