diff --git a/app/[locale]/about/about-narai-detail.tsx b/app/[locale]/about/about-narai-detail.tsx
index 32aea08bd..4efd5936a 100644
--- a/app/[locale]/about/about-narai-detail.tsx
+++ b/app/[locale]/about/about-narai-detail.tsx
@@ -21,7 +21,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
         <h1 className="text-6xl">{t('about.001.subtitle')}</h1>
       </div>
 
-      <div className="max-w-screen-2x relative mx-auto">
+      <div className="relative mx-auto max-w-screen-2xl">
         <Image
           src={AboutImage001}
           priority={true}
@@ -39,7 +39,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
         <p className="text-base leading-loose">{t('about.002.para002')}</p>
       </div>
 
-      <div className="max-w-screen-2x relative mx-auto">
+      <div className="relative mx-auto max-w-screen-2xl">
         <Image
           src={AboutImage002}
           priority={true}
diff --git a/app/[locale]/bar/sagyobar-detail.tsx b/app/[locale]/bar/sagyobar-detail.tsx
index d475e0dce..52f1a275c 100644
--- a/app/[locale]/bar/sagyobar-detail.tsx
+++ b/app/[locale]/bar/sagyobar-detail.tsx
@@ -15,7 +15,7 @@ export default function SagyobarDetail() {
 
   return (
     <div className="w-full px-6">
-      <div className="max-w-screen-2x relative mx-auto">
+      <div className="relative mx-auto max-w-screen-2xl">
         <Image
           src={BarImage001}
           priority={true}
@@ -40,7 +40,7 @@ export default function SagyobarDetail() {
         </div>
       </div>
 
-      <div className="max-w-screen-2x relative mx-auto flex flex-col space-y-24">
+      <div className="relative mx-auto flex max-w-screen-2xl flex-col space-y-24">
         <Image
           src={BarImage002}
           priority={true}
diff --git a/app/[locale]/concept/concept-detail.tsx b/app/[locale]/concept/concept-detail.tsx
index ec637649a..803b24458 100644
--- a/app/[locale]/concept/concept-detail.tsx
+++ b/app/[locale]/concept/concept-detail.tsx
@@ -11,7 +11,7 @@ export default function ConceptDetail() {
 
   return (
     <div className="w-full px-6">
-      <div className="max-w-screen-2x relative mx-auto">
+      <div className="relative mx-auto max-w-screen-2xl">
         <Image
           src={ConceptImage001}
           priority={true}
@@ -46,7 +46,7 @@ export default function ConceptDetail() {
         </div>
         <div className="flex flex-row items-start justify-end md:w-1/2">
           <div className="pb-24">
-            <Logo className="h-30 w-48" />
+            <Logo className="h-32 w-48" />
           </div>
         </div>
       </div>
diff --git a/app/[locale]/privacy/privacy-policy.tsx b/app/[locale]/privacy/privacy-policy.tsx
index efcb5828f..26d3caa2e 100644
--- a/app/[locale]/privacy/privacy-policy.tsx
+++ b/app/[locale]/privacy/privacy-policy.tsx
@@ -7,11 +7,11 @@ export default function PrivacyPolicy() {
   return (
     <>
       <div className="mx-auto max-w-3xl text-white">
-        <div className="md:text-4x text-center font-serif text-3xl font-bold leading-tight text-white md:mb-16">
+        <div className="text-center font-serif text-3xl font-bold leading-tight text-white md:mb-16 md:text-4xl">
           {t('privacy.title')}
         </div>
         <div className="mb-24 text-lg leading-normal">
-          <div className="text-sb-highlight text-center">{t('privacy.lastModifiedDate')}</div>
+          <div className="text-center">{t('privacy.lastModifiedDate')}</div>
           <div className="mt-4">
             <p>{t('privacy.pleaseRead')}</p>
             <p className="mt-4">{t('privacy.usedFor')}</p>
diff --git a/app/[locale]/terms/terms-of-use.tsx b/app/[locale]/terms/terms-of-use.tsx
index 05c2b5a36..cce017536 100644
--- a/app/[locale]/terms/terms-of-use.tsx
+++ b/app/[locale]/terms/terms-of-use.tsx
@@ -127,7 +127,6 @@ export default function TermsOfUse() {
               {t('terms.contactUs.instructions')}
               <a
                 href={`mailto:${t('email-address.support')}`}
-                className="branded-link"
                 aria-label={t('privacy.contactUs.ariaLabel')}
               >
                 {t('email-address.support')}
diff --git a/components/cart/delete-item-button.tsx b/components/cart/delete-item-button.tsx
index 605adcf51..43a970505 100644
--- a/components/cart/delete-item-button.tsx
+++ b/components/cart/delete-item-button.tsx
@@ -37,7 +37,7 @@ export default function DeleteItemButton({ item }: { item: CartItem }) {
       {isPending ? (
         <LoadingDots className="bg-white" />
       ) : (
-        <XMarkIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" />
+        <XMarkIcon className="mx-[1px] h-4 w-4 text-white transition-opacity duration-150 hover:opacity-60 dark:text-black" />
       )}
     </button>
   );
diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
index 43e12bd3e..e60d01b3f 100644
--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@@ -67,7 +67,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
             leaveFrom="translate-x-0"
             leaveTo="translate-x-full"
           >
-            <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-white/20 bg-dark p-6 font-sans text-white backdrop-blur-xl md:w-[390px]">
+            <Dialog.Panel className="fixed inset-y-0 right-0 flex h-full w-full flex-col border-l border-white/20 bg-dark p-6 font-sans text-white backdrop-blur-xl md:w-[390px]">
               <div className="flex items-center justify-between">
                 <p className="text-lg font-semibold">Cart</p>
 
@@ -83,7 +83,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                 </div>
               ) : (
                 <div className="flex h-full flex-col justify-between overflow-hidden p-1">
-                  <ul className="flex-grow overflow-auto py-4">
+                  <ul className="grow overflow-auto py-4">
                     {cart.lines.map((item, i) => {
                       const merchandiseSearchParams = {} as MerchandiseSearchParams;
 
@@ -159,11 +159,11 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                         currencyCode={cart.cost.totalTaxAmount.currencyCode}
                       />
                     </div>
-                    <div className="mb-3 flex items-center justify-between border-b border-white/20 pb-1 pt-1">
+                    <div className="mb-3 flex items-center justify-between border-b border-white/20 py-1">
                       <p>Shipping</p>
                       <p className="text-right text-white/50">Calculated at checkout</p>
                     </div>
-                    <div className="mb-3 flex items-center justify-between border-b border-white/20 pb-1 pt-1">
+                    <div className="mb-3 flex items-center justify-between border-b border-white/20 py-1">
                       <p>Total</p>
                       <Price
                         className="text-right text-base text-white"
diff --git a/components/cart/open-cart.tsx b/components/cart/open-cart.tsx
index 0faa62b2e..a2f97f48a 100644
--- a/components/cart/open-cart.tsx
+++ b/components/cart/open-cart.tsx
@@ -19,7 +19,7 @@ export default function OpenCart({
       />
 
       {quantity ? (
-        <div className="absolute right-[23%] top-[85%] -mr-2 -mt-2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 transform font-sans text-[12px] font-medium text-white">
+        <div className="absolute right-[23%] top-[85%] -mr-2 -mt-2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 font-sans text-[12px] font-medium text-white">
           {quantity}
         </div>
       ) : null}
diff --git a/components/grid/tile.tsx b/components/grid/tile.tsx
index 4729255bc..eb47fc915 100644
--- a/components/grid/tile.tsx
+++ b/components/grid/tile.tsx
@@ -3,8 +3,8 @@ import Image from 'next/image';
 
 export function GridTileImage({
   isInteractive = true,
-  active,
-  label,
+  active: _active,
+  label: _label,
   ...props
 }: {
   isInteractive?: boolean;
diff --git a/components/label.tsx b/components/label.tsx
index 1f9e82bdf..fa43baff6 100644
--- a/components/label.tsx
+++ b/components/label.tsx
@@ -15,7 +15,7 @@ const Label = ({
   return (
     <div className={clsx('@container/label')}>
       <div className="flex flex-col space-y-2">
-        <h3 className="mr-4 line-clamp-2 flex-grow font-serif text-3xl tracking-wider md:text-4xl">
+        <h3 className="mr-4 line-clamp-2 grow font-serif text-3xl tracking-wider md:text-4xl">
           {title}
         </h3>
         <div className="font-multilingual flex flex-row items-center space-x-2 text-[17px]">
diff --git a/components/layout/menu/modal.tsx b/components/layout/menu/modal.tsx
index 7a67ce001..4ef3e2798 100644
--- a/components/layout/menu/modal.tsx
+++ b/components/layout/menu/modal.tsx
@@ -13,8 +13,8 @@ import { LanguageControl, SupportedLocale } from '../navbar/language-control';
 export function MenuModal({ scrolled }: { scrolled: boolean }) {
   const t = useTranslations('Index');
   const locale = useLocale();
-  let [isOpen, setIsOpen] = useState(false);
-  let closeButtonRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const closeButtonRef = useRef(null);
 
   const close = () => {
     setIsOpen(false);
diff --git a/components/layout/navbar/mobile-menu.tsx b/components/layout/navbar/mobile-menu.tsx
index 6d798370e..6782b064c 100644
--- a/components/layout/navbar/mobile-menu.tsx
+++ b/components/layout/navbar/mobile-menu.tsx
@@ -61,7 +61,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
             leaveFrom="translate-x-0"
             leaveTo="translate-x-[-100%]"
           >
-            <Dialog.Panel className="fixed bottom-0 left-0 right-0 top-0 flex h-full w-full flex-col bg-white pb-6 dark:bg-black">
+            <Dialog.Panel className="fixed inset-0 flex h-full w-full flex-col bg-white pb-6 dark:bg-black">
               <div className="p-4">
                 <button
                   className="mb-4 flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white"
diff --git a/components/layout/navbar/search.tsx b/components/layout/navbar/search.tsx
index c7a410b9d..6b56ac6fb 100644
--- a/components/layout/navbar/search.tsx
+++ b/components/layout/navbar/search.tsx
@@ -32,7 +32,7 @@ export default function Search() {
   }
 
   return (
-    <form onSubmit={onSubmit} className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
+    <form onSubmit={onSubmit} className="relative w-full max-w-[550px] lg:w-80 xl:w-full">
       <input
         type="text"
         name="search"
diff --git a/components/layout/newsletter-footer.tsx b/components/layout/newsletter-footer.tsx
index aadcf8bb8..99c7f01dc 100644
--- a/components/layout/newsletter-footer.tsx
+++ b/components/layout/newsletter-footer.tsx
@@ -36,7 +36,7 @@ export default function NewsletterSignup() {
           )}
           placeholder={t('newsletter.placeholder')}
         />
-        <div className="mt-3 rounded-md sm:ml-3 sm:mt-0 sm:flex-shrink-0">
+        <div className="mt-3 rounded-md sm:ml-3 sm:mt-0 sm:shrink-0">
           <button
             type="submit"
             className={clsx(
diff --git a/components/layout/newsletter-signup.tsx b/components/layout/newsletter-signup.tsx
index 04dc1897c..57a049ffe 100644
--- a/components/layout/newsletter-signup.tsx
+++ b/components/layout/newsletter-signup.tsx
@@ -34,7 +34,7 @@ export default function NewsletterSignup() {
           )}
           placeholder={t('newsletter.placeholder')}
         />
-        <div className="mt-3 rounded-md sm:ml-3 sm:mt-0 sm:flex-shrink-0">
+        <div className="mt-3 rounded-md sm:ml-3 sm:mt-0 sm:shrink-0">
           <button
             type="submit"
             className={clsx(
diff --git a/components/product/age-gate-form.tsx b/components/product/age-gate-form.tsx
index 153f2f1d8..321f6bc4e 100644
--- a/components/product/age-gate-form.tsx
+++ b/components/product/age-gate-form.tsx
@@ -100,7 +100,7 @@ const AgeGateForm: FC<AgeGateFormProps> = ({ checkoutUrl, didCancel }) => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <div className="inline-block transform space-y-6 overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom text-dark shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
+              <div className="inline-block space-y-6 overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom text-dark shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
                 <div>
                   <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
                     <CheckIcon
@@ -116,9 +116,7 @@ const AgeGateForm: FC<AgeGateFormProps> = ({ checkoutUrl, didCancel }) => {
                       {t('age-gate.title')}
                     </Dialog.Title>
                     <div className="mt-2">
-                      <p className="dark:text-secondary-neutral text-sm text-white">
-                        {t('age-gate.description')}
-                      </p>
+                      <p className="text-sm text-white">{t('age-gate.description')}</p>
                     </div>
                   </div>
                 </div>