diff --git a/artifacts/tx-os/src/pages/protocol.tsx b/artifacts/tx-os/src/pages/protocol.tsx
index ca7ab2e3..efc72a6c 100644
--- a/artifacts/tx-os/src/pages/protocol.tsx
+++ b/artifacts/tx-os/src/pages/protocol.tsx
@@ -3316,7 +3316,7 @@ function RoomsDashboardView({
             onClick={() => goTab(k.tab)}
             className="bg-white rounded-2xl border border-slate-200 p-4 text-start hover:border-sky-300 hover:shadow-sm transition"
           >
-            <div className="text-3xl font-bold text-sky-600">
+            <div className="text-3xl font-bold text-[#0f1d3d]">
               {k.value ?? "—"}
             </div>
             <div className="text-sm text-slate-500 mt-1">{k.label}</div>
@@ -3327,32 +3327,36 @@ function RoomsDashboardView({
         ))}
       </div>
 
-      <div className="bg-gradient-to-l from-sky-500 to-sky-600 rounded-2xl p-4 text-white shadow-sm">
-        <div className="flex items-center gap-2 text-sky-100 text-sm">
-          <Clock3 size={16} />
-          {t("protocol.roomsDash.nextBooking")}
-        </div>
+      <div className="bg-gradient-to-l from-sky-500 to-sky-600 rounded-2xl px-3 py-2 text-white shadow-sm">
         {d?.nextBooking ? (
-          <div className="mt-2 flex flex-wrap items-center justify-between gap-3">
-            <div className="min-w-0">
-              <div className="font-bold text-lg truncate">
+          <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-1">
+            <div className="flex items-center gap-2 min-w-0">
+              <Clock3 size={14} className="shrink-0 text-sky-100" />
+              <span className="text-xs text-sky-100 whitespace-nowrap">
+                {t("protocol.roomsDash.nextBooking")}
+              </span>
+              <span className="font-bold text-sm truncate">
                 {d.nextBooking.title}
-              </div>
-              <div className="text-sm text-sky-100">
+              </span>
+              <span className="text-xs text-sky-100 truncate">
                 {nameOf(d.nextBooking.roomNameAr, d.nextBooking.roomNameEn)}
                 {" · "}
                 {fmtNextTime(d.nextBooking.startsAt)}
-              </div>
+              </span>
             </div>
-            <div className="rounded-xl bg-white/15 px-4 py-2 text-xl font-bold whitespace-nowrap">
+            <div className="rounded-lg bg-white/15 px-2.5 py-0.5 text-sm font-bold whitespace-nowrap">
               {countdown}
             </div>
           </div>
         ) : (
-          <div className="mt-2 text-sky-100 text-sm">
-            {stats.isLoading
-              ? t("common.loading")
-              : t("protocol.roomsDash.noUpcoming")}
+          <div className="flex items-center gap-2 text-sky-100 text-xs">
+            <Clock3 size={14} className="shrink-0" />
+            {t("protocol.roomsDash.nextBooking")}
+            <span className="text-white">
+              {stats.isLoading
+                ? t("common.loading")
+                : t("protocol.roomsDash.noUpcoming")}
+            </span>
           </div>
         )}
       </div>