diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
index 1b42417..496ff3f 100644
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@@ -36,6 +36,7 @@ jobs:
           lower_owner=$(echo "${{ github.repository_owner }}" | tr '[:upper:]' '[:lower:]')
           docker build \
             --build-arg VITE_ENV_SALT=${{ secrets.VITE_ENV_SALT }} \
+            --build-arg VITE_YOUTUBE_API_KEY=${{ secrets.VITE_YOUTUBE_API_KEY }} \
             -t ghcr.io/$lower_owner/plan_frontend:${{ env.IMAGE_TAG }} .
 
       - name: Push Docker image to GHCR
diff --git a/Dockerfile b/Dockerfile
index f74ffc6..a141a16 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -11,7 +11,9 @@ RUN npm install
 
 COPY . .
 ARG VITE_ENV_SALT
+ARG VITE_YOUTUBE_API_KEY
 ENV VITE_ENV_SALT=${VITE_ENV_SALT}
+ENV VITE_YOUTUBE_API_KEY=${VITE_YOUTUBE_API_KEY}
 RUN npm run build
 
 FROM nginx:stable-alpine
@@ -31,4 +33,4 @@ COPY nginx/security-headers.conf /etc/nginx/
 
 EXPOSE 4173
 
-CMD ["sh", "-c", "envsubst '${VITE_BACKEND_BASE_URL}' < /etc/nginx/conf.d/studio.conf.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"]
+CMD ["sh", "-c", "envsubst '${VITE_BACKEND_BASE_URL} ${VITE_YOUTUBE_API_KEY}' < /etc/nginx/conf.d/studio.conf.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"]
diff --git a/package-lock.json b/package-lock.json
index 40fb854..8ae32d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "pechastudio",
-  "version": "2025.10.22.0628",
+  "version": "2025.11.05.0657",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pechastudio",
-      "version": "2025.10.22.0628",
+      "version": "2025.11.05.0657",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/modifiers": "^9.0.0",
diff --git a/src/components/api/searchApi.ts b/src/components/api/searchApi.ts
new file mode 100644
index 0000000..9ce325e
--- /dev/null
+++ b/src/components/api/searchApi.ts
@@ -0,0 +1,47 @@
+import axiosInstance from "@/config/axios-config";
+import { LANGUAGE } from "@/lib/constant";
+
+type SearchCommon = {
+  query: string;
+  language?: string;
+  limit?: number;
+  skip?: number;
+};
+
+const normalizeLanguageForApi = (language?: string | null) => {
+  if (!language) return "en";
+  const lower = language.toLowerCase();
+  if (lower.startsWith("en")) return "en";
+  if (lower.startsWith("bo")) return "bo";
+  if (lower.startsWith("zh")) return "zh";
+  return "en";
+};
+
+const pickSearchLanguage = (query: string, uiLanguage?: string | null) => {
+  const normalized = normalizeLanguageForApi(uiLanguage);
+  if (/[A-Za-z]/.test(query) && normalized !== "en") {
+    return "en";
+  }
+  return normalized;
+};
+
+export const searchSources = async ({
+  query,
+  language = localStorage.getItem(LANGUAGE) || "en",
+  limit = 10,
+  skip = 0,
+}: SearchCommon) => {
+  const lang = pickSearchLanguage(query, language);
+  const { data } = await axiosInstance.get(`/api/v1/search/multilingual`, {
+    params: {
+      query,
+      search_type: "exact",
+      language: lang,
+      limit,
+      skip,
+    },
+  });
+  return data;
+};
+
+export type { SearchCommon };
diff --git a/src/components/auth/login/Login.tsx b/src/components/auth/login/Login.tsx
index c2947c9..6f1d2c1 100644
--- a/src/components/auth/login/Login.tsx
+++ b/src/components/auth/login/Login.tsx
@@ -17,7 +17,6 @@ const Login = () => {
   const { t } = useTranslate();
   const navigate = useNavigate();
   const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
   const [errors, setErrors] = useState<string>("");
   const [successMessage, setSuccessMessage] = useState<string>("");
   const [showEmailReverify, setShowEmailReverify] = useState<boolean>(false);
@@ -69,10 +68,12 @@ const Login = () => {
     },
   });
 
-  const handleLogin = (e: React.FormEvent) => {
+  const handleLogin = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setShowEmailReverify(false);
     setSuccessMessage("");
+    const formData = new FormData(e.currentTarget);
+    const password = formData.get("password") as string;
     const clientPassword = createPasswordHash(email, password);
     loginMutation.mutate({
       email,
@@ -111,13 +112,10 @@ const Login = () => {
           </Label>
           <Input
             type="password"
+            name="password"
             placeholder={t("studio.login.placeholder.password")}
             className=" placeholder:text-[#b1b1b1]"
             required
-            value={password}
-            onChange={(e) => {
-              setPassword(e.target.value);
-            }}
           />
         </div>
         <div className="flex mt-4 justify-center ">
diff --git a/src/components/auth/reset-password/ResetPassword.test.tsx b/src/components/auth/reset-password/ResetPassword.test.tsx
index d43b0e0..7e19ea4 100644
--- a/src/components/auth/reset-password/ResetPassword.test.tsx
+++ b/src/components/auth/reset-password/ResetPassword.test.tsx
@@ -153,11 +153,7 @@ describe("ResetPassword Component", () => {
         {
           password:
             "4c2417eef23ec7fb1bd8d74eb29afe5f0867a4ddbdb707ada89d1cf91f0e6e1d",
-        },
-        {
-          headers: {
-            Authorization: "Bearer test-token",
-          },
+          token: "test-token",
         },
       );
     });
diff --git a/src/components/routes/create-plan/CreatePlan.test.tsx b/src/components/routes/create-plan/CreatePlan.test.tsx
index dd674d7..a21c881 100644
--- a/src/components/routes/create-plan/CreatePlan.test.tsx
+++ b/src/components/routes/create-plan/CreatePlan.test.tsx
@@ -70,8 +70,14 @@ describe("CreatePlan Component", () => {
       if (url.includes("/media/upload")) {
         return Promise.resolve({
           data: {
-            url: "mock-image-url",
+            image: {
+              thumbnail: "mock-thumb-url",
+              medium: "mock-medium-url",
+              original: "mock-image-url",
+            },
             key: "mock-image-key",
+            path: "images/path",
+            message: "Image uploaded successfully",
           },
         });
       }
@@ -376,47 +382,4 @@ describe("CreatePlan Component", () => {
     fireEvent.click(confirmButton);
     expect(mockBlocker.proceed).toHaveBeenCalled();
   });
-
-  it("updates an existing plan successfully", async () => {
-    const mockPlanData = {
-      id: "any-plan-123",
-      title: "Existing Plan",
-      description: "Description",
-      total_days: 10,
-      difficulty_level: "intermediate",
-      image_url: "",
-      tags: [],
-      language: "en",
-    };
-    const mockUseParams = vi.fn().mockReturnValue({ plan_id: "any-plan-123" });
-    vi.mocked(useParams).mockImplementation(mockUseParams);
-    vi.spyOn(axiosInstance, "get").mockResolvedValue({
-      data: mockPlanData,
-    });
-    vi.spyOn(axiosInstance, "put").mockResolvedValue({
-      data: { ...mockPlanData, title: "Updated Plan" },
-    });
-    renderWithProviders(<CreatePlan />);
-    await waitFor(() => {
-      const titleInput = screen.getByPlaceholderText(
-        "studio.plan.form.placeholder.title",
-      ) as HTMLInputElement;
-      expect(titleInput.value).toBe("Existing Plan");
-    });
-    const titleInput = screen.getByPlaceholderText(
-      "studio.plan.form.placeholder.title",
-    );
-    fireEvent.change(titleInput, { target: { value: "Updated Plan" } });
-    const submitButton = screen.getByText("studio.plan.update_button");
-    fireEvent.click(submitButton);
-    await waitFor(() => {
-      expect(axiosInstance.put).toHaveBeenCalledWith(
-        expect.stringContaining("/api/v1/cms/plans/any-plan-123"),
-        expect.objectContaining({
-          title: "Updated Plan",
-        }),
-        expect.any(Object),
-      );
-    });
-  });
 });
diff --git a/src/components/routes/create-plan/CreatePlan.tsx b/src/components/routes/create-plan/CreatePlan.tsx
index 021622b..44d32d6 100644
--- a/src/components/routes/create-plan/CreatePlan.tsx
+++ b/src/components/routes/create-plan/CreatePlan.tsx
@@ -162,11 +162,11 @@ const Createplan = () => {
   };
   const handleImageUpload = async (file: File) => {
     try {
-      const { url, key } = await uploadImageToS3(
+      const { image, key } = await uploadImageToS3(
         file,
         plan_id === "new" ? "" : plan_id || "",
       );
-      const imageUrl = url;
+      const imageUrl = image.original;
       const imageKey = key;
       setImagePreview(imageUrl);
       setSelectedImage(file);
diff --git a/src/components/routes/dashboard/Dashboard.test.tsx b/src/components/routes/dashboard/Dashboard.test.tsx
index 4f131cf..e5a4677 100644
--- a/src/components/routes/dashboard/Dashboard.test.tsx
+++ b/src/components/routes/dashboard/Dashboard.test.tsx
@@ -93,15 +93,6 @@ describe("Dashboard Component", () => {
     expect(coverImageHeader.tagName).toBe("TH");
   });
 
-  it("renders pagination navigation", () => {
-    renderWithProviders(<Dashboard />);
-
-    const paginationNav = screen.getByRole("navigation", {
-      name: "pagination",
-    });
-    expect(paginationNav).toBeDefined();
-  });
-
   it("fetches plans correctly and returns the correct data", async () => {
     vi.spyOn(axiosInstance, "get").mockResolvedValue({
       data: { plans: [], total: 0 },
diff --git a/src/components/routes/dashboard/Dashboard.tsx b/src/components/routes/dashboard/Dashboard.tsx
index e44cba5..3fa2a47 100644
--- a/src/components/routes/dashboard/Dashboard.tsx
+++ b/src/components/routes/dashboard/Dashboard.tsx
@@ -5,11 +5,12 @@ import { useState, Activity } from "react";
 import { useDebounce } from "use-debounce";
 import { useTranslate } from "@tolgee/react";
 import { Button } from "@/components/ui/atoms/button";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import axiosInstance from "@/config/axios-config";
 import { Link } from "react-router-dom";
 import { Pagination } from "@/components/ui/molecules/pagination/Pagination";
 import AuthButton from "@/components/ui/molecules/auth-button/AuthButton";
+import { toast } from "sonner";
 
 const fetchPlans = async (
   page: number,
@@ -35,6 +36,19 @@ const fetchPlans = async (
   return data;
 };
 
+const toggleFeatured = async (planId: string) => {
+  const accessToken = sessionStorage.getItem("accessToken");
+  const { data } = await axiosInstance.patch(
+    `/api/v1/cms/plans/${planId}/featured`,
+    {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    },
+  );
+  return data;
+};
+
 const Dashboard = () => {
   const { t } = useTranslate();
   const [search, setSearch] = useState("");
@@ -51,6 +65,7 @@ const Dashboard = () => {
       setSortOrder("asc");
     }
   };
+
   const {
     data: planData,
     isLoading,
@@ -69,6 +84,21 @@ const Dashboard = () => {
     retry: false,
   });
 
+  const queryClient = useQueryClient();
+  const featuredMutation = useMutation({
+    mutationFn: (planId: string) => toggleFeatured(planId),
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["dashboard-plans"] });
+    },
+    onError: (error: any) => {
+      toast.error(error.response.data.detail.message);
+    },
+  });
+
+  const handleFeatured = (planId: string) => {
+    featuredMutation.mutate(planId);
+  };
+
   const totalPages = planData ? Math.ceil(planData.total / 10) : 1;
 
   return (
@@ -102,6 +132,7 @@ const Dashboard = () => {
           sortBy={sortBy}
           sortOrder={sortOrder}
           onSort={handleSort}
+          handleFeatured={handleFeatured}
         />
       </div>
       <Activity mode={planData?.plans?.length > 0 ? "visible" : "hidden"}>
diff --git a/src/components/routes/task/PlanDetailsPage.test.tsx b/src/components/routes/task/PlanDetailsPage.test.tsx
index 8e684a3..20e310c 100644
--- a/src/components/routes/task/PlanDetailsPage.test.tsx
+++ b/src/components/routes/task/PlanDetailsPage.test.tsx
@@ -93,12 +93,16 @@ Object.defineProperty(window, "sessionStorage", {
   writable: true,
 });
 
-const renderWithProviders = (component: React.ReactElement) => {
+const renderWithProviders = (component: React.ReactElement, isDraft = true) => {
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: { retry: false },
     },
   });
+  queryClient.setQueryData(["planDetails", "test-plan-id"], {
+    ...mockPlanData,
+    status: isDraft ? "DRAFT" : "ARCHIVED",
+  });
   return render(
     <QueryClientProvider client={queryClient}>
       <BrowserRouter>{component}</BrowserRouter>
@@ -149,7 +153,7 @@ describe("PlanDetailsPanel Component", () => {
   it("calls API when Add New Day button is clicked", async () => {
     const { default: axiosInstance } = await import("@/config/axios-config");
     const mockAxios = axiosInstance as any;
-    renderWithProviders(<PlanDetailsPage />);
+    renderWithProviders(<PlanDetailsPage />, true);
     await waitFor(() => {
       expect(screen.getByText("Day 4")).toBeInTheDocument();
     });
@@ -175,7 +179,7 @@ describe("PlanDetailsPanel Component", () => {
     mockAxios.post.mockRejectedValueOnce({
       response: { data: { detail: "Cannot create day" } },
     });
-    renderWithProviders(<PlanDetailsPage />);
+    renderWithProviders(<PlanDetailsPage />, true);
     await waitFor(() => {
       expect(screen.getByText("Day 4")).toBeInTheDocument();
     });
@@ -196,23 +200,15 @@ describe("PlanDetailsPanel Component", () => {
     expect(screen.getByPlaceholderText("Task Title")).toBeInTheDocument();
   });
 
-  it("switches to task view after creating a new task", async () => {
+  it("switches to task view after clicking a task", async () => {
     const { default: axiosInstance } = await import("@/config/axios-config");
     const mockAxios = axiosInstance as any;
-    mockAxios.post.mockResolvedValueOnce({
-      data: {
-        id: "newly-created-task-123",
-        title: "New Task",
-        display_order: 1,
-        estimated_time: 30,
-      },
-    });
     mockAxios.get.mockImplementation((url: string) => {
-      if (url.includes("/tasks/newly-created-task-123")) {
+      if (url.includes("/tasks/task1")) {
         return Promise.resolve({
           data: {
-            id: "newly-created-task-123",
-            title: "New Task",
+            id: "task1",
+            title: "Morning Intention Setting",
             display_order: 1,
             estimated_time: 30,
             subtasks: [],
@@ -221,19 +217,17 @@ describe("PlanDetailsPanel Component", () => {
       }
       return Promise.resolve({ data: mockPlanData });
     });
-    renderWithProviders(<PlanDetailsPage />);
+    renderWithProviders(<PlanDetailsPage />, true);
     await waitFor(() => {
       expect(screen.getByText(mockPlanData.title)).toBeInTheDocument();
     });
-    const titleInput = screen.getByPlaceholderText("Task Title");
-    fireEvent.change(titleInput, { target: { value: "New Task" } });
-    fireEvent.click(screen.getByText("Submit"));
+    expect(screen.getByText("Add Task")).toBeInTheDocument();
+    fireEvent.click(screen.getByText("Morning Intention Setting"));
     await waitFor(() => {
       expect(screen.queryByText("Add Task")).not.toBeInTheDocument();
     });
     await waitFor(() => {
       expect(screen.getByText("Task")).toBeInTheDocument();
-      expect(screen.getByText("New Task")).toBeInTheDocument();
     });
   });
 });
diff --git a/src/components/routes/task/PlanDetailsPage.tsx b/src/components/routes/task/PlanDetailsPage.tsx
index abf75e0..2cff727 100644
--- a/src/components/routes/task/PlanDetailsPage.tsx
+++ b/src/components/routes/task/PlanDetailsPage.tsx
@@ -1,12 +1,25 @@
 import { useState } from "react";
+import { useParams } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
 import TaskForm from "./components/view/TaskForm";
 import SideBar from "./components/sidebar-component/SideBar";
 import TaskView from "./components/view/TaskView";
+import { fetchPlanDetails } from "./api/planApi";
 
 const PlanDetailsPage = () => {
   const [selectedDay, setSelectedDay] = useState<number>(1);
   const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
   const [editingTask, setEditingTask] = useState<any>(null);
+  const { plan_id } = useParams<{ plan_id: string }>();
+
+  const { data: planDetails } = useQuery({
+    queryKey: ["planDetails", plan_id],
+    queryFn: () => fetchPlanDetails(plan_id!),
+    enabled: !!plan_id,
+  });
+
+  const status = planDetails?.status || "DRAFT";
+  const isDraft = status === "DRAFT";
 
   const handleDaySelect = (dayNumber: number) => {
     setSelectedDay(dayNumber);
@@ -15,6 +28,9 @@ const PlanDetailsPage = () => {
   };
 
   const handleEditTask = (task: any) => {
+    if (!isDraft) {
+      return;
+    }
     setEditingTask(task);
     setSelectedTaskId(null);
   };
@@ -44,15 +60,21 @@ const PlanDetailsPage = () => {
           setSelectedTaskId(taskId);
         }}
         onTaskDelete={handleTaskDelete}
+        isDraft={isDraft}
       />
       <div className=" w-full pl-4 rounded-l-2xl overflow-y-auto">
         {selectedTaskId ? (
-          <TaskView taskId={selectedTaskId} onEditTask={handleEditTask} />
+          <TaskView
+            taskId={selectedTaskId}
+            onEditTask={handleEditTask}
+            isDraft={isDraft}
+          />
         ) : (
           <TaskForm
             selectedDay={selectedDay}
             editingTask={editingTask}
             onCancel={handleCancelTaskForm}
+            isDraft={isDraft}
           />
         )}
       </div>
diff --git a/src/components/routes/task/api/taskApi.ts b/src/components/routes/task/api/taskApi.ts
index fe2a808..7c37ee2 100644
--- a/src/components/routes/task/api/taskApi.ts
+++ b/src/components/routes/task/api/taskApi.ts
@@ -43,6 +43,10 @@ export const createSubTasks = async (
     content: string | null;
     content_type: string;
     display_order: number;
+    duration?: string;
+    source_text_id?: string | null;
+    pecha_segment_id?: string | null;
+    segment_id?: string | null;
   }[],
 ) => {
   const { data } = await axiosInstance.post(
@@ -65,6 +69,10 @@ export const updateSubTasks = async (
     content: string | null;
     content_type: string;
     display_order: number;
+    duration?: string;
+    source_text_id?: string | null;
+    pecha_segment_id?: string | null;
+    segment_id?: string | null;
   }[],
 ) => {
   await axiosInstance.put(
diff --git a/src/components/routes/task/components/sidebar-component/SideBar.tsx b/src/components/routes/task/components/sidebar-component/SideBar.tsx
index 84a937f..d99f46e 100644
--- a/src/components/routes/task/components/sidebar-component/SideBar.tsx
+++ b/src/components/routes/task/components/sidebar-component/SideBar.tsx
@@ -19,6 +19,7 @@ interface SideBarProps {
   onDaySelect: (dayNumber: number) => void;
   onTaskClick?: (taskId: string) => void;
   onTaskDelete?: (taskId: string) => void;
+  isDraft?: boolean;
 }
 
 const SideBar = ({
@@ -26,6 +27,7 @@ const SideBar = ({
   onDaySelect,
   onTaskClick,
   onTaskDelete,
+  isDraft,
 }: SideBarProps) => {
   const [expandedDay, setExpandedDay] = useState<number>(selectedDay);
   const { plan_id } = useParams<{ plan_id: string }>();
@@ -93,10 +95,10 @@ const SideBar = ({
       <div className="flex-1">
         <div className="flex p-4 items-center border-b pb-3 gap-2 mb-1">
           <IoCalendarClearOutline className="w-5 h-5 text-foreground" />
-          <span className="text-sm  text-foreground">Days</span>
+          <span className="text-sm text-foreground">Days</span>
         </div>
 
-        <div className="space-y-1 h-[calc(100vh-200px)] overflow-auto">
+        <div className="space-y-1 h-2/3 overflow-auto">
           {isLoading ? (
             <>
               {[1, 2, 3].map((index) => (
@@ -114,6 +116,7 @@ const SideBar = ({
               onReorder={(activeId: any, overId: any) => {
                 handleDayReorder(activeId, overId);
               }}
+              disabled={!isDraft}
             >
               {displayDays.map((day: any) => (
                 <SortableItem key={day.id} id={day.id}>
@@ -126,11 +129,13 @@ const SideBar = ({
                         }}
                       >
                         <div className="flex items-center gap-3">
-                          <PiDotsSixVertical
-                            className="w-4 h-4 text-gray-400 dark:text-muted-foreground cursor-grab active:cursor-grabbing"
-                            {...listeners}
-                            onClick={(e) => e.stopPropagation()}
-                          />
+                          {isDraft && (
+                            <PiDotsSixVertical
+                              className="w-4 h-4 text-gray-400 dark:text-muted-foreground cursor-grab active:cursor-grabbing"
+                              {...listeners}
+                              onClick={(e) => e.stopPropagation()}
+                            />
+                          )}
                           <div
                             className={`w-4 h-4 rounded-full ${
                               selectedDay === day.day_number
@@ -177,12 +182,19 @@ const SideBar = ({
                               />
                             </Activity>
                             <IoMdAdd
-                              className="w-4 h-4 text-gray-400 dark:text-muted-foreground cursor-pointer"
-                              onClick={() => {
-                                handleDayClick(day.day_number);
+                              className={`w-4 h-4 text-gray-400 dark:text-muted-foreground ${
+                                isDraft
+                                  ? "cursor-pointer"
+                                  : "cursor-not-allowed opacity-50"
+                              }`}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                if (isDraft) {
+                                  handleDayClick(day.day_number);
+                                }
                               }}
                             />
-                            {currentPlan?.days.length > 1 && (
+                            {isDraft && currentPlan?.days.length > 1 && (
                               <Pecha.DropdownMenu>
                                 <Pecha.DropdownMenuTrigger asChild>
                                   <BsThreeDots className="w-3 h-3 text-gray-400 dark:text-muted-foreground cursor-pointer" />
@@ -217,6 +229,7 @@ const SideBar = ({
                             onReorder={(activeId: any, overId: any) => {
                               handleTaskReorder(activeId, overId);
                             }}
+                            disabled={!isDraft}
                           >
                             {getDisplayTasks(day).map((task: any) => (
                               <SortableItem
@@ -226,10 +239,12 @@ const SideBar = ({
                               >
                                 {({ listeners }: any) => (
                                   <>
-                                    <PiDotsSixVertical
-                                      className="w-4 h-4 text-gray-400 dark:text-muted-foreground cursor-grab active:cursor-grabbing"
-                                      {...listeners}
-                                    />
+                                    {isDraft && (
+                                      <PiDotsSixVertical
+                                        className="w-4 h-4 text-gray-400 dark:text-muted-foreground cursor-grab active:cursor-grabbing"
+                                        {...listeners}
+                                      />
+                                    )}
                                     <span
                                       className="cursor-pointer w-full"
                                       onClick={(e) => {
@@ -239,22 +254,24 @@ const SideBar = ({
                                     >
                                       {task.title}
                                     </span>
-                                    <Pecha.DropdownMenu>
-                                      <Pecha.DropdownMenuTrigger asChild>
-                                        <BsThreeDots
-                                          className="w-3 h-3 text-gray-400 dark:text-muted-foreground cursor-pointer"
-                                          onClick={(e) => e.stopPropagation()}
-                                        />
-                                      </Pecha.DropdownMenuTrigger>
-                                      <Pecha.DropdownMenuContent side="right">
-                                        <Pecha.DropdownMenuItem className="gap-2 cursor-pointer">
-                                          <TaskDeleteDialog
-                                            taskId={task.id}
-                                            onDelete={handleDeleteTask}
+                                    {isDraft && (
+                                      <Pecha.DropdownMenu>
+                                        <Pecha.DropdownMenuTrigger asChild>
+                                          <BsThreeDots
+                                            className="w-3 h-3 text-gray-400 dark:text-muted-foreground cursor-pointer"
+                                            onClick={(e) => e.stopPropagation()}
                                           />
-                                        </Pecha.DropdownMenuItem>
-                                      </Pecha.DropdownMenuContent>
-                                    </Pecha.DropdownMenu>
+                                        </Pecha.DropdownMenuTrigger>
+                                        <Pecha.DropdownMenuContent side="right">
+                                          <Pecha.DropdownMenuItem className="gap-2 cursor-pointer">
+                                            <TaskDeleteDialog
+                                              taskId={task.id}
+                                              onDelete={handleDeleteTask}
+                                            />
+                                          </Pecha.DropdownMenuItem>
+                                        </Pecha.DropdownMenuContent>
+                                      </Pecha.DropdownMenu>
+                                    )}
                                   </>
                                 )}
                               </SortableItem>
@@ -273,7 +290,7 @@ const SideBar = ({
           <Pecha.Button
             type="button"
             onClick={addNewDay}
-            disabled={createNewDay.isPending}
+            disabled={!isDraft || createNewDay.isPending}
             variant="destructive"
             className="cursor-pointer mt-1 disabled:opacity-50 w-full disabled:cursor-not-allowed"
           >
diff --git a/src/components/routes/task/components/sidebar-component/Sidebar.test.tsx b/src/components/routes/task/components/sidebar-component/Sidebar.test.tsx
index f93d4d3..907f678 100644
--- a/src/components/routes/task/components/sidebar-component/Sidebar.test.tsx
+++ b/src/components/routes/task/components/sidebar-component/Sidebar.test.tsx
@@ -193,6 +193,7 @@ describe("SideBar Component", () => {
         selectedDay={1}
         onDaySelect={mockOnDaySelect}
         onTaskClick={mockOnTaskClick}
+        isDraft={true}
       />,
     );
     await waitFor(() => {
@@ -246,6 +247,7 @@ describe("SideBar Component", () => {
         selectedDay={1}
         onDaySelect={mockOnDaySelect}
         onTaskClick={mockOnTaskClick}
+        isDraft={true}
       />,
     );
     await waitFor(() => {
@@ -277,6 +279,7 @@ describe("SideBar Component", () => {
         selectedDay={1}
         onDaySelect={mockOnDaySelect}
         onTaskClick={mockOnTaskClick}
+        isDraft={true}
       />,
     );
     await waitFor(() => {
diff --git a/src/components/routes/task/components/view/TaskForm.test.tsx b/src/components/routes/task/components/view/TaskForm.test.tsx
index d97e261..0112968 100644
--- a/src/components/routes/task/components/view/TaskForm.test.tsx
+++ b/src/components/routes/task/components/view/TaskForm.test.tsx
@@ -278,6 +278,14 @@ describe("TaskForm Component", () => {
     renderWithProviders(<TaskForm selectedDay={1} onCancel={mockOnCancel} />);
     const titleInput = screen.getByPlaceholderText("Task Title");
     fireEvent.change(titleInput, { target: { value: "New Task" } });
+
+    fireEvent.click(screen.getByText("Add Text"));
+    await waitFor(() => {
+      expect(
+        screen.getByPlaceholderText("Enter your text content"),
+      ).toBeInTheDocument();
+    });
+
     const submitButton = screen.getByText("Submit");
     fireEvent.click(submitButton);
     await waitFor(() => {
@@ -377,6 +385,14 @@ describe("TaskForm Component", () => {
     renderWithProviders(<TaskForm selectedDay={1} onCancel={mockOnCancel} />);
     const titleInput = screen.getByPlaceholderText("Task Title");
     fireEvent.change(titleInput, { target: { value: "New Task" } });
+
+    fireEvent.click(screen.getByText("Add Text"));
+    await waitFor(() => {
+      expect(
+        screen.getByPlaceholderText("Enter your text content"),
+      ).toBeInTheDocument();
+    });
+
     const submitButton = screen.getByText("Submit");
     fireEvent.click(submitButton);
     await waitFor(() => {
@@ -390,8 +406,14 @@ describe("TaskForm Component", () => {
     const { uploadImageToS3 } = await import("../../api/taskApi");
     const { toast } = await import("sonner");
     vi.mocked(uploadImageToS3).mockResolvedValue({
-      url: "https://example.com/image.jpg",
+      image: {
+        thumbnail: "https://example.com/image-thumb.jpg",
+        medium: "https://example.com/image-medium.jpg",
+        original: "https://example.com/image.jpg",
+      },
       key: "image-key-123",
+      path: "images/path",
+      message: "Image uploaded successfully",
     });
     renderWithProviders(<TaskForm selectedDay={1} onCancel={mockOnCancel} />);
     const addImageButton = screen.getByText("Add Image");
diff --git a/src/components/routes/task/components/view/TaskForm.tsx b/src/components/routes/task/components/view/TaskForm.tsx
index 700af29..51575c0 100644
--- a/src/components/routes/task/components/view/TaskForm.tsx
+++ b/src/components/routes/task/components/view/TaskForm.tsx
@@ -27,11 +27,17 @@ interface TaskFormProps {
   selectedDay: number;
   editingTask?: any;
   onCancel: (newlyCreatedTaskId?: string) => void;
+  isDraft?: boolean;
 }
 
 type TaskFormData = z.infer<typeof taskSchema>;
 
-const TaskForm = ({ selectedDay, editingTask, onCancel }: TaskFormProps) => {
+const TaskForm = ({
+  selectedDay,
+  editingTask,
+  onCancel,
+  isDraft = true,
+}: TaskFormProps) => {
   const { plan_id } = useParams();
   const queryClient = useQueryClient();
   const form = useForm({
@@ -73,6 +79,13 @@ const TaskForm = ({ selectedDay, editingTask, onCancel }: TaskFormProps) => {
           content: subTask.content,
           content_type: subTask.content_type,
           display_order: index + 1,
+          ...(subTask.content_type === "VIDEO" &&
+            subTask.duration && { duration: subTask.duration }),
+          ...(subTask.content_type === "SOURCE_REFERENCE" && {
+            source_text_id: subTask.source_text_id || null,
+            pecha_segment_id: subTask.pecha_segment_id || null,
+            segment_id: subTask.segment_id || null,
+          }),
         }));
         await createSubTasks(taskResponse.id, subTasksPayload);
       }
@@ -99,6 +112,13 @@ const TaskForm = ({ selectedDay, editingTask, onCancel }: TaskFormProps) => {
         content: subTask.content,
         content_type: subTask.content_type,
         display_order: index + 1,
+        ...(subTask.content_type === "VIDEO" &&
+          subTask.duration && { duration: subTask.duration }),
+        ...(subTask.content_type === "SOURCE_REFERENCE" && {
+          source_text_id: subTask.source_text_id || null,
+          pecha_segment_id: subTask.pecha_segment_id || null,
+          segment_id: subTask.segment_id || null,
+        }),
       }));
       await updateSubTasks(editingTask.id, subTasksPayload);
     },
@@ -146,6 +166,7 @@ const TaskForm = ({ selectedDay, editingTask, onCancel }: TaskFormProps) => {
               id: data.id,
               content_type: "VIDEO",
               content: data.content,
+              duration: data.duration,
             };
           case "TEXT":
             return {
@@ -171,6 +192,9 @@ const TaskForm = ({ selectedDay, editingTask, onCancel }: TaskFormProps) => {
               id: data.id,
               content_type: "SOURCE_REFERENCE",
               content: data.content,
+              source_text_id: data.source_text_id || null,
+              pecha_segment_id: data.pecha_segment_id || null,
+              segment_id: data.segment_id || null,
             };
           default:
             return {
@@ -184,7 +208,14 @@ const TaskForm = ({ selectedDay, editingTask, onCancel }: TaskFormProps) => {
     }
   }, [editingTask?.id, selectedDay, taskDetails?.id]);
 
-  const handleAddSubTask = (content_type: any, sourceContent?: string) => {
+  interface SourceData {
+    content: string;
+    pecha_segment_id: string;
+    text_id: string;
+    segment_id: string;
+  }
+
+  const handleAddSubTask = (content_type: any, sourceData?: SourceData) => {
     let newSubTask: SubTask;
 
     switch (content_type) {
@@ -193,6 +224,7 @@ const TaskForm = ({ selectedDay, editingTask, onCancel }: TaskFormProps) => {
           id: null,
           content_type: "VIDEO",
           content: "",
+          duration: "",
         };
         break;
       case "TEXT":
@@ -221,7 +253,10 @@ const TaskForm = ({ selectedDay, editingTask, onCancel }: TaskFormProps) => {
         newSubTask = {
           id: null,
           content_type: "SOURCE_REFERENCE",
-          content: sourceContent || "",
+          content: sourceData?.content || "",
+          source_text_id: sourceData?.text_id || null,
+          pecha_segment_id: sourceData?.pecha_segment_id || null,
+          segment_id: sourceData?.segment_id || null,
         };
         break;
     }
@@ -252,13 +287,13 @@ const TaskForm = ({ selectedDay, editingTask, onCancel }: TaskFormProps) => {
       return;
     }
     try {
-      const { url, key } = await uploadImageToS3(file, plan_id || "");
+      const { image, key } = await uploadImageToS3(file, plan_id || "");
       updateSubTask(index, {
-        imagePreview: url,
+        imagePreview: image.original,
         content: key,
       });
       toast.success("Image uploaded successfully!");
-    } catch (error) {
+    } catch {
       toast.error("Failed to upload image");
     }
   };
@@ -282,7 +317,7 @@ const TaskForm = ({ selectedDay, editingTask, onCancel }: TaskFormProps) => {
     onCancel(newlyCreatedTaskId);
   };
 
-  const onSubmit = (data: TaskFormData) => {
+  const onSubmit = async (data: TaskFormData) => {
     const taskData: any = {
       plan_id: plan_id!,
       day_id: currentDayData!.id,
@@ -309,9 +344,10 @@ const TaskForm = ({ selectedDay, editingTask, onCancel }: TaskFormProps) => {
               isTitleEditing={isTitleEditing}
               formValue={formValues.title}
               control={form.control}
-              onEdit={() => setIsTitleEditing(true)}
+              onEdit={() => isDraft && setIsTitleEditing(true)}
               onSave={handleSaveTitle}
               onCancel={() => setIsTitleEditing(false)}
+              disabled={!isDraft}
             />
             {isEditMode && (
               <DaySelector selectedDay={selectedDay} taskId={editingTask?.id} />
@@ -341,7 +377,7 @@ const TaskForm = ({ selectedDay, editingTask, onCancel }: TaskFormProps) => {
           {imageUploadError && (
             <div className="text-red-500 text-sm ml-4">{imageUploadError}</div>
           )}
-          <ContentTypeSelector onSelectType={handleAddSubTask} />
+          {isDraft && <ContentTypeSelector onSelectType={handleAddSubTask} />}
 
           <div className="p-4 flex gap-3">
             <Activity mode={isEditMode ? "visible" : "hidden"}>
@@ -359,7 +395,10 @@ const TaskForm = ({ selectedDay, editingTask, onCancel }: TaskFormProps) => {
               className="cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
               type="submit"
               disabled={
-                createTaskMutation.isPending || updateTaskMutation.isPending
+                !isDraft ||
+                createTaskMutation.isPending ||
+                updateTaskMutation.isPending ||
+                subTasks.length === 0
               }
             >
               {createTaskMutation.isPending || updateTaskMutation.isPending
diff --git a/src/components/routes/task/components/view/TaskView.tsx b/src/components/routes/task/components/view/TaskView.tsx
index 9684767..5aa3ac7 100644
--- a/src/components/routes/task/components/view/TaskView.tsx
+++ b/src/components/routes/task/components/view/TaskView.tsx
@@ -19,6 +19,7 @@ type ContentType = "TEXT" | "IMAGE" | "AUDIO" | "VIDEO" | "SOURCE_REFERENCE";
 interface TaskViewProps {
   taskId: string;
   onEditTask: (task: any) => void;
+  isDraft?: boolean;
 }
 
 const fetchTaskDetails = async (task_id: string) => {
@@ -55,9 +56,11 @@ const SubtaskContent = ({
 const SubtaskCard = ({
   subtask,
   listeners,
+  isDraft,
 }: {
   subtask: any;
   listeners?: any;
+  isDraft?: boolean;
 }) => {
   return (
     <div
@@ -67,7 +70,7 @@ const SubtaskCard = ({
         <div className="flex items-center border w-fit bg-[#F7F7F7] dark:bg-sidebar-secondary px-2 py-1 text-sm rounded-md border-dashed gap-2">
           <ContentIcon type={subtask.content_type} /> {subtask.content_type}
         </div>
-        {listeners && (
+        {listeners && isDraft && (
           <PiDotsSixVertical
             className="w-5 h-5 text-gray-400 dark:text-muted-foreground cursor-grab active:cursor-grabbing"
             {...listeners}
@@ -79,7 +82,7 @@ const SubtaskCard = ({
   );
 };
 
-const TaskView = ({ taskId, onEditTask }: TaskViewProps) => {
+const TaskView = ({ taskId, onEditTask, isDraft }: TaskViewProps) => {
   const { data: taskDetails, isLoading } = useQuery({
     queryKey: ["taskDetails", taskId],
     queryFn: () => fetchTaskDetails(taskId),
@@ -98,14 +101,16 @@ const TaskView = ({ taskId, onEditTask }: TaskViewProps) => {
       <div className=" space-y-4  overflow-y-auto">
         <div className="flex p-4 items-center justify-between w-3/4">
           <h2 className="text-xl font-semibold">Task</h2>
-          <Pecha.Button
-            variant="outline"
-            type="button"
-            onClick={() => onEditTask(taskDetails)}
-          >
-            <FaPen className="h-4 w-4" />
-            Edit
-          </Pecha.Button>
+          {isDraft && (
+            <Pecha.Button
+              variant="outline"
+              type="button"
+              onClick={() => onEditTask(taskDetails)}
+            >
+              <FaPen className="h-4 w-4" />
+              Edit
+            </Pecha.Button>
+          )}
         </div>
         <div className="p-4">
           <div className="h-12 p-4 bg-white dark:bg-input/30 rounded-md lg:w-2/3 w-full text-base flex items-center border">
@@ -135,11 +140,16 @@ const TaskView = ({ taskId, onEditTask }: TaskViewProps) => {
               onReorder={(activeId: any, overId: any) => {
                 handleSubtaskReorder(activeId, overId);
               }}
+              disabled={!isDraft}
             >
               {displaySubtasks.map((subtask: any) => (
                 <SortableItem key={subtask.id} id={subtask.id}>
                   {({ listeners }: any) => (
-                    <SubtaskCard subtask={subtask} listeners={listeners} />
+                    <SubtaskCard
+                      subtask={subtask}
+                      listeners={listeners}
+                      isDraft={isDraft}
+                    />
                   )}
                 </SortableItem>
               ))}
diff --git a/src/components/ui/atoms/sortable.tsx b/src/components/ui/atoms/sortable.tsx
index d3b4944..4799e42 100644
--- a/src/components/ui/atoms/sortable.tsx
+++ b/src/components/ui/atoms/sortable.tsx
@@ -17,7 +17,12 @@ import {
 } from "@dnd-kit/modifiers";
 import { CSS } from "@dnd-kit/utilities";
 
-export function SortableList({ items, onReorder, children }: any) {
+export function SortableList({
+  items,
+  onReorder,
+  children,
+  disabled = false,
+}: any) {
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
@@ -27,6 +32,8 @@ export function SortableList({ items, onReorder, children }: any) {
   );
 
   const handleDragEnd = (event: DragEndEvent) => {
+    if (disabled) return;
+
     const { active, over } = event;
 
     if (over && active.id !== over.id) {
@@ -36,7 +43,7 @@ export function SortableList({ items, onReorder, children }: any) {
 
   return (
     <DndContext
-      sensors={sensors}
+      sensors={disabled ? [] : sensors}
       collisionDetection={closestCenter}
       onDragEnd={handleDragEnd}
       modifiers={[restrictToVerticalAxis, restrictToParentElement]}
diff --git a/src/components/ui/atoms/studio-card.tsx b/src/components/ui/atoms/studio-card.tsx
index 375a09e..5d09b29 100644
--- a/src/components/ui/atoms/studio-card.tsx
+++ b/src/components/ui/atoms/studio-card.tsx
@@ -1,4 +1,3 @@
-import { TIBETAN_LETTERS } from "@/lib/constant";
 import pechaIcon from "../../../assets/icon/pecha_icon.png";
 
 interface ContainerLayoutProps {
@@ -38,7 +37,7 @@ const ContainerLayout = ({ children, title }: ContainerLayoutProps) => {
         </div>
         <div />
       </div>
-      <div className="flex-1 md:flex items-center justify-center hidden">
+      {/* <div className="flex-1 md:flex items-center justify-center hidden">
         <div className="grid grid-cols-4 w-full h-full font-dutsa">
           {TIBETAN_LETTERS.map((letter, index) => (
             <div
@@ -49,7 +48,7 @@ const ContainerLayout = ({ children, title }: ContainerLayoutProps) => {
             </div>
           ))}
         </div>
-      </div>
+      </div> */}
     </div>
   );
 };
diff --git a/src/components/ui/molecules/auth-button/AuthButton.tsx b/src/components/ui/molecules/auth-button/AuthButton.tsx
index 26848e7..1e8c5a6 100644
--- a/src/components/ui/molecules/auth-button/AuthButton.tsx
+++ b/src/components/ui/molecules/auth-button/AuthButton.tsx
@@ -19,7 +19,11 @@ const AuthButton = () => {
       <Link to={`/profile/${userInfo?.id}`}>
         <div className="flex items-center font-dynamic gap-2">
           <img
-            src={userInfo?.image_url || NO_PROFILE_IMAGE}
+            src={
+              userInfo?.image?.thumbnail ||
+              userInfo?.image_url ||
+              NO_PROFILE_IMAGE
+            }
             alt="user"
             className="hidden w-10 h-10 object-cover md:block rounded-full"
           />
diff --git a/src/components/ui/molecules/content-sub/ContentComponents.tsx b/src/components/ui/molecules/content-sub/ContentComponents.tsx
index 042aa94..2aa45b7 100644
--- a/src/components/ui/molecules/content-sub/ContentComponents.tsx
+++ b/src/components/ui/molecules/content-sub/ContentComponents.tsx
@@ -29,25 +29,14 @@ export const ContentIcon = ({ type }: { type: ContentType }) => {
 export const VideoContent = ({ content }: { content: string }) => {
   const regularVideoId = getYouTubeVideoId(content);
   const shortsVideoId = getYouTubeShortsId(content);
-
-  if (regularVideoId && !shortsVideoId) {
-    return (
-      <div className="mt-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md">
-        <p className="text-red-600 dark:text-red-400 text-sm">
-          Please upload only YouTube short
-        </p>
-      </div>
-    );
-  }
-
-  const videoId = shortsVideoId;
+  const videoId = regularVideoId || shortsVideoId;
 
   if (!videoId) return null;
 
   return (
     <div className="mt-4">
       <iframe
-        className="w-full max-w-[315px] aspect-[9/16] mx-auto rounded-md border bg-[#FAFAFA] dark:bg-sidebar-secondary"
+        className={`w-full max-w-[315px] mx-auto rounded-md border bg-[#FAFAFA] dark:bg-sidebar-secondary ${shortsVideoId ? "aspect-[9/16]" : "aspect-[16/9]"}`}
         src={`https://www.youtube.com/embed/${videoId}`}
         title="YouTube preview"
       />
@@ -97,7 +86,7 @@ export const ImageContent = ({ content }: { content: string }) => (
 );
 
 export const TextContent = ({ content }: { content: string }) => (
-  <div className="w-full min-h-24 max-h-56 overflow-y-auto bg-[#FAFAFA] dark:bg-sidebar-secondary  whitespace-pre-wrap text-base p-3 border rounded-md">
+  <div className="w-full min-h-64 max-h-56 overflow-y-auto bg-[#FAFAFA] dark:bg-sidebar-secondary  whitespace-pre-wrap text-base p-3 border rounded-md">
     {content}
   </div>
 );
diff --git a/src/components/ui/molecules/content-sub/ContentTypeSelector.tsx b/src/components/ui/molecules/content-sub/ContentTypeSelector.tsx
index 42bd1ba..12c5493 100644
--- a/src/components/ui/molecules/content-sub/ContentTypeSelector.tsx
+++ b/src/components/ui/molecules/content-sub/ContentTypeSelector.tsx
@@ -6,10 +6,17 @@ import pechaIcon from "@/assets/icon/pecha_icon.png";
 import { useState } from "react";
 import { SourceSelectorSheet } from "../webuddhist-source/SourceSelectorSheet";
 
+interface SourceData {
+  content: string;
+  pecha_segment_id: string;
+  text_id: string;
+  segment_id: string;
+}
+
 interface ContentTypeSelectorProps {
   onSelectType: (
     type: "IMAGE" | "VIDEO" | "AUDIO" | "TEXT" | "SOURCE_REFERENCE",
-    sourceContent?: string,
+    sourceData?: SourceData,
   ) => void;
 }
 
@@ -53,8 +60,8 @@ export const ContentTypeSelector = ({
     }
   };
 
-  const handleAddSource = (sourceContent: string) => {
-    onSelectType("SOURCE_REFERENCE", sourceContent);
+  const handleAddSource = (sourceData: SourceData) => {
+    onSelectType("SOURCE_REFERENCE", sourceData);
     setIsSourceSheetOpen(false);
   };
 
diff --git a/src/components/ui/molecules/dashboard-table/DashBoardTable.tsx b/src/components/ui/molecules/dashboard-table/DashBoardTable.tsx
index b209067..e318c4f 100644
--- a/src/components/ui/molecules/dashboard-table/DashBoardTable.tsx
+++ b/src/components/ui/molecules/dashboard-table/DashBoardTable.tsx
@@ -4,6 +4,7 @@ import { FaChevronUp, FaChevronDown } from "react-icons/fa6";
 import { useNavigate } from "react-router-dom";
 import defaultCover from "/default-image.webp";
 import { DropdownButton } from "../dropdown-button/DropdownButton";
+import { FaStar } from "react-icons/fa";
 
 export interface Plan {
   id: string;
@@ -13,6 +14,7 @@ export interface Plan {
   total_days: string;
   subscription_count: string;
   status: string;
+  featured: boolean;
   language: string;
 }
 
@@ -24,6 +26,7 @@ interface DashBoardTableProps {
   sortBy: string;
   sortOrder: string;
   onSort: (column: string) => void;
+  handleFeatured: (planId: string) => void;
 }
 
 export function DashBoardTable({
@@ -34,6 +37,7 @@ export function DashBoardTable({
   sortBy,
   sortOrder,
   onSort,
+  handleFeatured,
 }: DashBoardTableProps) {
   const navigate = useNavigate();
 
@@ -180,6 +184,21 @@ export function DashBoardTable({
         <Pecha.TableCell>{plan.subscription_count} Used</Pecha.TableCell>
         <Pecha.TableCell>{getStatusBadge(plan.status)}</Pecha.TableCell>
         <Pecha.TableCell>{getLanguage(plan.language)}</Pecha.TableCell>
+        <Pecha.TableCell>
+          <div className="flex items-center gap-2">
+            <Pecha.Button
+              variant="outline"
+              className="bg-gray-100 hover:bg-gray-200"
+              disabled={plan.status !== "PUBLISHED"}
+              onClick={() => handleFeatured(plan.id)}
+            >
+              <FaStar
+                className={`${plan.featured ? "text-yellow-500" : "text-gray-500"}`}
+              />{" "}
+              {plan.featured ? "Featured" : "Not Featured"}
+            </Pecha.Button>
+          </div>
+        </Pecha.TableCell>
         <Pecha.TableCell>
           <div className="flex items-center gap-2">
             <DropdownButton planId={plan.id} currentStatus={plan.status} />
@@ -216,12 +235,15 @@ export function DashBoardTable({
           <Pecha.TableHead className="w-[150px] font-bold">
             {t("studio.dashboard.plan_used")}
           </Pecha.TableHead>
-          <Pecha.TableHead className="w-[150px] font-bold">
+          <Pecha.TableHead className="w-[100px] font-bold">
             Status
           </Pecha.TableHead>
-          <Pecha.TableHead className="w-[150px] font-bold">
+          <Pecha.TableHead className="w-[100px] font-bold">
             {t("studio.plan.form_field.language")}
           </Pecha.TableHead>
+          <Pecha.TableHead className="w-[150px] font-bold">
+            Feature
+          </Pecha.TableHead>
           <Pecha.TableHead className="w-[150px] font-bold">
             {t("studio.dashboard.actions")}
           </Pecha.TableHead>
diff --git a/src/components/ui/molecules/dropdown-button/DropdownButton.tsx b/src/components/ui/molecules/dropdown-button/DropdownButton.tsx
index 58c7cad..bb9ab93 100644
--- a/src/components/ui/molecules/dropdown-button/DropdownButton.tsx
+++ b/src/components/ui/molecules/dropdown-button/DropdownButton.tsx
@@ -72,6 +72,7 @@ export function DropdownButton({
 
       toast.success(`Status updated to ${newStatus}`);
       queryClient.refetchQueries({ queryKey: ["dashboard-plans"] });
+      queryClient.invalidateQueries({ queryKey: ["planDetails", planId] });
     } catch (error: any) {
       toast.error(error.response.data.detail.message);
     }
diff --git a/src/components/ui/molecules/form-upload/InlineImageUpload.tsx b/src/components/ui/molecules/form-upload/InlineImageUpload.tsx
index ba3aabe..ff246ea 100644
--- a/src/components/ui/molecules/form-upload/InlineImageUpload.tsx
+++ b/src/components/ui/molecules/form-upload/InlineImageUpload.tsx
@@ -79,8 +79,10 @@ const InlineImageUpload = ({
                 alt={selectedFile.name}
                 className="rounded-lg h-full border w-32 object-cover"
               />
-              <div className="flex text-start flex-col gap-2">
-                <p>{selectedFile?.name}</p>
+              <div className="flex text-start flex-col gap-2 w-xs min-w-0">
+                <p className="text-ellipsis overflow-hidden whitespace-nowrap">
+                  {selectedFile?.name}
+                </p>
                 <div className="flex gap-2">
                   <Button
                     variant="default"
diff --git a/src/components/ui/molecules/profile-edit-form/ProfileEditForm.tsx b/src/components/ui/molecules/profile-edit-form/ProfileEditForm.tsx
index 33705e7..20fe388 100644
--- a/src/components/ui/molecules/profile-edit-form/ProfileEditForm.tsx
+++ b/src/components/ui/molecules/profile-edit-form/ProfileEditForm.tsx
@@ -1,7 +1,7 @@
 import axiosInstance from "@/config/axios-config";
 import { Pecha } from "@/components/ui/shadimport";
 import { Label } from "@/components/ui/atoms/label";
-import { SOCIAL_PLATFORMS } from "@/lib/constant";
+import { SOCIAL_PLATFORMS, PLATFORM_PATTERNS } from "@/lib/constant";
 import { IoMdClose, IoMdAdd } from "react-icons/io";
 import { FaEdit } from "react-icons/fa";
 import { useState } from "react";
@@ -14,6 +14,14 @@ import { toast } from "sonner";
 import ImageContentData from "@/components/ui/molecules/modals/image-upload/ImageContentData";
 import { uploadImageToS3 } from "@/components/routes/task/api/taskApi";
 
+const getUrlError = (account: string, url: string): string | null => {
+  if (!account || !url || account === "email") return null;
+  const pattern = PLATFORM_PATTERNS[account];
+  if (pattern && !pattern.test(url))
+    return `URL must be a valid ${account} link`;
+  return null;
+};
+
 interface SocialProfile {
   account: string;
   url: string;
@@ -62,7 +70,7 @@ const ProfileEditForm = ({
     ];
   });
   const [imagePreview, setImagePreview] = useState<string | null>(
-    userInfo?.image_url || null,
+    userInfo?.image?.medium || null,
   );
   const [isImageDialogOpen, setIsImageDialogOpen] = useState(false);
 
@@ -92,8 +100,8 @@ const ProfileEditForm = ({
 
   const handleImageUpload = async (file: File) => {
     try {
-      const { url, key } = await uploadImageToS3(file, "");
-      const imageUrl = url;
+      const { image, key } = await uploadImageToS3(file, "");
+      const imageUrl = image.original;
       const imageKey = key;
       setImagePreview(imageUrl);
       form.setValue("image_url", imageKey);
@@ -125,6 +133,10 @@ const ProfileEditForm = ({
   };
 
   const onSubmit = (data: ProfileFormData) => {
+    const hasUrlErrors = socialProfiles.some((sp) =>
+      getUrlError(sp.account, sp.url),
+    );
+    if (hasUrlErrors) return;
     try {
       const validatedData = profileSchema.parse(data);
       const filteredSocialProfiles = socialProfiles.filter(
@@ -254,6 +266,7 @@ const ProfileEditForm = ({
                   .filter((_, i) => i !== index)
                   .map((sp) => sp.account)
                   .filter(Boolean);
+                const urlError = getUrlError(social.account, social.url);
 
                 return (
                   <div
@@ -334,6 +347,9 @@ const ProfileEditForm = ({
                             social.url === userInfo?.email
                           }
                         />
+                        {urlError && (
+                          <p className="text-sm text-red-500">{urlError}</p>
+                        )}
                       </div>
                     </div>
                   </div>
@@ -345,7 +361,10 @@ const ProfileEditForm = ({
             <Pecha.Button
               type="submit"
               className=" h-12 px-12 font-medium dark:text-white  bg-[#A51C21] hover:bg-[#A51C21]/90"
-              disabled={updateProfileMutation.isPending}
+              disabled={
+                updateProfileMutation.isPending ||
+                socialProfiles.some((sp) => getUrlError(sp.account, sp.url))
+              }
             >
               {updateProfileMutation.isPending ? "Saving..." : "Save Changes"}
             </Pecha.Button>
diff --git a/src/components/ui/molecules/subtask-card/SubTaskCard.tsx b/src/components/ui/molecules/subtask-card/SubTaskCard.tsx
index 15a86b0..92c2b44 100644
--- a/src/components/ui/molecules/subtask-card/SubTaskCard.tsx
+++ b/src/components/ui/molecules/subtask-card/SubTaskCard.tsx
@@ -7,12 +7,14 @@ import {
   AudioContent,
   ContentIcon,
 } from "../content-sub/ContentComponents";
+import { getYouTubeDuration } from "@/lib/utils";
 
 interface VideoSubTask {
   id?: string | null;
   content_type: "VIDEO";
   content: string;
   display_order?: number;
+  duration?: string;
 }
 
 interface TextSubTask {
@@ -42,6 +44,9 @@ interface SourceSubTask {
   content_type: "SOURCE_REFERENCE";
   content: string;
   display_order?: number;
+  source_text_id?: string | null;
+  pecha_segment_id?: string | null;
+  segment_id?: string | null;
 }
 export type SubTask =
   | VideoSubTask
@@ -67,18 +72,36 @@ const VideoSubtask = ({
   subTask: VideoSubTask;
   index: number;
   onUpdate: (index: number, updates: Partial<SubTask>) => void;
-}) => (
-  <>
-    <Pecha.Input
-      type="url"
-      placeholder="Enter YouTube URL"
-      className="h-12 text-base bg-[#FAFAFA] dark:bg-sidebar-secondary "
-      value={subTask.content}
-      onChange={(e) => onUpdate(index, { content: e.target.value })}
-    />
-    <VideoContent content={subTask.content} />
-  </>
-);
+}) => {
+  const handleUrlChange = async (url: string) => {
+    onUpdate(index, { content: url, duration: "" });
+
+    // Fetch duration if it's a valid YouTube URL
+    if (url && (url.includes("youtube.com") || url.includes("youtu.be"))) {
+      try {
+        const duration = await getYouTubeDuration(url);
+        onUpdate(index, { content: url, duration });
+      } catch (error) {
+        console.error("Failed to fetch duration:", error);
+        onUpdate(index, { content: url, duration: "" });
+      }
+    }
+  };
+
+  return (
+    <>
+      <Pecha.Input
+        type="url"
+        placeholder="Enter YouTube URL"
+        className="h-12 text-base bg-[#FAFAFA] dark:bg-sidebar-secondary "
+        value={subTask.content}
+        onChange={(e) => handleUrlChange(e.target.value)}
+      />
+
+      <VideoContent content={subTask.content} />
+    </>
+  );
+};
 
 const TextSubtask = ({
   subTask,
@@ -91,7 +114,7 @@ const TextSubtask = ({
 }) => (
   <Pecha.Textarea
     placeholder="Enter your text content"
-    className="w-full h-24 resize-none text-base bg-[#FAFAFA] dark:bg-sidebar-secondary "
+    className="w-full min-h-64 resize-none text-base bg-[#FAFAFA] dark:bg-sidebar-secondary "
     value={subTask.content}
     onChange={(e) => onUpdate(index, { content: e.target.value })}
   />
diff --git a/src/components/ui/molecules/task-title-field/TaskTitleField.tsx b/src/components/ui/molecules/task-title-field/TaskTitleField.tsx
index 8003e32..d6e230f 100644
--- a/src/components/ui/molecules/task-title-field/TaskTitleField.tsx
+++ b/src/components/ui/molecules/task-title-field/TaskTitleField.tsx
@@ -9,6 +9,7 @@ interface TaskTitleFieldProps {
   onEdit: () => void;
   onSave: () => void;
   onCancel: () => void;
+  disabled?: boolean;
 }
 
 export const TaskTitleField = ({
@@ -19,6 +20,7 @@ export const TaskTitleField = ({
   onEdit,
   onSave,
   onCancel,
+  disabled = false,
 }: TaskTitleFieldProps) => {
   if (isEditMode && !isTitleEditing) {
     return (
@@ -26,7 +28,12 @@ export const TaskTitleField = ({
         <div className="h-12  text-base flex bg-white dark:bg-[#161616] items-center px-3 border opacity-80 rounded-md flex-1">
           {formValue}
         </div>
-        <Pecha.Button variant="outline" type="button" onClick={onEdit}>
+        <Pecha.Button
+          variant="outline"
+          type="button"
+          onClick={onEdit}
+          disabled={disabled === true}
+        >
           Edit
         </Pecha.Button>
       </>
@@ -46,6 +53,7 @@ export const TaskTitleField = ({
                   type="text"
                   placeholder="Task Title"
                   className="h-12 text-base bg-white dark:bg-[#161616]"
+                  disabled={disabled}
                   {...field}
                 />
               </Pecha.FormControl>
@@ -76,6 +84,7 @@ export const TaskTitleField = ({
               type="text"
               placeholder="Task Title"
               className="h-12 text-base bg-white dark:bg-[#161616]"
+              disabled={disabled}
               {...field}
             />
           </Pecha.FormControl>
diff --git a/src/components/ui/molecules/user-card/UserCard.tsx b/src/components/ui/molecules/user-card/UserCard.tsx
index c5b0dbf..bd42d28 100644
--- a/src/components/ui/molecules/user-card/UserCard.tsx
+++ b/src/components/ui/molecules/user-card/UserCard.tsx
@@ -7,7 +7,9 @@ const UserCard = ({ userInfo }: any) => {
       <div className="flex items-start gap-6">
         <div className="w-24 h-24 rounded-full overflow-hidden flex-shrink-0 border-2 border-dashed border-gray-200 dark:border-[#505050]">
           <img
-            src={userInfo.image_url || NO_PROFILE_IMAGE}
+            src={
+              userInfo.image?.medium || userInfo.image_url || NO_PROFILE_IMAGE
+            }
             alt="profile"
             className="w-full h-full object-cover"
           />
diff --git a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
index ce83b2f..7fe14c6 100644
--- a/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
+++ b/src/components/ui/molecules/webuddhist-source/SourceSelectorSheet.tsx
@@ -2,34 +2,25 @@ import { Pecha } from "@/components/ui/shadimport";
 import { useMemo, useState } from "react";
 import { IoMdSearch } from "react-icons/io";
 import { useTranslate } from "@tolgee/react";
-import axiosInstance from "@/config/axios-config";
 import { useDebounce } from "use-debounce";
 import { useQuery } from "@tanstack/react-query";
 import SourceItem from "./sourceItem";
 import pechaIcon from "@/assets/icon/pecha_icon.png";
 import { Pagination } from "@/components/ui/molecules/pagination/Pagination";
+import { searchSources } from "@/components/api/searchApi";
+import { LANGUAGE } from "@/lib/constant";
 
-export const fetchSegments = async (
-  searchFilter: string,
-  limit: number,
-  skip: number,
-) => {
-  const { data } = await axiosInstance.get(
-    `/api/v1/search?query=${searchFilter}&search_type=${"SOURCE"}`,
-    {
-      params: {
-        limit,
-        skip,
-      },
-    },
-  );
-  return data;
-};
+interface SourceData {
+  content: string;
+  pecha_segment_id: string;
+  text_id: string;
+  segment_id: string;
+}
 
 interface SourceSelectorSheetProps {
   isOpen: boolean;
   onOpenChange: (open: boolean) => void;
-  onAddSource: (sourceContent: string) => void;
+  onAddSource: (sourceData: SourceData) => void;
 }
 
 export const SourceSelectorSheet = ({
@@ -51,7 +42,15 @@ export const SourceSelectorSheet = ({
       pagination.currentPage,
       pagination.limit,
     ],
-    queryFn: () => fetchSegments(debouncedSearchFilter, pagination.limit, skip),
+    queryFn: () => {
+      const language = localStorage.getItem(LANGUAGE) || "en";
+      return searchSources({
+        query: debouncedSearchFilter,
+        language,
+        limit: pagination.limit,
+        skip,
+      });
+    },
     refetchOnWindowFocus: false,
     enabled: isOpen,
   });
@@ -63,9 +62,9 @@ export const SourceSelectorSheet = ({
   };
   const { t } = useTranslate();
 
-  const handleAddSource = (content: any) => {
-    if (content) {
-      onAddSource(content);
+  const handleAddSource = (sourceData: SourceData) => {
+    if (sourceData?.content) {
+      onAddSource(sourceData);
       onOpenChange(false);
     }
   };
diff --git a/src/components/ui/molecules/webuddhist-source/sourceItem.tsx b/src/components/ui/molecules/webuddhist-source/sourceItem.tsx
index 7e05ab7..9cc49b6 100644
--- a/src/components/ui/molecules/webuddhist-source/sourceItem.tsx
+++ b/src/components/ui/molecules/webuddhist-source/sourceItem.tsx
@@ -10,10 +10,18 @@ const SourceItem = ({ source, onSegment }: any) => {
         <img src={pechaIcon} alt="source icon" className="w-8 h-8" />
       </div>
       <div className="flex flex-col gap-2">
-        {source.segment_match.map((segment: any) => (
+        {source.segment_matches?.map((segment: any, index: number) => (
           <button
-            className="border p-2 rounded-md text-left border-dashed border-gray-300 dark:border-[#313132] text-sm"
-            onClick={() => onSegment?.(segment.content)}
+            key={segment.segment_id || index}
+            className="border p-2 rounded-md text-left border-dashed border-gray-300 dark:border-[#313132] text-sm cursor-pointer"
+            onClick={() =>
+              onSegment?.({
+                content: segment.content,
+                pecha_segment_id: segment.pecha_segment_id,
+                text_id: source.text.text_id,
+                segment_id: segment.segment_id,
+              })
+            }
           >
             <div dangerouslySetInnerHTML={{ __html: segment.content }} />
           </button>
diff --git a/src/lib/constant.ts b/src/lib/constant.ts
index e51446b..9103067 100644
--- a/src/lib/constant.ts
+++ b/src/lib/constant.ts
@@ -26,7 +26,14 @@ export const SOCIAL_PLATFORMS = [
   { value: "instagram", label: "Instagram", icon: "Instagram" },
   { value: "tiktok", label: "TikTok", icon: "TikTok" },
 ];
-
+export const PLATFORM_PATTERNS: Record<string, RegExp> = {
+  facebook: /facebook\.com/i,
+  "x.com": /(x\.com|twitter\.com)/i,
+  linkedin: /linkedin\.com/i,
+  youtube: /(youtube\.com|youtu\.be)/i,
+  instagram: /instagram\.com/i,
+  tiktok: /tiktok\.com/i,
+};
 export const TIBETAN_LETTERS = [
   "ཀ",
   "ཁ",
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index d231503..974f0b7 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -28,6 +28,57 @@ export const getYouTubeVideoId = (url: string) => {
   return match?.[1] || "";
 };
 
+export const convertDuration = (duration: string) => {
+  const match = duration.match(/PT(\d+H)?(\d+M)?(\d+S)?/);
+
+  const hours = (match?.[1] || "0H").slice(0, -1);
+  const minutes = (match?.[2] || "0M").slice(0, -1);
+  const seconds = (match?.[3] || "0S").slice(0, -1);
+
+  return `${hours}:${minutes}:${seconds}`;
+};
+
+export const getYouTubeDuration = async (url: string): Promise<string> => {
+  try {
+    // Try to get video ID from both regular YouTube and Shorts URLs
+    const videoId = getYouTubeShortsId(url) || getYouTubeVideoId(url);
+
+    if (!videoId) {
+      throw new Error("Invalid YouTube URL - could not extract video ID");
+    }
+
+    const apiKey = import.meta.env.VITE_YOUTUBE_API_KEY || "";
+    if (!apiKey) {
+      throw new Error("YouTube API key is not configured");
+    }
+    const youtubeUrl = `https://www.googleapis.com/youtube/v3/videos?part=contentDetails&id=${videoId}&key=${apiKey}`;
+
+    const response = await fetch(youtubeUrl);
+
+    if (!response.ok) {
+      throw new Error(
+        `YouTube API error: ${response.status} ${response.statusText}`,
+      );
+    }
+
+    const data = await response.json();
+    if (data.error) {
+      throw new Error(`YouTube API error: ${data.error.message}`);
+    }
+
+    const duration = data.items?.[0]?.contentDetails?.duration;
+
+    if (!duration) {
+      throw new Error("Duration not found in YouTube API response");
+    }
+
+    return convertDuration(duration);
+  } catch (error) {
+    console.error("Error fetching YouTube duration:", error);
+    throw error; // Re-throw to let caller handle it
+  }
+};
+
 export const getYouTubeShortsId = (url: string) => {
   const match = url.match(
     /(?:https?:\/\/)?(?:www\.)?youtube\.com\/shorts\/([a-zA-Z0-9_-]+)/,
@@ -41,7 +92,7 @@ export const extractSpotifyId = (url: string) => {
 };
 
 export const getIcon = (platform: string) => {
-  const iconMap: any = {
+  const iconMap: Record<string, React.ComponentType> = {
     facebook: FaFacebook,
     "x.com": FaTwitter,
     linkedin: FaLinkedin,