diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx
index 7a2885410b..e5a8303fc6 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -58,7 +58,16 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
             <p className="text-neutral-500 dark:text-white">{user.bio}</p>
           </div>
           <div className="space-y-6" data-testid="event-types">
-            {!user.away &&
+            {user.away ? (
+              <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 font-semibold text-gray-600 dark:text-white">
+                    😴{" " + t("user_away")}
+                  </h2>
+                  <p className="mx-auto max-w-md">{t("user_away_description")}</p>
+                </div>
+              </div>
+            ) : (
               eventTypes.map((type) => (
                 <div
                   key={type.id}
@@ -101,12 +110,13 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
                     />
                   )}
                 </div>
-              ))}
+              ))
+            )}
           </div>
           {eventTypes.length === 0 && (
-            <div className="overflow-hidden rounded-sm shadow">
+            <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 text-3xl font-semibold text-gray-600 dark:text-white">
+                <h2 className="font-cal mb-2 text-3xl font-semibold 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>