diff --git a/src/components/Authenticator/authenticator.ts b/src/components/Authenticator/authenticator.ts
index f5ba16b11..03326a53b 100644
--- a/src/components/Authenticator/authenticator.ts
+++ b/src/components/Authenticator/authenticator.ts
@@ -4,7 +4,7 @@ import { REDIRECT_PAGE_AFTER_AUTH } from '../../lib/auth';
 
 function easeInElement(el: Element) {
   el.classList.add('opacity-0', 'transition-opacity', 'duration-300');
-  el.classList.remove('hidden');
+  el.classList.remove('hidden', 'hidden!');
   setTimeout(() => {
     el.classList.remove('opacity-0');
   });
diff --git a/src/components/BestPracticeHeader.astro b/src/components/BestPracticeHeader.astro
index df7a253d6..be172a228 100644
--- a/src/components/BestPracticeHeader.astro
+++ b/src/components/BestPracticeHeader.astro
@@ -49,7 +49,7 @@ const isBestPracticeReady = !isUpcoming;
             <button
               data-guest-required
               data-popup="login-popup"
-              class="inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm"
+              class="inline-flex hidden! items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm"
               aria-label="Download Roadmap"
             >
               <Icon icon="download" />
@@ -62,7 +62,7 @@ const isBestPracticeReady = !isUpcoming;
           isBestPracticeReady && (
             <a
               data-auth-required
-              class="inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm"
+              class="inline-flex hidden! items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm"
               aria-label="Download Roadmap"
               target="_blank"
               href={`/pdfs/best-practices/${bestPracticeId}.pdf`}