diff --git a/src/components/routes/create-plan/CreatePlan.test.tsx b/src/components/routes/create-plan/CreatePlan.test.tsx
index 5d4807a2..83cf990c 100644
--- a/src/components/routes/create-plan/CreatePlan.test.tsx
+++ b/src/components/routes/create-plan/CreatePlan.test.tsx
@@ -81,6 +81,16 @@ vi.mock(
 describe("CreatePlan Component", () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    // `clearAllMocks` resets call history but keeps implementations set via
+    // `mockReturnValue`. The navigation tests force `useBlocker` into a
+    // "blocked" state, which opens the navigation dialog; reset it here so
+    // that leaked dialog doesn't `aria-hidden` the form in later tests.
+    vi.mocked(useBlocker).mockReturnValue({
+      state: "unblocked",
+      proceed: undefined,
+      reset: undefined,
+      location: undefined,
+    });
     vi.mocked(useParams).mockReturnValue({ groupId: "test-group-id" });
     vi.mocked(useLocation).mockReturnValue({
       pathname: "/groups/test-group-id/plan/new",
@@ -428,13 +438,35 @@ describe("CreatePlan Component", () => {
       screen.getByRole("button", { name: 'Create "Brand New Tag"' }),
     );
 
+    // Clicking the create option opens a multi-language dialog with the
+    // typed name pre-filled for the default (EN) language.
+    const createTagButton = await screen.findByRole("button", {
+      name: "Create Tag",
+    });
+    fireEvent.click(createTagButton);
+
     await waitFor(() => {
       expect(axiosInstance.post).toHaveBeenCalledWith(
         "/api/v1/cms/tags",
-        expect.objectContaining({ name: "Brand New Tag" }),
+        expect.objectContaining({
+          metadata: expect.arrayContaining([
+            expect.objectContaining({
+              language: "EN",
+              name: "Brand New Tag",
+            }),
+          ]),
+        }),
         expect.any(Object),
       );
     });
+
+    // Successful creation closes the dialog; wait for it so the Radix
+    // scroll-lock is torn down and does not leak into later tests.
+    await waitFor(() => {
+      expect(
+        screen.queryByRole("button", { name: "Create Tag" }),
+      ).not.toBeInTheDocument();
+    });
   });
 
   it("shows no image preview initially", () => {
diff --git a/src/components/routes/create-plan/CreatePlan.tsx b/src/components/routes/create-plan/CreatePlan.tsx
index d9386802..9f57b516 100644
--- a/src/components/routes/create-plan/CreatePlan.tsx
+++ b/src/components/routes/create-plan/CreatePlan.tsx
@@ -21,6 +21,8 @@ import { planSchema } from "@/schema/PlanSchema";
 import { z } from "zod";
 import { useTranslate } from "@tolgee/react";
 import PlanTagSearchInput from "./PlanTagSearchInput";
+import PlanVideosSection from "./PlanVideosSection";
+import type { PlanVideoSummary } from "@/components/routes/task/api/planApi";
 import {
   planTagsToIds,
   type PlanTagSummary,
@@ -259,6 +261,11 @@ const Createplan = () => {
     }
   }, [planId, planData]);
 
+  const planVideos = useMemo<PlanVideoSummary[]>(
+    () => (Array.isArray(planData?.videos) ? planData.videos : []),
+    [planData],
+  );
+
   const canUpdate = form.formState.isDirty;
 
   const hasUnsavedChanges = canUpdate && !form.formState.isSubmitSuccessful;
@@ -933,6 +940,11 @@ const Createplan = () => {
                 </Pecha.FormItem>
               )}
             />
+
+            {planId && (
+              <PlanVideosSection planId={planId} videos={planVideos} />
+            )}
+
             <div className="pt-8 w-full flex justify-end">
               {isCreateMode ? (
                 <Pecha.Button
diff --git a/src/components/routes/create-plan/PlanNewLegacyRedirect.tsx b/src/components/routes/create-plan/PlanNewLegacyRedirect.tsx
index 2ce870f9..ba44c907 100644
--- a/src/components/routes/create-plan/PlanNewLegacyRedirect.tsx
+++ b/src/components/routes/create-plan/PlanNewLegacyRedirect.tsx
@@ -1,6 +1,9 @@
 import { useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import { getSeries, resolveSeriesGroupId } from "@/components/routes/create-series/api/seriesApi";
+import {
+  getSeries,
+  resolveSeriesGroupId,
+} from "@/components/routes/create-series/api/seriesApi";
 import { parsePlanNewFromSeriesState } from "./planNewFromSeriesState";
 import { ROUTES } from "@/routes/paths";
 
diff --git a/src/components/routes/create-plan/PlanTagSearchInput.tsx b/src/components/routes/create-plan/PlanTagSearchInput.tsx
index 51bb2188..20981cdc 100644
--- a/src/components/routes/create-plan/PlanTagSearchInput.tsx
+++ b/src/components/routes/create-plan/PlanTagSearchInput.tsx
@@ -51,8 +51,12 @@ const PlanTagSearchInput = ({
     Object.fromEntries(initialTags.map((tag) => [tag.id, tag.name])),
   );
   const [showCreateDialog, setShowCreateDialog] = useState(false);
-  const [activeLanguages, setActiveLanguages] = useState<LanguageCode[]>(["EN"]);
-  const [languageData, setLanguageData] = useState<Record<LanguageCode, LanguageData>>({
+  const [activeLanguages, setActiveLanguages] = useState<LanguageCode[]>([
+    "EN",
+  ]);
+  const [languageData, setLanguageData] = useState<
+    Record<LanguageCode, LanguageData>
+  >({
     EN: { name: "", description: "" },
     BO: { name: "", description: "" },
     ZH: { name: "", description: "" },
@@ -155,7 +159,9 @@ const PlanTagSearchInput = ({
     for (const lang of activeLanguages) {
       const data = languageData[lang];
       if (!data.name.trim()) {
-        toast.error(`Name is required for ${PLAN_LANGUAGE.find(l => l.value === lang)?.label}`);
+        toast.error(
+          `Name is required for ${PLAN_LANGUAGE.find((l) => l.value === lang)?.label}`,
+        );
         return;
       }
       metadata.push({
@@ -182,7 +188,7 @@ const PlanTagSearchInput = ({
   const updateLanguageField = (
     lang: LanguageCode,
     field: keyof LanguageData,
-    value: string
+    value: string,
   ) => {
     setLanguageData((prev) => ({
       ...prev,
@@ -331,7 +337,10 @@ const PlanTagSearchInput = ({
             <div className="space-y-2">
               <div className="flex items-center justify-between">
                 <label className="text-sm font-bold">Languages</label>
-                {PLAN_LANGUAGE.filter((lang) => !activeLanguages.includes(lang.value as LanguageCode)).length > 0 && (
+                {PLAN_LANGUAGE.filter(
+                  (lang) =>
+                    !activeLanguages.includes(lang.value as LanguageCode),
+                ).length > 0 && (
                   <Pecha.DropdownMenu>
                     <Pecha.DropdownMenuTrigger asChild>
                       <Button
@@ -345,10 +354,15 @@ const PlanTagSearchInput = ({
                       </Button>
                     </Pecha.DropdownMenuTrigger>
                     <Pecha.DropdownMenuContent>
-                      {PLAN_LANGUAGE.filter((lang) => !activeLanguages.includes(lang.value as LanguageCode)).map((lang) => (
+                      {PLAN_LANGUAGE.filter(
+                        (lang) =>
+                          !activeLanguages.includes(lang.value as LanguageCode),
+                      ).map((lang) => (
                         <Pecha.DropdownMenuItem
                           key={lang.value}
-                          onClick={() => addLanguage(lang.value as LanguageCode)}
+                          onClick={() =>
+                            addLanguage(lang.value as LanguageCode)
+                          }
                         >
                           {lang.label}
                         </Pecha.DropdownMenuItem>
@@ -358,9 +372,13 @@ const PlanTagSearchInput = ({
                 )}
               </div>
               {activeLanguages.map((lang) => {
-                const langLabel = PLAN_LANGUAGE.find((l) => l.value === lang)?.label || lang;
+                const langLabel =
+                  PLAN_LANGUAGE.find((l) => l.value === lang)?.label || lang;
                 return (
-                  <div key={lang} className="relative rounded-lg border border-input bg-[#FAFAFA] dark:bg-[#262626] p-4 space-y-3">
+                  <div
+                    key={lang}
+                    className="relative rounded-lg border border-input bg-[#FAFAFA] dark:bg-[#262626] p-4 space-y-3"
+                  >
                     {activeLanguages.length > 1 && (
                       <button
                         type="button"
@@ -371,12 +389,16 @@ const PlanTagSearchInput = ({
                         <IoMdClose className="h-4 w-4" />
                       </button>
                     )}
-                    <div className="text-sm font-semibold text-muted-foreground mb-2">{langLabel}</div>
+                    <div className="text-sm font-semibold text-muted-foreground mb-2">
+                      {langLabel}
+                    </div>
                     <div className="space-y-2">
                       <label className="text-sm font-bold">Name</label>
                       <Input
                         value={languageData[lang].name}
-                        onChange={(e) => updateLanguageField(lang, "name", e.target.value)}
+                        onChange={(e) =>
+                          updateLanguageField(lang, "name", e.target.value)
+                        }
                         placeholder="Tag name"
                         required
                         className="bg-white dark:bg-[#181818]"
@@ -386,7 +408,13 @@ const PlanTagSearchInput = ({
                       <label className="text-sm font-bold">Description</label>
                       <Textarea
                         value={languageData[lang].description}
-                        onChange={(e) => updateLanguageField(lang, "description", e.target.value)}
+                        onChange={(e) =>
+                          updateLanguageField(
+                            lang,
+                            "description",
+                            e.target.value,
+                          )
+                        }
                         placeholder="Optional description"
                         className="field-sizing-fixed min-h-[80px] max-h-32 resize-none bg-white dark:bg-[#181818]"
                       />
diff --git a/src/components/routes/create-plan/PlanVideosSection.tsx b/src/components/routes/create-plan/PlanVideosSection.tsx
new file mode 100644
index 00000000..6753581d
--- /dev/null
+++ b/src/components/routes/create-plan/PlanVideosSection.tsx
@@ -0,0 +1,271 @@
+import { useEffect, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Pecha } from "@/components/ui/shadimport";
+import { SortableList, SortableItem } from "@/components/ui/atoms/sortable";
+import { FaYoutube } from "react-icons/fa";
+import { FiLoader, FiPlus } from "react-icons/fi";
+import { FaTrash } from "react-icons/fa6";
+import { PiDotsSixVertical } from "react-icons/pi";
+import {
+  addPlanVideo,
+  deletePlanVideo,
+  fetchPlanVideos,
+  reorderPlanVideos,
+  type PlanVideoSummary,
+} from "@/components/routes/task/api/planApi";
+import { getApiErrorMessage } from "@/lib/apiErrors";
+import {
+  getYouTubeVideoId,
+  getYouTubeShortsId,
+  reorderArray,
+} from "@/lib/utils";
+
+interface PlanVideosSectionProps {
+  planId: string;
+  videos?: PlanVideoSummary[];
+}
+
+const isYouTubeUrl = (url: string) =>
+  Boolean(getYouTubeVideoId(url) || getYouTubeShortsId(url));
+
+const sortByOrder = (videos: PlanVideoSummary[]) =>
+  [...videos].sort((a, b) => a.display_order - b.display_order);
+
+const PlanVideosSection = ({ planId, videos }: PlanVideosSectionProps) => {
+  const [url, setUrl] = useState("");
+  const [title, setTitle] = useState("");
+  const queryClient = useQueryClient();
+
+  const { data: serverVideos = [] } = useQuery<PlanVideoSummary[]>({
+    queryKey: ["plan-videos", planId],
+    queryFn: async () => (await fetchPlanVideos(planId)) ?? [],
+    initialData: videos ?? [],
+    refetchOnWindowFocus: false,
+  });
+
+  // Local copy so drag-reorder updates instantly before the server confirms.
+  const [orderedVideos, setOrderedVideos] = useState<PlanVideoSummary[]>(
+    sortByOrder(serverVideos),
+  );
+
+  useEffect(() => {
+    setOrderedVideos(sortByOrder(serverVideos));
+  }, [serverVideos]);
+
+  const invalidateVideos = () =>
+    queryClient.invalidateQueries({ queryKey: ["plan-videos", planId] });
+
+  const addMutation = useMutation({
+    mutationFn: (payload: { url: string; title?: string | null }) =>
+      addPlanVideo(planId, payload),
+    onSuccess: () => {
+      setUrl("");
+      setTitle("");
+      toast.success("Video added");
+      invalidateVideos();
+    },
+    onError: (error: unknown) => {
+      toast.error("Failed to add video", {
+        description: getApiErrorMessage(error),
+      });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (videoId: string) => deletePlanVideo(planId, videoId),
+    onSuccess: () => {
+      toast.success("Video removed");
+      invalidateVideos();
+    },
+    onError: (error: unknown) => {
+      toast.error("Failed to remove video", {
+        description: getApiErrorMessage(error),
+      });
+    },
+  });
+
+  const reorderMutation = useMutation({
+    mutationFn: (payload: Array<{ id: string; display_order: number }>) =>
+      reorderPlanVideos(planId, payload),
+    onSuccess: (updated) => {
+      queryClient.setQueryData(["plan-videos", planId], updated);
+    },
+    onError: (error: unknown) => {
+      setOrderedVideos(sortByOrder(serverVideos)); // revert optimistic order
+      toast.error("Failed to reorder videos", {
+        description: getApiErrorMessage(error),
+      });
+    },
+  });
+
+  const trimmedUrl = url.trim();
+  const urlIsValid = isYouTubeUrl(trimmedUrl);
+  const isBusy =
+    addMutation.isPending ||
+    deleteMutation.isPending ||
+    reorderMutation.isPending;
+
+  const handleAdd = () => {
+    if (!trimmedUrl || !urlIsValid) return;
+    const trimmedTitle = title.trim();
+    addMutation.mutate({
+      url: trimmedUrl,
+      ...(trimmedTitle ? { title: trimmedTitle } : {}),
+    });
+  };
+
+  const handleReorder = (activeId: string, overId: string) => {
+    if (activeId === overId) return;
+    const next = reorderArray(orderedVideos, activeId, overId);
+    if (!next) return;
+    setOrderedVideos(next);
+    reorderMutation.mutate(
+      next.map((video, index) => ({ id: video.id, display_order: index })),
+    );
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <FaYoutube className="w-4 h-4 text-[#A51C21]" />
+        <h3 className="text-sm font-bold">YouTube videos</h3>
+        {orderedVideos.length > 0 && (
+          <span className="text-xs text-muted-foreground">
+            {orderedVideos.length}
+          </span>
+        )}
+      </div>
+
+      <div className="space-y-1">
+        <div className="flex flex-col gap-2 sm:flex-row">
+          <Pecha.Input
+            type="url"
+            placeholder="Enter YouTube URL"
+            value={url}
+            disabled={isBusy}
+            className="bg-white"
+            onChange={(e) => setUrl(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                handleAdd();
+              }
+            }}
+          />
+          <Pecha.Input
+            type="text"
+            placeholder="Title (optional)"
+            value={title}
+            disabled={isBusy}
+            className="bg-white sm:max-w-[40%]"
+            onChange={(e) => setTitle(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                handleAdd();
+              }
+            }}
+          />
+          <Pecha.Button
+            type="button"
+            className="bg-[#A51C21] hover:bg-[#A51C21]/90 shrink-0"
+            disabled={isBusy || !trimmedUrl || !urlIsValid}
+            onClick={handleAdd}
+          >
+            {addMutation.isPending ? (
+              <FiLoader className="w-4 h-4 animate-spin" />
+            ) : (
+              <FiPlus className="w-4 h-4" />
+            )}
+            Add
+          </Pecha.Button>
+        </div>
+        {trimmedUrl && !urlIsValid && (
+          <p className="text-xs text-[#A51C21]">
+            Please enter a valid YouTube URL.
+          </p>
+        )}
+      </div>
+
+      <div className="max-h-[40vh] overflow-y-auto">
+        {orderedVideos.length === 0 ? (
+          <p className="text-sm text-muted-foreground py-4 text-center">
+            No videos added yet.
+          </p>
+        ) : (
+          <SortableList
+            items={orderedVideos.map((video) => ({ id: video.id }))}
+            onReorder={handleReorder}
+            disabled={isBusy}
+          >
+            <div className="space-y-3">
+              {orderedVideos.map((video) => {
+                const videoId =
+                  video.video_id ||
+                  getYouTubeVideoId(video.url) ||
+                  getYouTubeShortsId(video.url);
+                return (
+                  <SortableItem
+                    key={video.id}
+                    id={video.id}
+                    disabled={isBusy}
+                    className="flex items-center gap-3 rounded-lg border border-dashed border-gray-300 dark:border-input p-2 bg-white dark:bg-[#161616]"
+                  >
+                    {({ listeners }: any) => (
+                      <>
+                        <PiDotsSixVertical
+                          className="w-4 h-4 text-gray-400 dark:text-muted-foreground cursor-grab active:cursor-grabbing shrink-0"
+                          {...listeners}
+                        />
+                        {videoId && (
+                          <img
+                            src={`https://img.youtube.com/vi/${videoId}/default.jpg`}
+                            alt={video.title ?? "YouTube video"}
+                            className="w-20 h-14 object-cover rounded shrink-0"
+                          />
+                        )}
+                        <div className="min-w-0 flex-1">
+                          <a
+                            href={video.url}
+                            target="_blank"
+                            rel="noreferrer"
+                            className="text-sm text-foreground hover:underline block truncate"
+                            title={video.title ?? video.url}
+                          >
+                            {video.title || video.url}
+                          </a>
+                          <span className="text-xs text-muted-foreground truncate block">
+                            {video.url}
+                          </span>
+                        </div>
+                        <Pecha.Button
+                          type="button"
+                          variant="outline"
+                          size="icon"
+                          className="shrink-0 h-9 w-9"
+                          disabled={isBusy}
+                          title="Remove video"
+                          onClick={() => deleteMutation.mutate(video.id)}
+                        >
+                          {deleteMutation.isPending &&
+                          deleteMutation.variables === video.id ? (
+                            <FiLoader className="w-4 h-4 animate-spin" />
+                          ) : (
+                            <FaTrash className="w-4 h-4" />
+                          )}
+                        </Pecha.Button>
+                      </>
+                    )}
+                  </SortableItem>
+                );
+              })}
+            </div>
+          </SortableList>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PlanVideosSection;
diff --git a/src/components/routes/create-series/api/seriesApi.ts b/src/components/routes/create-series/api/seriesApi.ts
index 5f3dd4ca..350c16e8 100644
--- a/src/components/routes/create-series/api/seriesApi.ts
+++ b/src/components/routes/create-series/api/seriesApi.ts
@@ -79,7 +79,10 @@ export type SeriesDetailDTO = {
 };
 
 export function resolveSeriesGroupId(
-  series: Pick<SeriesDetailDTO, "group_id" | "group" | "plans"> | null | undefined,
+  series:
+    | Pick<SeriesDetailDTO, "group_id" | "group" | "plans">
+    | null
+    | undefined,
 ): string | undefined {
   if (!series) return undefined;
   if (series.group_id?.trim()) return series.group_id.trim();
diff --git a/src/components/routes/dashboard/dashboardTable.ts b/src/components/routes/dashboard/dashboardTable.ts
index 6672d299..a9e62576 100644
--- a/src/components/routes/dashboard/dashboardTable.ts
+++ b/src/components/routes/dashboard/dashboardTable.ts
@@ -1,6 +1,4 @@
-import {
-  LANGUAGE_CODE_ORDER,
-} from "@/lib/languageCodes";
+import { LANGUAGE_CODE_ORDER } from "@/lib/languageCodes";
 import { formatDistanceToNow } from "date-fns";
 
 export type DashboardRowKind = "plan" | "series";
diff --git a/src/components/routes/dashboard/dashboardUrlState.ts b/src/components/routes/dashboard/dashboardUrlState.ts
index f5e5e047..9af0633b 100644
--- a/src/components/routes/dashboard/dashboardUrlState.ts
+++ b/src/components/routes/dashboard/dashboardUrlState.ts
@@ -1,6 +1,4 @@
-import {
-  normalizeLanguageCode,
-} from "@/lib/languageCodes";
+import { normalizeLanguageCode } from "@/lib/languageCodes";
 import type { DashboardTab } from "./dashboardApi";
 import { DASHBOARD_PAGE_SIZE } from "./dashboardApi";
 import type { FetchDashboardItemsParams } from "./dashboardApi";
@@ -49,7 +47,6 @@ const VALID_STATUS = new Set<DashboardPlanStatus>([
   "DELETED",
 ]);
 
-
 const VALID_SORT = new Set<DashboardSort>(["recent"]);
 
 function parseTab(raw: string | null): DashboardTab {
diff --git a/src/components/routes/profile/Profile.test.tsx b/src/components/routes/profile/Profile.test.tsx
index 1fe18072..7c6018ed 100644
--- a/src/components/routes/profile/Profile.test.tsx
+++ b/src/components/routes/profile/Profile.test.tsx
@@ -19,6 +19,15 @@ const mockUserInfo = {
   ],
 };
 
+vi.mock("@/hooks/useUserInfo", () => ({
+  USER_INFO_QUERY_KEY: ["userInfo"],
+  fetchUserInfo: vi.fn(),
+  useUserInfo: () => ({
+    data: mockUserInfo,
+    isLoading: false,
+  }),
+}));
+
 vi.mock("@/components/ui/molecules/user-card/UserCard", () => ({
   default: ({ userInfo }: any) => (
     <div data-testid="user-card">
diff --git a/src/components/routes/series-details/CloneLanguagePlansPanel.tsx b/src/components/routes/series-details/CloneLanguagePlansPanel.tsx
index eb5e1ae7..7a468042 100644
--- a/src/components/routes/series-details/CloneLanguagePlansPanel.tsx
+++ b/src/components/routes/series-details/CloneLanguagePlansPanel.tsx
@@ -48,9 +48,11 @@ export function CloneLanguagePlansPanel({
       );
     },
     onError: (err: unknown) => {
-      const message =
-        (err as { response?: { data?: { detail?: string | { message?: string } } } })
-          ?.response?.data?.detail;
+      const message = (
+        err as {
+          response?: { data?: { detail?: string | { message?: string } } };
+        }
+      )?.response?.data?.detail;
       const text =
         typeof message === "string"
           ? message
@@ -98,7 +100,9 @@ export function CloneLanguagePlansPanel({
   );
 
   if (embedded) {
-    return <div className="flex w-full flex-col items-center gap-4">{content}</div>;
+    return (
+      <div className="flex w-full flex-col items-center gap-4">{content}</div>
+    );
   }
 
   return (
diff --git a/src/components/routes/tags/TagFormDialog.tsx b/src/components/routes/tags/TagFormDialog.tsx
index 576b1c43..a4183bde 100644
--- a/src/components/routes/tags/TagFormDialog.tsx
+++ b/src/components/routes/tags/TagFormDialog.tsx
@@ -9,7 +9,12 @@ import { toast } from "sonner";
 import { PLAN_LANGUAGE } from "@/lib/constant";
 import { normalizeLanguageCode } from "@/lib/languageCodes";
 import type { LanguageCode } from "@/schema/SeriesSchema";
-import type { PlanOption, Tag, TagPayload, TagMetadataInput } from "./api/tagsApi";
+import type {
+  PlanOption,
+  Tag,
+  TagPayload,
+  TagMetadataInput,
+} from "./api/tagsApi";
 
 interface TagFormDialogProps {
   open: boolean;
@@ -34,8 +39,12 @@ const TagFormDialog = ({
   onSubmit,
 }: TagFormDialogProps) => {
   const isEdit = !!tag;
-  const [activeLanguages, setActiveLanguages] = useState<LanguageCode[]>(["EN"]);
-  const [languageData, setLanguageData] = useState<Record<LanguageCode, LanguageData>>({
+  const [activeLanguages, setActiveLanguages] = useState<LanguageCode[]>([
+    "EN",
+  ]);
+  const [languageData, setLanguageData] = useState<
+    Record<LanguageCode, LanguageData>
+  >({
     EN: { name: "", description: "" },
     BO: { name: "", description: "" },
     ZH: { name: "", description: "" },
@@ -52,7 +61,7 @@ const TagFormDialog = ({
 
   useEffect(() => {
     if (!open) return;
-    
+
     if (tag?.metadata && tag.metadata.length > 0) {
       const langs: LanguageCode[] = [];
       const data: Record<LanguageCode, LanguageData> = {
@@ -63,7 +72,7 @@ const TagFormDialog = ({
         NE: { name: "", description: "" },
         MN: { name: "", description: "" },
       };
-      
+
       tag.metadata.forEach((meta) => {
         const lang = normalizeLanguageCode(String(meta.language ?? ""));
         if (!lang) return;
@@ -73,7 +82,7 @@ const TagFormDialog = ({
           description: meta.description || "",
         };
       });
-      
+
       setActiveLanguages(langs.length > 0 ? langs : ["EN"]);
       setLanguageData(data);
     } else {
@@ -87,7 +96,7 @@ const TagFormDialog = ({
         MN: { name: "", description: "" },
       });
     }
-    
+
     setImageKey(tag?.image_key ?? null);
     setImagePreview(tag?.image ?? null);
     setSelectedPlanIds(tag?.plan_ids ?? []);
@@ -95,7 +104,7 @@ const TagFormDialog = ({
   }, [open, tag]);
 
   const availableLanguages = PLAN_LANGUAGE.filter(
-    (lang) => !activeLanguages.includes(lang.value as LanguageCode)
+    (lang) => !activeLanguages.includes(lang.value as LanguageCode),
   );
 
   const addLanguage = (langCode: LanguageCode) => {
@@ -113,7 +122,7 @@ const TagFormDialog = ({
   const updateLanguageField = (
     lang: LanguageCode,
     field: keyof LanguageData,
-    value: string
+    value: string,
   ) => {
     setLanguageData((prev) => ({
       ...prev,
@@ -161,12 +170,14 @@ const TagFormDialog = ({
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    
+
     const metadata: TagMetadataInput[] = [];
     for (const lang of activeLanguages) {
       const data = languageData[lang];
       if (!data.name.trim()) {
-        toast.error(`Name is required for ${PLAN_LANGUAGE.find(l => l.value === lang)?.label}`);
+        toast.error(
+          `Name is required for ${PLAN_LANGUAGE.find((l) => l.value === lang)?.label}`,
+        );
         return;
       }
       metadata.push({
@@ -175,7 +186,7 @@ const TagFormDialog = ({
         description: data.description.trim() || null,
       });
     }
-    
+
     onSubmit({
       metadata,
       image_key: imageKey,
@@ -218,7 +229,9 @@ const TagFormDialog = ({
                         {availableLanguages.map((lang) => (
                           <Pecha.DropdownMenuItem
                             key={lang.value}
-                            onClick={() => addLanguage(lang.value as LanguageCode)}
+                            onClick={() =>
+                              addLanguage(lang.value as LanguageCode)
+                            }
                           >
                             {lang.label}
                           </Pecha.DropdownMenuItem>
@@ -228,9 +241,13 @@ const TagFormDialog = ({
                   )}
                 </div>
                 {activeLanguages.map((lang) => {
-                  const langLabel = PLAN_LANGUAGE.find((l) => l.value === lang)?.label || lang;
+                  const langLabel =
+                    PLAN_LANGUAGE.find((l) => l.value === lang)?.label || lang;
                   return (
-                    <div key={lang} className="relative rounded-lg border border-input bg-[#FAFAFA] dark:bg-[#262626] p-4 space-y-3">
+                    <div
+                      key={lang}
+                      className="relative rounded-lg border border-input bg-[#FAFAFA] dark:bg-[#262626] p-4 space-y-3"
+                    >
                       {activeLanguages.length > 1 && (
                         <button
                           type="button"
@@ -241,12 +258,16 @@ const TagFormDialog = ({
                           <IoMdClose className="h-4 w-4" />
                         </button>
                       )}
-                      <div className="text-sm font-semibold text-muted-foreground mb-2">{langLabel}</div>
+                      <div className="text-sm font-semibold text-muted-foreground mb-2">
+                        {langLabel}
+                      </div>
                       <div className="space-y-2">
                         <label className="text-sm font-bold">Name</label>
                         <Pecha.Input
                           value={languageData[lang].name}
-                          onChange={(e) => updateLanguageField(lang, "name", e.target.value)}
+                          onChange={(e) =>
+                            updateLanguageField(lang, "name", e.target.value)
+                          }
                           placeholder="Tag name"
                           required
                           className="bg-white dark:bg-[#181818]"
@@ -256,7 +277,13 @@ const TagFormDialog = ({
                         <label className="text-sm font-bold">Description</label>
                         <Textarea
                           value={languageData[lang].description}
-                          onChange={(e) => updateLanguageField(lang, "description", e.target.value)}
+                          onChange={(e) =>
+                            updateLanguageField(
+                              lang,
+                              "description",
+                              e.target.value,
+                            )
+                          }
                           placeholder="Optional description"
                           className="field-sizing-fixed min-h-[80px] max-h-32 resize-none bg-white dark:bg-[#181818]"
                         />
diff --git a/src/components/routes/task/PlanDetailsPage.test.tsx b/src/components/routes/task/PlanDetailsPage.test.tsx
index a6b9a559..dd089ca7 100644
--- a/src/components/routes/task/PlanDetailsPage.test.tsx
+++ b/src/components/routes/task/PlanDetailsPage.test.tsx
@@ -190,11 +190,14 @@ describe("PlanDetailsPanel Component", () => {
     await waitFor(() => {
       expect(screen.getByText("Day 4")).toBeInTheDocument();
     });
+    // "Add New Day" now opens a dialog; submitting it triggers the request.
     fireEvent.click(screen.getByText("Add New Day"));
+    const submitButton = await screen.findByText("Add 1 Day");
+    fireEvent.click(submitButton);
     await waitFor(() => {
       expect(mockAxios.post).toHaveBeenCalledWith(
         expect.stringContaining("/api/v1/cms/plans/test-plan-id/days"),
-        {},
+        expect.objectContaining({ number_of_days: 1 }),
         expect.objectContaining({
           headers: expect.objectContaining({
             Authorization: "Bearer mock-token",
@@ -217,8 +220,10 @@ describe("PlanDetailsPanel Component", () => {
       expect(screen.getByText("Day 4")).toBeInTheDocument();
     });
     fireEvent.click(screen.getByText("Add New Day"));
+    const submitButton = await screen.findByText("Add 1 Day");
+    fireEvent.click(submitButton);
     await waitFor(() => {
-      expect(toast.error).toHaveBeenCalledWith("Failed to create new day", {
+      expect(toast.error).toHaveBeenCalledWith("Failed to create days", {
         description: "Cannot create day",
       });
     });
@@ -229,7 +234,7 @@ describe("PlanDetailsPanel Component", () => {
     await waitFor(() => {
       expect(screen.getByText(mockPlanData.title)).toBeInTheDocument();
     });
-    expect(screen.getByText("Add Task")).toBeInTheDocument();
+    expect(screen.getAllByText("Add Task").length).toBeGreaterThan(0);
     expect(screen.getByPlaceholderText("Task Title")).toBeInTheDocument();
   });
 
@@ -254,10 +259,10 @@ describe("PlanDetailsPanel Component", () => {
     await waitFor(() => {
       expect(screen.getByText(mockPlanData.title)).toBeInTheDocument();
     });
-    expect(screen.getByText("Add Task")).toBeInTheDocument();
+    expect(screen.getAllByText("Add Task").length).toBeGreaterThan(0);
     fireEvent.click(screen.getByText("Morning Intention Setting"));
     await waitFor(() => {
-      expect(screen.queryByText("Add Task")).not.toBeInTheDocument();
+      expect(screen.queryAllByText("Add Task")).toHaveLength(0);
     });
     await waitFor(() => {
       expect(screen.getByText("Task")).toBeInTheDocument();
@@ -341,7 +346,7 @@ describe("PlanDetailsPanel Component", () => {
     await user.click(deleteTaskBtn);
 
     await waitFor(() => {
-      expect(screen.getByText("Add Task")).toBeInTheDocument();
+      expect(screen.getAllByText("Add Task").length).toBeGreaterThan(0);
     });
   });
 
@@ -398,7 +403,7 @@ describe("PlanDetailsPanel Component", () => {
     await user.click(deleteTaskBtn);
 
     await waitFor(() => {
-      expect(screen.getByText("Add Task")).toBeInTheDocument();
+      expect(screen.getAllByText("Add Task").length).toBeGreaterThan(0);
     });
   });
 });
diff --git a/src/components/routes/task/api/planApi.ts b/src/components/routes/task/api/planApi.ts
index c36f61a5..5a9b2c2f 100644
--- a/src/components/routes/task/api/planApi.ts
+++ b/src/components/routes/task/api/planApi.ts
@@ -218,14 +218,15 @@ export const uploadDayShareableImage = async (
 ) => {
   const formData = new FormData();
   formData.append("file", file);
-  const { data } = await axiosInstance.post<PlanDayShareableImageUploadResponse>(
-    `/api/v1/cms/media/upload/day-shareable-image`,
-    formData,
-    {
-      params: { day_id, image_type },
-      headers: getAuthHeaders(),
-    },
-  );
+  const { data } =
+    await axiosInstance.post<PlanDayShareableImageUploadResponse>(
+      `/api/v1/cms/media/upload/day-shareable-image`,
+      formData,
+      {
+        params: { day_id, image_type },
+        headers: getAuthHeaders(),
+      },
+    );
   return data;
 };
 
@@ -289,3 +290,62 @@ export const reorderDayVideos = async (
   );
   return data.videos;
 };
+
+export interface PlanVideoDTO {
+  id: string;
+  plan_id: string;
+  url: string;
+  video_id: string | null;
+  title: string | null;
+  display_order: number;
+  created_at: string | null;
+}
+
+export type PlanVideoSummary = Pick<
+  PlanVideoDTO,
+  "id" | "url" | "video_id" | "title" | "display_order"
+>;
+
+export interface AddPlanVideoPayload {
+  url: string;
+  title?: string | null;
+}
+
+export const fetchPlanVideos = async (plan_id: string) => {
+  const { data } = await axiosInstance.get<{ videos: PlanVideoDTO[] }>(
+    `/api/v1/cms/plans/${plan_id}/videos`,
+    { headers: getAuthHeaders() },
+  );
+  return data.videos;
+};
+
+export const addPlanVideo = async (
+  plan_id: string,
+  payload: AddPlanVideoPayload,
+) => {
+  const { data } = await axiosInstance.post<PlanVideoDTO>(
+    `/api/v1/cms/plans/${plan_id}/videos`,
+    payload,
+    { headers: getAuthHeaders() },
+  );
+  return data;
+};
+
+export const deletePlanVideo = async (plan_id: string, video_id: string) => {
+  await axiosInstance.delete(
+    `/api/v1/cms/plans/${plan_id}/videos/${video_id}`,
+    { headers: getAuthHeaders() },
+  );
+};
+
+export const reorderPlanVideos = async (
+  plan_id: string,
+  videos: Array<{ id: string; display_order: number }>,
+) => {
+  const { data } = await axiosInstance.put<{ videos: PlanVideoDTO[] }>(
+    `/api/v1/cms/plans/${plan_id}/videos/order`,
+    { videos },
+    { headers: getAuthHeaders() },
+  );
+  return data.videos;
+};
diff --git a/src/components/routes/task/components/sidebar-component/SideBar.tsx b/src/components/routes/task/components/sidebar-component/SideBar.tsx
index 7225ed13..205241d7 100644
--- a/src/components/routes/task/components/sidebar-component/SideBar.tsx
+++ b/src/components/routes/task/components/sidebar-component/SideBar.tsx
@@ -316,7 +316,9 @@ const SideBar = ({
                                         dayId={day.id}
                                         dayNumber={day.day_number}
                                         thumbnailUrl={day.thumbnail_url}
-                                        shareableImageUrl={day.shareable_image_url}
+                                        shareableImageUrl={
+                                          day.shareable_image_url
+                                        }
                                         isEditable={isEditable}
                                       />
                                     </Pecha.DropdownMenuItem>
diff --git a/src/components/routes/task/components/view/NotificationForm.test.tsx b/src/components/routes/task/components/view/NotificationForm.test.tsx
index c771e19d..6d930e7b 100644
--- a/src/components/routes/task/components/view/NotificationForm.test.tsx
+++ b/src/components/routes/task/components/view/NotificationForm.test.tsx
@@ -296,7 +296,9 @@ describe("NotificationForm Component", () => {
       );
 
       await waitFor(() => {
-        const planRadio = screen.getByRole("radio", { name: /use plan cover/i });
+        const planRadio = screen.getByRole("radio", {
+          name: /use plan cover/i,
+        });
         fireEvent.click(planRadio);
         expect(planRadio).toBeChecked();
       });
@@ -594,9 +596,12 @@ describe("NotificationForm Component", () => {
       });
 
       await waitFor(() => {
-        expect(toast.error).toHaveBeenCalledWith("Failed to save notification", {
-          description: "Network error",
-        });
+        expect(toast.error).toHaveBeenCalledWith(
+          "Failed to save notification",
+          {
+            description: "Network error",
+          },
+        );
       });
     });
   });
@@ -720,7 +725,9 @@ describe("NotificationForm Component", () => {
       );
 
       await waitFor(() => {
-        const planRadio = screen.getByRole("radio", { name: /use plan cover/i });
+        const planRadio = screen.getByRole("radio", {
+          name: /use plan cover/i,
+        });
         fireEvent.click(planRadio);
 
         const titleInput = screen.getByLabelText("Title");
@@ -820,7 +827,9 @@ describe("NotificationForm Component", () => {
       );
 
       await waitFor(() => {
-        const planRadio = screen.getByRole("radio", { name: /use plan cover/i });
+        const planRadio = screen.getByRole("radio", {
+          name: /use plan cover/i,
+        });
         expect(planRadio).toBeChecked();
       });
     });
diff --git a/src/components/routes/task/components/view/NotificationForm.tsx b/src/components/routes/task/components/view/NotificationForm.tsx
index a74073f9..fd907f60 100644
--- a/src/components/routes/task/components/view/NotificationForm.tsx
+++ b/src/components/routes/task/components/view/NotificationForm.tsx
@@ -130,7 +130,9 @@ export const NotificationForm = ({
 
     const fileSizeMB = file.size / (1024 * 1024);
     if (fileSizeMB > 5) {
-      toast.error("File size exceeds 5MB limit. Please select a smaller image.");
+      toast.error(
+        "File size exceeds 5MB limit. Please select a smaller image.",
+      );
       return;
     }
 
@@ -183,8 +185,6 @@ export const NotificationForm = ({
   return (
     <div className="w-full my-4 h-[calc(100vh-40px)] bg-[#F5F5F5] dark:bg-[#181818] rounded-l-2xl border border-dashed overflow-y-auto">
       <div className="p-4">
-
-
         <Pecha.Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
             <Pecha.FormField
diff --git a/src/components/routes/task/components/view/TaskForm.test.tsx b/src/components/routes/task/components/view/TaskForm.test.tsx
index 34090439..0eb6cdd2 100644
--- a/src/components/routes/task/components/view/TaskForm.test.tsx
+++ b/src/components/routes/task/components/view/TaskForm.test.tsx
@@ -223,7 +223,7 @@ describe("TaskForm Component", () => {
 
   it("renders task form with title input", async () => {
     renderWithProviders(<TaskForm selectedDay={1} onCancel={mockOnCancel} />);
-    expect(screen.getByText("Add Task")).toBeInTheDocument();
+    expect(screen.getAllByText("Add Task").length).toBeGreaterThan(0);
     expect(screen.getByPlaceholderText("Task Title")).toBeInTheDocument();
   });
 
diff --git a/src/components/routes/task/components/view/TaskForm.tsx b/src/components/routes/task/components/view/TaskForm.tsx
index 34f82efd..1dd3c6bd 100644
--- a/src/components/routes/task/components/view/TaskForm.tsx
+++ b/src/components/routes/task/components/view/TaskForm.tsx
@@ -394,88 +394,93 @@ const TaskForm = ({
             {isEditMode ? "Edit Task" : "Add Task"}
           </h2>
 
-      <Pecha.Form {...form}>
-        <form className="space-y-6" onSubmit={form.handleSubmit(onSubmit)}>
-          <div className="flex w-full p-4 lg:w-2/3 justify-between items-center gap-4">
-            <TaskTitleField
-              isEditMode={isEditMode}
-              isTitleEditing={isTitleEditing}
-              formValue={formValues.title}
-              control={form.control}
-              onEdit={() => isEditable && setIsTitleEditing(true)}
-              onSave={handleSaveTitle}
-              onCancel={() => setIsTitleEditing(false)}
-              disabled={!isEditable}
-            />
-            {isEditMode && (
-              <DaySelector selectedDay={selectedDay} taskId={editingTask?.id} />
-            )}
-          </div>
-
-          <div className="border-b w-full border-dashed border-gray-300 dark:border-input" />
-          <div className=" px-4 flex items-center">
-            <h2 className="text-xl font-semibold">Add Subtask</h2>
-          </div>
-
-          {subTasks.length > 0 && (
-            <div className="space-y-4 p-4 w-full lg:w-2/3">
-              {subTasks.map((subTask, index) => (
-                <SubTaskCard
-                  key={index}
-                  subTask={subTask}
-                  index={index}
-                  onUpdate={updateSubTask}
-                  onRemove={removeSubTask}
-                  onImageUpload={handleSubTaskImageUpload}
-                  onRemoveImage={handleRemoveSubTaskImage}
-                  dayAudioUrl={currentDayData?.audio_url}
-                  dayAudioDurationMs={currentDayData?.audio_duration_ms}
-                  planLanguage={currentPlan?.language}
-                  taskId={editingTask?.id}
+          <Pecha.Form {...form}>
+            <form className="space-y-6" onSubmit={form.handleSubmit(onSubmit)}>
+              <div className="flex w-full p-4 lg:w-2/3 justify-between items-center gap-4">
+                <TaskTitleField
+                  isEditMode={isEditMode}
+                  isTitleEditing={isTitleEditing}
+                  formValue={formValues.title}
+                  control={form.control}
+                  onEdit={() => isEditable && setIsTitleEditing(true)}
+                  onSave={handleSaveTitle}
+                  onCancel={() => setIsTitleEditing(false)}
+                  disabled={!isEditable}
                 />
-              ))}
-            </div>
-          )}
-          {imageUploadError && (
-            <div className="text-red-500 text-sm ml-4">{imageUploadError}</div>
-          )}
-          {isEditable && (
-            <ContentTypeSelector onSelectType={handleAddSubTask} />
-          )}
-
-          <div className="p-4 flex gap-3">
-            <Activity mode={isEditMode ? "visible" : "hidden"}>
-              <Pecha.Button
-                variant="outline"
-                type="button"
-                onClick={() => clearFormData()}
-              >
-                Cancel
-              </Pecha.Button>
-            </Activity>
-
-            <Pecha.Button
-              variant="destructive"
-              className="cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
-              type="submit"
-              disabled={
-                !isEditable ||
-                createTaskMutation.isPending ||
-                updateTaskMutation.isPending ||
-                subTasks.length === 0
-              }
-            >
-              {createTaskMutation.isPending || updateTaskMutation.isPending
-                ? isEditMode
-                  ? "Updating..."
-                  : "Creating..."
-                : isEditMode
-                  ? "Update"
-                  : "Submit"}
-            </Pecha.Button>
-          </div>
-        </form>
-      </Pecha.Form>
+                {isEditMode && (
+                  <DaySelector
+                    selectedDay={selectedDay}
+                    taskId={editingTask?.id}
+                  />
+                )}
+              </div>
+
+              <div className="border-b w-full border-dashed border-gray-300 dark:border-input" />
+              <div className=" px-4 flex items-center">
+                <h2 className="text-xl font-semibold">Add Subtask</h2>
+              </div>
+
+              {subTasks.length > 0 && (
+                <div className="space-y-4 p-4 w-full lg:w-2/3">
+                  {subTasks.map((subTask, index) => (
+                    <SubTaskCard
+                      key={index}
+                      subTask={subTask}
+                      index={index}
+                      onUpdate={updateSubTask}
+                      onRemove={removeSubTask}
+                      onImageUpload={handleSubTaskImageUpload}
+                      onRemoveImage={handleRemoveSubTaskImage}
+                      dayAudioUrl={currentDayData?.audio_url}
+                      dayAudioDurationMs={currentDayData?.audio_duration_ms}
+                      planLanguage={currentPlan?.language}
+                      taskId={editingTask?.id}
+                    />
+                  ))}
+                </div>
+              )}
+              {imageUploadError && (
+                <div className="text-red-500 text-sm ml-4">
+                  {imageUploadError}
+                </div>
+              )}
+              {isEditable && (
+                <ContentTypeSelector onSelectType={handleAddSubTask} />
+              )}
+
+              <div className="p-4 flex gap-3">
+                <Activity mode={isEditMode ? "visible" : "hidden"}>
+                  <Pecha.Button
+                    variant="outline"
+                    type="button"
+                    onClick={() => clearFormData()}
+                  >
+                    Cancel
+                  </Pecha.Button>
+                </Activity>
+
+                <Pecha.Button
+                  variant="destructive"
+                  className="cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+                  type="submit"
+                  disabled={
+                    !isEditable ||
+                    createTaskMutation.isPending ||
+                    updateTaskMutation.isPending ||
+                    subTasks.length === 0
+                  }
+                >
+                  {createTaskMutation.isPending || updateTaskMutation.isPending
+                    ? isEditMode
+                      ? "Updating..."
+                      : "Creating..."
+                    : isEditMode
+                      ? "Update"
+                      : "Submit"}
+                </Pecha.Button>
+              </div>
+            </form>
+          </Pecha.Form>
         </div>
       )}
     </div>
diff --git a/src/components/routes/verse-of-day/VerseOfDay.tsx b/src/components/routes/verse-of-day/VerseOfDay.tsx
index 1439423b..f186eb88 100644
--- a/src/components/routes/verse-of-day/VerseOfDay.tsx
+++ b/src/components/routes/verse-of-day/VerseOfDay.tsx
@@ -28,11 +28,7 @@ const VerseOfDay = () => {
 
   const queryClient = useQueryClient();
 
-  const {
-    data,
-    isLoading,
-    error,
-  } = useQuery({
+  const { data, isLoading, error } = useQuery({
     queryKey: ["verse-of-day-list", currentPage, debouncedSearch],
     queryFn: fetchVerseOfDayList,
     refetchOnWindowFocus: false,
@@ -78,7 +74,8 @@ const VerseOfDay = () => {
       )
     : [];
 
-  const totalPages = sortedVerses.length > 0 ? Math.ceil(sortedVerses.length / PAGE_SIZE) : 1;
+  const totalPages =
+    sortedVerses.length > 0 ? Math.ceil(sortedVerses.length / PAGE_SIZE) : 1;
 
   return (
     <div className="flex flex-col h-screen overflow-hidden bg-[#F5F5F5] dark:bg-[#181818] font-dynamic">
diff --git a/src/components/routes/verse-of-day/VerseOfDayForm.tsx b/src/components/routes/verse-of-day/VerseOfDayForm.tsx
index 3ecfe0f1..e4347f48 100644
--- a/src/components/routes/verse-of-day/VerseOfDayForm.tsx
+++ b/src/components/routes/verse-of-day/VerseOfDayForm.tsx
@@ -135,7 +135,14 @@ const VerseOfDayForm = ({
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
 
-    if (!verses.en.trim() && !verses.bo.trim() && !verses.zh.trim() && !verses.hi.trim() && !verses.ne.trim() && !verses.mn.trim()) {
+    if (
+      !verses.en.trim() &&
+      !verses.bo.trim() &&
+      !verses.zh.trim() &&
+      !verses.hi.trim() &&
+      !verses.ne.trim() &&
+      !verses.mn.trim()
+    ) {
       toast.error("At least one verse content is required");
       return;
     }
@@ -161,7 +168,9 @@ const VerseOfDayForm = ({
     });
 
     if (isDuplicateDate) {
-      toast.error(`A verse already exists for ${format(date, "PPP")}. Please choose a different date.`);
+      toast.error(
+        `A verse already exists for ${format(date, "PPP")}. Please choose a different date.`,
+      );
       return;
     }
 
@@ -192,7 +201,12 @@ const VerseOfDayForm = ({
 
       // Only include group_id if it's a valid UUID
       const trimmedGroupId = String(groupId).trim();
-      if (trimmedGroupId && trimmedGroupId.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i)) {
+      if (
+        trimmedGroupId &&
+        trimmedGroupId.match(
+          /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i,
+        )
+      ) {
         updatePayload.group_id = trimmedGroupId;
       }
 
@@ -396,7 +410,10 @@ const GroupSelectField = ({ groupId, setGroupId }: GroupSelectFieldProps) => {
             <FaChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
           </Button>
         </Pecha.PopoverTrigger>
-        <Pecha.PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start">
+        <Pecha.PopoverContent
+          className="w-[--radix-popover-trigger-width] p-0"
+          align="start"
+        >
           <Pecha.Command>
             <Pecha.CommandInput placeholder="Search groups..." />
             <Pecha.CommandList>
diff --git a/src/components/routes/verse-of-day/VerseOfDayList.tsx b/src/components/routes/verse-of-day/VerseOfDayList.tsx
index 6e550d65..715d1cf4 100644
--- a/src/components/routes/verse-of-day/VerseOfDayList.tsx
+++ b/src/components/routes/verse-of-day/VerseOfDayList.tsx
@@ -1,10 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { Pecha } from "@/components/ui/shadimport";
 import { Button } from "@/components/ui/atoms/button";
-import {
-  fetchVerseOfDayList,
-  type VerseOfDayItem,
-} from "./api/verseOfDayApi";
+import { fetchVerseOfDayList, type VerseOfDayItem } from "./api/verseOfDayApi";
 import { format } from "date-fns";
 
 interface VerseOfDayListProps {
@@ -13,7 +10,6 @@ interface VerseOfDayListProps {
 }
 
 const VerseOfDayList = ({ onEdit, onDelete }: VerseOfDayListProps) => {
-
   const { data, isLoading } = useQuery({
     queryKey: ["verse-of-day-list"],
     queryFn: fetchVerseOfDayList,
@@ -50,7 +46,9 @@ const VerseOfDayList = ({ onEdit, onDelete }: VerseOfDayListProps) => {
             <Pecha.TableHead className="w-[100px]">Image</Pecha.TableHead>
             <Pecha.TableHead className="w-[120px]">Date</Pecha.TableHead>
             <Pecha.TableHead className="w-[150px]">Group</Pecha.TableHead>
-            <Pecha.TableHead className="w-[180px] text-right">Actions</Pecha.TableHead>
+            <Pecha.TableHead className="w-[180px] text-right">
+              Actions
+            </Pecha.TableHead>
           </Pecha.TableRow>
         </Pecha.TableHeader>
         <Pecha.TableBody>
@@ -58,7 +56,9 @@ const VerseOfDayList = ({ onEdit, onDelete }: VerseOfDayListProps) => {
             <Pecha.TableRow key={verse.id}>
               <Pecha.TableCell className="max-w-[400px]">
                 <p className="text-sm line-clamp-2">
-                  {verse.verses.en || <span className="text-muted-foreground">—</span>}
+                  {verse.verses.en || (
+                    <span className="text-muted-foreground">—</span>
+                  )}
                 </p>
               </Pecha.TableCell>
               <Pecha.TableCell>
@@ -68,12 +68,16 @@ const VerseOfDayList = ({ onEdit, onDelete }: VerseOfDayListProps) => {
                     alt="Verse"
                     className="h-12 w-12 rounded object-cover"
                     onError={(e) => {
-                      (e.target as HTMLImageElement).style.display = 'none';
-                      (e.target as HTMLImageElement).nextElementSibling?.classList.remove('hidden');
+                      (e.target as HTMLImageElement).style.display = "none";
+                      (
+                        e.target as HTMLImageElement
+                      ).nextElementSibling?.classList.remove("hidden");
                     }}
                   />
                 ) : null}
-                <div className={`h-12 w-12 rounded bg-muted ${verse.image_url ? 'hidden' : ''}`} />
+                <div
+                  className={`h-12 w-12 rounded bg-muted ${verse.image_url ? "hidden" : ""}`}
+                />
               </Pecha.TableCell>
               <Pecha.TableCell className="whitespace-nowrap">
                 {format(new Date(verse.date), "MMM dd, yyyy")}
diff --git a/src/components/routes/verse-of-day/api/verseOfDayApi.ts b/src/components/routes/verse-of-day/api/verseOfDayApi.ts
index e4eb5176..c3f10391 100644
--- a/src/components/routes/verse-of-day/api/verseOfDayApi.ts
+++ b/src/components/routes/verse-of-day/api/verseOfDayApi.ts
@@ -61,15 +61,16 @@ const getAuthHeaders = () => ({
   Authorization: `Bearer ${sessionStorage.getItem("accessToken")}`,
 });
 
-export const fetchVerseOfDayList = async (): Promise<VerseOfDayListResponse> => {
-  const { data } = await axiosInstance.get<VerseOfDayListResponse>(
-    `/api/v1/cms/verse-of-day`,
-    {
-      headers: getAuthHeaders(),
-    },
-  );
-  return data;
-};
+export const fetchVerseOfDayList =
+  async (): Promise<VerseOfDayListResponse> => {
+    const { data } = await axiosInstance.get<VerseOfDayListResponse>(
+      `/api/v1/cms/verse-of-day`,
+      {
+        headers: getAuthHeaders(),
+      },
+    );
+    return data;
+  };
 
 export const createVerseOfDay = async (
   payload: VerseOfDayPayload,
diff --git a/src/components/ui/molecules/day-shareable-images/DayShareableImageUpload.tsx b/src/components/ui/molecules/day-shareable-images/DayShareableImageUpload.tsx
index 7a6143ed..359b7715 100644
--- a/src/components/ui/molecules/day-shareable-images/DayShareableImageUpload.tsx
+++ b/src/components/ui/molecules/day-shareable-images/DayShareableImageUpload.tsx
@@ -51,8 +51,7 @@ const DayShareableImageUpload = ({
     queryClient.invalidateQueries({ queryKey: ["planDetails", planId] });
 
   const uploadMutation = useMutation({
-    mutationFn: (file: File) =>
-      uploadDayShareableImage(dayId, imageType, file),
+    mutationFn: (file: File) => uploadDayShareableImage(dayId, imageType, file),
     onSuccess: () => {
       setPendingFile(null);
       toast.success(`${label} uploaded`);
diff --git a/src/schema/SeriesSchema.ts b/src/schema/SeriesSchema.ts
index 59027100..50c1d1c3 100644
--- a/src/schema/SeriesSchema.ts
+++ b/src/schema/SeriesSchema.ts
@@ -1,7 +1,14 @@
 import { z } from "zod";
 import { PLAN_LANGUAGE } from "@/lib/constant";
 
-const LANGUAGE_CODES = PLAN_LANGUAGE.map((l) => l.value) as ["EN", "BO", "ZH", "HI", "NE", "MN"];
+const LANGUAGE_CODES = PLAN_LANGUAGE.map((l) => l.value) as [
+  "EN",
+  "BO",
+  "ZH",
+  "HI",
+  "NE",
+  "MN",
+];
 export type LanguageCode = (typeof LANGUAGE_CODES)[number];
 
 export const languageBlockSchema = z.object({
diff --git a/src/test/setup.ts b/src/test/setup.ts
index 02d5d9db..6470342b 100644
--- a/src/test/setup.ts
+++ b/src/test/setup.ts
@@ -1,5 +1,10 @@
 import "@testing-library/jest-dom";
-import { vi } from "vitest";
+import { afterEach, vi } from "vitest";
+
+afterEach(() => {
+  document.body.removeAttribute("data-scroll-locked");
+  document.body.style.pointerEvents = "";
+});
 
 vi.mock("@/config/auth-context", () => ({
   useAuth: () => ({
@@ -23,6 +28,10 @@ vi.mock("@tolgee/react", () => ({
   useTranslate: () => ({
     t: (key: string) => key,
   }),
+  useTolgee: () => ({
+    getLanguage: () => "en",
+    changeLanguage: vi.fn(),
+  }),
 }));
 
 vi.mock("@/hooks/useUserInfo", () => ({
@@ -50,8 +59,8 @@ Object.defineProperty(global, "URL", {
   writable: true,
 });
 
-global.ResizeObserver = vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}));
+global.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};