diff --git a/packages/pl-fe/src/components/account-search.tsx b/packages/pl-fe/src/components/account-search.tsx
index aa15e7172..1571dcc1d 100644
--- a/packages/pl-fe/src/components/account-search.tsx
+++ b/packages/pl-fe/src/components/account-search.tsx
@@ -75,12 +75,12 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
         >
           <SvgIcon
             src={require('@tabler/icons/outline/search.svg')}
-            className={clsx('h-4 w-4 text-gray-400', { hidden: !isEmpty() })}
+            className={clsx('size-4 text-gray-400', { hidden: !isEmpty() })}
           />
 
           <SvgIcon
             src={require('@tabler/icons/outline/x.svg')}
-            className={clsx('h-4 w-4 text-gray-400', { hidden: isEmpty() })}
+            className={clsx('size-4 text-gray-400', { hidden: isEmpty() })}
             aria-label={intl.formatMessage(messages.placeholder)}
           />
         </div>
diff --git a/packages/pl-fe/src/components/account.tsx b/packages/pl-fe/src/components/account.tsx
index 0df0cebff..d306b0adf 100644
--- a/packages/pl-fe/src/components/account.tsx
+++ b/packages/pl-fe/src/components/account.tsx
@@ -47,7 +47,7 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account, disabled }) => {
 
   return (
     <button
-      className='h-4 w-4 flex-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2'
+      className='size-4 flex-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2'
       onClick={handleClick}
       disabled={disabled}
     >
@@ -199,7 +199,7 @@ const Account = ({
             <Avatar src={account.avatar} size={avatarSize} alt={account.avatar_description} />
             {emoji && (
               <Emoji
-                className='!absolute -right-1.5 bottom-0 h-5 w-5'
+                className='!absolute -right-1.5 bottom-0 size-5'
                 emoji={emoji}
                 src={emojiUrl}
               />
@@ -254,7 +254,7 @@ const Account = ({
                 <Avatar src={account.avatar} size={avatarSize} alt={account.avatar_description} />
                 {emoji && (
                   <Emoji
-                    className='!absolute -right-1.5 bottom-0 h-5 w-5'
+                    className='!absolute -right-1.5 bottom-0 size-5'
                     emoji={emoji}
                     src={emojiUrl}
                   />
@@ -322,7 +322,7 @@ const Account = ({
                   <>
                     <Text tag='span' theme='muted' size='sm'>&middot;</Text>
 
-                    <Icon className='h-4 w-4 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/outline/pencil.svg')} />
+                    <Icon className='size-4 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/outline/pencil.svg')} />
                   </>
                 ) : null}
 
diff --git a/packages/pl-fe/src/components/alt-indicator.tsx b/packages/pl-fe/src/components/alt-indicator.tsx
index f3e60ac50..a4fc88a87 100644
--- a/packages/pl-fe/src/components/alt-indicator.tsx
+++ b/packages/pl-fe/src/components/alt-indicator.tsx
@@ -13,7 +13,7 @@ const AltIndicator: React.FC<IAltIndicator> = ({ className, warning, ...props })
     className={clsx('inline-flex items-center gap-1 rounded bg-gray-900 px-2 py-1 text-xs font-medium uppercase text-white', className)}
     {...props}
   >
-    {warning && <Icon className='h-4 w-4' src={require('@tabler/icons/outline/alert-triangle.svg')} />}
+    {warning && <Icon className='size-4' src={require('@tabler/icons/outline/alert-triangle.svg')} />}
     <FormattedMessage id='upload_form.description_missing.indicator' defaultMessage='Alt' />
   </span>
 );
diff --git a/packages/pl-fe/src/components/announcements/reaction.tsx b/packages/pl-fe/src/components/announcements/reaction.tsx
index 3b9d1c27f..7160d8b96 100644
--- a/packages/pl-fe/src/components/announcements/reaction.tsx
+++ b/packages/pl-fe/src/components/announcements/reaction.tsx
@@ -54,7 +54,7 @@ const Reaction: React.FC<IReaction> = ({ announcementId, reaction, emojiMap, sty
       title={`:${shortCode}:`}
       style={style}
     >
-      <span className='block h-4 w-4'>
+      <span className='block size-4'>
         <Emoji hovered={hovered} emoji={reaction.name} emojiMap={emojiMap} />
       </span>
       <span className='block min-w-[9px] text-center text-xs font-medium text-primary-600 dark:text-white'>
diff --git a/packages/pl-fe/src/components/attachment-thumbs.tsx b/packages/pl-fe/src/components/attachment-thumbs.tsx
index ca85459a8..a78ef82a4 100644
--- a/packages/pl-fe/src/components/attachment-thumbs.tsx
+++ b/packages/pl-fe/src/components/attachment-thumbs.tsx
@@ -36,7 +36,7 @@ const AttachmentThumbs = ({ status, onClick }: IAttachmentThumbs) => {
       </Suspense>
 
       {onClick && (
-        <div className='absolute inset-0 h-full w-full cursor-pointer' onClick={onClick} />
+        <div className='absolute inset-0 size-full cursor-pointer' onClick={onClick} />
       )}
     </div>
   );
diff --git a/packages/pl-fe/src/components/authorize-reject-buttons.tsx b/packages/pl-fe/src/components/authorize-reject-buttons.tsx
index 8b512d4df..34a268669 100644
--- a/packages/pl-fe/src/components/authorize-reject-buttons.tsx
+++ b/packages/pl-fe/src/components/authorize-reject-buttons.tsx
@@ -160,8 +160,8 @@ const AuthorizeRejectButton: React.FC<IAuthorizeRejectButton> = ({ theme, icon,
         src={isLoading ? require('@tabler/icons/filled/player-stop.svg') : icon}
         onClick={action}
         theme='seamless'
-        className='h-10 w-10 items-center justify-center bg-white focus:!ring-0 dark:!bg-gray-900'
-        iconClassName={clsx('h-6 w-6', {
+        className='size-10 items-center justify-center bg-white focus:!ring-0 dark:!bg-gray-900'
+        iconClassName={clsx('size-6', {
           'text-primary-500': theme === 'primary',
           'text-danger-600': theme === 'danger',
         })}
diff --git a/packages/pl-fe/src/components/autosuggest-emoji.tsx b/packages/pl-fe/src/components/autosuggest-emoji.tsx
index 1779f1eb0..bacb56d1a 100644
--- a/packages/pl-fe/src/components/autosuggest-emoji.tsx
+++ b/packages/pl-fe/src/components/autosuggest-emoji.tsx
@@ -30,7 +30,7 @@ const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {
   return (
     <div className='flex flex-row items-center justify-start text-sm leading-[18px]' data-testid='emoji'>
       <img
-        className='emojione mr-2 block h-4 w-4'
+        className='emojione mr-2 block size-4'
         src={url}
         alt={alt}
       />
diff --git a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx
index b7dee6099..b203c2348 100644
--- a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx
+++ b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx
@@ -117,7 +117,7 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus, onSetTab }: IDropdo
           })
         }
       >
-        {item.icon && <Icon src={item.icon} className='mr-3 h-5 w-5 flex-none rtl:ml-3 rtl:mr-0' />}
+        {item.icon && <Icon src={item.icon} className='mr-3 size-5 flex-none rtl:ml-3 rtl:mr-0' />}
 
         <div className={clsx('text-xs', { 'mr-2': item.count || item.type === 'toggle' || item.items?.length })}>
           <div className='truncate text-base'>{item.text}</div>
@@ -125,7 +125,7 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus, onSetTab }: IDropdo
         </div>
 
         {item.count ? (
-          <span className='ml-auto h-5 w-5 flex-none'>
+          <span className='ml-auto size-5 flex-none'>
             <Counter count={item.count} />
           </span>
         ) : null}
@@ -137,7 +137,7 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus, onSetTab }: IDropdo
         )}
 
         {!!item.items?.length && (
-          <Icon src={require('@tabler/icons/outline/chevron-right.svg')} containerClassName='ml-auto' className='h-5 w-5 flex-none' />
+          <Icon src={require('@tabler/icons/outline/chevron-right.svg')} containerClassName='ml-auto' className='size-5 flex-none' />
         )}
       </a>
     </li>
diff --git a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
index f939387ec..8e348994e 100644
--- a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx
@@ -368,7 +368,7 @@ const DropdownMenu = (props: IDropdownMenu) => {
               <div
                 ref={arrowRef}
                 style={arrowProps}
-                className='pointer-events-none absolute z-[-1] h-3 w-3 bg-white black:bg-black dark:bg-gray-900'
+                className='pointer-events-none absolute z-[-1] size-3 bg-white black:bg-black dark:bg-gray-900'
               />
             </div>
           </div>
diff --git a/packages/pl-fe/src/components/event-preview.tsx b/packages/pl-fe/src/components/event-preview.tsx
index c2899c93b..575facdcc 100644
--- a/packages/pl-fe/src/components/event-preview.tsx
+++ b/packages/pl-fe/src/components/event-preview.tsx
@@ -56,7 +56,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
         {floatingAction && action}
       </div>
       <div className='h-40 bg-primary-200 dark:bg-gray-600'>
-        {banner && <img className='h-full w-full object-cover' src={banner.url} alt={intl.formatMessage(messages.eventBanner)} />}
+        {banner && <img className='size-full object-cover' src={banner.url} alt={intl.formatMessage(messages.eventBanner)} />}
       </div>
       <Stack className='p-2.5' space={2}>
         <HStack space={2} alignItems='center' justifyContent='between'>
diff --git a/packages/pl-fe/src/components/group-card.tsx b/packages/pl-fe/src/components/group-card.tsx
index a83254d95..11c1d2b21 100644
--- a/packages/pl-fe/src/components/group-card.tsx
+++ b/packages/pl-fe/src/components/group-card.tsx
@@ -23,7 +23,7 @@ const GroupCard: React.FC<IGroupCard> = ({ group }) => (
     <Stack grow className='relative basis-1/2 rounded-t-lg bg-primary-100 dark:bg-gray-800'>
       <GroupHeaderImage
         group={group}
-        className='absolute inset-0 h-full w-full rounded-t-lg object-cover'
+        className='absolute inset-0 size-full rounded-t-lg object-cover'
       />
     </Stack>
 
diff --git a/packages/pl-fe/src/components/groups/popover/group-popover.tsx b/packages/pl-fe/src/components/groups/popover/group-popover.tsx
index a6bb3b06d..cae138357 100644
--- a/packages/pl-fe/src/components/groups/popover/group-popover.tsx
+++ b/packages/pl-fe/src/components/groups/popover/group-popover.tsx
@@ -52,7 +52,7 @@ const GroupPopover = (props: IGroupPopoverContainer) => {
             <Stack grow className='relative basis-1/2 rounded-t-lg bg-primary-100 dark:bg-gray-800'>
               {group.header && (
                 <img
-                  className='absolute inset-0 h-full w-full rounded-t-lg object-cover'
+                  className='absolute inset-0 size-full rounded-t-lg object-cover'
                   src={group.header}
                   alt={group.header_description}
                 />
diff --git a/packages/pl-fe/src/components/location-search.tsx b/packages/pl-fe/src/components/location-search.tsx
index cdce60fa4..7585ed249 100644
--- a/packages/pl-fe/src/components/location-search.tsx
+++ b/packages/pl-fe/src/components/location-search.tsx
@@ -97,8 +97,8 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
         renderSuggestion={AutosuggestLocation}
       />
       <div role='button' tabIndex={0} className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto' onClick={handleClear}>
-        <Icon src={require('@tabler/icons/outline/search.svg')} className={clsx('h-5 w-5 text-gray-600', { 'hidden': !empty })} />
-        <Icon src={require('@tabler/icons/outline/backspace.svg')} className={clsx('h-5 w-5 text-gray-600', { 'hidden': empty })} aria-label={intl.formatMessage(messages.placeholder)} />
+        <Icon src={require('@tabler/icons/outline/search.svg')} className={clsx('size-5 text-gray-600', { 'hidden': !empty })} />
+        <Icon src={require('@tabler/icons/outline/backspace.svg')} className={clsx('size-5 text-gray-600', { 'hidden': empty })} aria-label={intl.formatMessage(messages.placeholder)} />
       </div>
     </div>
   );
diff --git a/packages/pl-fe/src/components/media-gallery.tsx b/packages/pl-fe/src/components/media-gallery.tsx
index 6da512246..46ac2e2e5 100644
--- a/packages/pl-fe/src/components/media-gallery.tsx
+++ b/packages/pl-fe/src/components/media-gallery.tsx
@@ -145,7 +145,7 @@ const Item: React.FC<IItem> = ({
     const filename = truncateFilename(attachment.url, MAX_FILENAME_LENGTH);
     const attachmentIcon = (
       <Icon
-        className='h-16 w-16 text-gray-800 dark:text-gray-200'
+        className='size-16 text-gray-800 dark:text-gray-200'
         src={MIMETYPE_ICONS[attachment.mime_type as string] || require('@tabler/icons/outline/paperclip.svg')}
       />
     );
@@ -177,7 +177,7 @@ const Item: React.FC<IItem> = ({
         target='_blank'
       >
         <StillImage
-          className='h-full w-full'
+          className='size-full'
           src={mediaPreview ? attachment.preview_url : attachment.url}
           alt={attachment.description}
           letterboxed={letterboxed}
diff --git a/packages/pl-fe/src/components/modal-root.tsx b/packages/pl-fe/src/components/modal-root.tsx
index 0cdfe9a41..dd658e786 100644
--- a/packages/pl-fe/src/components/modal-root.tsx
+++ b/packages/pl-fe/src/components/modal-root.tsx
@@ -225,7 +225,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
   return (
     <div
       ref={ref}
-      className={clsx('fixed left-0 top-0 z-[100] h-full w-full overflow-y-auto overflow-x-hidden transition-opacity ease-in-out', {
+      className={clsx('fixed left-0 top-0 z-[100] size-full overflow-y-auto overflow-x-hidden transition-opacity ease-in-out', {
         'pointer-events-none': !visible,
       })}
       style={{ opacity: revealed ? 1 : 0 }}
diff --git a/packages/pl-fe/src/components/pending-items-row.tsx b/packages/pl-fe/src/components/pending-items-row.tsx
index 5fd4258a3..c84549d75 100644
--- a/packages/pl-fe/src/components/pending-items-row.tsx
+++ b/packages/pl-fe/src/components/pending-items-row.tsx
@@ -43,7 +43,7 @@ const PendingItemsRow: React.FC<IPendingItemsRow> = ({ to, count, size = 'md' })
 
       <Icon
         src={require('@tabler/icons/outline/chevron-right.svg')}
-        className='h-5 w-5 text-gray-600 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-500'
+        className='size-5 text-gray-600 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-500'
       />
     </HStack>
   </Link>
diff --git a/packages/pl-fe/src/components/polls/poll-option.tsx b/packages/pl-fe/src/components/polls/poll-option.tsx
index 363ce3b7a..607a2b129 100644
--- a/packages/pl-fe/src/components/polls/poll-option.tsx
+++ b/packages/pl-fe/src/components/polls/poll-option.tsx
@@ -70,7 +70,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
 
         <div className='col-start-1 row-start-1 flex items-center justify-self-end'>
           <span
-            className={clsx('flex h-6 w-6 flex-none items-center justify-center rounded-full border border-solid', {
+            className={clsx('flex size-6 flex-none items-center justify-center rounded-full border border-solid', {
               'bg-primary-600 border-primary-600 dark:bg-primary-300 dark:border-primary-300': active,
               'border-primary-300 bg-white dark:bg-primary-900 dark:border-primary-500': !active,
             })}
@@ -81,7 +81,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
             aria-label={option.title}
           >
             {active && (
-              <Icon src={require('@tabler/icons/outline/check.svg')} className='h-4 w-4 text-white dark:text-primary-900' />
+              <Icon src={require('@tabler/icons/outline/check.svg')} className='size-4 text-white dark:text-primary-900' />
             )}
           </span>
         </div>
@@ -141,7 +141,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
                 <Icon
                   src={require('@tabler/icons/outline/circle-check.svg')}
                   alt={intl.formatMessage(messages.voted)}
-                  className='h-4 w-4 text-primary-600 dark:fill-white dark:text-primary-800'
+                  className='size-4 text-primary-600 dark:fill-white dark:text-primary-800'
                 />
               ) : (
                 <div className='svg-icon' />
diff --git a/packages/pl-fe/src/components/preview-card.tsx b/packages/pl-fe/src/components/preview-card.tsx
index 9b18b13d3..dc275ff50 100644
--- a/packages/pl-fe/src/components/preview-card.tsx
+++ b/packages/pl-fe/src/components/preview-card.tsx
@@ -146,7 +146,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
 
   const canvas = (
     <Blurhash
-      className='absolute inset-0 -z-10 h-full w-full'
+      className='absolute inset-0 -z-10 size-full'
       hash={card.blurhash}
     />
   );
@@ -184,7 +184,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
                 <button onClick={handleEmbedClick} className='appearance-none text-gray-700 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100'>
                   <Icon
                     src={iconVariant}
-                    className='h-6 w-6 text-inherit'
+                    className='size-6 text-inherit'
                   />
                 </button>
 
@@ -198,7 +198,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
                   >
                     <Icon
                       src={require('@tabler/icons/outline/external-link.svg')}
-                      className='h-6 w-6 text-inherit'
+                      className='size-6 text-inherit'
                     />
                   </a>
                 )}
@@ -219,7 +219,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
     embed = (
       <div className={clsx(
         'status-card__image',
-        'w-full flex-none rounded-l md:h-auto md:w-auto md:flex-auto',
+        'w-full flex-none rounded-l md:size-auto md:flex-auto',
         {
           'h-auto': horizontal,
           'h-[200px]': !horizontal,
diff --git a/packages/pl-fe/src/components/profile-hover-card.tsx b/packages/pl-fe/src/components/profile-hover-card.tsx
index 33a266691..f5f1f8173 100644
--- a/packages/pl-fe/src/components/profile-hover-card.tsx
+++ b/packages/pl-fe/src/components/profile-hover-card.tsx
@@ -108,7 +108,7 @@ const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }) => {
               <HStack alignItems='center' space={0.5}>
                 <Icon
                   src={require('@tabler/icons/outline/calendar.svg')}
-                  className='h-4 w-4 text-gray-800 dark:text-gray-200'
+                  className='size-4 text-gray-800 dark:text-gray-200'
                 />
 
                 <Text size='sm' title={intl.formatDate(account.created_at, dateFormatOptions)}>
diff --git a/packages/pl-fe/src/components/quoted-status-indicator.tsx b/packages/pl-fe/src/components/quoted-status-indicator.tsx
index 46293cf3d..15b25afdc 100644
--- a/packages/pl-fe/src/components/quoted-status-indicator.tsx
+++ b/packages/pl-fe/src/components/quoted-status-indicator.tsx
@@ -18,7 +18,7 @@ const QuotedStatusIndicator: React.FC<IQuotedStatusIndicator> = ({ statusId }) =
 
   return (
     <HStack alignItems='center' space={1}>
-      <Icon className='h-5 w-5' src={require('@tabler/icons/outline/quote.svg')} aria-hidden />
+      <Icon className='size-5' src={require('@tabler/icons/outline/quote.svg')} aria-hidden />
       <Text truncate>{status.url}</Text>
     </HStack>
   );
diff --git a/packages/pl-fe/src/components/radio.tsx b/packages/pl-fe/src/components/radio.tsx
index 205ba530e..ac00b7606 100644
--- a/packages/pl-fe/src/components/radio.tsx
+++ b/packages/pl-fe/src/components/radio.tsx
@@ -30,7 +30,7 @@ const RadioItem: React.FC<IRadioItem> = ({ label, hint, checked = false, onChang
       checked={checked}
       onChange={onChange}
       value={value}
-      className='h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500'
+      className='size-4 border-gray-300 text-primary-600 focus:ring-primary-500'
     />
   </ListItem>
 );
diff --git a/packages/pl-fe/src/components/scrobble.tsx b/packages/pl-fe/src/components/scrobble.tsx
index d8ef60652..6a437a4dd 100644
--- a/packages/pl-fe/src/components/scrobble.tsx
+++ b/packages/pl-fe/src/components/scrobble.tsx
@@ -35,7 +35,7 @@ const Scrobble: React.FC<IScrobble> = ({ scrobble }) => {
     <HStack alignItems='center' space={0.5}>
       <Icon
         src={require('@tabler/icons/outline/music.svg')}
-        className='h-4 w-4 text-gray-800 dark:text-gray-200'
+        className='size-4 text-gray-800 dark:text-gray-200'
       />
 
       <div className='relative box-border w-full overflow-hidden whitespace-nowrap'>
diff --git a/packages/pl-fe/src/components/scroll-top-button.tsx b/packages/pl-fe/src/components/scroll-top-button.tsx
index a22679e98..b2956ddeb 100644
--- a/packages/pl-fe/src/components/scroll-top-button.tsx
+++ b/packages/pl-fe/src/components/scroll-top-button.tsx
@@ -88,7 +88,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
         onClick={handleClick}
       >
         <Icon
-          className='h-4 w-4'
+          className='size-4'
           src={require('@tabler/icons/outline/arrow-bar-to-up.svg')}
         />
 
diff --git a/packages/pl-fe/src/components/sidebar-menu.tsx b/packages/pl-fe/src/components/sidebar-menu.tsx
index 99f4f9fe1..1398e6f4a 100644
--- a/packages/pl-fe/src/components/sidebar-menu.tsx
+++ b/packages/pl-fe/src/components/sidebar-menu.tsx
@@ -53,7 +53,7 @@ const SidebarLink: React.FC<ISidebarLink> = ({ href, to, icon, text, onClick })
   const body = (
     <HStack space={2} alignItems='center'>
       <div className='relative inline-flex rounded-full bg-primary-50 p-2 dark:bg-gray-800'>
-        <Icon src={icon} className='h-5 w-5 text-primary-500' />
+        <Icon src={icon} className='size-5 text-primary-500' />
       </div>
 
       <Text tag='span' weight='medium' theme='inherit'>{text}</Text>
@@ -193,7 +193,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
           })
         }
       >
-        <div className='relative h-full w-full overflow-auto'>
+        <div className='relative size-full overflow-auto'>
           <div className='p-4'>
             {account ? (
               <Stack space={4}>
@@ -392,7 +392,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                         <Icon
                           src={require('@tabler/icons/outline/chevron-down.svg')}
-                          className={clsx('h-4 w-4 text-gray-900 transition-transform dark:text-gray-100', {
+                          className={clsx('size-4 text-gray-900 transition-transform dark:text-gray-100', {
                             'rotate-180': switcher,
                           })}
                         />
@@ -404,7 +404,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                         {otherAccounts.map(account => renderAccount(account))}
 
                         <NavLink className='flex items-center space-x-1 py-2' to='/login/add' onClick={handleClose}>
-                          <Icon className='h-4 w-4 text-primary-500' src={require('@tabler/icons/outline/plus.svg')} />
+                          <Icon className='size-4 text-primary-500' src={require('@tabler/icons/outline/plus.svg')} />
                           <Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
                         </NavLink>
                       </div>
diff --git a/packages/pl-fe/src/components/sidebar-navigation-link.tsx b/packages/pl-fe/src/components/sidebar-navigation-link.tsx
index c131ec22f..d5315d949 100644
--- a/packages/pl-fe/src/components/sidebar-navigation-link.tsx
+++ b/packages/pl-fe/src/components/sidebar-navigation-link.tsx
@@ -61,7 +61,7 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
           src={(isActive && activeIcon) || icon}
           count={demetricator ? undefined : count}
           countMax={countMax}
-          className={clsx('h-5 w-5', {
+          className={clsx('size-5', {
             'text-primary-700 dark:text-white': !isActive,
             'text-white': isActive,
           })}
diff --git a/packages/pl-fe/src/components/status-action-button.tsx b/packages/pl-fe/src/components/status-action-button.tsx
index 3d6fe3e09..a7fcdaa64 100644
--- a/packages/pl-fe/src/components/status-action-button.tsx
+++ b/packages/pl-fe/src/components/status-action-button.tsx
@@ -48,8 +48,8 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
   const renderIcon = () => {
     if (emoji) {
       return (
-        <span className='flex h-6 w-6 items-center justify-center'>
-          <Emoji className='h-full w-full p-0.5' emoji={emoji.name} src={emoji.url} />
+        <span className='flex size-6 items-center justify-center'>
+          <Emoji className='size-full p-0.5' emoji={emoji.name} src={emoji.url} />
         </span>
       );
     } else {
diff --git a/packages/pl-fe/src/components/status-content.tsx b/packages/pl-fe/src/components/status-content.tsx
index c6b4db5a4..954e4ffc8 100644
--- a/packages/pl-fe/src/components/status-content.tsx
+++ b/packages/pl-fe/src/components/status-content.tsx
@@ -44,7 +44,7 @@ const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick, quote, poll }) =>
     />
     <button className='flex items-center border-0 bg-transparent p-0 pt-2 text-gray-900 hover:underline active:underline dark:text-gray-300' onClick={onClick}>
       <FormattedMessage id='status.read_more' defaultMessage='Read more' />
-      <Icon className='inline-block h-5 w-5' src={require('@tabler/icons/outline/chevron-right.svg')} />
+      <Icon className='inline-block size-5' src={require('@tabler/icons/outline/chevron-right.svg')} />
     </button>
   </div>
 );
diff --git a/packages/pl-fe/src/components/status-language-picker.tsx b/packages/pl-fe/src/components/status-language-picker.tsx
index 7848bab00..d4d896df8 100644
--- a/packages/pl-fe/src/components/status-language-picker.tsx
+++ b/packages/pl-fe/src/components/status-language-picker.tsx
@@ -25,7 +25,7 @@ const StatusLanguagePicker: React.FC<IStatusLanguagePicker> = ({ status, showLab
 
   if (!status.contentMapHtml || Object.keys(status.contentMapHtml).length < 2) return null;
 
-  const icon = <Icon className='h-4 w-4 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/outline/language.svg')} />;
+  const icon = <Icon className='size-4 text-gray-700 dark:text-gray-600' src={require('@tabler/icons/outline/language.svg')} />;
 
   return (
     <>
diff --git a/packages/pl-fe/src/components/status-reactions-bar.tsx b/packages/pl-fe/src/components/status-reactions-bar.tsx
index 421c9ca8f..e48e1bf64 100644
--- a/packages/pl-fe/src/components/status-reactions-bar.tsx
+++ b/packages/pl-fe/src/components/status-reactions-bar.tsx
@@ -89,7 +89,7 @@ const StatusReaction: React.FC<IStatusReaction> = ({ reaction, status, obfuscate
       disabled={unauthenticated}
       {...bind}
     >
-      <Emoji className='h-5 w-5' emoji={reaction.name} src={reaction.url || undefined} />
+      <Emoji className='size-5' emoji={reaction.name} src={reaction.url || undefined} />
 
       <Text size='xs' weight='semibold' theme='inherit'>
         <AnimatedNumber value={reaction.count} obfuscate={obfuscate} short />
@@ -130,7 +130,7 @@ const StatusReactionsBar: React.FC<IStatusReactionsBar> = ({ status, collapsed }
             title={intl.formatMessage(messages.addEmoji)}
           >
             <Icon
-              className='h-4 w-4'
+              className='size-4'
               src={require('@tabler/icons/outline/mood-plus.svg')}
             />
           </button>
diff --git a/packages/pl-fe/src/components/status.tsx b/packages/pl-fe/src/components/status.tsx
index 49347fd55..bf0d678a3 100644
--- a/packages/pl-fe/src/components/status.tsx
+++ b/packages/pl-fe/src/components/status.tsx
@@ -187,7 +187,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/outline/repeat.svg')} className='h-4 w-4 text-green-600' />}
+          icon={<Icon src={require('@tabler/icons/outline/repeat.svg')} className='size-4 text-green-600' />}
           text={
             <FormattedMessage
               id='status.reblogged_by_with_group'
@@ -252,7 +252,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/outline/repeat.svg')} className='h-4 w-4 text-green-600' />}
+          icon={<Icon src={require('@tabler/icons/outline/repeat.svg')} className='size-4 text-green-600' />}
           text={
             <FormattedMessage
               id='status.reblogged_by'
@@ -269,7 +269,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/outline/pinned.svg')} className='h-4 w-4 text-gray-600 dark:text-gray-400' />}
+          icon={<Icon src={require('@tabler/icons/outline/pinned.svg')} className='size-4 text-gray-600 dark:text-gray-400' />}
           text={
             <FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
           }
@@ -279,7 +279,7 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          icon={<Icon src={require('@tabler/icons/outline/circles.svg')} className='h-4 w-4 text-primary-600 dark:text-accent-blue' />}
+          icon={<Icon src={require('@tabler/icons/outline/circles.svg')} className='size-4 text-primary-600 dark:text-accent-blue' />}
           text={
             <FormattedMessage
               id='status.group'
diff --git a/packages/pl-fe/src/components/still-image.tsx b/packages/pl-fe/src/components/still-image.tsx
index c84724fb9..e37b3d366 100644
--- a/packages/pl-fe/src/components/still-image.tsx
+++ b/packages/pl-fe/src/components/still-image.tsx
@@ -46,7 +46,7 @@ const StillImage: React.FC<IStillImage> = ({
   };
 
   /** ClassNames shared between the `<img>` and `<canvas>` elements. */
-  const baseClassName = clsx('block h-full w-full', {
+  const baseClassName = clsx('block size-full', {
     'object-contain': letterboxed,
     'object-cover': !letterboxed,
   });
diff --git a/packages/pl-fe/src/components/thumb-navigation.tsx b/packages/pl-fe/src/components/thumb-navigation.tsx
index 63c897ef7..ff3f506c2 100644
--- a/packages/pl-fe/src/components/thumb-navigation.tsx
+++ b/packages/pl-fe/src/components/thumb-navigation.tsx
@@ -57,7 +57,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
     >
       <Icon
         src={require('@tabler/icons/outline/square-rounded-plus.svg')}
-        className='h-6 w-6 text-gray-600 black:text-white'
+        className='size-6 text-gray-600 black:text-white'
       />
     </button>
   );
@@ -71,7 +71,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
       >
         <Icon
           src={require('@tabler/icons/outline/menu-2.svg')}
-          className='h-5 w-5 text-gray-600 black:text-white'
+          className='size-5 text-gray-600 black:text-white'
         />
       </button>
 
diff --git a/packages/pl-fe/src/components/translate-button.tsx b/packages/pl-fe/src/components/translate-button.tsx
index b96ee8484..6db9c44aa 100644
--- a/packages/pl-fe/src/components/translate-button.tsx
+++ b/packages/pl-fe/src/components/translate-button.tsx
@@ -55,7 +55,7 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
   const button = (
     <button className='w-fit' onClick={handleTranslate}>
       <HStack alignItems='center' space={1} className='text-primary-600 hover:underline dark:text-gray-600'>
-        <Icon src={require('@tabler/icons/outline/language.svg')} className='h-4 w-4' />
+        <Icon src={require('@tabler/icons/outline/language.svg')} className='size-4' />
         <span>
           {status.translation ? (
             <FormattedMessage id='status.show_original' defaultMessage='Show original' />
@@ -66,7 +66,7 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
           )}
         </span>
         {status.translating && (
-          <Icon src={require('@tabler/icons/outline/loader-2.svg')} className='h-4 w-4 animate-spin' />
+          <Icon src={require('@tabler/icons/outline/loader-2.svg')} className='size-4 animate-spin' />
         )}
       </HStack>
     </button>
diff --git a/packages/pl-fe/src/components/trending-link.tsx b/packages/pl-fe/src/components/trending-link.tsx
index c0179721b..71a83bb58 100644
--- a/packages/pl-fe/src/components/trending-link.tsx
+++ b/packages/pl-fe/src/components/trending-link.tsx
@@ -20,14 +20,14 @@ const TrendingLink: React.FC<ITrendingLink> = ({ trendingLink }) => {
 
   if (trendingLink.image) {
     media = (
-      <div className='relative h-32 w-32 overflow-hidden rounded-md'>
+      <div className='relative size-32 overflow-hidden rounded-md'>
         {trendingLink.blurhash && (
           <Blurhash
-            className='absolute inset-0 z-0 h-full w-full'
+            className='absolute inset-0 z-0 size-full'
             hash={trendingLink.blurhash}
           />
         )}
-        <img className='relative h-full w-full object-cover' src={trendingLink.image} alt={trendingLink.image_description || undefined} />
+        <img className='relative size-full object-cover' src={trendingLink.image} alt={trendingLink.image_description || undefined} />
       </div>
     );
   }
diff --git a/packages/pl-fe/src/components/ui/accordion/accordion.tsx b/packages/pl-fe/src/components/ui/accordion/accordion.tsx
index 5ee608d97..3cb98101f 100644
--- a/packages/pl-fe/src/components/ui/accordion/accordion.tsx
+++ b/packages/pl-fe/src/components/ui/accordion/accordion.tsx
@@ -67,13 +67,13 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
             <button onClick={handleAction} title={actionLabel}>
               <Icon
                 src={actionIcon}
-                className='h-5 w-5 text-gray-700 dark:text-gray-600'
+                className='size-5 text-gray-700 dark:text-gray-600'
               />
             </button>
           )}
           <Icon
             src={expanded ? require('@tabler/icons/outline/chevron-up.svg') : require('@tabler/icons/outline/chevron-down.svg')}
-            className='h-5 w-5 text-gray-700 dark:text-gray-600'
+            className='size-5 text-gray-700 dark:text-gray-600'
           />
         </HStack>
       </button>
diff --git a/packages/pl-fe/src/components/ui/avatar/avatar.tsx b/packages/pl-fe/src/components/ui/avatar/avatar.tsx
index 4b9183eca..8f02060a8 100644
--- a/packages/pl-fe/src/components/ui/avatar/avatar.tsx
+++ b/packages/pl-fe/src/components/ui/avatar/avatar.tsx
@@ -43,7 +43,7 @@ const Avatar = (props: IAvatar) => {
       >
         <Icon
           src={require('@tabler/icons/outline/photo-off.svg')}
-          className='h-4 w-4 text-gray-500 dark:text-gray-700'
+          className='size-4 text-gray-500 dark:text-gray-700'
         />
       </div>
     );
diff --git a/packages/pl-fe/src/components/ui/button/button.tsx b/packages/pl-fe/src/components/ui/button/button.tsx
index 1aace03fb..8df66dce4 100644
--- a/packages/pl-fe/src/components/ui/button/button.tsx
+++ b/packages/pl-fe/src/components/ui/button/button.tsx
@@ -69,13 +69,13 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>(({
       type={type}
       data-testid='button'
     >
-      {icon ? <Icon src={icon} className='h-4 w-4' /> : null}
+      {icon ? <Icon src={icon} className='size-4' /> : null}
 
       {body && (
         <span>{body}</span>
       )}
 
-      {secondaryIcon ? <Icon src={secondaryIcon} className='h-4 w-4' /> : null}
+      {secondaryIcon ? <Icon src={secondaryIcon} className='size-4' /> : null}
     </button>
   );
 
diff --git a/packages/pl-fe/src/components/ui/card/card.tsx b/packages/pl-fe/src/components/ui/card/card.tsx
index ecb245a74..7bc67acd3 100644
--- a/packages/pl-fe/src/components/ui/card/card.tsx
+++ b/packages/pl-fe/src/components/ui/card/card.tsx
@@ -72,7 +72,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
 
     return (
       <Comp {...backAttributes} className='rounded-full text-gray-900 focus:ring-2 focus:ring-primary-500 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
-        <SvgIcon src={require('@tabler/icons/outline/arrow-left.svg')} className='h-6 w-6 rtl:rotate-180' />
+        <SvgIcon src={require('@tabler/icons/outline/arrow-left.svg')} className='size-6 rtl:rotate-180' />
         <span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
       </Comp>
     );
diff --git a/packages/pl-fe/src/components/ui/carousel/carousel.tsx b/packages/pl-fe/src/components/ui/carousel/carousel.tsx
index 73d34886f..414ae24ac 100644
--- a/packages/pl-fe/src/components/ui/carousel/carousel.tsx
+++ b/packages/pl-fe/src/components/ui/carousel/carousel.tsx
@@ -69,7 +69,7 @@ const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
         >
           <Icon
             src={require('@tabler/icons/outline/chevron-left.svg')}
-            className='h-5 w-5 text-black dark:text-white'
+            className='size-5 text-black dark:text-white'
           />
         </button>
       </div>
@@ -101,7 +101,7 @@ const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
         >
           <Icon
             src={require('@tabler/icons/outline/chevron-right.svg')}
-            className='h-5 w-5 text-black dark:text-white'
+            className='size-5 text-black dark:text-white'
           />
         </button>
       </div>
diff --git a/packages/pl-fe/src/components/ui/checkbox/checkbox.tsx b/packages/pl-fe/src/components/ui/checkbox/checkbox.tsx
index e7d096390..3b4c40407 100644
--- a/packages/pl-fe/src/components/ui/checkbox/checkbox.tsx
+++ b/packages/pl-fe/src/components/ui/checkbox/checkbox.tsx
@@ -8,7 +8,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => (
     {...props}
     ref={ref}
     type='checkbox'
-    className='h-4 w-4 rounded border-2 border-gray-300 text-primary-600 focus:ring-primary-500 black:bg-black dark:border-gray-800 dark:bg-gray-900'
+    className='size-4 rounded border-2 border-gray-300 text-primary-600 focus:ring-primary-500 black:bg-black dark:border-gray-800 dark:bg-gray-900'
   />
 ));
 
diff --git a/packages/pl-fe/src/components/ui/input/input.tsx b/packages/pl-fe/src/components/ui/input/input.tsx
index 5c55dab71..ceac6c17b 100644
--- a/packages/pl-fe/src/components/ui/input/input.tsx
+++ b/packages/pl-fe/src/components/ui/input/input.tsx
@@ -73,7 +73,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
       >
         {icon ? (
           <div className='pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3'>
-            <Icon src={icon} className='h-4 w-4 text-gray-700 dark:text-gray-600' aria-hidden='true' />
+            <Icon src={icon} className='size-4 text-gray-700 dark:text-gray-600' aria-hidden='true' />
           </div>
         ) : null}
 
@@ -124,7 +124,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
               >
                 <SvgIcon
                   src={revealed ? require('@tabler/icons/outline/eye-off.svg') : require('@tabler/icons/outline/eye.svg')}
-                  className='h-4 w-4'
+                  className='size-4'
                 />
               </button>
             </div>
diff --git a/packages/pl-fe/src/components/ui/radio-button/radio-button.tsx b/packages/pl-fe/src/components/ui/radio-button/radio-button.tsx
index 654a599a1..b66b1b077 100644
--- a/packages/pl-fe/src/components/ui/radio-button/radio-button.tsx
+++ b/packages/pl-fe/src/components/ui/radio-button/radio-button.tsx
@@ -26,7 +26,7 @@ const RadioButton: React.FC<IRadioButton> = ({ name, value, checked, onChange, l
         value={value}
         checked={checked}
         onChange={onChange}
-        className='h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500'
+        className='size-4 border-gray-300 text-primary-600 focus:ring-primary-500'
       />
 
       <label htmlFor={formFieldId} className='block text-sm font-medium text-gray-700'>
diff --git a/packages/pl-fe/src/components/ui/slider/slider.tsx b/packages/pl-fe/src/components/ui/slider/slider.tsx
index e7b4f7918..429c4a73e 100644
--- a/packages/pl-fe/src/components/ui/slider/slider.tsx
+++ b/packages/pl-fe/src/components/ui/slider/slider.tsx
@@ -60,7 +60,7 @@ const Slider: React.FC<ISlider> = ({ value, onChange }) => {
       <div className='absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full bg-primary-200 dark:bg-primary-700' />
       <div className='absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent-500' style={{ width: `${value * 100}%` }} />
       <span
-        className='absolute top-1/2 z-10 -ml-1.5 h-3 w-3 -translate-y-1/2 rounded-full bg-accent-500 shadow'
+        className='absolute top-1/2 z-10 -ml-1.5 size-3 -translate-y-1/2 rounded-full bg-accent-500 shadow'
         tabIndex={0}
         style={{ left: `${value * 100}%` }}
       />
diff --git a/packages/pl-fe/src/components/ui/toast/toast.tsx b/packages/pl-fe/src/components/ui/toast/toast.tsx
index 3cce8dd61..b7e11a2f1 100644
--- a/packages/pl-fe/src/components/ui/toast/toast.tsx
+++ b/packages/pl-fe/src/components/ui/toast/toast.tsx
@@ -43,7 +43,7 @@ const Toast = (props: IToast) => {
         return (
           <Icon
             src={require('@tabler/icons/outline/circle-check.svg')}
-            className='h-6 w-6 text-success-500 dark:text-success-400'
+            className='size-6 text-success-500 dark:text-success-400'
             aria-hidden
           />
         );
@@ -51,7 +51,7 @@ const Toast = (props: IToast) => {
         return (
           <Icon
             src={require('@tabler/icons/outline/info-circle.svg')}
-            className='h-6 w-6 text-primary-600 dark:text-accent-blue'
+            className='size-6 text-primary-600 dark:text-accent-blue'
             aria-hidden
           />
         );
@@ -59,7 +59,7 @@ const Toast = (props: IToast) => {
         return (
           <Icon
             src={require('@tabler/icons/outline/alert-circle.svg')}
-            className='h-6 w-6 text-danger-600'
+            className='size-6 text-danger-600'
             aria-hidden
           />
         );
@@ -143,7 +143,7 @@ const Toast = (props: IToast) => {
               data-testid='toast-dismiss'
             >
               <span className='sr-only'><FormattedMessage id='lightbox.close' defaultMessage='Close' /></span>
-              <Icon src={require('@tabler/icons/outline/x.svg')} className='h-5 w-5' />
+              <Icon src={require('@tabler/icons/outline/x.svg')} className='size-5' />
             </button>
           </div>
         </HStack>
diff --git a/packages/pl-fe/src/components/ui/widget/widget.tsx b/packages/pl-fe/src/components/ui/widget/widget.tsx
index e29171fde..42b575bde 100644
--- a/packages/pl-fe/src/components/ui/widget/widget.tsx
+++ b/packages/pl-fe/src/components/ui/widget/widget.tsx
@@ -51,7 +51,7 @@ const Widget: React.FC<IWidget> = ({
       <WidgetTitle title={title} />
       {action || (onActionClick && (
         <IconButton
-          className='ml-2 h-6 w-6 text-black rtl:rotate-180 dark:text-white'
+          className='ml-2 size-6 text-black rtl:rotate-180 dark:text-white'
           src={actionIcon}
           onClick={onActionClick}
           title={actionTitle}
diff --git a/packages/pl-fe/src/components/upload-progress.tsx b/packages/pl-fe/src/components/upload-progress.tsx
index 89803555c..f457cf04a 100644
--- a/packages/pl-fe/src/components/upload-progress.tsx
+++ b/packages/pl-fe/src/components/upload-progress.tsx
@@ -13,7 +13,7 @@ const UploadProgress: React.FC<IUploadProgress> = ({ progress }) => (
   <HStack alignItems='center' space={2}>
     <Icon
       src={require('@tabler/icons/outline/cloud-upload.svg')}
-      className='h-7 w-7 text-gray-500'
+      className='size-7 text-gray-500'
     />
 
     <Stack space={1}>
diff --git a/packages/pl-fe/src/components/upload.tsx b/packages/pl-fe/src/components/upload.tsx
index fd62ee89a..ffb176a49 100644
--- a/packages/pl-fe/src/components/upload.tsx
+++ b/packages/pl-fe/src/components/upload.tsx
@@ -149,7 +149,7 @@ const Upload: React.FC<IUpload> = ({
 
   const uploadIcon = mediaType === 'unknown' && (
     <Icon
-      className='mx-auto my-12 h-16 w-16 text-gray-800 dark:text-gray-200'
+      className='mx-auto my-12 size-16 text-gray-800 dark:text-gray-200'
       src={MIMETYPE_ICONS[mimeType || ''] || defaultIcon}
     />
   );
@@ -235,9 +235,9 @@ const Upload: React.FC<IUpload> = ({
               />
             )}
 
-            <div className='absolute inset-0 -z-[1] h-full w-full'>
+            <div className='absolute inset-0 -z-[1] size-full'>
               {mediaType === 'video' && (
-                <video className='h-full w-full object-cover' autoPlay playsInline muted loop>
+                <video className='size-full object-cover' autoPlay playsInline muted loop>
                   <source src={media.preview_url} />
                 </video>
               )}
diff --git a/packages/pl-fe/src/components/verification-badge.tsx b/packages/pl-fe/src/components/verification-badge.tsx
index 8189dd481..1da4a5f91 100644
--- a/packages/pl-fe/src/components/verification-badge.tsx
+++ b/packages/pl-fe/src/components/verification-badge.tsx
@@ -25,7 +25,7 @@ const VerificationBadge: React.FC<IVerificationBadge> = ({ className }) => {
 
   return (
     <span className='rounded-full bg-accent-500' data-testid='verified-badge'>
-      <Element className={clsx('size-[16px] rounded-full bg-accent-500 stroke-[4] p-[1px] text-white', className)} src={icon} alt={intl.formatMessage(messages.verified)} />
+      <Element className={clsx('size-[16px] rounded-full bg-accent-500 stroke-[4] p-px text-white', className)} src={icon} alt={intl.formatMessage(messages.verified)} />
     </span>
   );
 };
diff --git a/packages/pl-fe/src/features/account-gallery/components/media-item.tsx b/packages/pl-fe/src/features/account-gallery/components/media-item.tsx
index 0aa1e89b0..9721238f2 100644
--- a/packages/pl-fe/src/features/account-gallery/components/media-item.tsx
+++ b/packages/pl-fe/src/features/account-gallery/components/media-item.tsx
@@ -66,7 +66,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
         src={attachment.preview_url}
         alt={attachment.description}
         style={{ objectPosition: `${x}% ${y}%` }}
-        className='h-full w-full overflow-hidden rounded-lg'
+        className='size-full overflow-hidden rounded-lg'
       />
     );
   } else if (['gifv', 'video'].indexOf(attachment.type) !== -1) {
diff --git a/packages/pl-fe/src/features/account/components/header.tsx b/packages/pl-fe/src/features/account/components/header.tsx
index 0fd34f02f..cde5af9b8 100644
--- a/packages/pl-fe/src/features/account/components/header.tsx
+++ b/packages/pl-fe/src/features/account/components/header.tsx
@@ -120,7 +120,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
           <HStack alignItems='bottom' space={5} className='-mt-12'>
             <div className='relative flex'>
               <div
-                className='h-24 w-24 rounded-full bg-gray-400 ring-4 ring-white dark:ring-gray-800'
+                className='size-24 rounded-full bg-gray-400 ring-4 ring-white dark:ring-gray-800'
               />
             </div>
           </HStack>
diff --git a/packages/pl-fe/src/features/admin/tabs/dashboard.tsx b/packages/pl-fe/src/features/admin/tabs/dashboard.tsx
index 5203150ca..b3c125974 100644
--- a/packages/pl-fe/src/features/admin/tabs/dashboard.tsx
+++ b/packages/pl-fe/src/features/admin/tabs/dashboard.tsx
@@ -114,7 +114,7 @@ const Dashboard: React.FC = () => {
             <span>{sourceCode.displayName} {sourceCode.version}</span>
 
             <Icon
-              className='h-4 w-4'
+              className='size-4'
               src={require('@tabler/icons/outline/external-link.svg')}
             />
           </a>
diff --git a/packages/pl-fe/src/features/aliases/components/search.tsx b/packages/pl-fe/src/features/aliases/components/search.tsx
index 9acf0b298..0d18aba5d 100644
--- a/packages/pl-fe/src/features/aliases/components/search.tsx
+++ b/packages/pl-fe/src/features/aliases/components/search.tsx
@@ -53,7 +53,7 @@ const Search: React.FC = () => {
         />
 
         <div role='button' tabIndex={hasValue ? 0 : -1} className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto' onClick={handleClear}>
-          <Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('h-5 w-5 text-gray-600', { 'hidden': !hasValue })} />
+          <Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('size-5 text-gray-600', { 'hidden': !hasValue })} />
         </div>
       </label>
       <Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
diff --git a/packages/pl-fe/src/features/bookmark-folders/index.tsx b/packages/pl-fe/src/features/bookmark-folders/index.tsx
index 5c03a1b42..116012f58 100644
--- a/packages/pl-fe/src/features/bookmark-folders/index.tsx
+++ b/packages/pl-fe/src/features/bookmark-folders/index.tsx
@@ -54,7 +54,7 @@ const BookmarkFolders: React.FC = () => {
                     <Emoji
                       emoji={folder.emoji}
                       src={folder.emoji_url || undefined}
-                      className='h-5 w-5 flex-none'
+                      className='size-5 flex-none'
                     />
                   ) : <Icon src={require('@tabler/icons/outline/folder.svg')} size={20} />}
                   <span>{folder.name}</span>
diff --git a/packages/pl-fe/src/features/chats/components/chat-list-item.tsx b/packages/pl-fe/src/features/chats/components/chat-list-item.tsx
index 1318a89fc..c16d816ab 100644
--- a/packages/pl-fe/src/features/chats/components/chat-list-item.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-list-item.tsx
@@ -143,7 +143,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
             <>
               {chat.last_message.unread && (
                 <div
-                  className='h-2 w-2 rounded-full bg-secondary-500'
+                  className='size-2 rounded-full bg-secondary-500'
                   data-testid='chat-unread-indicator'
                 />
               )}
diff --git a/packages/pl-fe/src/features/chats/components/chat-message.tsx b/packages/pl-fe/src/features/chats/components/chat-message.tsx
index 4006e8d9d..a950ee936 100644
--- a/packages/pl-fe/src/features/chats/components/chat-message.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-message.tsx
@@ -190,7 +190,7 @@ const ChatMessage = (props: IChatMessage) => {
             >
               <Icon
                 src={require('@tabler/icons/outline/dots.svg')}
-                className='h-4 w-4'
+                className='size-4'
               />
             </button>
           </DropdownMenu>
diff --git a/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx b/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx
index 4a0b3a12b..ef57e2868 100644
--- a/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx
@@ -108,7 +108,7 @@ const ChatPageMain = () => {
           <HStack alignItems='center'>
             <IconButton
               src={require('@tabler/icons/outline/arrow-left.svg')}
-              className='mr-2 h-7 w-7 sm:mr-0 sm:hidden rtl:rotate-180'
+              className='mr-2 size-7 sm:mr-0 sm:hidden rtl:rotate-180'
               onClick={() => history.push('/chats')}
             />
 
@@ -154,7 +154,7 @@ const ChatPageMain = () => {
                   className='!px-0 hover:!bg-transparent'
                 >
                   <div className='flex w-full items-center space-x-2 text-sm font-bold text-primary-500 dark:text-accent-blue'>
-                    <Icon src={require('@tabler/icons/outline/ban.svg')} className='h-5 w-5' />
+                    <Icon src={require('@tabler/icons/outline/ban.svg')} className='size-5' />
                     <span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
                   </div>
                 </MenuItem>
@@ -166,7 +166,7 @@ const ChatPageMain = () => {
                     className='!px-0 hover:!bg-transparent'
                   >
                     <div className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600 dark:text-danger-500'>
-                      <Icon src={require('@tabler/icons/outline/logout.svg')} className='h-5 w-5' />
+                      <Icon src={require('@tabler/icons/outline/logout.svg')} className='size-5' />
                       <span>{intl.formatMessage(messages.leaveChat)}</span>
                     </div>
                   </MenuItem>
diff --git a/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-new.tsx b/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-new.tsx
index 0f268906a..74df83be7 100644
--- a/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-new.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-new.tsx
@@ -24,7 +24,7 @@ const ChatPageNew: React.FC<IChatPageNew> = () => {
         <HStack alignItems='center'>
           <IconButton
             src={require('@tabler/icons/outline/arrow-left.svg')}
-            className='mr-2 h-7 w-7 sm:mr-0 sm:hidden rtl:rotate-180'
+            className='mr-2 size-7 sm:mr-0 sm:hidden rtl:rotate-180'
             onClick={() => history.push('/chats')}
           />
 
diff --git a/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-settings.tsx b/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-settings.tsx
index ddb547d40..f76d3f49b 100644
--- a/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-settings.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-settings.tsx
@@ -49,7 +49,7 @@ const ChatPageSettings = () => {
       <HStack alignItems='center'>
         <IconButton
           src={require('@tabler/icons/outline/arrow-left.svg')}
-          className='mr-2 h-7 w-7 sm:mr-0 sm:hidden rtl:rotate-180'
+          className='mr-2 size-7 sm:mr-0 sm:hidden rtl:rotate-180'
           onClick={() => history.push('/chats')}
         />
 
diff --git a/packages/pl-fe/src/features/chats/components/chat-pending-upload.tsx b/packages/pl-fe/src/features/chats/components/chat-pending-upload.tsx
index 24c0dcf4e..edf3e189b 100644
--- a/packages/pl-fe/src/features/chats/components/chat-pending-upload.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-pending-upload.tsx
@@ -8,7 +8,7 @@ interface IChatPendingUpload {
 
 /** Displays a loading thumbnail for an upload in the chat composer. */
 const ChatPendingUpload: React.FC<IChatPendingUpload> = ({ progress }) => (
-  <div className='relative isolate inline-flex h-24 w-24 items-center justify-center overflow-hidden rounded-lg bg-gray-200 p-4 dark:bg-primary-900'>
+  <div className='relative isolate inline-flex size-24 items-center justify-center overflow-hidden rounded-lg bg-gray-200 p-4 dark:bg-primary-900'>
     <ProgressBar progress={progress} size='sm' />
   </div>
 );
diff --git a/packages/pl-fe/src/features/chats/components/chat-search/chat-search.tsx b/packages/pl-fe/src/features/chats/components/chat-search/chat-search.tsx
index 0dfcf241c..fe7050a91 100644
--- a/packages/pl-fe/src/features/chats/components/chat-search/chat-search.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-search/chat-search.tsx
@@ -102,7 +102,7 @@ const ChatSearch: React.FC<IChatSearch> = ({ isMainPage = false }) => {
             <button onClick={clearValue}>
               <Icon
                 src={hasSearchValue ? require('@tabler/icons/outline/x.svg') : require('@tabler/icons/outline/search.svg')}
-                className='h-4 w-4 text-gray-700 dark:text-gray-600'
+                className='size-4 text-gray-700 dark:text-gray-600'
                 aria-hidden='true'
               />
             </button>
diff --git a/packages/pl-fe/src/features/chats/components/chat-upload-preview.tsx b/packages/pl-fe/src/features/chats/components/chat-upload-preview.tsx
index d5f2eb1c7..3e604c1a1 100644
--- a/packages/pl-fe/src/features/chats/components/chat-upload-preview.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-upload-preview.tsx
@@ -24,7 +24,7 @@ const ChatUploadPreview: React.FC<IChatUploadPreview> = ({ className, attachment
     case 'gifv':
       return (
         <img
-          className='pointer-events-none h-full w-full object-cover'
+          className='pointer-events-none size-full object-cover'
           src={attachment.preview_url}
           alt=''
         />
@@ -32,7 +32,7 @@ const ChatUploadPreview: React.FC<IChatUploadPreview> = ({ className, attachment
     case 'video':
       return (
         <video
-          className='pointer-events-none h-full w-full object-cover'
+          className='pointer-events-none size-full object-cover'
           src={attachment.preview_url}
           autoPlay
           playsInline
@@ -43,9 +43,9 @@ const ChatUploadPreview: React.FC<IChatUploadPreview> = ({ className, attachment
       );
     default:
       return (
-        <div className='pointer-events-none flex h-full w-full items-center justify-center'>
+        <div className='pointer-events-none flex size-full items-center justify-center'>
           <Icon
-            className='mx-auto my-12 h-16 w-16 text-gray-800 dark:text-gray-200'
+            className='mx-auto my-12 size-16 text-gray-800 dark:text-gray-200'
             src={MIMETYPE_ICONS[mimeType || ''] || defaultIcon}
           />
         </div>
diff --git a/packages/pl-fe/src/features/chats/components/chat-upload.tsx b/packages/pl-fe/src/features/chats/components/chat-upload.tsx
index 60c007a6f..08c3eac7e 100644
--- a/packages/pl-fe/src/features/chats/components/chat-upload.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-upload.tsx
@@ -24,8 +24,8 @@ const ChatUpload: React.FC<IChatUpload> = ({ attachment, onDelete }) => {
   };
 
   return (
-    <div className='relative isolate inline-block h-24 w-24 overflow-hidden rounded-lg bg-gray-200 dark:bg-primary-900'>
-      <Blurhash hash={attachment.blurhash} className='absolute inset-0 -z-10 h-full w-full' />
+    <div className='relative isolate inline-block size-24 overflow-hidden rounded-lg bg-gray-200 dark:bg-primary-900'>
+      <Blurhash hash={attachment.blurhash} className='absolute inset-0 -z-10 size-full' />
 
       <div className='absolute right-[6px] top-[6px]'>
         <RemoveButton onClick={onDelete} />
@@ -33,7 +33,7 @@ const ChatUpload: React.FC<IChatUpload> = ({ attachment, onDelete }) => {
 
       <button
         onClick={clickable ? handleOpenModal : undefined}
-        className={clsx('h-full w-full', { 'cursor-zoom-in': clickable, 'cursor-default': !clickable })}
+        className={clsx('size-full', { 'cursor-zoom-in': clickable, 'cursor-default': !clickable })}
       >
         <ChatUploadPreview attachment={attachment} />
       </button>
@@ -50,10 +50,10 @@ const RemoveButton: React.FC<IRemoveButton> = ({ onClick }) => (
   <button
     type='button'
     onClick={onClick}
-    className='flex h-5 w-5 items-center justify-center rounded-full bg-secondary-500 p-1'
+    className='flex size-5 items-center justify-center rounded-full bg-secondary-500 p-1'
   >
     <Icon
-      className='h-3 w-3 text-white'
+      className='size-3 text-white'
       src={require('@tabler/icons/outline/x.svg')}
     />
   </button>
diff --git a/packages/pl-fe/src/features/chats/components/chat-widget/chat-pane-header.tsx b/packages/pl-fe/src/features/chats/components/chat-widget/chat-pane-header.tsx
index 2aaed94ec..273e5ba74 100644
--- a/packages/pl-fe/src/features/chats/components/chat-widget/chat-pane-header.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-widget/chat-pane-header.tsx
@@ -50,7 +50,7 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
               ({unreadCount})
             </Text>
 
-            <div className='h-2.5 w-2.5 rounded-full bg-accent-300' />
+            <div className='size-2.5 rounded-full bg-accent-300' />
           </HStack>
         )}
       </ButtonComp>
diff --git a/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx b/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx
index c6ec227ce..d592176eb 100644
--- a/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx
@@ -91,7 +91,7 @@ const ChatSettings = () => {
             <button onClick={closeSettings}>
               <Icon
                 src={require('@tabler/icons/outline/arrow-left.svg')}
-                className='h-6 w-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
+                className='size-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
               />
             </button>
 
@@ -113,13 +113,13 @@ const ChatSettings = () => {
 
         <Stack space={5}>
           <button onClick={isBlocking ? handleUnblockUser : handleBlockUser} className='flex w-full items-center space-x-2 text-sm font-bold text-primary-600 dark:text-accent-blue'>
-            <Icon src={require('@tabler/icons/outline/ban.svg')} className='h-5 w-5' />
+            <Icon src={require('@tabler/icons/outline/ban.svg')} className='size-5' />
             <span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
           </button>
 
           {features.chatsDelete && (
             <button onClick={handleLeaveChat} className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600'>
-              <Icon src={require('@tabler/icons/outline/logout.svg')} className='h-5 w-5' />
+              <Icon src={require('@tabler/icons/outline/logout.svg')} className='size-5' />
               <span>{intl.formatMessage(messages.leaveChat)}</span>
             </button>
           )}
diff --git a/packages/pl-fe/src/features/chats/components/chat-widget/chat-window.tsx b/packages/pl-fe/src/features/chats/components/chat-widget/chat-window.tsx
index 151770925..46029bf2a 100644
--- a/packages/pl-fe/src/features/chats/components/chat-widget/chat-window.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-widget/chat-window.tsx
@@ -58,7 +58,7 @@ const ChatWindow = () => {
               <button onClick={closeChat}>
                 <Icon
                   src={require('@tabler/icons/outline/arrow-left.svg')}
-                  className='h-6 w-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
+                  className='size-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
                 />
               </button>
             )}
diff --git a/packages/pl-fe/src/features/chats/components/chat-widget/headers/chat-search-header.tsx b/packages/pl-fe/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
index ff45dfc64..c71546d29 100644
--- a/packages/pl-fe/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-widget/headers/chat-search-header.tsx
@@ -27,7 +27,7 @@ const ChatSearchHeader = () => {
           >
             <Icon
               src={require('@tabler/icons/outline/arrow-left.svg')}
-              className='h-6 w-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
+              className='size-6 text-gray-600 rtl:rotate-180 dark:text-gray-400'
             />
           </button>
 
diff --git a/packages/pl-fe/src/features/compose/components/language-dropdown.tsx b/packages/pl-fe/src/features/compose/components/language-dropdown.tsx
index c5b9e0048..aa084bbf1 100644
--- a/packages/pl-fe/src/features/compose/components/language-dropdown.tsx
+++ b/packages/pl-fe/src/features/compose/components/language-dropdown.tsx
@@ -157,7 +157,7 @@ const getLanguageDropdown = (composeId: string): React.FC<ILanguageDropdown> =>
         />
         <div role='button' tabIndex={0} className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-5 rtl:left-0 rtl:right-auto' onClick={handleClear}>
           <Icon
-            className='h-5 w-5 text-gray-600'
+            className='size-5 text-gray-600'
             src={isSearching ? require('@tabler/icons/outline/backspace.svg') : require('@tabler/icons/outline/search.svg')}
             aria-label={intl.formatMessage(messages.search)}
           />
@@ -197,11 +197,11 @@ const getLanguageDropdown = (composeId: string): React.FC<ILanguageDropdown> =>
               {features.multiLanguage && !!language && !active && (
                 textMap.has(code) ? (
                   <button title={intl.formatMessage(messages.deleteLanguage)} onClick={handleDeleteLanguageClick}>
-                    <Icon className='h-4 w-4' src={require('@tabler/icons/outline/minus.svg')} />
+                    <Icon className='size-4' src={require('@tabler/icons/outline/minus.svg')} />
                   </button>
                 ) : (
                   <button title={intl.formatMessage(messages.addLanguage)} onClick={handleAddLanguageClick}>
-                    <Icon className='h-4 w-4' src={require('@tabler/icons/outline/plus.svg')} />
+                    <Icon className='size-4' src={require('@tabler/icons/outline/plus.svg')} />
                   </button>
                 )
               )}
diff --git a/packages/pl-fe/src/features/compose/editor/nodes/emoji-node.tsx b/packages/pl-fe/src/features/compose/editor/nodes/emoji-node.tsx
index 3dd5ebfb0..9a198610b 100644
--- a/packages/pl-fe/src/features/compose/editor/nodes/emoji-node.tsx
+++ b/packages/pl-fe/src/features/compose/editor/nodes/emoji-node.tsx
@@ -81,9 +81,9 @@ class EmojiNode extends DecoratorNode<JSX.Element> {
   decorate(): JSX.Element {
     const emoji = this.__emoji;
     if (isNativeEmoji(emoji)) {
-      return <Component emoji={emoji.native} alt={emoji.colons} title={emoji.colons} className='emojione h-4 w-4' />;
+      return <Component emoji={emoji.native} alt={emoji.colons} title={emoji.colons} className='emojione size-4' />;
     } else {
-      return <Component src={emoji.imageUrl} alt={emoji.colons} className='emojione h-4 w-4' />;
+      return <Component src={emoji.imageUrl} alt={emoji.colons} className='emojione size-4' />;
     }
   }
 
diff --git a/packages/pl-fe/src/features/compose/editor/nodes/image-component.tsx b/packages/pl-fe/src/features/compose/editor/nodes/image-component.tsx
index eef322e2b..c6b79615a 100644
--- a/packages/pl-fe/src/features/compose/editor/nodes/image-component.tsx
+++ b/packages/pl-fe/src/features/compose/editor/nodes/image-component.tsx
@@ -352,7 +352,7 @@ const ImageComponent = ({
                 'opacity-100': !active,
               })}
             >
-              <Icon className='h-4 w-4' src={require('@tabler/icons/outline/alert-triangle.svg')} />
+              <Icon className='size-4' src={require('@tabler/icons/outline/alert-triangle.svg')} />
               <FormattedMessage id='upload_form.description_missing.indicator' defaultMessage='Alt' />
             </span>
           )}
diff --git a/packages/pl-fe/src/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx b/packages/pl-fe/src/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx
index e32596469..3b10cf56c 100644
--- a/packages/pl-fe/src/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx
+++ b/packages/pl-fe/src/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx
@@ -197,7 +197,7 @@ const BlockTypeFloatingToolbar = ({
   return (
     <div
       ref={popupCharStylesEditorRef}
-      className='absolute left-0 top-0 z-10 flex h-[38px] gap-0.5 rounded-lg bg-white p-1 opacity-0 shadow-lg transition-[opacity] dark:bg-gray-900'
+      className='absolute left-0 top-0 z-10 flex h-[38px] gap-0.5 rounded-lg bg-white p-1 opacity-0 shadow-lg transition-opacity dark:bg-gray-900'
     >
       {editor.isEditable() && (
         <>
diff --git a/packages/pl-fe/src/features/compose/editor/plugins/floating-link-editor-plugin.tsx b/packages/pl-fe/src/features/compose/editor/plugins/floating-link-editor-plugin.tsx
index 8ab6c67d6..78f27a572 100644
--- a/packages/pl-fe/src/features/compose/editor/plugins/floating-link-editor-plugin.tsx
+++ b/packages/pl-fe/src/features/compose/editor/plugins/floating-link-editor-plugin.tsx
@@ -193,7 +193,7 @@ const FloatingLinkEditor = ({
                 editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
               }}
             >
-              <Icon className='h-5 w-5' src={require('@tabler/icons/outline/x.svg')} />
+              <Icon className='size-5' src={require('@tabler/icons/outline/x.svg')} />
             </div>
           </>
         ) : (
@@ -210,7 +210,7 @@ const FloatingLinkEditor = ({
                 setEditMode(true);
               }}
             >
-              <Icon className='h-5 w-5' src={require('@tabler/icons/outline/pencil.svg')} />
+              <Icon className='size-5' src={require('@tabler/icons/outline/pencil.svg')} />
             </div>
           </>
         )}
diff --git a/packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx b/packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx
index b6fa664b2..f99a29d4e 100644
--- a/packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx
+++ b/packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx
@@ -99,7 +99,7 @@ export const ToolbarButton: React.FC<IToolbarButton> = ({ active, icon, ...props
     type='button'
     {...props}
   >
-    <Icon className='h-5 w-5' src={icon} />
+    <Icon className='size-5' src={icon} />
   </button>
 );
 
@@ -190,10 +190,10 @@ const BlockTypeDropdown = ({ editor, anchorElem, blockType, icon }: {
         type='button'
       >
         <Icon src={icon} />
-        <Icon src={require('@tabler/icons/outline/chevron-down.svg')} className='-bottom-2 h-4 w-4' />
+        <Icon src={require('@tabler/icons/outline/chevron-down.svg')} className='-bottom-2 size-4' />
         {showDropDown && (
           <div
-            className='absolute left-0 top-9 z-10 flex h-[38px] gap-0.5 rounded-lg bg-white p-1 shadow-lg transition-[opacity] dark:bg-gray-900'
+            className='absolute left-0 top-9 z-10 flex h-[38px] gap-0.5 rounded-lg bg-white p-1 shadow-lg transition-opacity dark:bg-gray-900'
           >
             <ToolbarButton
               onClick={formatParagraph}
@@ -350,7 +350,7 @@ const TextFormatFloatingToolbar = ({
   return (
     <div
       ref={popupCharStylesEditorRef}
-      className='absolute left-0 top-0 z-10 flex h-[38px] gap-0.5 rounded-lg bg-white p-1 opacity-0 shadow-lg transition-[opacity] dark:bg-gray-900'
+      className='absolute left-0 top-0 z-10 flex h-[38px] gap-0.5 rounded-lg bg-white p-1 opacity-0 shadow-lg transition-opacity dark:bg-gray-900'
     >
       {editor.isEditable() && (
         <>
diff --git a/packages/pl-fe/src/features/crypto-donate/components/detailed-crypto-address.tsx b/packages/pl-fe/src/features/crypto-donate/components/detailed-crypto-address.tsx
index a8bce3384..5af0502d9 100644
--- a/packages/pl-fe/src/features/crypto-donate/components/detailed-crypto-address.tsx
+++ b/packages/pl-fe/src/features/crypto-donate/components/detailed-crypto-address.tsx
@@ -31,7 +31,7 @@ const DetailedCryptoAddress: React.FC<IDetailedCryptoAddress> = ({ address, tick
         <div className='font-bold'>{title || ticker.toUpperCase()}</div>
         <div className='ml-auto flex'>
           {explorerUrl && <a className='ml-2 text-gray-400' href={explorerUrl} target='_blank'>
-            <Icon className='h-4.5 w-4.5' src={require('@tabler/icons/outline/external-link.svg')} />
+            <Icon className='size-4.5' src={require('@tabler/icons/outline/external-link.svg')} />
           </a>}
         </div>
       </div>
diff --git a/packages/pl-fe/src/features/developers/service-worker-info.tsx b/packages/pl-fe/src/features/developers/service-worker-info.tsx
index 4ca8b6dfc..4eb5f0cc9 100644
--- a/packages/pl-fe/src/features/developers/service-worker-info.tsx
+++ b/packages/pl-fe/src/features/developers/service-worker-info.tsx
@@ -119,7 +119,7 @@ const ServiceWorkerInfo: React.FC<IServiceWorkerInfo> = () => {
               <a href={url} target='_blank' className='flex items-center space-x-1 truncate'>
                 <span className='truncate'>{url}</span>
                 <Icon
-                  className='h-4 w-4'
+                  className='size-4'
                   src={require('@tabler/icons/outline/external-link.svg')}
                 />
               </a>
diff --git a/packages/pl-fe/src/features/edit-profile/components/avatar-picker.tsx b/packages/pl-fe/src/features/edit-profile/components/avatar-picker.tsx
index dd0e3841a..3c88fbc12 100644
--- a/packages/pl-fe/src/features/edit-profile/components/avatar-picker.tsx
+++ b/packages/pl-fe/src/features/edit-profile/components/avatar-picker.tsx
@@ -53,7 +53,7 @@ const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({
     <label
       ref={picker}
       className={clsx(
-        'absolute bottom-0 left-1/2 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer bg-primary-300 ring-2',
+        'absolute bottom-0 left-1/2 size-20 -translate-x-1/2 translate-y-1/2 cursor-pointer bg-primary-300 ring-2',
         {
           'rounded-lg': onChangeDescription,
           'rounded-full': !onChangeDescription,
@@ -69,7 +69,7 @@ const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({
       <HStack
         alignItems='center'
         justifyContent='center'
-        className={clsx('absolute left-0 top-0 h-full w-full transition-opacity', {
+        className={clsx('absolute left-0 top-0 size-full transition-opacity', {
           'rounded-lg': onChangeDescription,
           'rounded-full': !onChangeDescription,
           'opacity-0 hover:opacity-90 bg-primary-500': src,
@@ -77,7 +77,7 @@ const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({
       >
         <Icon
           src={require('@tabler/icons/outline/camera-plus.svg')}
-          className='h-5 w-5 text-white'
+          className='size-5 text-white'
         />
       </HStack>
       <span className='sr-only'><FormattedMessage id='group.upload_avatar' defaultMessage='Upload avatar' /></span>
diff --git a/packages/pl-fe/src/features/edit-profile/components/header-picker.tsx b/packages/pl-fe/src/features/edit-profile/components/header-picker.tsx
index c777a6d97..5558048ef 100644
--- a/packages/pl-fe/src/features/edit-profile/components/header-picker.tsx
+++ b/packages/pl-fe/src/features/edit-profile/components/header-picker.tsx
@@ -69,9 +69,9 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({
       title={intl.formatMessage(messages.title)}
       tabIndex={0}
     >
-      {src && <img className='h-full w-full object-cover' src={src} alt='' />}
+      {src && <img className='size-full object-cover' src={src} alt='' />}
       <HStack
-        className={clsx('absolute top-0 h-full w-full transition-opacity', {
+        className={clsx('absolute top-0 size-full transition-opacity', {
           'opacity-0 hover:opacity-90 bg-primary-100 dark:bg-gray-800': src,
         })}
         space={1.5}
@@ -80,7 +80,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({
       >
         <Icon
           src={require('@tabler/icons/outline/photo-plus.svg')}
-          className='h-4.5 w-4.5'
+          className='size-4.5'
         />
 
         <Text size='md' theme='primary' weight='semibold'>
diff --git a/packages/pl-fe/src/features/event/event-information.tsx b/packages/pl-fe/src/features/event/event-information.tsx
index c8dcd22d9..feed68550 100644
--- a/packages/pl-fe/src/features/event/event-information.tsx
+++ b/packages/pl-fe/src/features/event/event-information.tsx
@@ -26,7 +26,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
   const intl = useIntl();
 
   const status = useAppSelector(state => getStatus(state, { id: params.statusId })) as StatusEntity;
-  
+
   const { openModal } = useModalsStore();
   const { tileServer } = usePlFeConfig();
 
diff --git a/packages/pl-fe/src/features/events/components/event-carousel.tsx b/packages/pl-fe/src/features/events/components/event-carousel.tsx
index c1ff365b6..31d9f900f 100644
--- a/packages/pl-fe/src/features/events/components/event-carousel.tsx
+++ b/packages/pl-fe/src/features/events/components/event-carousel.tsx
@@ -57,9 +57,9 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
         <div className='absolute left-3 top-1/2 z-10 -mt-4'>
           <button
             onClick={() => handleChangeIndex(index - 1)}
-            className='flex h-8 w-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
+            className='flex size-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
           >
-            <Icon src={require('@tabler/icons/outline/chevron-left.svg')} className='h-6 w-6 text-black dark:text-white' />
+            <Icon src={require('@tabler/icons/outline/chevron-left.svg')} className='size-6 text-black dark:text-white' />
           </button>
         </div>
       )}
@@ -70,9 +70,9 @@ const EventCarousel: React.FC<IEventCarousel> = ({ statusIds, isLoading, emptyMe
         <div className='absolute right-3 top-1/2 z-10 -mt-4'>
           <button
             onClick={() => handleChangeIndex(index + 1)}
-            className='flex h-8 w-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
+            className='flex size-8 items-center justify-center rounded-full bg-white/50 backdrop-blur dark:bg-gray-900/50'
           >
-            <Icon src={require('@tabler/icons/outline/chevron-right.svg')} className='h-6 w-6 text-black dark:text-white' />
+            <Icon src={require('@tabler/icons/outline/chevron-right.svg')} className='size-6 text-black dark:text-white' />
           </button>
         </div>
       )}
diff --git a/packages/pl-fe/src/features/federation-restrictions/components/instance-restrictions.tsx b/packages/pl-fe/src/features/federation-restrictions/components/instance-restrictions.tsx
index da3b9bc0d..3944faaae 100644
--- a/packages/pl-fe/src/features/federation-restrictions/components/instance-restrictions.tsx
+++ b/packages/pl-fe/src/features/federation-restrictions/components/instance-restrictions.tsx
@@ -19,7 +19,7 @@ interface IRestriction {
 
 const Restriction: React.FC<IRestriction> = ({ icon, children }) => (
   <HStack space={3}>
-    <Icon className='h-5 w-5 flex-none' src={icon} />
+    <Icon className='size-5 flex-none' src={icon} />
 
     <Text theme='muted'>
       {children}
diff --git a/packages/pl-fe/src/features/feed-suggestions/feed-suggestions.tsx b/packages/pl-fe/src/features/feed-suggestions/feed-suggestions.tsx
index 3f3be0eb0..5dd86f2c4 100644
--- a/packages/pl-fe/src/features/feed-suggestions/feed-suggestions.tsx
+++ b/packages/pl-fe/src/features/feed-suggestions/feed-suggestions.tsx
@@ -32,7 +32,7 @@ const SuggestionItem: React.FC<ISuggestionItem> = ({ accountId }) => {
         <Stack space={3} className='mx-auto w-40 md:w-24'>
           <img
             src={account.avatar}
-            className='mx-auto block h-16 w-16 min-w-[56px] rounded-full object-cover'
+            className='mx-auto block size-16 min-w-[56px] rounded-full object-cover'
             alt={account.acct}
           />
 
diff --git a/packages/pl-fe/src/features/forms/index.tsx b/packages/pl-fe/src/features/forms/index.tsx
index 3cf033731..ddf42857d 100644
--- a/packages/pl-fe/src/features/forms/index.tsx
+++ b/packages/pl-fe/src/features/forms/index.tsx
@@ -178,7 +178,7 @@ const Mutliselect: React.FC<IMultiselect> = (props) => {
       onRemove={handleChange}
       displayValue='value'
       disable={disabled}
-      customCloseIcon={<Icon className='ml-1 h-4 w-4 hover:cursor-pointer' src={require('@tabler/icons/outline/circle-x.svg')} />}
+      customCloseIcon={<Icon className='ml-1 size-4 hover:cursor-pointer' src={require('@tabler/icons/outline/circle-x.svg')} />}
       placeholder={intl.formatMessage(messages.selectPlaceholder)}
       emptyRecordMsg={intl.formatMessage(messages.selectNoOptions)}
     />
diff --git a/packages/pl-fe/src/features/group/components/group-header-image.tsx b/packages/pl-fe/src/features/group/components/group-header-image.tsx
index bacfffe7a..1e0677211 100644
--- a/packages/pl-fe/src/features/group/components/group-header-image.tsx
+++ b/packages/pl-fe/src/features/group/components/group-header-image.tsx
@@ -31,7 +31,7 @@ const GroupHeaderImage: React.FC<IGroupHeaderImage> = ({ className, group }) =>
       >
         <Icon
           src={require('@tabler/icons/outline/photo-off.svg')}
-          className='h-6 w-6 text-gray-500 dark:text-gray-700'
+          className='size-6 text-gray-500 dark:text-gray-700'
         />
       </div>
     );
diff --git a/packages/pl-fe/src/features/group/components/group-header.tsx b/packages/pl-fe/src/features/group/components/group-header.tsx
index 55da8b0f9..1ebf105fe 100644
--- a/packages/pl-fe/src/features/group/components/group-header.tsx
+++ b/packages/pl-fe/src/features/group/components/group-header.tsx
@@ -41,7 +41,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
           <HStack alignItems='bottom' space={5} className='-mt-12'>
             <div className='relative flex'>
               <div
-                className='h-24 w-24 rounded-full bg-gray-400 ring-4 ring-white dark:ring-gray-800'
+                className='size-24 rounded-full bg-gray-400 ring-4 ring-white dark:ring-gray-800'
               />
             </div>
           </HStack>
@@ -110,7 +110,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
         className='flex h-32 w-full items-center justify-center bg-gray-200 md:rounded-t-xl lg:h-52 dark:bg-gray-800/30'
       >
         {isHeaderMissing ? (
-          <Icon src={require('@tabler/icons/outline/photo-off.svg')} className='h-6 w-6 text-gray-500 dark:text-gray-700' />
+          <Icon src={require('@tabler/icons/outline/photo-off.svg')} className='size-6 text-gray-500 dark:text-gray-700' />
         ) : header}
       </div>
     );
diff --git a/packages/pl-fe/src/features/group/components/group-privacy.tsx b/packages/pl-fe/src/features/group/components/group-privacy.tsx
index 30894a710..a7178f0ae 100644
--- a/packages/pl-fe/src/features/group/components/group-privacy.tsx
+++ b/packages/pl-fe/src/features/group/components/group-privacy.tsx
@@ -20,7 +20,7 @@ const GroupPrivacy = ({ group }: IGroupPolicy) => (
                 ? require('@tabler/icons/outline/lock.svg')
                 : require('@tabler/icons/outline/world.svg')
             }
-            className='h-6 w-6 text-gray-600 dark:text-gray-600'
+            className='size-6 text-gray-600 dark:text-gray-600'
           />
         </div>
 
@@ -46,7 +46,7 @@ const GroupPrivacy = ({ group }: IGroupPolicy) => (
   >
     <HStack space={1} alignItems='center' data-testid='group-privacy'>
       <Icon
-        className='h-4 w-4'
+        className='size-4'
         src={
           group.locked
             ? require('@tabler/icons/outline/lock.svg')
diff --git a/packages/pl-fe/src/features/group/components/group-relationship.tsx b/packages/pl-fe/src/features/group/components/group-relationship.tsx
index 411cba4c0..2795a4238 100644
--- a/packages/pl-fe/src/features/group/components/group-relationship.tsx
+++ b/packages/pl-fe/src/features/group/components/group-relationship.tsx
@@ -24,7 +24,7 @@ const GroupRelationship = ({ group }: IGroupRelationship) => {
       className='text-primary-600 dark:text-accent-blue'
     >
       <Icon
-        className='h-4 w-4'
+        className='size-4'
         src={
           isOwner
             ? require('@tabler/icons/outline/users.svg')
diff --git a/packages/pl-fe/src/features/group/edit-group.tsx b/packages/pl-fe/src/features/group/edit-group.tsx
index 310ece7fa..3a97e2b78 100644
--- a/packages/pl-fe/src/features/group/edit-group.tsx
+++ b/packages/pl-fe/src/features/group/edit-group.tsx
@@ -93,7 +93,7 @@ const EditGroup: React.FC<IEditGroup> = ({ params: { groupId } }) => {
             placeholder={intl.formatMessage(messages.groupNamePlaceholder)}
             maxLength={maxName}
             {...displayName}
-            append={<Icon className='h-5 w-5 text-gray-600' src={require('@tabler/icons/outline/lock.svg')} />}
+            append={<Icon className='size-5 text-gray-600' src={require('@tabler/icons/outline/lock.svg')} />}
             disabled
           />
         </FormGroup>
diff --git a/packages/pl-fe/src/features/group/group-timeline.tsx b/packages/pl-fe/src/features/group/group-timeline.tsx
index 0c91f17d7..be086c809 100644
--- a/packages/pl-fe/src/features/group/group-timeline.tsx
+++ b/packages/pl-fe/src/features/group/group-timeline.tsx
@@ -93,7 +93,7 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
             <div className='rounded-full bg-gray-200 p-4 dark:bg-gray-800'>
               <Icon
                 src={require('@tabler/icons/outline/message-2.svg')}
-                className='h-6 w-6 text-gray-600'
+                className='size-6 text-gray-600'
               />
             </div>
 
diff --git a/packages/pl-fe/src/features/groups/components/discover/group-list-item.tsx b/packages/pl-fe/src/features/groups/components/discover/group-list-item.tsx
index 827bc0b2e..7d981dae8 100644
--- a/packages/pl-fe/src/features/groups/components/discover/group-list-item.tsx
+++ b/packages/pl-fe/src/features/groups/components/discover/group-list-item.tsx
@@ -39,7 +39,7 @@ const GroupListItem = (props: IGroupListItem) => {
 
             <HStack className='text-gray-700 dark:text-gray-600' space={1} alignItems='center'>
               <Icon
-                className='h-4.5 w-4.5'
+                className='size-4.5'
                 src={group.locked ? require('@tabler/icons/outline/lock.svg') : require('@tabler/icons/outline/world.svg')}
               />
 
diff --git a/packages/pl-fe/src/features/notifications/components/filter-bar.tsx b/packages/pl-fe/src/features/notifications/components/filter-bar.tsx
index 3eec8c5bd..6e76d5747 100644
--- a/packages/pl-fe/src/features/notifications/components/filter-bar.tsx
+++ b/packages/pl-fe/src/features/notifications/components/filter-bar.tsx
@@ -51,43 +51,43 @@ const NotificationFilterBar = () => {
     });
   } else {
     items.push({
-      text: <Icon className='h-4 w-4' src={require('@tabler/icons/outline/at.svg')} />,
+      text: <Icon className='size-4' src={require('@tabler/icons/outline/at.svg')} />,
       title: intl.formatMessage(messages.mentions),
       action: onClick('mention'),
       name: 'mention',
     });
     if (features.accountNotifies) items.push({
-      text: <Icon className='h-4 w-4' src={require('@tabler/icons/outline/bell-ringing.svg')} />,
+      text: <Icon className='size-4' src={require('@tabler/icons/outline/bell-ringing.svg')} />,
       title: intl.formatMessage(messages.statuses),
       action: onClick('status'),
       name: 'status',
     });
     items.push({
-      text: <Icon className='h-4 w-4' src={require('@tabler/icons/outline/heart.svg')} />,
+      text: <Icon className='size-4' src={require('@tabler/icons/outline/heart.svg')} />,
       title: intl.formatMessage(messages.favourites),
       action: onClick('favourite'),
       name: 'favourite',
     });
     items.push({
-      text: <Icon className='h-4 w-4' src={require('@tabler/icons/outline/repeat.svg')} />,
+      text: <Icon className='size-4' src={require('@tabler/icons/outline/repeat.svg')} />,
       title: intl.formatMessage(messages.boosts),
       action: onClick('reblog'),
       name: 'reblog',
     });
     if (features.polls) items.push({
-      text: <Icon className='h-4 w-4' src={require('@tabler/icons/outline/chart-bar.svg')} />,
+      text: <Icon className='size-4' src={require('@tabler/icons/outline/chart-bar.svg')} />,
       title: intl.formatMessage(messages.polls),
       action: onClick('poll'),
       name: 'poll',
     });
     if (features.events) items.push({
-      text: <Icon className='h-4 w-4' src={require('@tabler/icons/outline/calendar.svg')} />,
+      text: <Icon className='size-4' src={require('@tabler/icons/outline/calendar.svg')} />,
       title: intl.formatMessage(messages.events),
       action: onClick('events'),
       name: 'events',
     });
     items.push({
-      text: <Icon className='h-4 w-4' src={require('@tabler/icons/outline/user-plus.svg')} />,
+      text: <Icon className='size-4' src={require('@tabler/icons/outline/user-plus.svg')} />,
       title: intl.formatMessage(messages.follows),
       action: onClick('follow'),
       name: 'follow',
diff --git a/packages/pl-fe/src/features/notifications/components/notification.tsx b/packages/pl-fe/src/features/notifications/components/notification.tsx
index 32ec84958..ddc2cac3e 100644
--- a/packages/pl-fe/src/features/notifications/components/notification.tsx
+++ b/packages/pl-fe/src/features/notifications/components/notification.tsx
@@ -298,7 +298,7 @@ const Notification: React.FC<INotification> = (props) => {
         <Emoji
           emoji={notification.emoji}
           src={notification.emoji_url || undefined}
-          className='h-4 w-4 flex-none'
+          className='size-4 flex-none'
         />
       );
     } else if (icons[displayedType]) {
diff --git a/packages/pl-fe/src/features/onboarding/steps/avatar-selection-step.tsx b/packages/pl-fe/src/features/onboarding/steps/avatar-selection-step.tsx
index 52986cbeb..d7ef5b9b1 100644
--- a/packages/pl-fe/src/features/onboarding/steps/avatar-selection-step.tsx
+++ b/packages/pl-fe/src/features/onboarding/steps/avatar-selection-step.tsx
@@ -88,7 +88,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
             })}
             disabled={isSubmitting}
           >
-            <Icon src={require('@tabler/icons/outline/plus.svg')} className='h-5 w-5 text-white' />
+            <Icon src={require('@tabler/icons/outline/plus.svg')} className='size-5 text-white' />
           </button>
 
           <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
diff --git a/packages/pl-fe/src/features/onboarding/steps/completed-step.tsx b/packages/pl-fe/src/features/onboarding/steps/completed-step.tsx
index f5ba49bb5..09ea2d041 100644
--- a/packages/pl-fe/src/features/onboarding/steps/completed-step.tsx
+++ b/packages/pl-fe/src/features/onboarding/steps/completed-step.tsx
@@ -7,7 +7,7 @@ const CompletedStep = ({ onComplete }: { onComplete: () => void }) => (
   <Card variant='rounded' size='xl'>
     <CardBody>
       <Stack space={2}>
-        <Icon strokeWidth={1} src={require('@tabler/icons/outline/confetti.svg')} className='mx-auto h-16 w-16 text-primary-600 dark:text-primary-400' />
+        <Icon strokeWidth={1} src={require('@tabler/icons/outline/confetti.svg')} className='mx-auto size-16 text-primary-600 dark:text-primary-400' />
 
         <Text size='2xl' align='center' weight='bold'>
           <FormattedMessage id='onboarding.finished.title' defaultMessage='Onboarding complete' />
diff --git a/packages/pl-fe/src/features/onboarding/steps/cover-photo-selection-step.tsx b/packages/pl-fe/src/features/onboarding/steps/cover-photo-selection-step.tsx
index f31857822..ef4a3dc19 100644
--- a/packages/pl-fe/src/features/onboarding/steps/cover-photo-selection-step.tsx
+++ b/packages/pl-fe/src/features/onboarding/steps/cover-photo-selection-step.tsx
@@ -101,7 +101,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
               })}
               disabled={isSubmitting}
             >
-              <Icon src={require('@tabler/icons/outline/plus.svg')} className='h-5 w-5 text-white' />
+              <Icon src={require('@tabler/icons/outline/plus.svg')} className='size-5 text-white' />
             </button>
 
             <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
diff --git a/packages/pl-fe/src/features/onboarding/steps/fediverse-step.tsx b/packages/pl-fe/src/features/onboarding/steps/fediverse-step.tsx
index 6ee1925a2..44e246d5f 100644
--- a/packages/pl-fe/src/features/onboarding/steps/fediverse-step.tsx
+++ b/packages/pl-fe/src/features/onboarding/steps/fediverse-step.tsx
@@ -13,7 +13,7 @@ const FediverseStep = ({ onNext }: { onNext: () => void }) => {
     <Card variant='rounded' size='xl'>
       <CardBody>
         <Stack space={2}>
-          <Icon strokeWidth={1} src={require('@tabler/icons/outline/affiliate.svg')} className='mx-auto h-16 w-16 text-primary-600 dark:text-primary-400' />
+          <Icon strokeWidth={1} src={require('@tabler/icons/outline/affiliate.svg')} className='mx-auto size-16 text-primary-600 dark:text-primary-400' />
 
           <Text size='2xl' weight='bold'>
             <FormattedMessage
diff --git a/packages/pl-fe/src/features/pl-fe-config/components/color-with-picker.tsx b/packages/pl-fe/src/features/pl-fe-config/components/color-with-picker.tsx
index da5553ab3..1783f3a32 100644
--- a/packages/pl-fe/src/features/pl-fe-config/components/color-with-picker.tsx
+++ b/packages/pl-fe/src/features/pl-fe-config/components/color-with-picker.tsx
@@ -42,7 +42,7 @@ const ColorWithPicker: React.FC<IColorWithPicker> = ({ value, onChange, classNam
     <div className={className}>
       <div
         ref={node}
-        className='h-full w-full'
+        className='size-full'
         role='presentation'
         style={{ background: value }}
         title={value}
diff --git a/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-dropdown.tsx b/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-dropdown.tsx
index b28b081a3..c63e078ed 100644
--- a/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-dropdown.tsx
+++ b/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-dropdown.tsx
@@ -59,7 +59,7 @@ const IconPickerDropdown: React.FC<IIconPickerDropdown> = ({ value, onPickIcon }
     <div onKeyDown={handleKeyDown}>
       <div
         ref={target}
-        className='flex h-[38px] w-[38px] cursor-pointer items-center justify-center text-lg'
+        className='flex size-[38px] cursor-pointer items-center justify-center text-lg'
         title={title}
         aria-label={title}
         aria-expanded={active}
diff --git a/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-menu.tsx b/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-menu.tsx
index 1750a311b..f6c114548 100644
--- a/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-menu.tsx
+++ b/packages/pl-fe/src/features/pl-fe-config/components/icon-picker-menu.tsx
@@ -69,7 +69,7 @@ const IconPickerMenu: React.FC<IIconPickerMenu> = ({ icons, onClose, onPick, sty
           title={name}
           onClick={() => handleClick(name)}
         >
-          <i className={clsx(icon, 'h-[1.375rem] w-[1.375rem] text-lg leading-[1.15]')} />
+          <i className={clsx(icon, 'size-[1.375rem] text-lg leading-[1.15]')} />
         </button>
       </li>
     );
diff --git a/packages/pl-fe/src/features/placeholder/components/placeholder-group-card.tsx b/packages/pl-fe/src/features/placeholder/components/placeholder-group-card.tsx
index b51b4937d..23f4576bb 100644
--- a/packages/pl-fe/src/features/placeholder/components/placeholder-group-card.tsx
+++ b/packages/pl-fe/src/features/placeholder/components/placeholder-group-card.tsx
@@ -15,7 +15,7 @@ const PlaceholderGroupCard = () => {
 
         {/* Group Avatar */}
         <div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
-          <div className='h-16 w-16 rounded-full bg-gray-500 ring-2 ring-white dark:bg-primary-800 dark:ring-primary-900' />
+          <div className='size-16 rounded-full bg-gray-500 ring-2 ring-white dark:bg-primary-800 dark:ring-primary-900' />
         </div>
 
         {/* Group Info */}
diff --git a/packages/pl-fe/src/features/placeholder/components/placeholder-group-search.tsx b/packages/pl-fe/src/features/placeholder/components/placeholder-group-search.tsx
index 9dc0e0661..1bf90356d 100644
--- a/packages/pl-fe/src/features/placeholder/components/placeholder-group-search.tsx
+++ b/packages/pl-fe/src/features/placeholder/components/placeholder-group-search.tsx
@@ -15,7 +15,7 @@ const PlaceholderGroupSearch = ({ withJoinAction = true }: { withJoinAction?: bo
     >
       <HStack alignItems='center' space={2} className='overflow-hidden'>
         {/* Group Avatar */}
-        <div className='h-11 w-11 rounded-full bg-gray-500 dark:bg-gray-700 dark:ring-primary-900' />
+        <div className='size-11 rounded-full bg-gray-500 dark:bg-gray-700 dark:ring-primary-900' />
 
         <Stack className='text-gray-500 dark:text-gray-700'>
           <Text theme='inherit' weight='bold'>
diff --git a/packages/pl-fe/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx b/packages/pl-fe/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx
index c3bf5accc..24a33ece3 100644
--- a/packages/pl-fe/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx
+++ b/packages/pl-fe/src/features/placeholder/components/placeholder-sidebar-suggestions.tsx
@@ -14,7 +14,7 @@ const PlaceholderSidebarSuggestions = ({ limit }: { limit: number }) => {
         <HStack key={idx} alignItems='center' space={2} className='animate-pulse'>
           <Stack space={3} className='text-center'>
             <div
-              className='mx-auto block h-9 w-9 rounded-full bg-primary-200 dark:bg-primary-700'
+              className='mx-auto block size-9 rounded-full bg-primary-200 dark:bg-primary-700'
             />
           </Stack>
 
diff --git a/packages/pl-fe/src/features/search/components/search.tsx b/packages/pl-fe/src/features/search/components/search.tsx
index a7f45186c..c8d485c3b 100644
--- a/packages/pl-fe/src/features/search/components/search.tsx
+++ b/packages/pl-fe/src/features/search/components/search.tsx
@@ -162,12 +162,12 @@ const Search = (props: ISearch) => {
         >
           <SvgIcon
             src={require('@tabler/icons/outline/search.svg')}
-            className={clsx('h-4 w-4 text-gray-600', { hidden: hasValue })}
+            className={clsx('size-4 text-gray-600', { hidden: hasValue })}
           />
 
           <SvgIcon
             src={require('@tabler/icons/outline/x.svg')}
-            className={clsx('h-4 w-4 text-gray-600', { hidden: !hasValue })}
+            className={clsx('size-4 text-gray-600', { hidden: !hasValue })}
             aria-label={intl.formatMessage(messages.placeholder)}
           />
         </div>
diff --git a/packages/pl-fe/src/features/status/components/detailed-status.tsx b/packages/pl-fe/src/features/status/components/detailed-status.tsx
index 9c7bcfa04..a7d158081 100644
--- a/packages/pl-fe/src/features/status/components/detailed-status.tsx
+++ b/packages/pl-fe/src/features/status/components/detailed-status.tsx
@@ -47,7 +47,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
             icon={
               <Icon
                 src={require('@tabler/icons/outline/circles.svg')}
-                className='h-4 w-4 text-primary-600 dark:text-accent-blue'
+                className='size-4 text-primary-600 dark:text-accent-blue'
               />
             }
             text={
diff --git a/packages/pl-fe/src/features/status/components/status-type-icon.tsx b/packages/pl-fe/src/features/status/components/status-type-icon.tsx
index 4e9c8f667..b39eab085 100644
--- a/packages/pl-fe/src/features/status/components/status-type-icon.tsx
+++ b/packages/pl-fe/src/features/status/components/status-type-icon.tsx
@@ -38,7 +38,7 @@ const StatusTypeIcon: React.FC<IStatusTypeIcon> = ({ status }) => {
     <>
       <Text tag='span' theme='muted' size='sm'>&middot;</Text>
 
-      <Icon title={message ? intl.formatMessage(message) : undefined} className='h-4 w-4 text-gray-700 dark:text-gray-600' src={icon} />
+      <Icon title={message ? intl.formatMessage(message) : undefined} className='size-4 text-gray-700 dark:text-gray-600' src={icon} />
     </>
   );
 };
diff --git a/packages/pl-fe/src/features/theme-editor/components/color.tsx b/packages/pl-fe/src/features/theme-editor/components/color.tsx
index 8b2d11114..1e7dc61dc 100644
--- a/packages/pl-fe/src/features/theme-editor/components/color.tsx
+++ b/packages/pl-fe/src/features/theme-editor/components/color.tsx
@@ -18,7 +18,7 @@ const Color: React.FC<IColor> = ({ color, onChange }) => {
 
   return (
     <ColorWithPicker
-      className='h-full w-full'
+      className='size-full'
       value={color}
       onChange={handleChange}
     />
diff --git a/packages/pl-fe/src/features/ui/components/floating-action-button.tsx b/packages/pl-fe/src/features/ui/components/floating-action-button.tsx
index 9cd1e52a7..85240ec17 100644
--- a/packages/pl-fe/src/features/ui/components/floating-action-button.tsx
+++ b/packages/pl-fe/src/features/ui/components/floating-action-button.tsx
@@ -43,7 +43,7 @@ const HomeFAB: React.FC = () => {
     >
       <Icon
         src={require('@tabler/icons/outline/pencil-plus.svg')}
-        className='h-6 w-6'
+        className='size-6'
       />
     </button>
   );
@@ -75,7 +75,7 @@ const GroupFAB: React.FC = () => {
         <Avatar className='-my-3 -ml-2 border-white' size={42} src={group.avatar} alt={group.avatar_description} />
         <Icon
           src={require('@tabler/icons/outline/pencil-plus.svg')}
-          className='h-6 w-6'
+          className='size-6'
         />
       </HStack>
     </button>
diff --git a/packages/pl-fe/src/features/ui/components/image-loader.tsx b/packages/pl-fe/src/features/ui/components/image-loader.tsx
index ccc83527b..668071d54 100644
--- a/packages/pl-fe/src/features/ui/components/image-loader.tsx
+++ b/packages/pl-fe/src/features/ui/components/image-loader.tsx
@@ -136,7 +136,7 @@ class ImageLoader extends React.PureComponent<IImageLoader> {
     const { loading } = this.state;
 
     return (
-      <div className='relative flex h-full w-full flex-col items-center justify-center'>
+      <div className='relative flex size-full flex-col items-center justify-center'>
         {loading ? (
           <canvas
             className={clsx({ 'hidden': !this.hasSize() })}
diff --git a/packages/pl-fe/src/features/ui/components/modals/compare-history-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/compare-history-modal.tsx
index 202af419b..414a03fde 100644
--- a/packages/pl-fe/src/features/ui/components/modals/compare-history-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/compare-history-modal.tsx
@@ -56,7 +56,7 @@ const CompareHistoryModal: React.FC<BaseModalProps & CompareHistoryModalProps> =
                     {poll.options.map((option: any) => (
                       <HStack alignItems='center' className='p-1 text-gray-900 dark:text-gray-300'>
                         <span
-                          className='mr-2.5 inline-block h-4 w-4 flex-none rounded-full border border-solid border-primary-600'
+                          className='mr-2.5 inline-block size-4 flex-none rounded-full border border-solid border-primary-600'
                           tabIndex={0}
                           role='radio'
                         />
diff --git a/packages/pl-fe/src/features/ui/components/modals/compose-event-modal/index.tsx b/packages/pl-fe/src/features/ui/components/modals/compose-event-modal/index.tsx
index 305e21726..2e8f46cf0 100644
--- a/packages/pl-fe/src/features/ui/components/modals/compose-event-modal/index.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/compose-event-modal/index.tsx
@@ -252,7 +252,7 @@ const ComposeEventModal: React.FC<BaseModalProps & ComposeEventModalProps> = ({
         <div className='dark:sm:shadow-inset relative flex h-24 items-center justify-center overflow-hidden rounded-lg bg-primary-100 text-primary-500 sm:h-32 sm:shadow dark:bg-gray-800 dark:text-white'>
           {banner ? (
             <>
-              <img className='h-full w-full object-cover' src={banner.url} alt='' />
+              <img className='size-full object-cover' src={banner.url} alt='' />
               <IconButton className='absolute right-2 top-2' src={require('@tabler/icons/outline/x.svg')} onClick={handleClearBanner} />
             </>
           ) : (
diff --git a/packages/pl-fe/src/features/ui/components/modals/compose-event-modal/upload-button.tsx b/packages/pl-fe/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
index 45f660e19..7931b8d32 100644
--- a/packages/pl-fe/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/compose-event-modal/upload-button.tsx
@@ -31,10 +31,10 @@ const UploadButton: React.FC<IUploadButton> = ({ disabled, onSelectFile }) => {
 
 
   return (
-    <HStack className='h-full w-full cursor-pointer text-primary-500 dark:text-accent-blue' space={3} alignItems='center' justifyContent='center' element='label'>
+    <HStack className='size-full cursor-pointer text-primary-500 dark:text-accent-blue' space={3} alignItems='center' justifyContent='center' element='label'>
       <Icon
         src={require('@tabler/icons/outline/photo-plus.svg')}
-        className='h-7 w-7'
+        className='size-7'
         onClick={handleClick}
       />
 
diff --git a/packages/pl-fe/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
index ece5aab38..0905bbce4 100644
--- a/packages/pl-fe/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/edit-bookmark-folder-modal.tsx
@@ -47,7 +47,7 @@ const EmojiPicker: React.FC<IEmojiPicker> = ({ emoji, emojiUrl, ...props }) => {
   return (
     <div className='relative'>
       <button
-        className='mt-1 flex h-[38px] w-[38px] items-center justify-center rounded-md border border-solid border-gray-400 bg-white text-gray-900 ring-1 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500'
+        className='mt-1 flex size-[38px] items-center justify-center rounded-md border border-solid border-gray-400 bg-white text-gray-900 ring-1 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500'
         ref={refs.setReference}
         title={title}
         aria-label={title}
@@ -57,8 +57,8 @@ const EmojiPicker: React.FC<IEmojiPicker> = ({ emoji, emojiUrl, ...props }) => {
         tabIndex={0}
       >
         {emoji
-          ? <Emoji className='h-5 w-5' emoji={emoji} src={emojiUrl} />
-          : <Icon className='h-5 w-5 text-gray-600 hover:text-gray-700 dark:hover:text-gray-500' src={require('@tabler/icons/outline/mood-happy.svg')} />}
+          ? <Emoji className='size-5' emoji={emoji} src={emojiUrl} />
+          : <Icon className='size-5 text-gray-600 hover:text-gray-700 dark:hover:text-gray-500' src={require('@tabler/icons/outline/mood-happy.svg')} />}
       </button>
 
       {createPortal(
diff --git a/packages/pl-fe/src/features/ui/components/modals/list-editor-modal/components/search.tsx b/packages/pl-fe/src/features/ui/components/modals/list-editor-modal/components/search.tsx
index 501fc91a8..c41ead2c0 100644
--- a/packages/pl-fe/src/features/ui/components/modals/list-editor-modal/components/search.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/list-editor-modal/components/search.tsx
@@ -45,7 +45,7 @@ const Search = () => {
             placeholder={intl.formatMessage(messages.search)}
           />
           <div role='button' tabIndex={0} className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto' onClick={handleClear}>
-            <Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('h-5 w-5 text-gray-600', { hidden: !hasValue })} />
+            <Icon src={require('@tabler/icons/outline/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('size-5 text-gray-600', { hidden: !hasValue })} />
           </div>
         </label>
 
diff --git a/packages/pl-fe/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx b/packages/pl-fe/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
index d5560900a..6109cbfb2 100644
--- a/packages/pl-fe/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx
@@ -44,7 +44,7 @@ const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
           <label
             className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 sm:h-36 sm:shadow dark:bg-gray-800 dark:text-accent-blue'
           >
-            {group.header && <img className='h-full w-full object-cover' src={group.header} alt={group.header_description} />}
+            {group.header && <img className='size-full object-cover' src={group.header} alt={group.header_description} />}
           </label>
 
           <label className='mx-auto -mt-10 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
@@ -119,7 +119,7 @@ interface IInfoListNumber {
 }
 
 const InfoListNumber: React.FC<IInfoListNumber> = ({ number }) => (
-  <div className='flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-gray-200 dark:border-gray-800'>
+  <div className='flex size-7 shrink-0 items-center justify-center rounded-full border border-gray-200 dark:border-gray-800'>
     <Text theme='primary' size='sm' weight='bold'>{number}</Text>
   </div>
 );
diff --git a/packages/pl-fe/src/features/ui/components/modals/media-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/media-modal.tsx
index c50a27e51..d99aba5ee 100644
--- a/packages/pl-fe/src/features/ui/components/modals/media-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/media-modal.tsx
@@ -280,11 +280,11 @@ const MediaModal: React.FC<MediaModalProps & BaseModalProps> = (props) => {
               <div className={clsx('absolute inset-y-0 left-5 z-10 flex items-center transition-opacity', navigationHiddenClassName)}>
                 <button
                   tabIndex={0}
-                  className='flex h-10 w-10 items-center justify-center rounded-full bg-gray-900 text-white'
+                  className='flex size-10 items-center justify-center rounded-full bg-gray-900 text-white'
                   onClick={handlePrevClick}
                   aria-label={intl.formatMessage(messages.previous)}
                 >
-                  <Icon src={require('@tabler/icons/outline/arrow-left.svg')} className='h-5 w-5' />
+                  <Icon src={require('@tabler/icons/outline/arrow-left.svg')} className='size-5' />
                 </button>
               </div>
             )}
@@ -302,11 +302,11 @@ const MediaModal: React.FC<MediaModalProps & BaseModalProps> = (props) => {
               <div className={clsx('absolute inset-y-0 right-5 z-10 flex items-center transition-opacity', navigationHiddenClassName)}>
                 <button
                   tabIndex={0}
-                  className='flex h-10 w-10 items-center justify-center rounded-full bg-gray-900 text-white'
+                  className='flex size-10 items-center justify-center rounded-full bg-gray-900 text-white'
                   onClick={handleNextClick}
                   aria-label={intl.formatMessage(messages.next)}
                 >
-                  <Icon src={require('@tabler/icons/outline/arrow-right.svg')} className='h-5 w-5' />
+                  <Icon src={require('@tabler/icons/outline/arrow-right.svg')} className='size-5' />
                 </button>
               </div>
             )}
diff --git a/packages/pl-fe/src/features/ui/components/modals/reactions-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/reactions-modal.tsx
index 1e7ee45b7..da5a30c42 100644
--- a/packages/pl-fe/src/features/ui/components/modals/reactions-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/reactions-modal.tsx
@@ -50,7 +50,7 @@ const ReactionsModal: React.FC<BaseModalProps & ReactionsModalProps> = ({ onClos
     reactions!.forEach(reaction => items.push(
       {
         text: <div className='flex items-center gap-1'>
-          <Emoji className='h-4 w-4' emoji={reaction.name} src={reaction.url || undefined} />
+          <Emoji className='size-4' emoji={reaction.name} src={reaction.url || undefined} />
           {reaction.count}
         </div>,
         action: () => setReaction(reaction.name),
diff --git a/packages/pl-fe/src/features/ui/components/modals/report-modal/steps/reason-step.tsx b/packages/pl-fe/src/features/ui/components/modals/report-modal/steps/reason-step.tsx
index ba3cd3092..2929afa3f 100644
--- a/packages/pl-fe/src/features/ui/components/modals/report-modal/steps/reason-step.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/report-modal/steps/reason-step.tsx
@@ -120,7 +120,7 @@ const ReasonStep: React.FC<IReasonStep> = ({ comment, setComment, ruleIds, setRu
                       value={rule.id}
                       checked={isSelected}
                       readOnly
-                      className='h-4 w-4 rounded border-2 border-gray-300 text-primary-600 checked:bg-primary-500 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:checked:bg-primary-500 dark:focus:ring-primary-500'
+                      className='size-4 rounded border-2 border-gray-300 text-primary-600 checked:bg-primary-500 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:checked:bg-primary-500 dark:focus:ring-primary-500'
                     />
                   </button>
                 );
diff --git a/packages/pl-fe/src/features/ui/components/modals/select-bookmark-folder-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
index 38f6b017e..a36042708 100644
--- a/packages/pl-fe/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
+++ b/packages/pl-fe/src/features/ui/components/modals/select-bookmark-folder-modal.tsx
@@ -62,7 +62,7 @@ const SelectBookmarkFolderModal: React.FC<SelectBookmarkFolderModalProps & BaseM
               <Emoji
                 emoji={folder.emoji}
                 src={folder.emoji_url || undefined}
-                className='h-5 w-5 flex-none'
+                className='size-5 flex-none'
               />
             ) : <Icon src={require('@tabler/icons/outline/folder.svg')} size={20} />}
             <span>{folder.name}</span>
diff --git a/packages/pl-fe/src/features/ui/components/panels/profile-info-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/profile-info-panel.tsx
index 5cf966cd9..a1b73251c 100644
--- a/packages/pl-fe/src/features/ui/components/panels/profile-info-panel.tsx
+++ b/packages/pl-fe/src/features/ui/components/panels/profile-info-panel.tsx
@@ -90,7 +90,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
       <HStack alignItems='center' space={0.5}>
         <Icon
           src={require('@tabler/icons/outline/balloon.svg')}
-          className='h-4 w-4 text-gray-800 dark:text-gray-200'
+          className='size-4 text-gray-800 dark:text-gray-200'
         />
 
         <Text size='sm'>
@@ -198,7 +198,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
               <Icon
                 src={require('@tabler/icons/outline/lock.svg')}
                 alt={intl.formatMessage(messages.account_locked)}
-                className='h-4 w-4 text-gray-600'
+                className='size-4 text-gray-600'
               />
             )}
           </HStack>
@@ -215,7 +215,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
             <HStack alignItems='center' space={0.5}>
               <Icon
                 src={require('@tabler/icons/outline/calendar.svg')}
-                className='h-4 w-4 text-gray-800 dark:text-gray-200'
+                className='size-4 text-gray-800 dark:text-gray-200'
               />
 
               <Text size='sm' title={intl.formatDate(account.created_at, dateFormatOptions)}>
@@ -232,7 +232,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
             <HStack alignItems='center' space={0.5}>
               <Icon
                 src={require('@tabler/icons/outline/map-pin.svg')}
-                className='h-4 w-4 text-gray-800 dark:text-gray-200'
+                className='size-4 text-gray-800 dark:text-gray-200'
               />
 
               <Text size='sm'>
diff --git a/packages/pl-fe/src/features/ui/components/panels/user-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/user-panel.tsx
index 033c8119e..63e3b3d90 100644
--- a/packages/pl-fe/src/features/ui/components/panels/user-panel.tsx
+++ b/packages/pl-fe/src/features/ui/components/panels/user-panel.tsx
@@ -50,7 +50,7 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
                 src={account.avatar}
                 alt={account.avatar_description}
                 size={80}
-                className='h-20 w-20 overflow-hidden bg-gray-50 ring-2 ring-white'
+                className='size-20 overflow-hidden bg-gray-50 ring-2 ring-white'
               />
             </Link>
 
diff --git a/packages/pl-fe/src/features/ui/components/theme-selector.tsx b/packages/pl-fe/src/features/ui/components/theme-selector.tsx
index a3560574c..d764c2382 100644
--- a/packages/pl-fe/src/features/ui/components/theme-selector.tsx
+++ b/packages/pl-fe/src/features/ui/components/theme-selector.tsx
@@ -42,7 +42,7 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
     <label>
       <div className='relative rounded-md shadow-sm'>
         <div className='pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3'>
-          <Icon src={themeIconSrc} className='h-4 w-4 text-gray-600 dark:text-gray-700' />
+          <Icon src={themeIconSrc} className='size-4 text-gray-600 dark:text-gray-700' />
         </div>
 
         <Select
@@ -57,7 +57,7 @@ const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
         </Select>
 
         <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3'>
-          <Icon src={require('@tabler/icons/outline/chevron-down.svg')} className='h-4 w-4 text-gray-600 dark:text-gray-700' />
+          <Icon src={require('@tabler/icons/outline/chevron-down.svg')} className='size-4 text-gray-600 dark:text-gray-700' />
         </div>
       </div>
     </label>
diff --git a/packages/pl-fe/src/features/ui/components/zoomable-image.tsx b/packages/pl-fe/src/features/ui/components/zoomable-image.tsx
index 31d68771d..af14eb2c6 100644
--- a/packages/pl-fe/src/features/ui/components/zoomable-image.tsx
+++ b/packages/pl-fe/src/features/ui/components/zoomable-image.tsx
@@ -124,12 +124,12 @@ class ZoomableImage extends React.PureComponent<IZoomableImage> {
 
     return (
       <div
-        className='relative flex h-full w-full items-center justify-center'
+        className='relative flex size-full items-center justify-center'
         ref={this.setContainerRef}
         style={{ overflow }}
       >
         <img
-          className='h-auto max-h-[80%] w-auto max-w-full object-contain shadow-2xl'
+          className='size-auto max-h-[80%] max-w-full object-contain shadow-2xl'
           role='presentation'
           ref={this.setImageRef}
           alt={alt}
diff --git a/packages/pl-fe/src/layouts/group-layout.tsx b/packages/pl-fe/src/layouts/group-layout.tsx
index d9ed5f7a1..4c20fcb43 100644
--- a/packages/pl-fe/src/layouts/group-layout.tsx
+++ b/packages/pl-fe/src/layouts/group-layout.tsx
@@ -30,7 +30,7 @@ const PrivacyBlankslate = () => (
     <div className='rounded-full bg-gray-200 p-3 dark:bg-gray-800'>
       <Icon
         src={require('@tabler/icons/outline/eye-off.svg')}
-        className='h-6 w-6 text-gray-600 dark:text-gray-600'
+        className='size-6 text-gray-600 dark:text-gray-600'
       />
     </div>