diff --git a/web/.env.example b/web/.env.example
index cb37b0e..69002d2 100644
--- a/web/.env.example
+++ b/web/.env.example
@@ -1,3 +1,16 @@
 NEXT_PUBLIC_API_BASE_URL=https://api.textbee.dev/api/v1
 NEXT_PUBLIC_GOOGLE_CLIENT_ID=
-NEXT_PUBLIC_TAWKTO_EMBED_URL=
\ No newline at end of file
+NEXT_PUBLIC_TAWKTO_EMBED_URL=
+
+NEXTAUTH_URL=http://localhost:3000
+AUTH_SECRET= # https://generate-secret.vercel.app/32
+
+DATABASE_URL=
+
+MAIL_HOST=
+MAIL_PORT=
+MAIL_USER=
+MAIL_PASS=
+MAIL_FROM=
+
+ADMIN_EMAIL=
\ No newline at end of file
diff --git a/web/app/(app)/(auth)/(components)/login-form.tsx b/web/app/(app)/(auth)/(components)/login-form.tsx
new file mode 100644
index 0000000..42197bb
--- /dev/null
+++ b/web/app/(app)/(auth)/(components)/login-form.tsx
@@ -0,0 +1,119 @@
+'use client'
+
+import { signIn } from 'next-auth/react'
+import { useRouter } from 'next/navigation'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import * as z from 'zod'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { Routes } from '@/config/routes'
+
+const loginSchema = z.object({
+  email: z.string().email({ message: 'Invalid email address' }),
+  password: z.string().min(1, { message: 'Password is required' }),
+})
+
+type LoginFormValues = z.infer<typeof loginSchema>
+
+export default function LoginForm() {
+  const router = useRouter()
+
+  const form = useForm<LoginFormValues>({
+    resolver: zodResolver(loginSchema),
+    defaultValues: {
+      email: '',
+      password: '',
+    },
+  })
+
+  const onSubmit = async (data: LoginFormValues) => {
+    try {
+      const result = await signIn('email-password-login', {
+        redirect: false,
+        email: data.email,
+        password: data.password,
+      })
+
+      if (result?.error) {
+        form.setError('root', {
+          type: 'manual',
+          message: 'Invalid email or password',
+        })
+      } else {
+        router.push(Routes.dashboard)
+      }
+    } catch (error) {
+      console.error('login error:', error)
+      form.setError('root', {
+        type: 'manual',
+        message: 'An unexpected error occurred. Please try again.',
+      })
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
+        <FormField
+          control={form.control}
+          name='email'
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder='m@example.com'
+                  {...field}
+                  className='bg-white'
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name='password'
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Password</FormLabel>
+              <FormControl>
+                <Input type='password' {...field} className='bg-white' />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        {form.formState.errors.root && (
+          <p className='text-sm font-medium text-red-500'>
+            {form.formState.errors.root.message}
+          </p>
+        )}
+        <Button
+          className='w-full'
+          type='submit'
+          disabled={form.formState.isSubmitting}
+        >
+          {form.formState.isSubmitting ? (
+            <>
+              {/* <Icons.spinner className="mr-2 h-4 w-4 animate-spin" /> */}
+              Signing in...
+            </>
+          ) : (
+            'Sign In'
+          )}
+        </Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/web/app/(app)/(auth)/(components)/login-with-google.tsx b/web/app/(app)/(auth)/(components)/login-with-google.tsx
new file mode 100644
index 0000000..9db4a77
--- /dev/null
+++ b/web/app/(app)/(auth)/(components)/login-with-google.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import { Routes } from '@/config/routes'
+import { toast } from '@/hooks/use-toast'
+import { CredentialResponse, GoogleLogin } from '@react-oauth/google'
+import { signIn } from 'next-auth/react'
+import { useRouter } from 'next/navigation'
+
+export default function LoginWithGoogle() {
+  const router = useRouter()
+
+  const onGoogleLoginSuccess = async (
+    credentialResponse: CredentialResponse
+  ) => {
+    toast({
+      title: 'Success',
+      description: 'You are logged in with Google',
+      variant: 'default',
+    })
+    await signIn('google-id-token-login', {
+      redirect: false,
+      idToken: credentialResponse.credential,
+    })
+    router.push(Routes.dashboard)
+  }
+
+  const onGoogleLoginError = () => {
+    toast({
+      title: 'Error',
+      description: 'Something went wrong',
+      variant: 'destructive',
+    })
+  }
+  return (
+    <GoogleLogin
+      onSuccess={onGoogleLoginSuccess}
+      onError={onGoogleLoginError}
+      useOneTap={true}
+      width={'100%'}
+      size='large'
+      shape='pill'
+      locale='en'
+      theme='outline'
+      text='continue_with'
+    />
+  )
+}
diff --git a/web/app/(app)/(auth)/(components)/register-form.tsx b/web/app/(app)/(auth)/(components)/register-form.tsx
new file mode 100644
index 0000000..7f7ca63
--- /dev/null
+++ b/web/app/(app)/(auth)/(components)/register-form.tsx
@@ -0,0 +1,179 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import * as z from 'zod'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { signIn } from 'next-auth/react'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Routes } from '@/config/routes'
+
+const registerSchema = z.object({
+  name: z
+    .string()
+    .min(2, { message: 'Name must be at least 2 characters long' }),
+  email: z.string().email({ message: 'Invalid email address' }),
+  password: z
+    .string()
+    .min(8, { message: 'Password must be at least 8 characters long' }),
+  phone: z.string().optional(),
+  marketingOptIn: z.boolean().optional().default(true),
+})
+
+type RegisterFormValues = z.infer<typeof registerSchema>
+
+export default function RegisterForm() {
+  const router = useRouter()
+
+  const form = useForm<RegisterFormValues>({
+    resolver: zodResolver(registerSchema),
+    defaultValues: {
+      name: '',
+      email: '',
+      password: '',
+      phone: '',
+      marketingOptIn: true,
+    },
+  })
+
+  const onSubmit = async (data: RegisterFormValues) => {
+    form.clearErrors()
+
+    try {
+      const result = await signIn('email-password-register', {
+        redirect: false,
+        email: data.email,
+        password: data.password,
+        name: data.name,
+        phone: data.phone,
+        marketingOptIn: data.marketingOptIn,
+      })
+
+      if (result?.error) {
+        console.log(result.error)
+        form.setError('root', {
+          type: 'manual',
+          message: 'Failed to create account',
+        })
+      } else {
+        router.push(Routes.dashboard)
+      }
+    } catch (error) {
+      console.error('register error:', error)
+      form.setError('root', {
+        type: 'manual',
+        message: 'An unexpected error occurred. Please try again.',
+      })
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
+        <FormField
+          control={form.control}
+          name='name'
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Full Name</FormLabel>
+              <FormControl>
+                <Input placeholder='John Doe' {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name='email'
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input placeholder='m@example.com' {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name='password'
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Password</FormLabel>
+              <FormControl>
+                <Input type='password' {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name='phone'
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Phone (optional)</FormLabel>
+              <FormControl>
+                <Input placeholder='+1 (555) 000-0000' {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        {form.formState.errors.root && (
+          <p className='text-sm font-medium text-red-500'>
+            {form.formState.errors.root.message}
+          </p>
+        )}
+
+        <FormField
+          control={form.control}
+          name='marketingOptIn'
+          render={({ field }) => (
+            <FormItem>
+              <div className='flex items-center space-x-3 space-y-0'>
+                <FormControl>
+                  <Checkbox
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                </FormControl>
+                <FormLabel className='text-sm'>
+                  I want to receive updates about new features and promotions
+                </FormLabel>
+              </div>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button
+          className='w-full'
+          type='submit'
+          disabled={form.formState.isSubmitting}
+        >
+          {form.formState.isSubmitting ? (
+            <>
+              {/* <Icons.spinner className="mr-2 h-4 w-4 animate-spin" /> */}
+              Creating account...
+            </>
+          ) : (
+            'Sign Up'
+          )}
+        </Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/web/app/(app)/(auth)/(components)/request-password-reset-form.tsx b/web/app/(app)/(auth)/(components)/request-password-reset-form.tsx
new file mode 100644
index 0000000..32f1a50
--- /dev/null
+++ b/web/app/(app)/(auth)/(components)/request-password-reset-form.tsx
@@ -0,0 +1,134 @@
+'use client'
+
+import Link from 'next/link'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import * as z from 'zod'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+// import { Icons } from "@/components/ui/icons"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+
+import httpBrowserClient from '@/lib/httpBrowserClient'
+import { ApiEndpoints } from '@/config/api'
+import { Routes } from '@/config/routes'
+
+const requestPasswordResetSchema = z.object({
+  email: z.string().email({ message: 'Invalid email address' }),
+})
+
+type RequestPasswordResetFormValues = z.infer<typeof requestPasswordResetSchema>
+
+export default function RequestPasswordResetForm() {
+  const form = useForm<RequestPasswordResetFormValues>({
+    resolver: zodResolver(requestPasswordResetSchema),
+    defaultValues: {
+      email: '',
+    },
+  })
+
+  const onRequestPasswordReset = async (
+    data: RequestPasswordResetFormValues
+  ) => {
+    form.clearErrors()
+    try {
+      await httpBrowserClient.post(
+        ApiEndpoints.auth.requestPasswordReset(),
+        data
+      )
+    } catch (error) {
+      form.setError('email', { message: 'Invalid email address' })
+    }
+  }
+
+  return (
+    <div className='flex items-center justify-center min-h-screen bg-gray-100'>
+      <Card className='w-[400px] shadow-lg'>
+        <CardHeader className='space-y-1'>
+          <CardTitle className='text-2xl font-bold text-center'>
+            Reset your password
+          </CardTitle>
+          <CardDescription className='text-center'>
+            Enter your email address and we&apos;ll send you a link to reset
+            your password
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {!form.formState.isSubmitted ? (
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(onRequestPasswordReset)}
+                className='space-y-4'
+              >
+                <FormField
+                  control={form.control}
+                  name='email'
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Email</FormLabel>
+                      <FormControl>
+                        <Input placeholder='m@example.com' {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <Button
+                  className='w-full'
+                  type='submit'
+                  disabled={form.formState.isSubmitting}
+                >
+                  {form.formState.isSubmitting ? (
+                    <>
+                      {/* <Icons.spinner className="mr-2 h-4 w-4 animate-spin" /> */}
+                      Sending reset link...
+                    </>
+                  ) : (
+                    'Send reset link'
+                  )}
+                </Button>
+              </form>
+            </Form>
+          ) : (
+            <Alert>
+              {/* <Icons.checkCircle className="h-4 w-4" /> */}
+              <AlertTitle>Check your email</AlertTitle>
+              <AlertDescription>
+                If an account exists for {form.getValues().email}, you will
+                receive a password reset link shortly.
+              </AlertDescription>
+              <AlertDescription className='mt-4 text-sm text-muted-foreground italic'>
+                If you don&apos;t receive an email, please check your spam
+                folder or contact support.
+              </AlertDescription>
+            </Alert>
+          )}
+        </CardContent>
+        <CardFooter className='text-center'>
+          <Link
+            href={Routes.login}
+            className='text-sm text-blue-600 hover:underline'
+          >
+            Back to login
+          </Link>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}
diff --git a/web/app/(app)/(auth)/(components)/reset-password-form.tsx b/web/app/(app)/(auth)/(components)/reset-password-form.tsx
new file mode 100644
index 0000000..cb45aeb
--- /dev/null
+++ b/web/app/(app)/(auth)/(components)/reset-password-form.tsx
@@ -0,0 +1,199 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import * as z from 'zod'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+// import { Icons } from "@/components/ui/icons"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import httpBrowserClient from '@/lib/httpBrowserClient'
+import { ApiEndpoints } from '@/config/api'
+import { Routes } from '@/config/routes'
+
+const resetPasswordSchema = z
+  .object({
+    email: z.string().email({ message: 'Invalid email address' }),
+    otp: z.string().min(4, { message: 'OTP is required' }),
+    newPassword: z
+      .string()
+      .min(8, { message: 'Password must be at least 8 characters long' }),
+    confirmPassword: z
+      .string()
+      .min(4, { message: 'Please confirm your password' }),
+  })
+  .superRefine((data, ctx) => {
+    if (data.newPassword !== data.confirmPassword) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Passwords must match',
+        path: ['confirmPassword'],
+      })
+    }
+  })
+
+type ResetPasswordFormValues = z.infer<typeof resetPasswordSchema>
+
+export default function ResetPasswordForm({
+  email,
+  otp,
+}: {
+  email: string
+  otp: string
+}) {
+  const form = useForm<ResetPasswordFormValues>({
+    resolver: zodResolver(resetPasswordSchema),
+    defaultValues: {
+      email: email,
+      otp: otp,
+      newPassword: '',
+      confirmPassword: '',
+    },
+  })
+
+  const onResetPassword = async (data: ResetPasswordFormValues) => {
+    try {
+      await httpBrowserClient.post(ApiEndpoints.auth.resetPassword(), data)
+    } catch (error) {
+      console.error(error)
+      form.setError('root.serverError', {
+        message: 'Failed to reset password',
+      })
+    }
+  }
+
+  return (
+    <div className='flex items-center justify-center min-h-screen bg-gray-100'>
+      <Card className='w-[400px] shadow-lg'>
+        <CardHeader className='space-y-1'>
+          <CardTitle className='text-2xl font-bold text-center'>
+            Reset your password
+          </CardTitle>
+          <CardDescription className='text-center'>
+            Enter your new password below
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onResetPassword)}
+              className='space-y-4'
+            >
+              <FormField
+                control={form.control}
+                name='email'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email</FormLabel>
+                    <FormControl>
+                      <Input placeholder='m@example.com' {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='otp'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>OTP</FormLabel>
+                    <FormControl>
+                      <Input placeholder='1234' {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='newPassword'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>New Password</FormLabel>
+                    <FormControl>
+                      <Input type='password' {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name='confirmPassword'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Confirm Password</FormLabel>
+                    <FormControl>
+                      <Input type='password' {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {form.formState.errors.root && (
+                <p className='text-sm font-medium text-red-500'>
+                  {form.formState.errors.root.message}
+                </p>
+              )}
+
+              <Button
+                className='w-full'
+                type='submit'
+                disabled={form.formState.isSubmitting}
+              >
+                {form.formState.isSubmitting ? (
+                  <>
+                    {/* <Icons.spinner className="mr-2 h-4 w-4 animate-spin" /> */}
+                    Resetting password...
+                  </>
+                ) : (
+                  'Reset password'
+                )}
+              </Button>
+            </form>
+          </Form>
+          {form.formState.isSubmitted && form.formState.isSubmitSuccessful && (
+            <Alert className='mt-4' variant='default'>
+              {/* <Icons.checkCircle className="h-4 w-4" /> */}
+              <AlertTitle>Password reset successful</AlertTitle>
+              <AlertDescription>
+                Your password has been reset successfully. You can now login
+                with your new password.
+              </AlertDescription>
+            </Alert>
+          )}
+        </CardContent>
+        <CardFooter className='text-center'>
+          <Link
+            href={Routes.login}
+            className='text-sm text-blue-600 hover:underline'
+          >
+            Back to login
+          </Link>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}
diff --git a/web/app/(app)/(auth)/layout.tsx b/web/app/(app)/(auth)/layout.tsx
new file mode 100644
index 0000000..48eacd2
--- /dev/null
+++ b/web/app/(app)/(auth)/layout.tsx
@@ -0,0 +1,7 @@
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <>{children}</>
+}
diff --git a/web/app/(app)/(auth)/login/page.tsx b/web/app/(app)/(auth)/login/page.tsx
new file mode 100644
index 0000000..1fe8050
--- /dev/null
+++ b/web/app/(app)/(auth)/login/page.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import Link from 'next/link'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+
+import LoginWithGoogle from '../(components)/login-with-google'
+import LoginForm from '../(components)/login-form'
+import { Routes } from '@/config/routes'
+
+export default function LoginPage() {
+  return (
+    <div className='flex items-center justify-center min-h-screen bg-gray-100'>
+      <Card className='w-[400px] shadow-lg'>
+        <CardHeader className='space-y-1'>
+          <CardTitle className='text-2xl font-bold text-center'>
+            Welcome back
+          </CardTitle>
+          <CardDescription className='text-center'>
+            Enter your credentials to access your account
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <LoginForm />
+          <div className='relative mt-4'>
+            <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
+              </span>
+            </div>
+          </div>
+          <div className='mt-4 flex justify-center'>
+            <LoginWithGoogle />
+          </div>
+        </CardContent>
+        <CardFooter className='flex flex-col space-y-2 text-center'>
+          <Link
+            href={Routes.resetPassword}
+            className='text-sm text-blue-600 hover:underline'
+          >
+            Forgot your password?
+          </Link>
+          <p className='text-sm text-gray-600'>
+            Don&apos;t have an account?{' '}
+            <Link
+              href={Routes.register}
+              className='font-medium text-blue-600 hover:underline'
+            >
+              Sign up
+            </Link>
+          </p>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}
diff --git a/web/app/(app)/(auth)/logout/page.tsx b/web/app/(app)/(auth)/logout/page.tsx
new file mode 100644
index 0000000..f9029d9
--- /dev/null
+++ b/web/app/(app)/(auth)/logout/page.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+import { signOut } from 'next-auth/react'
+import { useEffect } from 'react'
+
+export default function Logout() {
+  useEffect(() => {
+    signOut()
+  }, [])
+
+  return (
+    <div className='text-center min-h-screen flex items-center justify-center'>
+      Logging out...
+    </div>
+  )
+}
diff --git a/web/app/(app)/(auth)/register/page.tsx b/web/app/(app)/(auth)/register/page.tsx
new file mode 100644
index 0000000..1f4ac59
--- /dev/null
+++ b/web/app/(app)/(auth)/register/page.tsx
@@ -0,0 +1,49 @@
+'use client'
+
+import Link from 'next/link'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+
+import LoginWithGoogle from '../(components)/login-with-google'
+import RegisterForm from '../(components)/register-form'
+import { Routes } from '@/config/routes'
+
+export default function RegisterPage() {
+  return (
+    <div className='flex items-center justify-center min-h-screen bg-gray-100'>
+      <Card className='w-[450px] shadow-lg'>
+        <CardHeader className='space-y-1'>
+          <CardTitle className='text-2xl font-bold text-center'>
+            Create an account
+          </CardTitle>
+          <CardDescription className='text-center'>
+            Enter your details to get started
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <RegisterForm />
+          <div className='mt-4 flex justify-center'>
+            <LoginWithGoogle />
+          </div>
+        </CardContent>
+        <CardFooter className='text-center'>
+          <p className='text-sm text-gray-600'>
+            Already have an account?{' '}
+            <Link
+              href={Routes.login}
+              className='font-medium text-blue-600 hover:underline'
+            >
+              Sign in
+            </Link>
+          </p>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}
diff --git a/web/app/(app)/(auth)/reset-password/page.tsx b/web/app/(app)/(auth)/reset-password/page.tsx
new file mode 100644
index 0000000..8fdc8c4
--- /dev/null
+++ b/web/app/(app)/(auth)/reset-password/page.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+import ResetPasswordForm from '../(components)/reset-password-form'
+
+import RequestPasswordResetForm from '../(components)/request-password-reset-form'
+
+export default function ResetPasswordPage() {
+  const searchParams = useSearchParams()
+  const otp = searchParams.get('otp')
+  const email = searchParams.get('email')
+
+  if (otp && email) {
+    return <ResetPasswordForm email={decodeURIComponent(email)} otp={otp} />
+  }
+
+  return <RequestPasswordResetForm />
+}
diff --git a/web/app/(app)/dashboard/(components)/account-settings.tsx b/web/app/(app)/dashboard/(components)/account-settings.tsx
new file mode 100644
index 0000000..4c832bb
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/account-settings.tsx
@@ -0,0 +1,509 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Badge } from '@/components/ui/badge'
+import {
+  AlertTriangle,
+  Mail,
+  Shield,
+  UserCircle,
+  Loader2,
+  Check,
+} from 'lucide-react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useToast } from '@/hooks/use-toast'
+import httpBrowserClient from '@/lib/httpBrowserClient'
+import { ApiEndpoints } from '@/config/api'
+import { useMutation, useQuery } from '@tanstack/react-query'
+import { Spinner } from '@/components/ui/spinner'
+import Link from 'next/link'
+import { Textarea } from '@/components/ui/textarea'
+import axios from 'axios'
+import { useSession } from 'next-auth/react'
+import { Routes } from '@/config/routes'
+
+const updateProfileSchema = z.object({
+  name: z.string().min(1, 'Name is required'),
+  email: z.string().email().optional(),
+  phone: z
+    .string()
+    .regex(/^\+?\d{0,14}$/, 'Invalid phone number')
+    .optional(),
+})
+
+type UpdateProfileFormData = z.infer<typeof updateProfileSchema>
+
+const changePasswordSchema = z
+  .object({
+    oldPassword: z.string().min(1, 'Old password is required'),
+    newPassword: z
+      .string()
+      .min(8, { message: 'Password must be at least 8 characters long' }),
+    confirmPassword: z
+      .string()
+      .min(4, { message: 'Please confirm your password' }),
+  })
+  .superRefine((data, ctx) => {
+    if (data.newPassword !== data.confirmPassword) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Passwords must match',
+        path: ['confirmPassword'],
+      })
+    }
+  })
+
+type ChangePasswordFormData = z.infer<typeof changePasswordSchema>
+
+export default function AccountSettings() {
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
+  const [deleteConfirmEmail, setDeleteConfirmEmail] = useState('')
+  const { update: updateSession } = useSession()
+
+  const { toast } = useToast()
+
+  const {
+    data: currentUser,
+    isLoading: isLoadingUser,
+    refetch: refetchCurrentUser,
+  } = useQuery({
+    queryKey: ['currentUser'],
+    queryFn: () =>
+      httpBrowserClient
+        .get(ApiEndpoints.auth.whoAmI())
+        .then((res) => res.data?.data),
+  })
+
+  const updateProfileForm = useForm<UpdateProfileFormData>({
+    resolver: zodResolver(updateProfileSchema),
+    defaultValues: {
+      name: currentUser?.name,
+      email: currentUser?.email,
+      phone: currentUser?.phone,
+    },
+  })
+
+  const changePasswordForm = useForm<ChangePasswordFormData>({
+    resolver: zodResolver(changePasswordSchema),
+  })
+
+  const handleDeleteAccount = () => {
+    if (deleteConfirmEmail !== currentUser?.email) {
+      toast({
+        title: 'Please enter your correct email address',
+      })
+      return
+    }
+    requestAccountDeletion()
+  }
+
+  const handleVerifyEmail = () => {
+    // TODO: Implement email verification
+  }
+
+  const {
+    mutate: updateProfile,
+    isPending: isUpdatingProfile,
+    error: updateProfileError,
+    isSuccess: isUpdateProfileSuccess,
+  } = useMutation({
+    mutationFn: (data: UpdateProfileFormData) =>
+      httpBrowserClient.patch(ApiEndpoints.auth.updateProfile(), data),
+    onSuccess: () => {
+      refetchCurrentUser()
+      toast({
+        title: 'Profile updated successfully!',
+      })
+      updateSession({
+        name: updateProfileForm.getValues().name,
+        phone: updateProfileForm.getValues().phone,
+      })
+    },
+    onError: () => {
+      toast({
+        title: 'Failed to update profile',
+      })
+    },
+  })
+
+  const {
+    mutate: changePassword,
+    isPending: isChangingPassword,
+    error: changePasswordError,
+    isSuccess: isChangePasswordSuccess,
+  } = useMutation({
+    mutationFn: (data: ChangePasswordFormData) =>
+      httpBrowserClient.post(ApiEndpoints.auth.changePassword(), data),
+    onSuccess: () => {
+      toast({
+        title: 'Password changed successfully!',
+      })
+      changePasswordForm.reset()
+    },
+    onError: (error) => {
+      const errorMessage = (error as any).response?.data?.error
+      changePasswordForm.setError('root.serverError', {
+        message: errorMessage || 'Failed to change password',
+      })
+      toast({
+        title: 'Failed to change password',
+      })
+    },
+  })
+
+  const [deleteReason, setDeleteReason] = useState('')
+
+  const {
+    mutate: requestAccountDeletion,
+    isPending: isRequestingAccountDeletion,
+    error: requestAccountDeletionError,
+    isSuccess: isRequestAccountDeletionSuccess,
+  } = useMutation({
+    mutationFn: () =>
+      axios.post('/api/request-account-deletion', {
+        message: deleteReason,
+      }),
+    onSuccess: () => {
+      toast({
+        title: 'Account deletion request submitted',
+      })
+    },
+    onError: () => {
+      toast({
+        title: 'Failed to submit account deletion request',
+      })
+    },
+  })
+
+  if (isLoadingUser)
+    return (
+      <div className='flex justify-center items-center h-full'>
+        <Spinner size='sm' />
+      </div>
+    )
+
+  return (
+    <div className='grid gap-6 max-w-2xl mx-auto'>
+      <Card>
+        <CardHeader>
+          <div className='flex items-center gap-2'>
+            <UserCircle className='h-5 w-5' />
+            <CardTitle>Profile Information</CardTitle>
+          </div>
+          <CardDescription>Update your profile information</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form
+            onSubmit={updateProfileForm.handleSubmit((data) =>
+              updateProfile(data)
+            )}
+            className='space-y-4'
+          >
+            <div className='space-y-2'>
+              <Label htmlFor='name'>Full Name</Label>
+              <Input
+                id='name'
+                {...updateProfileForm.register('name')}
+                placeholder='Enter your full name'
+                defaultValue={currentUser?.name}
+              />
+              {updateProfileForm.formState.errors.name && (
+                <p className='text-sm text-destructive'>
+                  {updateProfileForm.formState.errors.name.message}
+                </p>
+              )}
+            </div>
+
+            <div className='space-y-2'>
+              <Label htmlFor='email' className='flex items-center gap-2'>
+                Email Address
+                {currentUser?.emailVerifiedAt && (
+                  <Badge variant='secondary' className='ml-2'>
+                    <Shield className='h-3 w-3 mr-1' />
+                    Verified
+                  </Badge>
+                )}
+              </Label>
+              <div className='flex gap-2'>
+                <Input
+                  id='email'
+                  type='email'
+                  {...updateProfileForm.register('email')}
+                  placeholder='Enter your email'
+                  defaultValue={currentUser?.email}
+                  disabled
+                />
+                {!currentUser?.emailVerifiedAt ? (
+                  <Button
+                    type='button'
+                    variant='outline'
+                    onClick={handleVerifyEmail}
+                    disabled={true}
+                  >
+                    {isUpdatingProfile ? (
+                      <Loader2 className='h-4 w-4 animate-spin' />
+                    ) : (
+                      <Mail className='h-4 w-4 mr-2' />
+                    )}
+                    Verify
+                  </Button>
+                ) : (
+                  <Button variant='outline' disabled>
+                    <Check className='h-4 w-4 mr-2' />
+                    Verified
+                  </Button>
+                )}
+              </div>
+              {updateProfileForm.formState.errors.email && (
+                <p className='text-sm text-destructive'>
+                  {updateProfileForm.formState.errors.email.message}
+                </p>
+              )}
+            </div>
+
+            <div className='space-y-2'>
+              <Label htmlFor='phone'>Phone Number</Label>
+              <Input
+                id='phone'
+                type='tel'
+                {...updateProfileForm.register('phone')}
+                placeholder='Enter your phone number'
+                defaultValue={currentUser?.phone}
+              />
+              {updateProfileForm.formState.errors.phone && (
+                <p className='text-sm text-destructive'>
+                  {updateProfileForm.formState.errors.phone.message}
+                </p>
+              )}
+            </div>
+
+            {isUpdateProfileSuccess && (
+              <p className='text-sm text-green-500'>
+                Profile updated successfully!
+              </p>
+            )}
+
+            <Button
+              type='submit'
+              className='w-full mt-6'
+              disabled={isUpdatingProfile}
+            >
+              {isUpdatingProfile ? (
+                <Loader2 className='h-4 w-4 animate-spin mr-2' />
+              ) : null}
+              Save Changes
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <div className='flex items-center gap-2'>
+            <CardTitle>Change Password</CardTitle>
+          </div>
+          <CardDescription>
+            If you signed in with google, your can reset your password{' '}
+            <Link href={Routes.resetPassword} className='underline'>
+              here
+            </Link>
+            .
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form
+            onSubmit={changePasswordForm.handleSubmit((data) =>
+              changePassword(data)
+            )}
+            className='space-y-4'
+          >
+            <div className='space-y-2'>
+              <Label htmlFor='oldPassword'>Old Password</Label>
+              <Input
+                id='oldPassword'
+                type='password'
+                {...changePasswordForm.register('oldPassword')}
+                placeholder='Enter your old password'
+              />
+              {changePasswordForm.formState.errors.oldPassword && (
+                <p className='text-sm text-destructive'>
+                  {changePasswordForm.formState.errors.oldPassword.message}
+                </p>
+              )}
+            </div>
+
+            <div className='space-y-2'>
+              <Label htmlFor='oldPassword'>Old Password</Label>
+              <Input
+                id='newPassword'
+                type='password'
+                {...changePasswordForm.register('newPassword')}
+                placeholder='Enter your new password'
+              />
+              {changePasswordForm.formState.errors.newPassword && (
+                <p className='text-sm text-destructive'>
+                  {changePasswordForm.formState.errors.newPassword.message}
+                </p>
+              )}
+            </div>
+
+            <div className='space-y-2'>
+              <Label htmlFor='confirmPassword'>Confirm Password</Label>
+              <Input
+                id='confirmPassword'
+                type='password'
+                {...changePasswordForm.register('confirmPassword')}
+                placeholder='Enter your confirm password'
+              />
+              {changePasswordForm.formState.errors.confirmPassword && (
+                <p className='text-sm text-destructive'>
+                  {changePasswordForm.formState.errors.confirmPassword.message}
+                </p>
+              )}
+            </div>
+
+            {changePasswordForm.formState.errors.root?.serverError && (
+              <p className='text-sm text-destructive'>
+                {changePasswordForm.formState.errors.root.serverError.message}
+              </p>
+            )}
+
+            {isChangePasswordSuccess && (
+              <p className='text-sm text-green-500'>
+                Password changed successfully!
+              </p>
+            )}
+
+            <Button
+              type='submit'
+              className='w-full mt-6'
+              disabled={isChangingPassword}
+            >
+              {isChangingPassword ? (
+                <Loader2 className='h-4 w-4 animate-spin mr-2' />
+              ) : null}
+              Change Password
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      <Card className='border-destructive/50'>
+        <CardHeader>
+          <div className='flex items-center gap-2 text-destructive'>
+            <AlertTriangle className='h-5 w-5' />
+            <CardTitle>Danger Zone</CardTitle>
+          </div>
+          <CardDescription>
+            Permanently delete your account and all associated data
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Dialog
+            open={isDeleteDialogOpen}
+            onOpenChange={setIsDeleteDialogOpen}
+          >
+            <Button
+              variant='destructive'
+              className='w-full'
+              onClick={() => setIsDeleteDialogOpen(true)}
+            >
+              <AlertTriangle className='mr-2 h-4 w-4' />
+              Delete Account
+            </Button>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle className='flex items-center gap-2'>
+                  <AlertTriangle className='h-5 w-5 text-destructive' />
+                  Delete Account
+                </DialogTitle>
+                <DialogDescription className='pt-4'>
+                  <p className='mb-4'>
+                    Are you sure you want to delete your account? This action:
+                  </p>
+                  <ul className='list-disc list-inside space-y-2 mb-4'>
+                    <li>Cannot be undone</li>
+                    <li>Will permanently delete all your data</li>
+                    <li>Will cancel all active subscriptions</li>
+                    <li>Will remove access to all services</li>
+                  </ul>
+
+                  {/* enter reason for deletion text area */}
+                  <Label htmlFor='deleteReason'>Reason for deletion</Label>
+                  <Textarea
+                    className='my-2'
+                    placeholder='Enter your reason for deletion'
+                    value={deleteReason}
+                    onChange={(e) => setDeleteReason(e.target.value)}
+                  />
+
+                  <p>Please type your email address to confirm:</p>
+
+                  <Input
+                    className='mt-2'
+                    placeholder='Enter your email address'
+                    value={deleteConfirmEmail}
+                    onChange={(e) => setDeleteConfirmEmail(e.target.value)}
+                  />
+
+                  {requestAccountDeletionError && (
+                    <p className='text-sm text-destructive'>
+                      {requestAccountDeletionError.message ||
+                        'Failed to submit account deletion request'}
+                    </p>
+                  )}
+
+                  {isRequestAccountDeletionSuccess && (
+                    <p className='text-sm text-green-500'>
+                      Account deletion request submitted
+                    </p>
+                  )}
+                </DialogDescription>
+              </DialogHeader>
+              <DialogFooter className='gap-2 sm:gap-0'>
+                <Button
+                  variant='outline'
+                  onClick={() => setIsDeleteDialogOpen(false)}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  variant='destructive'
+                  onClick={handleDeleteAccount}
+                  disabled={isRequestingAccountDeletion || !deleteConfirmEmail}
+                >
+                  {isRequestingAccountDeletion ? (
+                    <Loader2 className='h-4 w-4 animate-spin mr-2' />
+                  ) : (
+                    <AlertTriangle className='h-4 w-4 mr-2' />
+                  )}
+                  Delete Account
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/api-keys.tsx b/web/app/(app)/dashboard/(components)/api-keys.tsx
new file mode 100644
index 0000000..6d3709e
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/api-keys.tsx
@@ -0,0 +1,347 @@
+'use client'
+
+import { useState } from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Copy, Key, MoreVertical, Loader2 } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Input } from '@/components/ui/input'
+import { useToast } from '@/hooks/use-toast'
+import { useMutation, useQuery } from '@tanstack/react-query'
+import httpBrowserClient from '@/lib/httpBrowserClient'
+import { ApiEndpoints } from '@/config/api'
+import { Spinner } from '@/components/ui/spinner'
+
+export default function ApiKeys() {
+  const {
+    isPending,
+    error,
+    data: apiKeys,
+    refetch: refetchApiKeys,
+  } = useQuery({
+    queryKey: ['apiKeys'],
+    queryFn: () =>
+      httpBrowserClient
+        .get(ApiEndpoints.auth.listApiKeys())
+        .then((res) => res.data),
+    // select: (res) => res.data,
+  })
+
+  const { toast } = useToast()
+
+  const [selectedKey, setSelectedKey] = useState<(typeof apiKeys)[0] | null>(
+    null
+  )
+  const [isRevokeDialogOpen, setIsRevokeDialogOpen] = useState(false)
+  const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false)
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
+  const [newKeyName, setNewKeyName] = useState('')
+
+  const {
+    mutate: revokeApiKey,
+    isPending: isRevokingApiKey,
+    error: revokeApiKeyError,
+    isSuccess: isRevokeApiKeySuccess,
+  } = useMutation({
+    mutationFn: (id: string) =>
+      httpBrowserClient.post(ApiEndpoints.auth.revokeApiKey(id)),
+    onSuccess: () => {
+      setIsRevokeDialogOpen(false)
+      toast({
+        title: `API key "${selectedKey.apiKey}" has been revoked`,
+      })
+      refetchApiKeys()
+    },
+    onError: () => {
+      toast({
+        variant: 'destructive',
+        title: 'Error revoking API key',
+        description: revokeApiKeyError?.message,
+      })
+    },
+  })
+
+  const {
+    mutate: deleteApiKey,
+    isPending: isDeletingApiKey,
+    error: deleteApiKeyError,
+    isSuccess: isDeleteApiKeySuccess,
+  } = useMutation({
+    mutationFn: (id: string) =>
+      httpBrowserClient.delete(ApiEndpoints.auth.deleteApiKey(id)),
+    onSuccess: () => {
+      setIsDeleteDialogOpen(false)
+      toast({
+        title: `API key deleted`,
+      })
+      refetchApiKeys()
+    },
+    onError: () => {
+      toast({
+        variant: 'destructive',
+        title: 'Error deleting API key',
+        description: deleteApiKeyError?.message,
+      })
+    },
+  })
+  const {
+    mutate: renameApiKey,
+    isPending: isRenamingApiKey,
+    error: renameApiKeyError,
+    isSuccess: isRenameApiKeySuccess,
+  } = useMutation({
+    mutationFn: ({ id, name }: { id: string; name: string }) =>
+      httpBrowserClient.patch(ApiEndpoints.auth.renameApiKey(id), { name }),
+    onSuccess: () => {
+      setIsRenameDialogOpen(false)
+      toast({
+        title: `API key renamed to "${newKeyName}"`,
+      })
+      refetchApiKeys()
+    },
+    onError: () => {
+      toast({
+        variant: 'destructive',
+        title: 'Error renaming API key',
+        description: renameApiKeyError?.message,
+      })
+    },
+  })
+
+  return (
+    <Card>
+      <CardHeader className='pb-2'>
+        <CardTitle className='text-lg'>API Keys</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className='h-[400px] pr-4'>
+          <div className='space-y-2'>
+            {isPending && (
+              <div className='flex justify-center items-center h-full'>
+                <Spinner size='sm' />
+              </div>
+            )}
+
+            {error && (
+              <div className='flex justify-center items-center h-full'>
+                <div>Error: {error.message}</div>
+              </div>
+            )}
+
+            {!isPending && !error && apiKeys?.data?.length === 0 && (
+              <div className='flex justify-center items-center h-full'>
+                <div>No API keys found</div>
+              </div>
+            )}
+
+            {apiKeys?.data?.map((apiKey) => (
+              <Card key={apiKey.id} className='border-0 shadow-none'>
+                <CardContent className='flex items-center p-3'>
+                  <Key className='h-6 w-6 mr-3' />
+                  <div className='flex-1'>
+                    <div className='flex items-center justify-between'>
+                      <h3 className='font-semibold text-sm'>
+                        {apiKey.name || 'API Key'}
+                      </h3>
+                      <Badge
+                        variant={apiKey.revokedAt ? 'secondary' : 'default'}
+                        className='text-xs'
+                      >
+                        {apiKey.revokedAt ? 'Revoked' : 'Active'}
+                      </Badge>
+                    </div>
+                    <div className='flex items-center space-x-2 mt-1'>
+                      <code className='relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs'>
+                        {apiKey.apiKey}
+                      </code>
+                    </div>
+                    <div className='flex items-center mt-1 space-x-3 text-xs text-muted-foreground'>
+                      <div>
+                        Created at:{' '}
+                        {new Date(apiKey.createdAt).toLocaleString('en-US', {
+                          dateStyle: 'medium',
+                          timeStyle: 'short',
+                        })}
+                      </div>
+                      <div>
+                        Last used: {/* if usage count is 0, show never  */}
+                        {apiKey?.lastUsedAt && apiKey.usageCount > 0
+                          ? new Date(apiKey.lastUsedAt).toLocaleString(
+                              'en-US',
+                              {
+                                dateStyle: 'medium',
+                                timeStyle: 'short',
+                              }
+                            )
+                          : 'Never'}
+                      </div>
+                    </div>
+                  </div>
+                  <div className=''>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant='ghost' size='icon' className='h-6 w-6'>
+                          <MoreVertical className='h-3 w-3' />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align='end'>
+                        <DropdownMenuItem
+                          onClick={() => {
+                            setSelectedKey(apiKey)
+                            setNewKeyName(apiKey.name || 'API Key')
+                            setIsRenameDialogOpen(true)
+                          }}
+                        >
+                          Rename
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          className='text-destructive'
+                          onClick={() => {
+                            setSelectedKey(apiKey)
+                            setIsRevokeDialogOpen(true)
+                          }}
+                          disabled={!!apiKey.revokedAt}
+                        >
+                          Revoke
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          className='text-destructive'
+                          onClick={() => {
+                            setSelectedKey(apiKey)
+                            setIsDeleteDialogOpen(true)
+                          }}
+                        >
+                          Delete
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </ScrollArea>
+
+        {/* Revoke Dialog */}
+        <Dialog open={isRevokeDialogOpen} onOpenChange={setIsRevokeDialogOpen}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Revoke API Key</DialogTitle>
+              <DialogDescription>
+                Are you sure you want to revoke this API key? This action cannot
+                be undone, and any applications using this key will stop working
+                immediately.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+              <Button
+                variant='outline'
+                onClick={() => setIsRevokeDialogOpen(false)}
+                disabled={isRevokingApiKey}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant='destructive'
+                onClick={() => revokeApiKey(selectedKey?._id)}
+                disabled={isRevokingApiKey}
+              >
+                {isRevokingApiKey ? (
+                  <Loader2 className='h-4 w-4 animate-spin mr-2' />
+                ) : null}
+                Revoke Key
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* Delete Dialog */}
+        <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Delete API Key</DialogTitle>
+              <DialogDescription>
+                Are you sure you want to delete this API key? This action cannot
+                be undone.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+              <Button
+                variant='outline'
+                onClick={() => setIsDeleteDialogOpen(false)}
+                disabled={isDeletingApiKey}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant='destructive'
+                onClick={() => deleteApiKey(selectedKey?._id)}
+                disabled={isDeletingApiKey}
+              >
+                {isDeletingApiKey ? (
+                  <Loader2 className='h-4 w-4 animate-spin mr-2' />
+                ) : null}
+                Delete
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+
+        {/* Rename Dialog */}
+        <Dialog open={isRenameDialogOpen} onOpenChange={setIsRenameDialogOpen}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Rename API Key</DialogTitle>
+              <DialogDescription>
+                Enter a new name for your API key.
+              </DialogDescription>
+            </DialogHeader>
+            <Input
+              value={newKeyName}
+              onChange={(e) => setNewKeyName(e.target.value)}
+              placeholder='Enter new name'
+            />
+            <DialogFooter>
+              <Button
+                variant='outline'
+                onClick={() => setIsRenameDialogOpen(false)}
+                disabled={isRenamingApiKey}
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={() =>
+                  renameApiKey({
+                    id: selectedKey?._id,
+                    name: newKeyName?.trim(),
+                  })
+                }
+                disabled={isRenamingApiKey || !newKeyName?.trim()}
+              >
+                {isRenamingApiKey ? (
+                  <Loader2 className='h-4 w-4 animate-spin mr-2' />
+                ) : null}
+                Save
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/community-alert.tsx b/web/app/(app)/dashboard/(components)/community-alert.tsx
new file mode 100644
index 0000000..5208e64
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/community-alert.tsx
@@ -0,0 +1,37 @@
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Button } from '@/components/ui/button'
+import { ExternalLinks } from '@/config/external-links'
+import { Github, Heart, MessageSquare } from 'lucide-react'
+import Link from 'next/link'
+
+export default function CommunityAlert() {
+  return (
+    <Alert>
+      <AlertDescription className='flex flex-wrap items-center gap-2 md:gap-4'>
+        <span className='flex-1'>
+          Join our community and support the development!
+        </span>
+        <div className='flex flex-wrap gap-1 md:gap-2'>
+          <Button variant='outline' size='sm' asChild>
+            <Link href={ExternalLinks.github} target='_blank' prefetch={false}>
+              <Github className='mr-1 h-4 w-4' />
+              GitHub
+            </Link>
+          </Button>
+          <Button variant='outline' size='sm' asChild>
+            <Link href={ExternalLinks.patreon} target='_blank' prefetch={false}>
+              <Heart className='mr-1 h-4 w-4' />
+              Patreon
+            </Link>
+          </Button>
+          <Button variant='outline' size='sm' asChild>
+            <Link href={ExternalLinks.discord} target='_blank' prefetch={false}>
+              <MessageSquare className='mr-1 h-4 w-4' />
+              Discord
+            </Link>
+          </Button>
+        </div>
+      </AlertDescription>
+    </Alert>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/community-links.tsx b/web/app/(app)/dashboard/(components)/community-links.tsx
new file mode 100644
index 0000000..00a4e88
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/community-links.tsx
@@ -0,0 +1,62 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Github, Heart, MessageSquare } from 'lucide-react'
+import Link from 'next/link'
+import { ExternalLinks } from '@/config/external-links'
+
+export default function CommunityLinks() {
+  return (
+    <div className='grid gap-4 md:grid-cols-3'>
+      <Card>
+        <CardHeader>
+          <CardTitle>GitHub</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className='text-sm text-muted-foreground mb-4'>
+            Check out our source code and contribute to the project.
+          </p>
+          <Link href={ExternalLinks.github} prefetch={false} target='_blank'>
+            <Button className='w-full'>
+              <Github className='mr-2 h-4 w-4' />
+              View Source
+            </Button>
+          </Link>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Support Us</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className='text-sm text-muted-foreground mb-4'>
+            Support the development by becoming a patron.
+          </p>
+          <Link href={ExternalLinks.patreon} prefetch={false} target='_blank'>
+            <Button className='w-full' variant='secondary'>
+              <Heart className='mr-2 h-4 w-4' />
+              Become a Patron
+            </Button>
+          </Link>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Discord</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className='text-sm text-muted-foreground mb-4'>
+            Join our community for support and updates.
+          </p>
+          <Link href={ExternalLinks.discord} prefetch={false} target='_blank'>
+            <Button className='w-full' variant='outline'>
+              <MessageSquare className='mr-2 h-4 w-4' />
+              Join Discord
+            </Button>
+          </Link>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/dashboard-layout.tsx b/web/app/(app)/dashboard/(components)/dashboard-layout.tsx
new file mode 100644
index 0000000..8704a5e
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/dashboard-layout.tsx
@@ -0,0 +1,83 @@
+'use client'
+
+import { useState } from 'react'
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+
+import { Button } from '@/components/ui/button'
+import { QrCode, Heart, UserCircle } from 'lucide-react'
+import CommunityAlert from './community-alert'
+import MainDashboard from './main-dashboard'
+import CommunityLinks from './community-links'
+import AccountSettings from './account-settings'
+import GenerateApiKey from './generate-api-key'
+import { useSession } from 'next-auth/react'
+
+export default function Dashboard({
+  children,
+}: {
+  children?: React.ReactNode
+}) {
+  const [currentTab, setCurrentTab] = useState('dashboard')
+
+  const handleTabChange = (value: string) => {
+    setCurrentTab(value)
+  }
+
+  const { data: session } = useSession()
+
+  const welcomeMessage =
+    new Date().getHours() < 12
+      ? 'Good morning'
+      : new Date().getHours() < 18
+      ? 'Good afternoon'
+      : 'Good evening'
+
+  return (
+    <div className='flex-1 space-y-4 p-4 pt-6 md:p-8'>
+      <div className='flex items-center justify-between space-y-2 flex-col md:flex-row'>
+        <h2 className='text-3xl font-bold tracking-tight'>
+          {welcomeMessage}, {session?.user?.name}
+        </h2>
+        <div className='flex items-center space-x-2 py-4'>
+          <GenerateApiKey />
+        </div>
+      </div>
+
+      <Tabs
+        value={currentTab}
+        onValueChange={handleTabChange}
+        className='space-y-4'
+      >
+        <TabsList className='flex'>
+          <TabsTrigger value='dashboard' className='flex-1'>
+            Dashboard
+          </TabsTrigger>
+          <TabsTrigger value='community' className='flex-1'>
+            <Heart className='mr-2 h-4 w-4' />
+            Community
+          </TabsTrigger>
+          <TabsTrigger value='account' className='flex-1'>
+            <UserCircle className='mr-2 h-4 w-4' />
+            Account
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value='dashboard' className='space-y-4'>
+          <CommunityAlert />
+          <MainDashboard />
+        </TabsContent>
+
+        <TabsContent value='community' className='space-y-4'>
+          <CommunityAlert />
+          <CommunityLinks />
+        </TabsContent>
+
+        <TabsContent value='account' className='space-y-4'>
+          <CommunityAlert />
+          <AccountSettings />
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/device-list.tsx b/web/app/(app)/dashboard/(components)/device-list.tsx
new file mode 100644
index 0000000..6ed695b
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/device-list.tsx
@@ -0,0 +1,118 @@
+'use client'
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Smartphone, Battery, Signal, Copy } from 'lucide-react'
+import { useToast } from '@/hooks/use-toast'
+import httpBrowserClient from '@/lib/httpBrowserClient'
+import { ApiEndpoints } from '@/config/api'
+import { useQuery } from '@tanstack/react-query'
+import { Spinner } from '@/components/ui/spinner'
+
+export default function DeviceList() {
+  const { toast } = useToast()
+  const {
+    isPending,
+    error,
+    data: devices,
+  } = useQuery({
+    queryKey: ['devices'],
+    queryFn: () =>
+      httpBrowserClient
+        .get(ApiEndpoints.gateway.listDevices())
+        .then((res) => res.data),
+    // select: (res) => res.data,
+  })
+
+  const handleCopyId = (id: string) => {
+    navigator.clipboard.writeText(id)
+    toast({
+      title: 'Device ID copied to clipboard',
+    })
+  }
+
+  return (
+    <Card>
+      <CardHeader className='pb-2'>
+        <CardTitle className='text-lg'>Registered Devices</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className='h-[400px] pr-4'>
+          <div className='space-y-2'>
+            {isPending && (
+              <div className='flex justify-center items-center h-full'>
+                <Spinner size='sm' />
+              </div>
+            )}
+
+            {error && (
+              <div className='flex justify-center items-center h-full'>
+                <div>Error: {error.message}</div>
+              </div>
+            )}
+
+            {!isPending && !error && devices?.data?.length === 0 && (
+              <div className='flex justify-center items-center h-full'>
+                <div>No devices found</div>
+              </div>
+            )}
+
+            {devices?.data?.map((device) => (
+              <Card key={device.id} className='border-0 shadow-none'>
+                <CardContent className='flex items-center p-3'>
+                  <Smartphone className='h-6 w-6 mr-3' />
+                  <div className='flex-1'>
+                    <div className='flex items-center justify-between'>
+                      <h3 className='font-semibold text-sm'>
+                        {device.brand} {device.model}
+                      </h3>
+                      <Badge
+                        variant={
+                          device.status === 'online' ? 'default' : 'secondary'
+                        }
+                        className='text-xs'
+                      >
+                        {device.enabled ? 'Enabled' : 'Disabled'}
+                      </Badge>
+                    </div>
+                    <div className='flex items-center space-x-2 mt-1'>
+                      <code className='relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs'>
+                        {device._id}
+                      </code>
+                      <Button
+                        variant='ghost'
+                        size='icon'
+                        className='h-6 w-6'
+                        onClick={() => handleCopyId(device._id)}
+                      >
+                        <Copy className='h-3 w-3' />
+                      </Button>
+                    </div>
+                    <div className='flex items-center mt-1 space-x-3 text-xs text-muted-foreground'>
+                      <div className='flex items-center'>
+                        <Battery className='h-3 w-3 mr-1' />
+                        unknown
+                      </div>
+                      <div className='flex items-center'>
+                        <Signal className='h-3 w-3 mr-1' />-
+                      </div>
+                      <div>
+                        Registered at:{' '}
+                        {new Date(device.createdAt).toLocaleString('en-US', {
+                          dateStyle: 'medium',
+                          timeStyle: 'short',
+                        })}
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/generate-api-key.tsx b/web/app/(app)/dashboard/(components)/generate-api-key.tsx
new file mode 100644
index 0000000..2285926
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/generate-api-key.tsx
@@ -0,0 +1,186 @@
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Spinner } from '@/components/ui/spinner'
+import { ApiEndpoints } from '@/config/api'
+import { Routes } from '@/config/routes'
+import { useToast } from '@/hooks/use-toast'
+import httpBrowserClient from '@/lib/httpBrowserClient'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { QrCode, Copy, Smartphone, Download, AlertTriangle } from 'lucide-react'
+import React, { useState } from 'react'
+import QRCode from 'react-qr-code'
+
+export default function GenerateApiKey() {
+  const [isGenerateKeyModalOpen, setIsGenerateKeyModalOpen] = useState(false)
+  const [isConfirmGenerateKeyModalOpen, setIsConfirmGenerateKeyModalOpen] =
+    useState(false)
+
+  const handleConfirmGenerateKey = () => {
+    setIsConfirmGenerateKeyModalOpen(true)
+  }
+
+  const queryClient = useQueryClient()
+
+  // invalidate devices query after successful api key generation
+  const {
+    isPending: isGeneratingApiKey,
+    error: generateApiKeyError,
+    mutateAsync: generateApiKey,
+    data: generatedApiKey,
+  } = useMutation({
+    mutationKey: ['generate-api-key'],
+    onSuccess: (data) => {
+      setIsConfirmGenerateKeyModalOpen(false)
+      setIsGenerateKeyModalOpen(true)
+      queryClient.invalidateQueries({ queryKey: ['apiKeys', 'stats'] })
+      queryClient.refetchQueries({ queryKey: ['apiKeys', 'stats'] })
+    },
+    mutationFn: () =>
+      httpBrowserClient
+        .post(ApiEndpoints.auth.generateApiKey())
+        .then((res) => res.data),
+  })
+
+  const { toast } = useToast()
+
+  const handleCopyKey = () => {
+    navigator.clipboard.writeText(generatedApiKey?.data)
+    toast({
+      title: 'API key copied to clipboard',
+    })
+  }
+
+  return (
+    <>
+      <Button onClick={handleConfirmGenerateKey}>
+        <QrCode className='mr-2 h-4 w-4' />
+        Generate API Key
+      </Button>
+
+      <Dialog
+        open={isConfirmGenerateKeyModalOpen}
+        onOpenChange={setIsConfirmGenerateKeyModalOpen}
+      >
+        <DialogContent className='sm:max-w-md'>
+          <DialogHeader>
+            <DialogTitle>Create new API Key</DialogTitle>
+            <DialogDescription>
+              <div className='space-y-2 text-sm text-muted-foreground'>
+                <p>
+                  By clicking generate, you will be able to view your API key.
+                  Make sure to save it before closing the modal as you will not
+                  be able to view it again.
+                </p>
+              </div>
+            </DialogDescription>
+          </DialogHeader>
+          <div className='flex flex-col space-y-4'>
+            <Button
+              onClick={() => generateApiKey()}
+              disabled={isGeneratingApiKey}
+            >
+              {isGeneratingApiKey ? (
+                <div className='flex justify-center items-center h-full'>
+                  <Spinner size='sm' className='text-white' />
+                </div>
+              ) : (
+                'Generate API Key'
+              )}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={isGenerateKeyModalOpen}
+        onOpenChange={setIsGenerateKeyModalOpen}
+      >
+        <DialogContent className='sm:max-w-lg'>
+          <DialogHeader>
+            <DialogTitle>Your API Key</DialogTitle>
+            <DialogDescription>
+              Use this API key to connect your device or authenticate your
+              service.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className='space-y-6'>
+            <div className='flex justify-center p-4 bg-muted rounded-lg '>
+              {generatedApiKey?.data && (
+                <QRCode value={generatedApiKey?.data} size={120} />
+              )}
+            </div>
+
+            <div className='space-y-2'>
+              <div className='flex items-center gap-2'>
+                <code className='relative rounded bg-muted px-[0.5rem] py-[0.3rem] font-mono text-sm flex-1'>
+                  {generatedApiKey?.data}
+                </code>
+                <Button variant='outline' size='icon' onClick={handleCopyKey}>
+                  <Copy className='h-4 w-4' />
+                </Button>
+              </div>
+            </div>
+
+            <div className='space-y-4 text-sm'>
+              <div className='space-y-2'>
+                <h4 className='font-medium flex items-center gap-2'>
+                  <Smartphone className='h-4 w-4' />
+                  For Device Registration
+                </h4>
+                <p className='text-muted-foreground'>
+                  Open the TextBee app and scan the QR code, or manually enter
+                  the API key in the app and click register/update.
+                </p>
+              </div>
+
+              <div className='space-y-2'>
+                <h4 className='font-medium flex items-center gap-2'>
+                  <Download className='h-4 w-4' />
+                  Don&apos;t have the app?
+                </h4>
+                <p className='text-muted-foreground'>
+                  Download the APK from{' '}
+                  <a
+                    href={Routes.downloadAndroidApp}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className='text-primary hover:underline'
+                  >
+                    {Routes.downloadAndroidApp}
+                  </a>{' '}
+                  and install it.
+                </p>
+              </div>
+
+              <div className='space-y-2'>
+                <h4 className='font-medium'>For External Services</h4>
+                <p className='text-muted-foreground'>
+                  Copy the API key and store it securely for authenticating your
+                  external service with TextBee.
+                </p>
+              </div>
+
+              <div className='rounded-md bg-yellow-50 dark:bg-yellow-900/30 p-3 mt-4'>
+                <div className='flex items-center gap-2 text-yellow-800 dark:text-yellow-200'>
+                  <AlertTriangle className='h-4 w-4' />
+                  <p className='text-sm font-medium'>Important</p>
+                </div>
+                <p className='mt-2 text-sm text-yellow-700 dark:text-yellow-300'>
+                  Once you close this modal, you will not be able to view your
+                  API key again. Make sure to save it before closing.
+                </p>
+              </div>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/get-started.tsx b/web/app/(app)/dashboard/(components)/get-started.tsx
new file mode 100644
index 0000000..599dcc4
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/get-started.tsx
@@ -0,0 +1,71 @@
+'use client'
+
+import { useState } from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { QrCode, Copy, AlertTriangle, Download, Smartphone } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { useToast } from '@/hooks/use-toast'
+import QRCode from 'react-qr-code'
+import GenerateApiKey from './generate-api-key'
+
+export default function GetStartedCard() {
+  const [isGenerateKeyModalOpen, setIsGenerateKeyModalOpen] = useState(false)
+  const [isConfirmGenerateKeyModalOpen, setIsConfirmGenerateKeyModalOpen] =
+    useState(false)
+  const [apiKey, setApiKey] = useState('')
+
+  const handleConfirmGenerateKey = () => {
+
+    setIsConfirmGenerateKeyModalOpen(true)
+  }
+
+  const handleGenerateKey = () => {
+    setIsConfirmGenerateKeyModalOpen(false)
+    // Simulate API key generation
+    const newKey = 'sk_live_' + Math.random().toString(36).substring(2, 15)
+    setApiKey(newKey)
+    setIsGenerateKeyModalOpen(true)
+  }
+  const { toast } = useToast()
+
+  const handleCopyKey = () => {
+    navigator.clipboard.writeText(apiKey)
+    toast({
+      title: 'API key copied to clipboard',
+    })
+  }
+
+  const copyApiKey = () => {
+    navigator.clipboard.writeText(apiKey)
+    toast({
+      title: 'API key copied to clipboard',
+    })
+  }
+
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <CardTitle>Get Started</CardTitle>
+        </CardHeader>
+        <CardContent className='space-y-4'>
+          <p className='text-muted-foreground'>
+            To start using TextBee, you need to generate an API key and connect
+            your device.
+          </p>
+          <GenerateApiKey/>
+        </CardContent>
+      </Card>
+
+     
+    </>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/main-dashboard.tsx b/web/app/(app)/dashboard/(components)/main-dashboard.tsx
new file mode 100644
index 0000000..d7c4246
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/main-dashboard.tsx
@@ -0,0 +1,75 @@
+'use client'
+
+import { useRouter, usePathname } from 'next/navigation'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+// import Overview from "@/components/overview";
+// import DeviceList from "@/components/device-list";
+// import ApiKeys from "@/components/api-keys";
+// import MessagingPanel from "@/components/messaging-panel";
+import { Webhook, MessageSquare } from 'lucide-react'
+import { useState } from 'react'
+import Overview from './overview'
+import DeviceList from './device-list'
+import ApiKeys from './api-keys'
+import Messaging from './messaging'
+
+export default function DashboardOverview() {
+  const router = useRouter()
+  const pathname = usePathname()
+
+  const [currentTab, setCurrentTab] = useState('overview')
+
+  const handleTabChange = (value: string) => {
+    setCurrentTab(value)
+  }
+
+  return (
+    <Tabs
+      value={currentTab}
+      onValueChange={handleTabChange}
+      className='space-y-4'
+    >
+      <TabsList className='sticky top-[3.5rem] z-10 flex mx-auto max-w-md'>
+        <TabsTrigger value='overview' className='flex-1'>
+          Overview
+        </TabsTrigger>
+        <TabsTrigger value='messaging' className='relative flex-1'>
+          <MessageSquare className='ml-2 h-4 w-4' />
+          <span className='mx-2'>Messaging</span>
+          <span className='absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground ml-8'>
+            3
+          </span>
+        </TabsTrigger>
+      </TabsList>
+
+      <TabsContent value='overview' className='space-y-4'>
+        <Overview />
+
+        <div className='grid gap-4 md:grid-cols-2'>
+          <DeviceList />
+          <ApiKeys />
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Webhooks (Coming Soon)</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Alert>
+              <AlertDescription>
+                Webhook support is coming soon! You&apos;ll be able to configure
+                endpoints to receive SMS notifications in real-time.
+              </AlertDescription>
+            </Alert>
+          </CardContent>
+        </Card>
+      </TabsContent>
+
+      <TabsContent value='messaging'>
+        <Messaging />
+      </TabsContent>
+    </Tabs>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/messaging.tsx b/web/app/(app)/dashboard/(components)/messaging.tsx
new file mode 100644
index 0000000..40a69ae
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/messaging.tsx
@@ -0,0 +1,64 @@
+'use client'
+
+import { useState } from 'react'
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import SendSms from './send-sms'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import ReceivedSms from './received-sms'
+
+export default function Messaging() {
+  const [currentTab, setCurrentTab] = useState('send')
+
+  const handleTabChange = (value: string) => {
+    setCurrentTab(value)
+  }
+
+  return (
+    <div className='grid gap-6 max-w-sm md:max-w-xl mx-auto mt-10'>
+      <Tabs
+        value={currentTab}
+        onValueChange={handleTabChange}
+        className='space-y-4'
+      >
+        <TabsList className='flex'>
+          <TabsTrigger value='send' className='flex-1'>
+            Send
+          </TabsTrigger>
+          <TabsTrigger value='bulk-send' className='flex-1'>
+            Bulk Send
+          </TabsTrigger>
+          <TabsTrigger value='received' className='flex-1'>
+            Received
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value='send' className='space-y-4'>
+          <SendSms />
+        </TabsContent>
+
+        <TabsContent value='bulk-send' className='space-y-4'>
+          {/* comming soon section */}
+          <div className='grid gap-6 max-w-xl mx-auto mt-10'>
+            <Card>
+              <CardHeader>
+                <CardTitle>Bulk Send</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className='flex items-center gap-2'>
+                  <div className='flex items-center gap-2'>
+                    <p>Coming soon...</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+
+        <TabsContent value='received' className='space-y-4'>
+          <ReceivedSms />
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/overview.tsx b/web/app/(app)/dashboard/(components)/overview.tsx
new file mode 100644
index 0000000..ac42166
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/overview.tsx
@@ -0,0 +1,66 @@
+'use client'
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { BarChart3, Smartphone, Key, MessageSquare } from 'lucide-react'
+import GetStartedCard from './get-started'
+import { ApiEndpoints } from '@/config/api'
+import httpBrowserClient from '@/lib/httpBrowserClient'
+import { useQuery } from '@tanstack/react-query'
+// import GetStartedCard from "@/components/get-started-card";
+
+export const StatCard = ({ title, value, icon: Icon, description }) => {
+  return (
+    <Card>
+      <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+        <CardTitle className='text-sm font-medium'>{title}</CardTitle>
+        <Icon className='h-4 w-4 text-muted-foreground' />
+      </CardHeader>
+      <CardContent>
+        <div className='text-2xl font-bold'>{value}</div>
+        <p className='text-xs text-muted-foreground'>{description}</p>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default function Overview() {
+  const { data: stats } = useQuery({
+    queryKey: ['stats'],
+    queryFn: () =>
+      httpBrowserClient
+        .get(ApiEndpoints.gateway.getStats())
+        .then((res) => res.data?.data),
+  })
+
+  return (
+    <div className='space-y-4'>
+      <GetStartedCard />
+      <div className='grid gap-4 grid-cols-2 lg:grid-cols-4'>
+        <StatCard
+          title='Total SMS Sent'
+          value={stats?.totalSentSMSCount?.toLocaleString()}
+          icon={MessageSquare}
+          description='Since last year'
+        />
+        <StatCard
+          title='Active Devices'
+          value={stats?.totalDeviceCount}
+          icon={Smartphone}
+          description='Connected now'
+        />
+        <StatCard
+          title='API Keys'
+          value={stats?.totalApiKeyCount}
+          icon={Key}
+          description='Active keys'
+        />
+        <StatCard
+          title='SMS Received'
+          value={stats?.totalReceivedSMSCount?.toLocaleString()}
+          icon={BarChart3}
+          description='Since last year'
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/received-sms.tsx b/web/app/(app)/dashboard/(components)/received-sms.tsx
new file mode 100644
index 0000000..681ddfc
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/received-sms.tsx
@@ -0,0 +1,146 @@
+import { Tabs, TabsList, TabsContent, TabsTrigger } from '@/components/ui/tabs'
+import { ApiEndpoints } from '@/config/api'
+import httpBrowserClient from '@/lib/httpBrowserClient'
+import { useQuery } from '@tanstack/react-query'
+import { Heart } from 'lucide-react'
+import React, { useEffect, useState } from 'react'
+import CommunityAlert from './community-alert'
+import { Card, CardContent } from '@/components/ui/card'
+import { Phone, Clock, MessageSquare } from 'lucide-react'
+import { Spinner } from '@/components/ui/spinner'
+
+export function ReceivedSmsCard({ sms }) {
+  const formattedDate = new Date(sms.receivedAt).toLocaleString('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  })
+
+  return (
+    <Card className='hover:bg-muted/50 transition-colors max-w-sm md:max-w-none'>
+      <CardContent className='p-4'>
+        <div className='space-y-3'>
+          <div className='flex justify-between items-start'>
+            <div className='flex items-center gap-2'>
+              <span className='font-medium'>{sms.sender}</span>
+            </div>
+            <div className='flex items-center gap-1 text-sm text-muted-foreground'>
+              <Clock className='h-3 w-3' />
+              <span>{formattedDate}</span>
+            </div>
+          </div>
+
+          <div className='flex gap-2'>
+            <p className='text-sm max-w-sm md:max-w-none'>{sms.message}</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default function ReceivedSms() {
+  const {
+    data: devices,
+    isLoading: isLoadingDevices,
+    error: devicesError,
+  } = useQuery({
+    queryKey: ['devices'],
+    queryFn: () =>
+      httpBrowserClient
+        .get(ApiEndpoints.gateway.listDevices())
+        .then((res) => res.data),
+  })
+
+  const handleTabChange = (tab: string) => {
+    setCurrentTab(tab)
+  }
+
+  const [currentTab, setCurrentTab] = useState('')
+
+  useEffect(() => {
+    if (devices?.data?.length) {
+      setCurrentTab(devices?.data?.[0]?._id)
+    }
+  }, [devices])
+
+  const {
+    data: receivedSms,
+    isLoading: isLoadingReceivedSms,
+    error: receivedSmsError,
+  } = useQuery({
+    queryKey: ['received-sms', currentTab],
+    enabled: !!currentTab,
+    queryFn: () =>
+      httpBrowserClient
+        .get(ApiEndpoints.gateway.getReceivedSMS(currentTab))
+        .then((res) => res.data),
+  })
+
+  if (isLoadingDevices)
+    return (
+      <div className='flex justify-center items-center h-full'>
+        <Spinner size='sm' />
+      </div>
+    )
+  if (devicesError)
+    return (
+      <div className='flex justify-center items-center h-full'>
+        Error: {devicesError.message}
+      </div>
+    )
+  if (!devices?.data?.length)
+    return (
+      <div className='flex justify-center items-center h-full'>
+        No devices found
+      </div>
+    )
+
+  return (
+    <div>
+      <Tabs
+        value={currentTab}
+        onValueChange={handleTabChange}
+        className='space-y-4'
+      >
+        <TabsList className='flex'>
+          {devices?.data?.map((device) => (
+            <TabsTrigger key={device._id} value={device._id} className='flex-1'>
+              {device.brand} {device.model}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {devices?.data?.map((device) => (
+          <TabsContent
+            key={device._id}
+            value={device._id}
+            className='space-y-4'
+          >
+            {isLoadingReceivedSms && (
+              <div className='flex justify-center items-center h-full'>
+                <Spinner size='sm' />
+              </div>
+            )}
+            {receivedSmsError && (
+              <div className='flex justify-center items-center h-full'>
+                Error: {receivedSmsError.message}
+              </div>
+            )}
+            {!isLoadingReceivedSms && !receivedSms?.data?.length && (
+              <div className='flex justify-center items-center h-full'>
+                No messages found
+              </div>
+            )}
+
+            {receivedSms?.data?.map((sms) => (
+              <ReceivedSmsCard key={sms._id} sms={sms} />
+            ))}
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/(components)/send-sms.tsx b/web/app/(app)/dashboard/(components)/send-sms.tsx
new file mode 100644
index 0000000..01d83ac
--- /dev/null
+++ b/web/app/(app)/dashboard/(components)/send-sms.tsx
@@ -0,0 +1,206 @@
+'use client'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { useForm, useFieldArray, Controller } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { sendSmsSchema } from '@/lib/schemas'
+import type { SendSmsFormData } from '@/lib/schemas'
+import { MessageSquare, Send, Plus, X, UserCircle, Check } from 'lucide-react'
+import { useToast } from '@/hooks/use-toast'
+import httpBrowserClient from '@/lib/httpBrowserClient'
+import { ApiEndpoints } from '@/config/api'
+import { useMutation, useQuery } from '@tanstack/react-query'
+import { Spinner } from '@/components/ui/spinner'
+
+export default function SendSms() {
+  const { data: devices, isLoading: isLoadingDevices } = useQuery({
+    queryKey: ['devices'],
+    queryFn: () =>
+      httpBrowserClient
+        .get(ApiEndpoints.gateway.listDevices())
+        .then((res) => res.data),
+  })
+
+  const {
+    mutate: sendSms,
+    isPending: isSendingSms,
+    error: sendSmsError,
+    isSuccess: isSendSmsSuccess,
+  } = useMutation({
+    mutationKey: ['send-sms'],
+    mutationFn: (data: SendSmsFormData) =>
+      httpBrowserClient.post(ApiEndpoints.gateway.sendSMS(data.deviceId), data),
+  })
+
+  const { toast } = useToast()
+  const {
+    register,
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<SendSmsFormData>({
+    resolver: zodResolver(sendSmsSchema),
+    defaultValues: {
+      recipients: [''],
+      message: '',
+    },
+  })
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    // @ts-expect-error
+    name: 'recipients',
+  })
+
+  return (
+    <div className='grid gap-6 max-w-xl mx-auto mt-10'>
+      <Card>
+        <CardHeader>
+          <div className='flex items-center gap-2'>
+            <MessageSquare className='h-5 w-5' />
+            <CardTitle>Send SMS</CardTitle>
+          </div>
+          <CardDescription>Send a message to any recipient(s)</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form
+            onSubmit={(e) => handleSubmit((data) => sendSms(data))(e)}
+            className='space-y-4'
+          >
+            <div className='space-y-4'>
+              <div>
+                <Controller
+                  name='deviceId'
+                  control={control}
+                  render={({ field }) => (
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <SelectTrigger>
+                        <SelectValue placeholder='Select a device' />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {devices?.data?.map((device) => (
+                          <SelectItem
+                            key={device._id}
+                            value={device._id}
+                            // disabled={!device.enabled}
+                          >
+                            {device.brand} {device.model}{' '}
+                            {device.enabled ? '' : '(disabled)'}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  )}
+                />
+                {errors.deviceId && (
+                  <p className='text-sm text-destructive mt-1'>
+                    {errors.deviceId.message}
+                  </p>
+                )}
+              </div>
+
+              <div className='space-y-2'>
+                {fields.map((field, index) => (
+                  <div key={field.id}>
+                    <div className='flex gap-2'>
+                      <Input
+                        type='tel'
+                        placeholder='Phone Number'
+                        {...register(`recipients.${index}`)}
+                      />
+                      <Button
+                        type='button'
+                        variant='ghost'
+                        size='icon'
+                        onClick={() => remove(index)}
+                        disabled={index === 0 && fields?.length === 1}
+                      >
+                        <X className='h-4 w-4' />
+                      </Button>
+                    </div>
+                    {errors.recipients?.[index] && (
+                      <p className='text-sm text-destructive'>
+                        {errors.recipients[index].message}
+                      </p>
+                    )}
+                  </div>
+                ))}
+                <Button
+                  type='button'
+                  variant='outline'
+                  size='sm'
+                  onClick={() => append('')}
+                  className='w-full'
+                >
+                  <Plus className='h-4 w-4 mr-2' />
+                  Add Recipient
+                </Button>
+
+                {errors.recipients && (
+                  <p className='text-sm text-destructive'>
+                    {errors.recipients.message}
+                  </p>
+                )}
+
+                {errors.recipients?.root && (
+                  <p className='text-sm text-destructive'>
+                    {errors.recipients.root.message}
+                  </p>
+                )}
+              </div>
+
+              <div>
+                <Textarea
+                  placeholder='Message'
+                  {...register('message')}
+                  rows={4}
+                />
+                {errors.message && (
+                  <p className='text-sm text-destructive mt-1'>
+                    {errors.message.message}
+                  </p>
+                )}
+              </div>
+            </div>
+            {sendSmsError && (
+              <div className='flex items-center gap-2 text-destructive'>
+                <p>Error sending SMS: {sendSmsError.message}</p>
+                <X className='h-5 w-5' />
+              </div>
+            )}
+
+            {isSendSmsSuccess && (
+              <div className='flex items-center gap-2'>
+                <p>SMS sent successfully!</p>
+                <Check className='h-5 w-5' />
+              </div>
+            )}
+
+            <Button type='submit' disabled={isSendingSms} className='w-full'>
+              {isSendingSms && (
+                <Spinner size='sm' className='mr-2' color='white' />
+              )}
+              {isSendingSms ? 'Sending...' : 'Send Message'}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/web/app/(app)/dashboard/layout.tsx b/web/app/(app)/dashboard/layout.tsx
new file mode 100644
index 0000000..c54e6af
--- /dev/null
+++ b/web/app/(app)/dashboard/layout.tsx
@@ -0,0 +1,9 @@
+import Dashboard from "./(components)/dashboard-layout";
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <Dashboard>{children}</Dashboard>;
+}
\ No newline at end of file
diff --git a/web/app/(app)/dashboard/page.tsx b/web/app/(app)/dashboard/page.tsx
new file mode 100644
index 0000000..7d156a8
--- /dev/null
+++ b/web/app/(app)/dashboard/page.tsx
@@ -0,0 +1,3 @@
+export default function DashboardPage() {
+  return <div>DashboardPage</div>
+}
diff --git a/web/app/(app)/layout-wrapper.tsx b/web/app/(app)/layout-wrapper.tsx
new file mode 100644
index 0000000..54e1c88
--- /dev/null
+++ b/web/app/(app)/layout-wrapper.tsx
@@ -0,0 +1,49 @@
+'use client'
+
+import { GoogleOAuthProvider } from '@react-oauth/google'
+import { SessionProvider } from 'next-auth/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import httpBrowserClient from '@/lib/httpBrowserClient'
+import { ApiEndpoints } from '@/config/api'
+import { useEffect } from 'react'
+import { usePathname, useRouter } from 'next/navigation'
+import { Routes } from '@/config/routes'
+
+export default function LayoutWrapper({ session, children }) {
+  const router = useRouter()
+  const pathname = usePathname()
+
+  // log the user out if token has expired
+  useEffect(() => {
+    if (session && session.user && !pathname.includes(Routes.logout)) {
+      httpBrowserClient
+        .get(ApiEndpoints.auth.whoAmI())
+        .then((response) => {
+          // token is still valid
+          // TODO: if name has changed, update session
+        })
+        .catch((error) => {
+          if (error.response?.status === 401) {
+            // token has expired
+            router.push(Routes.logout)
+          }
+        })
+    }
+  }, [pathname, router, session])
+
+  const queryClient = new QueryClient()
+
+  return (
+    <>
+      <SessionProvider session={session}>
+        <QueryClientProvider client={queryClient}>
+          <GoogleOAuthProvider
+            clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}
+          >
+            {children}
+          </GoogleOAuthProvider>
+        </QueryClientProvider>
+      </SessionProvider>
+    </>
+  )
+}
diff --git a/web/app/(app)/layout.tsx b/web/app/(app)/layout.tsx
new file mode 100644
index 0000000..d524680
--- /dev/null
+++ b/web/app/(app)/layout.tsx
@@ -0,0 +1,19 @@
+import { PropsWithChildren } from 'react'
+import '@/styles/main.css'
+import { authOptions } from '@/lib/auth'
+import { getServerSession, Session } from 'next-auth'
+import AppHeader from '@/components/shared/app-header'
+import LayoutWrapper from './layout-wrapper'
+
+export default async function RootLayout({ children }: PropsWithChildren) {
+  const session: Session | null = await getServerSession(authOptions as any)
+
+  return (
+    <>
+      <LayoutWrapper session={session}>
+        <AppHeader />
+        {children}
+      </LayoutWrapper>
+    </>
+  )
+}
diff --git a/web/app/(landing-page)/(components)/code-snippet-section.tsx b/web/app/(landing-page)/(components)/code-snippet-section.tsx
new file mode 100644
index 0000000..63540e4
--- /dev/null
+++ b/web/app/(landing-page)/(components)/code-snippet-section.tsx
@@ -0,0 +1,91 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../../components/ui/tabs'
+import SyntaxHighlighter from 'react-syntax-highlighter'
+
+const codeSnippets = [
+  {
+    tech: 'NodeJs',
+    language: 'javascript',
+    snippet: `import axios from 'axios'
+
+const BASE_URL = 'https://api.textbee.dev/api/v1'
+const API_KEY = 'YOUR_API_KEY'
+const DEVICE_ID = 'YOUR_DEVICE_ID'
+
+const response = await axios.post(\`\$\{BASE_URL\}/gateway/devices/\$\{DEVICE_ID}/sendSMS\`, {
+  recipients: [ '+1234567890' ],
+  message: 'Hello World!',
+}, {
+  headers: {
+    'x-api-key': API_KEY,
+  },
+})
+
+console.log(response.data)`,
+  },
+  {
+    tech: 'Python',
+    language: 'python',
+    snippet: `import requests
+
+BASE_URL = 'https://api.textbee.dev/api/v1'
+API_KEY = 'YOUR_API_KEY'
+DEVICE_ID = 'YOUR_DEVICE_ID'
+
+response = requests.post(
+f'{BASE_URL}/api/device/{DEVICE_ID}/sendSMS',
+json={
+    'recipients': ['+1234567890'],
+    'message': 'Hello World!'
+},
+headers={'x-api-key': API_KEY})
+
+print(response.json())`,
+  },
+  {
+    tech: 'cURL',
+    language: 'bash',
+    snippet: `curl -X POST "https://api.textbee.dev/api/v1/gateway/devices/YOUR_DEVICE_ID/sendSMS" \\
+  -H 'x-api-key: YOUR_API_KEY' \\
+  -H 'Content-Type: application/json' \\
+  -d '{
+    "recipients": [ "+1234567890" ],
+    "message": "Hello from textbee.dev"
+  }'`,
+  },
+]
+
+export default function CodeSnippetSection() {
+  return (
+    <section className='container mx-auto py-24 px-4 sm:px-6 lg:px-8 max-w-7xl bg-gray-50'>
+      <div className='mx-auto max-w-[58rem]'>
+        <h3 className='text-3xl font-bold mb-8'>Code Snippet</h3>
+        <div className='bg-white p-6 rounded-xl shadow-sm'>
+          <Tabs defaultValue={codeSnippets[0].tech} className='w-full'>
+            <TabsList className='grid w-full grid-cols-3'>
+              {codeSnippets.map((snippet) => {
+                return (
+                  <TabsTrigger key={snippet.tech} value={snippet.tech}>
+                    {snippet.tech}
+                  </TabsTrigger>
+                )
+              })}
+            </TabsList>
+            {codeSnippets.map((snippet) => {
+              return (
+                <TabsContent key={snippet.tech} value={snippet.tech}>
+                  <SyntaxHighlighter
+                    language={snippet.language}
+                    showLineNumbers={snippet.language !== 'bash'}
+                    // className='min-h-[200px]'
+                  >
+                    {snippet.snippet}
+                  </SyntaxHighlighter>
+                </TabsContent>
+              )
+            })}
+          </Tabs>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/web/app/(landing-page)/(components)/customization-section.tsx b/web/app/(landing-page)/(components)/customization-section.tsx
new file mode 100644
index 0000000..307e105
--- /dev/null
+++ b/web/app/(landing-page)/(components)/customization-section.tsx
@@ -0,0 +1,35 @@
+import { ArrowRight } from 'lucide-react'
+import { Button } from '../../../components/ui/button'
+import Link from 'next/link'
+
+export default function CustomizationSection() {
+  return (
+    <section className='py-24 bg-gradient-to-b from-blue-50 to-white'>
+      <div className='container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl'>
+        <div className='mx-auto max-w-3xl text-center mb-12'>
+          <h2 className='text-4xl font-bold mb-4 text-blue-600'>
+            Request Custom Solutions
+          </h2>
+          <p className='text-xl text-gray-600 mb-8'>
+            Let&apos;s explore how we can customize TextBee to align perfectly
+            with your business requirements. Whether you&apos;re looking for new
+            features or need assistance in deploying the platform on your own
+            server, or need dedicated support we&apos;re here to help.
+          </p>
+          <Link
+            href={`mailto:contact@textbee.dev?subject=Customization Request&body=I am interested in discussing paid solutions for TextBee.`}
+          >
+            <Button
+              size='lg'
+              className='bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-8 rounded-full shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105'
+              // onClick={() => setCustomizationOpen(true)}
+            >
+              Discuss Custom Solutions
+              <ArrowRight className='ml-2 h-5 w-5' />
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/web/app/(landing-page)/(components)/download-app-section.tsx b/web/app/(landing-page)/(components)/download-app-section.tsx
new file mode 100644
index 0000000..157862e
--- /dev/null
+++ b/web/app/(landing-page)/(components)/download-app-section.tsx
@@ -0,0 +1,36 @@
+import Image from 'next/image'
+import { Button } from '../../../components/ui/button'
+import Link from 'next/link'
+import { Routes } from '@/config/routes'
+
+export default function DownloadAppSection() {
+  return (
+    <section className='container mx-auto py-24 px-4 sm:px-6 lg:px-8 max-w-7xl'>
+      <div className='mx-auto max-w-[58rem] text-center'>
+        <div className='rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 p-8'>
+          <div className='mx-auto max-w-sm'>
+            <Image
+              alt='App preview'
+              className='mx-auto mb-8 rounded-xl shadow-lg'
+              height='400'
+              src='/images/smsgatewayandroid.png'
+              width='200'
+            />
+            <h3 className='text-xl font-bold mb-2'>
+              Download the App to get started!
+            </h3>
+            <p className='text-gray-500 mb-4'>
+              Unlock the power of messaging with our open-source Android SMS
+              Gateway.
+            </p>
+            <Link href={Routes.downloadAndroidApp} prefetch={false}>
+              <Button className='bg-blue-500 hover:bg-blue-600'>
+                Download App
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/web/app/(landing-page)/(components)/features-section.tsx b/web/app/(landing-page)/(components)/features-section.tsx
new file mode 100644
index 0000000..b0353e5
--- /dev/null
+++ b/web/app/(landing-page)/(components)/features-section.tsx
@@ -0,0 +1,48 @@
+import { Card } from '@/components/ui/card'
+import { Code, Send, Zap, Users } from 'lucide-react'
+
+
+export default function FeaturesSection() {
+  return (
+    <section className='container mx-auto py-24 px-4 sm:px-6 lg:px-8 max-w-7xl'>
+      <div className='mx-auto flex max-w-[58rem] flex-col items-center justify-center gap-4 text-center'>
+        <h2 className='text-3xl font-bold'>Features</h2>
+        <p className='max-w-[85%] text-gray-500'>
+          The ultimate solution for your messaging needs! Our free open-source
+          Android-based SMS Gateway provides you with all the features you need
+          to effectively manage your SMS communications.
+        </p>
+      </div>
+      <div className='mx-auto grid justify-center gap-6 sm:grid-cols-2 md:max-w-[64rem] md:grid-cols-4 mt-12'>
+        <Card className='flex flex-col items-center justify-center p-6 text-center'>
+          <Send className='h-12 w-12 mb-4 text-blue-500' />
+          <h3 className='font-bold'>Send SMS</h3>
+          <p className='text-sm text-gray-500'>
+            Send SMS to any number from your dashboard or via REST API
+          </p>
+        </Card>
+        <Card className='flex flex-col items-center justify-center p-6 text-center'>
+          <Users className='h-12 w-12 mb-4 text-blue-500' />
+          <h3 className='font-bold'>Bulk SMS</h3>
+          <p className='text-sm text-gray-500'>
+            Send SMS to multiple numbers at once
+          </p>
+        </Card>
+        <Card className='flex flex-col items-center justify-center p-6 text-center'>
+          <Zap className='h-12 w-12 mb-4 text-blue-500' />
+          <h3 className='font-bold'>100% Free</h3>
+          <p className='text-sm text-gray-500'>
+            No credit card required. No hidden fees. No strings attached.
+          </p>
+        </Card>
+        <Card className='flex flex-col items-center justify-center p-6 text-center'>
+          <Code className='h-12 w-12 mb-4 text-blue-500' />
+          <h3 className='font-bold'>Open Source</h3>
+          <p className='text-sm text-gray-500'>
+            The entire codebase is open source and available on GitHub.
+          </p>
+        </Card>
+      </div>
+    </section>
+  )
+}
diff --git a/web/app/(landing-page)/(components)/hero-section.tsx b/web/app/(landing-page)/(components)/hero-section.tsx
new file mode 100644
index 0000000..1d59f3b
--- /dev/null
+++ b/web/app/(landing-page)/(components)/hero-section.tsx
@@ -0,0 +1,75 @@
+import { Button } from '@/components/ui/button'
+import { Routes } from '@/config/routes'
+import { Smartphone, Code, Zap } from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+
+export default function HeroSection() {
+  return (
+    <section className='relative overflow-hidden bg-gradient-to-b from-blue-50 to-white py-16 sm:py-24'>
+      <div className='absolute inset-0 bg-[url(/grid.svg)] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]'></div>
+      <div className='container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl relative'>
+        <div className='grid gap-8 lg:grid-cols-2 lg:gap-16'>
+          <div className='flex flex-col justify-center space-y-8'>
+            <div className='space-y-4'>
+              <h1 className='text-4xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none'>
+                Transform Your Android into a
+                <span className='text-blue-500 block'>
+                  {' '}
+                  Powerful SMS Gateway
+                </span>
+              </h1>
+              <p className='max-w-[600px] text-gray-500 md:text-xl'>
+                Unlock the potential of your device with our open-source
+                solution. Send SMS effortlessly through your applications.
+              </p>
+            </div>
+            <div className='flex flex-cdol gap-4 flex-row'>
+              <Link href={Routes.register} prefetch={false}>
+                <Button className='bg-blue-500 hover:bg-blue-600' size='lg'>
+                  Get Started
+                </Button>
+              </Link>
+              <Link href='#how-it-works' prefetch={false}>
+                <Button variant='outline' size='lg'>
+                  How It Works
+                </Button>
+              </Link>
+            </div>
+            <div className='flex items-center space-x-4 text-sm'>
+              <div className='flex items-center'>
+                <Smartphone className='mr-2 h-4 w-4 text-blue-500' />
+                Android Compatible
+              </div>
+              <div className='flex items-center'>
+                <Code className='mr-2 h-4 w-4 text-blue-500' />
+                Open Source
+              </div>
+              <div className='flex items-center'>
+                <Zap className='mr-2 h-4 w-4 text-blue-500' />
+                Easy Setup
+              </div>
+            </div>
+          </div>
+          <div className='relative mx-auto w-full max-w-lg lg:max-w-none'>
+            <div className='absolute -top-4 -right-4 h-72 w-72 bg-blue-100 rounded-full blur-3xl'></div>
+            <div className='absolute -bottom-4 -left-4 h-72 w-72 bg-blue-100 rounded-full blur-3xl'></div>
+            <div className='relative'>
+              <Image
+                alt='TextBee App'
+                className='relative mx-auto w-full max-w-lg rounded-2xl shadow-xl'
+                height='600'
+                src='/images/smsgatewayandroid.png'
+                style={{
+                  objectFit: 'contain',
+                }}
+                width='500'
+              />
+              <div className='absolute inset-0 rounded-2xl bg-gradient-to-tr from-blue-400 to-blue-300 opacity-20'></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/web/app/(landing-page)/(components)/how-it-works-section.tsx b/web/app/(landing-page)/(components)/how-it-works-section.tsx
new file mode 100644
index 0000000..c41f104
--- /dev/null
+++ b/web/app/(landing-page)/(components)/how-it-works-section.tsx
@@ -0,0 +1,57 @@
+import { Routes } from '@/config/routes'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '../../../components/ui/accordion'
+
+export default function HowItWorksSection() {
+  return (
+    <section
+      id='how-it-works'
+      className='container mx-auto py-24 px-4 sm:px-6 lg:px-8 max-w-7xl bg-gray-50'
+    >
+      <div className='mx-auto max-w-[58rem]'>
+        <h2 className='text-3xl font-bold text-center mb-8'>How It Works</h2>
+        <p className='text-center mb-12 text-gray-500'>
+          How it works is simple. You install the app on your Android device,
+          and it will turn your device into a SMS Gateway. You can then use the
+          API to send SMS messages from your web applications.
+        </p>
+        <Accordion type='single' collapsible className='w-full'>
+          <AccordionItem value='step-1'>
+            <AccordionTrigger>
+              Step 1: Download The Android App
+            </AccordionTrigger>
+            <AccordionContent>
+              Download the Android App from{' '}
+              <a href={Routes.downloadAndroidApp} target='_blank'>
+                {Routes.downloadAndroidApp}
+              </a>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value='step-2'>
+            <AccordionTrigger>Step 2: Generate an API key</AccordionTrigger>
+            <AccordionContent>
+              Generate an API key from the dashboard
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value='step-3'>
+            <AccordionTrigger>Step 3: Scan the QR code</AccordionTrigger>
+            <AccordionContent>
+              Open the textbee mobile app and scan the QR code or enter your api
+              key manually and enable the gateway app
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value='step-4'>
+            <AccordionTrigger>Step 4: Start sending</AccordionTrigger>
+            <AccordionContent>
+              Start sending SMS messages from the dashboard or using the API
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </section>
+  )
+}
diff --git a/web/app/(landing-page)/(components)/landing-page-header.tsx b/web/app/(landing-page)/(components)/landing-page-header.tsx
new file mode 100644
index 0000000..dd0eb4f
--- /dev/null
+++ b/web/app/(landing-page)/(components)/landing-page-header.tsx
@@ -0,0 +1,50 @@
+import Link from 'next/link'
+import { MessageSquarePlus, Moon } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { ExternalLinks } from '@/config/external-links'
+import { Routes } from '@/config/routes'
+
+export default function LandingPageHeader() {
+  return (
+    <header className='sticky top-0 z-50 w-full border-b bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/60'>
+      <div className='container flex h-14 items-center justify-between px-2'>
+        <Link
+          className='flex items-center space-x-2'
+          href={Routes.landingPage}
+        >
+          <MessageSquarePlus className='h-6 w-6 text-blue-500' />
+          <span className='font-bold'>
+            Text<span className='text-blue-500'>Bee</span>
+          </span>
+        </Link>
+        <nav className='flex items-center space-x-4'>
+          {/* <Button variant='ghost' size='icon'>
+            <Moon className='h-4 w-4' />
+            <span className='sr-only'>Toggle theme</span>
+          </Button> */}
+          <Link
+            className='text-sm font-medium hover:text-blue-500'
+            href={ExternalLinks.github}
+          >
+            Github
+          </Link>
+
+          <Link
+            className='text-sm font-medium hover:text-blue-500'
+            href={Routes.dashboard}
+          >
+            <Button className='bg-blue-500 hover:bg-blue-600 rounded-full'>
+              Go to Dashboard
+            </Button>
+          </Link>
+          {/* <Link
+            className='text-sm font-medium hover:text-blue-500'
+            href='/register'
+          >
+            Register
+          </Link> */}
+        </nav>
+      </div>
+    </header>
+  )
+}
diff --git a/web/app/(landing-page)/(components)/support-project-section.tsx b/web/app/(landing-page)/(components)/support-project-section.tsx
new file mode 100644
index 0000000..7aba89b
--- /dev/null
+++ b/web/app/(landing-page)/(components)/support-project-section.tsx
@@ -0,0 +1,114 @@
+'use client'
+
+import { toast } from '@/hooks/use-toast'
+import { Button } from '../../../components/ui/button'
+import { Heart, Coins, Check, Copy } from 'lucide-react'
+import { useState } from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '../../../components/ui/dialog'
+import Link from 'next/link'
+import { ExternalLinks } from '@/config/external-links'
+
+export default function SupportProjectSection() {
+  const [cryptoOpen, setCryptoOpen] = useState(false)
+  const [copiedAddress, setCopiedAddress] = useState('')
+
+  const cryptoWallets = [
+    {
+      name: 'Bitcoin (BTC)',
+      address: '1Ag3nQKGDdmcqSZicRRKnGGKwfgSkhhA5M',
+      network: 'Bitcoin',
+    },
+    {
+      name: 'Ethereum (ETH)',
+      address: '0x61368be0052ee9245287ee88f7f1fceb5343e207',
+      network: 'Ethereum (ERC20)',
+    },
+    {
+      name: 'Tether (USDT)',
+      address: '0x61368be0052ee9245287ee88f7f1fceb5343e207',
+      network: 'Ethereum (ERC20)',
+    },
+    {
+      name: 'Tether (USDT)',
+      address: 'TD6txzY61D6EgnVfMLPsqKhYfyV5iHrbkw',
+      network: 'Tron (TRC20)',
+    },
+  ]
+
+  const copyToClipboard = (address: string) => {
+    navigator.clipboard.writeText(address)
+    setCopiedAddress(address)
+    toast({
+      title: 'Address copied!',
+      description: 'The wallet address has been copied to your clipboard.',
+    })
+    setTimeout(() => setCopiedAddress(''), 3000)
+  }
+
+  return (
+    <>
+      <section className='container mx-auto py-24 px-4 sm:px-6 lg:px-8 max-w-7xl bg-gray-50'>
+        <div className='mx-auto max-w-[58rem] text-center'>
+          <h2 className='text-3xl font-bold mb-4'>Support The Project</h2>
+          <p className='text-gray-500 mb-8'>
+            Maintaining an open-source project requires time and dedication. By
+            becoming a patron or donating cryptocurrency, your contribution will
+            directly support the development, including implementation of new
+            features, enhance performance, and ensure the highest level of
+            security and reliability.
+          </p>
+          <div className='flex flex-col sm:flex-row justify-center gap-4'>
+            <Link href={ExternalLinks.patreon} prefetch={false} target='_blank'>
+              <Button className='bg-blue-500 hover:bg-blue-600'>
+                <Heart className='mr-2 h-4 w-4' /> Become a Patron
+              </Button>
+            </Link>
+            <Button variant='outline' onClick={() => setCryptoOpen(true)}>
+              <Coins className='mr-2 h-4 w-4' /> Donate Crypto
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      <Dialog open={cryptoOpen} onOpenChange={setCryptoOpen}>
+        <DialogContent className='sm:max-w-[500px]'>
+          <DialogHeader>
+            <DialogTitle>Donate Cryptocurrency</DialogTitle>
+          </DialogHeader>
+          <div className='grid gap-4 py-4'>
+            {cryptoWallets.map((wallet, index) => (
+              <div
+                key={index}
+                className='flex items-center justify-between p-4 rounded-lg bg-gray-100'
+              >
+                <div>
+                  <h4 className='font-semibold'>{wallet.name}</h4>
+                  <p className='text-sm text-gray-500'>{wallet.network}</p>
+                  <p className='text-xs text-gray-400 mt-1 break-all'>
+                    {wallet.address}
+                  </p>
+                </div>
+                <Button
+                  variant='outline'
+                  size='icon'
+                  onClick={() => copyToClipboard(wallet.address)}
+                >
+                  {copiedAddress === wallet.address ? (
+                    <Check className='h-4 w-4' />
+                  ) : (
+                    <Copy className='h-4 w-4' />
+                  )}
+                </Button>
+              </div>
+            ))}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/web/app/(landing-page)/layout.tsx b/web/app/(landing-page)/layout.tsx
new file mode 100644
index 0000000..5518605
--- /dev/null
+++ b/web/app/(landing-page)/layout.tsx
@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react'
+import LandingPageHeader from './(components)/landing-page-header'
+
+export default async function RootLayout({ children }: PropsWithChildren) {
+  return (
+    <>
+      <LandingPageHeader />
+      {children}
+    </>
+  )
+}
diff --git a/web/app/(landing-page)/page.tsx b/web/app/(landing-page)/page.tsx
new file mode 100644
index 0000000..3008806
--- /dev/null
+++ b/web/app/(landing-page)/page.tsx
@@ -0,0 +1,23 @@
+import DownloadAppSection from '@/app/(landing-page)/(components)/download-app-section'
+import FeaturesSection from '@/app/(landing-page)/(components)/features-section'
+import HeroSection from '@/app/(landing-page)/(components)/hero-section'
+import HowItWorksSection from '@/app/(landing-page)/(components)/how-it-works-section'
+import CustomizationSection from '@/app/(landing-page)/(components)/customization-section'
+import SupportProjectSection from '@/app/(landing-page)/(components)/support-project-section'
+import CodeSnippetSection from '@/app/(landing-page)/(components)/code-snippet-section'
+
+export default function LandingPage() {
+  return (
+    <div className='flex min-h-screen flex-col'>
+      <main className='flex-1'>
+        <HeroSection />
+        <FeaturesSection />
+        <HowItWorksSection />
+        <DownloadAppSection />
+        <CustomizationSection />
+        <CodeSnippetSection />
+        <SupportProjectSection />
+      </main>
+    </div>
+  )
+}
diff --git a/web/app/(landing-page)/privacy-policy/page.tsx b/web/app/(landing-page)/privacy-policy/page.tsx
new file mode 100644
index 0000000..2ed06e0
--- /dev/null
+++ b/web/app/(landing-page)/privacy-policy/page.tsx
@@ -0,0 +1,82 @@
+import { Metadata } from 'next'
+import { Card, CardContent } from '@/components/ui/card'
+import LandingPageHeader from '../(components)/landing-page-header'
+
+export const metadata: Metadata = {
+  title: 'Privacy Policy | TextBee',
+  description: 'Privacy Policy for TextBee SMS Gateway Platform',
+}
+
+export default function PrivacyPolicyPage() {
+  return (
+    <>
+      <LandingPageHeader />
+      <div className='container max-w-7xl py-6 md:px-12'>
+        <Card className='border-none shadow-none'>
+          <CardContent className='space-y-6'>
+            <h1 className='scroll-m-20 text-4xl font-bold tracking-tight lg:text-5xl'>
+              Privacy Policy
+            </h1>
+
+            <h2 className='scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight'>
+              Effective Date: May 2022
+            </h2>
+
+            <p className='leading-7 [&:not(:first-child)]:mt-6'>
+              Thank you for using our TextBee SMS Gateway Platform
+              (&ldquo;Platform&rdquo;). This Privacy Policy is intended to
+              inform you about how we collect, use, and disclose information
+              when you use our Platform. We are committed to protecting your
+              privacy and ensuring the security of your personal information. By
+              using our Platform, you consent to the practices described in this
+              Privacy Policy.
+            </p>
+
+            <div className='space-y-4'>
+              <h2 className='scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight'>
+                1. Information We Collect
+              </h2>
+              <h3 className='scroll-m-20 text-2xl font-semibold tracking-tight'>
+                1.1 Personal Information:
+              </h3>
+              <p className='leading-7'>
+                We may collect the following types of personal information from
+                you when you use our Platform:
+              </p>
+              <ul className='my-6 ml-6 list-disc [&>li]:mt-2'>
+                <li>Your name</li>
+                <li>
+                  Contact information (such as email address and phone number)
+                </li>
+                <li>
+                  Device information (such as device ID, model, and operating
+                  system)
+                </li>
+                <li>SMS content and metadata</li>
+              </ul>
+            </div>
+
+            {/* ... Continue with other sections ... */}
+
+            <div className='space-y-4'>
+              <h2 className='scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight'>
+                8. Contact Us
+              </h2>
+              <p className='leading-7'>
+                If you have any questions or concerns about this Privacy Policy
+                or our data practices, please contact us at{' '}
+                <a
+                  href='mailto:contact@textbee.dev'
+                  className='font-medium text-primary underline underline-offset-4 hover:text-primary/80'
+                >
+                  contact@textbee.dev
+                </a>
+                .
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </>
+  )
+}
diff --git a/web/app/(todo-migrate-pages-to-app-router)/v2/page.tsx b/web/app/(todo-migrate-pages-to-app-router)/v2/page.tsx
deleted file mode 100644
index 5b94244..0000000
--- a/web/app/(todo-migrate-pages-to-app-router)/v2/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-export default function page() {
-  return (
-    <div>
-      v2
-    </div>
-  )
-}
diff --git a/web/app/api/auth/[...nextauth]/route.ts b/web/app/api/auth/[...nextauth]/route.ts
new file mode 100644
index 0000000..55b7822
--- /dev/null
+++ b/web/app/api/auth/[...nextauth]/route.ts
@@ -0,0 +1,6 @@
+import { authOptions } from '@/lib/auth'
+import NextAuth, { AuthOptions } from 'next-auth'
+
+const handler = NextAuth(authOptions as AuthOptions)
+
+export { handler as GET, handler as POST }
diff --git a/web/app/api/customer-support/route.ts b/web/app/api/customer-support/route.ts
new file mode 100644
index 0000000..dc703eb
--- /dev/null
+++ b/web/app/api/customer-support/route.ts
@@ -0,0 +1,59 @@
+import {
+  NextRequest,
+  NextResponse,
+  userAgent,
+  userAgentFromString,
+} from 'next/server'
+
+import prismaClient from '@/lib/prismaClient'
+import { sendMail } from '@/lib/mail'
+
+export async function POST(req: NextRequest) {
+  const ip = req.ip || req.headers.get('x-forwarded-for')
+  const { browser, device, os, isBot, ua } = userAgent(req)
+  //   const userAgentString = userAgentFromString(ua)
+
+  const body = await req.json()
+
+  try {
+    const result = await prismaClient.supportMessage.create({
+      data: {
+        ...body,
+        ip,
+        userAgent: ua,
+      },
+    })
+
+    // send email to user
+    await sendMail({
+      to: body.email,
+      cc: process.env.ADMIN_EMAIL,
+      subject: `Support request submitted: ${body.category}-${result.id}`,
+      html: `<pre>
+      <h1>Support request submitted</h1>
+      <p>Thank you for contacting us. We will get back to you soon.</p>
+      <p>Here is a copy of your message:</p>
+      <hr/>
+      <h2>Category</h2><br/>${body.category}
+      <h2>Message</h2><br/>${body.message}
+
+      <h2>Contact Information</h2>
+      <p>Name: ${body.name}</p>
+      <p>Email: ${body.email}</p>
+      <p>Phone: ${body.phone || 'N/A'}</p>
+      </pre>`,
+    })
+
+    return NextResponse.json({
+      message: 'Support request submitted',
+    })
+  } catch (error) {
+    console.error(error)
+    return NextResponse.json(
+      {
+        message: `Support request failed to submit : ${error.message}`,
+      },
+      { status: 400 }
+    )
+  }
+}
diff --git a/web/app/api/request-account-deletion/route.ts b/web/app/api/request-account-deletion/route.ts
new file mode 100644
index 0000000..be4b250
--- /dev/null
+++ b/web/app/api/request-account-deletion/route.ts
@@ -0,0 +1,86 @@
+import {
+  NextRequest,
+  NextResponse,
+  userAgent,
+  userAgentFromString,
+} from 'next/server'
+
+import prismaClient from '@/lib/prismaClient'
+import { sendMail } from '@/lib/mail'
+import { getServerSession, User } from 'next-auth'
+import { authOptions } from '@/lib/auth'
+
+export async function POST(req: NextRequest) {
+  const ip = req.ip || req.headers.get('x-forwarded-for')
+  const { browser, device, os, isBot, ua } = userAgent(req)
+  //   const userAgentString = userAgentFromString(ua)
+
+  const body = await req.json()
+
+  const session = await getServerSession(authOptions as any)
+  if (!session) {
+    return NextResponse.json(
+      {
+        message: 'You must be logged in to request account deletion',
+      },
+      { status: 401 }
+    )
+  }
+  // @ts-ignore
+  const currentUser = session?.user as User
+
+  if (!currentUser) {
+    return NextResponse.json(
+      {
+        message: 'You must be logged in to request account deletion',
+      },
+      { status: 401 }
+    )
+  }
+
+  const category = 'account-deletion'
+  const message = body.message ?? 'No message provided'
+
+  try {
+    const result = await prismaClient.supportMessage.create({
+      data: {
+        user: currentUser.id,
+        category,
+        message,
+        ip,
+        userAgent: ua,
+      },
+    })
+
+    // send email to user
+    await sendMail({
+      to: currentUser.email,
+      cc: process.env.ADMIN_EMAIL,
+      subject: `Account deletion request submitted: ${category}-${result.id}`,
+      html: `<pre>
+      <h1>Account deletion request submitted</h1>
+      <p>Thank you for contacting us. We will get back to you soon.</p>
+      <p>Here is a copy of your message:</p>
+      <hr/>
+      <h2>Category</h2><br/>${category}
+      <h2>Message</h2><br/>${message}
+
+      <h2>Contact Information</h2>
+      <p>Name: ${currentUser.name}</p>
+      <p>Email: ${currentUser.email}</p>
+      </pre>`,
+    })
+
+    return NextResponse.json({
+      message: 'Support request submitted',
+    })
+  } catch (error) {
+    console.error(error)
+    return NextResponse.json(
+      {
+        message: `Support request failed to submit : ${error.message}`,
+      },
+      { status: 400 }
+    )
+  }
+}
diff --git a/web/app/customer-support/page.tsx b/web/app/customer-support/page.tsx
deleted file mode 100644
index 452fb07..0000000
--- a/web/app/customer-support/page.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import Link from 'next/link'
-import React from 'react'
-
-export default function CustomerSupportPage() {
-  return (
-    <div>
-      <div>
-        <Link
-          href='/'
-          style={{
-            margin: '5px',
-            padding: '5px',
-          }}
-        >{`<-- Go Back Home`}</Link>
-      </div>
-      <iframe
-        src='https://docs.google.com/forms/d/e/1FAIpQLScdlaaW28BdL-J0DrfKbz5TY5JvaGbbc6IVp95cptOQlq4ElQ/viewform?embedded=true'
-        width='100%'
-        height='1015'
-      >
-        Loading…
-      </iframe>
-    </div>
-  )
-}
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 6a38fe9..4e54d2d 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -1,11 +1,74 @@
 import { PropsWithChildren } from 'react'
 import '@/styles/main.css'
+import { Metadata } from 'next'
+import CustomerSupport from '@/components/shared/customer-support'
+import Footer from '@/components/shared/footer'
+import { Toaster } from '@/components/ui/toaster'
+import Analytics from '@/components/shared/analytics'
+import { Session } from 'next-auth'
+import { getServerSession } from 'next-auth'
+import { headers } from 'next/dist/client/components/headers'
+import { authOptions } from '@/lib/auth'
+
+export const metadata: Metadata = {
+  title: 'textbee.dev - Free and Open-Source SMS Gateway',
+  description:
+    'TextBee is an open-source solution that turns your Android device into a powerful SMS gateway. Send SMS effortlessly through your applications.',
+  authors: [
+    { name: 'Israel Abebe Kokiso', url: 'https://israelabebe.com' },
+    { name: 'vernu.dev', url: 'https://vernu.dev' },
+  ],
+  applicationName: 'textbee.dev',
+  keywords: [
+    'textbee',
+    'sms gateway',
+    'open-source',
+    'android',
+    'sms',
+    'gateway',
+    'oss',
+    'free',
+    'opensource',
+    'foss',
+    'freeware',
+    'react',
+    'nextjs',
+    'tailwindcss',
+    'shadcn',
+    'typescript',
+    'nodejs',
+    'express',
+    'next-auth',
+    'vercel',
+    'nestjs',
+  ],
+  creator: 'Israel Abebe Kokiso',
+  publisher: 'vernu.dev',
+  robots: 'index, follow',
+  alternates: {
+    canonical: 'https://textbee.dev',
+  },
+  openGraph: {
+    title: 'textbee.dev - Free and Open-Source SMS Gateway',
+    description:
+      'TextBee is an open-source solution that turns your Android device into a powerful SMS gateway. Send SMS effortlessly through your applications.',
+  },
+  icons: {
+    icon: '/favicon.ico',
+  },
+  metadataBase: new URL('https://textbee.dev'),
+}
 
 export default async function RootLayout({ children }: PropsWithChildren) {
+  const session: Session | null = await getServerSession(authOptions as any)
   return (
     <html lang='en'>
       <body>
         <main>{children}</main>
+        <Analytics user={session?.user} />
+        <Footer />
+        <Toaster />
+        <CustomerSupport />
       </body>
     </html>
   )
diff --git a/web/components/AnimatedScrollWrapper.tsx b/web/components/AnimatedScrollWrapper.tsx
deleted file mode 100644
index 44d40fe..0000000
--- a/web/components/AnimatedScrollWrapper.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { ReactNode } from 'react'
-import { motion } from 'framer-motion'
-
-interface AnimatedScrollWrapperProps {
-  children: ReactNode
-}
-const AnimatedScrollWrapper = ({ children }: AnimatedScrollWrapperProps) => {
-  return (
-    <motion.div
-      variants={{
-        hidden: { opacity: 0, y: 10 },
-        visible: {
-          opacity: 1,
-          y: 0,
-          transition: {
-            duration: 0.5,
-            ease: 'easeInOut',
-            // delay: 0.25,
-          },
-        },
-      }}
-      initial='hidden'
-      whileInView='visible'
-    >
-      {children}
-    </motion.div>
-  )
-}
-
-export default AnimatedScrollWrapper
diff --git a/web/components/Footer.tsx b/web/components/Footer.tsx
deleted file mode 100644
index f92a9df..0000000
--- a/web/components/Footer.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import {
-  Box,
-  chakra,
-  Container,
-  Stack,
-  Text,
-  useColorModeValue,
-} from '@chakra-ui/react'
-import dynamic from 'next/dynamic'
-import Link from 'next/link'
-
-export default function Footer() {
-  const NoSSRAnimatedWrapper = dynamic(
-    () => import('../components/AnimatedScrollWrapper'),
-    {
-      ssr: false,
-    }
-  )
-
-  return (
-    <Box
-      bg={useColorModeValue('gray.50', 'gray.900')}
-      color={useColorModeValue('gray.700', 'gray.200')}
-    >
-      <Container
-        as={Stack}
-        maxW={'6xl'}
-        py={4}
-        spacing={4}
-        justify={'center'}
-        align={'center'}
-      >
-        <Stack
-          direction={{
-            base: 'column',
-            sm: 'column',
-            md: 'row',
-          }}
-          spacing={6}
-        >
-          <Link href='/'>Home</Link>
-          <Link href='/dashboard'>Dashboard</Link>
-          <NoSSRAnimatedWrapper>
-            <a
-              href='https://www.patreon.com/bePatron?u=124342375'
-              data-patreon-widget-type='become-patron-button'
-            >
-              Become a Patron!
-            </a>
-            <script
-              async
-              src='https://c6.patreon.com/becomePatronButton.bundle.js'
-            ></script>
-          </NoSSRAnimatedWrapper>
-          <Link href='https://dl.textbee.dev' target='_blank'>
-            {' '}
-            Download App
-          </Link>
-          <Link href='https://github.com/vernu/textbee'>Github</Link>
-        </Stack>
-      </Container>
-
-      <Box
-        borderTopWidth={1}
-        borderStyle={'solid'}
-        borderColor={useColorModeValue('gray.200', 'gray.700')}
-      >
-        <Container
-          as={Stack}
-          maxW={'6xl'}
-          py={4}
-          direction={{ base: 'column', md: 'row' }}
-          spacing={4}
-          justify='center'
-          align={{ base: 'center', md: 'center' }}
-        >
-          <Text>© {new Date().getFullYear()} All rights reserved</Text>
-        </Container>
-      </Box>
-    </Box>
-  )
-}
diff --git a/web/components/Navbar.tsx b/web/components/Navbar.tsx
deleted file mode 100644
index b25812f..0000000
--- a/web/components/Navbar.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import {
-  Box,
-  Flex,
-  Avatar,
-  Button,
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuItem,
-  MenuDivider,
-  useColorModeValue,
-  Stack,
-  useColorMode,
-  SimpleGrid,
-} from '@chakra-ui/react'
-import Link from 'next/link'
-import { MoonIcon, SunIcon } from '@chakra-ui/icons'
-import Router from 'next/router'
-import { useDispatch, useSelector } from 'react-redux'
-import { logout, selectAuthUser } from '../store/authSlice'
-import Image from 'next/image'
-import { useEffect } from 'react'
-import { authService } from '../services/authService'
-
-export default function Navbar() {
-  const dispatch = useDispatch()
-  const { colorMode, toggleColorMode } = useColorMode()
-  const authUser = useSelector(selectAuthUser)
-
-  useEffect(() => {
-    const timout = setTimeout(async () => {
-      if (authUser) {
-        authService
-          .whoAmI()
-          .catch((e) => {
-            if (e.response?.status === 401) {
-              dispatch(logout())
-            }
-          })
-          .then((res) => {})
-      }
-    }, 5000)
-    return () => clearTimeout(timout)
-  }, [authUser, dispatch])
-
-  return (
-    <>
-      <Box
-        bg={useColorModeValue('gray.100', 'blue.600')}
-        px={4}
-        shadow='lg'
-        mb={1}
-      >
-        <Flex h={16} alignItems={'center'} justifyContent={'space-between'}>
-          <Link href='/' passHref>
-            <Flex alignItems={'center'}>
-              <Image
-                alt={'Hero Image'}
-                width={30}
-                height={30}
-                src={'/images/sms-gateway-logo.png'}
-                style={{ borderRadius: '50%' }}
-              />
-              <Box style={{ cursor: 'pointer', marginLeft: '5px' }}>
-                TextBee
-              </Box>
-            </Flex>
-          </Link>
-
-          <Stack alignItems='center' direction='row' spacing={5}>
-            <Button onClick={toggleColorMode} aria-label={'Toggle Color Mode'}>
-              {colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
-            </Button>
-
-            {/* <Menu>
-              <Link
-                href='https://www.patreon.com/bePatron?u=124342375'
-                passHref
-              >
-                <MenuButton>Support</MenuButton>
-              </Link>
-            </Menu> */}
-
-            <Menu>
-              <Link href='https://github.com/vernu/textbee' passHref>
-                <MenuButton>Github</MenuButton>
-              </Link>
-            </Menu>
-
-            {!authUser && (
-              <Menu>
-                <Link href='/login' passHref>
-                  <MenuButton>Login</MenuButton>
-                </Link>
-                <Link href='/register' passHref>
-                  <MenuButton>Register</MenuButton>
-                </Link>
-              </Menu>
-            )}
-
-            {authUser && (
-              <Menu>
-                <MenuButton
-                  as={Button}
-                  rounded={'full'}
-                  variant={'link'}
-                  cursor={'pointer'}
-                  minW={0}
-                >
-                  <Avatar
-                    size={'sm'}
-                    name={authUser.name}
-                    src={authUser?.avatar}
-                  />
-                </MenuButton>
-                <MenuList alignItems={'center'}>
-                  <MenuItem>
-                    <SimpleGrid columns={2} spacing={3}>
-                      <Avatar
-                        size={'sm'}
-                        name={authUser.name}
-                        src={authUser?.avatar}
-                      />
-                      {authUser?.name}
-                    </SimpleGrid>
-                  </MenuItem>
-
-                  <MenuDivider />
-                  <MenuItem
-                    onClick={() => {
-                      Router.push('/dashboard')
-                    }}
-                  >
-                    Dashboard
-                  </MenuItem>
-                  <MenuItem
-                    onClick={() => {
-                      dispatch(logout())
-                    }}
-                  >
-                    Logout
-                  </MenuItem>
-                </MenuList>
-              </Menu>
-            )}
-          </Stack>
-        </Flex>
-      </Box>
-    </>
-  )
-}
diff --git a/web/components/dashboard/APIKeyAndDevices.tsx b/web/components/dashboard/APIKeyAndDevices.tsx
deleted file mode 100644
index f89bf91..0000000
--- a/web/components/dashboard/APIKeyAndDevices.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Box, SimpleGrid } from '@chakra-ui/react'
-
-import React from 'react'
-import ErrorBoundary from '../ErrorBoundary'
-import ApiKeyList from './ApiKeyList'
-import DeviceList from './DeviceList'
-import GenerateApiKey from './GenerateApiKey'
-
-export default function APIKeyAndDevices() {
-  return (
-    <Box backdropBlur='2xl' borderWidth='0px' borderRadius='lg'>
-      <SimpleGrid columns={{ base: 1, md: 2 }} spacing={{ base: 5, lg: 8 }}>
-        <Box backdropBlur='2xl' borderWidth='0px' borderRadius='lg'>
-          <ErrorBoundary>
-            <Box maxW='xl' mx={'auto'} pt={5} px={{ base: 2, sm: 4, md: 17 }}>
-              <GenerateApiKey />
-              <DeviceList />
-            </Box>
-          </ErrorBoundary>
-        </Box>
-        <Box backdropBlur='2xl' borderWidth='0px' borderRadius='lg'>
-          <ErrorBoundary>
-            <ApiKeyList />
-          </ErrorBoundary>
-        </Box>
-      </SimpleGrid>
-    </Box>
-  )
-}
diff --git a/web/components/dashboard/ApiKeyList.tsx b/web/components/dashboard/ApiKeyList.tsx
deleted file mode 100644
index f5669f3..0000000
--- a/web/components/dashboard/ApiKeyList.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { DeleteIcon } from '@chakra-ui/icons'
-import {
-  Spinner,
-  Table,
-  TableContainer,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tooltip,
-  Tr,
-} from '@chakra-ui/react'
-import { useEffect } from 'react'
-import { useSelector } from 'react-redux'
-import {
-  deleteApiKey,
-  fetchApiKeys,
-  selectApiKeyList,
-  selectApiKeyLoading,
-} from '../../store/apiKeySlice'
-import { selectAuthUser } from '../../store/authSlice'
-import { useAppDispatch } from '../../store/hooks'
-
-const ApiKeyRow = ({ apiKey }: any) => {
-  const dispatch = useAppDispatch()
-
-  const handleDelete = async () => {
-    dispatch(deleteApiKey(apiKey._id))
-  }
-
-  return (
-    <Tr>
-      <Td>{apiKey.apiKey}</Td>
-      <Td>{apiKey.status}</Td>
-      <Td>
-        {/* <Tooltip label='Double Click to delete'>
-          <DeleteIcon
-            // onDoubleClick={handleDelete}
-          />
-        </Tooltip> */}
-      </Td>
-    </Tr>
-  )
-}
-
-const ApiKeyList = () => {
-  const dispatch = useAppDispatch()
-  const loading = useSelector(selectApiKeyLoading)
-  const apiKeyList = useSelector(selectApiKeyList)
-
-  const authUser = useSelector(selectAuthUser)
-  useEffect(() => {
-    if (authUser) {
-      dispatch(fetchApiKeys())
-    }
-  }, [dispatch, authUser])
-
-  return (
-    <TableContainer>
-      <Table variant='striped'>
-        <Thead>
-          <Tr>
-            <Th>Your API Keys</Th>
-            <Th>Status</Th>
-            <Th></Th>
-          </Tr>
-        </Thead>
-        <Tbody>
-          {loading && (
-            <Tr>
-              <Td colSpan={3} textAlign='center'>
-                <Spinner size='lg' />
-              </Td>
-            </Tr>
-          )}
-
-          {!loading && apiKeyList.length == 0 && (
-            <Td colSpan={3} textAlign='center'>
-              No API Keys
-            </Td>
-          )}
-
-          {!loading &&
-            apiKeyList.length > 0 &&
-            apiKeyList.map((apiKey) => (
-              <ApiKeyRow key={apiKey._id} apiKey={apiKey} />
-            ))}
-        </Tbody>
-      </Table>
-    </TableContainer>
-  )
-}
-
-export default ApiKeyList
diff --git a/web/components/dashboard/DeviceList.tsx b/web/components/dashboard/DeviceList.tsx
deleted file mode 100644
index 7a367b7..0000000
--- a/web/components/dashboard/DeviceList.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { CopyIcon, DeleteIcon } from '@chakra-ui/icons'
-import {
-  IconButton,
-  Spinner,
-  Table,
-  TableContainer,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tooltip,
-  Tr,
-  useToast,
-} from '@chakra-ui/react'
-import { useEffect } from 'react'
-import { useSelector } from 'react-redux'
-import { selectAuthUser } from '../../store/authSlice'
-import { deleteDevice, fetchDevices, selectDeviceList, selectDeviceLoading } from '../../store/deviceSlice'
-import { useAppDispatch } from '../../store/hooks'
-
-const DeviceRow = ({ device, onDelete }: any) => {
-  const { enabled, model, brand, _id, createdAt } = device
-
-  const toast = useToast();
-
-  return (
-    <Tr>
-      <Td>{`${brand}/ ${model}`}</Td>
-      <Td>
-        {_id}
-        <IconButton
-          variant='ghost'
-          icon={<CopyIcon />}
-          onClick={() => {
-            navigator.clipboard.writeText(_id)
-            toast({
-              title: 'Copied to clipboard',
-              status: 'success',
-            })
-          } } aria-label={''}   >
-            Copy to Clipboard
-          </IconButton>
-
-      </Td>
-      <Td>{enabled ? 'enabled' : 'disabled'}</Td>
-      <Td>{/* <EmailIcon onDoubleClick={(e) => {}} /> */}</Td>
-      <Td>
-        {/* <Tooltip label='Double Click to delete'>
-          <IconButton
-            aria-label='Delete'
-            icon={<DeleteIcon />}
-            // onDoubleClick={onDelete}
-          />
-        </Tooltip> */}
-      </Td>
-    </Tr>
-  )
-}
-
-const DeviceList = () => {
-  const dispatch = useAppDispatch()
-
-  const authUser = useSelector(selectAuthUser)
-  useEffect(() => {
-    if (authUser) {
-      dispatch(fetchDevices())
-    }
-  }, [authUser, dispatch])
-
-  const deviceList = useSelector(selectDeviceList)
-  const loading = useSelector(selectDeviceLoading)
-
-  const onDelete = (apiKeyId: string) => {
-    dispatch(deleteDevice(apiKeyId))
-  }
-
-  return (
-    <TableContainer>
-      <Table variant='striped'>
-        <Thead>
-          <Tr>
-            <Th>Your Devices</Th>
-            <Th>Device ID</Th>
-            <Th>Status</Th>
-            <Th colSpan={2}>Actions</Th>
-          </Tr>
-        </Thead>
-        <Tbody>
-          {loading && (
-            <Tr>
-              <Td colSpan={3} textAlign='center'>
-                <Spinner size='lg' />
-              </Td>
-            </Tr>
-          )}
-
-          {!loading && deviceList.length === 0 && (
-            <Tr>
-              <Td colSpan={3} textAlign='center'>
-                No Devices
-              </Td>
-            </Tr>
-          )}
-
-          {!loading &&
-            deviceList.length > 0 &&
-            deviceList.map((device) => (
-              <DeviceRow key={device._id} device={device} onDelete={() => onDelete(device._id)} />
-            ))}
-        </Tbody>
-      </Table>
-    </TableContainer>
-  )
-}
-
-export default DeviceList
diff --git a/web/components/dashboard/GenerateApiKey.tsx b/web/components/dashboard/GenerateApiKey.tsx
deleted file mode 100644
index a004739..0000000
--- a/web/components/dashboard/GenerateApiKey.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import {
-  Box,
-  Button,
-  chakra,
-  Flex,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  useColorModeValue,
-  useToast,
-} from '@chakra-ui/react'
-import { useState } from 'react'
-import QRCode from 'react-qr-code'
-import { fetchApiKeys } from '../../store/apiKeySlice'
-import { gatewayService } from '../../services/gatewayService'
-import { useAppDispatch } from '../../store/hooks'
-
-const NewApiKeyGeneratedModal = ({
-  isOpen = false,
-  generatedApiKey,
-  onClose,
-  showQR = false,
-  ...props
-}) => {
-  const toast = useToast()
-  return (
-    <Modal isOpen={isOpen} onClose={onClose}>
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>Api Key Generated</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          {showQR && (
-            <>
-              <chakra.h1
-                fontSize='md'
-                fontWeight='bold'
-                mt={2}
-                // color={useColorModeValue('gray.800', 'white')}
-              >
-                Open the SMS Gateway App and scan this QR to get started
-              </chakra.h1>
-
-              <Flex
-                justifyContent='center'
-                style={{ backgroundColor: '#fff', padding: '5px' }}
-              >
-                <QRCode value={generatedApiKey} />{' '}
-              </Flex>
-            </>
-          )}
-          <chakra.h1
-            fontSize='lg'
-            fontWeight='bold'
-            mt={2}
-            // color={useColorModeValue('gray.800', 'white')}
-          >
-            {generatedApiKey}
-          </chakra.h1>
-          <chakra.h1
-            fontSize='lg'
-            fontWeight='bold'
-            mt={2}
-            color={useColorModeValue('red.800', 'white')}
-          >
-            {'Save this key, it wont be shown again ;)'}
-          </chakra.h1>
-        </ModalBody>
-
-        <ModalFooter>
-          <Button
-            variant='ghost'
-            onClick={() => {
-              navigator.clipboard.writeText(generatedApiKey)
-              toast({
-                title: 'Copied to clipboard',
-                status: 'success',
-              })
-            }}
-          >
-            Copy to Clipboard
-          </Button>{' '}
-          <Button
-            colorScheme='blue'
-            mr={3}
-            onClick={() => {
-              onClose()
-            }}
-          >
-            Close
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  )
-}
-
-export default function GenerateApiKey() {
-  const [generatedApiKey, setGeneratedApiKey] = useState(null)
-  const [generatingApiKey, setGeneratingApiKey] = useState(null)
-  const [showGeneratedApiKeyModal, setShowGeneratedApiKeyModal] =
-    useState(false)
-
-  const dispatch = useAppDispatch()
-
-  const generateApiKey = async () => {
-    setGeneratingApiKey(true)
-    const newApiKey = await gatewayService.generateApiKey()
-    setGeneratedApiKey(newApiKey)
-    setShowGeneratedApiKeyModal(true)
-    setGeneratingApiKey(false)
-    dispatch(fetchApiKeys())
-  }
-  return (
-    <>
-      <Box
-        padding={5}
-        border='1px solid #ccc'
-        marginBottom={10}
-        borderRadius='2xl'
-      >
-        <Flex direction='row' justifyContent='space-between'>
-          {' '}
-          <chakra.h1
-            fontSize='md'
-            fontWeight='bold'
-            mt={2}
-            color={useColorModeValue('gray.800', 'white')}
-          >
-            Generate Api Key and Register Device
-          </chakra.h1>
-          <Button
-            /* flex={1} */
-            px={4}
-            fontSize={'sm'}
-            rounded={'full'}
-            bg={'blue.400'}
-            color={'white'}
-            boxShadow={
-              '0px 1px 25px -5px rgb(66 153 225 / 48%), 0 10px 10px -5px rgb(66 153 225 / 43%)'
-            }
-            _hover={{
-              bg: 'blue.500',
-            }}
-            _focus={{
-              bg: 'blue.500',
-            }}
-            onClick={generateApiKey}
-            disabled={generatingApiKey}
-          >
-            {generatingApiKey ? 'loading... ' : 'Get Started'}
-          </Button>
-        </Flex>{' '}
-        <Flex>
-          Start sending SMS by clicking &quot;Get Started&quot; and scan the QR code or
-          paste the API Key in the TextBee Mobile App
-        </Flex>
-      </Box>
-      {generatedApiKey && (
-        <>
-          {
-            <NewApiKeyGeneratedModal
-              isOpen={showGeneratedApiKeyModal}
-              generatedApiKey={generatedApiKey}
-              showQR={true}
-              onClose={() => {
-                setShowGeneratedApiKeyModal(false)
-              }}
-            />
-          }
-        </>
-      )}
-    </>
-  )
-}
diff --git a/web/components/dashboard/ReceiveSMS.tsx b/web/components/dashboard/ReceiveSMS.tsx
deleted file mode 100644
index 719d5bf..0000000
--- a/web/components/dashboard/ReceiveSMS.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-import {
-  Alert,
-  AlertIcon,
-  Grid,
-  GridItem,
-  Spinner,
-  Stack,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Table,
-  TableContainer,
-  Tabs,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from '@chakra-ui/react'
-import { useEffect, useMemo, useState } from 'react'
-import { useSelector } from 'react-redux'
-import {
-  fetchReceivedSMSList,
-  selectDeviceList,
-  selectReceivedSMSList,
-} from '../../store/deviceSlice'
-import { useAppDispatch } from '../../store/hooks'
-import { selectAuthUser } from '../../store/authSlice'
-
-export default function ReceiveSMS() {
-  return (
-    <>
-      <Grid
-        templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(3, 1fr)' }}
-        gap={6}
-      >
-        <GridItem colSpan={2}>
-          <ReceivedSMSList />
-        </GridItem>
-        <GridItem colSpan={1}>
-          <ReceiveSMSNotifications />
-        </GridItem>
-      </Grid>
-    </>
-  )
-}
-
-const ReceiveSMSNotifications = () => {
-  return (
-    <Stack spacing={3}>
-      <Alert status='success'>
-        <AlertIcon />
-        You can now receive SMS and view them in the dashboard, or retreive them
-        via the API
-      </Alert>
-
-      <Alert status='warning'>
-        <AlertIcon />
-        To receive SMS, you need to have an active device that has receive SMS
-        option enabled <small>(Turn on the switch in the app)</small>
-      </Alert>
-
-      <Alert status='info'>
-        <AlertIcon />
-        Webhooks will be available soon 😉
-      </Alert>
-    </Stack>
-  )
-}
-
-const ReceivedSMSList = () => {
-  const dispatch = useAppDispatch()
-
-  const [tabIndex, setTabIndex] = useState(0)
-
-  const { loading: receivedSMSListLoading, data: receivedSMSListData } =
-    useSelector(selectReceivedSMSList)
-  const deviceList = useSelector(selectDeviceList)
-
-  const authUser = useSelector(selectAuthUser)
-
-  const activeDeviceId = useMemo(() => {
-    return deviceList[tabIndex]?._id
-  }, [tabIndex, deviceList])
-
-  useEffect(() => {
-    if (authUser && activeDeviceId) {
-      dispatch(fetchReceivedSMSList(activeDeviceId))
-    }
-  }, [dispatch, authUser, activeDeviceId])
-
-  if (!receivedSMSListLoading && (!deviceList || deviceList.length == 0)) {
-    return (
-      <Alert status='warning'>
-        <AlertIcon />
-        You dont have any devices yet. Please register a device to receive SMS
-      </Alert>
-    )
-  }
-
-  return (
-    <>
-      <Tabs isLazy={false} index={tabIndex} onChange={setTabIndex}>
-        <TabList>
-          {deviceList.map(({ _id, brand, model }) => (
-            <Tab key={_id}>{`${brand} ${model}`}</Tab>
-          ))}
-        </TabList>
-        <TabPanels>
-          {deviceList.map(({ _id, brand, model }) => (
-            <TabPanel key={_id}>
-              <TableContainer>
-                <Table variant='striped'>
-                  <Thead>
-                    <Tr>
-                      <Th>sender</Th>
-                      <Th colSpan={4}>message</Th>
-                      <Th>received at</Th>
-                    </Tr>
-                  </Thead>
-                  <Tbody>
-                    {receivedSMSListLoading && (
-                      <Tr>
-                        <Td colSpan={6} textAlign='center'>
-                          <Spinner size='lg' />
-                        </Td>
-                      </Tr>
-                    )}
-
-                    {!receivedSMSListLoading &&
-                      receivedSMSListData.length == 0 && (
-                        <Td colSpan={6} textAlign='center'>
-                          No SMS received
-                        </Td>
-                      )}
-
-                    {!receivedSMSListLoading &&
-                      receivedSMSListData.length > 0 &&
-                      receivedSMSListData.map(
-                        ({ _id, sender, message, receivedAt }) => (
-                          <Tr key={_id}>
-                            <Td>{sender}</Td>
-                            <Td whiteSpace='pre-wrap' colSpan={4}>
-                              {message}
-                            </Td>
-                            <Td>
-                              {new Date(receivedAt).toLocaleString('en-US', {
-                                month: 'long',
-                                day: 'numeric',
-                                year: 'numeric',
-                                hour: 'numeric',
-                                minute: 'numeric',
-                                hour12: true,
-                              })}
-                            </Td>
-                            <Td></Td>
-                          </Tr>
-                        )
-                      )}
-                  </Tbody>
-                </Table>
-              </TableContainer>
-            </TabPanel>
-          ))}
-        </TabPanels>
-      </Tabs>
-    </>
-  )
-}
diff --git a/web/components/dashboard/SendSMS.tsx b/web/components/dashboard/SendSMS.tsx
deleted file mode 100644
index b21d195..0000000
--- a/web/components/dashboard/SendSMS.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import {
-  Box,
-  Button,
-  FormLabel,
-  Input,
-  Select,
-  SimpleGrid,
-  Spinner,
-  Textarea,
-  useToast,
-} from '@chakra-ui/react'
-import { useState } from 'react'
-import { useSelector } from 'react-redux'
-import {
-  selectDeviceList,
-  selectSendingSMS,
-  sendSMS,
-} from '../../store/deviceSlice'
-import { useAppDispatch } from '../../store/hooks'
-
-export const SendSMSForm = ({ deviceList, formData, handleChange }) => {
-  return (
-    <>
-      <Box>
-        <FormLabel htmlFor='device'>Select Device</FormLabel>
-        <Select
-          id='device'
-          name='device'
-          placeholder='Select Device'
-          onChange={handleChange}
-          value={formData.device}
-        >
-          {deviceList.map((device) => (
-            <option
-              key={device._id}
-              value={device._id}
-              disabled={!device.enabled}
-            >
-              {device.model}
-            </option>
-          ))}
-        </Select>
-      </Box>
-      <Box>
-        <FormLabel htmlFor='recipient'>Recipient</FormLabel>
-        <Input
-          placeholder='recipient'
-          name='recipients'
-          onChange={handleChange}
-          value={formData.recipients}
-          type='tel'
-        />
-      </Box>
-      <Box>
-        <FormLabel htmlFor='message'>Message</FormLabel>
-        <Textarea
-          id='message'
-          name='message'
-          onChange={handleChange}
-          value={formData.message}
-        />
-      </Box>
-    </>
-  )
-}
-
-export default function SendSMS() {
-  const deviceList = useSelector(selectDeviceList)
-  const toast = useToast()
-  const dispatch = useAppDispatch()
-
-  const sendingSMS = useSelector(selectSendingSMS)
-
-  const [formData, setFormData] = useState({
-    device: '',
-    recipients: '',
-    message: '',
-  })
-
-  const handSend = (e) => {
-    e.preventDefault()
-    const { device: deviceId, recipients, message } = formData
-    const recipientsArray = recipients.replace(' ', '').split(',')
-
-    if (!deviceId || !recipients || !message) {
-      toast({
-        title: 'Please fill all fields',
-        status: 'error',
-      })
-      return
-    }
-
-    for (let recipient of recipientsArray) {
-      // TODO: validate phone numbers
-    }
-
-    dispatch(
-      sendSMS({
-        deviceId,
-        payload: {
-          recipients: recipientsArray,
-          message,
-        },
-      })
-    )
-  }
-
-  const handleChange = (e) => {
-    setFormData({
-      ...formData,
-      [e.target.name]: e.target.value,
-    })
-  }
-
-  return (
-    <>
-      <SimpleGrid columns={{ base: 1, md: 2 }} spacing={{ base: 5, lg: 8 }}>
-        <Box backdropBlur='2xl' borderWidth='0px' borderRadius='lg'>
-          <SendSMSForm
-            deviceList={deviceList}
-            formData={formData}
-            handleChange={handleChange}
-          />
-
-          <Button
-            variant='outline'
-            colorScheme='blue'
-            onClick={handSend}
-            disabled={sendingSMS}
-            marginTop={3}
-          >
-            {sendingSMS ? <Spinner size='md' /> : 'Send'}
-          </Button>
-        </Box>
-        <Box backdropBlur='2xl' borderWidth='0px' borderRadius='lg'></Box>
-      </SimpleGrid>
-    </>
-  )
-}
diff --git a/web/components/dashboard/UserStats.tsx b/web/components/dashboard/UserStats.tsx
deleted file mode 100644
index d5c8126..0000000
--- a/web/components/dashboard/UserStats.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { Box, Grid, GridItem, SimpleGrid, chakra } from '@chakra-ui/react'
-import React, { useEffect } from 'react'
-import { useSelector } from 'react-redux'
-import { selectAuthUser } from '../../store/authSlice'
-import UserStatsCard from './UserStatsCard'
-import {
-  fetchStats,
-  selectStatsData,
-  selectStatsLoading,
-} from '../../store/statsSlice'
-import { useAppDispatch, useAppSelector } from '../../store/hooks'
-
-const UserStats = () => {
-  const authUser = useSelector(selectAuthUser)
-
-  const {
-    totalApiKeyCount,
-    totalDeviceCount,
-    totalReceivedSMSCount,
-    totalSentSMSCount,
-  } = useAppSelector(selectStatsData)
-  const statsLoading = useAppSelector(selectStatsLoading)
-
-  const dispatch = useAppDispatch()
-
-  useEffect(() => {
-    dispatch(fetchStats())
-  }, [dispatch])
-
-  return (
-    <>
-      <Box maxW='12xl' mx={'auto'} pt={5} px={{ base: 2, sm: 12, md: 17 }}>
-        <Grid
-          templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(3, 1fr)' }}
-          gap={6}
-        >
-          <GridItem colSpan={1}>
-            <chakra.h1
-              textAlign={'center'}
-              fontSize={'2xl'}
-              py={10}
-              fontWeight={'bold'}
-            >
-              Welcome {authUser?.name}
-            </chakra.h1>
-          </GridItem>
-          <GridItem colSpan={2}>
-            <SimpleGrid
-              columns={{ base: 2, md: 4 }}
-              spacing={{ base: 5, lg: 8 }}
-            >
-              <UserStatsCard
-                title={'Registered '}
-                stat={`${statsLoading ? '-:-' : totalDeviceCount} Devices`}
-              />
-              <UserStatsCard
-                title={'Generated'}
-                stat={`${statsLoading ? '-:-' : totalApiKeyCount} API Keys`}
-              />
-              <UserStatsCard
-                title={'Sent'}
-                stat={`${statsLoading ? '-:-' : totalSentSMSCount} SMS Sent`}
-              />
-              <UserStatsCard
-                title={'Received'}
-                stat={`${
-                  statsLoading ? '-:-' : totalReceivedSMSCount
-                } SMS Received`}
-              />
-            </SimpleGrid>
-          </GridItem>
-        </Grid>
-      </Box>
-    </>
-  )
-}
-
-export default UserStats
diff --git a/web/components/dashboard/UserStatsCard.tsx b/web/components/dashboard/UserStatsCard.tsx
deleted file mode 100644
index 16a0e08..0000000
--- a/web/components/dashboard/UserStatsCard.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import {
-  Stat,
-  StatLabel,
-  StatNumber,
-  useColorModeValue,
-} from '@chakra-ui/react'
-import React from 'react'
-
-export default function UserStatsCard({ ...props }) {
-  const { title, stat } = props
-  return (
-    <Stat
-      px={{ base: 2, md: 4 }}
-      py={'3'}
-      shadow={'xl'}
-      border={'1px solid'}
-      borderColor={useColorModeValue('gray.300', 'gray.700')}
-      rounded={'lg'}
-      style={{
-        height: '90px',
-      }}
-      alignContent={'center'}
-    >
-      <StatLabel fontWeight={'medium'} isTruncated>
-        {title}
-      </StatLabel>
-      <StatNumber fontSize={'md'} fontWeight={'medium'}>
-        {stat}
-      </StatNumber>
-    </Stat>
-  )
-}
diff --git a/web/components/landing/CodeSnippetSection.tsx b/web/components/landing/CodeSnippetSection.tsx
deleted file mode 100644
index c782275..0000000
--- a/web/components/landing/CodeSnippetSection.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import {
-  Box,
-  Flex,
-  Heading,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-  Text,
-} from '@chakra-ui/react'
-import React from 'react'
-import AnimatedScrollWrapper from '../AnimatedScrollWrapper'
-import SyntaxHighlighter from 'react-syntax-highlighter'
-
-export default function CodeSnippetSection() {
-  const codeSnippets = [
-    {
-      tech: 'Node.Js',
-      language: 'javascript',
-      snippet: `
-    const BASE_URL = 'https://api.textbee.dev/api/v1'
-    const API_KEY = 'YOUR_API_KEY'
-    const DEVICE_ID = 'YOUR_DEVICE_ID'
-    
-    await axios.post(\`\$\{BASE_URL\}/gateway/devices/\$\{DEVICE_ID}/sendSMS\`, {
-      recipients: [ '+251912345678' ],
-      message: 'Hello World!',
-    }, {
-      headers: {
-        'x-api-key': API_KEY,
-      },
-    })
-    `,
-    },
-    {
-      tech: 'cURL',
-      language: 'shell',
-      snippet: `curl -X POST \ https://api.textbee.dev/api/v1/gateway/devices/<DEVICE_ID>/sendSMS \ -H 'x-api-key: <API_KEY>' \ -H 'Content-Type: application/json' \ -d '{ "recipients": ["+251912345678"], "message": "Hello World!" }'`,
-    },
-  ]
-
-  return (
-    <AnimatedScrollWrapper>
-      <Box m={{ base: 0, md: 8 }} p={{ base: 0, md: 8 }}>
-        <Flex
-          height='100%'
-          direction='column'
-          justifyContent='center'
-          alignItems='center'
-        >
-          <Heading fontSize={'3xl'} textAlign={'center'} py={8}>
-            Code Snippet
-          </Heading>
-          <Text color={'gray.600'} fontSize={'lg'} textAlign={'center'} pb='4'>
-            Send SMS messages from your web application using our REST API. You
-            can use any programming language to interact with our API. Here is a
-            sample code snippet in JavaScript using axios library.
-          </Text>
-
-          <Box
-            borderRadius={'lg'}
-            padding={{ base: 0, md: 8 }}
-            border={'1px solid #E2E8F0'}
-            w={{ base: '100%', md: '90%' }}
-          >
-            <Tabs>
-              <TabList>
-                {codeSnippets.map((snippet) => (
-                  <Tab key={snippet.tech}>{snippet.tech}</Tab>
-                ))}
-              </TabList>
-              <TabPanels>
-                {codeSnippets.map((snippet) => {
-                  return (
-                    <TabPanel key={snippet.tech}>
-                      <SyntaxHighlighter language={snippet.language}>
-                        {snippet.snippet}
-                      </SyntaxHighlighter>
-                    </TabPanel>
-                  )
-                })}
-              </TabPanels>
-            </Tabs>
-          </Box>
-        </Flex>
-      </Box>
-    </AnimatedScrollWrapper>
-  )
-}
diff --git a/web/components/landing/Customization.tsx b/web/components/landing/Customization.tsx
deleted file mode 100644
index 3bbb42a..0000000
--- a/web/components/landing/Customization.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import {
-  Box,
-  VStack,
-  Button,
-  Flex,
-  Divider,
-  chakra,
-  Grid,
-  GridItem,
-  Container,
-} from '@chakra-ui/react'
-import Link from 'next/link'
-
-export default function Customization() {
-  return (
-    <Box as={Container} maxW='6xl' my={14} p={4}>
-      <Grid
-        templateColumns={{
-          base: 'repeat(1, 1fr)',
-          sm: 'repeat(1, 1fr)',
-          md: 'repeat(3, 1fr)',
-        }}
-        gap={4}
-      >
-        <GridItem colSpan={1}>
-          <VStack alignItems='flex-start' spacing='20px'>
-            <chakra.h2 fontSize='3xl' fontWeight='700'>
-              Customization
-            </chakra.h2>
-            <Button
-              colorScheme='blue'
-              size='md'
-              as={Link}
-              href='https://forms.gle/WmUHvPkf4WZ69cWj9'
-              target='_blank'
-            >
-              Contact Us
-            </Button>
-          </VStack>
-        </GridItem>
-        <GridItem colSpan={2}>
-          <Flex>
-            <chakra.p p={6}>
-              If you need help getting this platform customized and deploy it on
-              your own server, giving you more flexibility and control, reach
-              out for paid customization, deployment and new feature
-              development.
-            </chakra.p>
-          </Flex>
-        </GridItem>
-      </Grid>
-    </Box>
-  )
-}
diff --git a/web/components/landing/DownloadAppSection.tsx b/web/components/landing/DownloadAppSection.tsx
deleted file mode 100644
index 9320285..0000000
--- a/web/components/landing/DownloadAppSection.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import {
-  Box,
-  Button,
-  chakra,
-  Flex,
-  Image,
-  useColorModeValue,
-} from '@chakra-ui/react'
-import React from 'react'
-import AnimatedScrollWrapper from '../AnimatedScrollWrapper'
-
-export default function DownloadAppSection() {
-  return (
-    <AnimatedScrollWrapper>
-      <Box my={16}>
-        <Flex
-          padding={5}
-          background={useColorModeValue('gray.100', 'gray.700')}
-          borderRadius='2xl'
-        >
-          <Flex
-            borderRadius='2xl'
-            m={{ base: 5, md: 8 }}
-            p={{ base: 5, md: 8 }}
-            width='100%'
-            border='1px solid gray'
-            direction='row'
-            justifyContent='center'
-          >
-            <Box>
-              <Image
-                alt={'Hero Image'}
-                fit={'cover'}
-                align={'center'}
-                w={'180px'}
-                // h={'100%'}
-                src={'/images/smsgatewayandroid.png'}
-              />
-            </Box>
-            <Box>
-              <Flex
-                height='100%'
-                direction='column'
-                justifyContent='center'
-                alignItems='center'
-              >
-                <chakra.h1
-                  fontSize='md'
-                  fontWeight='bold'
-                  my={4}
-                  color={useColorModeValue('gray.800', 'white')}
-                >
-                  Download the App to get started!
-                </chakra.h1>
-                <chakra.p
-                  fontSize='sm'
-                  color={useColorModeValue('gray.600', 'gray.400')}
-                  mb={4}
-                >
-                  Unlock the power of messaging with our open-source Android SMS
-                  Gateway.
-                </chakra.p>
-                <a href='https://dl.textbee.dev' target='_blank'>
-                  <Button
-                    /* flex={1} */
-                    px={4}
-                    fontSize={'sm'}
-                    rounded={'full'}
-                    bg={'blue.400'}
-                    color={'white'}
-                    boxShadow={
-                      '0px 1px 25px -5px rgb(66 153 225 / 48%), 0 10px 10px -5px rgb(66 153 225 / 43%)'
-                    }
-                    _hover={{
-                      bg: 'blue.500',
-                    }}
-                    _focus={{
-                      bg: 'blue.500',
-                    }}
-                  >
-                    Download App
-                  </Button>
-                </a>
-              </Flex>
-            </Box>
-          </Flex>
-        </Flex>
-      </Box>
-    </AnimatedScrollWrapper>
-  )
-}
diff --git a/web/components/landing/FeaturesSection.tsx b/web/components/landing/FeaturesSection.tsx
deleted file mode 100644
index e17d126..0000000
--- a/web/components/landing/FeaturesSection.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { CheckIcon } from '@chakra-ui/icons'
-import {
-  Box,
-  Container,
-  Heading,
-  HStack,
-  Icon,
-  SimpleGrid,
-  Text,
-  useColorModeValue,
-  VStack,
-} from '@chakra-ui/react'
-import React from 'react'
-import { featuresContent } from './featuresContent'
-import AnimatedScrollWrapper from '../AnimatedScrollWrapper'
-
-const FeatureCard = ({ feature }) => {
-  const boxBgColor = useColorModeValue('gray.100', 'gray.800')
-  return (
-    <HStack
-      align={'top'}
-      borderWidth='1px'
-      borderRadius='sm'
-      p={2}
-      shadow='lg'
-      background={boxBgColor}
-    >
-      <Box color={'green.400'} px={1}>
-        <Icon as={CheckIcon} />
-      </Box>
-      <VStack align={'start'}>
-        <Text fontWeight={800}>{feature.title}</Text>
-        <Text fontWeight='normal'>{feature.description}</Text>
-      </VStack>
-    </HStack>
-  )
-}
-
-export default function FeaturesSection() {
-  return (
-    <AnimatedScrollWrapper>
-      <Box p={4} my={16} maxW={'6xl'}>
-        <Heading fontSize={'3xl'} textAlign={'center'} pb={0}>
-          Features
-        </Heading>
-        <Text color={'gray.600'} fontSize={'lg'} textAlign={'center'}>
-          The ultimate solution for your messaging needs! Our free open-source
-          Android-based SMS Gateway provides you with all the features you need
-          to effectively manage your SMS communications. From sending messages
-          and automating messaging workflows via API, our SMS Gateway is the
-          perfect tool for any small/mid business or individual.
-        </Text>
-
-        <Container maxW={'6xl'} mt={0}>
-          <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={3} pt={16}>
-            {featuresContent.map((feature, i) => (
-              <FeatureCard key={feature.title} feature={feature} />
-            ))}
-          </SimpleGrid>
-        </Container>
-      </Box>
-    </AnimatedScrollWrapper>
-  )
-}
diff --git a/web/components/landing/HowItWorksSection.tsx b/web/components/landing/HowItWorksSection.tsx
deleted file mode 100644
index af54e82..0000000
--- a/web/components/landing/HowItWorksSection.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { AddIcon, MinusIcon } from '@chakra-ui/icons'
-import {
-  Accordion,
-  AccordionButton,
-  AccordionItem,
-  AccordionPanel,
-  Box,
-  Container,
-  Heading,
-  Text,
-} from '@chakra-ui/react'
-import React from 'react'
-import { howItWorksContent } from './howItWorksContent'
-import AnimatedScrollWrapper from '../AnimatedScrollWrapper'
-
-export default function HowItWorksSection() {
-  return (
-    <AnimatedScrollWrapper>
-      <Box px={4} my={24} maxW={'6xl'}>
-        {/* @ts-ignore */}
-        <a name='how-it-works'>
-          <Heading fontSize={'3xl'} textAlign={'center'}>
-            How It Works
-          </Heading>
-        </a>
-        <Text color={'gray.600'} fontSize={'lg'} textAlign={'center'}>
-          How it works is simple. You install the app on your Android device,
-          and it will turn your device into a SMS Gateway. You can then use the
-          API to send SMS messages from your own applications.
-        </Text>
-
-        <Container maxW={'6xl'} mt={10} pt={0}>
-          <Accordion allowMultiple defaultIndex={[]}>
-            {howItWorksContent.map(({ title, description }) => (
-              <AccordionItem key={title}>
-                {({ isExpanded }) => (
-                  <>
-                    <h2>
-                      <AccordionButton>
-                        <Box as='span' flex='1' textAlign='left'>
-                          {title}
-                        </Box>
-                        {isExpanded ? (
-                          <MinusIcon fontSize='12px' />
-                        ) : (
-                          <AddIcon fontSize='12px' />
-                        )}
-                      </AccordionButton>
-                    </h2>
-                    <AccordionPanel pb={4}>{description}</AccordionPanel>
-                  </>
-                )}
-              </AccordionItem>
-            ))}
-          </Accordion>
-        </Container>
-      </Box>
-    </AnimatedScrollWrapper>
-  )
-}
diff --git a/web/components/landing/IntroSection.tsx b/web/components/landing/IntroSection.tsx
deleted file mode 100644
index 664ea89..0000000
--- a/web/components/landing/IntroSection.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import {
-  Container,
-  Stack,
-  Flex,
-  Box,
-  Heading,
-  Text,
-  Button,
-  Image,
-  createIcon,
-} from '@chakra-ui/react'
-import Link from 'next/link'
-import Router from 'next/router'
-import { selectAuthUser } from '../../store/authSlice'
-import { useSelector } from 'react-redux'
-import { ChatIcon } from '@chakra-ui/icons'
-import AnimatedScrollWrapper from '../AnimatedScrollWrapper'
-import { motion } from 'framer-motion'
-
-const AnimatedScreenshotImage = () => {
-  const animateVariants = {
-    hidden: {
-      opacity: 0,
-      y: Math.floor(Math.random() * 100) + -50,
-      x: Math.floor(Math.random() * 100) + 50,
-    },
-    visible: {
-      opacity: 1,
-      y: 0,
-      x: 0,
-      transition: {
-        duration: 2.0,
-      },
-    },
-  }
-  return (
-    <motion.div
-      variants={animateVariants}
-      initial='hidden'
-      whileInView='visible'
-    >
-      <Box
-        position={'relative'}
-        height={'400px'}
-        rounded={'2xl'}
-        boxShadow={'xs'}
-        width={'full'}
-        overflow={'hidden'}
-      >
-        <Image
-          alt={'TextBee App Screenshot'}
-          fit={'cover'}
-          align={'center'}
-          src={'/images/smsgatewayandroid.png'}
-        />
-      </Box>
-    </motion.div>
-  )
-}
-
-export default function IntroSection() {
-  const authUser = useSelector(selectAuthUser)
-
-  const handleGetStarted = () => {
-    if (!authUser) {
-      Router.push('/register')
-    } else {
-      Router.push('/dashboard')
-    }
-  }
-
-  return (
-    <AnimatedScrollWrapper>
-      <Container maxW={'7xl'} py={8}>
-        <Stack
-          align={'center'}
-          spacing={{ base: 8, md: 10 }}
-          py={{ base: 20, md: 28 }}
-          direction={{ base: 'column', md: 'row' }}
-        >
-          <Stack flex={1} spacing={{ base: 5, md: 10 }}>
-            <Heading
-              lineHeight={1.1}
-              fontWeight={600}
-              fontSize={{ base: '3xl', sm: '4xl', lg: '5xl' }}
-            >
-              <Text as={'span'} position={'relative'} fontWeight={600}>
-                <ChatIcon /> Text
-                <Text as={'span'} color={'blue.400'} decoration='underline'>
-                  Bee
-                </Text>
-              </Text>
-              <br />
-              <Text as={'span'} color={'blue.400'} fontWeight={300}>
-                Make your android device a portable SMS Gateway!
-              </Text>
-            </Heading>
-            <Text
-              color={'gray.500'}
-              fontSize={{ base: 'md', sm: 'lg', lg: 'xl' }}
-            >
-              Unlock the power of messaging with our open-source Android SMS
-              Gateway.
-            </Text>
-            <Stack
-              spacing={{ base: 4, sm: 6 }}
-              direction={{ base: 'column', sm: 'row' }}
-            >
-              <Button
-                rounded={'full'}
-                size={'lg'}
-                fontWeight={'normal'}
-                px={6}
-                colorScheme={'blue'}
-                bg={'blue.400'}
-                _hover={{ bg: 'blue.500' }}
-                onClick={handleGetStarted}
-              >
-                Get Started
-              </Button>
-              <Link href={'#how-it-works'} passHref>
-                <Button
-                  rounded={'full'}
-                  size={'lg'}
-                  fontWeight={'normal'}
-                  px={6}
-                  leftIcon={<PlayIcon h={4} w={4} color={'gray.300'} />}
-                >
-                  How It Works
-                </Button>
-              </Link>
-            </Stack>
-          </Stack>
-          <Flex
-            flex={1}
-            justify={'center'}
-            align={'center'}
-            position={'relative'}
-            w={'full'}
-          >
-            <AnimatedScreenshotImage />
-          </Flex>
-        </Stack>
-      </Container>
-    </AnimatedScrollWrapper>
-  )
-}
-
-const PlayIcon = createIcon({
-  displayName: 'PlayIcon',
-  viewBox: '0 0 58 58',
-  d: 'M28.9999 0.562988C13.3196 0.562988 0.562378 13.3202 0.562378 29.0005C0.562378 44.6808 13.3196 57.438 28.9999 57.438C44.6801 57.438 57.4374 44.6808 57.4374 29.0005C57.4374 13.3202 44.6801 0.562988 28.9999 0.562988ZM39.2223 30.272L23.5749 39.7247C23.3506 39.8591 23.0946 39.9314 22.8332 39.9342C22.5717 39.9369 22.3142 39.8701 22.0871 39.7406C21.86 39.611 21.6715 39.4234 21.5408 39.1969C21.4102 38.9705 21.3421 38.7133 21.3436 38.4519V19.5491C21.3421 19.2877 21.4102 19.0305 21.5408 18.8041C21.6715 18.5776 21.86 18.3899 22.0871 18.2604C22.3142 18.1308 22.5717 18.064 22.8332 18.0668C23.0946 18.0696 23.3506 18.1419 23.5749 18.2763L39.2223 27.729C39.4404 27.8619 39.6207 28.0486 39.7458 28.2713C39.8709 28.494 39.9366 28.7451 39.9366 29.0005C39.9366 29.2559 39.8709 29.507 39.7458 29.7297C39.6207 29.9523 39.4404 30.1391 39.2223 30.272Z',
-})
diff --git a/web/components/landing/SupportTheProject.tsx b/web/components/landing/SupportTheProject.tsx
deleted file mode 100644
index 9efb3a5..0000000
--- a/web/components/landing/SupportTheProject.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import {
-  Box,
-  VStack,
-  Button,
-  Flex,
-  Divider,
-  chakra,
-  Grid,
-  GridItem,
-  Container,
-} from '@chakra-ui/react'
-import Link from 'next/link'
-
-export default function SupportTheProject() {
-  return (
-    <Box as={Container} maxW='6xl' my={14} p={4}>
-      <Grid
-        templateColumns={{
-          base: 'repeat(1, 1fr)',
-          sm: 'repeat(1, 1fr)',
-          md: 'repeat(3, 1fr)',
-        }}
-        gap={4}
-      >
-        <GridItem colSpan={2}>
-          <Flex>
-            <VStack alignItems='flex-start' spacing='20px'>
-              <chakra.h2 fontSize='3xl' fontWeight='700'>
-                Support The Project
-              </chakra.h2>
-              <chakra.p p={0}>
-                Maintaining this open-source project requires resources and
-                dedication. By becoming a patron, your contributions will
-                directly support the development, enabling implementation of new
-                features, enhance performance, and ensure the highest level of
-                security and reliability.
-              </chakra.p>
-            </VStack>
-          </Flex>
-        </GridItem>
-        <GridItem colSpan={1} justifySelf={'center'} alignSelf={'center'}>
-          <Button
-            colorScheme='blue'
-            size='md'
-            my={8}
-            as={Link}
-            href='https://www.patreon.com/bePatron?u=124342375'
-            target='_blank'
-          >
-            Become a Patron
-          </Button>
-        </GridItem>
-      </Grid>
-    </Box>
-  )
-}
diff --git a/web/components/landing/featuresContent.ts b/web/components/landing/featuresContent.ts
deleted file mode 100644
index 9418715..0000000
--- a/web/components/landing/featuresContent.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export const featuresContent = [
-  {
-    title: 'Send SMS',
-    description: 'Send SMS to any number from your dashboard or via REST API.',
-  },
-  {
-    title: 'Bulk SMS',
-    description: 'Send SMS to multiple numbers at once.',
-  },
-  {
-    title: '100% Free',
-    description:
-      'No credit card required. No hidden fees. No strings attached.',
-  },
-  {
-    title: 'Open Source',
-    description: 'The entire codebase is open source and available on GitHub.',
-  },
-]
diff --git a/web/components/landing/howItWorksContent.ts b/web/components/landing/howItWorksContent.ts
deleted file mode 100644
index 987278a..0000000
--- a/web/components/landing/howItWorksContent.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export const howItWorksContent = [
-  {
-    title: 'Step 1: Download The Android App from dl.textbee.dev',
-    description:
-      '',
-  },
-  {
-    title: 'Step 2: Generate an API Key from the dashboard',
-    description:
-      '',
-  },
-  {
-    title:
-      'Step 3: Scan the QR/ enter your api key manually and enable the gateway app',
-    description:
-      '',
-  },
-  {
-    title: 'Step 4: Start sending',
-    description:
-      'You can now send SMS from the dashboard. or visit the API docs at https://api.textbee.dev to send SMS programatically',
-  },
-]
diff --git a/web/components/livechat/LiveChat.tsx b/web/components/livechat/LiveChat.tsx
deleted file mode 100644
index c1305c7..0000000
--- a/web/components/livechat/LiveChat.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import Script from 'next/script'
-import React from 'react'
-
-export default function LiveChat() {
-  if (!process.env.NEXT_PUBLIC_TAWKTO_EMBED_URL) {
-    return null
-  }
-
-  return (
-    <>
-      <Script
-        id='tawkto'
-        strategy='afterInteractive'
-        dangerouslySetInnerHTML={{
-          __html: `
-            var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
-            (function(){
-            var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
-            s1.async=true;
-            s1.src='${process.env.NEXT_PUBLIC_TAWKTO_EMBED_URL}';
-            s1.charset='UTF-8';
-            s1.setAttribute('crossorigin','*');
-            s0.parentNode.insertBefore(s1,s0);
-            })();
-        `,
-        }}
-      />
-    </>
-  )
-}
diff --git a/web/components/meta/Meta.tsx b/web/components/meta/Meta.tsx
deleted file mode 100644
index e37fe20..0000000
--- a/web/components/meta/Meta.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import Head from 'next/head'
-
-export default function Meta() {
-  return (
-    <Head>
-      <title>TextBee - SMS Gateway</title>
-      <meta name='viewport' content='initial-scale=1.0, width=device-width' />
-      <meta
-        name='description'
-        content={`TextBee is an open-source SMS gateway platform built for Android devices.
-        It allows businesses to send SMS messages from dashboard or API, receiving SMS messages and forwarding them to a webhook,
-        streamlining communication and automating SMS workflows. With its robust features, 
-        TextBee is an ideal solution for CRM's, notifications, alerts, two-factor authentication, and various other use cases.
-        `}
-      />
-      <meta
-        name='keywords'
-        content='android, text, sms, gateway, sms-gateway, open-source foss'
-      />
-      <meta name='author' content='Israel Abebe Kokiso' />
-      <link rel='icon' href='/favicon.ico' />
-    </Head>
-  )
-}
diff --git a/web/components/analytics/Analytics.tsx b/web/components/shared/analytics.tsx
similarity index 83%
rename from web/components/analytics/Analytics.tsx
rename to web/components/shared/analytics.tsx
index e978bd4..faedea0 100644
--- a/web/components/analytics/Analytics.tsx
+++ b/web/components/shared/analytics.tsx
@@ -1,11 +1,8 @@
-import Script from 'next/script'
-import { useSelector } from 'react-redux'
-import { selectAuthUser } from '../../store/authSlice'
-
-const Analytics = () => {
+'use client'
 
-  const authUser = useSelector(selectAuthUser)
+import Script from 'next/script'
 
+const Analytics = ({ user }) => {
   return (
     <>
       {/* Global Site Tag (gtag.js) - Google Analytics  */}
@@ -37,7 +34,7 @@ const Analytics = () => {
             c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
             t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
             y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-            clarity('set', 'userId', '${authUser?._id || ''}');
+            clarity('set', 'userId', '${user?.email || ''}');
         })(window, document, "clarity", "script", "iacr7j4ozh");
      `,
         }}
diff --git a/web/components/shared/app-header.tsx b/web/components/shared/app-header.tsx
new file mode 100644
index 0000000..38ac0bc
--- /dev/null
+++ b/web/components/shared/app-header.tsx
@@ -0,0 +1,174 @@
+'use client'
+
+import { useMemo } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { Button } from '@/components/ui/button'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
+import { Menu, LogOut, LayoutDashboard, MessageSquarePlus } from 'lucide-react'
+import { signOut, useSession } from 'next-auth/react'
+import { Routes } from '@/config/routes'
+
+export default function AppHeader() {
+  const session = useSession()
+  const router = useRouter()
+
+  const handleLogout = () => {
+    signOut()
+    router.push(Routes.login)
+  }
+
+  const isAuthenticated = useMemo(
+    () => session.status === 'authenticated' && session.data?.user,
+    [session.status, session.data?.user]
+  )
+
+  const AuthenticatedMenu = () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant='ghost' className='relative h-8 w-8 rounded-full'>
+          <Avatar className='h-8 w-8'>
+            <AvatarImage
+              src={session.data?.user?.avatar}
+              alt={session.data?.user?.name}
+            />
+            <AvatarFallback>
+              {session.data?.user?.name?.charAt(0)}
+            </AvatarFallback>
+          </Avatar>
+          <div className='hidden md:block'>{session.data?.user?.name}</div>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className='w-56' align='end' forceMount>
+        <DropdownMenuItem className='flex flex-col items-start'>
+          <div className='font-medium'>{session.data?.user?.name}</div>
+          <div className='text-xs text-muted-foreground'>
+            {session.data?.user?.email}
+          </div>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link href={Routes.dashboard} className='w-full flex items-center'>
+            <LayoutDashboard className='mr-2 h-4 w-4' />
+            <span>Dashboard</span>
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={handleLogout} className='text-red-600'>
+          <LogOut className='mr-2 h-4 w-4' />
+          <span>Log out</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+
+  const MobileMenu = () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant='ghost' className='md:hidden' size='icon'>
+          <Menu className='h-5 w-5' />
+          <span className='sr-only'>Toggle menu</span>
+        </Button>
+      </SheetTrigger>
+      <SheetContent side='right' className='w-[300px] sm:w-[400px]'>
+        <nav className='flex flex-col gap-4'>
+          {isAuthenticated ? (
+            <>
+              <div className='flex items-center gap-2 py-2'>
+                <Avatar className='h-8 w-8'>
+                  <AvatarImage
+                    src={session.data?.user?.avatar}
+                    alt={session.data?.user?.name}
+                  />
+                  <AvatarFallback>
+                    {session.data?.user?.name?.charAt(0)}
+                  </AvatarFallback>
+                </Avatar>
+                <div>
+                  <div className='font-medium'>{session.data?.user?.name}</div>
+                  <div className='text-xs text-muted-foreground'>
+                    {session.data?.user?.email}
+                  </div>
+                </div>
+              </div>
+              <Link
+                href={Routes.dashboard}
+                className='flex items-center gap-2 py-2'
+              >
+                <LayoutDashboard className='h-4 w-4' />
+                Dashboard
+              </Link>
+              <Button
+                onClick={handleLogout}
+                variant='ghost'
+                className='justify-start text-red-600'
+              >
+                <LogOut className='mr-2 h-4 w-4' />
+                Log out
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button asChild variant='ghost' className='justify-start'>
+                <Link href={Routes.login}>Log in</Link>
+              </Button>
+              <Button
+                asChild
+                color='primary'
+                className='bg-blue-500 hover:bg-blue-600 rounded-full'
+              >
+                <Link href={Routes.register}>Get started</Link>
+              </Button>
+            </>
+          )}
+        </nav>
+      </SheetContent>
+    </Sheet>
+  )
+
+  return (
+    <header className='sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60'>
+      <div className='container flex h-14 items-center'>
+        <div className='mr-4 flex'>
+          <Link
+            className='flex items-center space-x-2'
+            href={Routes.landingPage}
+          >
+            <MessageSquarePlus className='h-6 w-6 text-blue-500' />
+            <span className='font-bold'>
+              Text<span className='text-blue-500'>Bee</span>
+            </span>
+          </Link>
+        </div>
+        <div className='flex flex-1 items-center justify-end space-x-2'>
+          <nav className='flex items-center space-x-2'>
+            {isAuthenticated ? (
+              <AuthenticatedMenu />
+            ) : (
+              <div className='hidden md:flex md:items-center md:gap-2'>
+                <Button asChild variant='ghost'>
+                  <Link href={Routes.login}>Log in</Link>
+                </Button>
+                <Button
+                  asChild
+                  color='primary'
+                  className='bg-blue-500 hover:bg-blue-600 rounded-full'
+                >
+                  <Link href={Routes.register}>Get started</Link>
+                </Button>
+              </div>
+            )}
+            <MobileMenu />
+          </nav>
+        </div>
+      </div>
+    </header>
+  )
+}
diff --git a/web/components/shared/customer-support.tsx b/web/components/shared/customer-support.tsx
new file mode 100644
index 0000000..551a7f5
--- /dev/null
+++ b/web/components/shared/customer-support.tsx
@@ -0,0 +1,227 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Textarea } from '@/components/ui/textarea'
+import { AlertTriangle, Check, Loader2, MessageSquarePlus } from 'lucide-react'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { toast } from '@/hooks/use-toast'
+import axios from 'axios'
+
+const SupportFormSchema = z.object({
+  name: z.string().min(1, { message: 'Name is required' }),
+  email: z.string().email({ message: 'Invalid email address' }),
+  phone: z.string().optional(),
+  category: z.enum(['general', 'technical'], {
+    message: 'Support category is required',
+  }),
+  message: z.string().min(1, { message: 'Message is required' }),
+})
+
+export default function SupportButton() {
+  const [open, setOpen] = useState(false)
+  const form = useForm({
+    resolver: zodResolver(SupportFormSchema),
+    defaultValues: {
+      name: '',
+      email: '',
+      phone: '',
+      category: 'general',
+      message: '',
+    },
+  })
+
+  const onSubmit = async (data: any) => {
+    try {
+      const response = await axios.post('/api/customer-support', data)
+
+      const result = response.data
+
+      toast({
+        title: 'Support request submitted',
+        description: result.message,
+      })
+    } catch (error) {
+      form.setError('root.serverError', {
+        message: 'Error submitting support request',
+      })
+      toast({
+        title: 'Error submitting support request',
+        description: 'Please try again later',
+      })
+    }
+  }
+
+  const onOpenChange = (open: boolean) => {
+    setOpen(open)
+    if (!open) {
+      form.reset()
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogTrigger asChild>
+        <Button
+          className='fixed bottom-4 right-4 shadow-lg bg-blue-500 hover:bg-blue-600 rounded-full'
+          size='sm'
+        >
+          <MessageSquarePlus className='h-5 w-5 mr-1' />
+          <span className='mr-1'>Support</span>
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Contact Support</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
+            <FormField
+              control={form.control}
+              name='category'
+              disabled={form.formState.isSubmitting}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Support Category</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    disabled={form.formState.isSubmitting}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder='Select support category' />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value='general'>General Inquiry</SelectItem>
+                      <SelectItem value='technical'>
+                        Technical Support
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='name'
+              disabled={form.formState.isSubmitting}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder='Your name' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='email'
+              disabled={form.formState.isSubmitting}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder='your@email.com'
+                      type='email'
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='phone'
+              disabled={form.formState.isSubmitting}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Phone (Optional)</FormLabel>
+                  <FormControl>
+                    <Input placeholder='+1234567890' type='tel' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='message'
+              disabled={form.formState.isSubmitting}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Message</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder='How can we help you?'
+                      className='min-h-[100px]'
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {form.formState.isSubmitSuccessful && (
+              <div className='flex items-center gap-2 text-green-500'>
+                <Check className='h-4 w-4' /> We received your message, we will
+                get back to you soon.
+              </div>
+            )}
+
+            {form.formState.errors.root?.serverError && (
+              <>
+                <AlertTriangle className='h-4 w-4' />{' '}
+                {form.formState.errors.root.serverError.message}
+              </>
+            )}
+            <Button
+              type='submit'
+              disabled={form.formState.isSubmitting}
+              className='w-full'
+            >
+              {form.formState.isSubmitting ? (
+                <>
+                  <Loader2 className='h-4 w-4 animate-spin' /> Submitting ...{' '}
+                </>
+              ) : (
+                'Submit'
+              )}
+            </Button>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/web/components/shared/footer.tsx b/web/components/shared/footer.tsx
new file mode 100644
index 0000000..3f1355e
--- /dev/null
+++ b/web/components/shared/footer.tsx
@@ -0,0 +1,51 @@
+import { ExternalLinks } from '@/config/external-links'
+import { Routes } from '@/config/routes'
+import { MessageSquarePlus } from 'lucide-react'
+import Link from 'next/link'
+export default function Footer() {
+  return (
+    <footer className='border-t py-6  bg-gray-50'>
+      <div className='container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row'>
+        <div className='flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0'>
+          <MessageSquarePlus className='h-6 w-6 text-blue-500' />
+          <p className='text-center text-sm leading-loose md:text-left'>
+            © {new Date().getFullYear()} All rights reserved
+          </p>
+        </div>
+        <nav className='flex gap-4 sm:gap-6 flex-col md:flex-row items-center'>
+          <Link
+            className='text-sm font-medium hover:text-blue-500'
+            href={Routes.landingPage}
+          >
+            Home
+          </Link>
+          <Link
+            className='text-sm font-medium hover:text-blue-500'
+            href={Routes.dashboard}
+          >
+            Dashboard
+          </Link>
+          <Link
+            className='text-sm font-medium hover:text-blue-500'
+            href={ExternalLinks.patreon}
+          >
+            Become a Patron
+          </Link>
+          <Link
+            className='text-sm font-medium hover:text-blue-500'
+            href={Routes.downloadAndroidApp}
+          >
+            Download App
+          </Link>
+          <Link
+            className='text-sm font-medium hover:text-blue-500'
+            href={ExternalLinks.github}
+            target='_blank'
+          >
+            GitHub
+          </Link>
+        </nav>
+      </div>
+    </footer>
+  )
+}
diff --git a/web/components/ui/accordion.tsx b/web/components/ui/accordion.tsx
new file mode 100644
index 0000000..fc84db9
--- /dev/null
+++ b/web/components/ui/accordion.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/web/components/ui/alert.tsx b/web/components/ui/alert.tsx
new file mode 100644
index 0000000..5afd41d
--- /dev/null
+++ b/web/components/ui/alert.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/web/components/ui/avatar.tsx b/web/components/ui/avatar.tsx
new file mode 100644
index 0000000..51e507b
--- /dev/null
+++ b/web/components/ui/avatar.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/web/components/ui/badge.tsx b/web/components/ui/badge.tsx
new file mode 100644
index 0000000..e87d62b
--- /dev/null
+++ b/web/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/web/components/ui/button.tsx b/web/components/ui/button.tsx
new file mode 100644
index 0000000..65d4fcd
--- /dev/null
+++ b/web/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/web/components/ui/card.tsx b/web/components/ui/card.tsx
new file mode 100644
index 0000000..77e9fb7
--- /dev/null
+++ b/web/components/ui/card.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/web/components/ui/checkbox.tsx b/web/components/ui/checkbox.tsx
new file mode 100644
index 0000000..83692e2
--- /dev/null
+++ b/web/components/ui/checkbox.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { cn } from "@/lib/utils"
+import { CheckIcon } from "@radix-ui/react-icons"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/web/components/ui/dialog.tsx b/web/components/ui/dialog.tsx
new file mode 100644
index 0000000..95b0d38
--- /dev/null
+++ b/web/components/ui/dialog.tsx
@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { Cross2Icon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/web/components/ui/dropdown-menu.tsx b/web/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..eb4b1cd
--- /dev/null
+++ b/web/components/ui/dropdown-menu.tsx
@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { cn } from "@/lib/utils"
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/web/components/ui/form.tsx b/web/components/ui/form.tsx
new file mode 100644
index 0000000..b6daa65
--- /dev/null
+++ b/web/components/ui/form.tsx
@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/web/components/ui/input.tsx b/web/components/ui/input.tsx
new file mode 100644
index 0000000..5af26b2
--- /dev/null
+++ b/web/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/web/components/ui/label.tsx b/web/components/ui/label.tsx
new file mode 100644
index 0000000..5341821
--- /dev/null
+++ b/web/components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/web/components/ui/navigation-menu.tsx b/web/components/ui/navigation-menu.tsx
new file mode 100644
index 0000000..cb3ce06
--- /dev/null
+++ b/web/components/ui/navigation-menu.tsx
@@ -0,0 +1,127 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDownIcon
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}
diff --git a/web/components/ui/scroll-area.tsx b/web/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..0b4a48d
--- /dev/null
+++ b/web/components/ui/scroll-area.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/web/components/ui/select.tsx b/web/components/ui/select.tsx
new file mode 100644
index 0000000..ac2a8f2
--- /dev/null
+++ b/web/components/ui/select.tsx
@@ -0,0 +1,164 @@
+"use client"
+
+import * as React from "react"
+import {
+  CaretSortIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from "@radix-ui/react-icons"
+import * as SelectPrimitive from "@radix-ui/react-select"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <CaretSortIcon className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUpIcon />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDownIcon />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/web/components/ui/sheet.tsx b/web/components/ui/sheet.tsx
new file mode 100644
index 0000000..92506a4
--- /dev/null
+++ b/web/components/ui/sheet.tsx
@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+import { Cross2Icon } from "@radix-ui/react-icons"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/web/components/ui/spinner.tsx b/web/components/ui/spinner.tsx
new file mode 100644
index 0000000..0c257b9
--- /dev/null
+++ b/web/components/ui/spinner.tsx
@@ -0,0 +1,35 @@
+import { cn } from "@/lib/utils"
+import { Loader2 } from 'lucide-react'
+
+interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: 'sm' | 'md' | 'lg'
+  color?: 'primary' | 'secondary' | 'muted' | 'white'
+}
+
+export function Spinner({ size = 'md', color = 'primary', className, ...props }: SpinnerProps) {
+  return (
+    <div
+      role="status"
+      className={cn(
+        "animate-spin",
+        {
+          'h-4 w-4': size === 'sm',
+          'h-6 w-6': size === 'md',
+          'h-8 w-8': size === 'lg',
+        },
+        {
+          'text-primary': color === 'primary',
+          'text-secondary-foreground': color === 'secondary',
+          'text-muted-foreground': color === 'muted',
+          'text-white': color === 'white',
+        },
+        className
+      )}
+      {...props}
+    >
+      <Loader2 className="h-full w-full" />
+      <span className="sr-only">Loading...</span>
+    </div>
+  )
+}
+
diff --git a/web/components/ui/switch.tsx b/web/components/ui/switch.tsx
new file mode 100644
index 0000000..5f4117f
--- /dev/null
+++ b/web/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/web/components/ui/tabs.tsx b/web/components/ui/tabs.tsx
new file mode 100644
index 0000000..0f4caeb
--- /dev/null
+++ b/web/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/web/components/ui/textarea.tsx b/web/components/ui/textarea.tsx
new file mode 100644
index 0000000..d1258e4
--- /dev/null
+++ b/web/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/web/components/ui/toast.tsx b/web/components/ui/toast.tsx
new file mode 100644
index 0000000..a10fd03
--- /dev/null
+++ b/web/components/ui/toast.tsx
@@ -0,0 +1,128 @@
+"use client"
+
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+import { Cross2Icon } from "@radix-ui/react-icons"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <Cross2Icon className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold [&+div]:text-xs", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}
diff --git a/web/components/ui/toaster.tsx b/web/components/ui/toaster.tsx
new file mode 100644
index 0000000..171beb4
--- /dev/null
+++ b/web/components/ui/toaster.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { useToast } from "@/hooks/use-toast"
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
diff --git a/web/config/api.ts b/web/config/api.ts
new file mode 100644
index 0000000..d9e3f6e
--- /dev/null
+++ b/web/config/api.ts
@@ -0,0 +1,27 @@
+export const ApiEndpoints = {
+  auth: {
+    login: () => '/auth/login',
+    register: () => '/auth/register',
+    signInWithGoogle: () => '/auth/google-login',
+    updateProfile: () => '/auth/update-profile',
+    changePassword: () => '/auth/change-password',
+
+    whoAmI: () => '/auth/who-am-i',
+
+    requestPasswordReset: () => '/auth/request-password-reset',
+    resetPassword: () => '/auth/reset-password',
+
+    generateApiKey: () => '/auth/api-keys',
+    listApiKeys: () => '/auth/api-keys',
+    revokeApiKey: (id: string) => `/auth/api-keys/${id}/revoke`,
+    renameApiKey: (id: string) => `/auth/api-keys/${id}/rename`,
+    deleteApiKey: (id: string) => `/auth/api-keys/${id}`,
+  },
+  gateway: {
+    listDevices: () => '/gateway/devices',
+    sendSMS: (id: string) => `/gateway/devices/${id}/send-sms`,
+    getReceivedSMS: (id: string) => `/gateway/devices/${id}/get-received-sms`,
+
+    getStats: () => '/gateway/stats',
+  },
+}
diff --git a/web/config/external-links.ts b/web/config/external-links.ts
new file mode 100644
index 0000000..ff4c4ec
--- /dev/null
+++ b/web/config/external-links.ts
@@ -0,0 +1,5 @@
+export const ExternalLinks = {
+  patreon: 'https://patreon.com/vernu',
+  github: 'https://github.com/vernu',
+  discord: 'https://discord.gg/d7vyfBpWbQ',
+}
diff --git a/web/config/routes.ts b/web/config/routes.ts
new file mode 100644
index 0000000..cf182fd
--- /dev/null
+++ b/web/config/routes.ts
@@ -0,0 +1,12 @@
+export const Routes = {
+  landingPage: '/',
+  login: '/login',
+  register: '/register',
+  logout: '/logout',
+  resetPassword: '/reset-password',
+
+  dashboard: '/dashboard',
+
+  downloadAndroidApp: 'https://dl.textbee.dev',
+  privacyPolicy: '/privacy-policy',
+}
diff --git a/web/hooks/use-toast.ts b/web/hooks/use-toast.ts
new file mode 100644
index 0000000..02e111d
--- /dev/null
+++ b/web/hooks/use-toast.ts
@@ -0,0 +1,194 @@
+"use client"
+
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }
diff --git a/web/lib/auth.ts b/web/lib/auth.ts
new file mode 100644
index 0000000..0b05b16
--- /dev/null
+++ b/web/lib/auth.ts
@@ -0,0 +1,153 @@
+import CredentialsProvider from 'next-auth/providers/credentials'
+import httpBrowserClient from './httpBrowserClient'
+import { DefaultSession } from 'next-auth'
+import { ApiEndpoints } from '@/config/api'
+import { Routes } from '@/config/routes'
+
+// add custom fields to the session and user interfaces
+declare module 'next-auth' {
+  interface Session {
+    user: {
+      avatar?: string
+      accessToken?: string
+    } & DefaultSession['user']
+  }
+
+  interface User {
+    avatar?: string
+    accessToken?: string
+  }
+}
+
+export const authOptions = {
+  providers: [
+    CredentialsProvider({
+      id: 'email-password-login',
+      name: 'email-password-login',
+      credentials: {
+        email: { label: 'email', type: 'text' },
+        password: { label: 'Password', type: 'password' },
+      },
+      async authorize(credentials) {
+        const { email, password } = credentials
+        try {
+          const res = await httpBrowserClient.post(ApiEndpoints.auth.login(), {
+            email,
+            password,
+          })
+
+          const user = res.data.data.user
+          const accessToken = res.data.data.accessToken
+
+          return {
+            ...user,
+            accessToken,
+          }
+        } catch (e) {
+          console.log(e)
+
+          return null
+        }
+      },
+    }),
+    CredentialsProvider({
+      id: 'email-password-register',
+      name: 'email-password-register',
+      credentials: {
+        email: { label: 'email', type: 'text' },
+        password: { label: 'Password', type: 'password' },
+        name: { label: 'Name', type: 'text' },
+        phone: { label: 'Phone', type: 'text' },
+      },
+      async authorize(credentials) {
+        const { email, password, name, phone } = credentials
+        try {
+          const res = await httpBrowserClient.post(
+            ApiEndpoints.auth.register(),
+            {
+              email,
+              password,
+              name,
+              phone,
+            }
+          )
+
+          const user = res.data.data.user
+          const accessToken = res.data.data.accessToken
+
+          return {
+            ...user,
+            accessToken,
+          }
+        } catch (e) {
+          console.log(e)
+          return null
+        }
+      },
+    }),
+    CredentialsProvider({
+      id: 'google-id-token-login',
+      name: 'google-id-token-login',
+      credentials: {
+        idToken: { label: 'idToken', type: 'text' },
+      },
+      async authorize(credentials) {
+        const { idToken } = credentials
+        try {
+          const res = await httpBrowserClient.post(
+            ApiEndpoints.auth.signInWithGoogle(),
+            {
+              idToken,
+            }
+          )
+
+          const user = res.data.data.user
+          const accessToken = res.data.data.accessToken
+
+          return {
+            ...user,
+            accessToken,
+          }
+        } catch (e) {
+          console.log(e)
+
+          return null
+        }
+      },
+    }),
+  ],
+  pages: {
+    signIn: Routes.login,
+  },
+  session: {
+    strategy: 'jwt',
+  },
+  callbacks: {
+    async jwt({ token, user, trigger, session }) {
+      if (trigger === 'update') {
+        if (session.name !== token.name) {
+          token.name = session.name
+        }
+        if (session.phone !== token.phone) {
+          token.phone = session.phone
+        }
+        return token
+      }
+
+      if (user) {
+        token.id = user._id
+        token.role = user.role
+        token.accessToken = user.accessToken
+        token.avatar = user.avatar
+      }
+      return token
+    },
+    async session({ session, token }): Promise<any> {
+      session.user.id = token.id
+      session.user.role = token.role
+      session.user.accessToken = token.accessToken
+      session.user.avatar = token.avatar
+      return session
+    },
+  },
+}
diff --git a/web/lib/httpBrowserClient.ts b/web/lib/httpBrowserClient.ts
new file mode 100644
index 0000000..381fea6
--- /dev/null
+++ b/web/lib/httpBrowserClient.ts
@@ -0,0 +1,17 @@
+import axios from 'axios'
+import { getSession } from 'next-auth/react'
+
+const httpBrowserClient = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '',
+})
+
+httpBrowserClient.interceptors.request.use(async (config) => {
+  const session: any = await getSession()
+
+  if (session?.user?.accessToken) {
+    config.headers.Authorization = `Bearer ${session.user.accessToken}`
+  }
+  return config
+})
+
+export default httpBrowserClient
diff --git a/web/lib/httpClient.ts b/web/lib/httpClient.ts
deleted file mode 100644
index 2687fd9..0000000
--- a/web/lib/httpClient.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import axios from 'axios'
-import { LOCAL_STORAGE_KEY } from '../shared/constants'
-
-const httpClient = axios.create({
-  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL,
-})
-
-httpClient.interceptors.request.use((config) => {
-  const token = localStorage.getItem(LOCAL_STORAGE_KEY.TOKEN)
-  if (token) {
-    config.headers.Authorization = `Bearer ${token}`
-  }
-  return config
-})
-
-export default httpClient
diff --git a/web/lib/httpServerClient.ts b/web/lib/httpServerClient.ts
new file mode 100644
index 0000000..e1a663d
--- /dev/null
+++ b/web/lib/httpServerClient.ts
@@ -0,0 +1,16 @@
+import axios from 'axios'
+import { getServerSession } from 'next-auth/next'
+import { authOptions } from '@/lib/auth'
+import { Session } from 'next-auth'
+
+export const httpServerClient = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '',
+})
+
+httpServerClient.interceptors.request.use(async (config) => {
+  const session: Session | null = await getServerSession(authOptions as any)
+  if (session?.user?.accessToken) {
+    config.headers.Authorization = `Bearer ${session.user.accessToken}`
+  }
+  return config
+})
diff --git a/web/lib/mail.ts b/web/lib/mail.ts
new file mode 100644
index 0000000..4582150
--- /dev/null
+++ b/web/lib/mail.ts
@@ -0,0 +1,35 @@
+import nodemailer from 'nodemailer'
+
+const transporter = nodemailer.createTransport({
+  host: process.env.MAIL_HOST,
+  port: process.env.MAIL_PORT,
+  secure: false,
+  auth: {
+    user: process.env.MAIL_USER,
+    pass: process.env.MAIL_PASS,
+  },
+})
+
+export const sendMail = async ({
+  to,
+  cc,
+  bcc,
+  subject,
+  html,
+  from,
+}: {
+  to: string
+  cc?: string
+  bcc?: string
+  subject: string
+  html: string
+  from?: string
+}) => {
+  const options = { to, cc, bcc, subject, html, from }
+  if (!from) {
+    options.from = process.env.MAIL_FROM
+  }
+
+  const info = await transporter.sendMail(options)
+  console.log('Message sent: %s', info.messageId)
+}
diff --git a/web/lib/prismaClient.ts b/web/lib/prismaClient.ts
new file mode 100644
index 0000000..2b2f7f8
--- /dev/null
+++ b/web/lib/prismaClient.ts
@@ -0,0 +1,9 @@
+import { PrismaClient } from '@prisma/client'
+
+const prismaClient = global.prisma || new PrismaClient()
+
+if (process.env.NODE_ENV !== 'production') {
+  global.prisma = prismaClient
+}
+
+export default prismaClient
diff --git a/web/lib/schemas.ts b/web/lib/schemas.ts
new file mode 100644
index 0000000..9920af1
--- /dev/null
+++ b/web/lib/schemas.ts
@@ -0,0 +1,45 @@
+import { z } from 'zod'
+
+export const sendSmsSchema = z.object({
+  deviceId: z.string().min(1, {
+    message: 'Please select a device',
+  }),
+  recipients: z
+    .array(
+      z.string().regex(/^\+?\d{1,14}$/, {
+        message: 'Please enter a valid phone number',
+      })
+    )
+    .min(1, {
+      message: 'At least one recipient is required',
+    }),
+  message: z
+    .string()
+    .min(1, {
+      message: 'Message is required',
+    })
+    .max(1600, {
+      message: 'Message cannot exceed 1600 characters',
+    }),
+})
+
+export type SendSmsFormData = z.infer<typeof sendSmsSchema>
+
+// export const bulkSmsSchema = z.object({
+//   deviceId: z.string().uuid({
+//     message: 'Please select a device',
+//   }),
+//   file: z.instanceof(File, {
+//     message: 'Please upload a CSV file',
+//   }),
+//   messageTemplate: z
+//     .string()
+//     .min(1, {
+//       message: 'Message template is required',
+//     })
+//     .max(1600, {
+//       message: 'Message template cannot exceed 1600 characters',
+//     }),
+// })
+
+// export type BulkSmsFormData = z.infer<typeof bulkSmsSchema>
diff --git a/web/middleware.ts b/web/middleware.ts
new file mode 100644
index 0000000..bc8dd65
--- /dev/null
+++ b/web/middleware.ts
@@ -0,0 +1,58 @@
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+import { getToken } from 'next-auth/jwt'
+import { Routes } from './config/routes'
+
+export async function middleware(request: NextRequest) {
+  // Extract token using the secret for session-based authentication
+  const token = await getToken({
+    req: request,
+    secret: process.env.NEXTAUTH_SECRET,
+  })
+  const { pathname } = request.nextUrl
+
+  // if path is /app redirect to login or dashboard based on auth status
+  if (pathname === '/app') {
+    if (!token) {
+      const loginUrl = new URL(Routes.login, request.url)
+      return NextResponse.redirect(loginUrl)
+    }
+    const dashboardUrl = new URL(Routes.dashboard, request.url)
+    return NextResponse.redirect(dashboardUrl)
+  }
+
+  // Check if the path starts with /app/dashboard
+  if (pathname.startsWith(Routes.dashboard)) {
+    if (!token) {
+      // Redirect to login if not authenticated
+      const loginUrl = new URL(Routes.login, request.url)
+      return NextResponse.redirect(loginUrl)
+    }
+  }
+
+  // If user is authenticated and visiting /app/login or /app/register, redirect to /app/dashboard
+  if (token && (pathname === Routes.login || pathname === Routes.register)) {
+    const dashboardUrl = new URL(Routes.dashboard, request.url)
+    return NextResponse.redirect(dashboardUrl)
+  }
+
+  // Set the pathname in the response headers
+  const response = NextResponse.next()
+  response.headers.set('x-pathname', pathname)
+
+  return response
+}
+
+export const config = {
+  matcher: [
+    /*
+     * Match all request paths except:
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico (favicon file)
+     * - images - .svg, .png, .jpg, .jpeg, .gif, .webp
+     * Feel free to modify this pattern to include more paths.
+     */
+    '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
+  ],
+}
diff --git a/web/next-env.d.ts b/web/next-env.d.ts
index fd36f94..4f11a03 100644
--- a/web/next-env.d.ts
+++ b/web/next-env.d.ts
@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/web/package.json b/web/package.json
index 6cc4d42..72907d2 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,34 +1,51 @@
 {
-  "name": "sms-gateway-frontend",
-  "version": "0.1.0",
+  "name": "textbee.dev",
+  "version": "2.0.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "vercel-build": "prisma generate && next build",
+    "prisma:generate": "prisma generate",
+    "prisma:studio": "prisma studio",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^2.1.1",
-    "@chakra-ui/react": "^2.8.2",
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
+    "@hookform/resolvers": "^3.9.1",
+    "@prisma/client": "^5.22.0",
+    "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-navigation-menu": "^1.2.1",
+    "@radix-ui/react-scroll-area": "^1.2.1",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-toast": "^1.2.2",
     "@react-oauth/google": "^0.12.1",
-    "@reduxjs/toolkit": "^2.0.1",
+    "@tanstack/react-query": "^5.61.0",
     "axios": "^1.6.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "framer-motion": "^10.18.0",
     "lucide-react": "^0.453.0",
     "next": "14.1.0",
+    "next-auth": "^4.24.10",
+    "nodemailer": "^6.9.16",
+    "prisma": "^5.22.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.53.1",
     "react-qr-code": "^2.0.12",
-    "react-redux": "^9.1.0",
     "react-syntax-highlighter": "^15.5.0",
     "tailwind-merge": "^2.5.4",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.23.8"
   },
   "engines": {
     "node": ">=18.17.0"
@@ -46,4 +63,4 @@
     "tailwindcss": "^3.4.14",
     "typescript": "5.3.3"
   }
-}
+}
\ No newline at end of file
diff --git a/web/pages/404.tsx b/web/pages/404.tsx
deleted file mode 100644
index 44ec627..0000000
--- a/web/pages/404.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import Router from 'next/router'
-import { Box, Heading, Text, Button } from '@chakra-ui/react'
-
-export default function NotFound() {
-  return (
-    <Box textAlign='center' py={10} px={6}>
-      <Heading
-        display='inline-block'
-        as='h2'
-        size='2xl'
-        bgGradient='linear(to-r, teal.400, teal.600)'
-        backgroundClip='text'
-      >
-        404
-      </Heading>
-      <Text fontSize='18px' mt={3} mb={2}>
-        Page Not Found
-      </Text>
-      <Text color={'gray.500'} mb={6}>
-        The page you&apos;re looking for does not seem to exist
-      </Text>
-
-      <Button
-        colorScheme='teal'
-        bgGradient='linear(to-r, teal.400, teal.500, teal.600)'
-        color='white'
-        variant='solid'
-        onClick={() => {
-          Router.push('/')
-        }}
-      >
-        Go to Home
-      </Button>
-    </Box>
-  )
-}
diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx
deleted file mode 100644
index c5c967b..0000000
--- a/web/pages/_app.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import type { AppProps } from 'next/app'
-import { Provider } from 'react-redux'
-import { store } from '../store/store'
-import { Box, Button, ChakraProvider } from '@chakra-ui/react'
-import Meta from '../components/meta/Meta'
-import { GoogleOAuthProvider } from '@react-oauth/google'
-import ErrorBoundary from '../components/ErrorBoundary'
-import Footer from '../components/Footer'
-import Analytics from '../components/analytics/Analytics'
-import dynamic from 'next/dynamic'
-import LiveChat from '../components/livechat/LiveChat'
-
-function MyApp({ Component, pageProps }: AppProps) {
-  const NoSSRNavbar = dynamic(() => import('../components/Navbar'), {
-    ssr: false,
-  })
-
-  return (
-    <ErrorBoundary>
-      <Provider store={store}>
-        <Analytics />
-        <LiveChat />
-        <GoogleOAuthProvider
-          clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}
-        >
-          <ChakraProvider>
-            <Meta />
-            <NoSSRNavbar />
-            <Wrapper>
-              <Component {...pageProps} />
-            </Wrapper>
-
-            <div>
-              <a href='/customer-support'>
-                <Button
-                  style={{
-                    position: 'fixed',
-                    bottom: 1,
-                    right: 1,
-                    height: '80px',
-                    borderRadius: '100%',
-                    border: '1px solid red',
-                    color: 'red',
-                  }}
-                >
-                  Customer <br />
-                  Support
-                </Button>
-              </a>
-            </div>
-            <Footer />
-          </ChakraProvider>
-        </GoogleOAuthProvider>
-      </Provider>
-    </ErrorBoundary>
-  )
-}
-
-const Wrapper = ({ children }) => {
-  return <Box minH='75vh'>{children}</Box>
-}
-
-export default MyApp
diff --git a/web/pages/dashboard.tsx b/web/pages/dashboard.tsx
deleted file mode 100644
index 96268fa..0000000
--- a/web/pages/dashboard.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-import {
-  Alert,
-  AlertIcon,
-  Box,
-  Button,
-  Grid,
-  GridItem,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-  useToast,
-} from '@chakra-ui/react'
-import UserStats from '../components/dashboard/UserStats'
-import { useSelector } from 'react-redux'
-import { selectAuthUser } from '../store/authSlice'
-import Router from 'next/router'
-import { useEffect, useState } from 'react'
-import SendSMS from '../components/dashboard/SendSMS'
-import dynamic from 'next/dynamic'
-import ReceiveSMS from '../components/dashboard/ReceiveSMS'
-import APIKeyAndDevices from '../components/dashboard/APIKeyAndDevices'
-import { InfoIcon } from '@chakra-ui/icons'
-
-export default function Dashboard() {
-  const NoSSRAnimatedWrapper = dynamic(
-    () => import('../components/AnimatedScrollWrapper'),
-    {
-      ssr: false,
-    }
-  )
-
-  const authUser = useSelector(selectAuthUser)
-  const toast = useToast()
-  useEffect(() => {
-    if (!authUser) {
-      toast({
-        title: 'You are not logged in',
-        description: 'Please login to access this page',
-        status: 'warning',
-      })
-      Router.push('/login')
-    }
-  }, [authUser, toast])
-
-  return (
-    <>
-      <NoSSRAnimatedWrapper>
-        <UserStats />
-        <DashboardTabView />
-      </NoSSRAnimatedWrapper>
-    </>
-  )
-}
-
-const DashboardTabView = () => {
-  const [tabIndex, setTabIndex] = useState(0)
-  const ctaOptions = [
-    {
-      title: 'Get instant support from other developers.',
-      actionButton: 'Join our Discord Server',
-      link: 'https://discord.gg/d7vyfBpWbQ',
-    },
-    {
-      title: 'Have questions? Get answers from our community.',
-      actionButton: 'Join Now on Discord',
-      link: 'https://discord.gg/d7vyfBpWbQ',
-    },
-    {
-      title: 'Stay updated with the latest features and announcements.',
-      actionButton: 'Join our Community',
-      link: 'https://discord.gg/d7vyfBpWbQ',
-    },
-    {
-      title: 'Have Questions? Our Discord Community Has Answers!',
-      actionButton: 'Join our Community',
-      link: 'https://discord.gg/d7vyfBpWbQ',
-    },
-    {
-      title: 'Stay Updated with the Latest Features',
-      actionButton: 'Join our Discord Community',
-      link: 'https://discord.gg/d7vyfBpWbQ',
-    },
-    {
-      title: 'Don’t Miss Out on Updates',
-      actionButton: 'Join our Discord Community',
-      link: 'https://discord.gg/d7vyfBpWbQ',
-    },
-
-    {
-      title: 'Help us keep the project alive and growing.',
-      actionButton: 'Support Us on Patreon',
-      link: 'https://patreon.com/vernu',
-    },
-    {
-      title: 'Your contribution makes a difference.',
-      actionButton: 'Become a Patron',
-      link: 'https://patreon.com/vernu',
-    },
-    {
-      title: 'Enjoying the platform? Consider supporting us.',
-      actionButton: 'Donate on Patreon',
-      link: 'https://patreon.com/vernu',
-    },
-    {
-      title: 'Your support helps us maintain and expand the project.',
-      actionButton: 'Support on Patreon',
-      link: 'https://patreon.com/vernu',
-    },
-    {
-      title: 'Love what we’re doing? Show your support.',
-      actionButton: 'Become a Supporter',
-      link: 'https://patreon.com/vernu',
-    },
-    {
-      title: 'Help us keep this project free and open.',
-      actionButton: 'Become a Patreon',
-      link: 'https://patreon.com/vernu',
-    },
-
-    {
-      title: 'Enjoying our project? Show your support.',
-      actionButton: 'Star Us on GitHub',
-      link: 'https://github.com/vernu/textbee',
-    },
-    {
-      title: 'Support us by starring on GitHub.',
-      actionButton: 'Give us a star',
-      link: 'https://github.com/vernu/textbee',
-    },
-    {
-      title: 'Help us grow on GitHub.',
-      actionButton: 'Give a star',
-      link: 'https://github.com/vernu/textbee',
-    },
-  ]
-
-  const randomIndex = Math.floor(Math.random() * ctaOptions.length)
-
-  const {
-    title: ctaTitle,
-    actionButton: ctaAction,
-    link: ctaLink,
-  } = ctaOptions[randomIndex]
-  return (
-    <Box maxW='7xl' mx={'auto'} pt={5} px={{ base: 2, sm: 12, md: 17 }}>
-      {/* <Alert status='error'>
-        <AlertIcon />
-        Urgent Notice: Due to recent changes to Google&apos;s FCM platform, your
-        token may be out of sync with textbee server and text messages may not
-        be delivered properly. To resolve this issue, please open the textbee
-        mobile app and click the Update button found right below the api key
-        input. and this will update your token.
-      </Alert> */}
-      <Alert status='info'>
-        <Grid
-          templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
-          gap={3}
-        >
-          <GridItem colSpan={1} p={2}>
-            <InfoIcon mx={3} /> {ctaTitle}{' '}
-          </GridItem>
-          <GridItem colSpan={1}>
-            <a href={ctaLink} target='_blank'>
-              <Button
-                mx={3}
-                display={{
-                  xs: 'block',
-                  md: 'inline-flex',
-                }}
-              >
-                {ctaAction}
-              </Button>
-            </a>
-          </GridItem>
-        </Grid>
-      </Alert>
-      <Tabs isLazy={false} index={tabIndex} onChange={setTabIndex}>
-        <TabList>
-          <Tab>API Key and Devices</Tab>
-          <Tab>Send SMS</Tab>
-          <Tab>Receive SMS</Tab>
-        </TabList>
-        <TabPanels>
-          <TabPanel>
-            <APIKeyAndDevices />
-          </TabPanel>
-          <TabPanel>
-            <SendSMS />
-          </TabPanel>
-          <TabPanel>
-            <ReceiveSMS />
-          </TabPanel>
-        </TabPanels>
-      </Tabs>
-    </Box>
-  )
-}
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
deleted file mode 100644
index a86bda0..0000000
--- a/web/pages/index.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Container } from '@chakra-ui/react'
-import { useGoogleOneTapLogin } from '@react-oauth/google'
-
-import { useDispatch, useSelector } from 'react-redux'
-import FeaturesSection from '../components/landing/FeaturesSection'
-import HowItWorksSection from '../components/landing/HowItWorksSection'
-import IntroSection from '../components/landing/IntroSection'
-import { loginWithGoogle, selectAuthUser } from '../store/authSlice'
-
-import DownloadAppSection from '../components/landing/DownloadAppSection'
-import CodeSnippetSection from '../components/landing/CodeSnippetSection'
-import SupportTheProject from '../components/landing/SupportTheProject'
-import Customization from '../components/landing/Customization'
-
-export default function HomePage() {
-  const authUser = useSelector(selectAuthUser)
-
-  const dispatch = useDispatch()
-
-  useGoogleOneTapLogin({
-    onSuccess: ({ credential: idToken }) => {
-      dispatch(
-        // @ts-ignore
-        loginWithGoogle({
-          idToken,
-        })
-      )
-    },
-    onError: () => {},
-    disabled: !!authUser,
-  })
-
-  return (
-    <Container maxW={'7xl'}>
-      <IntroSection />
-      <FeaturesSection />
-      <HowItWorksSection />
-      <DownloadAppSection />
-      <Customization />
-      <CodeSnippetSection />
-      <SupportTheProject />
-    </Container>
-  )
-}
diff --git a/web/pages/login.tsx b/web/pages/login.tsx
deleted file mode 100644
index 1141996..0000000
--- a/web/pages/login.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import {
-  Flex,
-  Box,
-  FormControl,
-  FormLabel,
-  Input,
-  InputGroup,
-  InputRightElement,
-  Stack,
-  Button,
-  Heading,
-  Text,
-  useColorModeValue,
-  useToast,
-} from '@chakra-ui/react'
-
-import Link from 'next/link'
-import { useState } from 'react'
-import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
-import {
-  login,
-  loginWithGoogle,
-  selectAuthLoading,
-  selectAuthUser,
-} from '../store/authSlice'
-import { useSelector } from 'react-redux'
-import { LoginRequestPayload } from '../services/types'
-import { GoogleLogin } from '@react-oauth/google'
-import { useAppDispatch } from '../store/hooks'
-
-export default function LoginPage() {
-  const [showPassword, setShowPassword] = useState<boolean>(false)
-
-  const [credentials, setCredentials] = useState<LoginRequestPayload>({
-    email: '',
-    password: '',
-  })
-
-  const dispatch = useAppDispatch()
-  const toast = useToast()
-  const authUser = useSelector(selectAuthUser)
-  const loading = useSelector(selectAuthLoading)
-
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    if (!credentials.email || !credentials.password) {
-      toast({
-        title: 'Error',
-        description: 'Please fill in all fields',
-        status: 'warning',
-      })
-    } else {
-      dispatch(login(credentials))
-    }
-  }
-  const onChange = (e) => {
-    setCredentials({
-      ...credentials,
-      [e.target.name]: e.target.value,
-    })
-  }
-
-  return (
-    <Flex
-      minH={'90vh'}
-      align={'center'}
-      justify={'center'}
-      bg={useColorModeValue('gray.50', 'gray.800')}
-    >
-      <Stack spacing={8} mx={'auto'} maxW={'lg'} py={12} px={6}>
-        <Stack align={'center'}>
-          <Heading fontSize={'2xl'} textAlign={'center'}>
-            Login to access your dashboard
-          </Heading>
-        </Stack>
-        <Box
-          rounded={'lg'}
-          bg={useColorModeValue('white', 'gray.700')}
-          boxShadow={'lg'}
-          p={8}
-        >
-          <Stack spacing={4}>
-            <FormControl id='email' isRequired>
-              <FormLabel>Email address</FormLabel>
-              <Input type='email' name='email' onChange={onChange} />
-            </FormControl>
-            <FormControl id='password' isRequired>
-              <FormLabel>Password</FormLabel>
-              <InputGroup>
-                <Input
-                  type={showPassword ? 'text' : 'password'}
-                  name='password'
-                  onChange={onChange}
-                />
-                <InputRightElement h={'full'}>
-                  <Button
-                    variant={'ghost'}
-                    onClick={() =>
-                      setShowPassword((showPassword) => !showPassword)
-                    }
-                  >
-                    {showPassword ? <ViewIcon /> : <ViewOffIcon />}
-                  </Button>
-                </InputRightElement>
-              </InputGroup>
-            </FormControl>
-            <Stack pt={2}>
-              <Text align={'center'}>
-                Forgot your password?{' '}
-                <Link href='/reset-password'>Reset Password</Link>
-              </Text>
-            </Stack>
-            <Stack spacing={10} pt={2}>
-              <Button
-                loadingText='Submitting'
-                size='lg'
-                bg={'blue.400'}
-                color={'white'}
-                _hover={{
-                  bg: 'blue.500',
-                }}
-                onClick={handleSubmit}
-                disabled={loading}
-              >
-                {loading ? 'Please Wait...' : 'Login'}
-              </Button>
-            </Stack>
-
-            <Box display='flex' justifyContent='center'>
-              <GoogleLogin
-                onSuccess={({ credential: idToken }) => {
-                  dispatch(loginWithGoogle({ idToken }))
-                }}
-                onError={() => {
-                  toast({
-                    title: 'Error',
-                    description: 'Something went wrong',
-                    status: 'error',
-                  })
-                }}
-                useOneTap={!authUser}
-                width={300}
-                size='large'
-                shape='pill'
-                locale='en'
-                theme='outline'
-                text='continue_with'
-              />
-            </Box>
-            <Stack pt={6}>
-              <Text align={'center'}>
-                Don&apos;t have an account?{' '}
-                <Link href='/register'>Register</Link>
-              </Text>
-            </Stack>
-          </Stack>
-        </Box>
-      </Stack>
-    </Flex>
-  )
-}
diff --git a/web/pages/privacy-policy.tsx b/web/pages/privacy-policy.tsx
deleted file mode 100644
index 22fce7d..0000000
--- a/web/pages/privacy-policy.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import React from 'react'
-import { Container, chakra } from '@chakra-ui/react'
-export default function PrivacyPolicyPage() {
-  return (
-    <Container maxW={'7xl'}>
-      <chakra.h1>Privacy Policy</chakra.h1>
-      <chakra.h2>Effective Date: May 2022</chakra.h2>
-      <chakra.p>
-        Thank you for using our TextBee SMS Gateway Platform
-        (&quot;Platform&quot;). This Privacy Policy is intended to inform you
-        about how we collect, use, and disclose information when you use our
-        Platform. We are committed to protecting your privacy and ensuring the
-        security of your personal information. By using our Platform, you
-        consent to the practices described in this Privacy Policy.
-      </chakra.p>
-
-      <chakra.h2>1. Information We Collect</chakra.h2>
-      <chakra.h3>1.1 Personal Information:</chakra.h3>
-      <chakra.p>
-        We may collect the following types of personal information from you when
-        you use our Platform:
-      </chakra.p>
-      <chakra.ul>
-        <chakra.li>Your name</chakra.li>
-        <chakra.li>
-          Contact information (such as email address and phone number)
-        </chakra.li>
-        <chakra.li>
-          Device information (such as device ID, model, and operating system)
-        </chakra.li>
-        <chakra.li>SMS content and metadata</chakra.li>
-      </chakra.ul>
-
-      <chakra.h3>1.2 Usage Information:</chakra.h3>
-      <chakra.p>
-        We may collect non-personal information about your use of the Platform,
-        including:
-      </chakra.p>
-      <chakra.ul>
-        <chakra.li>
-          Log data (such as IP address, browser type, and access times)
-        </chakra.li>
-        <chakra.li>Usage patterns and preferences</chakra.li>
-        <chakra.li>
-          Statistical information regarding your interactions with the Platform
-        </chakra.li>
-      </chakra.ul>
-
-      <chakra.h2>2. How We Use Your Information</chakra.h2>
-      <chakra.h3>2.1 Personal Information:</chakra.h3>
-      <chakra.p>
-        We may use your personal information for the following purposes:
-      </chakra.p>
-      <chakra.ul>
-        <chakra.li>To provide and maintain the Platform</chakra.li>
-        <chakra.li>
-          To personalize your experience and improve our services
-        </chakra.li>
-        <chakra.li>
-          To communicate with you regarding updates, notifications, and support
-        </chakra.li>
-        <chakra.li>To respond to your inquiries or requests</chakra.li>
-        <chakra.li>To comply with legal obligations</chakra.li>
-      </chakra.ul>
-
-      <chakra.h3>2.2 Usage Information:</chakra.h3>
-      <chakra.p>
-        We may aggregate and anonymize usage information to analyze trends,
-        monitor the effectiveness of our Platform, and improve our services.
-      </chakra.p>
-
-      <chakra.h2>3. Information Sharing and Disclosure</chakra.h2>
-      <chakra.h3>3.1 Service Providers:</chakra.h3>
-      <chakra.p>
-        We do not share your personal information with third parties except as
-        necessary to provide the services offered by the Platform. We may engage
-        third-party service providers to assist us in delivering the Platform,
-        such as analytics providers, and customer support. These service
-        providers are authorized to use your personal information only as
-        necessary to provide the services to us.
-      </chakra.p>
-
-      <chakra.h3>3.2 Legal Requirements:</chakra.h3>
-      <chakra.p>
-        We may disclose your personal information if required to do so by law or
-        in response to a valid legal request, including to law enforcement or
-        government agencies.
-      </chakra.p>
-
-      <chakra.h3>3.3 Business Transfers:</chakra.h3>
-      <chakra.p>
-        In the event of a merger, acquisition, or sale of our Platform, your
-        personal information may be transferred as part of the transaction. We
-        will notify you via email or prominent notice on our website if such a
-        transfer occurs.
-      </chakra.p>
-
-      <chakra.h2>4. Data Security</chakra.h2>
-      <chakra.p>
-        We implement reasonable security measures to protect your personal
-        information from unauthorized access, disclosure, alteration, or
-        destruction. However, please be aware that no method of transmission
-        over the internet or electronic storage is completely secure, and we
-        cannot guarantee absolute security.
-      </chakra.p>
-
-      <chakra.h2>5. Your Choices and Rights</chakra.h2>
-      <chakra.h3>5.1 Opt-Out:</chakra.h3>
-      <chakra.p>
-        You may opt-out of receiving promotional communications from us by
-        following the instructions provided in the communication or contacting
-        us directly.
-      </chakra.p>
-
-      <chakra.h3>5.2 Access and Correction:</chakra.h3>
-      <chakra.p>
-        You have the right to access and update your personal information. If
-        you require assistance in accessing or correcting your personal
-        information, please contact us using the information provided at the end
-        of this Privacy Policy.
-      </chakra.p>
-
-      <chakra.h2>6. Children&apos;s Privacy</chakra.h2>
-      <chakra.p>
-        Our Platform is not intended for use by individuals under the age of 16.
-        We do not knowingly collect personal information from children. If we
-        become aware that we have collected personal information from a child
-        without parental consent, we will take steps to remove that information
-        from our servers.
-      </chakra.p>
-
-      <chakra.h2>7. Changes to this Privacy Policy</chakra.h2>
-      <chakra.p>
-        We may update this Privacy Policy from time to time. We will notify you
-        of any changes by posting the revised policy on our website or through
-        other reasonable means. Your continued use of the Platform after the
-        effective date of the revised Privacy Policy constitutes acceptance of
-        the updated terms.
-      </chakra.p>
-
-      <chakra.h2>8. Contact Us</chakra.h2>
-      <chakra.p>
-        If you have any questions or concerns about this Privacy Policy or our
-        data practices, please contact us at{' '}
-        <a href='mailto:textbee.dev@gmail.com' target='_blank'>
-          textbee.dev@gmail.com
-        </a>
-        .
-      </chakra.p>
-    </Container>
-  )
-}
diff --git a/web/pages/register.tsx b/web/pages/register.tsx
deleted file mode 100644
index a552c52..0000000
--- a/web/pages/register.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import {
-  Flex,
-  Box,
-  FormControl,
-  FormLabel,
-  Input,
-  InputGroup,
-  InputRightElement,
-  Stack,
-  Button,
-  Heading,
-  Text,
-  useColorModeValue,
-  useToast,
-} from '@chakra-ui/react'
-import Link from 'next/link'
-import { useState } from 'react'
-import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
-import {
-  loginWithGoogle,
-  register,
-  selectAuthUser,
-  selectAuthLoading,
-} from '../store/authSlice'
-import { useSelector } from 'react-redux'
-import { RegisterRequestPayload } from '../services/types'
-import { GoogleLogin } from '@react-oauth/google'
-import { useAppDispatch } from '../store/hooks'
-
-export default function RegisterPage() {
-  const [showPassword, setShowPassword] = useState(false)
-  const [credentials, setCredentials] = useState<RegisterRequestPayload>({
-    name: '',
-    email: '',
-    password: '',
-  })
-  const toast = useToast()
-  const dispatch = useAppDispatch()
-  const authUser = useSelector(selectAuthUser)
-  const loading = useSelector(selectAuthLoading)
-
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    if (!credentials.name || !credentials.email || !credentials.password) {
-      toast({
-        title: 'Error',
-        description: 'Please fill in all fields',
-        status: 'warning',
-      })
-    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(credentials.email)) {
-      toast({
-        title: 'Error',
-        description: 'Invalid email address',
-        status: 'warning',
-      })
-    } else if (credentials.password.length < 6) {
-      toast({
-        title: 'Error',
-        description: 'Password must be at least 6 characters',
-        status: 'warning',
-      })
-    } else {
-      dispatch(register(credentials))
-    }
-  }
-  const onChange = (e) => {
-    setCredentials({
-      ...credentials,
-      [e.target.name]: e.target.value,
-    })
-  }
-
-  return (
-    <Flex
-      minH={'90vh'}
-      align={'center'}
-      justify={'center'}
-      bg={useColorModeValue('gray.50', 'gray.800')}
-    >
-      <Stack spacing={8} mx={'auto'} maxW={'lg'} py={12} px={6}>
-        <Stack align={'center'}>
-          <Heading fontSize={'2xl'} textAlign={'center'}>
-            Register now and start using your android device as an SMS Gateway
-          </Heading>
-        </Stack>
-        <Box
-          rounded={'lg'}
-          bg={useColorModeValue('white', 'gray.700')}
-          boxShadow={'lg'}
-          p={8}
-        >
-          <Stack spacing={4}>
-            <FormControl id='name' isRequired>
-              <FormLabel>Name</FormLabel>
-              <Input type='text' name='name' onChange={onChange} />
-            </FormControl>
-            <FormControl id='email' isRequired>
-              <FormLabel>Email</FormLabel>
-              <Input type='email' name='email' onChange={onChange} />
-            </FormControl>
-            <FormControl id='password' isRequired>
-              <FormLabel>Password</FormLabel>
-              <InputGroup>
-                <Input
-                  type={showPassword ? 'text' : 'password'}
-                  name='password'
-                  onChange={onChange}
-                />
-                <InputRightElement h={'full'}>
-                  <Button
-                    variant={'ghost'}
-                    onClick={() =>
-                      setShowPassword((showPassword) => !showPassword)
-                    }
-                  >
-                    {showPassword ? <ViewIcon /> : <ViewOffIcon />}
-                  </Button>
-                </InputRightElement>
-              </InputGroup>
-            </FormControl>
-            <Stack spacing={10} pt={2}>
-              <Button
-                loadingText='Submitting'
-                size='lg'
-                bg={'blue.400'}
-                color={'white'}
-                _hover={{
-                  bg: 'blue.500',
-                }}
-                onClick={handleSubmit}
-                disabled={loading}
-              >
-                {loading ? 'Please wait...' : 'Register'}
-              </Button>
-            </Stack>
-
-            <Heading fontSize={'md'} textAlign={'center'}>
-              OR
-            </Heading>
-            <Box display='flex' justifyContent='center'>
-              <GoogleLogin
-                onSuccess={({ credential: idToken }) => {
-                  dispatch(loginWithGoogle({ idToken }))
-                }}
-                onError={() => {
-                  toast({
-                    title: 'Error',
-                    description: 'Something went wrong',
-                    status: 'error',
-                  })
-                }}
-                useOneTap={!authUser}
-                width={300}
-                size='large'
-                shape='pill'
-                locale='en'
-                theme='outline'
-                text='continue_with'
-              />
-            </Box>
-            <Stack pt={6}>
-              <Text align={'center'}>
-                Already a user? <Link href='/login'>Login</Link>
-              </Text>
-            </Stack>
-          </Stack>
-        </Box>
-      </Stack>
-    </Flex>
-  )
-}
diff --git a/web/pages/reset-password.tsx b/web/pages/reset-password.tsx
deleted file mode 100644
index f6a0156..0000000
--- a/web/pages/reset-password.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import {
-  Flex,
-  Box,
-  FormControl,
-  FormLabel,
-  Input,
-  InputGroup,
-  InputRightElement,
-  Stack,
-  Button,
-  Heading,
-  Text,
-  useColorModeValue,
-  useToast,
-} from '@chakra-ui/react'
-
-import Link from 'next/link'
-import { useState } from 'react'
-import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
-import { authService } from '../services/authService'
-
-export default function LoginPage() {
-  const [showPassword, setShowPassword] = useState<boolean>(false)
-
-  const [loading, setLoading] = useState<boolean>(false)
-  const [otpSent, setOtpSent] = useState<boolean>(false)
-  const [resetSuccess, setResetSuccess] = useState<boolean>(false)
-
-  const [formData, setFormData] = useState({
-    email: '',
-    otp: '',
-    newPassword: '',
-  })
-
-  const toast = useToast()
-
-  const handleRequestResetPassword = async (e) => {
-    setLoading(true)
-
-    authService
-      .requestPasswordReset(formData)
-      .then((res) => {
-        setOtpSent(true)
-        toast({
-          title: 'OTP sent successfully',
-          status: 'success',
-          duration: 5000,
-          isClosable: true,
-        })
-      })
-      .catch((err) => {
-        toast({
-          title: 'Error',
-          description: err.response.data.message || 'Something went wrong',
-          status: 'error',
-          duration: 5000,
-          isClosable: true,
-        })
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }
-
-  const handleResetPassword = async (e) => {
-    setLoading(true)
-
-    authService
-      .resetPassword(formData)
-      .then((res) => {
-        toast({
-          title: 'Password reset successfully',
-          status: 'success',
-        })
-        setResetSuccess(true)
-      })
-      .catch((err) => {
-        toast({
-          title: 'Error',
-          description: err.response?.data?.message || 'Something went wrong',
-          status: 'error',
-        })
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }
-  const onChange = (e) => {
-    setFormData({
-      ...formData,
-      [e.target.name]: e.target.value,
-    })
-  }
-
-  const colorModeValue = useColorModeValue('gray.50', 'gray.800')
-
-  if (resetSuccess) {
-    return (
-      <>
-        <Flex
-          minH={'90vh'}
-          align={'center'}
-          justify={'center'}
-          bg={colorModeValue}
-        >
-          <Stack pt={6}>
-            <Text align={'center'}>Password reset successfully</Text>
-            <Link href='/login'>
-              <Button variant={'ghost'}>Go back to login page</Button>
-            </Link>
-          </Stack>
-        </Flex>
-      </>
-    )
-  }
-
-  return (
-    <Flex
-      minH={'90vh'}
-      align={'center'}
-      justify={'center'}
-      bg={colorModeValue}
-    >
-      <Stack spacing={8} mx={'auto'} maxW={'lg'} py={12} px={6}>
-        <Stack align={'center'}>
-          <Heading fontSize={'2xl'} textAlign={'center'}>
-            Reset Password
-          </Heading>
-        </Stack>
-        <Box
-          rounded={'lg'}
-          bg={colorModeValue}
-          boxShadow={'lg'}
-          p={8}
-        >
-          <Stack spacing={4}>
-            <FormControl id='email' isRequired>
-              <FormLabel>Email address</FormLabel>
-              <Input type='email' name='email' onChange={onChange} />
-            </FormControl>
-            {otpSent && (
-              <>
-                <FormControl id='otp' isRequired>
-                  <FormLabel>OTP</FormLabel>
-                  <Input type='number' name='otp' onChange={onChange} />
-                </FormControl>
-                <FormControl id='newPassword' isRequired>
-                  <FormLabel>New Password</FormLabel>
-                  <InputGroup>
-                    <Input
-                      type={showPassword ? 'text' : 'password'}
-                      name='newPassword'
-                      onChange={onChange}
-                    />
-                    <InputRightElement h={'full'}>
-                      <Button
-                        variant={'ghost'}
-                        onClick={() =>
-                          setShowPassword((showPassword) => !showPassword)
-                        }
-                      >
-                        {showPassword ? <ViewIcon /> : <ViewOffIcon />}
-                      </Button>
-                    </InputRightElement>
-                  </InputGroup>
-                </FormControl>
-              </>
-            )}
-            <Stack spacing={10} pt={2}>
-              <Button
-                loadingText='Submitting'
-                size='lg'
-                bg={'blue.400'}
-                color={'white'}
-                _hover={{
-                  bg: 'blue.500',
-                }}
-                onClick={
-                  otpSent ? handleResetPassword : handleRequestResetPassword
-                }
-                disabled={loading}
-              >
-                {loading ? 'Please Wait...' : 'Continue'}
-              </Button>
-            </Stack>
-
-            <Stack pt={6}>
-              <Text align={'center'}>
-                <Link href='/login'>Go back to login</Link>
-              </Text>
-            </Stack>
-          </Stack>
-        </Box>
-      </Stack>
-    </Flex>
-  )
-}
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 68924fd..a978f41 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -8,27 +8,60 @@ importers:
 
   .:
     dependencies:
-      '@chakra-ui/icons':
-        specifier: ^2.1.1
-        version: 2.1.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/react':
-        specifier: ^2.8.2
-        version: 2.8.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@emotion/react':
-        specifier: ^11.11.3
-        version: 11.11.3(@types/react@18.2.48)(react@18.2.0)
-      '@emotion/styled':
-        specifier: ^11.11.0
-        version: 11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0)
+      '@hookform/resolvers':
+        specifier: ^3.9.1
+        version: 3.9.1(react-hook-form@7.53.1(react@18.2.0))
+      '@prisma/client':
+        specifier: ^5.22.0
+        version: 5.22.0(prisma@5.22.0)
+      '@radix-ui/react-accordion':
+        specifier: ^1.2.1
+        version: 1.2.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-avatar':
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-checkbox':
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-dropdown-menu':
+        specifier: ^2.1.2
+        version: 2.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-icons':
         specifier: ^1.3.0
         version: 1.3.0(react@18.2.0)
+      '@radix-ui/react-label':
+        specifier: ^2.1.0
+        version: 2.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-navigation-menu':
+        specifier: ^1.2.1
+        version: 1.2.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-scroll-area':
+        specifier: ^1.2.1
+        version: 1.2.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-select':
+        specifier: ^2.1.2
+        version: 2.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-slot':
+        specifier: ^1.1.0
+        version: 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-switch':
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-tabs':
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-toast':
+        specifier: ^1.2.2
+        version: 1.2.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-oauth/google':
         specifier: ^0.12.1
         version: 0.12.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@reduxjs/toolkit':
-        specifier: ^2.0.1
-        version: 2.0.1(react-redux@9.1.0(@types/react@18.2.48)(react@18.2.0)(redux@5.0.1))(react@18.2.0)
+      '@tanstack/react-query':
+        specifier: ^5.61.0
+        version: 5.61.0(react@18.2.0)
       axios:
         specifier: ^1.6.5
         version: 1.6.5
@@ -38,27 +71,33 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
-      framer-motion:
-        specifier: ^10.18.0
-        version: 10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       lucide-react:
         specifier: ^0.453.0
         version: 0.453.0(react@18.2.0)
       next:
         specifier: 14.1.0
         version: 14.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      next-auth:
+        specifier: ^4.24.10
+        version: 4.24.10(next@14.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(nodemailer@6.9.16)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      nodemailer:
+        specifier: ^6.9.16
+        version: 6.9.16
+      prisma:
+        specifier: ^5.22.0
+        version: 5.22.0
       react:
         specifier: ^18.2.0
         version: 18.2.0
       react-dom:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
+      react-hook-form:
+        specifier: ^7.53.1
+        version: 7.53.1(react@18.2.0)
       react-qr-code:
         specifier: ^2.0.12
         version: 2.0.12(react@18.2.0)
-      react-redux:
-        specifier: ^9.1.0
-        version: 9.1.0(@types/react@18.2.48)(react@18.2.0)(redux@5.0.1)
       react-syntax-highlighter:
         specifier: ^15.5.0
         version: 15.5.0(react@18.2.0)
@@ -68,6 +107,9 @@ importers:
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.14)
+      zod:
+        specifier: ^3.23.8
+        version: 3.23.8
     devDependencies:
       '@types/node':
         specifier: 20.11.5
@@ -113,573 +155,10 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
-  '@babel/code-frame@7.23.5':
-    resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-module-imports@7.22.15':
-    resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-string-parser@7.23.4':
-    resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-validator-identifier@7.22.20':
-    resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/highlight@7.23.4':
-    resolution: {integrity: sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/runtime@7.23.8':
     resolution: {integrity: sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.23.6':
-    resolution: {integrity: sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==}
-    engines: {node: '>=6.9.0'}
-
-  '@chakra-ui/accordion@2.3.1':
-    resolution: {integrity: sha512-FSXRm8iClFyU+gVaXisOSEw0/4Q+qZbFRiuhIAkVU6Boj0FxAMrlo9a8AV5TuF77rgaHytCdHk0Ng+cyUijrag==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      framer-motion: '>=4.0.0'
-      react: '>=18'
-
-  '@chakra-ui/alert@2.2.2':
-    resolution: {integrity: sha512-jHg4LYMRNOJH830ViLuicjb3F+v6iriE/2G5T+Sd0Hna04nukNJ1MxUmBPE+vI22me2dIflfelu2v9wdB6Pojw==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/anatomy@2.2.2':
-    resolution: {integrity: sha512-MV6D4VLRIHr4PkW4zMyqfrNS1mPlCTiCXwvYGtDFQYr+xHFfonhAuf9WjsSc0nyp2m0OdkSLnzmVKkZFLo25Tg==}
-
-  '@chakra-ui/avatar@2.3.0':
-    resolution: {integrity: sha512-8gKSyLfygnaotbJbDMHDiJoF38OHXUYVme4gGxZ1fLnQEdPVEaIWfH+NndIjOM0z8S+YEFnT9KyGMUtvPrBk3g==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/breadcrumb@2.2.0':
-    resolution: {integrity: sha512-4cWCG24flYBxjruRi4RJREWTGF74L/KzI2CognAW/d/zWR0CjiScuJhf37Am3LFbCySP6WSoyBOtTIoTA4yLEA==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/breakpoint-utils@2.0.8':
-    resolution: {integrity: sha512-Pq32MlEX9fwb5j5xx8s18zJMARNHlQZH2VH1RZgfgRDpp7DcEgtRW5AInfN5CfqdHLO1dGxA7I3MqEuL5JnIsA==}
-
-  '@chakra-ui/button@2.1.0':
-    resolution: {integrity: sha512-95CplwlRKmmUXkdEp/21VkEWgnwcx2TOBG6NfYlsuLBDHSLlo5FKIiE2oSi4zXc4TLcopGcWPNcm/NDaSC5pvA==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/card@2.2.0':
-    resolution: {integrity: sha512-xUB/k5MURj4CtPAhdSoXZidUbm8j3hci9vnc+eZJVDqhDOShNlD6QeniQNRPRys4lWAQLCbFcrwL29C8naDi6g==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/checkbox@2.3.2':
-    resolution: {integrity: sha512-85g38JIXMEv6M+AcyIGLh7igNtfpAN6KGQFYxY9tBj0eWvWk4NKQxvqqyVta0bSAyIl1rixNIIezNpNWk2iO4g==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/clickable@2.1.0':
-    resolution: {integrity: sha512-flRA/ClPUGPYabu+/GLREZVZr9j2uyyazCAUHAdrTUEdDYCr31SVGhgh7dgKdtq23bOvAQJpIJjw/0Bs0WvbXw==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/close-button@2.1.1':
-    resolution: {integrity: sha512-gnpENKOanKexswSVpVz7ojZEALl2x5qjLYNqSQGbxz+aP9sOXPfUS56ebyBrre7T7exuWGiFeRwnM0oVeGPaiw==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/color-mode@2.2.0':
-    resolution: {integrity: sha512-niTEA8PALtMWRI9wJ4LL0CSBDo8NBfLNp4GD6/0hstcm3IlbBHTVKxN6HwSaoNYfphDQLxCjT4yG+0BJA5tFpg==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/control-box@2.1.0':
-    resolution: {integrity: sha512-gVrRDyXFdMd8E7rulL0SKeoljkLQiPITFnsyMO8EFHNZ+AHt5wK4LIguYVEq88APqAGZGfHFWXr79RYrNiE3Mg==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/counter@2.1.0':
-    resolution: {integrity: sha512-s6hZAEcWT5zzjNz2JIWUBzRubo9la/oof1W7EKZVVfPYHERnl5e16FmBC79Yfq8p09LQ+aqFKm/etYoJMMgghw==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/css-reset@2.3.0':
-    resolution: {integrity: sha512-cQwwBy5O0jzvl0K7PLTLgp8ijqLPKyuEMiDXwYzl95seD3AoeuoCLyzZcJtVqaUZ573PiBdAbY/IlZcwDOItWg==}
-    peerDependencies:
-      '@emotion/react': '>=10.0.35'
-      react: '>=18'
-
-  '@chakra-ui/descendant@3.1.0':
-    resolution: {integrity: sha512-VxCIAir08g5w27klLyi7PVo8BxhW4tgU/lxQyujkmi4zx7hT9ZdrcQLAted/dAa+aSIZ14S1oV0Q9lGjsAdxUQ==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/dom-utils@2.1.0':
-    resolution: {integrity: sha512-ZmF2qRa1QZ0CMLU8M1zCfmw29DmPNtfjR9iTo74U5FPr3i1aoAh7fbJ4qAlZ197Xw9eAW28tvzQuoVWeL5C7fQ==}
-
-  '@chakra-ui/editable@3.1.0':
-    resolution: {integrity: sha512-j2JLrUL9wgg4YA6jLlbU88370eCRyor7DZQD9lzpY95tSOXpTljeg3uF9eOmDnCs6fxp3zDWIfkgMm/ExhcGTg==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/event-utils@2.0.8':
-    resolution: {integrity: sha512-IGM/yGUHS+8TOQrZGpAKOJl/xGBrmRYJrmbHfUE7zrG3PpQyXvbLDP1M+RggkCFVgHlJi2wpYIf0QtQlU0XZfw==}
-
-  '@chakra-ui/focus-lock@2.1.0':
-    resolution: {integrity: sha512-EmGx4PhWGjm4dpjRqM4Aa+rCWBxP+Rq8Uc/nAVnD4YVqkEhBkrPTpui2lnjsuxqNaZ24fIAZ10cF1hlpemte/w==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/form-control@2.2.0':
-    resolution: {integrity: sha512-wehLC1t4fafCVJ2RvJQT2jyqsAwX7KymmiGqBu7nQoQz8ApTkGABWpo/QwDh3F/dBLrouHDoOvGmYTqft3Mirw==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/hooks@2.2.1':
-    resolution: {integrity: sha512-RQbTnzl6b1tBjbDPf9zGRo9rf/pQMholsOudTxjy4i9GfTfz6kgp5ValGjQm2z7ng6Z31N1cnjZ1AlSzQ//ZfQ==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/icon@3.2.0':
-    resolution: {integrity: sha512-xxjGLvlX2Ys4H0iHrI16t74rG9EBcpFvJ3Y3B7KMQTrnW34Kf7Da/UC8J67Gtx85mTHW020ml85SVPKORWNNKQ==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/icons@2.1.1':
-    resolution: {integrity: sha512-3p30hdo4LlRZTT5CwoAJq3G9fHI0wDc0pBaMHj4SUn0yomO+RcDRlzhdXqdr5cVnzax44sqXJVnf3oQG0eI+4g==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/image@2.1.0':
-    resolution: {integrity: sha512-bskumBYKLiLMySIWDGcz0+D9Th0jPvmX6xnRMs4o92tT3Od/bW26lahmV2a2Op2ItXeCmRMY+XxJH5Gy1i46VA==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/input@2.1.2':
-    resolution: {integrity: sha512-GiBbb3EqAA8Ph43yGa6Mc+kUPjh4Spmxp1Pkelr8qtudpc3p2PJOOebLpd90mcqw8UePPa+l6YhhPtp6o0irhw==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/layout@2.3.1':
-    resolution: {integrity: sha512-nXuZ6WRbq0WdgnRgLw+QuxWAHuhDtVX8ElWqcTK+cSMFg/52eVP47czYBE5F35YhnoW2XBwfNoNgZ7+e8Z01Rg==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/lazy-utils@2.0.5':
-    resolution: {integrity: sha512-UULqw7FBvcckQk2n3iPO56TMJvDsNv0FKZI6PlUNJVaGsPbsYxK/8IQ60vZgaTVPtVcjY6BE+y6zg8u9HOqpyg==}
-
-  '@chakra-ui/live-region@2.1.0':
-    resolution: {integrity: sha512-ZOxFXwtaLIsXjqnszYYrVuswBhnIHHP+XIgK1vC6DePKtyK590Wg+0J0slDwThUAd4MSSIUa/nNX84x1GMphWw==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/media-query@3.3.0':
-    resolution: {integrity: sha512-IsTGgFLoICVoPRp9ykOgqmdMotJG0CnPsKvGQeSFOB/dZfIujdVb14TYxDU4+MURXry1MhJ7LzZhv+Ml7cr8/g==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/menu@2.2.1':
-    resolution: {integrity: sha512-lJS7XEObzJxsOwWQh7yfG4H8FzFPRP5hVPN/CL+JzytEINCSBvsCDHrYPQGp7jzpCi8vnTqQQGQe0f8dwnXd2g==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      framer-motion: '>=4.0.0'
-      react: '>=18'
-
-  '@chakra-ui/modal@2.3.1':
-    resolution: {integrity: sha512-TQv1ZaiJMZN+rR9DK0snx/OPwmtaGH1HbZtlYt4W4s6CzyK541fxLRTjIXfEzIGpvNW+b6VFuFjbcR78p4DEoQ==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      framer-motion: '>=4.0.0'
-      react: '>=18'
-      react-dom: '>=18'
-
-  '@chakra-ui/number-input@2.1.2':
-    resolution: {integrity: sha512-pfOdX02sqUN0qC2ysuvgVDiws7xZ20XDIlcNhva55Jgm095xjm8eVdIBfNm3SFbSUNxyXvLTW/YQanX74tKmuA==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/number-utils@2.0.7':
-    resolution: {integrity: sha512-yOGxBjXNvLTBvQyhMDqGU0Oj26s91mbAlqKHiuw737AXHt0aPllOthVUqQMeaYLwLCjGMg0jtI7JReRzyi94Dg==}
-
-  '@chakra-ui/object-utils@2.1.0':
-    resolution: {integrity: sha512-tgIZOgLHaoti5PYGPTwK3t/cqtcycW0owaiOXoZOcpwwX/vlVb+H1jFsQyWiiwQVPt9RkoSLtxzXamx+aHH+bQ==}
-
-  '@chakra-ui/pin-input@2.1.0':
-    resolution: {integrity: sha512-x4vBqLStDxJFMt+jdAHHS8jbh294O53CPQJoL4g228P513rHylV/uPscYUHrVJXRxsHfRztQO9k45jjTYaPRMw==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/popover@2.2.1':
-    resolution: {integrity: sha512-K+2ai2dD0ljvJnlrzesCDT9mNzLifE3noGKZ3QwLqd/K34Ym1W/0aL1ERSynrcG78NKoXS54SdEzkhCZ4Gn/Zg==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      framer-motion: '>=4.0.0'
-      react: '>=18'
-
-  '@chakra-ui/popper@3.1.0':
-    resolution: {integrity: sha512-ciDdpdYbeFG7og6/6J8lkTFxsSvwTdMLFkpVylAF6VNC22jssiWfquj2eyD4rJnzkRFPvIWJq8hvbfhsm+AjSg==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/portal@2.1.0':
-    resolution: {integrity: sha512-9q9KWf6SArEcIq1gGofNcFPSWEyl+MfJjEUg/un1SMlQjaROOh3zYr+6JAwvcORiX7tyHosnmWC3d3wI2aPSQg==}
-    peerDependencies:
-      react: '>=18'
-      react-dom: '>=18'
-
-  '@chakra-ui/progress@2.2.0':
-    resolution: {integrity: sha512-qUXuKbuhN60EzDD9mHR7B67D7p/ZqNS2Aze4Pbl1qGGZfulPW0PY8Rof32qDtttDQBkzQIzFGE8d9QpAemToIQ==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/provider@2.4.2':
-    resolution: {integrity: sha512-w0Tef5ZCJK1mlJorcSjItCSbyvVuqpvyWdxZiVQmE6fvSJR83wZof42ux0+sfWD+I7rHSfj+f9nzhNaEWClysw==}
-    peerDependencies:
-      '@emotion/react': ^11.0.0
-      '@emotion/styled': ^11.0.0
-      react: '>=18'
-      react-dom: '>=18'
-
-  '@chakra-ui/radio@2.1.2':
-    resolution: {integrity: sha512-n10M46wJrMGbonaghvSRnZ9ToTv/q76Szz284gv4QUWvyljQACcGrXIONUnQ3BIwbOfkRqSk7Xl/JgZtVfll+w==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/react-children-utils@2.0.6':
-    resolution: {integrity: sha512-QVR2RC7QsOsbWwEnq9YduhpqSFnZGvjjGREV8ygKi8ADhXh93C8azLECCUVgRJF2Wc+So1fgxmjLcbZfY2VmBA==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react-context@2.1.0':
-    resolution: {integrity: sha512-iahyStvzQ4AOwKwdPReLGfDesGG+vWJfEsn0X/NoGph/SkN+HXtv2sCfYFFR9k7bb+Kvc6YfpLlSuLvKMHi2+w==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react-env@3.1.0':
-    resolution: {integrity: sha512-Vr96GV2LNBth3+IKzr/rq1IcnkXv+MLmwjQH6C8BRtn3sNskgDFD5vLkVXcEhagzZMCh8FR3V/bzZPojBOyNhw==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react-types@2.0.7':
-    resolution: {integrity: sha512-12zv2qIZ8EHwiytggtGvo4iLT0APris7T0qaAWqzpUGS0cdUtR8W+V1BJ5Ocq+7tA6dzQ/7+w5hmXih61TuhWQ==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react-use-animation-state@2.1.0':
-    resolution: {integrity: sha512-CFZkQU3gmDBwhqy0vC1ryf90BVHxVN8cTLpSyCpdmExUEtSEInSCGMydj2fvn7QXsz/za8JNdO2xxgJwxpLMtg==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react-use-callback-ref@2.1.0':
-    resolution: {integrity: sha512-efnJrBtGDa4YaxDzDE90EnKD3Vkh5a1t3w7PhnRQmsphLy3g2UieasoKTlT2Hn118TwDjIv5ZjHJW6HbzXA9wQ==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react-use-controllable-state@2.1.0':
-    resolution: {integrity: sha512-QR/8fKNokxZUs4PfxjXuwl0fj/d71WPrmLJvEpCTkHjnzu7LnYvzoe2wB867IdooQJL0G1zBxl0Dq+6W1P3jpg==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react-use-disclosure@2.1.0':
-    resolution: {integrity: sha512-Ax4pmxA9LBGMyEZJhhUZobg9C0t3qFE4jVF1tGBsrLDcdBeLR9fwOogIPY9Hf0/wqSlAryAimICbr5hkpa5GSw==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react-use-event-listener@2.1.0':
-    resolution: {integrity: sha512-U5greryDLS8ISP69DKDsYcsXRtAdnTQT+jjIlRYZ49K/XhUR/AqVZCK5BkR1spTDmO9H8SPhgeNKI70ODuDU/Q==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react-use-focus-effect@2.1.0':
-    resolution: {integrity: sha512-xzVboNy7J64xveLcxTIJ3jv+lUJKDwRM7Szwn9tNzUIPD94O3qwjV7DDCUzN2490nSYDF4OBMt/wuDBtaR3kUQ==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react-use-focus-on-pointer-down@2.1.0':
-    resolution: {integrity: sha512-2jzrUZ+aiCG/cfanrolsnSMDykCAbv9EK/4iUyZno6BYb3vziucmvgKuoXbMPAzWNtwUwtuMhkby8rc61Ue+Lg==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react-use-interval@2.1.0':
-    resolution: {integrity: sha512-8iWj+I/+A0J08pgEXP1J1flcvhLBHkk0ln7ZvGIyXiEyM6XagOTJpwNhiu+Bmk59t3HoV/VyvyJTa+44sEApuw==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react-use-latest-ref@2.1.0':
-    resolution: {integrity: sha512-m0kxuIYqoYB0va9Z2aW4xP/5b7BzlDeWwyXCH6QpT2PpW3/281L3hLCm1G0eOUcdVlayqrQqOeD6Mglq+5/xoQ==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react-use-merge-refs@2.1.0':
-    resolution: {integrity: sha512-lERa6AWF1cjEtWSGjxWTaSMvneccnAVH4V4ozh8SYiN9fSPZLlSG3kNxfNzdFvMEhM7dnP60vynF7WjGdTgQbQ==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react-use-outside-click@2.2.0':
-    resolution: {integrity: sha512-PNX+s/JEaMneijbgAM4iFL+f3m1ga9+6QK0E5Yh4s8KZJQ/bLwZzdhMz8J/+mL+XEXQ5J0N8ivZN28B82N1kNw==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react-use-pan-event@2.1.0':
-    resolution: {integrity: sha512-xmL2qOHiXqfcj0q7ZK5s9UjTh4Gz0/gL9jcWPA6GVf+A0Od5imEDa/Vz+533yQKWiNSm1QGrIj0eJAokc7O4fg==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react-use-previous@2.1.0':
-    resolution: {integrity: sha512-pjxGwue1hX8AFcmjZ2XfrQtIJgqbTF3Qs1Dy3d1krC77dEsiCUbQ9GzOBfDc8pfd60DrB5N2tg5JyHbypqh0Sg==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react-use-safe-layout-effect@2.1.0':
-    resolution: {integrity: sha512-Knbrrx/bcPwVS1TorFdzrK/zWA8yuU/eaXDkNj24IrKoRlQrSBFarcgAEzlCHtzuhufP3OULPkELTzz91b0tCw==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react-use-size@2.1.0':
-    resolution: {integrity: sha512-tbLqrQhbnqOjzTaMlYytp7wY8BW1JpL78iG7Ru1DlV4EWGiAmXFGvtnEt9HftU0NJ0aJyjgymkxfVGI55/1Z4A==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react-use-timeout@2.1.0':
-    resolution: {integrity: sha512-cFN0sobKMM9hXUhyCofx3/Mjlzah6ADaEl/AXl5Y+GawB5rgedgAcu2ErAgarEkwvsKdP6c68CKjQ9dmTQlJxQ==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react-use-update-effect@2.1.0':
-    resolution: {integrity: sha512-ND4Q23tETaR2Qd3zwCKYOOS1dfssojPLJMLvUtUbW5M9uW1ejYWgGUobeAiOVfSplownG8QYMmHTP86p/v0lbA==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react-utils@2.0.12':
-    resolution: {integrity: sha512-GbSfVb283+YA3kA8w8xWmzbjNWk14uhNpntnipHCftBibl0lxtQ9YqMFQLwuFOO0U2gYVocszqqDWX+XNKq9hw==}
-    peerDependencies:
-      react: '>=18'
-
-  '@chakra-ui/react@2.8.2':
-    resolution: {integrity: sha512-Hn0moyxxyCDKuR9ywYpqgX8dvjqwu9ArwpIb9wHNYjnODETjLwazgNIliCVBRcJvysGRiV51U2/JtJVrpeCjUQ==}
-    peerDependencies:
-      '@emotion/react': ^11.0.0
-      '@emotion/styled': ^11.0.0
-      framer-motion: '>=4.0.0'
-      react: '>=18'
-      react-dom: '>=18'
-
-  '@chakra-ui/select@2.1.2':
-    resolution: {integrity: sha512-ZwCb7LqKCVLJhru3DXvKXpZ7Pbu1TDZ7N0PdQ0Zj1oyVLJyrpef1u9HR5u0amOpqcH++Ugt0f5JSmirjNlctjA==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/shared-utils@2.0.5':
-    resolution: {integrity: sha512-4/Wur0FqDov7Y0nCXl7HbHzCg4aq86h+SXdoUeuCMD3dSj7dpsVnStLYhng1vxvlbUnLpdF4oz5Myt3i/a7N3Q==}
-
-  '@chakra-ui/skeleton@2.1.0':
-    resolution: {integrity: sha512-JNRuMPpdZGd6zFVKjVQ0iusu3tXAdI29n4ZENYwAJEMf/fN0l12sVeirOxkJ7oEL0yOx2AgEYFSKdbcAgfUsAQ==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/skip-nav@2.1.0':
-    resolution: {integrity: sha512-Hk+FG+vadBSH0/7hwp9LJnLjkO0RPGnx7gBJWI4/SpoJf3e4tZlWYtwGj0toYY4aGKl93jVghuwGbDBEMoHDug==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/slider@2.1.0':
-    resolution: {integrity: sha512-lUOBcLMCnFZiA/s2NONXhELJh6sY5WtbRykPtclGfynqqOo47lwWJx+VP7xaeuhDOPcWSSecWc9Y1BfPOCz9cQ==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/spinner@2.1.0':
-    resolution: {integrity: sha512-hczbnoXt+MMv/d3gE+hjQhmkzLiKuoTo42YhUG7Bs9OSv2lg1fZHW1fGNRFP3wTi6OIbD044U1P9HK+AOgFH3g==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/stat@2.1.1':
-    resolution: {integrity: sha512-LDn0d/LXQNbAn2KaR3F1zivsZCewY4Jsy1qShmfBMKwn6rI8yVlbvu6SiA3OpHS0FhxbsZxQI6HefEoIgtqY6Q==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/stepper@2.3.1':
-    resolution: {integrity: sha512-ky77lZbW60zYkSXhYz7kbItUpAQfEdycT0Q4bkHLxfqbuiGMf8OmgZOQkOB9uM4v0zPwy2HXhe0vq4Dd0xa55Q==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/styled-system@2.9.2':
-    resolution: {integrity: sha512-To/Z92oHpIE+4nk11uVMWqo2GGRS86coeMmjxtpnErmWRdLcp1WVCVRAvn+ZwpLiNR+reWFr2FFqJRsREuZdAg==}
-
-  '@chakra-ui/switch@2.1.2':
-    resolution: {integrity: sha512-pgmi/CC+E1v31FcnQhsSGjJnOE2OcND4cKPyTE+0F+bmGm48Q/b5UmKD9Y+CmZsrt/7V3h8KNczowupfuBfIHA==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      framer-motion: '>=4.0.0'
-      react: '>=18'
-
-  '@chakra-ui/system@2.6.2':
-    resolution: {integrity: sha512-EGtpoEjLrUu4W1fHD+a62XR+hzC5YfsWm+6lO0Kybcga3yYEij9beegO0jZgug27V+Rf7vns95VPVP6mFd/DEQ==}
-    peerDependencies:
-      '@emotion/react': ^11.0.0
-      '@emotion/styled': ^11.0.0
-      react: '>=18'
-
-  '@chakra-ui/table@2.1.0':
-    resolution: {integrity: sha512-o5OrjoHCh5uCLdiUb0Oc0vq9rIAeHSIRScc2ExTC9Qg/uVZl2ygLrjToCaKfaaKl1oQexIeAcZDKvPG8tVkHyQ==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/tabs@3.0.0':
-    resolution: {integrity: sha512-6Mlclp8L9lqXmsGWF5q5gmemZXOiOYuh0SGT/7PgJVNPz3LXREXlXg2an4MBUD8W5oTkduCX+3KTMCwRrVrDYw==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/tag@3.1.1':
-    resolution: {integrity: sha512-Bdel79Dv86Hnge2PKOU+t8H28nm/7Y3cKd4Kfk9k3lOpUh4+nkSGe58dhRzht59lEqa4N9waCgQiBdkydjvBXQ==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/textarea@2.1.2':
-    resolution: {integrity: sha512-ip7tvklVCZUb2fOHDb23qPy/Fr2mzDOGdkrpbNi50hDCiV4hFX02jdQJdi3ydHZUyVgZVBKPOJ+lT9i7sKA2wA==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@chakra-ui/theme-tools@2.1.2':
-    resolution: {integrity: sha512-Qdj8ajF9kxY4gLrq7gA+Azp8CtFHGO9tWMN2wfF9aQNgG9AuMhPrUzMq9AMQ0MXiYcgNq/FD3eegB43nHVmXVA==}
-    peerDependencies:
-      '@chakra-ui/styled-system': '>=2.0.0'
-
-  '@chakra-ui/theme-utils@2.0.21':
-    resolution: {integrity: sha512-FjH5LJbT794r0+VSCXB3lT4aubI24bLLRWB+CuRKHijRvsOg717bRdUN/N1fEmEpFnRVrbewttWh/OQs0EWpWw==}
-
-  '@chakra-ui/theme@3.3.1':
-    resolution: {integrity: sha512-Hft/VaT8GYnItGCBbgWd75ICrIrIFrR7lVOhV/dQnqtfGqsVDlrztbSErvMkoPKt0UgAkd9/o44jmZ6X4U2nZQ==}
-    peerDependencies:
-      '@chakra-ui/styled-system': '>=2.8.0'
-
-  '@chakra-ui/toast@7.0.2':
-    resolution: {integrity: sha512-yvRP8jFKRs/YnkuE41BVTq9nB2v/KDRmje9u6dgDmE5+1bFt3bwjdf9gVbif4u5Ve7F7BGk5E093ARRVtvLvXA==}
-    peerDependencies:
-      '@chakra-ui/system': 2.6.2
-      framer-motion: '>=4.0.0'
-      react: '>=18'
-      react-dom: '>=18'
-
-  '@chakra-ui/tooltip@2.3.1':
-    resolution: {integrity: sha512-Rh39GBn/bL4kZpuEMPPRwYNnccRCL+w9OqamWHIB3Qboxs6h8cOyXfIdGxjo72lvhu1QI/a4KFqkM3St+WfC0A==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      framer-motion: '>=4.0.0'
-      react: '>=18'
-      react-dom: '>=18'
-
-  '@chakra-ui/transition@2.1.0':
-    resolution: {integrity: sha512-orkT6T/Dt+/+kVwJNy7zwJ+U2xAZ3EU7M3XCs45RBvUnZDr/u9vdmaM/3D/rOpmQJWgQBwKPJleUXrYWUagEDQ==}
-    peerDependencies:
-      framer-motion: '>=4.0.0'
-      react: '>=18'
-
-  '@chakra-ui/utils@2.0.15':
-    resolution: {integrity: sha512-El4+jL0WSaYYs+rJbuYFDbjmfCcfGDmRY95GO4xwzit6YAPZBLcR65rOEwLps+XWluZTy1xdMrusg/hW0c1aAA==}
-
-  '@chakra-ui/visually-hidden@2.2.0':
-    resolution: {integrity: sha512-KmKDg01SrQ7VbTD3+cPWf/UfpF5MSwm3v7MWi0n5t8HnnadT13MF0MJCDSXbBWnzLv1ZKJ6zlyAOeARWX+DpjQ==}
-    peerDependencies:
-      '@chakra-ui/system': '>=2.0.0'
-      react: '>=18'
-
-  '@emotion/babel-plugin@11.11.0':
-    resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
-
-  '@emotion/cache@11.11.0':
-    resolution: {integrity: sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==}
-
-  '@emotion/hash@0.9.1':
-    resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}
-
-  '@emotion/is-prop-valid@0.8.8':
-    resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
-
-  '@emotion/is-prop-valid@1.2.1':
-    resolution: {integrity: sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==}
-
-  '@emotion/memoize@0.7.4':
-    resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
-
-  '@emotion/memoize@0.8.1':
-    resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
-
-  '@emotion/react@11.11.3':
-    resolution: {integrity: sha512-Cnn0kuq4DoONOMcnoVsTOR8E+AdnKFf//6kUWc4LCdnxj31pZWn7rIULd6Y7/Js1PiPHzn7SKCM9vB/jBni8eA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: '>=16.8.0'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@emotion/serialize@1.1.3':
-    resolution: {integrity: sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA==}
-
-  '@emotion/sheet@1.2.2':
-    resolution: {integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==}
-
-  '@emotion/styled@11.11.0':
-    resolution: {integrity: sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==}
-    peerDependencies:
-      '@emotion/react': ^11.0.0-rc.0
-      '@types/react': '*'
-      react: '>=16.8.0'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@emotion/unitless@0.8.1':
-    resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
-
-  '@emotion/use-insertion-effect-with-fallbacks@1.0.1':
-    resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==}
-    peerDependencies:
-      react: '>=16.8.0'
-
-  '@emotion/utils@1.2.1':
-    resolution: {integrity: sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==}
-
-  '@emotion/weak-memoize@0.3.1':
-    resolution: {integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==}
-
   '@eslint-community/eslint-utils@4.4.0':
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -698,6 +177,26 @@ packages:
     resolution: {integrity: sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  '@floating-ui/core@1.6.8':
+    resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==}
+
+  '@floating-ui/dom@1.6.12':
+    resolution: {integrity: sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==}
+
+  '@floating-ui/react-dom@2.1.2':
+    resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.8':
+    resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
+
+  '@hookform/resolvers@3.9.1':
+    resolution: {integrity: sha512-ud2HqmGBM0P0IABqoskKWI6PEf6ZDDBZkFqe2Vnl+mTHCEHzr3ISjjZyCwTjC/qpL25JC9aIDkloQejvMeq0ug==}
+    peerDependencies:
+      react-hook-form: ^7.0.0
+
   '@humanwhocodes/config-array@0.11.14':
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
@@ -803,61 +302,520 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
+  '@panva/hkdf@1.2.1':
+    resolution: {integrity: sha512-6oclG6Y3PiDFcoyk8srjLfVKyMfVCKJ27JwNPViuXziFpmdz+MZnZN/aKY0JGXgYuO/VghU0jcOAZgWXZ1Dmrw==}
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
-  '@popperjs/core@2.11.8':
-    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
-
-  '@radix-ui/react-icons@1.3.0':
-    resolution: {integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==}
-    peerDependencies:
-      react: ^16.x || ^17.x || ^18.x
-
-  '@react-oauth/google@0.12.1':
-    resolution: {integrity: sha512-qagsy22t+7UdkYAiT5ZhfM4StXi9PPNvw0zuwNmabrWyMKddczMtBIOARflbaIj+wHiQjnMAsZmzsUYuXeyoSg==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-
-  '@reduxjs/toolkit@2.0.1':
-    resolution: {integrity: sha512-fxIjrR9934cmS8YXIGd9e7s1XRsEU++aFc9DVNMFMRTM5Vtsg2DCRMj21eslGtDt43IUf9bJL3h5bwUlZleibA==}
+  '@prisma/client@5.22.0':
+    resolution: {integrity: sha512-M0SVXfyHnQREBKxCgyo7sffrKttwE6R8PMq330MIUF0pTwjUhLbW84pFDlf06B27XyCR++VtjugEnIHdr07SVA==}
+    engines: {node: '>=16.13'}
     peerDependencies:
-      react: ^16.9.0 || ^17.0.0 || ^18
-      react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
+      prisma: '*'
     peerDependenciesMeta:
-      react:
-        optional: true
-      react-redux:
+      prisma:
         optional: true
 
-  '@rushstack/eslint-patch@1.7.0':
-    resolution: {integrity: sha512-Jh4t/593gxs0lJZ/z3NnasKlplXT2f+4y/LZYuaKZW5KAaiVFL/fThhs+17EbUd53jUVJ0QudYCBGbN/psvaqg==}
+  '@prisma/debug@5.22.0':
+    resolution: {integrity: sha512-AUt44v3YJeggO2ZU5BkXI7M4hu9BF2zzH2iF2V5pyXT/lRTyWiElZ7It+bRH1EshoMRxHgpYg4VB6rCM+mG5jQ==}
 
-  '@swc/helpers@0.5.2':
-    resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==}
+  '@prisma/engines-version@5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2':
+    resolution: {integrity: sha512-2PTmxFR2yHW/eB3uqWtcgRcgAbG1rwG9ZriSvQw+nnb7c4uCr3RAcGMb6/zfE88SKlC1Nj2ziUvc96Z379mHgQ==}
 
-  '@types/hast@2.3.10':
-    resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==}
+  '@prisma/engines@5.22.0':
+    resolution: {integrity: sha512-UNjfslWhAt06kVL3CjkuYpHAWSO6L4kDCVPegV6itt7nD1kSJavd3vhgAEhjglLJJKEdJ7oIqDJ+yHk6qO8gPA==}
 
-  '@types/json-schema@7.0.15':
-    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+  '@prisma/fetch-engine@5.22.0':
+    resolution: {integrity: sha512-bkrD/Mc2fSvkQBV5EpoFcZ87AvOgDxbG99488a5cexp5Ccny+UM6MAe/UFkUC0wLYD9+9befNOqGiIJhhq+HbA==}
 
-  '@types/json5@0.0.29':
-    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+  '@prisma/get-platform@5.22.0':
+    resolution: {integrity: sha512-pHhpQdr1UPFpt+zFfnPazhulaZYCUqeIcPpJViYoq9R+D/yw4fjE+CtnsnKzPYm0ddUbeXUzjGVGIRVgPDCk4Q==}
 
-  '@types/lodash.mergewith@4.6.7':
-    resolution: {integrity: sha512-3m+lkO5CLRRYU0fhGRp7zbsGi6+BZj0uTVSwvcKU+nSlhjA9/QRNfuSGnD2mX6hQA7ZbmcCkzk5h4ZYGOtk14A==}
+  '@radix-ui/number@1.1.0':
+    resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==}
 
-  '@types/lodash@4.14.202':
-    resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==}
+  '@radix-ui/primitive@1.1.0':
+    resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==}
 
-  '@types/node@20.11.5':
-    resolution: {integrity: sha512-g557vgQjUUfN76MZAN/dt1z3dzcUsimuysco0KeluHgrPdJXkP/XdAURgyO2W9fZWHRtRBiVKzKn8vyOAwlG+w==}
+  '@radix-ui/react-accordion@1.2.1':
+    resolution: {integrity: sha512-bg/l7l5QzUjgsh8kjwDFommzAshnUsuVMV5NM56QVCm+7ZckYdd9P/ExR8xG/Oup0OajVxNLaHJ1tb8mXk+nzQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
 
-  '@types/parse-json@4.0.2':
-    resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
+  '@radix-ui/react-arrow@1.1.0':
+    resolution: {integrity: sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-avatar@1.1.1':
+    resolution: {integrity: sha512-eoOtThOmxeoizxpX6RiEsQZ2wj5r4+zoeqAwO0cBaFQGjJwIH3dIX0OCxNrCyrrdxG+vBweMETh3VziQG7c1kw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-checkbox@1.1.2':
+    resolution: {integrity: sha512-/i0fl686zaJbDQLNKrkCbMyDm6FQMt4jg323k7HuqitoANm9sE23Ql8yOK3Wusk34HSLKDChhMux05FnP6KUkw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collapsible@1.1.1':
+    resolution: {integrity: sha512-1///SnrfQHJEofLokyczERxQbWfCGQlQ2XsCZMucVs6it+lq9iw4vXy+uDn1edlb58cOZOWSldnfPAYcT4O/Yg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.1.0':
+    resolution: {integrity: sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-compose-refs@1.1.0':
+    resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context@1.1.0':
+    resolution: {integrity: sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context@1.1.1':
+    resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dialog@1.1.2':
+    resolution: {integrity: sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-direction@1.1.0':
+    resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.1':
+    resolution: {integrity: sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-dropdown-menu@2.1.2':
+    resolution: {integrity: sha512-GVZMR+eqK8/Kes0a36Qrv+i20bAPXSn8rCBTHx30w+3ECnR5o3xixAlqcVaYvLeyKUsm0aqyhWfmUcqufM8nYA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.1':
+    resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.0':
+    resolution: {integrity: sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-icons@1.3.0':
+    resolution: {integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==}
+    peerDependencies:
+      react: ^16.x || ^17.x || ^18.x
+
+  '@radix-ui/react-id@1.1.0':
+    resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-label@2.1.0':
+    resolution: {integrity: sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-menu@2.1.2':
+    resolution: {integrity: sha512-lZ0R4qR2Al6fZ4yCCZzu/ReTFrylHFxIqy7OezIpWF4bL0o9biKo0pFIvkaew3TyZ9Fy5gYVrR5zCGZBVbO1zg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-navigation-menu@1.2.1':
+    resolution: {integrity: sha512-egDo0yJD2IK8L17gC82vptkvW1jLeni1VuqCyzY727dSJdk5cDjINomouLoNk8RVF7g2aNIfENKWL4UzeU9c8Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popper@1.2.0':
+    resolution: {integrity: sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.2':
+    resolution: {integrity: sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.1':
+    resolution: {integrity: sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.0.0':
+    resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-roving-focus@1.1.0':
+    resolution: {integrity: sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-scroll-area@1.2.1':
+    resolution: {integrity: sha512-FnM1fHfCtEZ1JkyfH/1oMiTcFBQvHKl4vD9WnpwkLgtF+UmnXMCad6ECPTaAjcDjam+ndOEJWgHyKDGNteWSHw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-select@2.1.2':
+    resolution: {integrity: sha512-rZJtWmorC7dFRi0owDmoijm6nSJH1tVw64QGiNIZ9PNLyBDtG+iAq+XGsya052At4BfarzY/Dhv9wrrUr6IMZA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.1.0':
+    resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-switch@1.1.1':
+    resolution: {integrity: sha512-diPqDDoBcZPSicYoMWdWx+bCPuTRH4QSp9J+65IvtdS0Kuzt67bI6n32vCj8q6NZmYW/ah+2orOtMwcX5eQwIg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tabs@1.1.1':
+    resolution: {integrity: sha512-3GBUDmP2DvzmtYLMsHmpA1GtR46ZDZ+OreXM/N+kkQJOPIgytFWWTfDQmBQKBvaFS0Vno0FktdbVzN28KGrMdw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toast@1.2.2':
+    resolution: {integrity: sha512-Z6pqSzmAP/bFJoqMAston4eSNa+ud44NSZTiZUmUen+IOZ5nBY8kzuU5WDBVyFXPtcW6yUalOHsxM/BP6Sv8ww==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.0':
+    resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.1.0':
+    resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.0':
+    resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.0':
+    resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-previous@1.1.0':
+    resolution: {integrity: sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.0':
+    resolution: {integrity: sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.0':
+    resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-visually-hidden@1.1.0':
+    resolution: {integrity: sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/rect@1.1.0':
+    resolution: {integrity: sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==}
+
+  '@react-oauth/google@0.12.1':
+    resolution: {integrity: sha512-qagsy22t+7UdkYAiT5ZhfM4StXi9PPNvw0zuwNmabrWyMKddczMtBIOARflbaIj+wHiQjnMAsZmzsUYuXeyoSg==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@rushstack/eslint-patch@1.7.0':
+    resolution: {integrity: sha512-Jh4t/593gxs0lJZ/z3NnasKlplXT2f+4y/LZYuaKZW5KAaiVFL/fThhs+17EbUd53jUVJ0QudYCBGbN/psvaqg==}
+
+  '@swc/helpers@0.5.2':
+    resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==}
+
+  '@tanstack/query-core@5.60.6':
+    resolution: {integrity: sha512-tI+k0KyCo1EBJ54vxK1kY24LWj673ujTydCZmzEZKAew4NqZzTaVQJEuaG1qKj2M03kUHN46rchLRd+TxVq/zQ==}
+
+  '@tanstack/react-query@5.61.0':
+    resolution: {integrity: sha512-SBzV27XAeCRBOQ8QcC94w2H1Md0+LI0gTWwc3qRJoaGuewKn5FNW4LSqwPFJZVEItfhMfGT7RpZuSFXjTi12pQ==}
+    peerDependencies:
+      react: ^18 || ^19
+
+  '@types/hast@2.3.10':
+    resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==}
+
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
+  '@types/json5@0.0.29':
+    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+
+  '@types/node@20.11.5':
+    resolution: {integrity: sha512-g557vgQjUUfN76MZAN/dt1z3dzcUsimuysco0KeluHgrPdJXkP/XdAURgyO2W9fZWHRtRBiVKzKn8vyOAwlG+w==}
 
   '@types/prop-types@15.7.11':
     resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
@@ -877,9 +835,6 @@ packages:
   '@types/unist@2.0.10':
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
 
-  '@types/use-sync-external-store@0.0.3':
-    resolution: {integrity: sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==}
-
   '@typescript-eslint/eslint-plugin@6.19.0':
     resolution: {integrity: sha512-DUCUkQNklCQYnrBSSikjVChdc84/vMPDQSgJTHBZ64G9bA9w0Crc0rd2diujKbTdp6w2J47qkeHQLoi0rpLCdg==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -941,15 +896,6 @@ packages:
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
-  '@zag-js/dom-query@0.16.0':
-    resolution: {integrity: sha512-Oqhd6+biWyKnhKwFFuZrrf6lxBz2tX2pRQe6grUnYwO6HJ8BcbqZomy2lpOdr+3itlaUqx+Ywj5E5ZZDr/LBfQ==}
-
-  '@zag-js/element-size@0.10.5':
-    resolution: {integrity: sha512-uQre5IidULANvVkNOBQ1tfgwTQcGl4hliPSe69Fct1VfYb2Fd0jdAcGzqQgPhfrXFpR62MxLPB7erxJ/ngtL8w==}
-
-  '@zag-js/focus-visible@0.16.0':
-    resolution: {integrity: sha512-a7U/HSopvQbrDU4GLerpqiMcHKEkQkNPeDZJWz38cw/6Upunh41GjHetq5TB84hxyCaDzJ6q2nEdNoBQfC0FKA==}
-
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -971,10 +917,6 @@ packages:
     resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
     engines: {node: '>=12'}
 
-  ansi-styles@3.2.1:
-    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
-    engines: {node: '>=4'}
-
   ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
@@ -1063,10 +1005,6 @@ packages:
   axobject-query@3.2.1:
     resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
 
-  babel-plugin-macros@3.1.0:
-    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
-    engines: {node: '>=10', npm: '>=6'}
-
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -1110,10 +1048,6 @@ packages:
   caniuse-lite@1.0.30001671:
     resolution: {integrity: sha512-jocyVaSSfXg2faluE6hrWkMgDOiULBMca4QLtDT39hw1YxaIPHWc1CcTCKkPmHgGH6tKji6ZNbMSmUAvENf2/A==}
 
-  chalk@2.4.2:
-    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
-    engines: {node: '>=4'}
-
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -1145,22 +1079,13 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
-  color-convert@1.9.3:
-    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
-
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
 
-  color-name@1.1.3:
-    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
-
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
-  color2k@2.0.3:
-    resolution: {integrity: sha512-zW190nQTIoXcGCaU08DvVNFTmQhUpnJfVuAKfWqUQkflXKpaDdpaYoM0iluLS9lgJNHyBF58KKA2FBEwkD7wog==}
-
   combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
@@ -1172,29 +1097,17 @@ packages:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
 
-  compute-scroll-into-view@3.0.3:
-    resolution: {integrity: sha512-nadqwNxghAGTamwIqQSG433W6OADZx2vCo3UXHNrzTRHK/htu+7+L0zhjEoaeaQVNAi3YgqWDv8+tzf0hRfR+A==}
-
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
-  convert-source-map@1.9.0:
-    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
-
-  copy-to-clipboard@3.3.3:
-    resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
-
-  cosmiconfig@7.1.0:
-    resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
-    engines: {node: '>=10'}
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
+    engines: {node: '>= 0.6'}
 
   cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
 
-  css-box-model@1.2.1:
-    resolution: {integrity: sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==}
-
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -1279,9 +1192,6 @@ packages:
     resolution: {integrity: sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==}
     engines: {node: '>=10.13.0'}
 
-  error-ex@1.3.2:
-    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
-
   es-abstract@1.22.3:
     resolution: {integrity: sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==}
     engines: {node: '>= 0.4'}
@@ -1304,10 +1214,6 @@ packages:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
-  escape-string-regexp@1.0.5:
-    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
-    engines: {node: '>=0.8.0'}
-
   escape-string-regexp@4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
@@ -1440,9 +1346,6 @@ packages:
     resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
     engines: {node: '>=8'}
 
-  find-root@1.1.0:
-    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
-
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -1454,10 +1357,6 @@ packages:
   flatted@3.2.9:
     resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
 
-  focus-lock@1.0.0:
-    resolution: {integrity: sha512-a8Ge6cdKh9za/GZR/qtigTAk7SrGore56EFcoMshClsh7FLk1zwszc/ltuMfKhx56qeuyL/jWQ4J4axou0iJ9w==}
-    engines: {node: '>=10'}
-
   follow-redirects@1.15.5:
     resolution: {integrity: sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==}
     engines: {node: '>=4.0'}
@@ -1485,20 +1384,6 @@ packages:
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
-  framer-motion@10.18.0:
-    resolution: {integrity: sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==}
-    peerDependencies:
-      react: ^18.0.0
-      react-dom: ^18.0.0
-    peerDependenciesMeta:
-      react:
-        optional: true
-      react-dom:
-        optional: true
-
-  framesync@6.1.2:
-    resolution: {integrity: sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==}
-
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
@@ -1571,10 +1456,6 @@ packages:
   has-bigints@1.0.2:
     resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
 
-  has-flag@3.0.0:
-    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
-    engines: {node: '>=4'}
-
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
@@ -1607,16 +1488,10 @@ packages:
   highlight.js@10.7.3:
     resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
 
-  hoist-non-react-statics@3.3.2:
-    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
-
   ignore@5.3.0:
     resolution: {integrity: sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==}
     engines: {node: '>= 4'}
 
-  immer@10.0.3:
-    resolution: {integrity: sha512-pwupu3eWfouuaowscykeckFmVTpqbzW+rXFCX8rQLkZzM9ftBmU/++Ra+o+L27mz03zJTlyV4UUr+fdKNffo4A==}
-
   import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -1647,9 +1522,6 @@ packages:
   is-array-buffer@3.0.2:
     resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==}
 
-  is-arrayish@0.2.1:
-    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
-
   is-async-function@2.0.0:
     resolution: {integrity: sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==}
     engines: {node: '>= 0.4'}
@@ -1768,6 +1640,9 @@ packages:
     resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
     hasBin: true
 
+  jose@4.15.9:
+    resolution: {integrity: sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA==}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -1778,9 +1653,6 @@ packages:
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
-  json-parse-even-better-errors@2.3.1:
-    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
-
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
@@ -1827,9 +1699,6 @@ packages:
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
-  lodash.mergewith@4.6.2:
-    resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
-
   loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
@@ -1897,6 +1766,20 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  next-auth@4.24.10:
+    resolution: {integrity: sha512-8NGqiRO1GXBcVfV8tbbGcUgQkAGsX4GRzzXXea4lDikAsJtD5KiEY34bfhUOjHLvr6rT6afpcxw2H8EZqOV6aQ==}
+    peerDependencies:
+      '@auth/core': 0.34.2
+      next: ^12.2.5 || ^13 || ^14 || ^15
+      nodemailer: ^6.6.5
+      react: ^17.0.2 || ^18
+      react-dom: ^17.0.2 || ^18
+    peerDependenciesMeta:
+      '@auth/core':
+        optional: true
+      nodemailer:
+        optional: true
+
   next@14.1.0:
     resolution: {integrity: sha512-wlzrsbfeSU48YQBjZhDzOwhWhGsy+uQycR8bHAOt1LY1bn3zZEcDyHQOEoN3aWzQ8LHCAJ1nqrWCc9XF2+O45Q==}
     engines: {node: '>=18.17.0'}
@@ -1915,6 +1798,10 @@ packages:
   node-releases@2.0.18:
     resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==}
 
+  nodemailer@6.9.16:
+    resolution: {integrity: sha512-psAuZdTIRN08HKVd/E8ObdV6NO7NTBY3KsC30F7M4H1OnmLCUNaS56FpYxyb26zWLSyYF9Ozch9KYHhHegsiOQ==}
+    engines: {node: '>=6.0.0'}
+
   normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
@@ -1923,10 +1810,17 @@ packages:
     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
     engines: {node: '>=0.10.0'}
 
+  oauth@0.9.15:
+    resolution: {integrity: sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA==}
+
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
 
+  object-hash@2.2.0:
+    resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==}
+    engines: {node: '>= 6'}
+
   object-hash@3.0.0:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
@@ -1960,9 +1854,16 @@ packages:
     resolution: {integrity: sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==}
     engines: {node: '>= 0.4'}
 
+  oidc-token-hash@5.0.3:
+    resolution: {integrity: sha512-IF4PcGgzAr6XXSff26Sk/+P4KZFJVuHAJZj3wgO3vX2bMdNVp/QXTP3P7CEm9V1IdG8lDLY3HhiqpsE/nOwpPw==}
+    engines: {node: ^10.13.0 || >=12.0.0}
+
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
+  openid-client@5.7.0:
+    resolution: {integrity: sha512-4GCCGZt1i2kTHpwvaC/sCpTpQqDnBzDzuJcJMbH+y1Q5qI8U8RBvoSh28svarXszZHR5BAMXbJPX1PGPRE3VOA==}
+
   optionator@0.9.3:
     resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
     engines: {node: '>= 0.8.0'}
@@ -1982,10 +1883,6 @@ packages:
   parse-entities@2.0.0:
     resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
 
-  parse-json@5.2.0:
-    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
-    engines: {node: '>=8'}
-
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -2072,10 +1969,26 @@ packages:
     resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==}
     engines: {node: ^10 || ^12 || >=14}
 
+  preact-render-to-string@5.2.6:
+    resolution: {integrity: sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==}
+    peerDependencies:
+      preact: '>=10'
+
+  preact@10.24.3:
+    resolution: {integrity: sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA==}
+
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  pretty-format@3.8.0:
+    resolution: {integrity: sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==}
+
+  prisma@5.22.0:
+    resolution: {integrity: sha512-vtpjW3XuYCSnMsNVBjLMNkTj6OZbudcPPTPYHqX0CJfpcdWciI1dM8uHETwmDxxiqEwCIE6WvXucWUetJgfu/A==}
+    engines: {node: '>=16.13'}
+    hasBin: true
+
   prismjs@1.27.0:
     resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==}
     engines: {node: '>=6'}
@@ -2103,27 +2016,16 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
-  react-clientside-effect@1.2.6:
-    resolution: {integrity: sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==}
-    peerDependencies:
-      react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
-
   react-dom@18.2.0:
     resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
     peerDependencies:
       react: ^18.2.0
 
-  react-fast-compare@3.2.2:
-    resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
-
-  react-focus-lock@2.9.6:
-    resolution: {integrity: sha512-B7gYnCjHNrNYwY2juS71dHbf0+UpXXojt02svxybj8N5bxceAkzPChKEncHuratjUHkIFNCn06k2qj1DRlzTug==}
+  react-hook-form@7.53.1:
+    resolution: {integrity: sha512-6aiQeBda4zjcuaugWvim9WsGqisoUk+etmFEsSUMm451/Ic8L/UAb7sRtMj3V+Hdzm6mMjU1VhiSzYUZeBm0Vg==}
+    engines: {node: '>=18.0.0'}
     peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+      react: ^16.8.0 || ^17 || ^18 || ^19
 
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
@@ -2137,23 +2039,8 @@ packages:
       react-native-svg:
         optional: true
 
-  react-redux@9.1.0:
-    resolution: {integrity: sha512-6qoDzIO+gbrza8h3hjMA9aq4nwVFCKFtY2iLxCtVT38Swyy2C/dJCGBXHeHLtx6qlg/8qzc2MrhOeduf5K32wQ==}
-    peerDependencies:
-      '@types/react': ^18.2.25
-      react: ^18.0
-      react-native: '>=0.69'
-      redux: ^5.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      react-native:
-        optional: true
-      redux:
-        optional: true
-
-  react-remove-scroll-bar@2.3.4:
-    resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==}
+  react-remove-scroll-bar@2.3.6:
+    resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==}
     engines: {node: '>=10'}
     peerDependencies:
       '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -2162,8 +2049,8 @@ packages:
       '@types/react':
         optional: true
 
-  react-remove-scroll@2.5.7:
-    resolution: {integrity: sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==}
+  react-remove-scroll@2.6.0:
+    resolution: {integrity: sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==}
     engines: {node: '>=10'}
     peerDependencies:
       '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -2198,14 +2085,6 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
-  redux-thunk@3.1.0:
-    resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==}
-    peerDependencies:
-      redux: ^5.0.0
-
-  redux@5.0.1:
-    resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
-
   reflect.getprototypeof@1.0.4:
     resolution: {integrity: sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==}
     engines: {node: '>= 0.4'}
@@ -2220,9 +2099,6 @@ packages:
     resolution: {integrity: sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==}
     engines: {node: '>= 0.4'}
 
-  reselect@5.1.0:
-    resolution: {integrity: sha512-aw7jcGLDpSgNDyWBQLv2cedml85qd95/iszJjN988zX1t7AVRJi19d9kto5+W7oCfQ94gyo40dVbT6g2k4/kXg==}
-
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -2304,10 +2180,6 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
-  source-map@0.5.7:
-    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
-    engines: {node: '>=0.10.0'}
-
   space-separated-tokens@1.1.5:
     resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==}
 
@@ -2365,18 +2237,11 @@ packages:
       babel-plugin-macros:
         optional: true
 
-  stylis@4.2.0:
-    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
-
   sucrase@3.35.0:
     resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
-  supports-color@5.5.0:
-    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
-    engines: {node: '>=4'}
-
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -2412,20 +2277,10 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
-  tiny-invariant@1.3.1:
-    resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==}
-
-  to-fast-properties@2.0.0:
-    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
-    engines: {node: '>=4'}
-
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
-  toggle-selection@1.0.6:
-    resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
-
   ts-api-utils@1.0.3:
     resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==}
     engines: {node: '>=16.13.0'}
@@ -2438,9 +2293,6 @@ packages:
   tsconfig-paths@3.15.0:
     resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
 
-  tslib@2.4.0:
-    resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
-
   tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
 
@@ -2507,14 +2359,13 @@ packages:
       '@types/react':
         optional: true
 
-  use-sync-external-store@1.2.0:
-    resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  uuid@8.3.2:
+    resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
+    hasBin: true
+
   which-boxed-primitive@1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
 
@@ -2549,978 +2400,662 @@ packages:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
 
-  yallist@4.0.0:
-    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
-
-  yaml@1.10.2:
-    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
-    engines: {node: '>= 6'}
-
-  yaml@2.6.0:
-    resolution: {integrity: sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==}
-    engines: {node: '>= 14'}
-    hasBin: true
-
-  yocto-queue@0.1.0:
-    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
-    engines: {node: '>=10'}
-
-snapshots:
-
-  '@aashutoshrathi/word-wrap@1.2.6': {}
-
-  '@alloc/quick-lru@5.2.0': {}
-
-  '@babel/code-frame@7.23.5':
-    dependencies:
-      '@babel/highlight': 7.23.4
-      chalk: 2.4.2
-
-  '@babel/helper-module-imports@7.22.15':
-    dependencies:
-      '@babel/types': 7.23.6
-
-  '@babel/helper-string-parser@7.23.4': {}
-
-  '@babel/helper-validator-identifier@7.22.20': {}
-
-  '@babel/highlight@7.23.4':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.22.20
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-
-  '@babel/runtime@7.23.8':
-    dependencies:
-      regenerator-runtime: 0.14.1
-
-  '@babel/types@7.23.6':
-    dependencies:
-      '@babel/helper-string-parser': 7.23.4
-      '@babel/helper-validator-identifier': 7.22.20
-      to-fast-properties: 2.0.0
-
-  '@chakra-ui/accordion@2.3.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/descendant': 3.1.0(react@18.2.0)
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/transition': 2.1.0(framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      framer-motion: 10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/alert@2.2.2(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/spinner': 2.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/anatomy@2.2.2': {}
-
-  '@chakra-ui/avatar@2.3.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/image': 2.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/react-children-utils': 2.0.6(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/breadcrumb@2.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/react-children-utils': 2.0.6(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/breakpoint-utils@2.0.8':
-    dependencies:
-      '@chakra-ui/shared-utils': 2.0.5
-
-  '@chakra-ui/button@2.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/spinner': 2.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/card@2.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/checkbox@2.3.2(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/visually-hidden': 2.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@zag-js/focus-visible': 0.16.0
-      react: 18.2.0
-
-  '@chakra-ui/clickable@2.1.0(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      react: 18.2.0
-
-  '@chakra-ui/close-button@2.1.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/color-mode@2.2.0(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/control-box@2.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/counter@2.1.0(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/number-utils': 2.0.7
-      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      react: 18.2.0
-
-  '@chakra-ui/css-reset@2.3.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@emotion/react': 11.11.3(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/descendant@3.1.0(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/dom-utils@2.1.0': {}
-
-  '@chakra-ui/editable@3.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-focus-on-pointer-down': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/event-utils@2.0.8': {}
-
-  '@chakra-ui/focus-lock@2.1.0(@types/react@18.2.48)(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/dom-utils': 2.1.0
-      react: 18.2.0
-      react-focus-lock: 2.9.6(@types/react@18.2.48)(react@18.2.0)
-    transitivePeerDependencies:
-      - '@types/react'
-
-  '@chakra-ui/form-control@2.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/hooks@2.2.1(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/react-utils': 2.0.12(react@18.2.0)
-      '@chakra-ui/utils': 2.0.15
-      compute-scroll-into-view: 3.0.3
-      copy-to-clipboard: 3.3.3
-      react: 18.2.0
-
-  '@chakra-ui/icon@3.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/icons@2.1.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/image@2.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/input@2.1.2(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/object-utils': 2.1.0
-      '@chakra-ui/react-children-utils': 2.0.6(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/layout@2.3.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/breakpoint-utils': 2.0.8
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/object-utils': 2.1.0
-      '@chakra-ui/react-children-utils': 2.0.6(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/lazy-utils@2.0.5': {}
-
-  '@chakra-ui/live-region@2.1.0(react@18.2.0)':
-    dependencies:
-      react: 18.2.0
-
-  '@chakra-ui/media-query@3.3.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/breakpoint-utils': 2.0.8
-      '@chakra-ui/react-env': 3.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/menu@2.2.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/clickable': 2.1.0(react@18.2.0)
-      '@chakra-ui/descendant': 3.1.0(react@18.2.0)
-      '@chakra-ui/lazy-utils': 2.0.5
-      '@chakra-ui/popper': 3.1.0(react@18.2.0)
-      '@chakra-ui/react-children-utils': 2.0.6(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-animation-state': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-disclosure': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-focus-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-outside-click': 2.2.0(react@18.2.0)
-      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/transition': 2.1.0(framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      framer-motion: 10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/modal@2.3.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(@types/react@18.2.48)(framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/close-button': 2.1.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/focus-lock': 2.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@chakra-ui/portal': 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/transition': 2.1.0(framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      aria-hidden: 1.2.3
-      framer-motion: 10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.5.7(@types/react@18.2.48)(react@18.2.0)
-    transitivePeerDependencies:
-      - '@types/react'
-
-  '@chakra-ui/number-input@2.1.2(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/counter': 2.1.0(react@18.2.0)
-      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-event-listener': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-interval': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/number-utils@2.0.7': {}
-
-  '@chakra-ui/object-utils@2.1.0': {}
-
-  '@chakra-ui/pin-input@2.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/descendant': 3.1.0(react@18.2.0)
-      '@chakra-ui/react-children-utils': 2.0.6(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/popover@2.2.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/close-button': 2.1.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/lazy-utils': 2.0.5
-      '@chakra-ui/popper': 3.1.0(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-animation-state': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-disclosure': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-focus-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-focus-on-pointer-down': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      framer-motion: 10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/popper@3.1.0(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@popperjs/core': 2.11.8
-      react: 18.2.0
-
-  '@chakra-ui/portal@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-
-  '@chakra-ui/progress@2.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/provider@2.4.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/css-reset': 2.3.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/portal': 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/react-env': 3.1.0(react@18.2.0)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/utils': 2.0.15
-      '@emotion/react': 11.11.3(@types/react@18.2.48)(react@18.2.0)
-      '@emotion/styled': 11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-
-  '@chakra-ui/radio@2.1.2(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      '@zag-js/focus-visible': 0.16.0
-      react: 18.2.0
-
-  '@chakra-ui/react-children-utils@2.0.6(react@18.2.0)':
-    dependencies:
-      react: 18.2.0
-
-  '@chakra-ui/react-context@2.1.0(react@18.2.0)':
-    dependencies:
-      react: 18.2.0
-
-  '@chakra-ui/react-env@3.1.0(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.2.0)
-      react: 18.2.0
-
-  '@chakra-ui/react-types@2.0.7(react@18.2.0)':
-    dependencies:
-      react: 18.2.0
-
-  '@chakra-ui/react-use-animation-state@2.1.0(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/dom-utils': 2.1.0
-      '@chakra-ui/react-use-event-listener': 2.1.0(react@18.2.0)
-      react: 18.2.0
+  yallist@4.0.0:
+    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
-  '@chakra-ui/react-use-callback-ref@2.1.0(react@18.2.0)':
-    dependencies:
-      react: 18.2.0
+  yaml@2.6.0:
+    resolution: {integrity: sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==}
+    engines: {node: '>= 14'}
+    hasBin: true
 
-  '@chakra-ui/react-use-controllable-state@2.1.0(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.2.0)
-      react: 18.2.0
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
 
-  '@chakra-ui/react-use-disclosure@2.1.0(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.2.0)
-      react: 18.2.0
+  zod@3.23.8:
+    resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
 
-  '@chakra-ui/react-use-event-listener@2.1.0(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.2.0)
-      react: 18.2.0
+snapshots:
 
-  '@chakra-ui/react-use-focus-effect@2.1.0(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/dom-utils': 2.1.0
-      '@chakra-ui/react-use-event-listener': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.2.0)
-      react: 18.2.0
+  '@aashutoshrathi/word-wrap@1.2.6': {}
 
-  '@chakra-ui/react-use-focus-on-pointer-down@2.1.0(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/react-use-event-listener': 2.1.0(react@18.2.0)
-      react: 18.2.0
+  '@alloc/quick-lru@5.2.0': {}
 
-  '@chakra-ui/react-use-interval@2.1.0(react@18.2.0)':
+  '@babel/runtime@7.23.8':
     dependencies:
-      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.2.0)
-      react: 18.2.0
+      regenerator-runtime: 0.14.1
 
-  '@chakra-ui/react-use-latest-ref@2.1.0(react@18.2.0)':
+  '@eslint-community/eslint-utils@4.4.0(eslint@8.56.0)':
     dependencies:
-      react: 18.2.0
+      eslint: 8.56.0
+      eslint-visitor-keys: 3.4.3
 
-  '@chakra-ui/react-use-merge-refs@2.1.0(react@18.2.0)':
-    dependencies:
-      react: 18.2.0
+  '@eslint-community/regexpp@4.10.0': {}
 
-  '@chakra-ui/react-use-outside-click@2.2.0(react@18.2.0)':
+  '@eslint/eslintrc@2.1.4':
     dependencies:
-      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.2.0)
-      react: 18.2.0
+      ajv: 6.12.6
+      debug: 4.3.4
+      espree: 9.6.1
+      globals: 13.24.0
+      ignore: 5.3.0
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
 
-  '@chakra-ui/react-use-pan-event@2.1.0(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/event-utils': 2.0.8
-      '@chakra-ui/react-use-latest-ref': 2.1.0(react@18.2.0)
-      framesync: 6.1.2
-      react: 18.2.0
+  '@eslint/js@8.56.0': {}
 
-  '@chakra-ui/react-use-previous@2.1.0(react@18.2.0)':
+  '@floating-ui/core@1.6.8':
     dependencies:
-      react: 18.2.0
+      '@floating-ui/utils': 0.2.8
 
-  '@chakra-ui/react-use-safe-layout-effect@2.1.0(react@18.2.0)':
+  '@floating-ui/dom@1.6.12':
     dependencies:
-      react: 18.2.0
+      '@floating-ui/core': 1.6.8
+      '@floating-ui/utils': 0.2.8
 
-  '@chakra-ui/react-use-size@2.1.0(react@18.2.0)':
+  '@floating-ui/react-dom@2.1.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@zag-js/element-size': 0.10.5
+      '@floating-ui/dom': 1.6.12
       react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
 
-  '@chakra-ui/react-use-timeout@2.1.0(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.2.0)
-      react: 18.2.0
+  '@floating-ui/utils@0.2.8': {}
 
-  '@chakra-ui/react-use-update-effect@2.1.0(react@18.2.0)':
+  '@hookform/resolvers@3.9.1(react-hook-form@7.53.1(react@18.2.0))':
     dependencies:
-      react: 18.2.0
+      react-hook-form: 7.53.1(react@18.2.0)
 
-  '@chakra-ui/react-utils@2.0.12(react@18.2.0)':
+  '@humanwhocodes/config-array@0.11.14':
     dependencies:
-      '@chakra-ui/utils': 2.0.15
-      react: 18.2.0
-
-  '@chakra-ui/react@2.8.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/accordion': 2.3.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/alert': 2.2.2(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/avatar': 2.3.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/breadcrumb': 2.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/button': 2.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/card': 2.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/checkbox': 2.3.2(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/close-button': 2.1.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/control-box': 2.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/counter': 2.1.0(react@18.2.0)
-      '@chakra-ui/css-reset': 2.3.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/editable': 3.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/focus-lock': 2.1.0(@types/react@18.2.48)(react@18.2.0)
-      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/hooks': 2.2.1(react@18.2.0)
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/image': 2.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/input': 2.1.2(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/layout': 2.3.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/live-region': 2.1.0(react@18.2.0)
-      '@chakra-ui/media-query': 3.3.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/menu': 2.2.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/modal': 2.3.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(@types/react@18.2.48)(framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/number-input': 2.1.2(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/pin-input': 2.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/popover': 2.2.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/popper': 3.1.0(react@18.2.0)
-      '@chakra-ui/portal': 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/progress': 2.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/provider': 2.4.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/radio': 2.1.2(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/react-env': 3.1.0(react@18.2.0)
-      '@chakra-ui/select': 2.1.2(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/skeleton': 2.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/skip-nav': 2.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/slider': 2.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/spinner': 2.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/stat': 2.1.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/stepper': 2.3.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/styled-system': 2.9.2
-      '@chakra-ui/switch': 2.1.2(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/table': 2.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/tabs': 3.0.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/tag': 3.1.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/textarea': 2.1.2(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/theme': 3.3.1(@chakra-ui/styled-system@2.9.2)
-      '@chakra-ui/theme-utils': 2.0.21
-      '@chakra-ui/toast': 7.0.2(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/tooltip': 2.3.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/transition': 2.1.0(framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/utils': 2.0.15
-      '@chakra-ui/visually-hidden': 2.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@emotion/react': 11.11.3(@types/react@18.2.48)(react@18.2.0)
-      '@emotion/styled': 11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0)
-      framer-motion: 10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@humanwhocodes/object-schema': 2.0.2
+      debug: 4.3.4
+      minimatch: 3.1.2
     transitivePeerDependencies:
-      - '@types/react'
+      - supports-color
 
-  '@chakra-ui/select@2.1.2(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
+  '@humanwhocodes/module-importer@1.0.1': {}
 
-  '@chakra-ui/shared-utils@2.0.5': {}
+  '@humanwhocodes/object-schema@2.0.2': {}
 
-  '@chakra-ui/skeleton@2.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
+  '@isaacs/cliui@8.0.2':
     dependencies:
-      '@chakra-ui/media-query': 3.3.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/react-use-previous': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.0
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
 
-  '@chakra-ui/skip-nav@2.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
+  '@jridgewell/gen-mapping@0.3.5':
     dependencies:
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.25
 
-  '@chakra-ui/slider@2.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/number-utils': 2.0.7
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-callback-ref': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-latest-ref': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-pan-event': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-size': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
+  '@jridgewell/resolve-uri@3.1.2': {}
 
-  '@chakra-ui/spinner@2.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
+  '@jridgewell/set-array@1.2.1': {}
 
-  '@chakra-ui/stat@2.1.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
+  '@jridgewell/sourcemap-codec@1.5.0': {}
 
-  '@chakra-ui/stepper@2.3.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
+  '@jridgewell/trace-mapping@0.3.25':
     dependencies:
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
 
-  '@chakra-ui/styled-system@2.9.2':
-    dependencies:
-      '@chakra-ui/shared-utils': 2.0.5
-      csstype: 3.1.3
-      lodash.mergewith: 4.6.2
+  '@next/env@14.1.0': {}
 
-  '@chakra-ui/switch@2.1.2(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)':
+  '@next/eslint-plugin-next@14.1.0':
     dependencies:
-      '@chakra-ui/checkbox': 2.3.2(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      framer-motion: 10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
+      glob: 10.3.10
 
-  '@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/color-mode': 2.2.0(react@18.2.0)
-      '@chakra-ui/object-utils': 2.1.0
-      '@chakra-ui/react-utils': 2.0.12(react@18.2.0)
-      '@chakra-ui/styled-system': 2.9.2
-      '@chakra-ui/theme-utils': 2.0.21
-      '@chakra-ui/utils': 2.0.15
-      '@emotion/react': 11.11.3(@types/react@18.2.48)(react@18.2.0)
-      '@emotion/styled': 11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0)
-      react: 18.2.0
-      react-fast-compare: 3.2.2
+  '@next/swc-darwin-arm64@14.1.0':
+    optional: true
 
-  '@chakra-ui/table@2.1.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
+  '@next/swc-darwin-x64@14.1.0':
+    optional: true
 
-  '@chakra-ui/tabs@3.0.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/clickable': 2.1.0(react@18.2.0)
-      '@chakra-ui/descendant': 3.1.0(react@18.2.0)
-      '@chakra-ui/lazy-utils': 2.0.5
-      '@chakra-ui/react-children-utils': 2.0.6(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
+  '@next/swc-linux-arm64-gnu@14.1.0':
+    optional: true
 
-  '@chakra-ui/tag@3.1.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
+  '@next/swc-linux-arm64-musl@14.1.0':
+    optional: true
 
-  '@chakra-ui/textarea@2.1.2(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
+  '@next/swc-linux-x64-gnu@14.1.0':
+    optional: true
 
-  '@chakra-ui/theme-tools@2.1.2(@chakra-ui/styled-system@2.9.2)':
-    dependencies:
-      '@chakra-ui/anatomy': 2.2.2
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/styled-system': 2.9.2
-      color2k: 2.0.3
+  '@next/swc-linux-x64-musl@14.1.0':
+    optional: true
 
-  '@chakra-ui/theme-utils@2.0.21':
-    dependencies:
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/styled-system': 2.9.2
-      '@chakra-ui/theme': 3.3.1(@chakra-ui/styled-system@2.9.2)
-      lodash.mergewith: 4.6.2
+  '@next/swc-win32-arm64-msvc@14.1.0':
+    optional: true
 
-  '@chakra-ui/theme@3.3.1(@chakra-ui/styled-system@2.9.2)':
-    dependencies:
-      '@chakra-ui/anatomy': 2.2.2
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/styled-system': 2.9.2
-      '@chakra-ui/theme-tools': 2.1.2(@chakra-ui/styled-system@2.9.2)
+  '@next/swc-win32-ia32-msvc@14.1.0':
+    optional: true
+
+  '@next/swc-win32-x64-msvc@14.1.0':
+    optional: true
 
-  '@chakra-ui/toast@7.0.2(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@nodelib/fs.scandir@2.1.5':
     dependencies:
-      '@chakra-ui/alert': 2.2.2(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/close-button': 2.1.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/portal': 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/react-context': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-timeout': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-update-effect': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/styled-system': 2.9.2
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/theme': 3.3.1(@chakra-ui/styled-system@2.9.2)
-      framer-motion: 10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
 
-  '@chakra-ui/tooltip@2.3.1(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/dom-utils': 2.1.0
-      '@chakra-ui/popper': 3.1.0(react@18.2.0)
-      '@chakra-ui/portal': 2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@chakra-ui/react-types': 2.0.7(react@18.2.0)
-      '@chakra-ui/react-use-disclosure': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-event-listener': 2.1.0(react@18.2.0)
-      '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.2.0)
-      '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      framer-motion: 10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+  '@nodelib/fs.stat@2.0.5': {}
 
-  '@chakra-ui/transition@2.1.0(framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)':
+  '@nodelib/fs.walk@1.2.8':
     dependencies:
-      '@chakra-ui/shared-utils': 2.0.5
-      framer-motion: 10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.16.0
 
-  '@chakra-ui/utils@2.0.15':
-    dependencies:
-      '@types/lodash.mergewith': 4.6.7
-      css-box-model: 1.2.1
-      framesync: 6.1.2
-      lodash.mergewith: 4.6.2
+  '@panva/hkdf@1.2.1': {}
 
-  '@chakra-ui/visually-hidden@2.2.0(@chakra-ui/system@2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
 
-  '@emotion/babel-plugin@11.11.0':
-    dependencies:
-      '@babel/helper-module-imports': 7.22.15
-      '@babel/runtime': 7.23.8
-      '@emotion/hash': 0.9.1
-      '@emotion/memoize': 0.8.1
-      '@emotion/serialize': 1.1.3
-      babel-plugin-macros: 3.1.0
-      convert-source-map: 1.9.0
-      escape-string-regexp: 4.0.0
-      find-root: 1.1.0
-      source-map: 0.5.7
-      stylis: 4.2.0
+  '@prisma/client@5.22.0(prisma@5.22.0)':
+    optionalDependencies:
+      prisma: 5.22.0
 
-  '@emotion/cache@11.11.0':
-    dependencies:
-      '@emotion/memoize': 0.8.1
-      '@emotion/sheet': 1.2.2
-      '@emotion/utils': 1.2.1
-      '@emotion/weak-memoize': 0.3.1
-      stylis: 4.2.0
+  '@prisma/debug@5.22.0': {}
 
-  '@emotion/hash@0.9.1': {}
+  '@prisma/engines-version@5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2': {}
 
-  '@emotion/is-prop-valid@0.8.8':
+  '@prisma/engines@5.22.0':
     dependencies:
-      '@emotion/memoize': 0.7.4
-    optional: true
+      '@prisma/debug': 5.22.0
+      '@prisma/engines-version': 5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2
+      '@prisma/fetch-engine': 5.22.0
+      '@prisma/get-platform': 5.22.0
 
-  '@emotion/is-prop-valid@1.2.1':
+  '@prisma/fetch-engine@5.22.0':
     dependencies:
-      '@emotion/memoize': 0.8.1
+      '@prisma/debug': 5.22.0
+      '@prisma/engines-version': 5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2
+      '@prisma/get-platform': 5.22.0
 
-  '@emotion/memoize@0.7.4':
-    optional: true
+  '@prisma/get-platform@5.22.0':
+    dependencies:
+      '@prisma/debug': 5.22.0
 
-  '@emotion/memoize@0.8.1': {}
+  '@radix-ui/number@1.1.0': {}
 
-  '@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0)':
+  '@radix-ui/primitive@1.1.0': {}
+
+  '@radix-ui/react-accordion@1.2.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.23.8
-      '@emotion/babel-plugin': 11.11.0
-      '@emotion/cache': 11.11.0
-      '@emotion/serialize': 1.1.3
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
-      '@emotion/utils': 1.2.1
-      '@emotion/weak-memoize': 0.3.1
-      hoist-non-react-statics: 3.3.2
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-collapsible': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
       react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
     optionalDependencies:
       '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
 
-  '@emotion/serialize@1.1.3':
+  '@radix-ui/react-arrow@1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@emotion/hash': 0.9.1
-      '@emotion/memoize': 0.8.1
-      '@emotion/unitless': 0.8.1
-      '@emotion/utils': 1.2.1
-      csstype: 3.1.3
-
-  '@emotion/sheet@1.2.2': {}
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
 
-  '@emotion/styled@11.11.0(@emotion/react@11.11.3(@types/react@18.2.48)(react@18.2.0))(@types/react@18.2.48)(react@18.2.0)':
+  '@radix-ui/react-avatar@1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.23.8
-      '@emotion/babel-plugin': 11.11.0
-      '@emotion/is-prop-valid': 1.2.1
-      '@emotion/react': 11.11.3(@types/react@18.2.48)(react@18.2.0)
-      '@emotion/serialize': 1.1.3
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
-      '@emotion/utils': 1.2.1
+      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
       react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
     optionalDependencies:
       '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
+
+  '@radix-ui/react-checkbox@1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
+
+  '@radix-ui/react-collapsible@1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
 
-  '@emotion/unitless@0.8.1': {}
-
-  '@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.2.0)':
+  '@radix-ui/react-collection@1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-slot': 1.1.0(@types/react@18.2.48)(react@18.2.0)
       react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
 
-  '@emotion/utils@1.2.1': {}
-
-  '@emotion/weak-memoize@0.3.1': {}
-
-  '@eslint-community/eslint-utils@4.4.0(eslint@8.56.0)':
+  '@radix-ui/react-compose-refs@1.1.0(@types/react@18.2.48)(react@18.2.0)':
     dependencies:
-      eslint: 8.56.0
-      eslint-visitor-keys: 3.4.3
-
-  '@eslint-community/regexpp@4.10.0': {}
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.48
 
-  '@eslint/eslintrc@2.1.4':
+  '@radix-ui/react-context@1.1.0(@types/react@18.2.48)(react@18.2.0)':
     dependencies:
-      ajv: 6.12.6
-      debug: 4.3.4
-      espree: 9.6.1
-      globals: 13.24.0
-      ignore: 5.3.0
-      import-fresh: 3.3.0
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@eslint/js@8.56.0': {}
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.48
 
-  '@humanwhocodes/config-array@0.11.14':
+  '@radix-ui/react-context@1.1.1(@types/react@18.2.48)(react@18.2.0)':
     dependencies:
-      '@humanwhocodes/object-schema': 2.0.2
-      debug: 4.3.4
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@humanwhocodes/module-importer@1.0.1': {}
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.48
 
-  '@humanwhocodes/object-schema@2.0.2': {}
+  '@radix-ui/react-dialog@1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-portal': 1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-slot': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      aria-hidden: 1.2.3
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-remove-scroll: 2.6.0(@types/react@18.2.48)(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
 
-  '@isaacs/cliui@8.0.2':
+  '@radix-ui/react-direction@1.1.0(@types/react@18.2.48)(react@18.2.0)':
     dependencies:
-      string-width: 5.1.2
-      string-width-cjs: string-width@4.2.3
-      strip-ansi: 7.1.0
-      strip-ansi-cjs: strip-ansi@6.0.1
-      wrap-ansi: 8.1.0
-      wrap-ansi-cjs: wrap-ansi@7.0.0
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.48
 
-  '@jridgewell/gen-mapping@0.3.5':
+  '@radix-ui/react-dismissable-layer@1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@jridgewell/set-array': 1.2.1
-      '@jridgewell/sourcemap-codec': 1.5.0
-      '@jridgewell/trace-mapping': 0.3.25
-
-  '@jridgewell/resolve-uri@3.1.2': {}
-
-  '@jridgewell/set-array@1.2.1': {}
-
-  '@jridgewell/sourcemap-codec@1.5.0': {}
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-escape-keydown': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
 
-  '@jridgewell/trace-mapping@0.3.25':
+  '@radix-ui/react-dropdown-menu@2.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.0
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-menu': 2.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
 
-  '@next/env@14.1.0': {}
+  '@radix-ui/react-focus-guards@1.1.1(@types/react@18.2.48)(react@18.2.0)':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.48
 
-  '@next/eslint-plugin-next@14.1.0':
+  '@radix-ui/react-focus-scope@1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      glob: 10.3.10
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
 
-  '@next/swc-darwin-arm64@14.1.0':
-    optional: true
+  '@radix-ui/react-icons@1.3.0(react@18.2.0)':
+    dependencies:
+      react: 18.2.0
 
-  '@next/swc-darwin-x64@14.1.0':
-    optional: true
+  '@radix-ui/react-id@1.1.0(@types/react@18.2.48)(react@18.2.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.48
 
-  '@next/swc-linux-arm64-gnu@14.1.0':
-    optional: true
+  '@radix-ui/react-label@2.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
+
+  '@radix-ui/react-menu@2.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-popper': 1.2.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-portal': 1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-roving-focus': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-slot': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      aria-hidden: 1.2.3
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-remove-scroll: 2.6.0(@types/react@18.2.48)(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
+
+  '@radix-ui/react-navigation-menu@1.2.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
+
+  '@radix-ui/react-popper@1.2.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-arrow': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-rect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/rect': 1.1.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
 
-  '@next/swc-linux-arm64-musl@14.1.0':
-    optional: true
+  '@radix-ui/react-portal@1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
 
-  '@next/swc-linux-x64-gnu@14.1.0':
-    optional: true
+  '@radix-ui/react-presence@1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
 
-  '@next/swc-linux-x64-musl@14.1.0':
-    optional: true
+  '@radix-ui/react-primitive@2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/react-slot': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
+
+  '@radix-ui/react-roving-focus@1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
+
+  '@radix-ui/react-scroll-area@1.2.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.0
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
+
+  '@radix-ui/react-select@2.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.0
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-popper': 1.2.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-portal': 1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-slot': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      aria-hidden: 1.2.3
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-remove-scroll: 2.6.0(@types/react@18.2.48)(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
 
-  '@next/swc-win32-arm64-msvc@14.1.0':
-    optional: true
+  '@radix-ui/react-slot@1.1.0(@types/react@18.2.48)(react@18.2.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.48
 
-  '@next/swc-win32-ia32-msvc@14.1.0':
-    optional: true
+  '@radix-ui/react-switch@1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
+
+  '@radix-ui/react-tabs@1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-roving-focus': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
+
+  '@radix-ui/react-toast@1.2.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-portal': 1.1.2(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      '@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
 
-  '@next/swc-win32-x64-msvc@14.1.0':
-    optional: true
+  '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.2.48)(react@18.2.0)':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.48
 
-  '@nodelib/fs.scandir@2.1.5':
+  '@radix-ui/react-use-controllable-state@1.1.0(@types/react@18.2.48)(react@18.2.0)':
     dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      run-parallel: 1.2.0
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.48
 
-  '@nodelib/fs.stat@2.0.5': {}
+  '@radix-ui/react-use-escape-keydown@1.1.0(@types/react@18.2.48)(react@18.2.0)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.48)(react@18.2.0)
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.48
 
-  '@nodelib/fs.walk@1.2.8':
+  '@radix-ui/react-use-layout-effect@1.1.0(@types/react@18.2.48)(react@18.2.0)':
     dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.16.0
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.48
 
-  '@pkgjs/parseargs@0.11.0':
-    optional: true
+  '@radix-ui/react-use-previous@1.1.0(@types/react@18.2.48)(react@18.2.0)':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.48
 
-  '@popperjs/core@2.11.8': {}
+  '@radix-ui/react-use-rect@1.1.0(@types/react@18.2.48)(react@18.2.0)':
+    dependencies:
+      '@radix-ui/rect': 1.1.0
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.48
 
-  '@radix-ui/react-icons@1.3.0(react@18.2.0)':
+  '@radix-ui/react-use-size@1.1.0(@types/react@18.2.48)(react@18.2.0)':
     dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.48)(react@18.2.0)
       react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.48
 
-  '@react-oauth/google@0.12.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-visually-hidden@1.1.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.48
+      '@types/react-dom': 18.2.18
 
-  '@reduxjs/toolkit@2.0.1(react-redux@9.1.0(@types/react@18.2.48)(react@18.2.0)(redux@5.0.1))(react@18.2.0)':
+  '@radix-ui/rect@1.1.0': {}
+
+  '@react-oauth/google@0.12.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      immer: 10.0.3
-      redux: 5.0.1
-      redux-thunk: 3.1.0(redux@5.0.1)
-      reselect: 5.1.0
-    optionalDependencies:
       react: 18.2.0
-      react-redux: 9.1.0(@types/react@18.2.48)(react@18.2.0)(redux@5.0.1)
+      react-dom: 18.2.0(react@18.2.0)
 
   '@rushstack/eslint-patch@1.7.0': {}
 
@@ -3528,6 +3063,13 @@ snapshots:
     dependencies:
       tslib: 2.6.2
 
+  '@tanstack/query-core@5.60.6': {}
+
+  '@tanstack/react-query@5.61.0(react@18.2.0)':
+    dependencies:
+      '@tanstack/query-core': 5.60.6
+      react: 18.2.0
+
   '@types/hast@2.3.10':
     dependencies:
       '@types/unist': 2.0.10
@@ -3536,18 +3078,10 @@ snapshots:
 
   '@types/json5@0.0.29': {}
 
-  '@types/lodash.mergewith@4.6.7':
-    dependencies:
-      '@types/lodash': 4.14.202
-
-  '@types/lodash@4.14.202': {}
-
   '@types/node@20.11.5':
     dependencies:
       undici-types: 5.26.5
 
-  '@types/parse-json@4.0.2': {}
-
   '@types/prop-types@15.7.11': {}
 
   '@types/react-dom@18.2.18':
@@ -3566,8 +3100,6 @@ snapshots:
 
   '@types/unist@2.0.10': {}
 
-  '@types/use-sync-external-store@0.0.3': {}
-
   '@typescript-eslint/eslint-plugin@6.19.0(@typescript-eslint/parser@6.19.0(eslint@8.56.0)(typescript@5.3.3))(eslint@8.56.0)(typescript@5.3.3)':
     dependencies:
       '@eslint-community/regexpp': 4.10.0
@@ -3656,14 +3188,6 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@zag-js/dom-query@0.16.0': {}
-
-  '@zag-js/element-size@0.10.5': {}
-
-  '@zag-js/focus-visible@0.16.0':
-    dependencies:
-      '@zag-js/dom-query': 0.16.0
-
   acorn-jsx@5.3.2(acorn@8.11.3):
     dependencies:
       acorn: 8.11.3
@@ -3681,10 +3205,6 @@ snapshots:
 
   ansi-regex@6.0.1: {}
 
-  ansi-styles@3.2.1:
-    dependencies:
-      color-convert: 1.9.3
-
   ansi-styles@4.3.0:
     dependencies:
       color-convert: 2.0.1
@@ -3799,12 +3319,6 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
-  babel-plugin-macros@3.1.0:
-    dependencies:
-      '@babel/runtime': 7.23.8
-      cosmiconfig: 7.1.0
-      resolve: 1.22.8
-
   balanced-match@1.0.2: {}
 
   binary-extensions@2.3.0: {}
@@ -3847,12 +3361,6 @@ snapshots:
 
   caniuse-lite@1.0.30001671: {}
 
-  chalk@2.4.2:
-    dependencies:
-      ansi-styles: 3.2.1
-      escape-string-regexp: 1.0.5
-      supports-color: 5.5.0
-
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
@@ -3886,20 +3394,12 @@ snapshots:
 
   clsx@2.1.1: {}
 
-  color-convert@1.9.3:
-    dependencies:
-      color-name: 1.1.3
-
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
 
-  color-name@1.1.3: {}
-
   color-name@1.1.4: {}
 
-  color2k@2.0.3: {}
-
   combined-stream@1.0.8:
     dependencies:
       delayed-stream: 1.0.0
@@ -3908,23 +3408,9 @@ snapshots:
 
   commander@4.1.1: {}
 
-  compute-scroll-into-view@3.0.3: {}
-
   concat-map@0.0.1: {}
 
-  convert-source-map@1.9.0: {}
-
-  copy-to-clipboard@3.3.3:
-    dependencies:
-      toggle-selection: 1.0.6
-
-  cosmiconfig@7.1.0:
-    dependencies:
-      '@types/parse-json': 4.0.2
-      import-fresh: 3.3.0
-      parse-json: 5.2.0
-      path-type: 4.0.0
-      yaml: 1.10.2
+  cookie@0.7.2: {}
 
   cross-spawn@7.0.3:
     dependencies:
@@ -3932,10 +3418,6 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
-  css-box-model@1.2.1:
-    dependencies:
-      tiny-invariant: 1.3.1
-
   cssesc@3.0.0: {}
 
   csstype@3.1.3: {}
@@ -3999,10 +3481,6 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.2.1
 
-  error-ex@1.3.2:
-    dependencies:
-      is-arrayish: 0.2.1
-
   es-abstract@1.22.3:
     dependencies:
       array-buffer-byte-length: 1.0.0
@@ -4080,8 +3558,6 @@ snapshots:
 
   escalade@3.2.0: {}
 
-  escape-string-regexp@1.0.5: {}
-
   escape-string-regexp@4.0.0: {}
 
   eslint-config-next@14.1.0(eslint@8.56.0)(typescript@5.3.3):
@@ -4307,8 +3783,6 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
-  find-root@1.1.0: {}
-
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
@@ -4322,10 +3796,6 @@ snapshots:
 
   flatted@3.2.9: {}
 
-  focus-lock@1.0.0:
-    dependencies:
-      tslib: 2.6.2
-
   follow-redirects@1.15.5: {}
 
   for-each@0.3.3:
@@ -4347,18 +3817,6 @@ snapshots:
 
   fraction.js@4.3.7: {}
 
-  framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
-    dependencies:
-      tslib: 2.6.2
-    optionalDependencies:
-      '@emotion/is-prop-valid': 0.8.8
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-
-  framesync@6.1.2:
-    dependencies:
-      tslib: 2.4.0
-
   fs.realpath@1.0.0: {}
 
   fsevents@2.3.3:
@@ -4445,8 +3903,6 @@ snapshots:
 
   has-bigints@1.0.2: {}
 
-  has-flag@3.0.0: {}
-
   has-flag@4.0.0: {}
 
   has-property-descriptors@1.0.1:
@@ -4477,14 +3933,8 @@ snapshots:
 
   highlight.js@10.7.3: {}
 
-  hoist-non-react-statics@3.3.2:
-    dependencies:
-      react-is: 16.13.1
-
   ignore@5.3.0: {}
 
-  immer@10.0.3: {}
-
   import-fresh@3.3.0:
     dependencies:
       parent-module: 1.0.1
@@ -4522,8 +3972,6 @@ snapshots:
       get-intrinsic: 1.2.2
       is-typed-array: 1.1.12
 
-  is-arrayish@0.2.1: {}
-
   is-async-function@2.0.0:
     dependencies:
       has-tostringtag: 1.0.0
@@ -4637,6 +4085,8 @@ snapshots:
 
   jiti@1.21.6: {}
 
+  jose@4.15.9: {}
+
   js-tokens@4.0.0: {}
 
   js-yaml@4.1.0:
@@ -4645,8 +4095,6 @@ snapshots:
 
   json-buffer@3.0.1: {}
 
-  json-parse-even-better-errors@2.3.1: {}
-
   json-schema-traverse@0.4.1: {}
 
   json-stable-stringify-without-jsonify@1.0.1: {}
@@ -4689,8 +4137,6 @@ snapshots:
 
   lodash.merge@4.6.2: {}
 
-  lodash.mergewith@4.6.2: {}
-
   loose-envify@1.4.0:
     dependencies:
       js-tokens: 4.0.0
@@ -4749,6 +4195,23 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
+  next-auth@4.24.10(next@14.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(nodemailer@6.9.16)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+    dependencies:
+      '@babel/runtime': 7.23.8
+      '@panva/hkdf': 1.2.1
+      cookie: 0.7.2
+      jose: 4.15.9
+      next: 14.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      oauth: 0.9.15
+      openid-client: 5.7.0
+      preact: 10.24.3
+      preact-render-to-string: 5.2.6(preact@10.24.3)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      uuid: 8.3.2
+    optionalDependencies:
+      nodemailer: 6.9.16
+
   next@14.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       '@next/env': 14.1.0
@@ -4776,12 +4239,18 @@ snapshots:
 
   node-releases@2.0.18: {}
 
+  nodemailer@6.9.16: {}
+
   normalize-path@3.0.0: {}
 
   normalize-range@0.1.2: {}
 
+  oauth@0.9.15: {}
+
   object-assign@4.1.1: {}
 
+  object-hash@2.2.0: {}
+
   object-hash@3.0.0: {}
 
   object-inspect@1.13.1: {}
@@ -4825,10 +4294,19 @@ snapshots:
       define-properties: 1.2.1
       es-abstract: 1.22.3
 
+  oidc-token-hash@5.0.3: {}
+
   once@1.4.0:
     dependencies:
       wrappy: 1.0.2
 
+  openid-client@5.7.0:
+    dependencies:
+      jose: 4.15.9
+      lru-cache: 6.0.0
+      object-hash: 2.2.0
+      oidc-token-hash: 5.0.3
+
   optionator@0.9.3:
     dependencies:
       '@aashutoshrathi/word-wrap': 1.2.6
@@ -4859,13 +4337,6 @@ snapshots:
       is-decimal: 1.0.4
       is-hexadecimal: 1.0.4
 
-  parse-json@5.2.0:
-    dependencies:
-      '@babel/code-frame': 7.23.5
-      error-ex: 1.3.2
-      json-parse-even-better-errors: 2.3.1
-      lines-and-columns: 1.2.4
-
   path-exists@4.0.0: {}
 
   path-is-absolute@1.0.1: {}
@@ -4934,8 +4405,23 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  preact-render-to-string@5.2.6(preact@10.24.3):
+    dependencies:
+      preact: 10.24.3
+      pretty-format: 3.8.0
+
+  preact@10.24.3: {}
+
   prelude-ls@1.2.1: {}
 
+  pretty-format@3.8.0: {}
+
+  prisma@5.22.0:
+    dependencies:
+      '@prisma/engines': 5.22.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
   prismjs@1.27.0: {}
 
   prismjs@1.29.0: {}
@@ -4958,30 +4444,15 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
-  react-clientside-effect@1.2.6(react@18.2.0):
-    dependencies:
-      '@babel/runtime': 7.23.8
-      react: 18.2.0
-
   react-dom@18.2.0(react@18.2.0):
     dependencies:
       loose-envify: 1.4.0
       react: 18.2.0
       scheduler: 0.23.0
 
-  react-fast-compare@3.2.2: {}
-
-  react-focus-lock@2.9.6(@types/react@18.2.48)(react@18.2.0):
+  react-hook-form@7.53.1(react@18.2.0):
     dependencies:
-      '@babel/runtime': 7.23.8
-      focus-lock: 1.0.0
-      prop-types: 15.8.1
       react: 18.2.0
-      react-clientside-effect: 1.2.6(react@18.2.0)
-      use-callback-ref: 1.3.1(@types/react@18.2.48)(react@18.2.0)
-      use-sidecar: 1.1.2(@types/react@18.2.48)(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.48
 
   react-is@16.13.1: {}
 
@@ -4991,16 +4462,7 @@ snapshots:
       qr.js: 0.0.0
       react: 18.2.0
 
-  react-redux@9.1.0(@types/react@18.2.48)(react@18.2.0)(redux@5.0.1):
-    dependencies:
-      '@types/use-sync-external-store': 0.0.3
-      react: 18.2.0
-      use-sync-external-store: 1.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.48
-      redux: 5.0.1
-
-  react-remove-scroll-bar@2.3.4(@types/react@18.2.48)(react@18.2.0):
+  react-remove-scroll-bar@2.3.6(@types/react@18.2.48)(react@18.2.0):
     dependencies:
       react: 18.2.0
       react-style-singleton: 2.2.1(@types/react@18.2.48)(react@18.2.0)
@@ -5008,10 +4470,10 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.48
 
-  react-remove-scroll@2.5.7(@types/react@18.2.48)(react@18.2.0):
+  react-remove-scroll@2.6.0(@types/react@18.2.48)(react@18.2.0):
     dependencies:
       react: 18.2.0
-      react-remove-scroll-bar: 2.3.4(@types/react@18.2.48)(react@18.2.0)
+      react-remove-scroll-bar: 2.3.6(@types/react@18.2.48)(react@18.2.0)
       react-style-singleton: 2.2.1(@types/react@18.2.48)(react@18.2.0)
       tslib: 2.6.2
       use-callback-ref: 1.3.1(@types/react@18.2.48)(react@18.2.0)
@@ -5049,12 +4511,6 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
-  redux-thunk@3.1.0(redux@5.0.1):
-    dependencies:
-      redux: 5.0.1
-
-  redux@5.0.1: {}
-
   reflect.getprototypeof@1.0.4:
     dependencies:
       call-bind: 1.0.5
@@ -5078,8 +4534,6 @@ snapshots:
       define-properties: 1.2.1
       set-function-name: 2.0.1
 
-  reselect@5.1.0: {}
-
   resolve-from@4.0.0: {}
 
   resolve-pkg-maps@1.0.0: {}
@@ -5163,8 +4617,6 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
-  source-map@0.5.7: {}
-
   space-separated-tokens@1.1.5: {}
 
   streamsearch@1.1.0: {}
@@ -5228,8 +4680,6 @@ snapshots:
       client-only: 0.0.1
       react: 18.2.0
 
-  stylis@4.2.0: {}
-
   sucrase@3.35.0:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.5
@@ -5240,10 +4690,6 @@ snapshots:
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
 
-  supports-color@5.5.0:
-    dependencies:
-      has-flag: 3.0.0
-
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
@@ -5295,16 +4741,10 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
-  tiny-invariant@1.3.1: {}
-
-  to-fast-properties@2.0.0: {}
-
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
 
-  toggle-selection@1.0.6: {}
-
   ts-api-utils@1.0.3(typescript@5.3.3):
     dependencies:
       typescript: 5.3.3
@@ -5318,8 +4758,6 @@ snapshots:
       minimist: 1.2.8
       strip-bom: 3.0.0
 
-  tslib@2.4.0: {}
-
   tslib@2.6.2: {}
 
   type-check@0.4.0:
@@ -5391,12 +4829,10 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.48
 
-  use-sync-external-store@1.2.0(react@18.2.0):
-    dependencies:
-      react: 18.2.0
-
   util-deprecate@1.0.2: {}
 
+  uuid@8.3.2: {}
+
   which-boxed-primitive@1.0.2:
     dependencies:
       is-bigint: 1.0.4
@@ -5457,8 +4893,8 @@ snapshots:
 
   yallist@4.0.0: {}
 
-  yaml@1.10.2: {}
-
   yaml@2.6.0: {}
 
   yocto-queue@0.1.0: {}
+
+  zod@3.23.8: {}
diff --git a/web/prisma/schema.prisma b/web/prisma/schema.prisma
new file mode 100644
index 0000000..a6c183a
--- /dev/null
+++ b/web/prisma/schema.prisma
@@ -0,0 +1,34 @@
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "mongodb"
+  url      = env("DATABASE_URL")
+}
+
+model supportMessage {
+  id        String   @id @default(auto()) @map("_id") @db.ObjectId
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  user      String?  @db.ObjectId
+  name      String?
+  email     String?
+  phone     String?
+  category  String?
+  message   String?
+  ip        String?
+  userAgent String?
+  type      String   @default("RECEIVED")
+}
+
+model pageView {
+  id        String   @id @default(auto()) @map("_id") @db.ObjectId
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  user      String?  @db.ObjectId
+  ip        String?
+  userAgent String?
+  referer   String?
+  url       String?
+}
diff --git a/web/services/authService.ts b/web/services/authService.ts
deleted file mode 100644
index 2c7e6dd..0000000
--- a/web/services/authService.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import httpClient from '../lib/httpClient'
-import {
-  GoogleLoginRequestPayload,
-  LoginRequestPayload,
-  LoginResponse,
-  RegisterRequestPayload,
-  RegisterResponse,
-} from './types'
-
-class AuthService {
-  async login(payload: LoginRequestPayload): Promise<LoginResponse> {
-    const res = await httpClient.post(`/auth/login`, payload)
-    return res.data.data
-  }
-
-  async loginWithGoogle(
-    payload: GoogleLoginRequestPayload
-  ): Promise<LoginResponse> {
-    const res = await httpClient.post(`/auth/google-login`, payload)
-    return res.data.data
-  }
-
-  async register(payload: RegisterRequestPayload): Promise<RegisterResponse> {
-    const res = await httpClient.post(`/auth/register`, payload)
-    return res.data.data
-  }
-
-  async getCurrentUser() {
-    const res = await httpClient.get(`/auth/who-am-i`)
-    return res.data.data
-  }
-
-  async requestPasswordReset({ email }) {
-    const res = await httpClient.post(`/auth/request-password-reset`, {
-      email,
-    })
-    return res.data.data
-  }
-
-  async resetPassword({ email, otp, newPassword }) {
-    const res = await httpClient.post(`/auth/reset-password`, {
-      email,
-      otp,
-      newPassword,
-    })
-    return res.data.data
-  }
-
-  async whoAmI() {
-    const res = await httpClient.get(`/auth/who-am-i`)
-    return res.data.data
-  }
-}
-
-export const authService = new AuthService()
diff --git a/web/services/gatewayService.ts b/web/services/gatewayService.ts
deleted file mode 100644
index b7603d8..0000000
--- a/web/services/gatewayService.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import httpClient from '../lib/httpClient'
-import { SendSMSRequestPayload } from './types'
-
-class GatewayService {
-  async generateApiKey() {
-    const res = await httpClient.post(`/auth/api-keys`, {})
-    return res.data.data
-  }
-
-  async getApiKeyList() {
-    const res = await httpClient.get(`/auth/api-keys`)
-    return res.data.data
-  }
-
-  async deleteApiKey(id: string) {
-    const res = await httpClient.delete(`/auth/api-keys/${id}`)
-    return res.data.data
-  }
-
-  async getDeviceList() {
-    const res = await httpClient.get(`/gateway/devices`)
-    return res.data.data
-  }
-
-  async deleteDevice(id: string) {
-    const res = await httpClient.delete(`/gateway/devices/${id}`)
-    return res.data.data
-  }
-
-  async sendSMS(deviceId: string, payload: SendSMSRequestPayload) {
-    const res = await httpClient.post(
-      `/gateway/devices/${deviceId}/sendSMS`,
-      payload
-    )
-    return res.data.data
-  }
-
-  async getReceivedSMSList(deviceId: string) {
-    const res = await httpClient.get(`/gateway/devices/${deviceId}/getReceivedSMS`)
-    return res.data.data
-  }
-}
-
-export const gatewayService = new GatewayService()
diff --git a/web/services/statsService.ts b/web/services/statsService.ts
deleted file mode 100644
index b83c763..0000000
--- a/web/services/statsService.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import httpClient from '../lib/httpClient'
-
-class StatsService {
-  async getStats() {
-    const res = await httpClient.get(`/gateway/stats`)
-    return res.data.data
-  }
-}
-
-export const statsService = new StatsService()
diff --git a/web/services/types.ts b/web/services/types.ts
deleted file mode 100644
index 36d8faf..0000000
--- a/web/services/types.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-export enum UserRole {
-  ADMIN,
-  REGULAR,
-}
-
-export interface UserEntity {
-  _id: string
-  name: string
-  email: string
-  role: UserRole
-  avatar?: string
-}
-export interface AuthState {
-  loading: boolean
-  user: UserEntity | null
-  accessToken: string | null
-}
-
-export interface LoginRequestPayload {
-  email: string
-  password: string
-}
-
-export interface GoogleLoginRequestPayload {
-  idToken: string
-}
-
-export interface RegisterRequestPayload {
-  name: string
-  email: string
-  password: string
-}
-
-export interface BaseResponse {
-  success?: boolean
-  error?: string
-  message?: string
-}
-
-export interface BaseAuthResponse extends BaseResponse {
-  accessToken: string
-  user: UserEntity
-}
-export interface LoginResponse extends BaseAuthResponse {}
-
-export interface RegisterResponse extends BaseAuthResponse {}
-
-export interface CurrentUserResponse extends BaseResponse {
-  data: UserEntity
-}
-
-export interface SendSMSRequestPayload {
-  recipients: string[]
-  message: string
-}
-
-export interface ApiKeyEntity {
-  _id: string
-  apiKey: string
-  user: UserEntity
-}
-
-export interface DeviceEntity {
-  _id: string
-  user: UserEntity
-  enabled: boolean
-  fcmToken: string
-  brand: string
-  manufacturer: string
-  model: string
-}
diff --git a/web/shared/constants.ts b/web/shared/constants.ts
deleted file mode 100644
index 0b8113a..0000000
--- a/web/shared/constants.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export const KEY_PREFIX = 'textbee'
-
-export const LOCAL_STORAGE_KEY = {
-  USER: `${KEY_PREFIX}.user`,
-  TOKEN: `${KEY_PREFIX}.token`,
-}
diff --git a/web/shared/utils.ts b/web/shared/utils.ts
deleted file mode 100644
index 2f51b50..0000000
--- a/web/shared/utils.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { UserEntity } from '../services/types'
-import { LOCAL_STORAGE_KEY } from './constants'
-
-export const saveUserAndToken = (user: UserEntity, accessToken: string) => {
-  if (typeof localStorage !== 'undefined') {
-    localStorage.setItem(LOCAL_STORAGE_KEY.USER, JSON.stringify(user))
-    localStorage.setItem(LOCAL_STORAGE_KEY.TOKEN, accessToken)
-  }
-}
-
-export const removeUserAndToken = () => {
-  if (typeof localStorage !== 'undefined') {
-    localStorage.removeItem(LOCAL_STORAGE_KEY.USER)
-    localStorage.removeItem(LOCAL_STORAGE_KEY.TOKEN)
-  }
-}
diff --git a/web/store/apiKeySlice.ts b/web/store/apiKeySlice.ts
deleted file mode 100644
index 6cc7fa6..0000000
--- a/web/store/apiKeySlice.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { createAsyncThunk, createSlice, isAnyOf } from '@reduxjs/toolkit'
-import type { PayloadAction } from '@reduxjs/toolkit'
-import { createStandaloneToast } from '@chakra-ui/react'
-import { RootState } from './store'
-import { gatewayService } from '../services/gatewayService'
-
-const { toast } = createStandaloneToast()
-
-const initialState = {
-  loading: false,
-  item: null,
-  list: [],
-}
-
-export const fetchApiKeys = createAsyncThunk(
-  'apiKey/fetchApiKeys',
-  async (payload, { rejectWithValue }) => {
-    try {
-      const res = await gatewayService.getApiKeyList()
-      return res
-    } catch (e) {
-      toast({
-        title: e.response.data.error || 'Failed to Fetch apiKeys',
-        status: 'error',
-      })
-      return rejectWithValue(e.response.data)
-    }
-  }
-)
-
-export const deleteApiKey = createAsyncThunk(
-  'apiKey/deleteApiKey',
-  async (apiKeyId: string, { dispatch, rejectWithValue }) => {
-    try {
-      const res = await gatewayService.deleteApiKey(apiKeyId)
-      dispatch(fetchApiKeys())
-      toast({
-        title: 'ApiKey deleted successfully',
-        status: 'success',
-      })
-      return res
-    } catch (e) {
-      toast({
-        title: e.response.data.error || 'Failed to delete ApiKey',
-        status: 'error',
-      })
-      return rejectWithValue(e.response.data)
-    }
-  }
-)
-
-export const apiKeySlice = createSlice({
-  name: 'apiKey',
-  initialState,
-  reducers: {
-    clearApiKeyList: (state) => {
-      state.loading = false
-      state.list = []
-    },
-  },
-  extraReducers: (builder) => {
-    builder
-      .addCase(fetchApiKeys.fulfilled, (state, action: PayloadAction<any>) => {
-        state.loading = false
-        state.list = action.payload
-      })
-      .addCase(fetchApiKeys.rejected, (state) => {
-        state.loading = false
-      })
-      .addMatcher(
-        isAnyOf(fetchApiKeys.pending, deleteApiKey.pending),
-        (state) => {
-          state.loading = true
-        }
-      )
-  },
-})
-
-export const { clearApiKeyList } = apiKeySlice.actions
-
-export const selectApiKeyLoading = (state: RootState) => state.apiKey.loading
-export const selectApiKeyList = (state: RootState) => state.apiKey.list
-export const selectApiKeyItem = (state: RootState) => state.apiKey.item
-
-export default apiKeySlice.reducer
diff --git a/web/store/authSlice.ts b/web/store/authSlice.ts
deleted file mode 100644
index e109de5..0000000
--- a/web/store/authSlice.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-import { createAsyncThunk, createSlice, isAnyOf } from '@reduxjs/toolkit'
-import type { PayloadAction } from '@reduxjs/toolkit'
-import { createStandaloneToast } from '@chakra-ui/react'
-import Router from 'next/router'
-import { RootState } from './store'
-import {
-  AuthState,
-  GoogleLoginRequestPayload,
-  LoginRequestPayload,
-  RegisterRequestPayload,
-} from '../services/types'
-import { removeUserAndToken, saveUserAndToken } from '../shared/utils'
-import { LOCAL_STORAGE_KEY } from '../shared/constants'
-import { googleLogout } from '@react-oauth/google'
-import { authService } from '../services/authService'
-const { toast } = createStandaloneToast()
-
-const initialState: AuthState = {
-  loading: false,
-  accessToken:
-    typeof window !== 'undefined'
-      ? localStorage.getItem(LOCAL_STORAGE_KEY.TOKEN)
-      : null,
-  user:
-    typeof window !== 'undefined'
-      ? JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.USER))
-      : null,
-}
-
-export const login = createAsyncThunk(
-  'auth/login',
-  async (payload: LoginRequestPayload, { rejectWithValue }) => {
-    try {
-      const res = await authService.login(payload)
-      const { accessToken, user } = res
-      saveUserAndToken(user, accessToken)
-      Router.push('/dashboard')
-      return res
-    } catch (e) {
-      toast({
-        title: e.response.data.error || 'Login failed',
-        status: 'error',
-      })
-      return rejectWithValue(e.response.data)
-    }
-  }
-)
-
-export const loginWithGoogle = createAsyncThunk(
-  'auth/google-login',
-  async (payload: GoogleLoginRequestPayload, thunkAPI) => {
-    try {
-      const res = await authService.loginWithGoogle(payload)
-      const { accessToken, user } = res
-      saveUserAndToken(user, accessToken)
-      Router.push('/dashboard')
-      return res
-    } catch (e) {
-      toast({
-        title: e.response.data.error || 'Login failed',
-        status: 'error',
-      })
-      return thunkAPI.rejectWithValue(e.response.data)
-    }
-  }
-)
-
-export const register = createAsyncThunk(
-  'auth/register',
-  async (payload: RegisterRequestPayload, thunkAPI) => {
-    try {
-      const res = await authService.register(payload)
-      const { accessToken, user } = res
-      saveUserAndToken(user, accessToken)
-      Router.push('/dashboard')
-      return res
-    } catch (e) {
-      toast({
-        title: e.response.data.error || 'Signup failed',
-        status: 'error',
-      })
-      return thunkAPI.rejectWithValue(e.response.data)
-    }
-  }
-)
-
-export const authSlice = createSlice({
-  name: 'auth',
-  initialState,
-  reducers: {
-    logout: (state) => {
-      removeUserAndToken()
-      googleLogout()
-      state.accessToken = null
-      state.user = null
-      Router.push('/login')
-    },
-  },
-  extraReducers: (builder) => {
-    builder
-      .addMatcher(
-        isAnyOf(login.fulfilled, register.fulfilled, loginWithGoogle.fulfilled),
-        (state, action: PayloadAction<any>) => {
-          state.loading = false
-          state.user = action.payload.user
-          state.accessToken = action.payload.accessToken
-        }
-      )
-      .addMatcher(isAnyOf(login.rejected, register.rejected), (state) => {
-        state.loading = false
-        state.user = null
-        state.accessToken = null
-      })
-      .addMatcher(isAnyOf(login.pending, register.pending), (state) => {
-        state.loading = true
-      })
-  },
-})
-
-export const { logout } = authSlice.actions
-
-export const selectAuthLoading = (state: RootState) => state.auth.loading
-export const selectAuthUser = (state: RootState) => state.auth.user
-export const selectAuthAccessToken = (state: RootState) =>
-  state.auth.accessToken
-
-export default authSlice.reducer
diff --git a/web/store/deviceSlice.ts b/web/store/deviceSlice.ts
deleted file mode 100644
index 83cf040..0000000
--- a/web/store/deviceSlice.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
-import type { PayloadAction } from '@reduxjs/toolkit'
-import { createStandaloneToast } from '@chakra-ui/react'
-import { RootState } from './store'
-import { gatewayService } from '../services/gatewayService'
-
-const { toast } = createStandaloneToast()
-
-const initialState = {
-  loading: false,
-  item: null,
-  list: [],
-  sendingSMS: false,
-  receivedSMSList: {
-    loading: false,
-    data: [],
-  },
-}
-
-export const fetchDevices = createAsyncThunk(
-  'device/fetchDevices',
-  async (payload, { rejectWithValue }) => {
-    try {
-      const res = await gatewayService.getDeviceList()
-      return res
-    } catch (e) {
-      toast({
-        title: e.response.data.error || 'Failed to Fetch devices',
-        status: 'error',
-      })
-      return rejectWithValue(e.response.data)
-    }
-  }
-)
-
-export const fetchReceivedSMSList = createAsyncThunk(
-  'device/fetchReceivedSMSList',
-  async (id: string, { rejectWithValue }) => {
-    try {
-      const res = await gatewayService.getReceivedSMSList(id)
-      return res
-    } catch (e) {
-      toast({
-        title: e.response.data.error || 'Failed to Fetch received sms list',
-        status: 'error',
-      })
-      return rejectWithValue(e.response.data)
-    }
-  }
-)
-
-export const deleteDevice = createAsyncThunk(
-  'device/deleteDevice',
-  async (id: string, { rejectWithValue, dispatch }) => {
-    try {
-      const res = await gatewayService.deleteDevice(id)
-      dispatch(fetchDevices())
-      toast({
-        title: 'Device deleted successfully',
-        status: 'success',
-      })
-      return res
-    } catch (e) {
-      toast({
-        title: e.response?.data?.error || 'Failed to delete device',
-        status: 'error',
-      })
-      return rejectWithValue(e.response?.data)
-    }
-  }
-)
-
-export const sendSMS = createAsyncThunk(
-  'device/sendSMS',
-  async ({ deviceId, payload }: any, { rejectWithValue }) => {
-    try {
-      const res = await gatewayService.sendSMS(deviceId, payload)
-      toast({
-        title: 'SMS sent successfully',
-        status: 'success',
-      })
-      return res
-    } catch (e) {
-      toast({
-        title: e.response.data.error || 'Failed to send SMS',
-        status: 'error',
-      })
-      return rejectWithValue(e.response.data)
-    }
-  }
-)
-
-export const deviceSlice = createSlice({
-  name: 'device',
-  initialState,
-  reducers: {
-    clearDeviceList: (state) => {
-      state.loading = false
-      state.list = []
-    },
-  },
-  extraReducers: (builder) => {
-    builder
-      .addCase(fetchDevices.pending, (state) => {
-        state.loading = true
-      })
-      .addCase(fetchDevices.fulfilled, (state, action: PayloadAction<any>) => {
-        state.loading = false
-        state.list = action.payload
-      })
-      .addCase(fetchDevices.rejected, (state) => {
-        state.loading = false
-      })
-      .addCase(sendSMS.pending, (state) => {
-        state.sendingSMS = true
-      })
-      .addCase(sendSMS.fulfilled, (state) => {
-        state.sendingSMS = false
-      })
-      .addCase(sendSMS.rejected, (state) => {
-        state.sendingSMS = false
-      })
-      .addCase(fetchReceivedSMSList.pending, (state) => {
-        state.receivedSMSList.loading = true
-      })
-      .addCase(
-        fetchReceivedSMSList.fulfilled,
-        (state, action: PayloadAction<any>) => {
-          state.receivedSMSList.loading = false
-          state.receivedSMSList.data = action.payload
-        }
-      )
-      .addCase(fetchReceivedSMSList.rejected, (state) => {
-        state.receivedSMSList.loading = false
-      })
-  },
-})
-
-export const { clearDeviceList } = deviceSlice.actions
-
-export const selectDeviceList = (state: RootState) => state.device.list
-export const selectDeviceItem = (state: RootState) => state.device.item
-export const selectDeviceLoading = (state: RootState) => state.device.loading
-export const selectSendingSMS = (state: RootState) => state.device.sendingSMS
-export const selectReceivedSMSList = (state: RootState) =>
-  state.device.receivedSMSList
-
-export default deviceSlice.reducer
diff --git a/web/store/hooks.ts b/web/store/hooks.ts
deleted file mode 100644
index 9054783..0000000
--- a/web/store/hooks.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { useDispatch, useSelector, TypedUseSelectorHook } from 'react-redux'
-import type { RootState, AppDispatch } from './store'
-
-export const useAppDispatch: () => AppDispatch = useDispatch
-export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
\ No newline at end of file
diff --git a/web/store/statsSlice.ts b/web/store/statsSlice.ts
deleted file mode 100644
index 4b23f6d..0000000
--- a/web/store/statsSlice.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { createAsyncThunk, createSlice, isAnyOf } from '@reduxjs/toolkit'
-import type { PayloadAction } from '@reduxjs/toolkit'
-import { createStandaloneToast } from '@chakra-ui/react'
-import { RootState } from './store'
-import { statsService } from '../services/statsService'
-
-const { toast } = createStandaloneToast()
-
-const initialState = {
-  loading: false,
-  data: {
-    totalApiKeyCount: 0,
-    totalDeviceCount: 0,
-    totalReceivedSMSCount: 0,
-    totalSentSMSCount: 0,
-  },
-}
-
-export const fetchStats = createAsyncThunk(
-  'gateway/fetchStats',
-  async (_, { rejectWithValue }) => {
-    try {
-      const res = await statsService.getStats()
-      return res
-    } catch (e) {
-      toast({
-        title: e.response.data.error || 'Failed to Fetch stats',
-        status: 'error',
-      })
-      return rejectWithValue(e.response.data)
-    }
-  }
-)
-
-export const statsSlice = createSlice({
-  name: 'stats',
-  initialState,
-  reducers: {},
-  extraReducers: (builder) => {
-    builder
-      .addCase(fetchStats.fulfilled, (state, action: PayloadAction<any>) => {
-        state.loading = false
-        state.data = action.payload
-      })
-      .addCase(fetchStats.rejected, (state) => {
-        state.loading = false
-      })
-      .addMatcher(isAnyOf(fetchStats.pending), (state) => {
-        state.loading = true
-      })
-  },
-})
-
-export const selectStatsLoading = (state: RootState) => state.stats.loading
-export const selectStatsData = (state: RootState) => state.stats.data
-
-export default statsSlice.reducer
diff --git a/web/store/store.ts b/web/store/store.ts
deleted file mode 100644
index 1581172..0000000
--- a/web/store/store.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { configureStore } from '@reduxjs/toolkit'
-import apiKeyReducer from './apiKeySlice'
-import authReducer from './authSlice'
-import deviceReducer from './deviceSlice'
-import statsReducer from './statsSlice'
-
-export const store = configureStore({
-  reducer: {
-    auth: authReducer,
-    apiKey: apiKeyReducer,
-    device: deviceReducer,
-    stats: statsReducer,
-  },
-})
-
-export type RootState = ReturnType<typeof store.getState>
-export type AppDispatch = typeof store.dispatch
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 223c9e3..3bdee35 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -57,6 +57,28 @@ module.exports = {
   				'4': 'hsl(var(--chart-4))',
   				'5': 'hsl(var(--chart-5))'
   			}
+  		},
+  		keyframes: {
+  			'accordion-down': {
+  				from: {
+  					height: '0'
+  				},
+  				to: {
+  					height: 'var(--radix-accordion-content-height)'
+  				}
+  			},
+  			'accordion-up': {
+  				from: {
+  					height: 'var(--radix-accordion-content-height)'
+  				},
+  				to: {
+  					height: '0'
+  				}
+  			}
+  		},
+  		animation: {
+  			'accordion-down': 'accordion-down 0.2s ease-out',
+  			'accordion-up': 'accordion-up 0.2s ease-out'
   		}
   	}
   },