diff --git a/src/App.tsx b/src/App.tsx
index 3e9ded9..cee8be6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -41,7 +41,7 @@ import MentorDetailProject from "./Pages/Internify/mentor/ProjectsPage";
 import InternifyLogin from "./Pages/Internify/LoginInternify"
 import FAQPage from "./Pages/Internify/FAQpage";
 import NotificationList from "./Pages/Internify/NotificationList";
-import SettingsContent from "./Pages/Internify/SettingsPage";
+import SettingsPage from "./Pages/Internify/SettingsPage";
 import TaskSubmission from "./Pages/Internify/intern/TaskSubmission";
 import SertificateList from "./Pages/Internify/intern/InternCertList";
 import MentorProjectsDetailPage from "./Pages/Internify/mentor/MentorProjectDetailPage";
@@ -116,7 +116,7 @@ function App() {
               <Route path="projects/:slug/:taskSlug" element={<TaskSubmission />} />
               <Route path="faq" element={<FAQPage />} />
               <Route path="notifications" element={<NotificationList />} />
-              <Route path="settings" element={<SettingsContent />} />
+              <Route path="settings" element={<SettingsPage />} />
             </Route>
           </Route>
 
@@ -134,7 +134,7 @@ function App() {
               <Route path="projects/:slug/:taskSlug/:nameIntern" element={<ViewInternSubmission />} />
               <Route path="faq" element={<FAQPage />} />
               <Route path="notifications" element={<NotificationList />} />
-              <Route path="settings" element={<SettingsContent />} />
+              <Route path="settings" element={<SettingsPage />} />
             </Route>
           </Route>
 
diff --git a/src/Layout/Header-internify.tsx b/src/Layout/Header-internify.tsx
index 71406c6..7e4b8bd 100644
--- a/src/Layout/Header-internify.tsx
+++ b/src/Layout/Header-internify.tsx
@@ -4,10 +4,6 @@ import humiclogo from "../assets/logo.png";
 import { useNavigate } from "react-router-dom";
 import { useCurrentUser } from "../hooks/useUser";
 
-/** Singkatan nama: ambil huruf pertama setiap kata, maksimal 2 huruf.
- *  "Andi Mahesa"        → "AM"
- *  "Andi Bayu Cendika"  → "AC"  (huruf pertama + huruf pertama kata terakhir)
- */
 function getInitials(fullName: string | undefined | null): string {
   if (!fullName) return "U";
   const parts = fullName.trim().split(/\s+/).filter(Boolean);
@@ -25,9 +21,8 @@ export default function Header({ toggleSidebar }: { toggleSidebar: () => void })
     setImageError(false);
   }, [user?.profile_picture, user?.full_name]);
 
-  // Tentukan base path settings sesuai role
   const settingsPath =
-    user?.role === "intern" ? "/intern/settings" : "/mentor/settings";
+    user?.role === "intern" ? "/intern" : "/mentor";
 
   const initials = user?.full_name ? getInitials(user.full_name) : "U";
   const hasPhoto = !!user?.profile_picture && !imageError;
diff --git a/src/Pages/Dashboard.tsx b/src/Pages/Dashboard.tsx
index 8864868..cbdc27d 100644
--- a/src/Pages/Dashboard.tsx
+++ b/src/Pages/Dashboard.tsx
@@ -86,26 +86,6 @@ type ApplicationsListResponse = {
   code?: number;
 };
 
-//type baru untuk menyesuaikan perubahan pada batch
-type LamaranItem = {
-  id: number;
-  id_mahasiswa: number;
-  id_lowongan_magang: string;
-  status: string;
-  batch: number;
-  batch_data: { id: number; batch_number: number; is_active: boolean };
-  lowongan_magang: { posisi: string; kelompok_peminatan: string };
-  mahasiswa: { nama_depan: string; nama_belakang: string };
-  created_at: string;
-  update_at: string;
-};
-
-type LamaranListResponse = {
-  status: boolean;
-  data: LamaranItem[];
-  message?: string;
-};
-
 const CATEGORY_COLORS = [
   "#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd",
   "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf",
@@ -133,9 +113,6 @@ function groupCount(list: Array<string>) {
     .sort((a, b) => b.value - a.value);
 }
 
-const EMPTY_PIE = [{ name: "Tidak ada data", value: 1 }];
-const EMPTY_COLOR = ["#e5e7eb"]
-
 function PieLegend({
   data,
   colors,
@@ -143,11 +120,6 @@ function PieLegend({
   data: ChartDataItem[];
   colors: string[];
 }) {
-  if (data.length === 0) {
-    return (
-      <p className="text-center text-sm text-gray-400">Tidak ada data</p>
-    )
-  }
   return (
     <div className="space-y-3 text-sm">
       {data.map((item, index) => (
@@ -185,9 +157,7 @@ const Dashboard: React.FC = () => {
   const [batches, setBatches] = useState<BatchResponse["data"]>([]);
   const [selectedBatchId, setSelectedBatchId] = useState<number | null>(null);
   const [batchDropdownOpen, setBatchDropdownOpen] = useState(false);
-
-  const selectedBatch =
-    batches.find((b) => b.id === selectedBatchId) ?? null;
+  const selectedBatch = batches.find((b) => b.id === selectedBatchId) ?? null;
 
   const getTokenFromCookie = () => {
     return document.cookie
@@ -235,10 +205,11 @@ const Dashboard: React.FC = () => {
     return msgFromBe || `Request gagal (status ${status ?? "unknown"}).`;
   };
 
+  // Effect 1: ambil daftar batch sekali, set default = batch aktif
   useEffect(() => {
     const fetchBatches = async () => {
       try {
-        const res = await api.get<BatchResponse>("/batch-api/");
+        const res = await api.get<BatchResponse>("/batch-api");
         if (res.data?.status) {
           const list = res.data.data || [];
           setBatches(list);
@@ -258,9 +229,7 @@ const Dashboard: React.FC = () => {
 
   useEffect(() => {
     if (selectedBatchId === null) return;
-    const batch = batches.find((b) => b.id === selectedBatchId);
-    if (!batch) return;
-    const batchNumber = batch.batch_number;
+    const batchId = selectedBatchId;
 
     const fetchDashboardData = async () => {
       try {
@@ -274,95 +243,142 @@ const Dashboard: React.FC = () => {
           return;
         }
 
-        const batchParams = { params: { batch: batchNumber } };
+        const params = { batch_id: batchId };
 
-        const handle404 = (err: unknown) => {
-          if (axios.isAxiosError(err) && err.response?.status === 404) {
-            return { data: { status: true, data: [] } } as any;
-          }
-          throw err;
-        };
+        const [statsRes, positionRes, countryRes, appsRes] =
+          await Promise.all([
+            api.get<DashboardStatsResponse>(
+              "/lamaran-magang-api/statistics/dashboard", { params }
+            ),
+            api.get<PositionStatsResponse>(
+              "/lamaran-magang-api/statistics/position", { params }
+            ),
+            api.get<CountryStatsResponse>(
+              "/lamaran-magang-api/statistics/country", { params }
+            ),
+            api.get<ApplicationsListResponse>("/lamaran-magang-api/statistics/university", { params }),
+          ]);
 
-        const [lamaranRes, countryRes, uniRes] = await Promise.all([
-          api.get<LamaranListResponse>("/lamaran-magang-api/get", {
-            params: { limit: 9999, page: 1 },
-          }),
-          api
-            .get<CountryStatsResponse>("/lamaran-magang-api/statistics/country", batchParams)
-            .catch(handle404),
-          api
-            .get<ApplicationsListResponse>("/lamaran-magang-api/statistics/university", batchParams)
-            .catch(handle404),
-        ]);
+        const statsJson = statsRes.data;
+        const positionJson = positionRes.data;
+        const countryJson = countryRes.data;
+        const appsJson = appsRes.data;
 
-        const all = lamaranRes.data?.data ?? [];
+        if (!statsJson?.status) {
+          setErrorMessage(
+            statsJson?.message ||
+            "Gagal mengambil data dashboard (statistics/dashboard)."
+          );
+          setLoading(false);
+          return;
+        }
 
-        // filter manual per batch
-        const rows = all.filter((r) => Number(r.batch) === Number(batchNumber));
+        if (!positionJson?.status) {
+          setErrorMessage(
+            positionJson?.message ||
+            "Gagal mengambil data dashboard (statistics/position)."
+          );
+          setLoading(false);
+          return;
+        }
 
-        const norm = (s?: string) => (s ?? "").toLowerCase().trim();
+        if (!countryJson?.status) {
+          setErrorMessage(
+            countryJson?.message ||
+            "Gagal mengambil data dashboard (statistics/country)."
+          );
+          setLoading(false);
+          return;
+        }
+
+        if (!appsJson?.status) {
+          console.warn(
+            "Fetch applicants list gagal (untuk universitas chart):",
+            appsJson?.message
+          );
+        }
+
+        const stats = statsJson.data;
+        const positions = positionJson.data || [];
+        const countries = countryJson.data || [];
 
         // === Stat Cards ===
-        const totalPendaftar = rows.length;
-        const totalDiterima = rows.filter((r) => norm(r.status) === "diterima").length;
-        const totalDitolak = rows.filter((r) => norm(r.status) === "ditolak").length;
-        const sedangDiproses = rows.filter((r) => norm(r.status) === "diproses").length;
-
         const statCardsFromApi: StatCard[] = [
-          { title: "Total Pendaftar", value: totalPendaftar, icon: <Users size={24} />, iconColor: "#0088ff" },
-          { title: "Total Diterima", value: totalDiterima, icon: <UserCheck size={24} />, iconColor: "#00cc00" },
-          { title: "Total Ditolak", value: totalDitolak, icon: <UserX size={24} />, iconColor: "#ff3333" },
-          { title: "Sedang Diproses", value: sedangDiproses, icon: <Clock size={24} />, iconColor: "#ffaa00" },
+          {
+            title: "Total Pendaftar",
+            value: stats.total_pendaftar,
+            icon: <Users size={24} />,
+            iconColor: "#0088ff",
+          },
+          {
+            title: "Total Diterima",
+            value: stats.total_diterima,
+            icon: <UserCheck size={24} />,
+            iconColor: "#00cc00",
+          },
+          {
+            title: "Total Ditolak",
+            value: stats.total_ditolak,
+            icon: <UserX size={24} />,
+            iconColor: "#ff3333",
+          },
+          {
+            title: "Sedang Diproses",
+            value: stats.sedang_diproses,
+            icon: <Clock size={24} />,
+            iconColor: "#ffaa00",
+          },
         ];
 
-        // === Position (dari nested lowongan_magang.posisi) ===
-        const positionCounts = groupCount(
-          rows.map((r) => (r.lowongan_magang?.posisi ?? "").trim())
+        // === Position ===
+        const positionCounts: ChartDataItem[] = positions.map((p) => ({
+          name: p.posisi,
+          value: p.total,
+        }));
+
+        // === Universitas ===
+        const applicants = appsJson?.status ? appsJson.data || [] : [];
+        const uniCountsRaw = groupCount(
+          applicants.map((a) => (a.universitas ?? "").toString())
         );
 
-        // === Penerimaan ===
-        // hanya isi kalau ada data, biar fallback EMPTY_PIE aktif saat kosong
-        const penerimaanCounts: ChartDataItem[] = totalPendaftar > 0
-          ? [
-            { name: "Total Pendaftar", value: totalPendaftar },
-            { name: "Total Diterima", value: totalDiterima },
-            { name: "Total Ditolak", value: totalDitolak },
-          ]
-          : [];
-        // === Negara (dari /statistics/country?batch=batchNumber) ===
-        const countries = countryRes.data?.data ?? [];
+        // Top 5 + Lainnya
+        const topN = 5;
+        const top = uniCountsRaw.slice(0, topN);
+        const rest = uniCountsRaw.slice(topN);
+        const othersValue = rest.reduce((acc, x) => acc + x.value, 0);
+        const uniCounts: ChartDataItem[] =
+          othersValue > 0 ? [...top, { name: "Lainnya", value: othersValue }] : top;
+
+        // === Negara ===
         const negaraCounts: ChartDataItem[] = countries.map((c) => ({
           name: c.negara,
           value: c.total,
         }));
 
-        // === Universitas (dari /statistics/university?batch=batchNumber) ===
-        const uniRaw: Array<{ universitas: string; total: number }> =
-          (uniRes.data as any)?.data ?? [];
-        const uniSorted = [...uniRaw].sort((a, b) => b.total - a.total);
-        const top = uniSorted.slice(0, 5);
-        const othersValue = uniSorted.slice(5).reduce((acc, x) => acc + x.total, 0);
-        const uniCounts: ChartDataItem[] = [
-          ...top.map((u) => ({ name: u.universitas, value: u.total })),
-          ...(othersValue > 0 ? [{ name: "Lainnya", value: othersValue }] : []),
+        // === Penerimaan ===
+        const penerimaanCounts: ChartDataItem[] = [
+          { name: "Total Pendaftar", value: stats.total_pendaftar },
+          { name: "Total Diterima", value: stats.total_diterima },
+          { name: "Total Ditolak", value: stats.total_ditolak },
         ];
 
         setStatCards(statCardsFromApi);
         setPositionData(positionCounts);
-        setPenerimaanData(penerimaanCounts);
-        setNegaraData(negaraCounts);
         setUniversitasData(uniCounts);
+        setNegaraData(negaraCounts);
+        setPenerimaanData(penerimaanCounts);
 
         setLoading(false);
       } catch (err) {
-        console.error("Error fetching dashboard:", err);
+        console.error("Terjadi kesalahan saat mengambil data dashboard:", err);
         setErrorMessage(getAxiosErrorMessage(err));
         setLoading(false);
       }
     };
 
     fetchDashboardData();
-  }, [api, selectedBatchId, batches]);
+  }, [api, selectedBatchId]);
 
   return (
     <div className="min-h-screen w-full overflow-hidden">
@@ -377,11 +393,13 @@ const Dashboard: React.FC = () => {
             <h2 className="text-[24px] font-semibold">Dashboard</h2>
 
             <div className="flex items-center gap-4">
+              {/* Batch Filter */}
+              {/* Batch Filter */}
               <div className="relative">
-                {/* Batch Filter */}
                 <button
                   onClick={() => setBatchDropdownOpen((o) => !o)}
-                  className="flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-[20px] py-[10px] text-gray-700 hover:bg-gray-50">
+                  className="flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-[20px] py-[10px] text-gray-700 hover:bg-gray-50"
+                >
                   {selectedBatch
                     ? `Batch ${selectedBatch.batch_number} - ${new Date(selectedBatch.created_at).getFullYear()}`
                     : "Pilih Batch"}
@@ -398,8 +416,8 @@ const Dashboard: React.FC = () => {
                           setBatchDropdownOpen(false);
                         }}
                         className={`flex w-full items-center justify-between px-4 py-2 text-left text-sm hover:bg-gray-50 ${b.id === selectedBatchId
-                          ? "font-semibold text-blue-600"
-                          : "text-gray-700"
+                            ? "font-semibold text-blue-600"
+                            : "text-gray-700"
                           }`}
                       >
                         <span>
@@ -414,16 +432,16 @@ const Dashboard: React.FC = () => {
                     ))}
                   </div>
                 )}
+              </div>
 
-                {/* Search Box */}
-                {/* <div className="flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-[20px] py-[10px]">
-                  <Search size={18} className="text-gray-400" />
-                  <input
-                    type="text"
-                    placeholder="Nama, Jurusan,"
-                    className="w-52 text-sm text-gray-700 placeholder-gray-400 outline-none"
-                  />
-                </div> */}
+              {/* Search Box */}
+              <div className="flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-[20px] py-[10px]">
+                <Search size={18} className="text-gray-400" />
+                <input
+                  type="text"
+                  placeholder="Nama, Jurusan,"
+                  className="w-52 text-sm text-gray-700 placeholder-gray-400 outline-none"
+                />
               </div>
             </div>
           </div>
@@ -477,7 +495,7 @@ const Dashboard: React.FC = () => {
                     <ResponsiveContainer width="100%" height={220}>
                       <PieChart>
                         <Pie
-                          data={positionData.length > 0 ? positionData : EMPTY_PIE}
+                          data={positionData}
                           cx="50%"
                           cy="50%"
                           innerRadius={0}
@@ -485,13 +503,13 @@ const Dashboard: React.FC = () => {
                           paddingAngle={2}
                           dataKey="value"
                         >
-                          {(positionData.length > 0 ? positionData : EMPTY_PIE).map((_, index) => (
+                          {positionData.map((_, index) => (
                             <Cell
                               key={`position-cell-${index}`}
                               fill={
-                                positionData.length > 0
-                                  ? CATEGORY_COLORS[index % CATEGORY_COLORS.length]
-                                  : EMPTY_COLOR[0]
+                                CATEGORY_COLORS[
+                                index % CATEGORY_COLORS.length
+                                ]
                               }
                             />
                           ))}
@@ -513,7 +531,7 @@ const Dashboard: React.FC = () => {
                     <ResponsiveContainer width="100%" height={220}>
                       <PieChart>
                         <Pie
-                          data={universitasData.length > 0 ? universitasData : EMPTY_PIE}
+                          data={universitasData}
                           cx="50%"
                           cy="50%"
                           innerRadius={0}
@@ -521,13 +539,13 @@ const Dashboard: React.FC = () => {
                           paddingAngle={2}
                           dataKey="value"
                         >
-                          {(universitasData.length > 0 ? universitasData : EMPTY_PIE).map((_, index) => (
+                          {universitasData.map((_, index) => (
                             <Cell
                               key={`universitas-cell-${index}`}
                               fill={
-                                universitasData.length > 0
-                                  ? CATEGORY_COLORS[index % CATEGORY_COLORS.length]
-                                  : EMPTY_COLOR[0]
+                                CATEGORY_COLORS[
+                                index % CATEGORY_COLORS.length
+                                ]
                               }
                             />
                           ))}
@@ -552,7 +570,7 @@ const Dashboard: React.FC = () => {
                     <ResponsiveContainer width="100%" height={220}>
                       <PieChart>
                         <Pie
-                          data={negaraData.length > 0 ? negaraData : EMPTY_PIE}
+                          data={negaraData}
                           cx="50%"
                           cy="50%"
                           innerRadius={0}
@@ -560,14 +578,10 @@ const Dashboard: React.FC = () => {
                           paddingAngle={2}
                           dataKey="value"
                         >
-                          {(negaraData.length > 0 ? negaraData : EMPTY_PIE).map((_, index) => (
+                          {negaraData.map((_, index) => (
                             <Cell
                               key={`negara-cell-${index}`}
-                              fill={
-                                negaraData.length > 0
-                                  ? CATEGORY_COLORS[index % CATEGORY_COLORS.length]
-                                  : EMPTY_COLOR[0]
-                              }
+                              fill={CATEGORY_COLORS[index % CATEGORY_COLORS.length]}
                             />
                           ))}
                         </Pie>
@@ -588,7 +602,7 @@ const Dashboard: React.FC = () => {
                     <ResponsiveContainer width="100%" height={220}>
                       <PieChart>
                         <Pie
-                          data={penerimaanData.length > 0 ? penerimaanData : EMPTY_PIE}
+                          data={penerimaanData}
                           cx="50%"
                           cy="50%"
                           innerRadius={0}
@@ -596,13 +610,13 @@ const Dashboard: React.FC = () => {
                           paddingAngle={2}
                           dataKey="value"
                         >
-                          {(penerimaanData.length > 0 ? penerimaanData : EMPTY_PIE).map((_, index) => (
+                          {penerimaanData.map((_, index) => (
                             <Cell
                               key={`penerimaan-cell-${index}`}
                               fill={
-                                penerimaanData.length > 0
-                                  ? CATEGORY_COLORS[index % CATEGORY_COLORS.length]
-                                  : EMPTY_COLOR[0]
+                                CATEGORY_COLORS[
+                                index % CATEGORY_COLORS.length
+                                ]
                               }
                             />
                           ))}
@@ -622,4 +636,4 @@ const Dashboard: React.FC = () => {
   );
 };
 
-export default Dashboard;
+export default Dashboard;
\ No newline at end of file
diff --git a/src/Pages/internify/LoginInternify.tsx b/src/Pages/internify/LoginInternify.tsx
index 7011bfc..fb40dea 100644
--- a/src/Pages/internify/LoginInternify.tsx
+++ b/src/Pages/internify/LoginInternify.tsx
@@ -74,7 +74,7 @@ export default function InternifyLogin() {
                                 </span>
                                 <input
                                     type="email"
-                                    placeholder="name@company.com"
+                                    placeholder="Email Account"
                                     value={email}
                                     onChange={(e) => setEmail(e.target.value)}
                                     className="w-full pl-10 pr-4 py-2.5 bg-white border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500 transition-colors"
@@ -90,7 +90,7 @@ export default function InternifyLogin() {
                                 </span>
                                 <input
                                     type={showPassword ? "text" : "password"}
-                                    placeholder="••••••••"
+                                    placeholder="Account Password"
                                     value={password}
                                     onChange={(e) => setPassword(e.target.value)}
                                     className="w-full pl-10 pr-10 py-2.5 bg-white border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500 transition-colors"
diff --git a/src/Pages/internify/SettingsPage.tsx b/src/Pages/internify/SettingsPage.tsx
index ed0c717..6a185f1 100644
--- a/src/Pages/internify/SettingsPage.tsx
+++ b/src/Pages/internify/SettingsPage.tsx
@@ -3,7 +3,7 @@ import { useCurrentUser, useUpdateProfile } from "../../hooks/useUser";
 import { customToast } from "../utils/showToast";
 import { Pen } from "lucide-react";
 
-export default function MentorSettingsPage() {
+export default function SettingsPage() {
   const { user, loading: userLoading } = useCurrentUser();
   const { save, loading: saving, error: errorMsg, successMsg } = useUpdateProfile();
   const isIntern = user?.role === "intern";
@@ -23,9 +23,7 @@ export default function MentorSettingsPage() {
     if (user) {
       setFormData({
         fullName:
-          user.full_name ||
-          `${user.nama_depan ?? ""} ${user.nama_belakang ?? ""}`.trim() ||
-          "",
+          user.full_name || "",
         email: user.email || "",
         bio: user.professional_bio || "",
       });
@@ -121,7 +119,7 @@ export default function MentorSettingsPage() {
           <div className="flex items-center gap-5 py-2">
             {/* Avatar dengan badge edit */}
             <div className="relative flex-shrink-0">
-              <div className="w-20 h-20 rounded-xl border-2 border-red-100 overflow-hidden bg-gray-100 flex items-center justify-center shadow-sm">
+              <div className="w-16 h-16 rounded-xl border-2 border-red-100 overflow-hidden bg-gray-100 flex items-center justify-center shadow-sm">
                 {photoPreview && !imageError ? (
                   <img
                     src={photoPreview}
@@ -147,7 +145,7 @@ export default function MentorSettingsPage() {
             </div>
 
             {/* Info & Action Buttons */}
-            {!isIntern &&
+            {!isIntern ? (
               <div>
                 <h3 className="text-sm font-bold text-gray-900 mb-0.5">Profile Photo</h3>
                 <p className="text-xs text-gray-400 mb-3">
@@ -175,7 +173,12 @@ export default function MentorSettingsPage() {
                   </button>
                 </div>
               </div>
-            }
+            ) : (
+              <div>
+                <h3 className="text-sm font-bold text-gray-900 mb-0.5">Nama</h3>
+                <p className="text-base text-gray-700 font-medium">{user?.full_name || formData.fullName || 'User'}</p>
+              </div>
+            )}
 
             {/* Hidden file input */}
             <input
diff --git a/src/Pages/internify/intern/ForumTab.tsx b/src/Pages/internify/intern/ForumTab.tsx
index c0671ca..8906031 100644
--- a/src/Pages/internify/intern/ForumTab.tsx
+++ b/src/Pages/internify/intern/ForumTab.tsx
@@ -12,19 +12,17 @@ export default function ForumTab({ project }: { project: Project }) {
       <HeroProject title={project.project_name} description={project.description} />
 
       {/* Loading skeleton */}
-      {/* {loading && (
+      {loading && (
         <div className="flex flex-col gap-3 mt-5">
           {[...Array(3)].map((_, i) => (
             <div key={i} className="h-24 bg-gray-100 rounded-xl animate-pulse" />
           ))}
         </div>
-      )} */}
+      )}
 
       {/* Error */}
       {error && <p className="text-red-500 text-sm mt-5">{error}</p>}
 
-      {/* Timeline + Task list — hanya tampil jika ada task */}
-      {/* {!loading && tasks.length === 0 ? ( */}
       {tasks.length === 0 ? (
         <p className="text-md text-font-shade mt-5">Belum ada tugas yang dapat dikerjakan.</p>
       ) : (
diff --git a/src/Pages/internify/intern/TaskSubmission.tsx b/src/Pages/internify/intern/TaskSubmission.tsx
index 29e5ea2..9d5ad9c 100644
--- a/src/Pages/internify/intern/TaskSubmission.tsx
+++ b/src/Pages/internify/intern/TaskSubmission.tsx
@@ -3,12 +3,16 @@ import { FileText, Info } from "lucide-react";
 import TaskFormFile from "./components/TaskForm-file";
 import TaskFormLink from "./components/TaskForm-link";
 import { useTaskDetail } from "../../../hooks/useTasks";
+import { useProjectDetail } from "../../../hooks/useProjects";
 
 export default function TaskSubmission() {
   const [searchParams] = useSearchParams();
   const { slug, taskSlug } = useParams<{ slug: string; taskSlug: string }>();
   const submissionType = (searchParams.get("type") ?? "file") as "file_upload" | "url_link";
   const { task, loading, error } = useTaskDetail(taskSlug!, slug);
+  const { project } = useProjectDetail(slug!);
+
+  const isProjectActive = project?.status === "active";
 
   const formatDeadline = (dateStr: string) =>
     new Date(dateStr).toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" });
@@ -53,6 +57,7 @@ export default function TaskSubmission() {
             projectId={String(task.project.id)}
             deadline={new Date(task.deadline_at)}
             initialSubmission={task.my_submission}
+            isProjectActive={isProjectActive}
           />
         ) : (
           <TaskFormLink
@@ -60,6 +65,7 @@ export default function TaskSubmission() {
             projectId={String(task.project.id)}
             deadline={new Date(task.deadline_at)}
             initialSubmission={task.my_submission}
+            isProjectActive={isProjectActive}
           />
         )}
 
diff --git a/src/Pages/internify/intern/components/HomeHeader.tsx b/src/Pages/internify/intern/components/HomeHeader.tsx
index e92091b..16475ae 100644
--- a/src/Pages/internify/intern/components/HomeHeader.tsx
+++ b/src/Pages/internify/intern/components/HomeHeader.tsx
@@ -7,7 +7,7 @@ const HomeHeader = () => {
   useEffect(() => {
   api.get("/auth-api/me")
     .then((res) => {
-      setName(res.data.data.full_name || res.data.data.nama_depan);
+      setName(res.data.data.full_name || (res.data.data.nama_depan + " " + res.data.data.nama_belakang));
     })
     .catch((err) => {
       console.error("Failed to fetch user:", err);
diff --git a/src/Pages/internify/intern/components/ProjectTimeline.tsx b/src/Pages/internify/intern/components/ProjectTimeline.tsx
index 8b2314c..b0deaa3 100644
--- a/src/Pages/internify/intern/components/ProjectTimeline.tsx
+++ b/src/Pages/internify/intern/components/ProjectTimeline.tsx
@@ -8,7 +8,7 @@ export default function ProjectTimeline({ tasks }: { tasks: InternTaskItem[] })
   today.setHours(0, 0, 0, 0);
   return (
     <div className="">
-      <div className="flex items-center gap-1.5 mb-4 justify-between">
+      <div className="flex items-center gap-1.5 mb-1 md:mb-4 justify-between">
         <span className="font-semibold text-md text-font-shade">Timeline</span>
       </div>
       <ul className="relative pl-4">
@@ -20,7 +20,6 @@ export default function ProjectTimeline({ tasks }: { tasks: InternTaskItem[] })
           const active = isToday || isPast;
           return (
             <li key={task.id} className="relative mb-6 list-none">
-              {/* Vertical line ke bawah, kecuali item terakhir */}
               {index < tasks.length - 1 && (
                 <div className="absolute -left-[1.0625rem] top-3 w-px h-full bg-[#ddd]" />
               )}
@@ -30,10 +29,10 @@ export default function ProjectTimeline({ tasks }: { tasks: InternTaskItem[] })
                   active ? 'bg-red' : 'bg-gray-400'
                 } ${isToday ? 'shadow-md' : ''}`}
               />
-              <div className={`text-[11px] font-semibold ${isToday ? 'text-[#C0392B]' : 'text-[#888]'}`}>
+              <div className={`text-[11px] font-semibold ${isToday ? 'text-red' : 'text-font'}`}>
                 {isToday ? 'Hari ini' : formatDate(task.deadline_at)}
               </div>
-              <div className="text-xs text-[#555] mt-px leading-[1.3]">
+              <div className="text-xs text-font mt-px leading-[1.3]">
                 {task.title}
               </div>
             </li>
diff --git a/src/Pages/internify/intern/components/SubmissionStatusTable.tsx b/src/Pages/internify/intern/components/SubmissionStatusTable.tsx
index b902f73..4bce00b 100644
--- a/src/Pages/internify/intern/components/SubmissionStatusTable.tsx
+++ b/src/Pages/internify/intern/components/SubmissionStatusTable.tsx
@@ -10,6 +10,7 @@ interface SubmitStatusTableProps {
   deadline?: Date;
   onEdit: () => void;
   onDelete: () => void;
+  disabled: boolean;
 }
 
 function getTimeEarly(submittedAt: Date, deadline: Date): string {
@@ -32,6 +33,7 @@ export default function SubmitStatusTable({
   deadline,
   onEdit,
   onDelete,
+  disabled = false,
 }: SubmitStatusTableProps) {
   const [confirmDelete, setConfirmDelete] = useState(false);
 
@@ -86,13 +88,15 @@ export default function SubmitStatusTable({
           <div className="flex gap-2">
             <button
               onClick={onEdit}
-              className="text-xs font-medium px-4 py-1.5 rounded-lg bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors"
+              disabled={disabled}
+              className="text-xs font-medium px-4 py-1.5 rounded-lg bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white"
             >
               Edit Submission
             </button>
             <button
               onClick={() => setConfirmDelete(true)}
-              className="text-xs font-medium px-4 py-1.5 rounded-lg bg-white border border-gray-300 text-gray-700 hover:text-red-700 hover:bg-red-50 hover:border-red-200 transition-colors"
+              disabled={disabled}
+              className="text-xs font-medium px-4 py-1.5 rounded-lg bg-white border border-gray-300 text-gray-700 hover:text-red-700 hover:bg-red-50 hover:border-red-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white"
             >
               Delete Submission
             </button>
diff --git a/src/Pages/internify/intern/components/TaskForm-file.tsx b/src/Pages/internify/intern/components/TaskForm-file.tsx
index 4588d6f..2edf76a 100644
--- a/src/Pages/internify/intern/components/TaskForm-file.tsx
+++ b/src/Pages/internify/intern/components/TaskForm-file.tsx
@@ -11,9 +11,10 @@ interface TaskFormFileProps {
   projectId?: string;
   deadline?: Date;
   initialSubmission?: TaskSubmissionData | null;
+  isProjectActive?: boolean;
 }
 
-export default function TaskFormFile({ taskId, projectId, deadline, initialSubmission }: TaskFormFileProps) {
+export default function TaskFormFile({ taskId, projectId, deadline, initialSubmission, isProjectActive = true }: TaskFormFileProps) {
   const { submission, loading, submitFile, updateFile, remove } = useSubmission(taskId, initialSubmission, projectId);
   const [files, setFiles] = useState<File[]>([]);
   const [isDragActive, setIsDragActive] = useState(false);
@@ -119,6 +120,7 @@ export default function TaskFormFile({ taskId, projectId, deadline, initialSubmi
         deadline={deadline}
         onEdit={() => setIsEditing(true)}
         onDelete={handleDelete}
+        disabled={!isProjectActive} 
       />
     );
   }
@@ -188,8 +190,8 @@ export default function TaskFormFile({ taskId, projectId, deadline, initialSubmi
           </button>
         )}
         <button
-          type="submit" disabled={loading}
-          className="w-full bg-[#B30000] hover:bg-[#990000] disabled:opacity-60 text-white font-bold py-3 rounded-xl transition-colors shadow-md flex items-center justify-center gap-2 tracking-wide cursor-pointer"
+          type="submit" disabled={loading || !isProjectActive}
+          className="w-full bg-[#B30000] hover:bg-[#990000] disabled:opacity-60 text-white font-bold py-3 rounded-xl transition-colors shadow-md flex items-center justify-center gap-2 tracking-wide cursor-pointer disabled:cursor-not-allowed disabled:hover:bg-[#990000]"
         >
           {loading ? "Mengirim..." : isEditing ? "Update Submission" : "Save Changes"}
           <LuSendHorizontal className="w-4 h-4 stroke-[2.5]" />
diff --git a/src/Pages/internify/intern/components/TaskForm-link.tsx b/src/Pages/internify/intern/components/TaskForm-link.tsx
index e39780e..43a2a34 100644
--- a/src/Pages/internify/intern/components/TaskForm-link.tsx
+++ b/src/Pages/internify/intern/components/TaskForm-link.tsx
@@ -11,13 +11,15 @@ interface TaskFormLinkProps {
   projectId?: string;
   deadline?: Date;
   initialSubmission?: TaskSubmissionData | null;
+  isProjectActive?: boolean;
 }
 
 export default function TaskFormLink({
   taskId,
   projectId,
   deadline,
-  initialSubmission
+  initialSubmission,
+  isProjectActive = true,
 }: TaskFormLinkProps) {
   const { submission, loading, submitLink, updateLink, remove } = useSubmission(taskId, initialSubmission, projectId);
   const [inputLink, setInputLink] = useState(initialSubmission?.url_link ?? "");
@@ -88,6 +90,7 @@ export default function TaskFormLink({
         deadline={deadline}
         onEdit={() => setIsEditing(true)}
         onDelete={handleDelete}
+        disabled={!isProjectActive} 
       />
     );
   }
@@ -115,8 +118,8 @@ export default function TaskFormLink({
         </p>
       </div>
       <button
-        type="submit" disabled={loading}
-        className="w-full bg-[#B30000] hover:bg-[#990000] disabled:opacity-60 text-white font-bold py-3 rounded-xl transition-colors shadow-md flex items-center justify-center gap-2 tracking-wide cursor-pointer"
+        type="submit" disabled={loading || !isProjectActive}
+        className="w-full bg-[#B30000] hover:bg-[#990000] disabled:opacity-60 text-white font-bold py-3 rounded-xl transition-colors shadow-md flex items-center justify-center gap-2 tracking-wide cursor-pointer disabled:cursor-not-allowed disabled:hover:bg-[#990000]"
       >
         {loading ? "Mengirim..." : isEditing ? "Update Submission" : "Submit Task"}
         <LuSendHorizontal className="w-4 h-4 stroke-[2.5]" />
diff --git a/src/Pages/internify/mentor/BaseProjectsPage.tsx b/src/Pages/internify/mentor/BaseProjectsPage.tsx
index d78c925..05dac88 100644
--- a/src/Pages/internify/mentor/BaseProjectsPage.tsx
+++ b/src/Pages/internify/mentor/BaseProjectsPage.tsx
@@ -6,7 +6,7 @@ import { useProjectsByRole } from '../../../hooks/useListProjects';
 
 export default function MentorProjectsPage() {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const { projects, loading, error, refetch } = useProjectsByRole();
+  const { projects, loading, error, refetch } = useProjectsByRole("active");
 
   const openDialog = () => {
     setIsModalOpen(true);
@@ -49,12 +49,12 @@ export default function MentorProjectsPage() {
 
       <div className="flex flex-wrap gap-4 items-stretch">
         {projects.map(project => (
-          <MentorProjectCard 
-          key={project.id}
-          {...project}
-          onArchived={refetch}
-          onCompleted={refetch}
-         />
+          <MentorProjectCard
+            key={project.id}
+            {...project}
+            onArchived={refetch}
+            onCompleted={refetch}
+          />
         ))}
       </div>
 
diff --git a/src/Pages/internify/mentor/MentorProjectDetailPage.tsx b/src/Pages/internify/mentor/MentorProjectDetailPage.tsx
index 34bd433..6f1c37d 100644
--- a/src/Pages/internify/mentor/MentorProjectDetailPage.tsx
+++ b/src/Pages/internify/mentor/MentorProjectDetailPage.tsx
@@ -4,6 +4,7 @@ import { Calendar, Edit } from "lucide-react";
 import EditSubmissionModal from "./components/EditSubmissionTask";
 import { useTaskSubmissions } from "../../../hooks/useTasks";
 import type { ProjectTask } from "../../../types/task.types";
+import { useProjectDetail } from "../../../hooks/useProjects";
 
 const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
 
@@ -12,14 +13,13 @@ export default function MentorProjectsDetailPage() {
   const { slug, taskSlug } = useParams<{ slug: string; taskSlug: string }>();
   const { task, loading, error, refetch } = useTaskSubmissions(taskSlug!, slug);
   const [openModal, setOpenModal] = useState(false);
+  const { project } = useProjectDetail(slug!);
+  const isProjectActive = project?.status === "active"
 
-  // Di MentorProjectsDetailPage
   const handleEditSuccess = (updatedTask: ProjectTask) => {
     if (updatedTask.slug !== taskSlug) {
-      // Slug berubah, navigate ke URL baru
       navigate(`/mentor/projects/${slug}/${updatedTask.slug}`, { replace: true });
     } else {
-      // Slug sama, cukup refetch
       refetch();
     }
   };
@@ -50,8 +50,9 @@ export default function MentorProjectsDetailPage() {
       <div className="flex justify-between items-center mb-6">
         <h1 className="text-3xl font-bold text-[#1a1a1a]">{task.title}</h1>
         <button
-          className="flex items-center gap-2 border border-gray-400 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 transition-all"
+          className="flex items-center gap-2 border border-gray-400 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
           onClick={() => setOpenModal(true)}
+          disabled={!isProjectActive}
         >
           <Edit size={16} />
           Edit Task
diff --git a/src/Pages/internify/mentor/ProjectForumTab.tsx b/src/Pages/internify/mentor/ProjectForumTab.tsx
index 405736b..088e267 100644
--- a/src/Pages/internify/mentor/ProjectForumTab.tsx
+++ b/src/Pages/internify/mentor/ProjectForumTab.tsx
@@ -5,17 +5,13 @@ import { useProjectTasks } from '../../../hooks/useTasks';
 import type { Project } from '../../../types/project.types';
 
 export default function MentorForumTab({ project }: { project: Project }) {
-  // Gunakan project.id dari props — route pakai :slug, bukan :id
   const { tasks, loading, error } = useProjectTasks(project.id);
 
   if (error) return <div>Error: {error}</div>;
 
   return (
     <div>
-      {/* Hero banner */}
       <HeroProject title={project.project_name} description={project.description} />
-
-      {/* Loading skeleton */}
       {loading && (
         <div className="flex flex-col gap-3 mt-5">
           {[...Array(3)].map((_, i) => (
@@ -24,18 +20,15 @@ export default function MentorForumTab({ project }: { project: Project }) {
         </div>
       )}
 
-      {/* Timeline + Task list — hanya tampil jika ada task */}
       {!loading && tasks.length === 0 ? (
         <p className="text-md text-font-shade mt-5">Belum ada tugas yang dikerjakan.</p>
       ) : (
         !loading && (
           <div className="flex flex-col gap-7 md:flex-row md:items-start mt-5">
-            {/* Kolom kiri: Timeline */}
             <div className="w-full md:w-1/5 bg-white rounded-xl p-5 border border-box-border shrink-0">
               <ProjectTimeline tasks={tasks} />
             </div>
 
-            {/* Kolom kanan: Task cards */}
             <div className="w-full border-t border-box-border md:border-t-0 pt-4 md:pt-0 md:w-4/5">
               {tasks.map((task) => (
                 <MentorTaskCard key={task.id} task={task} />
diff --git a/src/Pages/internify/mentor/ProjectsInternTab.tsx b/src/Pages/internify/mentor/ProjectsInternTab.tsx
index a04563f..03e0690 100644
--- a/src/Pages/internify/mentor/ProjectsInternTab.tsx
+++ b/src/Pages/internify/mentor/ProjectsInternTab.tsx
@@ -9,6 +9,7 @@ export default function InternsTab({ project }: { project: ProjectDetail }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [members, setMembers] = useState<ProjectMember[]>(project.members);
   const { remove, loading } = useRemoveMember();
+  const isProjectActive = project?.status === "active"
 
   const handleModalClose = (finalMembers: ProjectMember[]) => {
     setMembers(finalMembers);
@@ -58,7 +59,9 @@ export default function InternsTab({ project }: { project: ProjectDetail }) {
           </h3>
           <button 
             onClick={() => setIsModalOpen(true)}
-            className='bg-gray-300 border border-gray-500 px-2 py-1 rounded-md hover:bg-gray-400 transition-colors'
+            disabled={!isProjectActive}
+            className={`border border-gray-500 px-2 py-1 rounded-md transition-colors ${!isProjectActive ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-gray-300 hover:bg-gray-400'
+              }`}
           >
             <span className='flex items-center gap-3 text-[11px]'>
               <Plus className='w-3 h-3'/>Add
@@ -82,8 +85,8 @@ export default function InternsTab({ project }: { project: ProjectDetail }) {
             <div>
               <button 
                 onClick={() => handleRemove(member.id)}
-                disabled={loading}
-                className='flex items-center gap-1 text-[11px] bg-red-600 text-white py-1 px-2 rounded-md disabled:opacity-50 hover:bg-red-700 transition-colors'
+                disabled={loading || !isProjectActive}
+                className='flex items-center gap-1 text-[11px] bg-red-600 text-white py-1 px-2 rounded-md disabled:opacity-50 hover:bg-red-700 transition-colors disabled:cursor-not-allowed'
               >
                 <Plus className='w-4 h-4'/>Delete
               </button>
diff --git a/src/Pages/internify/mentor/TaskTab.tsx b/src/Pages/internify/mentor/TaskTab.tsx
index d882675..7ce84e9 100644
--- a/src/Pages/internify/mentor/TaskTab.tsx
+++ b/src/Pages/internify/mentor/TaskTab.tsx
@@ -1,6 +1,5 @@
 import { useProjectTasks, useDeleteTask } from '../../../hooks/useTasks';
-import type { ProjectDetail } from '../../../types/project.types';
-import type { ProjectTask } from '../../../types/task.types';
+import type { InternTaskItem, ProjectDetail } from '../../../types/project.types';
 import { ClipboardList, Pencil, Trash2 } from 'lucide-react';
 import { useState } from 'react';
 import CreateTaskModal from './components/CreateTaskDialog';
@@ -12,9 +11,13 @@ export default function TaskTab({ project }: { project: ProjectDetail }) {
   const { remove } = useDeleteTask();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [editModalOpen, setEditModalOpen] = useState(false);
-  const [selectedTask, setSelectedTask] = useState<ProjectTask | null>(null);
+  const [selectedTask, setSelectedTask] = useState<InternTaskItem | null>(null);
+  const isProjectActive = project?.status === "active"
+
+  const handleDeleteTask = async (taskId: number, taskTitle: string) => {
+    const confirmed = window.confirm(`Yakin ingin menghapus task “${taskTitle}”?`);
+    if (!confirmed) return;
 
-  const handleDeleteTask = async (taskId: number,taskTitle: string) => {
     const del = await remove(taskId, String(project.id));
     if (del) {
       try {
@@ -42,7 +45,8 @@ export default function TaskTab({ project }: { project: ProjectDetail }) {
         <h2 className="text-3xl font-bold text-slate-800 tracking-tight">Tasks</h2>
         <button
           onClick={() => setIsModalOpen(true)}
-          className="bg-[#C0392B] hover:bg-[#A93226] text-white px-6 py-2.5 rounded-full font-bold text-sm transition-colors shadow-sm"
+          disabled={!isProjectActive}
+          className="border border-gray-500 text-font-shade rounded-lg px-2 py-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
         >
           Add Task
         </button>
@@ -65,13 +69,15 @@ export default function TaskTab({ project }: { project: ProjectDetail }) {
               <div className="flex items-center gap-4 text-slate-600 shrink-0">
                 <button
                   onClick={() => { setSelectedTask(task); setEditModalOpen(true); }}
-                  className="hover:text-blue-600 transition-colors p-1"
+                  disabled={!isProjectActive}
+                  className="border border-gray-500 text-font-shade rounded-lg px-2 py-1 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   <Pencil size={20} />
                 </button>
                 <button
                   onClick={() => handleDeleteTask(task.id, task.title)}
-                  className="hover:text-red-600 transition-colors p-1"
+                  disabled={!isProjectActive}
+                  className="border border-gray-500 text-font-shade rounded-lg px-2 py-1 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   <Trash2 size={20} />
                 </button>
diff --git a/src/Pages/internify/mentor/ViewInternSubmission.tsx b/src/Pages/internify/mentor/ViewInternSubmission.tsx
index a68b5d3..db629ef 100644
--- a/src/Pages/internify/mentor/ViewInternSubmission.tsx
+++ b/src/Pages/internify/mentor/ViewInternSubmission.tsx
@@ -42,7 +42,7 @@ export default function ViewInternSubmission() {
     );
 
   return (
-    <div className="space-y-4">
+    <div className="pt-8 space-y-4">
       {/* Header */}
       <div className="w-full bg-box-secondary rounded-2xl border border-box-border p-6">
         <div className="space-y-1">
diff --git a/src/Pages/internify/mentor/components/ArchiveProjectDialog.tsx b/src/Pages/internify/mentor/components/ArchiveProjectDialog.tsx
index 1c46ab5..8988f4b 100644
--- a/src/Pages/internify/mentor/components/ArchiveProjectDialog.tsx
+++ b/src/Pages/internify/mentor/components/ArchiveProjectDialog.tsx
@@ -47,8 +47,8 @@ export default function ArchiveProjectDialog({
       {/* Header */}
       <div className="dialog-header">
         <div className="flex items-center gap-2.5 px-3">
-          <div className="w-9 h-9 rounded-full bg-yellow-100 flex items-center justify-center shrink-0">
-            <Archive className="w-4 h-4 text-yellow-600" />
+          <div className="w-9 h-9 rounded-full bg-red-100 flex items-center justify-center shrink-0">
+            <Archive className="w-4 h-4 text-red-600" />
           </div>
           <div>
             <h2 className="text-base font-bold text-gray-900 tracking-tight">
@@ -74,8 +74,8 @@ export default function ArchiveProjectDialog({
           Apakah kamu yakin ingin mengarsipkan project{" "}
           <span className="font-semibold text-gray-900">"{projectName}"</span>?
         </p>
-        <div className="bg-yellow-50 border border-yellow-200 rounded-lg px-4 py-3">
-          <p className="text-xs text-yellow-700 leading-relaxed">
+        <div className="bg-red-50 border border-red-200 rounded-lg px-4 py-3">
+          <p className="text-xs text-red-700 leading-relaxed">
             <span className="font-bold">Perhatian:</span> Project yang diarsipkan
             tidak akan bisa diakses oleh intern dan tidak muncul di daftar aktif.
             Kamu masih bisa melihatnya di tab Archived.
@@ -96,7 +96,7 @@ export default function ArchiveProjectDialog({
             type="button"
             onClick={onConfirm}
             disabled={loading}
-            className="w-full sm:flex-1 py-2.5 bg-yellow-500 hover:bg-yellow-600 disabled:opacity-60 text-white text-sm font-bold rounded-xl transition-colors shadow-md flex items-center justify-center gap-2"
+            className="w-full sm:flex-1 py-2.5 bg-red-500 hover:bg-red-600 disabled:opacity-60 text-white text-sm font-bold rounded-xl transition-colors shadow-md flex items-center justify-center gap-2"
           >
             <Archive className="w-4 h-4" />
             {loading ? "Mengarsipkan..." : "Ya, Arsipkan"}
diff --git a/src/Pages/internify/mentor/components/CreateProjectDialog.tsx b/src/Pages/internify/mentor/components/CreateProjectDialog.tsx
index b053330..43f8058 100644
--- a/src/Pages/internify/mentor/components/CreateProjectDialog.tsx
+++ b/src/Pages/internify/mentor/components/CreateProjectDialog.tsx
@@ -27,18 +27,6 @@ export default function CreateProjectModal({ isOpen, onClose, onSuccess }: Creat
   const [showDropdown, setShowDropdown] = useState(false);
   const emailSectionRef = useRef<HTMLDivElement>(null);
 
-  // Tutup dropdown saat klik di luar area input
-  const handleClickOutside = useCallback((e: MouseEvent) => {
-    if (emailSectionRef.current && !emailSectionRef.current.contains(e.target as Node)) {
-      setShowDropdown(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [handleClickOutside]);
-
   const projectIcons = PROJECT_ICON_CODES.map((id) => ({
     id,
     icon: PROJECT_ICON_MAP[id],
@@ -77,11 +65,6 @@ export default function CreateProjectModal({ isOpen, onClose, onSuccess }: Creat
     }
   };
 
-  // const handleAddEmailFromForm = (e: React.FormEvent) => {
-  //   e.preventDefault();
-  //   handleAddEmail();
-  // };
-
   const handleRemoveEmail = (emailToRemove: string) => {
     setInvitedEmails(invitedEmails.filter(email => email !== emailToRemove));
   };
@@ -171,7 +154,7 @@ export default function CreateProjectModal({ isOpen, onClose, onSuccess }: Creat
             placeholder="e.g., Q3 Infrastructure Upgrade"
             value={projectName}
             onChange={(e) => setProjectName(e.target.value)}
-            className="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-lg text-sm placeholder-gray-400 text-gray-800 focus:outline-none focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium"
+            className="w-full px-4 py-2.5 bg-white border border-card-outline rounded-lg text-sm placeholder-gray-400 text-gray-800 focus:outline-none focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium"
           />
         </div>
 
@@ -185,7 +168,7 @@ export default function CreateProjectModal({ isOpen, onClose, onSuccess }: Creat
             placeholder="Outline the project goals, deliverables, and technical requirements..."
             value={projectDescription}
             onChange={(e) => setProjectDescription(e.target.value)}
-            className="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-lg text-sm placeholder-gray-400 text-gray-800 focus:outline-none focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium resize-none leading-relaxed"
+            className="w-full px-4 py-2.5 bg-white border border-card-outline rounded-lg text-sm placeholder-gray-400 text-gray-800 focus:outline-none focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium resize-none leading-relaxed"
           />
         </div>
 
@@ -213,12 +196,12 @@ export default function CreateProjectModal({ isOpen, onClose, onSuccess }: Creat
                   }
                   if (e.key === 'Escape') setShowDropdown(false);
                 }}
-                className="w-full pl-10 pr-20 py-2.5 bg-white border border-gray-200 rounded-lg text-sm placeholder-gray-400 text-gray-800 focus:outline-none focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium"
+                className="w-full pl-10 pr-20 py-2.5 bg-white border border-card-outline rounded-lg text-sm placeholder-gray-400 text-gray-800 focus:outline-none focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium"
               />
               <button
                 type="button"
                 onClick={() => handleAddEmail()}
-                className="absolute right-2 px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-800 text-[11px] font-bold rounded-md transition-colors tracking-wider uppercase"
+                className="absolute right-2 px-3 py-1 bg-card hover:bg-card-hover border border-card-outline text-font-shade text-[11px] font-bold rounded-md transition-colors tracking-wider uppercase"
               >
                 ADD
               </button>
@@ -226,7 +209,7 @@ export default function CreateProjectModal({ isOpen, onClose, onSuccess }: Creat
 
             {/* Dropdown daftar intern */}
             {showDropdown && (
-              <div className="absolute z-10 mt-1 w-full bg-white border border-gray-200 rounded-xl shadow-lg max-h-44 overflow-y-auto">
+              <div className="absolute z-10 mt-1 w-full bg-white border border-card-outline rounded-xl shadow-lg max-h-44 overflow-y-auto">
                 {loadingInterns ? (
                   <p className="text-xs text-gray-400 text-center py-3">Memuat data intern...</p>
                 ) : (() => {
@@ -244,13 +227,10 @@ export default function CreateProjectModal({ isOpen, onClose, onSuccess }: Creat
                         key={intern.id}
                         type="button"
                         onMouseDown={(e) => { e.preventDefault(); handleAddEmail(intern.email); }}
-                        className="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 transition-colors text-left"
+                        className="w-full flex items-center gap-3 px-6 py-2.5 hover:bg-gray-50 transition-colors text-left"
                       >
-                        <div className="w-7 h-7 rounded-full bg-red-100 text-red-700 flex items-center justify-center text-[10px] font-bold shrink-0">
-                          {intern.full_name.split(' ').slice(0, 2).map((n) => n[0]).join('').toUpperCase()}
-                        </div>
                         <div className="flex flex-col min-w-0">
-                          <span className="text-xs font-semibold text-gray-800 truncate">{intern.full_name}</span>
+                          <span className="text-[13px] font-semibold text-gray-800 truncate">{intern.full_name}</span>
                           <span className="text-[11px] text-gray-400 truncate">{intern.email}</span>
                         </div>
                       </button>
@@ -294,7 +274,7 @@ export default function CreateProjectModal({ isOpen, onClose, onSuccess }: Creat
                 required
                 value={startDate}
                 onChange={(e) => setStartDate(e.target.value)}
-                className="w-full px-3 py-2.5 bg-white border border-gray-200 rounded-lg text-sm text-gray-800 focus:outline-none focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium appearance-none"
+                className="w-full px-3 py-2.5 bg-white border border-card-outline rounded-lg text-sm text-gray-800 focus:outline-none focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium appearance-none"
               />
               <span className="absolute right-3.5 top-3 text-gray-400 pointer-events-none">
               </span>
@@ -312,7 +292,7 @@ export default function CreateProjectModal({ isOpen, onClose, onSuccess }: Creat
                 required
                 value={endDate}
                 onChange={(e) => setEndDate(e.target.value)}
-                className="w-full px-3 py-2.5 bg-white border border-gray-200 rounded-lg text-sm text-gray-800 focus:outline-none focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium appearance-none"
+                className="w-full px-3 py-2.5 bg-white border border-card-outline rounded-lg text-sm text-gray-800 focus:outline-none focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium appearance-none"
               />
               <span className="absolute right-3.5 top-3 text-gray-400 pointer-events-none">
               </span>
@@ -329,7 +309,7 @@ export default function CreateProjectModal({ isOpen, onClose, onSuccess }: Creat
           <button
             type="button"
             onClick={onClose}
-            className="w-full sm:w-[150px] py-2.5 border border-gray-200 rounded-xl text-sm font-semibold text-gray-500 hover:text-gray-700 hover:bg-gray-50 transition-colors"
+            className="w-full sm:w-[150px] py-2.5 border border-card-outline rounded-xl text-sm font-semibold text-gray-500 hover:text-gray-700 hover:bg-gray-50 transition-colors"
           >
             Cancel
           </button>
diff --git a/src/Pages/internify/mentor/components/EditTaskDialog.tsx b/src/Pages/internify/mentor/components/EditTaskDialog.tsx
index b205027..e1ee44e 100644
--- a/src/Pages/internify/mentor/components/EditTaskDialog.tsx
+++ b/src/Pages/internify/mentor/components/EditTaskDialog.tsx
@@ -1,13 +1,14 @@
 import { useRef, useEffect, useState } from "react";
 import { X, FileText, Link } from "lucide-react";
 import { useUpdateTask } from '../../../../hooks/useTasks';
-import type { ProjectTask, SubmissionType } from '../../../../types/task.types';
+import type { SubmissionType } from '../../../../types/task.types';
 import { customToast } from '../../../utils/showToast';
+import type { InternTaskItem } from "../../../../types/project.types";
 
 interface EditTaskModalProps {
   isOpen: boolean;
   onClose: () => void;
-  task: ProjectTask;
+  task: InternTaskItem;
   onSuccess: () => void;
 }
 
diff --git a/src/Pages/internify/mentor/components/EligibleInternTable.tsx b/src/Pages/internify/mentor/components/EligibleInternTable.tsx
index 0a84bf5..7dbc097 100644
--- a/src/Pages/internify/mentor/components/EligibleInternTable.tsx
+++ b/src/Pages/internify/mentor/components/EligibleInternTable.tsx
@@ -19,6 +19,8 @@ import Avatar from "../../Avatar";
 import ProgressBar from "../../ProgressBar";
 import { customToast } from "../../../utils/showToast";
 import type { Project } from "../../../../types/project.types";
+import { previewCertificate } from "../../../utils/Certificates";
+import type { Certificate } from "../../../../types/certificate.types";
 
 interface EligibleInternTableProps {
   interns: InternSubmissionProgress[];
@@ -72,6 +74,32 @@ export default function EligibleInternTable({
   const [generating, setGenerating] = useState(false);
   const [generateError, setGenerateError] = useState<string | null>(null);
 
+  const handlePreview = (intern: InternSubmissionProgress) => {
+    if (!project?.certificate_template) {
+      customToast.error("Template belum ada", "Template sertifikat belum diupload.");
+      return;
+    }
+    const mockCert: Certificate = {
+      id: intern.id_user,
+      id_project: project.id,
+      id_user: intern.id_user,
+      certificate_no: "PREVIEW",
+      issued_at: new Date().toISOString(),
+      uuid: "preview-mode",
+      user: {
+        id: intern.id_user,
+        full_name: intern.full_name,
+        email: intern.email,
+      },
+      project: {
+        id: project.id,
+        project_name: project.project_name,
+        description: project.description,
+      },
+    };
+    previewCertificate(mockCert, project.certificate_template);
+  };
+
   const [page, setPage] = useState(1);
   const totalPages = Math.ceil(interns.length / PER_PAGE);
   const paginated = interns.slice((page - 1) * PER_PAGE, page * PER_PAGE);
@@ -113,7 +141,7 @@ export default function EligibleInternTable({
         const templateUrl = resolveImageUrl(project.certificate_template!);
 
         const duration = formatDateRange(project.start_date, project.end_date);
-        
+
         await Promise.all(
           result.map(async (cert) => {
             const verifyUrl = `${window.location.origin}/verify-certificate/${cert.uuid}`;
@@ -253,7 +281,11 @@ export default function EligibleInternTable({
                       Nag Intern
                     </button>
                   ) : (
-                    <button className="p-1.5 text-gray-400 hover:text-gray-700 hover:bg-gray-100 rounded-md transition-colors" title="View">
+                    <button
+                      onClick={() => handlePreview(intern)}
+                      className="p-1.5 text-gray-400 hover:text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
+                      title="Preview Certificate"
+                    >
                       <Eye className="w-4 h-4" />
                     </button>
                   )}
diff --git a/src/Pages/internify/mentor/components/HomeMentorProject.tsx b/src/Pages/internify/mentor/components/HomeMentorProject.tsx
index efd5c0a..d11d2ee 100644
--- a/src/Pages/internify/mentor/components/HomeMentorProject.tsx
+++ b/src/Pages/internify/mentor/components/HomeMentorProject.tsx
@@ -3,29 +3,23 @@ import { useState } from 'react';
 import { Plus } from 'lucide-react';
 import CreateProjectModal from './CreateProjectDialog';
 import { useProjects } from '../../../../hooks/useProjects';
-import * as LucideIcons from 'lucide-react';
-import type { LucideProps } from 'lucide-react';
-
-const getDynamicIcon = (iconName: string) => {
-    const formatted = iconName.charAt(0).toUpperCase() + iconName.slice(1);
-    const Icon = (LucideIcons as unknown as Record<string, React.ComponentType<LucideProps>>)[formatted];
-    return Icon ?? LucideIcons.FolderOpen;
-};
+import { getProjectIcon } from '../../../../lib/ProjectIcons';
 
 const HomeMentorProject = () => {
     const navigate = useNavigate();
     const [isModalOpen, setIsModalOpen] = useState(false);
-    const { projects, loading, error } = useProjects();
-    const openDialog = () => {
-        setIsModalOpen(true);
-    };
-    const closeDialog = () => {
-        setIsModalOpen(false);
-    };
+    const { projects, loading, error, refetch } = useProjects();
+    const openDialog = () => { setIsModalOpen(true) };
+    const closeDialog = () => { setIsModalOpen(false) };
+
+    const handleRefetch = () => {
+        closeDialog();
+        refetch();
+    }
     return (
         <div className='flex flex-col'>
-            <div className='flex flex-row justify-between mb-3 px-5 items-center'>
-                <h2 className="text-lg font-semibold text-gray-800 mb-4">Projects</h2>
+            <div className='flex flex-row justify-between mb-3 items-center'>
+                <h2 className="text-lg font-semibold text-gray-800">Projects</h2>
                 <button
                     className='bg-card p-1.5 rounded-lg font-bold hover:bg-card-hover border border-card-outline'
                     onClick={openDialog} >
@@ -46,7 +40,7 @@ const HomeMentorProject = () => {
                     >
                         <div className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style={{ backgroundColor: project.background_color ?? '#dc2626' }}>
                             {(() => {
-                                const Icon = getDynamicIcon(project.project_icon);
+                                const Icon = getProjectIcon(project.project_icon);
                                 return <Icon className="w-5 h-5 text-white" />;
                             })()}
                         </div>
@@ -60,6 +54,7 @@ const HomeMentorProject = () => {
                 <CreateProjectModal
                     isOpen={isModalOpen}
                     onClose={closeDialog}
+                    onSuccess={handleRefetch}
                 />
             )}
         </div>
diff --git a/src/Pages/internify/mentor/components/InternsTable.tsx b/src/Pages/internify/mentor/components/InternsTable.tsx
index 7c375d4..a5dd9ea 100644
--- a/src/Pages/internify/mentor/components/InternsTable.tsx
+++ b/src/Pages/internify/mentor/components/InternsTable.tsx
@@ -82,31 +82,31 @@ export default function InternsTable({
                     <img
                       src={intern.avatar}
                       alt={intern.name}
-                      className="w-10 h-10 rounded-full object-cover border border-gray-100 shadow-sm"
+                      className="w-10 h-10 rounded-full object-cover border border-gray-100 shadow-sm hidden md:block"
                     />
                   ) : (
-                    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-teal-400 to-emerald-500 flex items-center justify-center border border-gray-100 shadow-sm text-white text-xs font-bold">
+                    <div className=" w-10 h-10 rounded-full bg-gradient-to-br from-teal-400 to-emerald-500 items-center justify-center border border-gray-100 shadow-sm text-white text-xs font-bold hidden md:flex">
                       {intern.name.charAt(0)}
                     </div>
                   )}
                   <div>
-                    <h4 className="text-sm font-bold text-gray-900 leading-tight">{intern.name}</h4>
-                    <p className="text-xs text-gray-400 font-medium mt-0.5">{intern.email}</p>
+                    <h4 className="text-xs md:text-sm font-bold text-gray-900 leading-tight">{intern.name}</h4>
+                    <p className="text-[10px] md:text-xs text-gray-400 font-medium mt-0.5">{intern.email}</p>
                   </div>
                 </div>
 
                 {/* Column 2: Current Project Title & Role Accent */}
                 <div className="w-1/3">
-                  <h5 className={`text-sm font-semibold leading-tight ${isUnassigned ? "text-gray-500 italic" : "text-gray-900"}`}>
+                  <h5 className={`text-xs md:text-sm font-semibold leading-tight ${isUnassigned ? "text-gray-500 italic" : "text-gray-900"}`}>
                     {intern.projectName || "Unassigned"}
                   </h5>
-                  <p className={`text-xs font-bold mt-0.5 ${isUnassigned ? "text-red-500" : "text-red-600"}`}>
+                  <p className={`text-[10px] md:text-xs font-bold mt-0.5 ${isUnassigned ? "text-red-500" : "text-red-600"}`}>
                     {intern.role}
                   </p>
                 </div>
 
                 {/* Column 3: Action Buttons Block Right aligned */}
-                <div className="w-1/6 flex items-center justify-end gap-3.5 pr-2">
+                <div className="w-1/6 flex flex-col md:flex-row items-center justify-end gap-3.5 pr-2">
                   {/* Tombol Add: membuka modal assign member untuk intern ini */}
                   <button
                     onClick={() => onAssign(intern.id)}
diff --git a/src/Pages/internify/mentor/components/MentorProjectCard.tsx b/src/Pages/internify/mentor/components/MentorProjectCard.tsx
index 2bc2657..177bacc 100644
--- a/src/Pages/internify/mentor/components/MentorProjectCard.tsx
+++ b/src/Pages/internify/mentor/components/MentorProjectCard.tsx
@@ -119,7 +119,7 @@ export default function MentorProjectCard({ onArchived, onCompleted, ...project
             ) : project.status === "completed" ? (
               <span className="px-2 py-0.5 bg-blue-100 text-blue-800 rounded-full">Completed</span>
             ) : project.status === "archived" ? (
-              <span className="px-2 py-0.5 bg-yellow-100 text-yellow-800 rounded-full">Archived</span>
+              <span className="px-2 py-0.5 bg-red-100 text-red-800 rounded-full">Archived</span>
             ) : (
               <span className="px-2 py-0.5 bg-gray-100 text-gray-800 rounded-full">Inactive</span>
             )}
@@ -132,7 +132,7 @@ export default function MentorProjectCard({ onArchived, onCompleted, ...project
           <button
             onClick={handleCompleteButtonClick}
             disabled={completeLoading}
-            className="p-1 rounded hover:text-green-600 hover:bg-green-50 transition-colors disabled:opacity-50"
+            className="p-1 rounded hover:text-blue-600 hover:bg-blue-50 transition-colors disabled:opacity-50"
             aria-label={`Selesaikan ${project.project_name}`}
             title="Selesaikan project"
           >
@@ -143,7 +143,7 @@ export default function MentorProjectCard({ onArchived, onCompleted, ...project
           <button
             onClick={handleArchiveButtonClick}
             disabled={archiveLoading}
-            className="p-1 rounded hover:text-yellow-600 hover:bg-yellow-50 transition-colors disabled:opacity-50"
+            className="p-1 rounded hover:text-red-600 hover:bg-red-50 transition-colors disabled:opacity-50"
             aria-label={`Arsipkan ${project.project_name}`}
             title="Arsipkan project"
           >
diff --git a/src/Pages/internify/mentor/components/MentorTaskCard.tsx b/src/Pages/internify/mentor/components/MentorTaskCard.tsx
index cda6dba..acb92ff 100644
--- a/src/Pages/internify/mentor/components/MentorTaskCard.tsx
+++ b/src/Pages/internify/mentor/components/MentorTaskCard.tsx
@@ -1,5 +1,5 @@
 import { useNavigate, useParams } from "react-router-dom";
-import type { ProjectTask } from "../../../../types/task.types";
+import type { InternTaskItem } from "../../../../types/project.types";
 
 const formatDate = (date: string) =>
   new Date(date).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
@@ -7,7 +7,7 @@ const formatDate = (date: string) =>
 const formatTime = (dateStr: string) =>
   new Date(dateStr).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
 
-export default function MentorTaskCard({ task }: {task: ProjectTask}) {
+export default function MentorTaskCard({ task }: {task: InternTaskItem}) {
   const navigate = useNavigate();
   const { slug } = useParams<{ slug: string }>();
 
diff --git a/src/Pages/internify/mentor/components/StatusSubmissionTable.tsx b/src/Pages/internify/mentor/components/StatusSubmissionTable.tsx
index c79965b..c8fd0c8 100644
--- a/src/Pages/internify/mentor/components/StatusSubmissionTable.tsx
+++ b/src/Pages/internify/mentor/components/StatusSubmissionTable.tsx
@@ -31,8 +31,6 @@ export function StatusBadge({ status }: { status: DisplayStatus }) {
   );
 }
 
-// StatusTable
-
 interface StatusTableProps {
   status: DisplayStatus;
   submission: TaskSubmissionData | null;
@@ -46,16 +44,6 @@ export function StatusTable({ status, submission }: StatusTableProps) {
       label: "Submission status",
       value: <StatusBadge status={status} />,
     },
-    {
-      label: "Grading status",
-      value: <span className="text-sm text-gray-400">-</span>,
-    },
-    {
-      label: "Time Remaining",
-      value: status === "overdue"
-        ? <span className="text-sm text-red-600 font-medium">Overdue</span>
-        : <span className="text-sm text-gray-400">-</span>,
-    },
     {
       label: "Submitted at",
       value: submission?.submitted_at
diff --git a/src/hooks/useTasks.ts b/src/hooks/useTasks.ts
index 357a991..95bbb91 100644
--- a/src/hooks/useTasks.ts
+++ b/src/hooks/useTasks.ts
@@ -25,10 +25,11 @@ import {
 import type { MentorTaskItem } from "../types/task.types";
 import { useCurrentUser } from "./useUser";
 import { useMyTasks } from "./useProjects";
+import type { InternTaskItem } from "../types/project.types";
 
 // GET /task-api/projects/{id_project}/tasks
 export const useProjectTasks = (projectId: number) => {
-  const [tasks, setTasks] = useState<ProjectTask[]>([]);
+  const [tasks, setTasks] = useState<InternTaskItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
diff --git a/src/services/ProjectService.ts b/src/services/ProjectService.ts
index 5fb1f30..6acbbb9 100644
--- a/src/services/ProjectService.ts
+++ b/src/services/ProjectService.ts
@@ -105,7 +105,7 @@ export const getMyTasks = async (): Promise<InternTaskItem[]> => {
   return res.data.data;
 };
 
-// GET /project-api/mentor-projects (admin/mentor only)
+// GET /project-api/mentor-projects (mentor only)
 export const getMentorProjects = async (): Promise<Project[]> => {
   const res = await api.get("/project-api/mentor-projects");
   return res.data.data;
diff --git a/src/services/TaskService.ts b/src/services/TaskService.ts
index f78ffa8..7ef8479 100644
--- a/src/services/TaskService.ts
+++ b/src/services/TaskService.ts
@@ -7,7 +7,7 @@ import type {
   UpdateTaskPayload,
   TaskSubmissionData,
 } from "../types/task.types";
-import type { Project } from "../types/project.types";
+import type { InternTaskItem, Project } from "../types/project.types";
 import type { MentorTaskItem, AdminTaskDetail } from "../types/task.types";
 
 // ── Task ──────────────────────────────────────────────
@@ -22,7 +22,7 @@ export const createTask = async (
 
 export const getProjectTasks = async (
   projectId: string | number
-): Promise<ProjectTask[]> => {
+): Promise<InternTaskItem[]> => {
   const res = await api.get(`/task-api/projects/${projectId}/tasks`);
   return res.data.data;
 };