diff --git a/apps/web/components/eventtype/EventTypeDescription.tsx b/apps/web/components/eventtype/EventTypeDescription.tsx
index 009a34b7c4..8f0e7aab66 100644
--- a/apps/web/components/eventtype/EventTypeDescription.tsx
+++ b/apps/web/components/eventtype/EventTypeDescription.tsx
@@ -38,39 +38,42 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
 
   return (
     <>
-      <div className={classNames("text-neutral-500 dark:text-white", className)}>
+      <div
+        className={classNames("flex flex-wrap text-neutral-500 dark:text-white sm:flex-nowrap", className)}>
         {eventType.description && (
           <h2 className="max-w-[280px] overflow-hidden text-ellipsis opacity-60 sm:max-w-[500px]">
             {eventType.description.substring(0, 100)}
             {eventType.description.length > 100 && "..."}
           </h2>
         )}
-        <ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
-          <li className="flex whitespace-nowrap">
-            <ClockIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+        <ul className="mt-2 flex flex-wrap sm:flex-nowrap">
+          <li className="mr-4 flex items-center whitespace-nowrap">
+            <ClockIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
             {eventType.length}m
           </li>
           {eventType.schedulingType ? (
-            <li className="flex whitespace-nowrap">
-              <UsersIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+            <li className="mr-4 flex items-center whitespace-nowrap">
+              <UsersIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
               {eventType.schedulingType === SchedulingType.ROUND_ROBIN && t("round_robin")}
               {eventType.schedulingType === SchedulingType.COLLECTIVE && t("collective")}
             </li>
           ) : (
-            <li className="flex whitespace-nowrap">
-              <UserIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+            <li className="mr-4 flex items-center whitespace-nowrap">
+              <UserIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
               {t("1_on_1")}
             </li>
           )}
+        </ul>
+        <ul className="mt-2 flex">
           {recurringEvent?.count && recurringEvent.count > 0 && (
-            <li className="flex whitespace-nowrap">
-              <RefreshIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+            <li className="mr-4 flex items-center whitespace-nowrap">
+              <RefreshIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
               {t("repeats_up_to", { count: recurringEvent.count })}
             </li>
           )}
           {eventType.price > 0 && (
-            <li className="flex whitespace-nowrap">
-              <CreditCardIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+            <li className="mr-4 flex items-center whitespace-nowrap">
+              <CreditCardIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
               <IntlProvider locale="en">
                 <FormattedNumber
                   value={eventType.price / 100.0}