diff --git a/frontend/src/components/ui/primitives/hover-card.tsx b/frontend/src/components/ui/primitives/hover-card.tsx
index e4f621dd..c97e8610 100644
--- a/frontend/src/components/ui/primitives/hover-card.tsx
+++ b/frontend/src/components/ui/primitives/hover-card.tsx
@@ -1,45 +1,44 @@
 'use client'
 import type { Assign } from '@ark-ui/react'
 import { HoverCard } from '@ark-ui/react/hover-card'
-import { type HoverCardVariantProps, hoverCard } from 'styled-system/recipes'
+import { hoverCard, type HoverCardVariantProps } from 'styled-system/recipes'
 import type { ComponentProps, HTMLStyledProps } from 'styled-system/types'
+
 import { createStyleContext } from '@/lib/create-style-context'
 
 const { withRootProvider, withContext } = createStyleContext(hoverCard)
 
 export type RootProviderProps = ComponentProps<typeof RootProvider>
-export const RootProvider = withRootProvider<
-  Assign<HoverCard.RootProviderProps, HoverCardVariantProps>
->(HoverCard.RootProvider)
+export const RootProvider = withRootProvider<Assign<HoverCard.RootProviderProps, HoverCardVariantProps>>(
+  HoverCard.RootProvider,
+)
 
 export type RootProps = ComponentProps<typeof Root>
-export const Root = withRootProvider<Assign<HoverCard.RootProps, HoverCardVariantProps>>(
-  HoverCard.Root,
+export const Root = withRootProvider<Assign<HoverCard.RootProps, HoverCardVariantProps>>(HoverCard.Root)
+
+export const Arrow = withContext<HTMLDivElement, Assign<HTMLStyledProps<'div'>, HoverCard.ArrowBaseProps>>(
+  HoverCard.Arrow,
+  'arrow',
+)
+
+export const ArrowTip = withContext<HTMLDivElement, Assign<HTMLStyledProps<'div'>, HoverCard.ArrowTipBaseProps>>(
+  HoverCard.ArrowTip,
+  'arrowTip',
 )
 
-export const Arrow = withContext<
-  HTMLDivElement,
-  Assign<HTMLStyledProps<'div'>, HoverCard.ArrowBaseProps>
->(HoverCard.Arrow, 'arrow')
-
-export const ArrowTip = withContext<
-  HTMLDivElement,
-  Assign<HTMLStyledProps<'div'>, HoverCard.ArrowTipBaseProps>
->(HoverCard.ArrowTip, 'arrowTip')
-
-export const Content = withContext<
-  HTMLDivElement,
-  Assign<HTMLStyledProps<'div'>, HoverCard.ContentBaseProps>
->(HoverCard.Content, 'content')
-
-export const Positioner = withContext<
-  HTMLDivElement,
-  Assign<HTMLStyledProps<'div'>, HoverCard.PositionerBaseProps>
->(HoverCard.Positioner, 'positioner')
-
-export const Trigger = withContext<
-  HTMLButtonElement,
-  Assign<HTMLStyledProps<'button'>, HoverCard.TriggerBaseProps>
->(HoverCard.Trigger, 'trigger')
+export const Content = withContext<HTMLDivElement, Assign<HTMLStyledProps<'div'>, HoverCard.ContentBaseProps>>(
+  HoverCard.Content,
+  'content',
+)
+
+export const Positioner = withContext<HTMLDivElement, Assign<HTMLStyledProps<'div'>, HoverCard.PositionerBaseProps>>(
+  HoverCard.Positioner,
+  'positioner',
+)
+
+export const Trigger = withContext<HTMLButtonElement, Assign<HTMLStyledProps<'button'>, HoverCard.TriggerBaseProps>>(
+  HoverCard.Trigger,
+  'trigger',
+)
 
 export { HoverCardContext as Context } from '@ark-ui/react/hover-card'
diff --git a/frontend/src/lib/create-style-context.tsx b/frontend/src/lib/create-style-context.tsx
index 26fb6d38..8c584347 100644
--- a/frontend/src/lib/create-style-context.tsx
+++ b/frontend/src/lib/create-style-context.tsx
@@ -1,10 +1,10 @@
 import {
+  createContext,
   type ElementType,
+  forwardRef,
   type ForwardRefExoticComponent,
   type PropsWithoutRef,
   type RefAttributes,
-  createContext,
-  forwardRef,
   useContext,
 } from 'react'
 import { cx } from 'styled-system/css'
@@ -21,7 +21,7 @@ export const createStyleContext = <R extends Recipe>(recipe: R) => {
   const StyleContext = createContext<Record<Slot<R>, string> | null>(null)
 
   const withRootProvider = <P extends {}>(Component: ElementType) => {
-    const StyledComponent = (props: P) => {
+    function StyledComponent(props: P) {
       const [variantProps, otherProps] = recipe.splitVariantProps(props)
       const slotStyles = recipe(variantProps) as Record<Slot<R>, string>
 
@@ -45,11 +45,7 @@ export const createStyleContext = <R extends Recipe>(recipe: R) => {
 
       return (
         <StyleContext.Provider value={slotStyles}>
-          <StyledComponent
-            {...otherProps}
-            ref={ref}
-            className={cx(slotStyles?.[slot], props.className)}
-          />
+          <StyledComponent {...otherProps} ref={ref} className={cx(slotStyles?.[slot], props.className)} />
         </StyleContext.Provider>
       )
     })
@@ -66,9 +62,7 @@ export const createStyleContext = <R extends Recipe>(recipe: R) => {
     const StyledComponent = styled(Component)
     const StyledSlotComponent = forwardRef<T, P>((props, ref) => {
       const slotStyles = useContext(StyleContext)
-      return (
-        <StyledComponent {...props} ref={ref} className={cx(slotStyles?.[slot], props.className)} />
-      )
+      return <StyledComponent {...props} ref={ref} className={cx(slotStyles?.[slot], props.className)} />
     })
     // @ts-expect-error
     StyledSlotComponent.displayName = Component.displayName || Component.name