diff --git a/app/components/text-editor/editor-menubar.tsx b/app/components/text-editor/editor-menubar.tsx
index ba6ede5..4afe664 100644
--- a/app/components/text-editor/editor-menubar.tsx
+++ b/app/components/text-editor/editor-menubar.tsx
@@ -361,7 +361,7 @@ export const EditorMenuBar = (properties: TProperties) => {
                       setIsUploadOpen('content')
                     }}
                   >
-                    <CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />
+                    <CloudArrowUpIcon className="size-4 text-gray-500/50" />
                   </Button>
                 </div>
               </div>
diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
index 18e367f..b073860 100644
--- a/app/components/ui/button.tsx
+++ b/app/components/ui/button.tsx
@@ -25,7 +25,7 @@ const buttonVariants = cva(
       size: {
         default: 'h-[50px] w-[150px]',
         block: 'h-[50px] w-full',
-        icon: 'h-9 w-9 rounded-full',
+        icon: 'size-9 rounded-full',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
         fit: 'w-fit',
diff --git a/app/components/ui/input-file.tsx b/app/components/ui/input-file.tsx
index 0905a9d..9769591 100644
--- a/app/components/ui/input-file.tsx
+++ b/app/components/ui/input-file.tsx
@@ -80,7 +80,7 @@ export const InputFile = (properties: TInputProperties) => {
           setIsUploadOpen(category)
         }}
       >
-        <CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />
+        <CloudArrowUpIcon className="size-4 text-gray-500/50" />
       </Button>
     </Field>
   )
diff --git a/app/components/ui/input.tsx b/app/components/ui/input.tsx
index 6449a53..e3e62bd 100644
--- a/app/components/ui/input.tsx
+++ b/app/components/ui/input.tsx
@@ -83,7 +83,7 @@ export const Input = <TFormValues extends Record<string, unknown>>(
         >
           <EyeIcon
             className={twMerge(
-              'h-4 w-4',
+              'size-4',
               inputType === 'password' ? 'text-gray-500/50' : 'text-gray-500',
             )}
           />
diff --git a/app/components/ui/news-author.tsx b/app/components/ui/news-author.tsx
index d906f7e..20537ae 100644
--- a/app/components/ui/news-author.tsx
+++ b/app/components/ui/news-author.tsx
@@ -15,10 +15,10 @@ export const NewsAuthor = ({ author, live_at, text }: TDetailNewsAuthor) => {
         <img
           src={author?.profile_picture}
           alt={author?.name}
-          className="h-12 w-12 rounded-full bg-[#C4C4C4] object-cover"
+          className="size-12 rounded-full bg-[#C4C4C4] object-cover"
         />
       ) : (
-        <ProfileIcon className="h-12 w-12 rounded-full bg-[#C4C4C4]" />
+        <ProfileIcon className="size-12 rounded-full bg-[#C4C4C4]" />
       )}
 
       <div>
diff --git a/app/components/ui/social-share.tsx b/app/components/ui/social-share.tsx
index ce081a0..61fac96 100644
--- a/app/components/ui/social-share.tsx
+++ b/app/components/ui/social-share.tsx
@@ -39,7 +39,7 @@ export const SocialShareButtons = ({
         onClick={handleCopyLink}
         className="relative cursor-pointer"
       >
-        <LinkIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
+        <LinkIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
         {showPopup && (
           <div className="absolute top-12 w-48 rounded-lg border-2 border-gray-400 bg-white p-2 shadow-lg">
             Link berhasil disalin!
@@ -51,28 +51,28 @@ export const SocialShareButtons = ({
         url={url}
         title={title}
       >
-        <FacebookIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
+        <FacebookIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
       </FacebookShareButton>
 
       <LinkedinShareButton
         url={url}
         title={title}
       >
-        <LinkedinIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
+        <LinkedinIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
       </LinkedinShareButton>
 
       <TwitterShareButton
         url={url}
         title={title}
       >
-        <XIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
+        <XIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
       </TwitterShareButton>
 
       <button
         onClick={handleInstagramShare}
         className="cursor-pointer"
       >
-        <InstagramIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
+        <InstagramIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
       </button>
     </div>
   )
diff --git a/app/components/ui/table-search.tsx b/app/components/ui/table-search.tsx
index b28a0e3..9f97e94 100644
--- a/app/components/ui/table-search.tsx
+++ b/app/components/ui/table-search.tsx
@@ -42,7 +42,7 @@ export const TableSearchFilter: React.FC<SearchFilterProperties> = ({
               className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
             />
             <div className="absolute inset-y-0 right-0 flex items-center pr-3">
-              <MagnifyingGlassIcon className="h-5 w-5 text-[#363636]" />
+              <MagnifyingGlassIcon className="size-5 text-[#363636]" />
             </div>
           </div>
         </Field>
diff --git a/app/layouts/admin/navbar.tsx b/app/layouts/admin/navbar.tsx
index c5b09b7..a493057 100644
--- a/app/layouts/admin/navbar.tsx
+++ b/app/layouts/admin/navbar.tsx
@@ -38,10 +38,10 @@ export const Navbar = () => {
                 <img
                   src={staffData?.profile_picture}
                   alt={staffData?.name}
-                  className="h-8 w-8 rounded-full bg-[#C4C4C4] object-cover"
+                  className="size-8 rounded-full bg-[#C4C4C4] object-cover"
                 />
               ) : (
-                <ProfileIcon className="h-8 w-8 rounded-full bg-[#C4C4C4]" />
+                <ProfileIcon className="size-8 rounded-full bg-[#C4C4C4]" />
               )}
 
               <span className="text-sm">{staffData?.name}</span>
diff --git a/app/layouts/news/header-menu-mobile.tsx b/app/layouts/news/header-menu-mobile.tsx
index d72e441..5ace8b3 100644
--- a/app/layouts/news/header-menu-mobile.tsx
+++ b/app/layouts/news/header-menu-mobile.tsx
@@ -37,7 +37,7 @@ export const HeaderMenuMobile = (properties: THeaderMenuMobile) => {
             {/* Tombol Close */}
             <button
               onClick={handleToggleMenu}
-              className="fixed top-5 right-5 z-20 flex h-9 w-9 items-center justify-center lg:hidden"
+              className="fixed top-5 right-5 z-20 flex size-9 items-center justify-center lg:hidden"
             >
               <CloseIcon
                 width={50}
diff --git a/app/pages/dashboard-advertisements/index.tsx b/app/pages/dashboard-advertisements/index.tsx
index 8eb6359..8cb5973 100644
--- a/app/pages/dashboard-advertisements/index.tsx
+++ b/app/pages/dashboard-advertisements/index.tsx
@@ -74,7 +74,7 @@ export const AdvertisementsPage = () => {
           size="icon"
           title="Update Banner Iklan"
         >
-          <PencilSquareIcon className="h-4 w-4" />
+          <PencilSquareIcon className="size-4" />
         </Button>
         <Button
           type="button"
@@ -83,7 +83,7 @@ export const AdvertisementsPage = () => {
           onClick={() => setSelectedAds(data)}
           title="Hapus Banner Iklan"
         >
-          <TrashIcon className="h-4 w-4" />
+          <TrashIcon className="size-4" />
         </Button>
       </div>
     ),
@@ -101,7 +101,7 @@ export const AdvertisementsPage = () => {
           size="lg"
           className="text-md h-[42px] px-4"
         >
-          <PlusIcon className="h-8 w-8" /> Buat Banner Iklan
+          <PlusIcon className="size-8" /> Buat Banner Iklan
         </Button>
       </div>
 
diff --git a/app/pages/dashboard-categories/index.tsx b/app/pages/dashboard-categories/index.tsx
index 3572ad8..55f8c8e 100644
--- a/app/pages/dashboard-categories/index.tsx
+++ b/app/pages/dashboard-categories/index.tsx
@@ -70,7 +70,7 @@ export const CategoriesPage = () => {
           size="icon"
           title="Update Kategori"
         >
-          <PencilSquareIcon className="h-4 w-4" />
+          <PencilSquareIcon className="size-4" />
         </Button>
         {data.code === 'spotlight' ? (
           ''
@@ -82,7 +82,7 @@ export const CategoriesPage = () => {
             onClick={() => setSelectedCategory(data)}
             title="Hapus Kategori"
           >
-            <TrashIcon className="h-4 w-4" />
+            <TrashIcon className="size-4" />
           </Button>
         )}
       </div>
@@ -106,7 +106,7 @@ export const CategoriesPage = () => {
           size="lg"
           className="text-md h-[42px] px-4"
         >
-          <PlusIcon className="h-8 w-8" /> Buat Kategori
+          <PlusIcon className="size-8" /> Buat Kategori
         </Button>
       </div>
 
diff --git a/app/pages/dashboard-subscribe-plan/index.tsx b/app/pages/dashboard-subscribe-plan/index.tsx
index 4b22791..2f450ea 100644
--- a/app/pages/dashboard-subscribe-plan/index.tsx
+++ b/app/pages/dashboard-subscribe-plan/index.tsx
@@ -86,7 +86,7 @@ export const SubscribePlanPage = () => {
             size="icon"
             title="Update Subscribe Plan"
           >
-            <PencilSquareIcon className="h-4 w-4" />
+            <PencilSquareIcon className="size-4" />
           </Button>
           <Button
             type="button"
@@ -95,7 +95,7 @@ export const SubscribePlanPage = () => {
             onClick={() => setSelectedSubscribePlan(data)}
             title="Hapus Subscribe Plan"
           >
-            <TrashIcon className="h-4 w-4" />
+            <TrashIcon className="size-4" />
           </Button>
         </div>
       ),
@@ -111,7 +111,7 @@ export const SubscribePlanPage = () => {
           size="lg"
           className="text-md h-[42px] px-4"
         >
-          <PlusIcon className="h-8 w-8" /> Buat Subscribe Plan
+          <PlusIcon className="size-8" /> Buat Subscribe Plan
         </Button>
       </div>
 
diff --git a/app/pages/dashboard-subscriptions/index.tsx b/app/pages/dashboard-subscriptions/index.tsx
index 9cb54d5..2767fe5 100644
--- a/app/pages/dashboard-subscriptions/index.tsx
+++ b/app/pages/dashboard-subscriptions/index.tsx
@@ -43,7 +43,7 @@ export const SubscriptionsPage = () => {
                   className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
                 />
                 <div className="absolute inset-y-0 right-0 flex items-center pr-3">
-                  <SearchIcon className="h-5 w-5" />
+                  <SearchIcon className="size-5" />
                 </div>
               </div>
             </Field>
diff --git a/app/pages/dashboard-tags/index.tsx b/app/pages/dashboard-tags/index.tsx
index 5a9ecb2..be75f83 100644
--- a/app/pages/dashboard-tags/index.tsx
+++ b/app/pages/dashboard-tags/index.tsx
@@ -59,7 +59,7 @@ export const TagsPage = () => {
           size="icon"
           title="Update Tag"
         >
-          <PencilSquareIcon className="h-4 w-4" />
+          <PencilSquareIcon className="size-4" />
         </Button>
         <Button
           type="button"
@@ -68,7 +68,7 @@ export const TagsPage = () => {
           onClick={() => setSelectedTag(data)}
           title="Hapus Tag"
         >
-          <TrashIcon className="h-4 w-4" />
+          <TrashIcon className="size-4" />
         </Button>
       </div>
     ),
@@ -102,7 +102,7 @@ export const TagsPage = () => {
           size="lg"
           className="text-md h-[42px] px-4"
         >
-          <PlusIcon className="h-8 w-8" /> Buat Tag
+          <PlusIcon className="size-8" /> Buat Tag
         </Button>
       </div>