diff --git a/src/app/api/child/create/route.ts b/src/app/api/child/create/route.ts
new file mode 100644
index 0000000..94f1aaa
--- /dev/null
+++ b/src/app/api/child/create/route.ts
@@ -0,0 +1,24 @@
+import { newChildSchema } from '@/lib/validations/child';
+import { getServerAuthSession } from '@/lib/services/auth/config';
+import { NextResponse } from 'next/server';
+import { StatusCodes, getReasonPhrase } from 'http-status-codes';
+import db from '@/db/schema';
+import { children } from '@/db/schema/children';
+
+export async function POST(req: Request) {
+  const session = await getServerAuthSession();
+  if (!session)
+    return NextResponse.json(
+      { error: getReasonPhrase(StatusCodes.UNAUTHORIZED) },
+      { status: StatusCodes.UNAUTHORIZED }
+    );
+  const body = await req.json();
+
+  const { name } = newChildSchema.parse(body);
+
+  const child = await db.insert(children).values({
+    name,
+  });
+
+  return NextResponse.json({ status: 'success', pin: 'fartle' });
+}
diff --git a/src/app/api/child/route.ts b/src/app/api/child/route.ts
index 39c30e4..e30d8b2 100644
--- a/src/app/api/child/route.ts
+++ b/src/app/api/child/route.ts
@@ -1,12 +1,12 @@
 import db from '@/db/schema';
 import { children } from '@/db/schema/children';
-import { getServerSession } from 'next-auth';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';
 import { NextResponse } from 'next/server';
-import authOptions from '@/lib/services/auth/config';
+import { getServerAuthSession } from '@/lib/services/auth/config';
 
+//TODO: create-t3-app supports app router now
 export async function GET(request: Request) {
-  const session = await getServerSession(authOptions);
+  const session = await getServerAuthSession();
   if (!session)
     return NextResponse.json(
       { error: getReasonPhrase(StatusCodes.UNAUTHORIZED) },
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 49d44c4..85bc76b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -9,6 +9,7 @@ import NextAuthProvider from '@/lib/services/auth/provider';
 import { ThemeProvider } from '@/components/theme-provider';
 import { cn } from '@/lib/utils';
 import TanstackProvider from '@/components/providers/tanstack-provider';
+import { Toaster } from '@/components/ui/toaster';
 
 const font = Sanchez({ subsets: ['latin'], weight: '400' });
 
@@ -46,6 +47,7 @@ export default function RootLayout({
               enableSystem
             >
               {children}
+              <Toaster />
             </ThemeProvider>
           </TanstackProvider>
         </NextAuthProvider>
diff --git a/src/components/children/add-child-component.tsx b/src/components/children/add-child-component.tsx
index e4024df..39876cc 100644
--- a/src/components/children/add-child-component.tsx
+++ b/src/components/children/add-child-component.tsx
@@ -12,6 +12,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog';
+import { AddChildForm } from '@/components/forms/add-child-form';
 const AddChildComponent = () => {
   return (
     <Dialog>
@@ -24,32 +25,7 @@ const AddChildComponent = () => {
         </Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>Add Child</DialogTitle>
-          <DialogDescription>
-            {
-              "Enter your child's details below and press save, then use the displayed PIN to register their device."
-            }
-          </DialogDescription>
-        </DialogHeader>
-        <div className="grid gap-4 py-4">
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label
-              htmlFor="name"
-              className="text-right"
-            >
-              Name
-            </Label>
-            <Input
-              id="name"
-              placeholder={"Your child's identifier"}
-              className="col-span-3"
-            />
-          </div>
-        </div>
-        <DialogFooter>
-          <Button type="submit">Save changes</Button>
-        </DialogFooter>
+        <AddChildForm />
       </DialogContent>
     </Dialog>
   );
diff --git a/src/components/children/child-select-list.tsx b/src/components/children/child-select-list.tsx
index eac8754..525c055 100644
--- a/src/components/children/child-select-list.tsx
+++ b/src/components/children/child-select-list.tsx
@@ -25,6 +25,8 @@ const ChildSelectList = () => {
       return data as ChildModel[];
     },
   });
+  if (isLoading) return <div>Loading....</div>;
+  if (isError) return <div>Error loading</div>;
   return (
     <Select>
       <SelectTrigger className="w-[180px]">
diff --git a/src/components/forms/add-child-form.tsx b/src/components/forms/add-child-form.tsx
index c7dedb1..9228af2 100644
--- a/src/components/forms/add-child-form.tsx
+++ b/src/components/forms/add-child-form.tsx
@@ -1,25 +1,45 @@
 'use client';
 
 import * as React from 'react';
-import { useSearchParams } from 'next/navigation';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';
 
 import { cn } from '@/lib/utils';
 import { newChildSchema } from '@/lib/validations/child';
-import { buttonVariants } from '@/components/ui/button';
+import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { toast } from '@/components/ui/use-toast';
 import { Icons } from '@/components/icons';
-
-interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {}
+import { DialogFooter } from '../ui/dialog';
+import { useQueryClient, useMutation } from '@tanstack/react-query';
+import axios from 'axios';
+import {
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+interface AddChildFormProps extends React.HTMLAttributes<HTMLDivElement> {}
 
 type FormData = z.infer<typeof newChildSchema>;
 
-export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
+export function AddChildForm({ className, ...props }: AddChildFormProps) {
+  const [PIN, setPIN] = React.useState('');
+  const queryClient = useQueryClient();
+  const { mutate: submitNewChild, isLoading } = useMutation({
+    mutationFn: async (name: string) =>
+      await axios.post('/api/child/create', { name }),
+    onSuccess: (e) => {
+      console.log('add-child-form', 'onSuccess', e);
+      toast({ description: 'Added new child' });
+      queryClient.invalidateQueries(['user-children']);
+      setPIN(e.data.pin);
+    },
+    onError: () => {
+      toast({ description: 'Something went wrong', variant: 'destructive' });
+    },
+  });
   const {
     register,
     handleSubmit,
@@ -27,44 +47,46 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
   } = useForm<FormData>({
     resolver: zodResolver(newChildSchema),
   });
-  const [isLoading, setIsLoading] = React.useState<boolean>(false);
-  const [isGoogleLoading, setIsGoogleLoading] = React.useState<boolean>(false);
-  const searchParams = useSearchParams();
 
   async function onSubmit(data: FormData) {
-    setIsLoading(true);
-
-    const signInResult = await fetch(
-      `${process.env.NEXT_PUBLIC_BASE_URL}/api/child`,
-      {
-        method: 'POST',
-        body: JSON.stringify({
-          name: data.name,
-        }),
-      }
-    );
-
-    setIsLoading(false);
-
-    if (!signInResult?.ok) {
-      return toast({
-        title: 'Something went wrong.',
-        description: 'Your sign in request failed. Please try again.',
-        variant: 'destructive',
-      });
-    }
-
-    return toast({
-      title: 'Check your email',
-      description: 'We sent you a login link. Be sure to check your spam too.',
-    });
+    submitNewChild(data.name);
   }
 
+  if (PIN) {
+    return (
+      <>
+        <DialogTitle>Successfully added child</DialogTitle>
+        <div>
+          {`Your child's PIN is ${PIN}`}
+          <Button
+            variant={'ghost'}
+            size={'icon'}
+            className="ml-2"
+            onClick={() => {
+              navigator.clipboard.writeText(PIN).then(() => {
+                toast({ description: 'PIN copied to clipboard' });
+              });
+            }}
+          >
+            <Icons.copy className="h-3 w-3" />
+          </Button>
+        </div>
+      </>
+    );
+  }
   return (
     <div
       className={cn('grid gap-6', className)}
       {...props}
     >
+      <DialogHeader>
+        <DialogTitle>Add Child</DialogTitle>
+        <DialogDescription>
+          {
+            "Enter your child's details below and press save, then use the displayed PIN to register their device."
+          }
+        </DialogDescription>
+      </DialogHeader>
       <form onSubmit={handleSubmit(onSubmit)}>
         <div className="grid gap-2">
           <div className="grid gap-1">
@@ -75,58 +97,29 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
               Email
             </Label>
             <Input
-              id="email"
-              placeholder="name@example.com"
-              type="email"
+              id="name"
+              placeholder={"Child's name"}
+              type="text"
               autoCapitalize="none"
-              autoComplete="email"
+              autoComplete="child-name"
               autoCorrect="off"
-              disabled={isLoading || isGoogleLoading}
-              {...register('email')}
+              disabled={isLoading}
+              {...register('name')}
             />
-            {errors?.email && (
-              <p className="px-1 text-xs text-red-600">
-                {errors.email.message}
-              </p>
+            {errors?.name && (
+              <p className="px-1 text-xs text-red-600">{errors.name.message}</p>
             )}
           </div>
-          <button
-            className={cn(buttonVariants())}
-            disabled={isLoading}
-          >
-            {isLoading && (
-              <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
-            )}
-            Sign In with Email
-          </button>
+        </div>
+        <div className="mt-5">
+          <DialogFooter>
+            <Button type="submit">
+              <Icons.save className="mr-2 h-4 w-4" />
+              Save
+            </Button>
+          </DialogFooter>
         </div>
       </form>
-      <div className="relative">
-        <div className="absolute inset-0 flex items-center">
-          <span className="w-full border-t" />
-        </div>
-        <div className="relative flex justify-center text-xs uppercase">
-          <span className="bg-background px-2 text-muted-foreground">
-            Or continue with
-          </span>
-        </div>
-      </div>
-      <button
-        type="button"
-        className={cn(buttonVariants({ variant: 'outline' }))}
-        onClick={() => {
-          setIsGoogleLoading(true);
-          signIn('google', { callbackUrl: '/dashboard' });
-        }}
-        disabled={isLoading || isGoogleLoading}
-      >
-        {isGoogleLoading ? (
-          <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
-        ) : (
-          <Icons.google className="mr-2 h-4 w-4" />
-        )}{' '}
-        Google
-      </button>
     </div>
   );
 }
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index 3505181..561bced 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -14,6 +14,8 @@ import {
   PlusCircleIcon,
   PlusIcon,
   LogIn,
+  Save,
+  Copy,
 } from 'lucide-react';
 
 export type Icon = LucideIcon;
@@ -22,11 +24,13 @@ export const Icons = {
   add: PlusIcon,
   chevronLeft: ChevronLeft,
   chevronRight: ChevronRight,
+  copy: Copy,
   sun: SunMedium,
   login: LogIn,
   mobile: TabletSmartphone,
   moon: Moon,
   rocket: Rocket,
+  save: Save,
   spinner: Loader2,
   twitter: Twitter,
   user: User,
diff --git a/src/lib/services/auth/config.ts b/src/lib/services/auth/config.ts
index b56796a..be90497 100644
--- a/src/lib/services/auth/config.ts
+++ b/src/lib/services/auth/config.ts
@@ -1,7 +1,7 @@
-import { type AuthOptions } from "next-auth";
-import GoogleProvider from "next-auth/providers/google";
-import { DrizzleAdapter } from "@auth/drizzle-adapter";
-import db from "@/db/schema";
+import { getServerSession, type AuthOptions } from 'next-auth';
+import GoogleProvider from 'next-auth/providers/google';
+import { DrizzleAdapter } from '@auth/drizzle-adapter';
+import db from '@/db/schema';
 
 const authOptions: AuthOptions = {
   adapter: DrizzleAdapter(db),
@@ -12,5 +12,6 @@ const authOptions: AuthOptions = {
     }),
   ],
 };
+export const getServerAuthSession = () => getServerSession(authOptions);
 
 export default authOptions;