diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx
index 5d92b48619..251f4a27ba 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -70,7 +70,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
       <div className="overflow-hidden rounded-sm border dark:border-gray-900">
         <div className="p-8 text-center text-gray-400 dark:text-white">
           <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">{" " + t("unavailable")}</h2>
-          <p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled")}</p>
+          <p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled") as string}</p>
         </div>
       </div>
     </div>
@@ -79,7 +79,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
       {eventTypes.map((type, index) => (
         <li
           key={index}
-          className="hover:border-brand group relative rounded-sm border border-neutral-200 bg-white hover:bg-gray-50 dark:border-0 dark:bg-neutral-900 dark:hover:border-neutral-600">
+          className="hover:border-brand group relative rounded-sm border border-neutral-200 bg-white hover:bg-gray-50 dark:border-neutral-700 dark:bg-gray-800 dark:hover:border-neutral-600">
           <ArrowRightIcon className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
           <Link href={getUsernameSlugLink({ users: props.users, slug: type.slug })}>
             <a className="flex justify-between px-6 py-4" data-testid="event-type-link">
@@ -166,7 +166,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
                   <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
                     😴{" " + t("user_away")}
                   </h2>
-                  <p className="mx-auto max-w-md">{t("user_away_description")}</p>
+                  <p className="mx-auto max-w-md">{t("user_away_description") as string}</p>
                 </div>
               </div>
             ) : isDynamicGroup ? ( //When we deal with dynamic group (users > 1)
@@ -224,8 +224,10 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
           {eventTypes.length === 0 && (
             <div className="overflow-hidden rounded-sm border dark:border-gray-900">
               <div className="p-8 text-center text-gray-400 dark:text-white">
-                <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">{t("uh_oh")}</h2>
-                <p className="mx-auto max-w-md">{t("no_event_types_have_been_setup")}</p>
+                <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
+                  {t("uh_oh") as string}
+                </h2>
+                <p className="mx-auto max-w-md">{t("no_event_types_have_been_setup") as string}</p>
               </div>
             </div>
           )}