diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
index 521d52f..f87b2f7 100644
--- a/app/(auth)/login/page.tsx
+++ b/app/(auth)/login/page.tsx
@@ -1,5 +1,4 @@
-import { LoginButton } from "@/components/auth/login-button";
-import { Icons } from "@/components/icons";
+import LoginPageContent from "@/components/auth/login-page-content";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -8,19 +7,5 @@ export const metadata: Metadata = {
 };
 
 export default function LoginPage() {
-  return (
-    <div className="container flex h-screen w-screen flex-col items-center justify-center">
-      <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
-        <div className="flex flex-col space-y-2 text-center">
-          <Icons.Logo className="mx-auto" />
-          <h1 className="text-2xl font-semibold tracking-tight">Welcome back</h1>
-          <p className="mb-8 text-sm text-neutral-500 dark:text-neutral-400">
-            Click to login with your Knowit AD account.
-          </p>
-        </div>
-        <div className=""></div>
-        <LoginButton />
-      </div>
-    </div>
-  );
+  return <LoginPageContent />;
 }
diff --git a/app/api-v2/user/route.ts b/app/api-v2/user/route.ts
index a7aede0..2366b9f 100644
--- a/app/api-v2/user/route.ts
+++ b/app/api-v2/user/route.ts
@@ -1,5 +1,6 @@
 import { planetscaleEdge } from "@/lib/planetscale-edge";
 import { getEdgeFriendlyToken } from "@/lib/token";
+import { createUser } from "@/lib/user";
 import { NextResponse } from "next/server";
 
 export const runtime = "edge";
@@ -22,7 +23,11 @@ export async function GET(request: Request) {
   try {
     const { rows } = await planetscaleEdge.execute("SELECT * FROM user", []);
 
-    return NextResponse.json(rows);
+    const users = rows
+      .map(row => createUser(row))
+      .sort((a, b) => new Date(b.updated).getTime() - new Date(a.updated).getTime());
+
+    return NextResponse.json(users);
   } catch (error) {
     return new Response(error, {
       status: 422
diff --git a/app/api-v2/user/work-day-detail/route.ts b/app/api-v2/user/work-day-detail/route.ts
index 9166e41..d6c5e25 100644
--- a/app/api-v2/user/work-day-detail/route.ts
+++ b/app/api-v2/user/work-day-detail/route.ts
@@ -48,8 +48,8 @@ export async function PATCH(request: NextRequest) {
         "UPDATE user_work_day_detail SET nonCommissionedHours = ?, extraHours = ?, sickDay = ? WHERE id = ?",
         [nonCommissionedHours, extraHours, sickDay, +existing.id]
       );
-      // create
-    } else {
+      // create if extra hours or non commissioned hours are greater than 0
+    } else if (extraHours > 0 || nonCommissionedHours > 0) {
       await planetscaleEdge.execute(
         "INSERT INTO user_work_day_detail (userId, date, nonCommissionedHours, extraHours, sickDay) VALUES (?, ?, ?, ?, ?)",
         [+token.id, date, nonCommissionedHours, extraHours, sickDay]
diff --git a/app/dashboard/_components/calendar-year.tsx b/app/dashboard/_components/calendar-year.tsx
index a02a796..5ff1a09 100644
--- a/app/dashboard/_components/calendar-year.tsx
+++ b/app/dashboard/_components/calendar-year.tsx
@@ -1,13 +1,12 @@
+import { buttonVariants } from "@/components/ui/button";
+import { getRequestDateNow } from "@/lib/date";
+import { cn } from "@/lib/utils";
+import { UserWorkDayDetail } from "@/types";
 import { getCalendarYear } from "@/utils/calendar-utils";
 import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
 import { getYear } from "date-fns";
 import Link from "next/link";
 import * as React from "react";
-
-import { buttonVariants } from "@/components/ui/button";
-import { getRequestDateNow } from "@/lib/date";
-import { cn } from "@/lib/utils";
-import { UserWorkDayDetail } from "@/types";
 import { CalendarMonth } from "./calendar-month";
 
 const CalendarYear: React.FC<{ date: Date; workDayDetails?: UserWorkDayDetail[] }> = ({
diff --git a/app/dashboard/_components/footer.tsx b/app/dashboard/_components/footer.tsx
index cdcf98f..ea1cb9f 100644
--- a/app/dashboard/_components/footer.tsx
+++ b/app/dashboard/_components/footer.tsx
@@ -7,8 +7,11 @@ import Link from "@/components/ui/link";
 export default function Footer() {
   return (
     <footer className="border-t border-t-neutral-700">
-      <div className="mx-auto max-w-5xl px-3 pt-4 pb-24 md:px-4 md:pt-8">
-        <Flex justify="between">
+      <div className="mx-auto max-w-5xl px-4 pt-4 pb-24 md:px-4 md:pt-8">
+        <Flex
+          className="flex-col justify-center space-y-6 md:flex-row md:justify-between md:space-y-0"
+          justify="between"
+        >
           <Box>
             <h2 className="mb-3 text-lg font-bold">Resources</h2>
             <ul className="space-y-2">
diff --git a/app/dashboard/_components/next-paycheck.tsx b/app/dashboard/_components/next-paycheck.tsx
index 45f292e..7f7dcb2 100644
--- a/app/dashboard/_components/next-paycheck.tsx
+++ b/app/dashboard/_components/next-paycheck.tsx
@@ -1,3 +1,4 @@
+import { Skeleton } from "@/components/ui/skeleton";
 import { getEdgeFriendlyToken } from "@/lib/token";
 import { getUserEarnings } from "@/lib/user";
 
@@ -6,7 +7,7 @@ export default async function NextPaycheck() {
   const userEarnings = await getUserEarnings(token.id);
 
   return (
-    <div>
+    <div className="min-w-[120px]">
       <div className="text-xs text-neutral-400">Next paycheck</div>
       <div className="text-sm">{userEarnings?.nextPayDayStatistics.payDay}</div>
       <div className="text-sm font-bold text-emerald-500">
@@ -15,3 +16,19 @@ export default async function NextPaycheck() {
     </div>
   );
 }
+
+const NextPaycheckSkeleton = () => {
+  return (
+    <div className="min-w-[120px]">
+      <div className="text-xs text-neutral-400">Next paycheck</div>
+      <div className="text-sm">
+        <Skeleton className="mb-[2px] h-[19px] w-full"></Skeleton>
+      </div>
+      <div className="text-sm font-bold">
+        <Skeleton className="h-[19px] w-24"></Skeleton>
+      </div>
+    </div>
+  );
+};
+
+export { NextPaycheckSkeleton };
diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
index cc762a3..336147e 100644
--- a/app/dashboard/layout.tsx
+++ b/app/dashboard/layout.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 import { Suspense } from "react";
 import Avatar, { AvatarSkeleton } from "./_components/avatar";
 import Footer from "./_components/footer";
-import NextPaycheck from "./_components/next-paycheck";
+import NextPaycheck, { NextPaycheckSkeleton } from "./_components/next-paycheck";
 
 export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
   return (
@@ -13,7 +13,7 @@ export default async function DashboardLayout({ children }: { children: React.Re
           <Icons.Logo className="w-full max-w-[96px] lg:max-w-[140px]" />
         </Link>
         <div className="flex gap-8">
-          <Suspense fallback={<div></div>}>
+          <Suspense fallback={<NextPaycheckSkeleton />}>
             {/* @ts-expect-error Async Server Component */}
             <NextPaycheck />
           </Suspense>
diff --git a/app/dashboard/profile/layout.tsx b/app/dashboard/profile/layout.tsx
new file mode 100644
index 0000000..cd83031
--- /dev/null
+++ b/app/dashboard/profile/layout.tsx
@@ -0,0 +1,20 @@
+import { TabNavigation } from "@/components/tab-navigation";
+import { Card } from "@/components/ui/card";
+
+export default function ProfileLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="space-y-3">
+      <TabNavigation
+        path="/dashboard/profile"
+        items={[
+          { text: "Profile", slug: "" },
+          { text: "Salary", slug: "salary" },
+          { text: "Settings", slug: "settings" }
+        ]}
+      />
+      <Card>
+        <Card.Content className="p-4">{children}</Card.Content>
+      </Card>
+    </div>
+  );
+}
diff --git a/app/dashboard/profile/page.tsx b/app/dashboard/profile/page.tsx
index 2496a16..ee2f3f6 100644
--- a/app/dashboard/profile/page.tsx
+++ b/app/dashboard/profile/page.tsx
@@ -1,6 +1,4 @@
-import { Suspense } from "react";
-import SalaryForm from "../_components/salary-form";
-import SettingsForm from "../_components/settings-form";
+import { Button } from "@/components/ui/button";
 
 export const runtime = "edge";
 export const dynamic = "force-dynamic";
@@ -12,20 +10,12 @@ export const metadata = {
 
 export default async function ProfilePage() {
   return (
-    <div className="grid grid-cols-2">
+    <div className="grid grid-cols-1 lg:grid-cols-2">
       <div>
-        <h2>Salary details</h2>
-        <Suspense fallback={<div>loading...</div>}>
-          {/* @ts-expect-error Async Server Component */}
-          <SalaryForm />
-        </Suspense>
-      </div>
-      <div>
-        <h2>Settings</h2>
-        <Suspense fallback={<div>loading...</div>}>
-          {/* @ts-expect-error Async Server Component */}
-          <SettingsForm />
-        </Suspense>
+        <p>coming...</p>
+        <Button className="mls-auto" variant="destructive">
+          Delete me
+        </Button>
       </div>
     </div>
   );
diff --git a/app/dashboard/profile/salary/page.tsx b/app/dashboard/profile/salary/page.tsx
new file mode 100644
index 0000000..79af1a0
--- /dev/null
+++ b/app/dashboard/profile/salary/page.tsx
@@ -0,0 +1,24 @@
+import { UserSalaryDetailsFormSkeleton } from "@/components/user/user-salary-details-form";
+import { Suspense } from "react";
+import SalaryForm from "../../_components/salary-form";
+
+export const runtime = "edge";
+export const dynamic = "force-dynamic";
+export const dynamicParams = true;
+
+export const metadata = {
+  title: "Profile"
+};
+
+export default async function ProfilePage() {
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2">
+      <div>
+        <Suspense fallback={<UserSalaryDetailsFormSkeleton />}>
+          {/* @ts-expect-error Async Server Component */}
+          <SalaryForm />
+        </Suspense>
+      </div>
+    </div>
+  );
+}
diff --git a/app/dashboard/profile/settings/page.tsx b/app/dashboard/profile/settings/page.tsx
new file mode 100644
index 0000000..9be1546
--- /dev/null
+++ b/app/dashboard/profile/settings/page.tsx
@@ -0,0 +1,22 @@
+import { UserSettingsFormSkeleton } from "@/components/user/user-settings-form";
+import { Suspense } from "react";
+import SettingsForm from "../../_components/settings-form";
+
+export const runtime = "edge";
+export const dynamic = "force-dynamic";
+export const dynamicParams = true;
+
+export const metadata = {
+  title: "Settings"
+};
+
+export default async function SettingsPage() {
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2">
+      <Suspense fallback={<UserSettingsFormSkeleton />}>
+        {/* @ts-expect-error Async Server Component */}
+        <SettingsForm />
+      </Suspense>
+    </div>
+  );
+}
diff --git a/components/auth/login-button.tsx b/components/auth/login-button.tsx
index adb99d8..16549a0 100644
--- a/components/auth/login-button.tsx
+++ b/components/auth/login-button.tsx
@@ -4,19 +4,28 @@ import { signIn } from "next-auth/react";
 import { useSearchParams } from "next/navigation";
 import { Button } from "../ui/button";
 
-function LoginButton() {
+function LoginButton({
+  children,
+  onLoginClicked = () => {},
+  ...other
+}: React.ComponentPropsWithoutRef<typeof Button> & {
+  children?: React.ReactNode;
+  onLoginClicked?: () => void;
+}) {
   const searchParams = useSearchParams();
 
   return (
     <Button
-      onClick={async () =>
+      onClick={async () => {
+        onLoginClicked?.();
         signIn("azure-ad", {
           redirect: false,
           callbackUrl: searchParams?.get("from") || "/dashboard"
-        })
-      }
+        });
+      }}
+      {...other}
     >
-      Login
+      {children ?? "Login"}
     </Button>
   );
 }
diff --git a/components/auth/login-page-content.tsx b/components/auth/login-page-content.tsx
new file mode 100644
index 0000000..676d486
--- /dev/null
+++ b/components/auth/login-page-content.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { LoginButton } from "@/components/auth/login-button";
+import { Icons } from "@/components/icons";
+import { Show } from "@/components/ui/show";
+import { useState } from "react";
+
+export default function LoginPageContent() {
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+
+  return (
+    <div className="container flex h-screen w-screen flex-col items-center justify-center">
+      <div className="mx-auto flex w-full flex-col justify-center space-y-6 md:max-w-[400px]">
+        <div className="flex flex-col space-y-2 text-center">
+          <Icons.Logo className="mx-auto" />
+          <h1 className="text-2xl font-semibold tracking-tight">
+            {isLoggingIn ? "Logging you in" : "Welcome back"}
+          </h1>
+          <p className="mb-8 text-sm text-neutral-500 dark:text-neutral-400">
+            {isLoggingIn
+              ? "This may take a few seconds, please don't close this page."
+              : "Click to login with your Knowit AD account."}
+          </p>
+        </div>
+        <LoginButton
+          className="mx-auto w-full max-w-[300px]"
+          disabled={isLoggingIn}
+          onLoginClicked={() => setIsLoggingIn(true)}
+        >
+          {isLoggingIn ? "Logging you in..." : "Login with Knowit AD"}
+          <Show when={isLoggingIn}>
+            <Icons.Loader className="ml-2 h-4 w-4" />
+          </Show>
+        </LoginButton>
+      </div>
+    </div>
+  );
+}
diff --git a/components/icons.tsx b/components/icons.tsx
index 0770766..6faacdc 100644
--- a/components/icons.tsx
+++ b/components/icons.tsx
@@ -51,7 +51,7 @@ export const Icons = {
   Rocket: RocketIcon,
   CheckCircled: CheckCircledIcon,
   MinusCircled: MinusCircledIcon,
-  Loader: ({ className, ...other }) => (
+  Loader: ({ className, ...other }: Icon) => (
     <svg
       className={cn("fill-current", className)}
       xmlns="http://www.w3.org/2000/svg"
diff --git a/components/tab-navigation.tsx b/components/tab-navigation.tsx
new file mode 100644
index 0000000..ac059db
--- /dev/null
+++ b/components/tab-navigation.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+export type Item = {
+  text: string;
+  slug?: string;
+  segment?: string;
+};
+
+import Link from "next/link";
+import { useSelectedLayoutSegment } from "next/navigation";
+import { buttonVariants } from "./ui/button";
+
+const TabNavigationItem = ({ path, item }: { path: string; item: Item }) => {
+  const segment = useSelectedLayoutSegment();
+  const href = item.slug ? path + "/" + item.slug : path;
+  const isActive =
+    // Example home pages e.g. `/layouts`
+    (!item.slug && segment === null) ||
+    segment === item.segment ||
+    // Nested pages e.g. `/layouts/electronics`
+    segment === item.slug;
+
+  return (
+    <Link href={href} className={buttonVariants({ variant: isActive ? "default" : "outline" })}>
+      {item.text}
+    </Link>
+  );
+};
+
+const TabNavigation = ({ path, items }: { path: string; items: Item[] }) => {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      {items.map(item => (
+        <TabNavigationItem key={path + item.slug} item={item} path={path} />
+      ))}
+    </div>
+  );
+};
+
+export { TabNavigation };
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
index f362f08..da43096 100644
--- a/components/theme-provider.tsx
+++ b/components/theme-provider.tsx
@@ -1,8 +1,8 @@
-"use client"
+"use client";
 
-import { ThemeProvider as NextThemesProvider } from "next-themes"
-import { ThemeProviderProps } from "next-themes/dist/types"
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { ThemeProviderProps } from "next-themes/dist/types";
 
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+export function ThemeProvider({ children, ...other }: ThemeProviderProps) {
+  return <NextThemesProvider {...other}>{children}</NextThemesProvider>;
 }
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
new file mode 100644
index 0000000..95c3838
--- /dev/null
+++ b/components/ui/avatar.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
+
+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-12 w-12 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-neutral-100 dark:bg-neutral-800",
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 8654462..c7b1642 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -2,6 +2,7 @@ import { cva, VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
+import { Skeleton } from "./skeleton";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 dark:hover:bg-neutral-800 dark:hover:text-neutral-100 disabled:opacity-50 dark:focus:ring-neutral-400 disabled:pointer-events-none dark:focus:ring-offset-neutral-900 data-[state=open]:bg-neutral-100 dark:data-[state=open]:bg-neutral-800",
@@ -9,12 +10,14 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-neutral-900 text-white hover:bg-neutral-700 dark:bg-neutral-200 dark:text-neutral-900",
-        destructive: "bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600",
+          "bg-neutral-100 text-neutral-900 hover:bg-neutral-200 border border-neutral-700 dark:bg-neutral-950 dark:hover:bg-neutral-950 dark:hover:border-neutral-500 dark:text-neutral-50",
+        action:
+          "bg-neutral-900 text-white hover:bg-neutral-700 dark:bg-neutral-300 dark:text-neutral-950",
+        destructive: "bg-red-600 text-white hover:bg-red-700 dark:hover:bg-red-700",
         outline:
           "bg-transparent border border-neutral-200 hover:bg-neutral-100 dark:border-neutral-700 dark:text-neutral-100",
         subtle:
-          "bg-neutral-100 text-neutral-900 hover:bg-neutral-200 dark:bg-neutral-700 dark:text-neutral-100",
+          "bg-neutral-100 text-neutral-900 hover:bg-neutral-200 border border-neutral-700 dark:bg-neutral-800 dark:hover:bg-neutral-800 dark:hover:border-neutral-500 dark:text-neutral-50",
         ghost:
           "bg-transparent hover:bg-neutral-100 dark:hover:bg-neutral-800 dark:text-neutral-100 dark:hover:text-neutral-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent",
         link: "bg-transparent underline-offset-4 hover:underline text-neutral-900 dark:text-neutral-100 hover:bg-transparent dark:hover:bg-transparent"
@@ -37,12 +40,22 @@ export interface ButtonProps
     VariantProps<typeof buttonVariants> {}
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, ...props }, ref) => {
+  ({ className, variant, size, ...other }, ref) => {
     return (
-      <button className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+      <button className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...other} />
     );
   }
 );
 Button.displayName = "Button";
 
-export { Button, buttonVariants };
+const ButtonSkeleton = ({
+  className,
+  ...other
+}: React.ComponentPropsWithoutRef<typeof Skeleton>) => (
+  <Skeleton
+    className={cn("h-10 w-44 rounded-md border border-neutral-700", className)}
+    {...other}
+  />
+);
+
+export { Button, buttonVariants, ButtonSkeleton };
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index cff9709..bca0a1d 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -1,57 +1,64 @@
 import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
 
-interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "default" | "subtle";
+}
 
-export function Card({ className, ...props }: CardProps) {
+export function Card({ className, variant = "default", ...other }: CardProps) {
   return (
     <div
       className={cn(
         "overflow-hidden rounded-lg border dark:border-neutral-700 dark:bg-neutral-950",
+        {
+          "dark:border-neutral-700 dark:bg-neutral-950": variant === "default",
+          "bg-neutral-100 text-neutral-900 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-100":
+            variant === "subtle"
+        },
         className
       )}
-      {...props}
+      {...other}
     />
   );
 }
 
 interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
 
-Card.Header = function CardHeader({ className, ...props }: CardHeaderProps) {
-  return <div className={cn("grid gap-1 p-6", className)} {...props} />;
+Card.Header = function CardHeader({ className, ...other }: CardHeaderProps) {
+  return <div className={cn("grid gap-1 p-6", className)} {...other} />;
 };
 
 interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}
 
-Card.Content = function CardContent({ className, ...props }: CardContentProps) {
-  return <div className={cn("px-6 pb-4 ", className)} {...props} />;
+Card.Content = function CardContent({ className, ...other }: CardContentProps) {
+  return <div className={cn("px-6 pb-4 ", className)} {...other} />;
 };
 
 interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
 
-Card.Footer = function CardFooter({ className, ...props }: CardFooterProps) {
+Card.Footer = function CardFooter({ className, ...other }: CardFooterProps) {
   return (
     <div
       className={cn(
         "border-t border-neutral-700 bg-neutral-50 px-6 py-4 dark:bg-neutral-800",
         className
       )}
-      {...props}
+      {...other}
     />
   );
 };
 
 interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
 
-Card.Title = function CardTitle({ className, ...props }: CardTitleProps) {
-  return <h4 className={cn("text-lg font-medium", className)} {...props} />;
+Card.Title = function CardTitle({ className, ...other }: CardTitleProps) {
+  return <h4 className={cn("text-lg font-medium", className)} {...other} />;
 };
 
 interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}
 
-Card.Description = function CardDescription({ className, ...props }: CardDescriptionProps) {
+Card.Description = function CardDescription({ className, ...other }: CardDescriptionProps) {
   return (
-    <p className={cn("text-sm text-neutral-600 dark:text-neutral-300", className)} {...props} />
+    <p className={cn("text-sm text-neutral-600 dark:text-neutral-300", className)} {...other} />
   );
 };
 
diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
index 562796a..b3e7c45 100644
--- a/components/ui/checkbox.tsx
+++ b/components/ui/checkbox.tsx
@@ -9,14 +9,14 @@ import { Icons } from "../icons";
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
+>(({ className, ...other }, ref) => (
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
       "peer h-5 w-5 shrink-0 rounded-sm border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:text-neutral-50 dark:focus:ring-neutral-400 dark:focus:ring-offset-neutral-900",
       className
     )}
-    {...props}
+    {...other}
   >
     <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center")}>
       <Icons.Check className="h-5 w-5" />
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index a40fae4..14d7826 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -10,8 +10,8 @@ const Dialog = DialogPrimitive.Root;
 
 const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = ({ className, children, ...props }: DialogPrimitive.DialogPortalProps) => (
-  <DialogPrimitive.Portal className={cn(className)} {...props}>
+const DialogPortal = ({ className, children, ...other }: DialogPrimitive.DialogPortalProps) => (
+  <DialogPrimitive.Portal className={cn(className)} {...other}>
     <div className="fixed inset-0 z-50 flex items-start justify-center sm:items-center">
       {children}
     </div>
@@ -22,13 +22,13 @@ DialogPortal.displayName = DialogPrimitive.Portal.displayName;
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, children, ...props }, ref) => (
+>(({ className, children, ...other }, ref) => (
   <DialogPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 bg-neutral-950/50 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=open]:fade-in data-[state=closed]:fade-out",
       className
     )}
-    {...props}
+    {...other}
     ref={ref}
   />
 ));
@@ -37,7 +37,7 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+>(({ className, children, ...other }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
@@ -47,7 +47,7 @@ const DialogContent = React.forwardRef<
         "dark:bg-neutral-900",
         className
       )}
-      {...props}
+      {...other}
     >
       {children}
       <DialogPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 dark:focus:ring-neutral-400 dark:focus:ring-offset-neutral-900 dark:data-[state=open]:bg-neutral-800">
@@ -59,15 +59,15 @@ const DialogContent = React.forwardRef<
 ));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+const DialogHeader = ({ className, ...other }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...other} />
 );
 DialogHeader.displayName = "DialogHeader";
 
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+const DialogFooter = ({ className, ...other }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-    {...props}
+    {...other}
   />
 );
 DialogFooter.displayName = "DialogFooter";
@@ -75,11 +75,11 @@ DialogFooter.displayName = "DialogFooter";
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
+>(({ className, ...other }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
     className={cn("text-lg font-semibold text-neutral-900", "dark:text-neutral-50", className)}
-    {...props}
+    {...other}
   />
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
@@ -87,11 +87,11 @@ DialogTitle.displayName = DialogPrimitive.Title.displayName;
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
+>(({ className, ...other }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
     className={cn("text-sm text-neutral-500", "dark:text-neutral-400", className)}
-    {...props}
+    {...other}
   />
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
diff --git a/components/ui/hover-card.tsx b/components/ui/hover-card.tsx
index b977d8e..2e3c0d9 100644
--- a/components/ui/hover-card.tsx
+++ b/components/ui/hover-card.tsx
@@ -12,7 +12,7 @@ const HoverCardTrigger = HoverCardPrimitive.Trigger;
 const HoverCardContent = React.forwardRef<
   React.ElementRef<typeof HoverCardPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ children, className, align = "center", sideOffset = 4, ...props }, ref) => (
+>(({ children, className, align = "center", sideOffset = 4, ...other }, ref) => (
   <HoverCardPrimitive.Content
     ref={ref}
     align={align}
@@ -21,7 +21,7 @@ const HoverCardContent = React.forwardRef<
       "z-50 rounded-md border border-neutral-100 bg-white p-2 text-sm shadow-md outline-none animate-in zoom-in-90 dark:border-neutral-700 dark:bg-neutral-900",
       className
     )}
-    {...props}
+    {...other}
   >
     {children}
     <HoverCardPrimitive.Arrow className="fill-current text-neutral-700" />
diff --git a/components/ui/info-button.tsx b/components/ui/info-button.tsx
index ca9c5c6..1f93102 100644
--- a/components/ui/info-button.tsx
+++ b/components/ui/info-button.tsx
@@ -30,14 +30,14 @@ export type InfoButtonProps = React.ComponentPropsWithoutRef<typeof Button> &
   VariantProps<typeof infoButtonVariants>;
 
 const InfoButton = React.forwardRef<React.ElementRef<"button">, InfoButtonProps>(
-  ({ children, className, variant, size, ...props }, ref) => {
+  ({ children, className, variant, size, ...other }, ref) => {
     return (
       <Popover>
         <PopoverTrigger asChild>
           <button
             className={cn(infoButtonVariants({ variant, size, className }))}
             ref={ref}
-            {...props}
+            {...other}
           >
             <Icons.Info />
           </button>
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
index 1238725..d83e6f5 100644
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -4,7 +4,7 @@ import { cn } from "@/lib/utils";
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => {
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...other }, ref) => {
   return (
     <input
       className={cn(
@@ -12,7 +12,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...pr
         className
       )}
       ref={ref}
-      {...props}
+      {...other}
     />
   );
 });
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
index eb1760b..b363cdf 100644
--- a/components/ui/label.tsx
+++ b/components/ui/label.tsx
@@ -8,14 +8,14 @@ import { cn } from "@/lib/utils";
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => (
+>(({ className, ...other }, ref) => (
   <LabelPrimitive.Root
     ref={ref}
     className={cn(
       "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
       className
     )}
-    {...props}
+    {...other}
   />
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx
index 475cf98..3bc4013 100644
--- a/components/ui/popover.tsx
+++ b/components/ui/popover.tsx
@@ -12,7 +12,7 @@ const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+>(({ className, align = "center", sideOffset = 4, ...other }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
@@ -22,7 +22,7 @@ const PopoverContent = React.forwardRef<
         "z-50 w-72 rounded-md border border-neutral-100 bg-white p-4 shadow-md outline-none animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 dark:border-neutral-700 dark:bg-neutral-950",
         className
       )}
-      {...props}
+      {...other}
     />
   </PopoverPrimitive.Portal>
 ));
@@ -32,10 +32,10 @@ PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 const PopoverArrow = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Arrow>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>
->(({ className, ...props }, ref) => (
+>(({ className, ...other }, ref) => (
   <PopoverPrimitive.Arrow
     className={cn("fill-current text-neutral-700", className)}
-    {...props}
+    {...other}
     ref={ref}
   />
 ));
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index d97784f..85b0506 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -14,14 +14,14 @@ const SelectValue = SelectPrimitive.Value;
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+>(({ className, children, ...other }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
       "flex h-10 w-full items-center justify-between gap-2 rounded-md border border-neutral-500 bg-transparent py-2 px-3 text-sm placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:text-neutral-50 dark:focus:ring-neutral-400 dark:focus:ring-offset-neutral-900",
       className
     )}
-    {...props}
+    {...other}
   >
     {children}
     <ChevronDownIcon className="h-4 w-4 opacity-50" />
@@ -33,7 +33,7 @@ SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+>(({ className, children, ...other }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       ref={ref}
@@ -41,7 +41,7 @@ const SelectContent = React.forwardRef<
         "relative z-50 overflow-hidden rounded-md border border-neutral-100 bg-white text-neutral-700 shadow-md animate-in fade-in-80 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-50",
         className
       )}
-      {...props}
+      {...other}
     >
       <SelectPrimitive.ScrollUpButton className="flex w-full justify-center py-2">
         <ChevronUpIcon />
@@ -58,11 +58,11 @@ SelectContent.displayName = SelectPrimitive.Content.displayName;
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
+>(({ className, ...other }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
     className={cn("py-1.5 pr-2 pl-8 text-sm text-neutral-900 dark:text-neutral-500", className)}
-    {...props}
+    {...other}
   />
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
@@ -70,14 +70,14 @@ SelectLabel.displayName = SelectPrimitive.Label.displayName;
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
+>(({ className, children, ...other }, ref) => (
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-neutral-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-700",
       className
     )}
-    {...props}
+    {...other}
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
@@ -93,11 +93,11 @@ SelectItem.displayName = SelectPrimitive.Item.displayName;
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
+>(({ className, ...other }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
     className={cn("-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-700", className)}
-    {...props}
+    {...other}
   />
 ));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
index 51bd4ae..153ece0 100644
--- a/components/ui/separator.tsx
+++ b/components/ui/separator.tsx
@@ -8,7 +8,7 @@ import { cn } from "@/lib/utils";
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+>(({ className, orientation = "horizontal", decorative = true, ...other }, ref) => (
   <SeparatorPrimitive.Root
     ref={ref}
     decorative={decorative}
@@ -18,7 +18,7 @@ const Separator = React.forwardRef<
       orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
       className
     )}
-    {...props}
+    {...other}
   />
 ));
 Separator.displayName = SeparatorPrimitive.Root.displayName;
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
index dbf9bf3..552ebef 100644
--- a/components/ui/skeleton.tsx
+++ b/components/ui/skeleton.tsx
@@ -2,11 +2,11 @@ import { cn } from "@/lib/utils";
 
 interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {}
 
-export function Skeleton({ className, ...props }: SkeletonProps) {
+export function Skeleton({ className, ...other }: SkeletonProps) {
   return (
     <div
-      className={cn("h-5 w-2/5 animate-pulse rounded-lg bg-neutral-700", className)}
-      {...props}
+      className={cn("h-5 w-2/5 animate-pulse rounded-md bg-neutral-800", className)}
+      {...other}
     />
   );
 }
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
new file mode 100644
index 0000000..1e31a8f
--- /dev/null
+++ b/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+
+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 items-center justify-center rounded-md bg-neutral-100 p-1 dark:bg-neutral-800",
+      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
+    className={cn(
+      "inline-flex min-w-[100px] items-center justify-center rounded-[0.185rem] px-3 py-1.5  text-sm font-medium text-neutral-700 transition-all  disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-neutral-900 data-[state=active]:shadow-sm dark:text-neutral-200 dark:data-[state=active]:bg-neutral-900 dark:data-[state=active]:text-neutral-100",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    className={cn(
+      "mt-2 rounded-md border border-neutral-200 p-6 dark:border-neutral-700",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
index 8ec14e9..6d1e03c 100644
--- a/components/ui/toast.tsx
+++ b/components/ui/toast.tsx
@@ -10,14 +10,14 @@ const ToastProvider = ToastPrimitives.Provider;
 const ToastViewport = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Viewport>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
+>(({ className, ...other }, ref) => (
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:bottom-0 sm:right-0 sm:flex-col md:max-w-[420px]",
       className
     )}
-    {...props}
+    {...other}
   />
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
@@ -42,12 +42,12 @@ const toastVariants = cva(
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
+>(({ className, variant, ...other }, ref) => {
   return (
     <ToastPrimitives.Root
       ref={ref}
       className={cn(toastVariants({ variant }), className)}
-      {...props}
+      {...other}
     />
   );
 });
@@ -56,7 +56,7 @@ Toast.displayName = ToastPrimitives.Root.displayName;
 const ToastAction = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Action>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
+>(({ className, ...other }, ref) => (
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
@@ -65,7 +65,7 @@ const ToastAction = React.forwardRef<
       "group-[.success]:border-emerald-100 group-[.success]:hover:border-neutral-900 group-[.success]:hover:bg-emerald-100 group-[.success]:hover:text-emerald-600 group-[.success]:focus:ring-emerald-400 group-[.success]:focus:ring-offset-emerald-600",
       className
     )}
-    {...props}
+    {...other}
   />
 ));
 ToastAction.displayName = ToastPrimitives.Action.displayName;
@@ -73,7 +73,7 @@ ToastAction.displayName = ToastPrimitives.Action.displayName;
 const ToastClose = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Close>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
+>(({ className, ...other }, ref) => (
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
@@ -83,7 +83,7 @@ const ToastClose = React.forwardRef<
       className
     )}
     toast-close=""
-    {...props}
+    {...other}
   >
     <Icons.Close className="h-4 w-4" />
   </ToastPrimitives.Close>
@@ -93,19 +93,19 @@ 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", className)} {...props} />
+>(({ className, ...other }, ref) => (
+  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...other} />
 ));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
 
 const ToastDescription = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Description>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
+>(({ className, ...other }, ref) => (
   <ToastPrimitives.Description
     ref={ref}
     className={cn("text-sm opacity-90", className)}
-    {...props}
+    {...other}
   />
 ));
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
diff --git a/components/ui/toaster.tsx b/components/ui/toaster.tsx
index 3f356c1..b1ec050 100644
--- a/components/ui/toaster.tsx
+++ b/components/ui/toaster.tsx
@@ -16,9 +16,9 @@ export function Toaster() {
 
   return (
     <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
+      {toasts.map(function ({ id, title, description, action, ...other }) {
         return (
-          <Toast key={id} {...props}>
+          <Toast key={id} {...other}>
             <div className="grid gap-1">
               {title && <ToastTitle>{title}</ToastTitle>}
               {description && <ToastDescription>{description}</ToastDescription>}
diff --git a/components/user/user-avatar.tsx b/components/user/user-avatar.tsx
index 2992823..ef7d741 100644
--- a/components/user/user-avatar.tsx
+++ b/components/user/user-avatar.tsx
@@ -1,12 +1,12 @@
 "use client";
 
 import { ThemeSelect } from "@/components/theme-select";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Popover, PopoverArrow, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Separator } from "@/components/ui/separator";
-import { GearIcon } from "@radix-ui/react-icons";
+import { getInitials } from "@/utils/common-utils";
 import { signOut } from "next-auth/react";
-import Image from "next/image";
 import Link from "next/link";
 
 function UserAvatar({ name, src }: { name?: string; src?: string }) {
@@ -14,17 +14,10 @@ function UserAvatar({ name, src }: { name?: string; src?: string }) {
     <Popover>
       <PopoverTrigger asChild>
         <Button variant="outline" className="h-12 w-12 rounded-full p-0">
-          {src ? (
-            <Image
-              className="aspect-square rounded-full p-0"
-              src={src}
-              alt="User avatar"
-              width={48}
-              height={48}
-            />
-          ) : (
-            <GearIcon className="h-6 w-6" />
-          )}
+          <Avatar>
+            <AvatarImage src={src} alt={`Avatar image of ${name}`} />
+            <AvatarFallback delayMs={500}>{getInitials(name)}</AvatarFallback>
+          </Avatar>
           <span className="sr-only">Open popover</span>
         </Button>
       </PopoverTrigger>
diff --git a/components/user/user-edit-salary-details-dialog.tsx b/components/user/user-edit-salary-details-dialog.tsx
index 39d2482..fd0d5ee 100644
--- a/components/user/user-edit-salary-details-dialog.tsx
+++ b/components/user/user-edit-salary-details-dialog.tsx
@@ -12,6 +12,7 @@ import {
 import { User } from "@/types";
 import { useState } from "react";
 import { Icons } from "../icons";
+import Link from "../ui/link";
 import { UserSalaryDetailsForm } from "./user-salary-details-form";
 
 export function UserEditSalaryDetailsDialog({
@@ -34,7 +35,12 @@ export function UserEditSalaryDetailsDialog({
         <DialogHeader>
           <DialogTitle>Edit salary details</DialogTitle>
           <DialogDescription>
-            Make changes to your profile here. Click save when you&apos;re done.
+            Make changes to your salary details here. Click save when you&apos;re done. You can view
+            your{" "}
+            <Link className="underline underline-offset-2" href="/dashboard/profile">
+              profile here
+            </Link>
+            .
           </DialogDescription>
         </DialogHeader>
         <UserSalaryDetailsForm
diff --git a/components/user/user-edit-work-day-detail-dialog.tsx b/components/user/user-edit-work-day-detail-dialog.tsx
index 0569d88..222df12 100644
--- a/components/user/user-edit-work-day-detail-dialog.tsx
+++ b/components/user/user-edit-work-day-detail-dialog.tsx
@@ -34,7 +34,7 @@ export function UserEditWorkDayDetailDialog({
         <DialogTitle>{calendarDay.formattedDate}</DialogTitle>
         <DialogDescription>Edit work day details</DialogDescription>
         <UserWorkDayDetailForm
-          date={calendarDay.formattedDate}
+          calendarDay={calendarDay}
           userWorkDayDetail={calendarDay.workDayDetails}
           onFormSubmitSuccess={() => {
             if (closeDialogOnFormSubmitSuccess) {
diff --git a/components/user/user-salary-details-form.tsx b/components/user/user-salary-details-form.tsx
index 409158a..398fac5 100644
--- a/components/user/user-salary-details-form.tsx
+++ b/components/user/user-salary-details-form.tsx
@@ -8,13 +8,16 @@ import { useForm } from "react-hook-form";
 import * as z from "zod";
 
 import { Icons } from "@/components/icons";
-import { Button } from "@/components/ui/button";
+import { Button, ButtonSkeleton } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import EARNING_CONSTANTS from "@/constants/earning-constants";
 import { cn } from "@/lib/utils";
 import { userSalaryDetailSchema } from "@/lib/validations/user";
 import { useState, useTransition, type HTMLAttributes } from "react";
+import { InfoButton } from "../ui/info-button";
 import { Show } from "../ui/show";
+import { Skeleton } from "../ui/skeleton";
 
 interface UserSalaryDetailsFormProps extends HTMLAttributes<HTMLFormElement> {
   user: {
@@ -33,7 +36,7 @@ export function UserSalaryDetailsForm({
   user,
   className,
   onFormSubmitSuccess,
-  ...props
+  ...other
 }: UserSalaryDetailsFormProps) {
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
@@ -98,14 +101,14 @@ export function UserSalaryDetailsForm({
     <form
       className={cn("flex flex-col gap-y-2", className)}
       onSubmit={handleSubmit(onSubmit)}
-      {...props}
+      {...other}
     >
-      <div className="">
+      <div className="w-full max-w-[400px]">
         <Label htmlFor="name">Hourly rate</Label>
         <Input
           id="name"
           type="number"
-          className="w-full max-w-[400px]"
+          className="w-full"
           size={32}
           {...register("hourlyRate", {
             valueAsNumber: true
@@ -115,13 +118,13 @@ export function UserSalaryDetailsForm({
           <p className="px-1 text-xs text-red-600">{errors.hourlyRate.message}</p>
         )}
       </div>
-      <div className="">
+      <div className="w-full max-w-[400px]">
         <Label htmlFor="name">Commission</Label>
         <Input
           id="name"
           type="number"
           step="0.01"
-          className="w-full max-w-[400px]"
+          className="w-full"
           size={32}
           {...register("commission", {
             valueAsNumber: true
@@ -131,13 +134,13 @@ export function UserSalaryDetailsForm({
           <p className="px-1 text-xs text-red-600">{errors.commission.message}</p>
         )}
       </div>
-      <div className="">
+      <div className="w-full max-w-[400px]">
         <Label htmlFor="name">Tax</Label>
         <Input
           id="name"
           type="number"
           step="0.01"
-          className="w-full max-w-[400px]"
+          className="w-full"
           size={32}
           {...register("tax", {
             valueAsNumber: true
@@ -145,13 +148,20 @@ export function UserSalaryDetailsForm({
         />
         {errors?.tax && <p className="px-1 text-xs text-red-600">{errors.tax.message}</p>}
       </div>
-      <div className="">
-        <Label htmlFor="name">Work hours</Label>
+      <div className="w-full max-w-[400px]">
+        <div className="flex items-center justify-between">
+          <Label htmlFor="name">Work hours</Label>
+          <InfoButton size="sm">
+            The standard work hours for consultants is {EARNING_CONSTANTS.WORK_HOURS_PER_DAY} hours
+            per day. However, some consultants may have their lunch covered by their employers,
+            which means their work hours per day will be 8 hours.
+          </InfoButton>
+        </div>
         <Input
           id="name"
           type="number"
           step="0.5"
-          className="w-full max-w-[400px]"
+          className="w-full"
           size={32}
           {...register("workHours", {
             valueAsNumber: true
@@ -161,7 +171,7 @@ export function UserSalaryDetailsForm({
           <p className="px-1 text-xs text-red-600">{errors.workHours.message}</p>
         )}
       </div>
-      <Button className="mt-4" type="submit" disabled={isSaving || isPending}>
+      <Button className="mt-4" type="submit" disabled={isSaving || isPending} variant="subtle">
         <span>Save</span>
         <Show when={!isSaving && !isPending}>
           <Icons.Check className="ml-2 h-4 w-4" />
@@ -173,3 +183,32 @@ export function UserSalaryDetailsForm({
     </form>
   );
 }
+
+const UserSalaryDetailsFormSkeleton = () => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      <div className="flex h-[64px] w-full max-w-[400px] flex-col justify-between">
+        <Skeleton className="mt-1 h-[17px] w-24" />
+        <Skeleton className="h-[40px] w-full" />
+      </div>
+      <div className="flex h-[64px] w-full max-w-[400px] flex-col justify-between">
+        <Skeleton className="mt-1 h-[17px] w-24" />
+        <Skeleton className="h-[40px] w-full" />
+      </div>
+      <div className="flex h-[64px] w-full max-w-[400px] flex-col justify-between">
+        <Skeleton className="mt-1 h-[17px] w-24" />
+        <Skeleton className="h-[40px] w-full" />
+      </div>
+      <div className="flex h-[68px] w-full max-w-[400px] flex-col justify-between">
+        <div className="flex items-center justify-between">
+          <Skeleton className="mt-1 h-[17px] w-24" />
+          <Skeleton className="mt-1 h-[15px] w-[15px]" />
+        </div>
+        <Skeleton className="h-[40px] w-full" />
+      </div>
+      <ButtonSkeleton className="mt-4" />
+    </div>
+  );
+};
+
+export { UserSalaryDetailsFormSkeleton };
diff --git a/components/user/user-settings-form.tsx b/components/user/user-settings-form.tsx
index f335f8b..450e0bd 100644
--- a/components/user/user-settings-form.tsx
+++ b/components/user/user-settings-form.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Icons } from "@/components/icons";
-import { Button } from "@/components/ui/button";
+import { Button, ButtonSkeleton } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { toast } from "@/hooks/use-toast";
 import { cn } from "@/lib/utils";
@@ -15,6 +15,7 @@ import * as z from "zod";
 import { Checkbox } from "../ui/checkbox";
 import { InfoButton } from "../ui/info-button";
 import { Show } from "../ui/show";
+import { Skeleton } from "../ui/skeleton";
 
 interface UserSettingsFormProps extends HTMLAttributes<HTMLFormElement> {
   userSettings: UserSettings;
@@ -22,7 +23,7 @@ interface UserSettingsFormProps extends HTMLAttributes<HTMLFormElement> {
 
 type FormData = z.infer<typeof userSettingsSchema>;
 
-export function UserSettingsForm({ userSettings, className, ...props }: UserSettingsFormProps) {
+export function UserSettingsForm({ userSettings, className, ...other }: UserSettingsFormProps) {
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
 
@@ -83,7 +84,7 @@ export function UserSettingsForm({ userSettings, className, ...props }: UserSett
     <form
       className={cn("flex flex-col gap-y-2", className)}
       onSubmit={handleSubmit(onSubmit)}
-      {...props}
+      {...other}
     >
       <div className={cn("flex items-center gap-3")}>
         <Checkbox
@@ -94,11 +95,9 @@ export function UserSettingsForm({ userSettings, className, ...props }: UserSett
           }
           {...register("closeUserSalaryDialogOnSaveSuccess", {})}
         />
-        <Label htmlFor="closeUserSalaryDialogOnSaveSuccess">
-          Close user salary dialog on save success?
-        </Label>
+        <Label htmlFor="closeUserSalaryDialogOnSaveSuccess">Auto close user salary dialog</Label>
         <InfoButton>
-          <></>
+          Automatically close the user salary dialog after successfully saving.
         </InfoButton>
         {errors?.closeUserSalaryDialogOnSaveSuccess && (
           <p className="px-1 text-xs text-red-600">
@@ -116,10 +115,10 @@ export function UserSettingsForm({ userSettings, className, ...props }: UserSett
           {...register("closeUserWorkDayDetailsDialogOnSaveSuccess", {})}
         />
         <Label htmlFor="closeUserWorkDayDetailsDialogOnSaveSuccess">
-          Close user work day details dialog on save success?
+          Auto close work day details dialog
         </Label>
         <InfoButton>
-          <></>
+          Automatically close the work day details dialog after successfully saving.
         </InfoButton>
         {errors?.closeUserWorkDayDetailsDialogOnSaveSuccess && (
           <p className="px-1 text-xs text-red-600">
@@ -127,7 +126,7 @@ export function UserSettingsForm({ userSettings, className, ...props }: UserSett
           </p>
         )}
       </div>
-      <Button className="mt-4" type="submit" disabled={isSaving || isPending}>
+      <Button className="mt-4" type="submit" disabled={isSaving || isPending} variant="subtle">
         <span>Save</span>
         <Show when={!isSaving && !isPending}>
           <Icons.Check className="ml-2 h-4 w-4" />
@@ -139,3 +138,23 @@ export function UserSettingsForm({ userSettings, className, ...props }: UserSett
     </form>
   );
 }
+
+const UserSettingsFormSkeleton = () => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      <div className="flex h-[36px] items-center gap-3">
+        <Skeleton className="h-[20px] w-[20px] rounded-none" />
+        <Skeleton className="h-[20px] w-44" />
+        <Skeleton className="h-[20px] w-[20px]" />
+      </div>
+      <div className="flex h-[36px] items-center gap-3">
+        <Skeleton className="h-[20px] w-[20px] rounded-none" />
+        <Skeleton className="h-[20px] w-48" />
+        <Skeleton className="h-[20px] w-[20px]" />
+      </div>
+      <ButtonSkeleton className="mt-4" />
+    </div>
+  );
+};
+
+export { UserSettingsFormSkeleton };
diff --git a/components/user/user-work-day-detail-form.tsx b/components/user/user-work-day-detail-form.tsx
index 617d058..305015a 100644
--- a/components/user/user-work-day-detail-form.tsx
+++ b/components/user/user-work-day-detail-form.tsx
@@ -2,36 +2,38 @@
 
 import { Icons } from "@/components/icons";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { InfoButton } from "@/components/ui/info-button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import Link from "@/components/ui/link";
+import { Show } from "@/components/ui/show";
 import { toast } from "@/hooks/use-toast";
 import { cn } from "@/lib/utils";
 import { userWorkDayDetailSchema } from "@/lib/validations/user";
-import { UserWorkDayDetail } from "@/types";
+import { CalendarEntries, UserWorkDayDetail } from "@/types";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useEffect, useState, useTransition, type HTMLAttributes } from "react";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
-import { Checkbox } from "../ui/checkbox";
-import { InfoButton } from "../ui/info-button";
-import Link from "../ui/link";
-import { Show } from "../ui/show";
 
 interface UserWorkDayDetailFormProps extends HTMLAttributes<HTMLFormElement> {
-  date: string;
+  calendarDay: CalendarEntries;
   userWorkDayDetail?: UserWorkDayDetail;
+  isWorkDay?: boolean;
   onFormSubmitSuccess?: () => void;
 }
 
 type FormData = z.infer<typeof userWorkDayDetailSchema>;
 
 export function UserWorkDayDetailForm({
-  date,
+  calendarDay,
   userWorkDayDetail,
+  isWorkDay = false,
   className,
   onFormSubmitSuccess,
-  ...props
+  ...other
 }: UserWorkDayDetailFormProps) {
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
@@ -46,7 +48,7 @@ export function UserWorkDayDetailForm({
     resolver: zodResolver(userWorkDayDetailSchema),
     defaultValues: {
       id: userWorkDayDetail?.id,
-      date: date,
+      date: calendarDay.formattedDate,
       nonCommissionedHours: userWorkDayDetail?.nonCommissionedHours ?? 0,
       extraHours: userWorkDayDetail?.extraHours ?? 0,
       sickDay: userWorkDayDetail?.sickDay ?? false
@@ -109,7 +111,7 @@ export function UserWorkDayDetailForm({
     <form
       className={cn("flex flex-col gap-y-2", className)}
       onSubmit={handleSubmit(onSubmit)}
-      {...props}
+      {...other}
     >
       <Input
         id="id"
@@ -123,7 +125,11 @@ export function UserWorkDayDetailForm({
         })}
       />
       <Input id="date" type="hidden" className="w-full" {...register("date")} />
-      <div className="">
+      <div
+        className={cn("", {
+          hidden: !(calendarDay.isWorkDay ?? false) || (calendarDay.isHoliday ?? false)
+        })}
+      >
         <Label htmlFor="nonCommissionedHours">Non commissioned hours</Label>
         <div className="flex gap-3">
           <Input
@@ -137,7 +143,7 @@ export function UserWorkDayDetailForm({
             })}
           />
           <Button
-            className="min-w-[80px] gap-2"
+            className="h-[40px] min-w-[80px] gap-2"
             type="button"
             variant={nonCommissionedHours > 0 ? "destructive" : "outline"}
             onClick={() => setValue("nonCommissionedHours", nonCommissionedHours > 0 ? 0 : 7.5)}
@@ -184,7 +190,7 @@ export function UserWorkDayDetailForm({
         </InfoButton>
         {errors?.sickDay && <p className="px-1 text-xs text-red-600">{errors.sickDay.message}</p>}
       </div>
-      <div className="">
+      <div>
         <Label htmlFor="extraHours">Extra hours</Label>
         <Input
           id="extraHours"
@@ -201,7 +207,7 @@ export function UserWorkDayDetailForm({
         )}
       </div>
 
-      <Button className="mt-4" type="submit" disabled={isSaving || isPending}>
+      <Button className="mt-4" type="submit" disabled={isSaving || isPending} variant="subtle">
         <span>Save</span>
         <Show when={!isSaving && !isPending}>
           <Icons.Check className="ml-2 h-4 w-4" />
diff --git a/hooks/use-toast.ts b/hooks/use-toast.ts
index 95074db..b1861eb 100644
--- a/hooks/use-toast.ts
+++ b/hooks/use-toast.ts
@@ -134,20 +134,20 @@ function dispatch(action: Action) {
 
 interface Toast extends Omit<ToasterToast, "id"> {}
 
-function toast({ ...props }: Toast) {
+function toast({ ...other }: Toast) {
   const id = genId();
 
   const update = (props: ToasterToast) =>
     dispatch({
       type: "UPDATE_TOAST",
-      toast: { ...props, id }
+      toast: { ...other, id }
     });
   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
 
   dispatch({
     type: "ADD_TOAST",
     toast: {
-      ...props,
+      ...other,
       id,
       open: true,
       onOpenChange: open => {
diff --git a/lib/planetscale-edge.ts b/lib/planetscale-edge.ts
index 7bde137..1a117e7 100644
--- a/lib/planetscale-edge.ts
+++ b/lib/planetscale-edge.ts
@@ -1,5 +1,7 @@
 import { connect } from "@planetscale/database";
 
+type Row = Record<string, any> | any[];
+
 export const planetscaleEdge = connect({
   url: process.env.DATABASE_URL,
   fetch: (url, options) => {
@@ -12,3 +14,5 @@ export const planetscaleEdge = connect({
     });
   }
 });
+
+export type { Row };
diff --git a/lib/user.ts b/lib/user.ts
index 25e726d..143119b 100644
--- a/lib/user.ts
+++ b/lib/user.ts
@@ -1,35 +1,44 @@
 import "server-only";
 
-import { planetscaleEdge } from "@/lib/planetscale-edge";
+import { planetscaleEdge, Row } from "@/lib/planetscale-edge";
 import { query } from "@/lib/query";
-import { User, UserSettings, UserWorkDayDetail } from "@/types";
+import { User, UserFeedback, UserSettings, UserWorkDayDetail } from "@/types";
 import { getCalendarMonth, getCalendarYear } from "@/utils/calendar-utils";
 import { getUserEarningsDetails } from "@/utils/user-utils";
 import { cache } from "react";
 
+const createUser = (
+  row: Row,
+  workDayDetails?: UserWorkDayDetail[],
+  feedback?: UserFeedback[]
+): User => {
+  // check if row is an array
+  const user = (Array.isArray(row) ? row[0] : row) as User;
+
+  return {
+    ...user,
+    // convert string decimal to number
+    tax: Number(user?.tax ?? 0),
+    workHours: Number(user?.workHours ?? 0),
+    commission: Number(user?.commission ?? 0),
+    hourlyRate: Number(user?.hourlyRate ?? 0),
+    isAdmin: Boolean(user?.isAdmin ?? false),
+    isSpecialist: Boolean(user?.isSpecialist ?? false),
+    workDayDetails: workDayDetails ?? user?.workDayDetails ?? [],
+    feedback: feedback ?? user?.feedback ?? []
+  };
+};
+
 const getUser = cache(async (id: string): Promise<User | undefined> => {
   const { rows } = await planetscaleEdge.execute("SELECT * FROM user WHERE id = ?", [id]);
 
-  if (!rows?.length) {
-    return undefined;
-  }
-
-  const user = rows[0] as User;
+  const row = rows?.[0];
 
-  if (!user) {
+  if (!row) {
     return undefined;
   }
 
-  return {
-    ...user,
-    // convert string decimal to number
-    tax: Number(rows[0]?.["tax"]),
-    workHours: Number(rows[0]?.["workHours"]),
-    commission: Number(rows[0]?.["commission"]),
-    hourlyRate: Number(rows[0]?.["hourlyRate"]),
-    workDayDetails: user?.workDayDetails ?? [],
-    feedback: user?.feedback ?? []
-  };
+  return createUser(row);
 });
 
 const getUserWorkDayDetails = cache(async (id: string) => {
@@ -204,4 +213,4 @@ const getUserAvatar = cache(async (id: string) => {
   };
 });
 
-export { getUser, getUserEarnings, getUserAvatar, getUserSettings };
+export { createUser, getUser, getUserEarnings, getUserAvatar, getUserSettings };
diff --git a/lib/utils.ts b/lib/utils.ts
index a17582e..31069a9 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,19 +1,19 @@
-import { ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
 
 export function formatDate(input: string | number): string {
-  const date = new Date(input)
+  const date = new Date(input);
   return date.toLocaleDateString("en-US", {
     month: "long",
     day: "numeric",
-    year: "numeric",
-  })
+    year: "numeric"
+  });
 }
 
 export function absoluteUrl(path: string) {
-  return `${process.env.NEXT_PUBLIC_APP_URL}${path}`
+  return `${process.env.NEXT_PUBLIC_APP_URL}${path}`;
 }
diff --git a/package.json b/package.json
index 42954d1..0d31637 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@hookform/resolvers": "^3.0.0",
     "@planetscale/database": "^1.6.0",
     "@prisma/client": "^4.11.0",
+    "@radix-ui/react-avatar": "^1.0.2",
     "@radix-ui/react-checkbox": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-hover-card": "^1.0.5",
@@ -30,6 +31,7 @@
     "@radix-ui/react-radio-group": "^1.1.2",
     "@radix-ui/react-select": "^1.2.1",
     "@radix-ui/react-separator": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.3",
     "@sendgrid/mail": "^7.7.0",
     "class-variance-authority": "^0.4.0",
@@ -45,7 +47,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.7",
     "server-only": "^0.0.1",
-    "swr": "2.1.0",
+    "swr": "2.1.1",
     "tailwind-merge": "^1.10.0",
     "zod": "^3.21.4"
   },
@@ -67,6 +69,6 @@
     "prisma": "^4.11.0",
     "tailwindcss": "^3.2.7",
     "tailwindcss-animate": "^1.0.5",
-    "typescript": "^5.0.2"
+    "typescript": "^4.9.5"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ef4a1a2..128b8fb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,7 @@ specifiers:
   '@ianvs/prettier-plugin-sort-imports': ^3.7.1
   '@planetscale/database': ^1.6.0
   '@prisma/client': ^4.11.0
+  '@radix-ui/react-avatar': ^1.0.2
   '@radix-ui/react-checkbox': ^1.0.3
   '@radix-ui/react-dialog': ^1.0.3
   '@radix-ui/react-hover-card': ^1.0.5
@@ -15,6 +16,7 @@ specifiers:
   '@radix-ui/react-radio-group': ^1.1.2
   '@radix-ui/react-select': ^1.2.1
   '@radix-ui/react-separator': ^1.0.2
+  '@radix-ui/react-tabs': ^1.0.3
   '@radix-ui/react-toast': ^1.1.3
   '@sendgrid/mail': ^7.7.0
   '@tailwindcss/line-clamp': ^0.4.2
@@ -44,17 +46,18 @@ specifiers:
   react-dom: ^18.2.0
   react-hook-form: ^7.43.7
   server-only: ^0.0.1
-  swr: 2.1.0
+  swr: 2.1.1
   tailwind-merge: ^1.10.0
   tailwindcss: ^3.2.7
   tailwindcss-animate: ^1.0.5
-  typescript: ^5.0.2
+  typescript: ^4.9.5
   zod: ^3.21.4
 
 dependencies:
   '@hookform/resolvers': 3.0.0_react-hook-form@7.43.7
   '@planetscale/database': 1.6.0
   '@prisma/client': 4.11.0_prisma@4.11.0
+  '@radix-ui/react-avatar': 1.0.2_biqbaboplfbrettd7655fr4n2y
   '@radix-ui/react-checkbox': 1.0.3_biqbaboplfbrettd7655fr4n2y
   '@radix-ui/react-dialog': 1.0.3_zula6vjvt3wdocc4mwcxqa6nzi
   '@radix-ui/react-hover-card': 1.0.5_zula6vjvt3wdocc4mwcxqa6nzi
@@ -65,9 +68,10 @@ dependencies:
   '@radix-ui/react-radio-group': 1.1.2_biqbaboplfbrettd7655fr4n2y
   '@radix-ui/react-select': 1.2.1_zula6vjvt3wdocc4mwcxqa6nzi
   '@radix-ui/react-separator': 1.0.2_biqbaboplfbrettd7655fr4n2y
+  '@radix-ui/react-tabs': 1.0.3_biqbaboplfbrettd7655fr4n2y
   '@radix-ui/react-toast': 1.1.3_biqbaboplfbrettd7655fr4n2y
   '@sendgrid/mail': 7.7.0
-  class-variance-authority: 0.4.0_typescript@5.0.2
+  class-variance-authority: 0.4.0_typescript@4.9.5
   clsx: 1.2.1
   date-fns: 2.29.3
   jwt-decode: 3.1.2
@@ -80,7 +84,7 @@ dependencies:
   react-dom: 18.2.0_react@18.2.0
   react-hook-form: 7.43.7_react@18.2.0
   server-only: 0.0.1
-  swr: 2.1.0_react@18.2.0
+  swr: 2.1.1_react@18.2.0
   tailwind-merge: 1.10.0
   zod: 3.21.4
 
@@ -92,7 +96,7 @@ devDependencies:
   '@types/react-dom': 18.0.11
   autoprefixer: 10.4.14_postcss@8.4.21
   eslint: 8.36.0
-  eslint-config-next: 13.2.4_j4766f7ecgqbon3u7zlxn5zszu
+  eslint-config-next: 13.2.4_vgl77cfdswitgr47lm5swmv43m
   eslint-config-prettier: 8.8.0_eslint@8.36.0
   eslint-plugin-react: 7.32.2_eslint@8.36.0
   eslint-plugin-tailwindcss: 3.10.1_tailwindcss@3.2.7
@@ -102,7 +106,7 @@ devDependencies:
   prisma: 4.11.0
   tailwindcss: 3.2.7_postcss@8.4.21
   tailwindcss-animate: 1.0.5_tailwindcss@3.2.7
-  typescript: 5.0.2
+  typescript: 4.9.5
 
 packages:
 
@@ -650,6 +654,21 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
+  /@radix-ui/react-avatar/1.0.2_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-XRL8z2l9V7hRLCPjHWg/34RBPZUGpmOjmsRSNvIh2DI28GyIWDChbcsDUVc63MzOItk6Q83Ob2KK8k2FUlXlGA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.21.0
+      '@radix-ui/react-context': 1.0.0_react@18.2.0
+      '@radix-ui/react-primitive': 1.0.2_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0
+      '@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /@radix-ui/react-checkbox/1.0.3_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-55B8/vKzTuzxllH5sGJO4zaBf9gYpJuJRRzaOKm+0oAefRnMvbf+Kgww7IOANVN0w3z7agFJgtnXaZl8Uj95AA==}
     peerDependencies:
@@ -1014,6 +1033,25 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-tabs/1.0.3_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-4CkF/Rx1GcrusI/JZ1Rvyx4okGUs6wEenWA0RG/N+CwkRhTy7t54y7BLsWUXrAz/GRbBfHQg/Odfs/RoW0CiRA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.21.0
+      '@radix-ui/primitive': 1.0.0
+      '@radix-ui/react-context': 1.0.0_react@18.2.0
+      '@radix-ui/react-direction': 1.0.0_react@18.2.0
+      '@radix-ui/react-id': 1.0.0_react@18.2.0
+      '@radix-ui/react-presence': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-primitive': 1.0.2_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-roving-focus': 1.0.3_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /@radix-ui/react-toast/1.1.3_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-yHFgpxi9wjbfPvpSPdYAzivCqw48eA1ofT8m/WqYOVTxKPdmQMuVKRYPlMmj4C1d6tJdFj/LBa1J4iY3fL4OwQ==}
     peerDependencies:
@@ -1194,7 +1232,7 @@ packages:
   /@types/scheduler/0.16.2:
     resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
 
-  /@typescript-eslint/parser/5.55.0_j4766f7ecgqbon3u7zlxn5zszu:
+  /@typescript-eslint/parser/5.55.0_vgl77cfdswitgr47lm5swmv43m:
     resolution: {integrity: sha512-ppvmeF7hvdhUUZWSd2EEWfzcFkjJzgNQzVST22nzg958CR+sphy8A6K7LXQZd6V75m1VKjp+J4g/PCEfSCmzhw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1206,10 +1244,10 @@ packages:
     dependencies:
       '@typescript-eslint/scope-manager': 5.55.0
       '@typescript-eslint/types': 5.55.0
-      '@typescript-eslint/typescript-estree': 5.55.0_typescript@5.0.2
+      '@typescript-eslint/typescript-estree': 5.55.0_typescript@4.9.5
       debug: 4.3.4
       eslint: 8.36.0
-      typescript: 5.0.2
+      typescript: 4.9.5
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1227,7 +1265,7 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree/5.55.0_typescript@5.0.2:
+  /@typescript-eslint/typescript-estree/5.55.0_typescript@4.9.5:
     resolution: {integrity: sha512-I7X4A9ovA8gdpWMpr7b1BN9eEbvlEtWhQvpxp/yogt48fy9Lj3iE3ild/1H3jKBBIYj5YYJmS2+9ystVhC7eaQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1242,8 +1280,8 @@ packages:
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.3.8
-      tsutils: 3.21.0_typescript@5.0.2
-      typescript: 5.0.2
+      tsutils: 3.21.0_typescript@4.9.5
+      typescript: 4.9.5
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1529,7 +1567,7 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /class-variance-authority/0.4.0_typescript@5.0.2:
+  /class-variance-authority/0.4.0_typescript@4.9.5:
     resolution: {integrity: sha512-74enNN8O9ZNieycac/y8FxqgyzZhZbxmCitAtAeUrLPlxjSd5zA7LfpprmxEcOmQBnaGs5hYhiSGnJ0mqrtBLQ==}
     peerDependencies:
       typescript: '>= 4.5.5 < 5'
@@ -1537,7 +1575,7 @@ packages:
       typescript:
         optional: true
     dependencies:
-      typescript: 5.0.2
+      typescript: 4.9.5
     dev: false
 
   /client-only/0.0.1:
@@ -1833,7 +1871,7 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /eslint-config-next/13.2.4_j4766f7ecgqbon3u7zlxn5zszu:
+  /eslint-config-next/13.2.4_vgl77cfdswitgr47lm5swmv43m:
     resolution: {integrity: sha512-lunIBhsoeqw6/Lfkd6zPt25w1bn0znLA/JCL+au1HoEpSb4/PpsOYsYtgV/q+YPsoKIOzFyU5xnb04iZnXjUvg==}
     peerDependencies:
       eslint: ^7.23.0 || ^8.0.0
@@ -1844,7 +1882,7 @@ packages:
     dependencies:
       '@next/eslint-plugin-next': 13.2.4
       '@rushstack/eslint-patch': 1.2.0
-      '@typescript-eslint/parser': 5.55.0_j4766f7ecgqbon3u7zlxn5zszu
+      '@typescript-eslint/parser': 5.55.0_vgl77cfdswitgr47lm5swmv43m
       eslint: 8.36.0
       eslint-import-resolver-node: 0.3.7
       eslint-import-resolver-typescript: 3.5.3_eakrjjutlgqjxe5ydhtnd4qdmy
@@ -1852,7 +1890,7 @@ packages:
       eslint-plugin-jsx-a11y: 6.7.1_eslint@8.36.0
       eslint-plugin-react: 7.32.2_eslint@8.36.0
       eslint-plugin-react-hooks: 4.6.0_eslint@8.36.0
-      typescript: 5.0.2
+      typescript: 4.9.5
     transitivePeerDependencies:
       - eslint-import-resolver-webpack
       - supports-color
@@ -1918,7 +1956,7 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.55.0_j4766f7ecgqbon3u7zlxn5zszu
+      '@typescript-eslint/parser': 5.55.0_vgl77cfdswitgr47lm5swmv43m
       debug: 3.2.7
       eslint: 8.36.0
       eslint-import-resolver-node: 0.3.7
@@ -1937,7 +1975,7 @@ packages:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.55.0_j4766f7ecgqbon3u7zlxn5zszu
+      '@typescript-eslint/parser': 5.55.0_vgl77cfdswitgr47lm5swmv43m
       array-includes: 3.1.6
       array.prototype.flat: 1.3.1
       array.prototype.flatmap: 1.3.1
@@ -3583,8 +3621,8 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /swr/2.1.0_react@18.2.0:
-    resolution: {integrity: sha512-4hYl5p3/KalQ1MORealM79g/DtLohmud6yyfXw5l4wjtFksYUnocRFudvyaoUtgj3FrVNK9lS25Av9dsZYvz0g==}
+  /swr/2.1.1_react@18.2.0:
+    resolution: {integrity: sha512-OgwqZmpjOgxNbaez6qzTVqiRWn+Ti5Uzmktk2c01Afqwc50q6z15DeNC8m9G1aY+w2BwEAsKvk59iq6aHlhgyw==}
     engines: {pnpm: '7'}
     peerDependencies:
       react: ^16.11.0 || ^17.0.0 || ^18.0.0
@@ -3691,14 +3729,14 @@ packages:
   /tslib/2.5.0:
     resolution: {integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==}
 
-  /tsutils/3.21.0_typescript@5.0.2:
+  /tsutils/3.21.0_typescript@4.9.5:
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
     peerDependencies:
       typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
     dependencies:
       tslib: 1.14.1
-      typescript: 5.0.2
+      typescript: 4.9.5
     dev: true
 
   /type-check/0.4.0:
@@ -3721,9 +3759,9 @@ packages:
       is-typed-array: 1.1.10
     dev: true
 
-  /typescript/5.0.2:
-    resolution: {integrity: sha512-wVORMBGO/FAs/++blGNeAVdbNKtIh1rbBL2EyQ1+J9lClJ93KiiKe8PmFIVdXhHcyv44SL9oglmfeSsndo0jRw==}
-    engines: {node: '>=12.20'}
+  /typescript/4.9.5:
+    resolution: {integrity: sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==}
+    engines: {node: '>=4.2.0'}
     hasBin: true
 
   /unbox-primitive/1.0.2:
diff --git a/prettier.config.js b/prettier.config.js
index b2c639a..d6c1e87 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,33 +1,30 @@
 /** @type {import('prettier').Config} */
 module.exports = {
-    endOfLine: "lf",
-    semi: true,
-    singleQuote: false,
-    tabWidth: 2,
-    trailingComma: "es5",
-    importOrder: [
-      "^use client$",
-      "",
-      "^(react/(.*)$)|^(react$)",
-      "^(next/(.*)$)|^(next$)",
-      "<THIRD_PARTY_MODULES>",
-      "",
-      "^types$",
-      "^@/types/(.*)$",
-      "^@/config/(.*)$",
-      "^@/lib/(.*)$",
-      "^@/components/(.*)$",
-      "^@/styles/(.*)$",
-      "^[./]",
-    ],
-    importOrderSeparation: false,
-    importOrderSortSpecifiers: true,
-    importOrderBuiltinModulesToTop: true,
-    importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
-    importOrderMergeDuplicateImports: true,
-    importOrderCombineTypeAndValueImports: true,
-    plugins: [
-      "@ianvs/prettier-plugin-sort-imports",
-      "prettier-plugin-tailwindcss",
-    ],
-  };
\ No newline at end of file
+  endOfLine: "lf",
+  semi: true,
+  singleQuote: false,
+  tabWidth: 2,
+  trailingComma: "es5",
+  importOrder: [
+    "^use client$",
+    "",
+    "^(react/(.*)$)|^(react$)",
+    "^(next/(.*)$)|^(next$)",
+    "<THIRD_PARTY_MODULES>",
+    "",
+    "^types$",
+    "^@/types/(.*)$",
+    "^@/config/(.*)$",
+    "^@/lib/(.*)$",
+    "^@/components/(.*)$",
+    "^@/styles/(.*)$",
+    "^[./]"
+  ],
+  importOrderSeparation: false,
+  importOrderSortSpecifiers: true,
+  importOrderBuiltinModulesToTop: true,
+  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
+  importOrderMergeDuplicateImports: true,
+  importOrderCombineTypeAndValueImports: true,
+  plugins: ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"]
+};
diff --git a/types/index.d.ts b/types/index.d.ts
index 796ce20..4a32911 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -32,8 +32,8 @@ export type User = {
   commission: number;
   tax: number;
   workHours: number;
-  created: Date;
-  updated: Date;
+  created: string;
+  updated: string;
   isAdmin: boolean;
   isSpecialist: boolean;
   workDayDetails: UserWorkDayDetail[];
diff --git a/utils/common-utils.ts b/utils/common-utils.ts
index 28b2d35..70da5b7 100644
--- a/utils/common-utils.ts
+++ b/utils/common-utils.ts
@@ -28,3 +28,18 @@ export function getAbsoluteUrl(path?: string) {
 
   return base;
 }
+
+export const getInitials = (name?: string) => {
+  if (!name) {
+    return "";
+  }
+
+  // take first letter of each word and capitalize it
+  const initials = name
+    .split(" ")
+    .map(word => word.charAt(0))
+    .join("")
+    .toUpperCase();
+
+  return initials;
+};
diff --git a/utils/date-utils.ts b/utils/date-utils.ts
index fcb30d8..fe20a38 100644
--- a/utils/date-utils.ts
+++ b/utils/date-utils.ts
@@ -46,7 +46,7 @@ export const getFormattedIsoDateAndTime = (date: Date, locale?: string) =>
 export const getWeek = (date: Date, locale?: string) =>
   getWeekDateFns(date, {
     locale: getLocale(locale),
-    weekStartsOn: getWeekStarsOn(locale),
+    weekStartsOn: getWeekStarsOn(locale)
   });
 export const getDayName = (date: Date, locale?: string) =>
   format(date, "EE", { locale: getLocale(locale) });
@@ -104,7 +104,7 @@ export const extractDate = (input: Date) => {
     day: date < 10 ? `0${date}` : date.toString(),
     hour: hours < 10 ? `0${hours}` : hours.toString(),
     minute: minutes < 10 ? `0${minutes}` : minutes.toString(),
-    second: seconds < 10 ? `0${seconds}` : seconds.toString(),
+    second: seconds < 10 ? `0${seconds}` : seconds.toString()
   };
 };