diff --git a/apps/web/pages/settings/my-account/out-of-office/index.tsx b/apps/web/pages/settings/my-account/out-of-office/index.tsx
index 85ccbf78a3..dc8537fc50 100644
--- a/apps/web/pages/settings/my-account/out-of-office/index.tsx
+++ b/apps/web/pages/settings/my-account/out-of-office/index.tsx
@@ -56,8 +56,8 @@ const CreateOutOfOfficeEntryModal = ({
   const [selectedMember, setSelectedMember] = useState<{ label: string; value: number | null } | null>(null);
 
   const [dateRange] = useState<{ startDate: Date; endDate: Date }>({
-    startDate: dayjs().startOf("d").toDate(),
-    endDate: dayjs().add(1, "d").endOf("d").toDate(),
+    startDate: dayjs().utc().startOf("d").toDate(),
+    endDate: dayjs().utc().add(1, "d").endOf("d").toDate(),
   });
 
   const { hasTeamPlan } = useHasTeamPlan();
@@ -375,6 +375,8 @@ const OutOfOfficePage = () => {
   }, [openModalOnStart]);
 
   const [openModal, setOpenModal] = useState(false);
+
+  const { isPending } = trpc.viewer.outOfOfficeReasonList.useQuery();
   return (
     <>
       <Meta
@@ -382,13 +384,17 @@ const OutOfOfficePage = () => {
         description={t("out_of_office_description")}
         borderInShellHeader={false}
         CTA={
-          <Button
-            color="primary"
-            className="flex w-20 items-center justify-between px-4"
-            onClick={() => setOpenModal(true)}
-            data-testid="add_entry_ooo">
-            <Icon name="plus" size={16} /> {t("add")}
-          </Button>
+          isPending ? (
+            <SkeletonText className="h-8 w-20" />
+          ) : (
+            <Button
+              color="primary"
+              className="flex w-20 items-center justify-between px-4"
+              onClick={() => setOpenModal(true)}
+              data-testid="add_entry_ooo">
+              <Icon name="plus" size={16} /> {t("add")}
+            </Button>
+          )
         }
       />
       <CreateOutOfOfficeEntryModal openModal={openModal} closeModal={() => setOpenModal(false)} />
diff --git a/apps/web/playwright/out-of-office.e2e.ts b/apps/web/playwright/out-of-office.e2e.ts
index a88a2fa5f0..ec69507dd0 100644
--- a/apps/web/playwright/out-of-office.e2e.ts
+++ b/apps/web/playwright/out-of-office.e2e.ts
@@ -11,7 +11,7 @@ test.describe.configure({ mode: "parallel" });
 test.afterEach(({ users }) => users.deleteAll());
 
 test.describe("Out of office", () => {
-  test.skip("User can create out of office entry", async ({ page, users }) => {
+  test("User can create out of office entry", async ({ page, users }) => {
     const user = await users.create({ name: "userOne" });
 
     await user.apiLogin();
@@ -30,7 +30,7 @@ test.describe("Out of office", () => {
     await expect(page.locator(`data-testid=table-redirect-n-a`)).toBeVisible();
   });
 
-  test.skip("User can configure booking redirect", async ({ page, users }) => {
+  test("User can configure booking redirect", async ({ page, users }) => {
     const user = await users.create({ name: "userOne" });
     const userTo = await users.create({ name: "userTwo" });