diff --git a/apps/web/pages/availability/troubleshoot.tsx b/apps/web/pages/availability/troubleshoot.tsx
index d85147e490..e39e75d122 100644
--- a/apps/web/pages/availability/troubleshoot.tsx
+++ b/apps/web/pages/availability/troubleshoot.tsx
@@ -1,7 +1,5 @@
 import dayjs from "@calcom/dayjs";
-import { Calendar } from "@calcom/features/calendars/weeklyview";
 import Shell from "@calcom/features/shell/Shell";
-import { yyyymmdd } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
 import { SkeletonText } from "@calcom/ui";
@@ -18,13 +16,13 @@ export interface IBusySlot {
 }
 
 const AvailabilityView = ({ user }: { user: User }) => {
+  const { t } = useLocale();
   const { date, setQuery: setSelectedDate } = useRouterQuery("date");
   const selectedDate = dayjs(date);
   const formattedSelectedDate = selectedDate.format("YYYY-MM-DD");
 
-  const { data } = trpc.viewer.availability.user.useQuery(
+  const { data, isLoading } = trpc.viewer.availability.user.useQuery(
     {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       username: user.username!,
       dateFrom: selectedDate.startOf("day").utc().format(),
       dateTo: selectedDate.endOf("day").utc().format(),
@@ -47,26 +45,70 @@ const AvailabilityView = ({ user }: { user: User }) => {
     }, [] as IBusySlot[]) || [];
 
   return (
-    <div className="max-w-xl overflow-hidden rounded-md border border-gray-200 bg-white">
-      <div className="px-4">
-        <Calendar
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          events={[...(data?.busy || []), ...overrides]
-            .sort((a: IBusySlot, b: IBusySlot) => (a.start > b.start ? -1 : 1))
-            .map((slot) => ({
-              // TODO: Modify the Calendar view to be better at displaying blocks.
-              id: undefined,
-              title:
-                (slot.title ? `(${slot.title}) - ` : "") + (slot.source ? `(source: ${slot.source})` : ""),
-              start: new Date(slot.start),
-              end: new Date(slot.end),
-            }))}
-          onDateChange={(e) => setSelectedDate(yyyymmdd(e))}
-          startDate={selectedDate.startOf("day").toDate()}
-          endDate={selectedDate.endOf("day").toDate()}
-          view="day"
+    <div className="max-w-xl overflow-hidden rounded-md bg-white shadow">
+      <div className="px-4 py-5 sm:p-6">
+        {t("overview_of_day")}{" "}
+        <input
+          type="date"
+          className="inline h-8 border-none p-0"
+          defaultValue={formattedSelectedDate}
+          onChange={(e) => {
+            if (e.target.value) setSelectedDate(e.target.value);
+          }}
         />
+        <small className="block text-gray-400">{t("hover_over_bold_times_tip")}</small>
+        <div className="mt-4 space-y-4">
+          <div className="bg-brand dark:bg-darkmodebrand overflow-hidden rounded-md">
+            <div className="text-brandcontrast dark:text-darkmodebrandcontrast px-4 py-2 sm:px-6">
+              {t("your_day_starts_at")} {convertMinsToHrsMins(user.startTime)}
+            </div>
+          </div>
+          {(() => {
+            if (isLoading)
+              return (
+                <>
+                  <SkeletonText className="block h-16 w-full" />
+                  <SkeletonText className="block h-16 w-full" />
+                </>
+              );
+
+            if (data && (data.busy.length > 0 || overrides.length > 0))
+              return [...data.busy, ...overrides]
+                .sort((a: IBusySlot, b: IBusySlot) => (a.start > b.start ? -1 : 1))
+                .map((slot: IBusySlot) => (
+                  <div
+                    key={dayjs(slot.start).format("HH:mm")}
+                    className="overflow-hidden rounded-md bg-gray-100"
+                    data-testid="troubleshooter-busy-time">
+                    <div className="px-4 py-5 text-black sm:p-6">
+                      {t("calendar_shows_busy_between")}{" "}
+                      <span className="font-medium text-gray-800" title={dayjs(slot.start).format("HH:mm")}>
+                        {dayjs(slot.start).format("HH:mm")}
+                      </span>{" "}
+                      {t("and")}{" "}
+                      <span className="font-medium text-gray-800" title={dayjs(slot.end).format("HH:mm")}>
+                        {dayjs(slot.end).format("HH:mm")}
+                      </span>{" "}
+                      {t("on")} {dayjs(slot.start).format("D")}{" "}
+                      {t(dayjs(slot.start).format("MMMM").toLowerCase())} {dayjs(slot.start).format("YYYY")}
+                      {slot.title && ` - (${slot.title})`}
+                      {slot.source && <small>{` - (source: ${slot.source})`}</small>}
+                    </div>
+                  </div>
+                ));
+            return (
+              <div className="overflow-hidden rounded-md bg-gray-100">
+                <div className="px-4 py-5 text-black sm:p-6">{t("calendar_no_busy_slots")}</div>
+              </div>
+            );
+          })()}
+
+          <div className="bg-brand dark:bg-darkmodebrand overflow-hidden rounded-md">
+            <div className="text-brandcontrast dark:text-darkmodebrandcontrast px-4 py-2 sm:px-6">
+              {t("your_day_ends_at")} {convertMinsToHrsMins(user.endTime)}
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );
@@ -83,3 +125,11 @@ export default function Troubleshoot() {
     </div>
   );
 }
+
+function convertMinsToHrsMins(mins: number) {
+  const h = Math.floor(mins / 60);
+  const m = mins % 60;
+  const hs = h < 10 ? "0" + h : h;
+  const ms = m < 10 ? "0" + m : m;
+  return `${hs}:${ms}`;
+}
diff --git a/apps/web/playwright/availability.e2e.ts b/apps/web/playwright/availability.e2e.ts
index 81ddd9ab6d..4bebb0f0d8 100644
--- a/apps/web/playwright/availability.e2e.ts
+++ b/apps/web/playwright/availability.e2e.ts
@@ -32,16 +32,15 @@ test.describe("Availablity tests", () => {
       await page.locator('[form="availability-form"][type="submit"]').click();
     });
 
-    // The troubleshooter is unaware of the selected schedule, kept the override logic for now but needs rework.
-    // await test.step("Date override is displayed in troubleshooter", async () => {
-    //   const response = await page.waitForResponse("**/api/trpc/viewer.availability.schedule.update?batch=1");
-    //   const json = await response.json();
-    //   // @ts-expect-error trust me bro
-    //   const date = json[0].result.data.json.schedule.availability.find((a) => !!a.date);
-    //   const troubleshooterURL = `/availability/troubleshoot?date=${dayjs(date.date).format("YYYY-MM-DD")}`;
-    //   await page.goto(troubleshooterURL);
-    //   await expect(page.locator('[data-testid="troubleshooter-busy-time"]')).toHaveCount(1);
-    // });
+    await test.step("Date override is displayed in troubleshooter", async () => {
+      const response = await page.waitForResponse("**/api/trpc/viewer.availability.schedule.update?batch=1");
+      const json = await response.json();
+      // @ts-expect-error trust me bro
+      const date = json[0].result.data.json.schedule.availability.find((a) => !!a.date);
+      const troubleshooterURL = `/availability/troubleshoot?date=${dayjs(date.date).format("YYYY-MM-DD")}`;
+      await page.goto(troubleshooterURL);
+      await expect(page.locator('[data-testid="troubleshooter-busy-time"]')).toHaveCount(1);
+    });
   });
 
   test("Availablity pages", async ({ page }) => {
diff --git a/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx b/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
index d9715f6a85..e712c22fad 100644
--- a/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
+++ b/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
@@ -14,8 +14,7 @@ export function SchedulerHeading() {
   return (
     <header className="flex flex-none flex-col justify-between py-4 sm:flex-row sm:items-center">
       <h1 className="text-xl font-semibold text-gray-900">
-        {startDate.format("MMM DD")}
-        {!startDate.isSame(endDate, "day") ? `-${endDate.format("DD")}` : ""}
+        {startDate.format("MMM DD")}-{endDate.format("DD")}
         <span className="text-gray-500">,{startDate.format("YYYY")}</span>
       </h1>
       <div className="flex items-center space-x-2 rtl:space-x-reverse">