diff --git a/app/[profile]/page.tsx b/app/[profile]/page.tsx
index 56ed7de..c367251 100644
--- a/app/[profile]/page.tsx
+++ b/app/[profile]/page.tsx
@@ -30,7 +30,7 @@ export default async function ProfilePage({ params }) {
         </div>
         <Link href={`https://twitter.com/${userData.twitter_username}`} target="_blank">
           <Twitter
-            className="size-10 transition-all duration-150 ease-in-out hover:scale-110"
+            className="h-10 w-10 transition-all duration-150 ease-in-out hover:scale-110"
             strokeWidth="1px"
           />
         </Link>
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
index 5b14cb8..0591788 100644
--- a/components/ui/avatar.tsx
+++ b/components/ui/avatar.tsx
@@ -10,7 +10,7 @@ const Avatar = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
-    className={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)}
+    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
     {...props}
   />
 ));
@@ -20,7 +20,7 @@ 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 size-full", className)} {...props} />
+  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
@@ -30,7 +30,7 @@ const AvatarFallback = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Fallback
     ref={ref}
-    className={cn("flex size-full items-center justify-center rounded-full bg-muted", className)}
+    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
     {...props}
   />
 ));
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
index 62fc185..aa9c656 100644
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@@ -100,7 +100,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     )}
     checked={checked}
     {...props}>
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
         <Check className="size-4" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -121,7 +121,7 @@ const DropdownMenuRadioItem = React.forwardRef<
       className
     )}
     {...props}>
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
         <Circle className="size-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
index 419a24d..5805752 100644
--- a/components/ui/toast.tsx
+++ b/components/ui/toast.tsx
@@ -71,7 +71,7 @@ const ToastClose = React.forwardRef<
     )}
     toast-close=""
     {...props}>
-    <X className="size-4" />
+    <X className="h-4 w-4" />
   </ToastPrimitives.Close>
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
diff --git a/components/user-name-form.tsx b/components/user-name-form.tsx
index 7702b7e..5966845 100644
--- a/components/user-name-form.tsx
+++ b/components/user-name-form.tsx
@@ -21,7 +21,7 @@ interface UserNameFormProps extends React.HTMLAttributes<HTMLFormElement> {
 
 type FormData = z.infer<typeof userNameSchema>;
 
-export function UserNameForm({ user, ...props }: UserNameFormProps) {
+export function UserNameForm({ user, className, ...props }: UserNameFormProps) {
   const router = useRouter();
   const {
     handleSubmit,
@@ -50,7 +50,7 @@ export function UserNameForm({ user, ...props }: UserNameFormProps) {
   }
 
   return (
-    <form className="space-y-4" onSubmit={handleSubmit(onSubmit)} {...props}>
+    <form className={cn(className)} onSubmit={handleSubmit(onSubmit)} {...props}>
       <Card>
         <CardHeader>
           <CardTitle>Your Name</CardTitle>
@@ -68,33 +68,12 @@ export function UserNameForm({ user, ...props }: UserNameFormProps) {
           </div>
         </CardContent>
         <CardFooter>
-          <button type="submit" className={cn(buttonVariants())} disabled={isSaving}>
-            {isSaving && <Loader2Icon className="mr-2 size-4 animate-spin" />}
+          <button type="submit" className={cn(buttonVariants(), className)} disabled={isSaving}>
+            {isSaving && <Loader2Icon className="mr-2 h-4 w-4 animate-spin" />}
             <span>Save</span>
           </button>
         </CardFooter>
       </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>API keys</CardTitle>
-          <CardDescription>Add and remobe API keys</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="grid gap-1">
-            <Label className="sr-only" htmlFor="name">
-              Name
-            </Label>
-            <Input id="name" className="w-[400px]" size={32} {...register("name")} />
-            {errors?.name && <p className="px-1 text-xs text-red-600">{errors.name.message}</p>}
-          </div>
-        </CardContent>
-        <CardFooter>
-          <button type="submit" className={cn(buttonVariants())} disabled={isSaving}>
-            {isSaving && <Loader2Icon className="mr-2 size-4 animate-spin" />}
-            <span>Generate API key</span>
-          </button>
-        </CardFooter>
-      </Card>
     </form>
   );
 }
diff --git a/package.json b/package.json
index b004b64..3c59c95 100644
--- a/package.json
+++ b/package.json
@@ -68,4 +68,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
-}
+}
\ No newline at end of file