diff --git a/apps/addon-catalog/components/addon/addon-hero.tsx b/apps/addon-catalog/components/addon/addon-hero.tsx
index 74a0883a..0cdfd8c3 100644
--- a/apps/addon-catalog/components/addon/addon-hero.tsx
+++ b/apps/addon-catalog/components/addon/addon-hero.tsx
@@ -6,7 +6,7 @@ import {
   GithubIcon,
   VerifiedIcon,
 } from '@storybook/icons';
-import { humanFormat } from 'human-format';
+import humanFormat from 'human-format';
 import copy from 'copy-to-clipboard';
 import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -25,12 +25,12 @@ export function AddonHero({ addon }: { addon: Addon }) {
   };
 
   return (
-    <div className="mb-12 flex justify-between border-b border-zinc-300 pb-12 dark:border-b-slate-700">
+    <div className="flex justify-between pb-12 mb-12 border-b border-zinc-300 dark:border-b-slate-700">
       <div className="flex flex-col gap-8 md:flex-row">
         {addon.icon ? (
           <div
             style={{ backgroundImage: `url('${addon.icon}')` }}
-            className="h-20 w-20 bg-contain bg-center bg-no-repeat"
+            className="w-20 h-20 bg-center bg-no-repeat bg-contain"
           />
         ) : null}
         <div className="flex flex-col items-start">
@@ -45,7 +45,7 @@ export function AddonHero({ addon }: { addon: Addon }) {
           <p className="mb-4">{addon.description}</p>
           <div className="flex flex-col gap-6 md:flex-row md:items-center">
             <button
-              className="relative flex cursor-pointer items-center gap-4 rounded bg-zinc-100 px-4 py-2 dark:bg-slate-800 dark:text-slate-300"
+              className="relative flex items-center gap-4 px-4 py-2 rounded cursor-pointer bg-zinc-100 dark:bg-slate-800 dark:text-slate-300"
               onClick={onClick}
               type="button"
             >
@@ -54,7 +54,7 @@ export function AddonHero({ addon }: { addon: Addon }) {
                 {state ? (
                   <motion.div
                     animate={{ opacity: 1 }}
-                    className="absolute left-0 top-0 flex h-full w-full items-center justify-center gap-2 bg-zinc-100 text-black dark:bg-slate-800 dark:text-slate-300"
+                    className="absolute top-0 left-0 flex items-center justify-center w-full h-full gap-2 text-black bg-zinc-100 dark:bg-slate-800 dark:text-slate-300"
                     exit={{ opacity: 0 }}
                     initial={{ opacity: 0 }}
                     transition={{ duration: 0.2 }}
@@ -76,8 +76,8 @@ export function AddonHero({ addon }: { addon: Addon }) {
           </div>
         </div>
       </div>
-      <div className="hidden flex-col pr-8 lg:flex">
-        <div className="mb-4 flex flex-col">
+      <div className="flex-col hidden pr-8 lg:flex">
+        <div className="flex flex-col mb-4">
           <div className="text-3xl text-blue-400">
             {humanFormat(addon.weeklyDownloads ?? 0, {
               decimals: 0,
diff --git a/apps/addon-catalog/components/preview.tsx b/apps/addon-catalog/components/preview.tsx
index 3019ddb1..bdebec97 100644
--- a/apps/addon-catalog/components/preview.tsx
+++ b/apps/addon-catalog/components/preview.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @next/next/no-img-element -- We can't know where the images are from */
-import { humanFormat } from 'human-format';
+import humanFormat from 'human-format';
 import { cn } from '@repo/utils';
 import Image from 'next/image';
 import { StorybookIcon, VerifiedIcon } from '@storybook/icons';