diff --git a/apps/ui/components/navbar.tsx b/apps/ui/components/navbar.tsx
index bba71e5..6e6f40e 100644
--- a/apps/ui/components/navbar.tsx
+++ b/apps/ui/components/navbar.tsx
@@ -126,7 +126,7 @@ export function Navbar() {
                       intent="outline"
                       className="h-9 items-center"
                     >
-                      <div className="font-patika-medium text-[1rem] leading-[1.5rem] flex items-center gap-2">
+                      <div className="flex items-center gap-2 font-patika-medium text-[1rem] leading-[1.5rem]">
                         <IconSearch className="size-4" />
                         <span className="text-muted-fg">Search...</span>
                         <Keyboard keys={["⌘", "K"]} className="-mr-1" />
diff --git a/apps/ui/components/ui/button.tsx b/apps/ui/components/ui/button.tsx
index c52b24b..cf259a7 100644
--- a/apps/ui/components/ui/button.tsx
+++ b/apps/ui/components/ui/button.tsx
@@ -9,7 +9,7 @@ import {
 import { tv } from "tailwind-variants"
 
 import { focusButtonStyles } from "./primitive"
-import { Typography } from "./typography";
+import { Typography } from "./typography"
 
 const buttonStyles = tv({
   extend: focusButtonStyles,
diff --git a/apps/ui/components/ui/calendar.tsx b/apps/ui/components/ui/calendar.tsx
index c047a61..a06bfed 100644
--- a/apps/ui/components/ui/calendar.tsx
+++ b/apps/ui/components/ui/calendar.tsx
@@ -170,8 +170,7 @@ const SelectYear = ({ state }: { state: CalendarState }) => {
       aria-label="Select year"
       selectedKey={20}
       onSelectionChange={(value) => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        state.setFocusedDate(years[Number(value)]?.value)
+        state.setFocusedDate(years[Number(value)]?.value!)
       }}
     >
       <Select.Trigger className="h-8 w-24 text-xs data-focused:ring-3 **:data-[slot=select-value]:inline-block **:data-[slot=select-value]:truncate group-data-open:ring-3" />
@@ -199,4 +198,4 @@ const CalendarGridHeader = () => {
 }
 
 export type { CalendarProps }
-export { Calendar, CalendarHeader, CalendarGridHeader }
\ No newline at end of file
+export { Calendar, CalendarGridHeader, CalendarHeader }
diff --git a/apps/ui/components/ui/date-picker.tsx b/apps/ui/components/ui/date-picker.tsx
index 453992d..37e35d9 100644
--- a/apps/ui/components/ui/date-picker.tsx
+++ b/apps/ui/components/ui/date-picker.tsx
@@ -97,33 +97,33 @@ const DatePicker = <T extends DateValue>({
       {...props}
       className={composeTailwindRenderProps(className, "group flex w-full flex-col gap-y-1")}
     >
-      {label && 
+      {label && (
         <Typography as="div">
           <Label isRequired={props.isRequired}>{label}</Label>
         </Typography>
-      }
-      <FieldGroup className="min-w-40 h-10">
+      )}
+      <FieldGroup className="h-10 min-w-40">
         <DateInput className="w-full px-2 text-base sm:text-sm" />
         <DatePickerIcon />
       </FieldGroup>
-      {description && 
+      {description && (
         <Typography as="div">
           <Description>{description}</Description>
         </Typography>
-      }
-      
+      )}
+
       {(leftDescription || errorMessage || rightDescription) && (
         <Typography as="div">
-          <div className="mt-1 flex justify-between text-sm text-muted-fg">
+          <div className="mt-1 flex justify-between text-muted-fg text-sm">
             <div>{errorMessage ? <FieldError>{errorMessage}</FieldError> : leftDescription}</div>
             <div>{rightDescription}</div>
           </div>
         </Typography>
       )}
-      
+
       <DatePickerOverlay />
     </DatePickerPrimitive>
   )
 }
 export type { DatePickerProps, DateValue, ValidationResult }
-export { DatePicker, DatePickerIcon, DatePickerOverlay }
\ No newline at end of file
+export { DatePicker, DatePickerIcon, DatePickerOverlay }
diff --git a/apps/ui/components/ui/dropdown.tsx b/apps/ui/components/ui/dropdown.tsx
index f551d28..a5844d4 100644
--- a/apps/ui/components/ui/dropdown.tsx
+++ b/apps/ui/components/ui/dropdown.tsx
@@ -85,8 +85,8 @@ const DropdownItem = ({ className, ...props }: DropdownItemProps) => {
     >
       {composeRenderProps(props.children, (children, { isSelected }) => (
         <>
-          {isSelected && <IconCheck className="-mx-0.5 mr-2" data-slot="checked-icon" />}
           {typeof children === "string" ? <DropdownLabel>{children}</DropdownLabel> : children}
+          {isSelected && <IconCheck className="mr-2 ml-auto" data-slot="checked-icon" />}
         </>
       ))}
     </ListBoxItemPrimitive>
@@ -169,14 +169,14 @@ const DropdownKeyboard = ({ className, ...props }: React.ComponentProps<typeof K
  * Note: This is not exposed component, but it's used in other components to render dropdowns.
  * @internal
  */
-export type { DropdownSectionProps, DropdownLabelProps, DropdownItemProps, DropdownItemDetailProps }
+export type { DropdownItemDetailProps, DropdownItemProps, DropdownLabelProps, DropdownSectionProps }
 export {
-  DropdownSeparator,
   DropdownItem,
-  DropdownLabel,
-  DropdownKeyboard,
-  dropdownItemStyles,
   DropdownItemDetails,
+  dropdownItemStyles,
+  DropdownKeyboard,
+  DropdownLabel,
   DropdownSection,
   dropdownSectionStyles,
+  DropdownSeparator,
 }
diff --git a/apps/ui/components/ui/field.tsx b/apps/ui/components/ui/field.tsx
index feb32dd..e834ad8 100644
--- a/apps/ui/components/ui/field.tsx
+++ b/apps/ui/components/ui/field.tsx
@@ -20,7 +20,7 @@ import {
 import { tv } from "tailwind-variants"
 
 import { composeTailwindRenderProps, focusStyles } from "./primitive"
-import { Typography } from "./typography";
+import { Typography } from "./typography"
 
 interface FieldProps {
   label?: string
@@ -116,13 +116,13 @@ const FieldGroup = ({ className, ...props }: GroupProps) => {
   return (
     <Typography as="div">
       <Group
-          {...props}
-          className={composeRenderProps(className, (className, renderProps) =>
-              fieldGroupStyles({
-                ...renderProps,
-                className,
-              }),
-          )}
+        {...props}
+        className={composeRenderProps(className, (className, renderProps) =>
+          fieldGroupStyles({
+            ...renderProps,
+            className,
+          }),
+        )}
       />
     </Typography>
   )
diff --git a/apps/ui/components/ui/keyboard.tsx b/apps/ui/components/ui/keyboard.tsx
index ae82764..078e4fc 100644
--- a/apps/ui/components/ui/keyboard.tsx
+++ b/apps/ui/components/ui/keyboard.tsx
@@ -5,7 +5,7 @@ import { tv } from "tailwind-variants"
 
 const keyboardStyles = tv({
   slots: {
-    base: "hidden text-current/70 group-hover:text-fg group-disabled:opacity-50 group-data-focused:text-fg group-data-focused:opacity-90 lg:inline-flex items-center forced-colors:group-data-focused:text-[HighlightText]",
+    base: "hidden items-center text-current/70 group-hover:text-fg group-disabled:opacity-50 group-data-focused:text-fg group-data-focused:opacity-90 lg:inline-flex forced-colors:group-data-focused:text-[HighlightText]",
     kbd: "inline-grid min-h-5 min-w-[2ch] place-content-center rounded text-center font-sans text-[.75rem] uppercase",
   },
 })
diff --git a/apps/ui/components/ui/list-box.tsx b/apps/ui/components/ui/list-box.tsx
index 56f1a03..92338df 100644
--- a/apps/ui/components/ui/list-box.tsx
+++ b/apps/ui/components/ui/list-box.tsx
@@ -20,7 +20,7 @@ const ListBox = <T extends object>({ className, ...props }: ListBoxProps<T>) =>
     {...props}
     className={composeTailwindRenderProps(
       className,
-      "flex grid max-h-96 w-full min-w-56 grid-cols-[auto_1fr] flex-col gap-y-1 overflow-auto overflow-y-auto rounded-xl border p-1 shadow-lg outline-hidden [scrollbar-width:thin] [&::-webkit-scrollbar]:size-0.5 *:[[role='group']+[role=group]]:mt-4 *:[[role='group']+[role=separator]]:mt-1",
+      "grid max-h-96 w-full min-w-56 grid-cols-[auto_1fr] flex-col gap-y-1 overflow-auto overflow-y-auto rounded-xl border p-1 shadow-lg outline-hidden [scrollbar-width:thin] [&::-webkit-scrollbar]:size-0.5 *:[[role='group']+[role=group]]:mt-4 *:[[role='group']+[role=separator]]:mt-1",
     )}
   />
 )
diff --git a/apps/ui/components/ui/select.tsx b/apps/ui/components/ui/select.tsx
index 115c818..d7c8fc5 100644
--- a/apps/ui/components/ui/select.tsx
+++ b/apps/ui/components/ui/select.tsx
@@ -68,22 +68,24 @@ const Select = <T extends object>({
     >
       {(values) => (
         <>
-          {label && 
+          {label && (
             <Typography as="div">
               <Label isRequired={props.isRequired}>{label}</Label>
             </Typography>
-          }
+          )}
           {typeof props.children === "function" ? props.children(values) : props.children}
-          {description && 
+          {description && (
             <Typography as="div">
               <Description>{description}</Description>
             </Typography>
-          }
-          
+          )}
+
           {(leftDescription || errorMessage || rightDescription) && (
             <Typography as="div">
-              <div className="mt-1 flex justify-between text-sm text-muted-fg">
-                <div>{errorMessage ? <FieldError>{errorMessage}</FieldError> : leftDescription}</div>
+              <div className="mt-1 flex justify-between text-muted-fg text-sm">
+                <div>
+                  {errorMessage ? <FieldError>{errorMessage}</FieldError> : leftDescription}
+                </div>
                 <div>{rightDescription}</div>
               </div>
             </Typography>
@@ -169,4 +171,4 @@ Select.Trigger = SelectTrigger
 Select.List = SelectList
 
 export type { SelectProps, SelectTriggerProps }
-export { Select }
\ No newline at end of file
+export { Select }
diff --git a/apps/ui/components/ui/text-field.tsx b/apps/ui/components/ui/text-field.tsx
index 0e53f08..70c2f57 100644
--- a/apps/ui/components/ui/text-field.tsx
+++ b/apps/ui/components/ui/text-field.tsx
@@ -10,11 +10,11 @@ import {
   type TextFieldProps as TextFieldPrimitiveProps,
 } from "react-aria-components"
 
-import {FieldError, FieldProps} from "./field"
+import { FieldError, type FieldProps } from "./field"
 import { Description, FieldGroup, Input, Label } from "./field"
 import { Loader } from "./loader"
 import { composeTailwindRenderProps } from "./primitive"
-import {Typography} from "./typography";
+import { Typography } from "./typography"
 
 type InputType = Exclude<TextInputDOMProps["type"], "password">
 
@@ -40,20 +40,20 @@ interface NonRevealableTextFieldProps extends BaseTextFieldProps {
 type TextFieldProps = RevealableTextFieldProps | NonRevealableTextFieldProps
 
 const TextField = ({
-                     placeholder,
-                     label,
-                     description,
-                     errorMessage,
-                     prefix,
-                     suffix,
-                     isPending,
-                     className,
-                     isRevealable,
-                     type,
-                     leftDescription,
-                     rightDescription,
-                     ...props
-                   }: TextFieldProps) => {
+  placeholder,
+  label,
+  description,
+  errorMessage,
+  prefix,
+  suffix,
+  isPending,
+  className,
+  isRevealable,
+  type,
+  leftDescription,
+  rightDescription,
+  ...props
+}: TextFieldProps) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false)
   const [autoError, setAutoError] = useState<string | null>(null)
 
@@ -76,68 +76,70 @@ const TextField = ({
   }
 
   return (
-      <TextFieldPrimitive
-          type={inputType}
-          {...props}
-          className={composeTailwindRenderProps(className, "group flex flex-col gap-y-1")}
-      >
-        {!props.children ? (
-            <>
-              {label &&
-                  <Typography as="div">
-                      <Label isRequired={props.isRequired}>{label}</Label>
-                  </Typography>
-              }
-              <FieldGroup
-                  isDisabled={props.isDisabled}
-                  isInvalid={!!errorMessage || !!autoError}
-                  data-loading={isPending ? "true" : undefined}
+    <TextFieldPrimitive
+      type={inputType}
+      {...props}
+      className={composeTailwindRenderProps(className, "group flex flex-col gap-y-1")}
+    >
+      {!props.children ? (
+        <>
+          {label && (
+            <Typography as="div">
+              <Label isRequired={props.isRequired}>{label}</Label>
+            </Typography>
+          )}
+          <FieldGroup
+            isDisabled={props.isDisabled}
+            isInvalid={!!errorMessage || !!autoError}
+            data-loading={isPending ? "true" : undefined}
+          >
+            {prefix && typeof prefix === "string" ? (
+              <Typography as="div">
+                <span className="ml-2 text-muted-fg">{prefix}</span>
+              </Typography>
+            ) : (
+              <Typography as="div">{prefix}</Typography>
+            )}
+            <Input placeholder={placeholder} onInvalid={handleInvalid} onInput={handleInput} />
+            {isRevealable ? (
+              <ButtonPrimitive
+                type="button"
+                aria-label="Toggle password visibility"
+                onPress={handleTogglePasswordVisibility}
+                className="relative mr-1 grid shrink-0 place-content-center rounded-sm border-transparent outline-hidden data-focus-visible:*:data-[slot=icon]:text-primary *:data-[slot=icon]:text-muted-fg"
               >
-                {prefix && typeof prefix === "string" ? (
-                    <Typography as="div"><span className="ml-2 text-muted-fg">{prefix}</span></Typography>
-                ) : (
-                    <Typography as="div">{prefix}</Typography>
-                )}
-                <Input
-                    placeholder={placeholder}
-                    onInvalid={handleInvalid}
-                    onInput={handleInput}
-                />
-                {isRevealable ? (
-                    <ButtonPrimitive
-                        type="button"
-                        aria-label="Toggle password visibility"
-                        onPress={handleTogglePasswordVisibility}
-                        className="relative mr-1 grid shrink-0 place-content-center rounded-sm border-transparent outline-hidden data-focus-visible:*:data-[slot=icon]:text-primary *:data-[slot=icon]:text-muted-fg"
-                    >
-                      {isPasswordVisible ? <IconEyeClosed /> : <IconEye />}
-                    </ButtonPrimitive>
-                ) : isPending ? (
-                    <Loader variant="spin" />
-                ) : suffix ? (
-                    typeof suffix === "string" ? (
-                        <span className="mr-2 text-muted-fg">{suffix}</span>
-                    ) : (
-                        suffix
-                    )
-                ) : null}
-              </FieldGroup>
-
-              {description && <Typography as="div"><Description>{description}</Description></Typography>}
-
-              {(leftDescription || autoError || rightDescription) && (
-                 <Typography as="div">
-                     <div className="mt-1 flex justify-between text-sm text-muted-fg">
-                         <div>{autoError ? <FieldError>{autoError}</FieldError> : leftDescription}</div>
-                         <div>{rightDescription}</div>
-                     </div>
-                 </Typography>
-              )}
-            </>
-        ) : (
-            props.children
-        )}
-      </TextFieldPrimitive>
+                {isPasswordVisible ? <IconEyeClosed /> : <IconEye />}
+              </ButtonPrimitive>
+            ) : isPending ? (
+              <Loader variant="spin" />
+            ) : suffix ? (
+              typeof suffix === "string" ? (
+                <span className="mr-2 text-muted-fg">{suffix}</span>
+              ) : (
+                suffix
+              )
+            ) : null}
+          </FieldGroup>
+
+          {description && (
+            <Typography as="div">
+              <Description>{description}</Description>
+            </Typography>
+          )}
+
+          {(leftDescription || autoError || rightDescription) && (
+            <Typography as="div">
+              <div className="mt-1 flex justify-between text-muted-fg text-sm">
+                <div>{autoError ? <FieldError>{autoError}</FieldError> : leftDescription}</div>
+                <div>{rightDescription}</div>
+              </div>
+            </Typography>
+          )}
+        </>
+      ) : (
+        props.children
+      )}
+    </TextFieldPrimitive>
   )
 }
 
diff --git a/apps/ui/components/ui/textarea.tsx b/apps/ui/components/ui/textarea.tsx
index 00efbf2..e53b942 100644
--- a/apps/ui/components/ui/textarea.tsx
+++ b/apps/ui/components/ui/textarea.tsx
@@ -1,95 +1,95 @@
 "use client"
 
+import { useEffect, useState } from "react"
 import {
-    TextArea as TextAreaPrimitive,
-    TextField as TextFieldPrimitive,
-    type TextFieldProps as TextFieldPrimitiveProps,
-    type ValidationResult,
-    composeRenderProps,
+  TextArea as TextAreaPrimitive,
+  TextField as TextFieldPrimitive,
+  type TextFieldProps as TextFieldPrimitiveProps,
+  type ValidationResult,
+  composeRenderProps,
 } from "react-aria-components"
 import { tv } from "tailwind-variants"
-import { useState, useEffect } from "react"
 
 import { Description, FieldError, Label } from "./field"
 import { composeTailwindRenderProps, focusStyles } from "./primitive"
 
 const textareaStyles = tv({
-    extend: focusStyles,
-    base: "field-sizing-content max-h-96 min-h-16 w-full min-w-0 rounded-lg border border-input px-2.5 py-2 pb-6 text-base shadow-xs outline-hidden transition duration-200 disabled:opacity-50 sm:text-sm break-words whitespace-pre-wrap overflow-wrap-anywhere",
+  extend: focusStyles,
+  base: "field-sizing-content overflow-wrap-anywhere max-h-96 min-h-16 w-full min-w-0 whitespace-pre-wrap break-words rounded-lg border border-input px-2.5 py-2 pb-6 text-base shadow-xs outline-hidden transition duration-200 disabled:opacity-50 sm:text-sm",
 })
 
 interface TextareaProps extends TextFieldPrimitiveProps {
-    autoSize?: boolean
-    label?: string
-    placeholder?: string
-    description?: string
-    errorMessage?: string | ((validation: ValidationResult) => string)
-    className?: string
-    ref?: React.Ref<HTMLDivElement>
-    showCharacterCount?: boolean
-    maxLength?: number
-    height?: string | number
+  autoSize?: boolean
+  label?: string
+  placeholder?: string
+  description?: string
+  errorMessage?: string | ((validation: ValidationResult) => string)
+  className?: string
+  ref?: React.Ref<HTMLDivElement>
+  showCharacterCount?: boolean
+  maxLength?: number
+  height?: string | number
 }
 
 const Textarea = ({
-                      className,
-                      placeholder,
-                      label,
-                      description,
-                      errorMessage,
-                      ref,
-                      showCharacterCount,
-                      maxLength,
-                      height,
-                      ...props
-                  }: TextareaProps) => {
-    const [currentLength, setCurrentLength] = useState(props.value?.toString().length || 0)
+  className,
+  placeholder,
+  label,
+  description,
+  errorMessage,
+  ref,
+  showCharacterCount,
+  maxLength,
+  height,
+  ...props
+}: TextareaProps) => {
+  const [currentLength, setCurrentLength] = useState(props.value?.toString().length || 0)
 
-    useEffect(() => {
-        setCurrentLength(props.value?.toString().length || 0)
-    }, [props.value])
+  useEffect(() => {
+    setCurrentLength(props.value?.toString().length || 0)
+  }, [props.value])
 
-    const getCountText = () => {
-        if (maxLength) {
-            return `${currentLength}/${maxLength}`
-        }
-        return `${currentLength}字`
+  const getCountText = () => {
+    if (maxLength) {
+      return `${currentLength}/${maxLength}`
     }
+    return `${currentLength}字`
+  }
 
-    return (
-        <TextFieldPrimitive
-            ref={ref}
-            {...props}
-            className={composeTailwindRenderProps(className, "group flex flex-col gap-y-1.5")}
-        >
-            {label && <Label isRequired={props.isRequired}>{label}</Label>}
-            <div className="relative">
-                <TextAreaPrimitive
-                    placeholder={placeholder}
-                    maxLength={maxLength}
-                    className={composeRenderProps(className, (className, renderProps) =>
-                        textareaStyles({
-                            ...renderProps,
-                            className,
-                        }),
-                    )}
-                    style={{
-                        height: height ?? undefined,
-                        wordWrap: "break-word",
-                        overflowWrap: "break-word",
-                        ...props.style,
-                    }}
-                />
-                {showCharacterCount && currentLength > 0 && (
-                    <div className="absolute bottom-3 right-3 text-xs text-muted-fg select-none pointer-events-none">
-                        {getCountText()}
-                    </div>
-                )}
-            </div>
-            {description && <Description>{description}</Description>}
-            <FieldError>{errorMessage}</FieldError>
-        </TextFieldPrimitive>
-    )
+  return (
+    <TextFieldPrimitive
+      ref={ref}
+      {...props}
+      className={composeTailwindRenderProps(className, "group flex flex-col gap-y-1.5")}
+    >
+      {label && <Label isRequired={props.isRequired}>{label}</Label>}
+      <div className="relative">
+        <TextAreaPrimitive
+          placeholder={placeholder}
+          maxLength={maxLength}
+          className={composeRenderProps(className, (className, renderProps) =>
+            textareaStyles({
+              ...renderProps,
+              className,
+            }),
+          )}
+          style={{
+            height: height ?? undefined,
+            wordWrap: "break-word",
+            overflowWrap: "break-word",
+            ...props.style,
+          }}
+        />
+        {showCharacterCount && currentLength > 0 && (
+          <div className="pointer-events-none absolute right-3 bottom-3 select-none text-muted-fg text-xs">
+            {getCountText()}
+          </div>
+        )}
+      </div>
+      {description && <Description>{description}</Description>}
+      <FieldError>{errorMessage}</FieldError>
+    </TextFieldPrimitive>
+  )
 }
 
 export type { TextareaProps }
diff --git a/apps/ui/components/ui/typography.tsx b/apps/ui/components/ui/typography.tsx
index 2428d6c..52c69bd 100644
--- a/apps/ui/components/ui/typography.tsx
+++ b/apps/ui/components/ui/typography.tsx
@@ -27,7 +27,13 @@ type TypographyProps = {
   as?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "div"
 }
 
-const Typography = ({ className, variant, as: Tag = "div", children, ...props }: TypographyProps) => {
+const Typography = ({
+  className,
+  variant,
+  as: Tag = "div",
+  children,
+  ...props
+}: TypographyProps) => {
   return (
     <Tag className={typographyStyles({ variant, className })} {...props}>
       {children}