diff --git a/src/App.tsx b/src/App.tsx
index 35c8ea7..a6b06fc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -33,7 +33,7 @@ import { InternLayout, MentorLayout } from "./Pages/Internify/layout";
 import ProjectsPage from "./Pages/Internify/intern/ProjectsPage";
 import SertificatePage from "./Pages/Internify/intern/SertificatePage";
 import ProjectDetailPage from "./Pages/Internify/intern/ProjectDetailPage";
-import HomeMentorPage from "./Pages/Internify/mentor/HomePage";
+import HomeMentorPage from "./Pages/Internify/mentor/HomeMentorPage";
 import MentorProjectsPage from "./Pages/Internify/mentor/BaseProjectsPage";
 import MentorCertificatePage from "./Pages/Internify/mentor/CertificatePage";
 import MentorInternPage from "./Pages/Internify/mentor/InternsPage";
@@ -88,30 +88,37 @@ function App() {
 
         <Route path="/login-internify" element={<InternifyLogin />} />
 
-        <Route path="/intern" element={<InternLayout />}>
-          <Route index element={<HomeInternPage />} />
-          <Route path="projects" element={<ProjectsPage />} />
-          <Route path="certificates" element={<SertificatePage />} />
-          <Route path="certificates/all" element={<SertificateList />} />
-          <Route path="projects/:slug" element={<ProjectDetailPage />} />
-          <Route path="projects/:slug/:TaskSlug" element={<TaskSubmission />} />
-          <Route path="faq" element={<FAQPage />} />
-          <Route path="notifications" element={<NotificationList />} />
-          <Route path="settings" element={<SettingsContent />} />
+        {/* Intern only */}
+        <Route element={<ProtectedRoutes allowedRoles={["intern"]} />}>
+          <Route path="/intern" element={<InternLayout />}>
+            <Route index element={<HomeInternPage />} />
+            <Route path="projects" element={<ProjectsPage />} />
+            <Route path="certificates" element={<SertificatePage />} />
+            <Route path="certificates/all" element={<SertificateList />} />
+            <Route path="projects/:slug" element={<ProjectDetailPage />} />
+            <Route path="projects/:slug/:taskSlug" element={<TaskSubmission />} />
+            <Route path="faq" element={<FAQPage />} />
+            <Route path="notifications" element={<NotificationList />} />
+            <Route path="settings" element={<SettingsContent />} />
+          </Route>
         </Route>
 
-        <Route path="/mentor" element={<MentorLayout />}>
-          <Route index element={<HomeMentorPage />} />
-          <Route path="projects" element={<MentorProjectsPage />} />
-          <Route path="certificates" element={<MentorCertificatePage />} />
-          <Route path="intern" element={<MentorInternPage />} />
-          <Route path="projects/:slug" element={<MentorDetailProject />} />
-          <Route path="projects/:slug/:taskSlug" element={<MentorProjectsDetailPage />} />
-          <Route path="projects/:slug/:taskSlug/:nameIntern" element={<ViewInternSubmission />}/>
-          <Route path="faq" element={<FAQPage />} />
-          <Route path="notifications" element={<NotificationList />} />
-          <Route path="settings" element={<SettingsPage />} />
+        {/* Mentor only */}
+        <Route element={<ProtectedRoutes allowedRoles={["admin"]} />}>
+          <Route path="/mentor" element={<MentorLayout />}>
+            <Route index element={<HomeMentorPage />} />
+            <Route path="projects" element={<MentorProjectsPage />} />
+            <Route path="certificates" element={<MentorCertificatePage />} />
+            <Route path="intern" element={<MentorInternPage />} />
+            <Route path="projects/:slug" element={<MentorDetailProject />} />
+            <Route path="projects/:slug/:taskSlug" element={<MentorProjectsDetailPage />} />
+            <Route path="projects/:slug/:taskSlug/:nameIntern" element={<ViewInternSubmission />} />
+            <Route path="faq" element={<FAQPage />} />
+            <Route path="notifications" element={<NotificationList />} />
+            <Route path="settings" element={<SettingsPage />} />
+          </Route>
         </Route>
+
       </Routes>
     </Router>
   );
diff --git a/src/Layout/Header-internify.tsx b/src/Layout/Header-internify.tsx
index f17c057..553e2f7 100644
--- a/src/Layout/Header-internify.tsx
+++ b/src/Layout/Header-internify.tsx
@@ -9,7 +9,7 @@ export default function Header({ toggleSidebar }: { toggleSidebar: () => void })
       <div className='flex items-center gap-3'>
         <button 
           onClick={toggleSidebar} 
-          className="p-1 text-gray-600 hover:bg-gray-100 rounded-md md:hidden"
+          className="p-1 text-gray-600 hover:bg-gray-100 rounded-md lg:hidden"
         >
           <Menu className="w-6 h-6" />
         </button>
diff --git a/src/Pages/Landing.tsx b/src/Pages/Landing.tsx
index b83d4fe..3f8fd24 100644
--- a/src/Pages/Landing.tsx
+++ b/src/Pages/Landing.tsx
@@ -227,7 +227,7 @@ const Landing = () => {
                   loading="eager"
                   decoding="async"
                   // @ts-ignore
-                  fetchPriority="high"
+                  fetchpriority="high"
                   className="w-full h-full object-contain rounded-lg"
                 />
               </div>
diff --git a/src/Pages/NotFound.tsx b/src/Pages/NotFound.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/Pages/internify/Breadcumbs.tsx b/src/Pages/internify/Breadcumbs.tsx
index 8691960..5416ede 100644
--- a/src/Pages/internify/Breadcumbs.tsx
+++ b/src/Pages/internify/Breadcumbs.tsx
@@ -54,7 +54,7 @@ export default function Breadcrumbs(){
     return true;
   });
   return (
-    <nav className="text-[12px] mb-3">
+    <nav className="text-[15px] mb-3">
       {fixbreadcumbs.map(({ match, breadcrumb }) => {
         const isLast = match.pathname === location.pathname;
 
@@ -63,13 +63,13 @@ export default function Breadcrumbs(){
             {isLast ? (
               <span className="font-bold text-red-800">
                 {breadcrumb}
+                
               </span>
             ) : (
               <>
                 <Link to={match.pathname} className="text-gray-800">
                   {breadcrumb}
                 </Link>
-                {/* Karakter pemisah antar breadcrumb */}
                 <ChevronRight className="w-4 h-4 mx-1.5"/>
               </>
             )}
diff --git a/src/Pages/internify/FAQpage.tsx b/src/Pages/internify/FAQpage.tsx
index f50bd88..c89e238 100644
--- a/src/Pages/internify/FAQpage.tsx
+++ b/src/Pages/internify/FAQpage.tsx
@@ -1,26 +1,34 @@
-const mockFAQData = [
-  {
-    id: 1,
-    question: "How do I generate internship certificates?",
-    answer: "Once an intern has completed all required project milestones and their final evaluation is approved by a manager, go to the 'Manage Certificates' tab. Select the intern's name, click 'Generate Certificate', and the system will automatically populate the official Internify template with their specific details."
-  },
-  {
-    id: 2,
-    question: "What are the technical requirements for interns?",
-    answer: "Internify is a web-based LMS. Interns simply need a modern web browser (Chrome, Firefox, or Safari) and a stable internet connection. Some engineering modules may require local development environments, which are detailed in the specific project onboarding documentation."
-  },
-  {
-    id: 3,
-    question: "How often is the project dashboard updated?",
-    answer: "The dashboard updates in real-time as interns submit tasks or participate in the forum. Weekly progress reports are automatically generated every Friday at 5:00 PM EST and can be exported as PDF files from the Dashboard view."
-  }
-];
+import api from "../../lib/api";
+import { useEffect, useState } from "react";
+
+interface FAQ {
+  id: number;
+  pertanyaan: string;
+  jawaban: string;
+  created_at: string;
+}
 
 export default function FAQPage() {
+  const [faq, setFaq] = useState<FAQ[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+    api.get("/faq-api/get")
+      .then((res) => {
+        setFaq(res.data.data); // ambil array dari field "data"
+      })
+      .catch((err) => {
+        console.error("Gagal fetch FAQ:", err);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, []);
+
   return (
     <div>
-      {/* Header Title */}
-      <div className="mb-10 ">
+      <div className="mb-10">
         <h1 className="page-title">FAQ</h1>
         <p className="page-title-desc">
           Quick answers to common questions about the Internify LMS platform.
@@ -28,22 +36,25 @@ export default function FAQPage() {
       </div>
 
       {/* FAQ Lists */}
-      <div className="space-y-8 max-w-auto">
-        {mockFAQData.map((faq) => (
-          <div key={faq.id} className="relative shadow-md group py-5 px-10 rounded-md bg-white">
-            
-            {/* Item Question */}
-            <h2 className="text-[17px] font-bold text-[#8A0000] tracking-tight leading-snug mb-2 border-l-4 border-[#8A0000] pl-3">
-              {faq.question}
-            </h2>
-            
-            {/* Item Answer */}
-            <p className="text-[14px] pl-8 text-[#8A0000] font-light leading-relaxed tracking-normal">
-              {faq.answer}
-            </p>
-          </div>
-        ))}
-      </div>
+      {loading ? (
+        <p className="text-gray-500">Memuat FAQ...</p>
+      ) : (
+        <div className="space-y-8 max-w-auto">
+          {faq.map((item) => (
+            <div key={item.id} className="relative shadow-md group py-5 px-10 rounded-md bg-white">
+              
+              {/* Item Question */}
+              <h2 className="text-[17px] font-bold text-[#8A0000] tracking-tight leading-snug mb-2 border-l-4 border-[#8A0000] pl-3">
+                {item.pertanyaan}
+              </h2>
+
+              <p className="text-[14px] pl-8 text-[#8A0000] font-light leading-relaxed tracking-normal">
+                {item.jawaban}
+              </p>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/Pages/internify/LoginInternify.tsx b/src/Pages/internify/LoginInternify.tsx
index b6930a8..8799e4d 100644
--- a/src/Pages/internify/LoginInternify.tsx
+++ b/src/Pages/internify/LoginInternify.tsx
@@ -2,11 +2,17 @@ import { useState } from "react";
 import logo from "../../assets/logo.png";
 import { useNavigate } from "react-router-dom";
 import { Mail, Lock, Eye, EyeOff } from 'lucide-react';
+import api from "../../lib/api";
 
-const DataUsers = [
-    { "Email": "intern@email.com", "Password": "password123", "role": "intern" },
-    { "Email": "mentor@email.com", "Password": "password123", "role": "mentor" },
-];
+const decodeJWT = (token: string) => {
+  try {
+    const base64 = token.split(".")[1].replace(/-/g, "+").replace(/_/g, "/");
+    const padded = base64.padEnd(base64.length + (4 - base64.length % 4) % 4, "=");
+    return JSON.parse(atob(padded));
+  } catch {
+    return null;
+  }
+};
 
 export default function InternifyLogin() {
     const navigate = useNavigate();
@@ -14,8 +20,9 @@ export default function InternifyLogin() {
     const [password, setPassword] = useState("");
     const [showPassword, setShowPassword] = useState(false);
     const [error, setError] = useState("");
+    const [loading, setLoading] = useState(false);
 
-    const handleSignIn = (e: React.FormEvent) => {
+    const handleSignIn = async (e: React.FormEvent) => {
         e.preventDefault();
         setError("");
 
@@ -24,20 +31,30 @@ export default function InternifyLogin() {
             return;
         }
 
-        const user = DataUsers.find(
-            (u) => u.Email.toLowerCase() === email.toLowerCase() && u.Password === password
-        );
+        try {
+            setLoading(true);
+            const response = await api.post("/auth-api/login", { email, password });
 
-        if (user) {
-            if (user.role === "intern") {
+            const { token } = response.data.data;
+            document.cookie = `token=${token}; path=/; SameSite=Strict`;
+            
+            const decoded = decodeJWT(token);
+            const role = decoded?.role;
+            if (role === "intern") {
                 navigate("/intern");
-            } else if (user.role === "mentor") {
+            } else if (role === "admin") {
                 navigate("/mentor");
             } else {
                 setError("Role user tidak dikenali.");
             }
-        } else {
-            setError("Email atau password salah.");
+        } catch (err: any) {
+            if (err.response?.status === 401 || err.response?.status === 400) {
+                setError("Email atau password salah.");
+            } else {
+                setError("Terjadi kesalahan. Coba beberapa saat lagi.");
+            }
+        } finally {
+            setLoading(false);
         }
     };
 
@@ -48,7 +65,7 @@ export default function InternifyLogin() {
             <div className="w-full max-w-[440px] flex flex-col items-center">
                 <div className="text-center mb-6">
                     <div className="flex items-center justify-center gap-2 font-bold text-2xl tracking-tight text-black">
-                        <img src={logo} alt="Logo" className="w-32 h-20" />
+                        <img src={logo} alt="Logo" />
                     </div>
                     <p className="text-[10px] tracking-widest text-yellow-950 font-semibold mt-1 uppercase">
                         HUMIC LMS PORTAL
@@ -112,6 +129,7 @@ export default function InternifyLogin() {
 
                         <button
                             type="submit"
+                            disabled={loading}
                             className="w-full bg-[#B30000] hover:bg-[#990000] text-white font-medium text-sm py-2.5 rounded-lg transition-colors shadow-sm mt-2"
                         >
                             Sign In
diff --git a/src/Pages/internify/SettingsPage.tsx b/src/Pages/internify/SettingsPage.tsx
index 1eab2a1..01284d1 100644
--- a/src/Pages/internify/SettingsPage.tsx
+++ b/src/Pages/internify/SettingsPage.tsx
@@ -1,30 +1,72 @@
-import { useState } from "react";
-
-// Mock Data Profile awal
-const mockProfileData = {
-  fullName: "JonathanKristina",
-  email: "JonathanKristina@gmail.com",
-  bio: "UIUX holic"
-};
+import { useState, useEffect } from "react";
+import api from "../../lib/api";
 
 export default function SettingsContent() {
-  const [formData, setFormData] = useState(mockProfileData);
+  const [formData, setFormData] = useState({
+    fullName: "",
+    email: "",
+    bio: ""
+  });
+
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [successMsg, setSuccessMsg] = useState("");
+  const [errorMsg, setErrorMsg] = useState("");
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await api.patch("/auth-api/update-profile");
+        const data = response.data.data;
+        setFormData({
+          fullName: data.full_name || "",
+          email: data.email || "",
+          bio: data.professional_bio || "",
+        });
+      } catch (err) {
+        console.error("Failed to fetch profile:", err)
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, []);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const { name, value } = e.target;
     setFormData((prev) => ({ ...prev, [name]: value }));
   };
 
-  const handleSaveChanges = (e: React.FormEvent) => {
+  const handleSaveChanges = async (e: React.FormEvent) => {
     e.preventDefault();
-    // Simulasi penyimpanan data sukses
-    alert("Changes saved successfully!");
-    console.log("Saved Data:", formData);
+    setSuccessMsg("");
+    setErrorMsg("");
+    setSaving(true);
+
+    try {
+      await api.patch("/auth-api/update-profile", {
+        full_name: formData.fullName,
+        email: formData.email,
+        professional_bio: formData.bio,
+      });
+      setSuccessMsg("Profile updated successfully!");
+    } catch (err: any) {
+      setErrorMsg(err?.response?.data?.message || "Failed to save changes.");
+    } finally {
+      setSaving(false);
+    }
   };
 
-  // Mendapatkan inisial huruf pertama untuk avatar profile gambar
   const initialLetter = formData.fullName ? formData.fullName.charAt(1).toUpperCase() : "U";
 
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-40 text-sm text-gray-400">
+        Loading profile...
+      </div>
+    );
+  }
+
   return (
     <div className="">
 
@@ -38,7 +80,7 @@ export default function SettingsContent() {
 
       {/* White Card Container */}
       <div className="w-full bg-white rounded-xl border border-gray-100 shadow-lg overflow-hidden">
-        
+
         {/* Card Header */}
         <div className="p-6 border-b border-gray-100">
           <h2 className="text-base font-bold text-gray-900">Profile Information</h2>
@@ -49,7 +91,7 @@ export default function SettingsContent() {
 
         {/* Card Body & Form */}
         <form onSubmit={handleSaveChanges} className="p-6 space-y-6">
-          
+
           {/* Profile Photo Display Row */}
           <div className="flex items-center gap-4 py-2">
             <div className="w-16 h-16 bg-gray-100 border border-gray-200 rounded-xl flex items-center justify-center shadow-sm">
@@ -67,7 +109,7 @@ export default function SettingsContent() {
 
           {/* Grid Inputs (Full Name & Email Address) */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            
+
             {/* Field: Full Name */}
             <div className="space-y-1">
               <label className="text-[10px] font-bold tracking-wider text-gray-700 uppercase block">
@@ -114,13 +156,25 @@ export default function SettingsContent() {
             </p>
           </div>
 
+          {successMsg && (
+            <p className="text-xs text-green-600 bg-green-50 p-2 rounded-md font-medium">
+              {successMsg}
+            </p>
+          )}
+          {errorMsg && (
+            <p className="text-xs text-red-600 bg-red-50 p-2 rounded-md font-medium">
+              {errorMsg}
+            </p>
+          )}
+
           {/* Form Action Footer Row */}
           <div className="flex justify-end pt-2">
             <button
               type="submit"
+              disabled={saving}
               className="px-6 py-2 bg-[#B30000] hover:bg-[#990000] text-white font-bold text-xs rounded-lg shadow-sm transition-colors uppercase tracking-wider"
             >
-              Save Changes
+              {saving ? "Saving..." : "Save Changes"}
             </button>
           </div>
 
diff --git a/src/Pages/internify/intern/ForumTab.tsx b/src/Pages/internify/intern/ForumTab.tsx
index 4ee64c1..ace03e0 100644
--- a/src/Pages/internify/intern/ForumTab.tsx
+++ b/src/Pages/internify/intern/ForumTab.tsx
@@ -1,24 +1,43 @@
-import type { Project } from '../../../lib/mockProjects';
+import { useParams } from 'react-router-dom';
 import ProjectTimeline from './components/ProjectTimeline';
 import TaskCard from './components/ProjectTaskCard';
 import HeroProject from './components/Hero-project';
+import { useProjectTasks } from '../../../hooks/useTasks';
+import type { Project } from '../../../types/project.types';
 
 export default function ForumTab({ project }: { project: Project }) {
+  const { slug } = useParams<{ slug: string }>();
+  const { tasks, loading, error } = useProjectTasks(slug ?? "");
   return (
     <div>
       {/* Hero banner */}
-      <HeroProject title={project.name} description={project.description} />
+      <HeroProject title={project.project_name} description={project.description} />
+
+      {/* 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 */}
-      <div className="flex gap-7 items-start">
-        <div className="w-1/5 bg-white rounded-xl p-5 shadow-md shrink-0">
-          <ProjectTimeline tasks={project.tasks} />
+      <div className="flex flex-col gap-7 md:flex-row md:items-start">
+        <div className="w-full md:w-1/5 bg-white rounded-xl p-5 border border-box-border shrink-0">
+          <ProjectTimeline tasks={tasks} />
         </div>
-
-        <div className="w-4/5">
-          {project.tasks.map((task, idx) => (
-            <TaskCard key={idx} task={task} projectName={project.name} />
-          ))}
+        <div className="w-full border-t border-box-border md:border-t-0 pt-4 md:pt-0 md:w-4/5">
+          {tasks.length === 0 ? (
+            <p className="text-sm text-gray-400">Belum ada task.</p>
+          ) : (
+            tasks.map((task) => (
+              <TaskCard key={task.id} task={task} />
+            ))
+          )}
         </div>
       </div>
     </div>
diff --git a/src/Pages/internify/intern/HomeInternPage.tsx b/src/Pages/internify/intern/HomeInternPage.tsx
index 082f9ca..8212928 100644
--- a/src/Pages/internify/intern/HomeInternPage.tsx
+++ b/src/Pages/internify/intern/HomeInternPage.tsx
@@ -9,14 +9,14 @@ export default function HomeInternPage()  {
       <HomeHeader />
       <div className="flex flex-col gap-5">
         <div className="grid grid-cols-2 gap-5">
-          <div className="bg-white border border-gray-200 rounded-xl p-6">
+          <div className="bg-box-primary border border-box-border rounded-xl p-6">
             <HomeProjectList />
           </div>
-          <div className="bg-white border border-gray-200 rounded-xl p-6">
+          <div className="bg-box-primary border border-box-border rounded-xl p-6">
             <TaskTimeline />
           </div>
         </div>
-        <div className="bg-white  rounded-xl">
+        <div className="bg-box-primary  rounded-xl">
           <HomeCalendar />
         </div>
       </div>
diff --git a/src/Pages/internify/intern/ParticipantTab.tsx b/src/Pages/internify/intern/ParticipantTab.tsx
index b7d13dd..d851ac6 100644
--- a/src/Pages/internify/intern/ParticipantTab.tsx
+++ b/src/Pages/internify/intern/ParticipantTab.tsx
@@ -1,44 +1,75 @@
-import type { Project, Intern } from '../../../lib/mockData';
+import { useParams } from 'react-router-dom';
+import {  } from '../../../hooks/useProjects';
+import type { Project } from '../../../types/project.types';
 
 export default function ParticipantsTab({ project }: { project: Project }) {
+  const { slug } = useParams<{ slug: string }>();
+  const { interns, loading, error } = useProjectInterns(slug ?? "");
+
   return (
     <div>
       {/* Mentor */}
       <div className="mb-8">
-        <h3 className=" font-bold text-base text-[#1a1a1a] mb-3.5">
-          Mentor
-        </h3>
-        <div className="border-b border-[#eee] pb-4">
+        <h3 className="font-bold text-font-shade mb-3.5">Mentor</h3>
+        <div className="border-b border-box-border pb-4">
           <div className="flex items-center gap-3">
-            <span className=" text-sm text-[#333]">
-              {project.mentor}
-            </span>
+            {project.admin.profile_picture ? (
+              <img
+                src={project.admin.profile_picture}
+                alt={project.admin.full_name}
+                className="w-8 h-8 rounded-full object-cover"
+              />
+            ) : (
+              <div className="w-8 h-8 rounded-full bg-gray-200" />
+            )}
+            <span className="text-md text-font">{project.admin.full_name}</span>
           </div>
         </div>
       </div>
 
       {/* Members */}
       <div>
-        <h3 className="font-bold text-base text-[#1a1a1a] mb-3.5">
-          Members
-        </h3>
-        {project.interns.map((intern: Intern, idx: number) => (
+        <h3 className="font-bold text-font-shade mb-3.5">Members</h3>
+
+        {loading && (
+          <div className="flex flex-col gap-3">
+            {[...Array(3)].map((_, i) => (
+              <div key={i} className="h-10 bg-gray-100 rounded animate-pulse" />
+            ))}
+          </div>
+        )}
+
+        {error && <p className="text-red-500 text-sm">{error}</p>}
+
+        {!loading && !error && interns.map((intern, idx) => (
           <div
-            key={idx}
+            key={intern.id}
             className={`flex items-center justify-between py-3 ${
-              idx < project.interns.length - 1 ? 'border-b border-[#f0f0f0]' : ''
+              idx < interns.length - 1 ? 'border-b border-box-border' : ''
             }`}
           >
             <div className="flex items-center gap-3">
-              <span className=" text-sm text-[#333]">
-                {intern.name}
-              </span>
+              {intern.avatar ? (
+                <img
+                  src={intern.avatar}
+                  alt={intern.full_name}
+                  className="w-7 h-7 rounded-full object-cover"
+                />
+              ) : (
+                <div className="w-7 h-7 rounded-full bg-gray-200 flex-shrink-0" />
+              )}
+              <div className="flex flex-col">
+                <span className="text-sm text-[#333]">{intern.full_name}</span>
+                <span className="text-[11px] text-gray-400">{intern.email}</span>
+              </div>
             </div>
-            <span className=" text-[13px] text-[#555] font-semibold">
-              {intern.role}
-            </span>
+            <span className="text-[13px] text-[#555] font-semibold">{intern.kelompok_peminatan}</span>
           </div>
         ))}
+
+        {!loading && !error && interns.length === 0 && (
+          <p className="text-sm text-gray-400">Belum ada members.</p>
+        )}
       </div>
     </div>
   );
diff --git a/src/Pages/internify/intern/ProjectDetailPage.tsx b/src/Pages/internify/intern/ProjectDetailPage.tsx
index 9d21cc0..7b97d40 100644
--- a/src/Pages/internify/intern/ProjectDetailPage.tsx
+++ b/src/Pages/internify/intern/ProjectDetailPage.tsx
@@ -1,24 +1,19 @@
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { mockProjects } from '../../../lib/mockProjects';
+// import { useProjectDetail } from '../../../hooks/useProjectDetail';
+import { useProjectDetail } from '../../../hooks/useProjects';
 import ForumTab from './ForumTab';
 import ParticipantsTab from './ParticipantTab';
 
-const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
-
 export default function ProjectDetailPage() {
-  const { slug } = useParams<{ slug: string }>();
+  const { slug } = useParams<{ slug: string }>(); 
+  const { project, loading, error } = useProjectDetail(slug ?? "");
   const [activeTab, setActiveTab] = useState<'forum' | 'participants'>('forum');
 
-  const project = mockProjects.find((p) => toSlug(p.name) === slug);
-
-  if (!project) {
-    return (
-      <div className="p-10 text-[#888]">
-        Project tidak ditemukan.
-      </div>
-    );
-  }
+  // Fallback sederhana
+  if (loading) return <p className="p-10 text-gray-400">Memuat project...</p>;
+  if (error)   return <p className="p-10 text-red-500">{error}</p>;
+  if (!project) return <p className="p-10 text-gray-400">Project tidak ditemukan.</p>;
 
   const tabClass = (tab: string) =>
     `pr-0 py-2.5 mr-7 text-sm bg-transparent border-0 cursor-pointer transition-colors duration-150 border-b-2 ${activeTab === tab
@@ -30,7 +25,7 @@ export default function ProjectDetailPage() {
     <div>
       <div>
         {/* Tabs */}
-        <div className="flex mb-4">
+        <div className="flex mb-4 border-b border-card-outline">
           <button className={tabClass('forum')} onClick={() => setActiveTab('forum')}>
             Forum
           </button>
diff --git a/src/Pages/internify/intern/ProjectsPage.tsx b/src/Pages/internify/intern/ProjectsPage.tsx
index ebdb018..7733cf0 100644
--- a/src/Pages/internify/intern/ProjectsPage.tsx
+++ b/src/Pages/internify/intern/ProjectsPage.tsx
@@ -1,7 +1,19 @@
 import ProjectCard from './components/ProjectsCard'
-import { mockProjects } from '../../../lib/mockData'
+import { useMyProjects } from '../../../hooks/useProjects';
 
 export default function ProjectsPage() {
+  const { projects, loading, error } = useMyProjects();
+
+  if (loading) return (
+    <div className="flex flex-col gap-3">
+      {[...Array(3)].map((_, i) => (
+        <div key={i} className="h-16 bg-gray-100 rounded-lg animate-pulse" />
+      ))}
+    </div>
+  );
+
+   if (error) return <p className="text-danger text-md">{error}</p>;
+
   return (
     <div>
       <div className="flex flex-col gap-1 mb-6">
@@ -10,8 +22,8 @@ export default function ProjectsPage() {
       </div>
 
       {/* Grid card */}
-      <div className="grid grid-cols-1 gap-6 md:gap-4 md:grid-cols-3 lg:grid-cols-4">
-        {mockProjects.map(project => (
+      <div className="grid grid-cols-1 gap-4 md:gap-3 md:grid-cols-3 lg:grid-cols-5">
+        {projects.map(project => (
           <ProjectCard key={project.id} {...project} />
         ))}
       </div>
diff --git a/src/Pages/internify/intern/TaskSubmission.tsx b/src/Pages/internify/intern/TaskSubmission.tsx
index 9bd5b76..f149654 100644
--- a/src/Pages/internify/intern/TaskSubmission.tsx
+++ b/src/Pages/internify/intern/TaskSubmission.tsx
@@ -2,71 +2,68 @@ import { useParams, useSearchParams } from "react-router-dom";
 import { FileText, Info } from "lucide-react";
 import TaskFormFile from "./components/TaskForm-file";
 import TaskFormLink from "./components/TaskForm-link";
-import { mockProjects } from "../../../lib/mockProjects";
-
-const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
+import { useTaskDetail } from "../../../hooks/useTasks";
 
 export default function TaskSubmission() {
   const [searchParams] = useSearchParams();
-  const { slug, TaskSlug } = useParams<{ slug: string; TaskSlug: string }>();
+  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 submissionType = (searchParams.get("type") ?? "file") as "file" | "link";
+  const formatDeadline = (dateStr: string) =>
+    new Date(dateStr).toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" });
+  const formatTime = (dateStr: string) =>
+    new Date(dateStr).toLocaleTimeString("id-ID", { hour: "2-digit", minute: "2-digit" });
 
-  const project = mockProjects.find((p) => toSlug(p.name) === slug);
-  const task = project?.tasks.find((t) => toSlug(t.title) === TaskSlug);
-  const handleFileSubmit = (files: File[]) => {
-    const fileNames = files.map(f => f.name).join(', ');
-    console.log(`Submitting Files for Project ${slug}:`, fileNames);
-    alert(`File ${fileNames} berhasil dikirim!`);
-  };
-
-  const handleLinkSubmit = (link: string) => {
-    console.log(`Submitting Link for Project ${slug}:`, link);
-    alert(`Link berhasil dikirim!`);
-  };
+  if (loading) return (
+    <div className="space-y-4">
+      {[...Array(3)].map((_, i) => (
+        <div key={i} className="h-32 bg-box-secondary rounded-2xl animate-pulse" />
+      ))}
+    </div>
+  );
+  if (error) return <p className="text-red-500 text-sm">{error}</p>;
+  if (!task) return null;
 
   return (
-    <div className="space-y-4">
-      {/* Header Card */}
-      <div className="w-full bg-box-secondary  rounded-2xl border border-box-border p-6 ">
-        <div className="flex justify-between items-start">
-          <div className="space-y-2">
-            <h1 className="text-2xl font-bold text-gray-900 tracking-tight">
-              {task?.title}
-            </h1>
-            <span className="text-sm font-bold text-gray-600">
-              Due {task?.deadline.label} at {task?.deadline.time}
-            </span>
-          </div>
+    <div className="space-y-4 mt-7">
+      <div className="w-full bg-box-secondary rounded-2xl border border-box-border p-6">
+        <div className="space-y-2">
+          <h1 className="text-2xl font-bold text-gray-900 tracking-tight">{task.title}</h1>
+          <span className="text-sm font-bold text-gray-600">
+            Due {formatDeadline(task.deadline_at)} at {formatTime(task.deadline_at)}
+          </span>
         </div>
       </div>
 
-      {/* Task Description Card */}
       <div className="w-full bg-box-secondary rounded-2xl border border-box-border p-6 space-y-3">
-        <h2 className="text-xl  text-gray-800 tracking-tight">Task Description</h2>
-        <p className="text-sm text-foreground font-light leading-relaxed">
-          {task?.description}
-        </p>
+        <h2 className="text-xl text-gray-800 tracking-tight">Task Description</h2>
+        <p className="text-sm text-foreground font-light leading-relaxed">{task.description}</p>
       </div>
 
-      {/* Submit Area Card */}
       <div className="w-full bg-box-secondary rounded-2xl border border-box-border p-6 space-y-5">
-        <div className="flex items-center gap-2  pb-2">
-          <FileText className="w-4 h-4 text-[#B30000] stroke-[2.5]" />
-          <h2 className="text-base font-bold text-secondary tracking-tight">Save Changes</h2>
+        <div className="flex items-center gap-2 pb-2">
+          <FileText className="w-4 h-4 text-primary stroke-[2.5]" />
+          <h2 className="text-font-shade font-bold text-secondary tracking-tight">Submit Task</h2>
         </div>
 
-        {/* Render form sesuai tipe dari query param */}
-        {submissionType === "file" ? (
-          <TaskFormFile onSubmitSuccess={handleFileSubmit} deadline={task?.deadline.date}/>
+        {submissionType === "file_upload" ? (
+          <TaskFormFile
+            taskId={taskSlug!}
+            deadline={new Date(task.deadline_at)}
+            initialSubmission={task.my_submission}
+          />
         ) : (
-          <TaskFormLink onSubmitSuccess={handleLinkSubmit} deadline={task?.deadline.date}/>
+          <TaskFormLink
+            taskId={taskSlug!}
+            deadline={new Date(task.deadline_at)}
+            initialSubmission={task.my_submission}
+          />
         )}
 
-        {/* Info Box */}
         <div className="w-full border border-box-border rounded-lg p-3 flex items-start gap-2.5">
-          <Info className="w-4 h-4 text-gray-400 mt-0.5 flex-shrink-0" />
-          <p className="text-[11px] text-gray-400 font-medium leading-relaxed">
+          <Info className="w-4 h-4 text-font mt-0.5 flex-shrink-0" />
+          <p className="text-[11px] text-font font-medium leading-relaxed">
             Once submitted, your work will be locked for mentor review. You can request a re-submission if needed.
           </p>
         </div>
diff --git a/src/Pages/internify/intern/components/CertificateAvailabe.tsx b/src/Pages/internify/intern/components/CertificateAvailabe.tsx
index 983f4c3..028f62d 100644
--- a/src/Pages/internify/intern/components/CertificateAvailabe.tsx
+++ b/src/Pages/internify/intern/components/CertificateAvailabe.tsx
@@ -34,19 +34,11 @@ export default function CertificateAvailable({ data }: { data: CertificateData }
               {[
                 { label: "Nama Program", value: certificate.programName },
                 { label: "Durasi", value: certificate.duration },
-                {
-                  label: "Nilai Akhir",
-                  value: (
-                    <span className="text-red-600 font-bold">
-                      {certificate.finalScore}/100 ({certificate.grade})
-                    </span>
-                  ),
-                },
                 {
                   label: "Status",
                   value: (
                     <span className="bg-green-100 text-green-700 text-xs font-bold px-2 py-0.5 rounded-full">
-                      {certificate.status}
+                      VERIFIED
                     </span>
                   ),
                 },
diff --git a/src/Pages/internify/intern/components/HomeCalendar.tsx b/src/Pages/internify/intern/components/HomeCalendar.tsx
index f629998..5ac0110 100644
--- a/src/Pages/internify/intern/components/HomeCalendar.tsx
+++ b/src/Pages/internify/intern/components/HomeCalendar.tsx
@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
-import { DEADLINES } from '../../../../lib/mockDeadline'
-
+import { useMyTasks } from '../../../../hooks/useProjects';
 
 const DAY_LABELS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
 const MONTH_NAMES = [
@@ -18,7 +17,13 @@ function getFirstDayOfMonth(year: number, month: number) {
 }
 
 const HomeCalendar = () => {
-  const [today, setToday] = useState(new Date())
+  const [today, setToday] = useState(new Date());
+  const { tasks } = useMyTasks();
+
+  const DEADLINES = tasks.map(task => ({
+    date: new Date(task.deadline_at),
+    label: task.title,
+  }));
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -89,13 +94,13 @@ const HomeCalendar = () => {
   }
 
   return (
-    <div className=" px-13 py-5 border border-gray-200 rounded-2xl">
+    <div className=" px-13 py-5 border border-card-outline rounded-2xl">
       {/* Header */}
       <div className="flex items-center justify-between mb-4">
-        <h2 className="text-base font-semibold text-gray-800">
+        <h2 className="font-bold text-font">
           {MONTH_NAMES[currentMonth]} {currentYear}
         </h2>
-        <div className="flex items-center gap-1">
+        <div className="flex items-center">
           <button
             onClick={prevMonth}
             className="p-1 rounded hover:bg-gray-100 transition-colors"
@@ -160,11 +165,11 @@ const HomeCalendar = () => {
       </div>
 
       {/* Divider */}
-      <hr className="my-3 border-gray-100" />
+      <hr className="my-3 border-gray-400" />
 
       {/* Upcoming Deadlines */}
       <div>
-        <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-widest mb-2">
+        <p className="text-[10px] font-semibold text-font uppercase tracking-widest mb-2">
           Upcoming Deadlines
         </p>
         {upcomingDeadlines.length > 0 ? (
@@ -172,12 +177,12 @@ const HomeCalendar = () => {
             {upcomingDeadlines.map((d, i) => (
               <li key={i} className="flex items-center gap-2">
                 <span className="w-2 h-2 rounded-full bg-red-600 flex-shrink-0" />
-                <span className="text-xs text-gray-600">{d.label}</span>
+                <span className="text-xs text-font-shade">{d.label}</span>
               </li>
             ))}
           </ul>
         ) : (
-          <p className="text-[11px] text-gray-400">No upcoming deadlines this month.</p>
+          <p className="text-[11px] text-font-shade">No upcoming deadlines this month.</p>
         )}
       </div>
     </div>
diff --git a/src/Pages/internify/intern/components/HomeHeader.tsx b/src/Pages/internify/intern/components/HomeHeader.tsx
index 97c8483..d709627 100644
--- a/src/Pages/internify/intern/components/HomeHeader.tsx
+++ b/src/Pages/internify/intern/components/HomeHeader.tsx
@@ -1,12 +1,26 @@
+import { useState, useEffect } from "react";
+import api from "../../../../lib/api";
+
 const HomeHeader = () => {
-  const name = "Karina";
+  const [name, setName] = useState("");
+
+  useEffect(() => {
+  api.get("/auth-api/me")
+    .then((res) => {
+      setName(res.data.data.full_name || res.data.data.nama_depan);
+    })
+    .catch((err) => {
+      console.error("Failed to fetch user:", err);
+    });
+}, []);
+
   return (
     <div>
       <div className="flex items-start px-0 mb-5">
-        <h1 className="page-title">Hi, {name}!</h1>
+        <h1 className="page-title">Hi, {name || "..."}!</h1>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default HomeHeader
+export default HomeHeader;
\ No newline at end of file
diff --git a/src/Pages/internify/intern/components/HomeProjectList.tsx b/src/Pages/internify/intern/components/HomeProjectList.tsx
index 3f7ca94..ebbdfd2 100644
--- a/src/Pages/internify/intern/components/HomeProjectList.tsx
+++ b/src/Pages/internify/intern/components/HomeProjectList.tsx
@@ -1,31 +1,42 @@
-import { useNavigate } from 'react-router-dom'
-import { mockProjects } from '../../../../lib/mockProjects'
+import { useNavigate } from 'react-router-dom';
+import { useProjects } from '../../../../hooks/useProjects';
 
 const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
 
 const HomeProjectList = () => {
   const navigate = useNavigate();
+  const { projects, loading, error } = useProjects();
+
+  if (loading) return (
+    <div className="flex flex-col gap-3">
+      {[...Array(3)].map((_, i) => (
+        <div key={i} className="h-16 bg-gray-100 rounded-lg animate-pulse" />
+      ))}
+    </div>
+  );
+
+  if (error) return <p className="text-red-500 text-sm">{error}</p>;
+
   return (
     <div>
-      <h2 className="text-lg font-semibold text-gray-800 mb-4">Projects</h2>
+      <h2 className="text-lg font-semibold text-font-shade mb-8">Projects</h2>
       <div className="flex flex-col gap-3">
-        {mockProjects.map((project, index) => {
-          return (
-            <div
-              key={index}
-              onClick={() => navigate(`/intern/projects/${toSlug(project.name)}`)}
-              className="flex items-center gap-4 border border-gray-200 rounded-lg px-4 py-3 hover:bg-gray-50 cursor-pointer transition-colors duration-150"
-            >
-              <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 bg-gray-300`}/>
-              <div>
-                <p className="text-sm font-semibold text-gray-800">{project.name}</p>
-              </div>
+        {projects.map((project) => (
+          <div
+            key={project.id}
+            onClick={() => navigate(`/intern/projects/${toSlug(project.project_name)}`)}
+            className="flex items-center gap-4 border border-card-outline rounded-lg px-4 py-3 hover:bg-gray-50 cursor-pointer transition-colors duration-150"
+          >
+            <div className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 bg-red-600" />
+            <div>
+              <p className="text-sm font-semibold text-font-shade">{project.project_name}</p>
+              <p className="text-xs text-gray-400">{project.status}</p>
             </div>
-          )
-        })}
+          </div>
+        ))}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default HomeProjectList
\ No newline at end of file
+export default HomeProjectList;
\ No newline at end of file
diff --git a/src/Pages/internify/intern/components/ProjectTaskCard.tsx b/src/Pages/internify/intern/components/ProjectTaskCard.tsx
index 56a6bf6..299dd57 100644
--- a/src/Pages/internify/intern/components/ProjectTaskCard.tsx
+++ b/src/Pages/internify/intern/components/ProjectTaskCard.tsx
@@ -1,41 +1,43 @@
-import type { Task } from "../../../../lib/mockProjects";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
+import type { ProjectTask } from "../../../../types/task.types";
 
-const formatDate = (date: Date) =>
-  new Date(date).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
+const formatDate = (dateStr: string) =>
+  new Date(dateStr).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
 
-const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
+const formatTime = (dateStr: string) =>
+  new Date(dateStr).toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
 
-export default function TaskCard({ task, projectName }: { task: Task; projectName: string }) {
+export default function TaskCard({ task }: { task: ProjectTask }) {
   const navigate = useNavigate();
-  const toTaskSlug = (title: string) => title.toLowerCase().replace(/\s+/g, '-');
+  const { slug } = useParams<{ slug: string }>();
   return (
-    <div className="border border-gray-200 rounded-[10px] px-6 py-4 mb-3 bg-white flex items-start justify-between gap-3">
+    <div
+      className="border border-card-outline rounded-xl px-6 py-4 mb-3 bg-white flex items-start justify-between gap-3"
+      onClick={() => navigate(`/intern/projects/${slug}/${task.slug}?type=${task.submission_type}`)}
+    >
       <div className="flex-1 min-w-0">
-        <div className=" text-[11px] text-[#888] mb-1">
-          Deadline : {formatDate(task.deadline.date)} at {task.deadline.time}
+        <div className=" text-[11px] text-font mb-1">
+          Deadline : {formatDate(task.deadline_at)} at {formatTime(task.deadline_at)}
         </div>
         <div className=" font-bold text-[15px] text-[#1a1a1a] mb-1">
           {task.title}
         </div>
-        <div className=" text-[13px] text-[#666]">
+        <div className=" text-[13px] text-font">
           {task.description}
         </div>
-        <div className=" text-[13px] text-[#666]">
-          Tipe Submission : {task.type === 'file' ? "File" : "Link"}
+        <div className=" text-[13px] text-font">
+          Tipe Submission : {task.submission_type === 'file_upload' ? "File" : "Link"}
         </div>
       </div>
 
-      <div className="shrink-0">
-        {task.isSubmitted ? (
-          <span className=" inline-block bg-[#27AE60] text-white font-bold text-xs px-3.5 py-[5px] rounded-md tracking-[0.5px]">
-            DONE
-          </span>
-        ) : (
-          <button className=" bg-white text-[#1a1a1a] border-[1.5px] border-[#d0d0d0] font-semibold text-xs px-3.5 py-[5px] rounded-md cursor-pointer whitespace-nowrap transition-colors duration-150 hover:border-[#C0392B] hover:text-[#C0392B]" onClick={() => navigate(`/intern/projects/${toSlug(projectName)}/${toTaskSlug(task.title)}?type=${task.type}`)}>
-            Add Submission
-          </button>
-        )}
+      <div className="block md:hidden h-[10px] bg-gray-600"/>
+
+      <div className="shrink-0 hidden md:block">
+        <button
+          className="bg-white text-font-shade border-[1.5px] border-card-outline font-semibold text-xs px-3.5 py-[5px] rounded-md cursor-pointer whitespace-nowrap transition-colors duration-150"
+        >
+          Add Submission
+        </button>
       </div>
     </div>
   );
diff --git a/src/Pages/internify/intern/components/ProjectTimeline.tsx b/src/Pages/internify/intern/components/ProjectTimeline.tsx
index a22313a..a2b0225 100644
--- a/src/Pages/internify/intern/components/ProjectTimeline.tsx
+++ b/src/Pages/internify/intern/components/ProjectTimeline.tsx
@@ -1,50 +1,43 @@
-import type { Task } from "../../../../lib/mockProjects";
-import { ArrowDownNarrowWide } from "lucide-react";
+import type { ProjectTask } from "../../../../types/project.types";
 
-const formatDate = (date: Date) =>
-    new Date(date).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
+const formatDate = (dateStr: string) =>
+  new Date(dateStr).toLocaleDateString('id-ID', { day: 'numeric', month: 'short' });
 
-export default function ProjectTimeline({ tasks }: { tasks: Task[] }) {
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
+export default function ProjectTimeline({ tasks }: { tasks: ProjectTask[] }) {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
 
-    return (
-        <div>
-            <div className="flex items-center gap-1.5 mb-4 justify-between">
-                <span className="font-semibold text-md text-[#1a1a1a]">
-                    Timeline
-                </span>
-                <ArrowDownNarrowWide className="w-5 h-5 text-gray-500"/>
-            </div>
+  return (
+    <div className="">
+      <div className="flex items-center gap-1.5 mb-4 justify-between">
+        <span className="font-semibold text-md text-font-shade">Timeline</span>
+      </div>
+      <ul className="relative pl-4">
+        {tasks.map((task) => {
+          const d = new Date(task.deadline_at);
+          d.setHours(0, 0, 0, 0);
+          const isToday = d.getTime() === today.getTime();
+          const isPast = d < today;
+          const active = isToday || isPast;
 
-            <ul className="relative pl-4">
-                {tasks.map((task, idx) => {
-                    const d = new Date(task.deadline.date);
-                    d.setHours(0, 0, 0, 0);
-                    const isToday = d.getTime() === today.getTime();
-                    const isPast = d < today;
-                    const active = isToday || isPast;
-
-                    return (
-                        <li key={idx} className="relative mb-6 list-none">
-                            {/* Dot */}
-                            <div
-                                className={`absolute -left-5 top-0.5 w-3 h-3 rounded-full border-2 border-white ${active ? 'bg-[#C0392B]' : 'bg-[#ccc]'
-                                    } ${isToday ? 'shadow-md' : ''}`}
-                            />
-                            <div
-                                className={`text-[11px] font-semibold ${isToday ? 'text-[#C0392B]' : 'text-[#888]'
-                                    }`}
-                            >
-                                {isToday ? 'Hari ini' : formatDate(task.deadline.date)}
-                            </div>
-                            <div className="text-xs text-[#555] mt-px leading-[1.3]">
-                                {task.title}
-                            </div>
-                        </li>
-                    );
-                })}
-            </ul>
-        </div>
-    );
+          return (
+            <li key={task.id} className="relative mb-6 list-none">
+              {/* Dot */}
+              <div
+                className={`absolute -left-5 top-0.5 w-3 h-3 rounded-full border-2 border-white ${
+                  active ? 'bg-[#C0392B]' : 'bg-[#ccc]'
+                } ${isToday ? 'shadow-md' : ''}`}
+              />
+              <div className={`text-[11px] font-semibold ${isToday ? 'text-[#C0392B]' : 'text-[#888]'}`}>
+                {isToday ? 'Hari ini' : formatDate(task.deadline_at)} {/* ← format ISO string */}
+              </div>
+              <div className="text-xs text-[#555] mt-px leading-[1.3]">
+                {task.title}
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
 }
\ No newline at end of file
diff --git a/src/Pages/internify/intern/components/ProjectsCard.tsx b/src/Pages/internify/intern/components/ProjectsCard.tsx
index f028575..2cbea7c 100644
--- a/src/Pages/internify/intern/components/ProjectsCard.tsx
+++ b/src/Pages/internify/intern/components/ProjectsCard.tsx
@@ -1,53 +1,54 @@
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom';
+import * as LucideIcons from 'lucide-react';
+import type { LucideProps } from 'lucide-react';
+import type { Project } from '../../../../types/project.types';
 
-const toSlug = (name: string) => name.toLowerCase().replace(/\s+/g, '-');
+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;
+};
 
-interface ProjectCardProps {
-  id: number | string
-  name: string
-  mentor: string
-  avatarUrl?: string
-  thumbnailUrl?: string
-  progress: number
-  tasksDone: number
-  tasksTotal: number
-}
+const ProjectCard = (project: Project) => {
+  const navigate = useNavigate();
+  const Icon = getDynamicIcon(project.project_icon);
 
-const ProjectCard = ({
-  name,
-  mentor,
-  avatarUrl,
-  thumbnailUrl,
-  progress,
-  tasksDone,
-  tasksTotal,
-}: ProjectCardProps) => {
-  const navigate = useNavigate()
+
+  const tasksDone = -1; 
+  const tasksTotal = project.total_tasks;
 
   return (
-    <div className="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 w-full flex flex-col">
+    <div
+      onClick={() => navigate(`/intern/projects/${project.slug}`)}
+      className=" rounded-xl overflow-hidden shadow-sm border border-gray-100 w-full flex flex-col cursor-pointer hover:shadow-md transition-shadow duration-200"
+    >
       {/* Thumbnail */}
-      <div className="h-[150px] bg-gradient-to-tr from-red-700 to-red-800 overflow-hidden">
-        {thumbnailUrl && (
-          <img src={thumbnailUrl} alt={name} className="w-full h-full object-cover" />
-        )}
+      <div className="h-[150px] bg-gradient-to-tr from-red-700 to-red-800 overflow-hidden flex items-center justify-center">
+        <Icon className="w-12 h-12 text-white opacity-80" />
       </div>
 
       {/* Content */}
-      <div className="min-h-[180px] max-h-[210px] flex-1 flex flex-col justify-between py-3">
+      <div className="min-h-[180px] max-h-[200px] flex-1 flex flex-col justify-between py-3">
         <div className="px-3 flex flex-col gap-2">
-          <p className="text-xs lg:text-sm font-semibold text-gray-800 leading-tight">{name}</p>
+          {/* Project Name */}
+          <p className="text-xs lg:text-sm font-semibold text-gray-800 leading-tight">
+            {project.project_name}
+          </p>
 
           {/* Mentor */}
           <div className="flex items-center gap-2">
             <div className="w-6 h-6 rounded-full bg-gray-200 overflow-hidden flex-shrink-0">
-              {avatarUrl ? (
-                <img src={avatarUrl} alt={mentor} className="w-full h-full object-cover" />
+              {project.admin.profile_picture ? (
+                <img
+                  src={project.admin.profile_picture}
+                  alt={project.admin.full_name}
+                  className="w-full h-full object-cover"
+                />
               ) : (
                 <div className="w-full h-full bg-gray-300" />
               )}
             </div>
-            <span className="text-xs text-gray-500 truncate">{mentor}</span>
+            <span className="text-xs text-gray-500 truncate">{project.admin.email}</span>
           </div>
 
           {/* Progress bar */}
@@ -55,18 +56,18 @@ const ProjectCard = ({
             <div className="w-full h-1.5 bg-gray-200 rounded-full overflow-hidden">
               <div
                 className="h-full bg-red-600 rounded-full transition-all duration-300"
-                style={{ width: `${progress}%` }}
+                style={{ width: tasksTotal > 0 ? `${(tasksDone / tasksTotal) * 100}%` : '0%' }}
               />
             </div>
-            <span className="text-[10px] text-gray-400 text-right">
+            <span className="text-font text-[12px] font-bold text-right">
               {tasksDone}/{tasksTotal}
             </span>
           </div>
         </div>
+
         {/* Button */}
         <div className="flex items-end justify-end px-3 pb-1">
           <button
-            onClick={() => navigate(`/intern/projects/${toSlug(name)}`)}
             className="bg-red-600 hover:bg-red-700 text-white text-xs font-medium py-1.5 px-3 rounded-xl transition-colors"
           >
             View Project
@@ -74,7 +75,7 @@ const ProjectCard = ({
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default ProjectCard
\ No newline at end of file
+export default ProjectCard;
\ No newline at end of file
diff --git a/src/Pages/internify/intern/components/SidebarIntern.tsx b/src/Pages/internify/intern/components/SidebarIntern.tsx
index 4517631..6f1c2f6 100644
--- a/src/Pages/internify/intern/components/SidebarIntern.tsx
+++ b/src/Pages/internify/intern/components/SidebarIntern.tsx
@@ -1,16 +1,18 @@
 import { useNavigate, useLocation } from 'react-router-dom';
-import { Home, FolderKanban, Award, Settings, HelpCircle, LogOut, ChevronRight, X } from 'lucide-react';
+import { Award, Settings, HelpCircle, X } from 'lucide-react';
+import { GrHomeRounded } from "react-icons/gr";
+import { MdOutlineAssignment, MdLogout } from "react-icons/md";
 
 const navItems = [
-  { label: "Home", icon: Home, path: "/intern" },
-  { label: "List Projects", icon: FolderKanban, path: "/intern/projects" },
+  { label: "Home", icon: GrHomeRounded, path: "/intern" },
+  { label: "List Projects", icon: MdOutlineAssignment, path: "/intern/projects" },
   { label: "Certificates", icon: Award, path: "/intern/certificates" },
 ];
 
 const prefItems = [
   { label: "Settings", icon: Settings, path: "/intern/settings" },
   { label: "FAQ", icon: HelpCircle, path: "/intern/faq" },
-  { label: "Logout", icon: LogOut, path: "/login-internify", danger: true },
+  { label: "Logout", icon: MdLogout, path: "/login-internify", danger: true, isLogout: true },
 ];
 
 interface SidebarProps {
@@ -24,11 +26,18 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
 
   const handleNav = (path: string) => {
     navigate(path);
-    closeSidebar(); // Otomatis tutup sidebar setelah klik menu di HP
+    closeSidebar();
+  };
+
+  const handleLogout = () => {
+    document.cookie = "token=; path=/; max-age=86400; SameSite=Strict";
+
+    closeSidebar();
+    navigate("/login-internify", { replace: true });
   };
 
   return (
-    <aside 
+    <aside
       className={`
         bg-white border-r border-gray-300 flex flex-col py-5 px-3 gap-1 overflow-y-auto flex-shrink-0 transition-transform duration-300 ease-in-out
         lg:sticky lg:top-[50px] lg:h-[calc(100vh-73px)] lg:w-[250px] lg:translate-x-0 lg:z-8
@@ -37,7 +46,7 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
       `}
     >
       {/* Brand & Tombol Close untuk Mobile */}
-      <div className="flex items-center justify-between px-2 pb-4">
+      <div className="flex items-center justify-between px-2 pb-10">
         <div className="flex items-center gap-2.5">
           <div className="w-9 h-9 rounded-[10px] bg-red-600 flex items-center justify-center flex-shrink-0"></div>
           <div>
@@ -45,35 +54,30 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
             <p className="text-[11px] text-gray-400">LMS Portal</p>
           </div>
         </div>
-
-        {/* Tombol Close silang (X): Hanya muncul di HP saat sidebar terbuka */}
-        <button 
-          onClick={closeSidebar} 
+        <button
+          onClick={closeSidebar}
           className="p-1 text-gray-500 hover:bg-gray-100 rounded-lg lg:hidden"
         >
           <X className="w-5 h-5" />
         </button>
       </div>
 
-      <div className="h-px bg-gray-300 my-1" />
-
       {/* Main nav */}
       <nav className="flex flex-col gap-0.5">
         {navItems.map(({ label, icon: Icon, path }) => {
-          const isActive = location.pathname === path; 
+          const isActive = location.pathname === path;
           return (
             <button
               key={path}
               onClick={() => handleNav(path)}
               className={`flex items-center gap-2.5 w-full px-3 py-2 rounded-lg text-[13.5px] font-medium text-left transition-colors
                 ${isActive
-                  ? "bg-red-50 text-red-600 font-semibold border-l-4 border-red-600"
-                  : "text-gray-500 hover:bg-red-50 hover:text-red-600"
+                  ? "bg-red-foreground text-red font-semibold border-l-4 border-base"
+                  : "text-font hover:bg-red-foreground"
                 }`}
             >
               <Icon className="w-[18px] h-[18px] flex-shrink-0" />
               <span>{label}</span>
-              {isActive && <ChevronRight className="w-3.5 h-3.5 ml-auto opacity-60" />}
             </button>
           );
         })}
@@ -86,18 +90,18 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
         PREFERENCES
       </p>
       <nav className="flex flex-col gap-0.5">
-        {prefItems.map(({ label, icon: Icon, path, danger }) => {
+        {prefItems.map(({ label, icon: Icon, path, danger, isLogout }) => {
           const isActive = location.pathname === path;
           return (
             <button
               key={path}
-              onClick={() => handleNav(path)}
+              onClick={() => isLogout ? handleLogout() : handleNav(path)}
               className={`flex items-center gap-2.5 w-full px-3 py-2 rounded-lg text-[13.5px] font-medium text-left transition-colors
                 ${isActive
                   ? "bg-red-50 text-red-600 font-semibold"
                   : danger
-                    ? "text-gray-400 hover:bg-red-50 hover:text-red-600"
-                    : "text-gray-500 hover:bg-red-50 hover:text-red-600"
+                    ? "text-font hover:bg-base-foreground"
+                    : "text-font hover:bg-red-foreground"
                 }`}
             >
               <Icon className="w-[18px] h-[18px] flex-shrink-0" />
diff --git a/src/Pages/internify/intern/components/SubmissionStatusTable.tsx b/src/Pages/internify/intern/components/SubmissionStatusTable.tsx
index b5fa1e9..5de91a6 100644
--- a/src/Pages/internify/intern/components/SubmissionStatusTable.tsx
+++ b/src/Pages/internify/intern/components/SubmissionStatusTable.tsx
@@ -3,7 +3,7 @@ import { FileText, FileUp, Link } from "lucide-react";
 
 interface SubmitStatusTableProps {
   type: "file" | "link";
-  files?: File[];
+  filePath?: string | null;  // ganti dari files: File[]
   link?: string;
   submittedAt?: Date;
   deadline?: Date;
@@ -25,7 +25,7 @@ function getTimeEarly(submittedAt: Date, deadline: Date): string {
 
 export default function SubmitStatusTable({
   type,
-  files = [],
+  filePath,
   link = "",
   submittedAt = new Date(),
   deadline,
@@ -49,16 +49,16 @@ export default function SubmitStatusTable({
       {/* Header */}
       <div className="flex justify-between items-center px-4 py-3 border-b border-box-border">
         <div className="flex items-center gap-2">
-            {confirmDelete ? (
-                <span className="text-xs font-medium text-gray-600">
+          {confirmDelete ? (
+            <span className="text-xs font-medium text-gray-600">
               Are you sure you want to remove your submission?
             </span>
-            ) : (
+          ) : (
             <>
-                <FileUp className="w-5 h-5 text-red-700 stroke-[2]" />
-                <span className="font-bold text-sm text-gray-800">Submit Status</span>
+              <FileUp className="w-5 h-5 text-red-700 stroke-[2]" />
+              <span className="font-bold text-sm text-gray-800">Submit Status</span>
             </>
-            )}
+          )}
         </div>
 
         {confirmDelete ? (
@@ -120,19 +120,13 @@ export default function SubmitStatusTable({
           </div>
           <div className="px-4 py-3 flex flex-col gap-2">
             {type === "file" ? (
-              files.map((f, i) => (
-                <div key={i} className="flex items-center gap-2 text-sm text-gray-800">
-                  <FileText className="w-4 h-4 text-red-700 stroke-[2.5]" />
-                  {f.name}
-                </div>
-              ))
+              <div className="flex items-center gap-2 text-sm text-gray-800">
+                <FileText className="w-4 h-4 text-red-700 stroke-[2.5]" />
+                {filePath ? filePath.split("/").pop() : "File submitted"}
+              </div>
             ) : (
-              <a
-                href={link}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center gap-1.5 text-sm text-blue-600 hover:underline break-all"
-              >
+              <a href={link} target="_blank" rel="noopener noreferrer"
+                className="flex items-center gap-1.5 text-sm text-blue-600 hover:underline break-all">
                 <Link className="w-3.5 h-3.5 shrink-0" />
                 {link}
               </a>
diff --git a/src/Pages/internify/intern/components/TaskForm-file.tsx b/src/Pages/internify/intern/components/TaskForm-file.tsx
index c7a4e1e..903446a 100644
--- a/src/Pages/internify/intern/components/TaskForm-file.tsx
+++ b/src/Pages/internify/intern/components/TaskForm-file.tsx
@@ -2,106 +2,81 @@ import { useState, useRef } from "react";
 import { FileText, UploadCloud, X } from "lucide-react";
 import { LuSendHorizontal } from "react-icons/lu";
 import SubmitStatusTable from "./SubmissionStatusTable";
+import { useSubmission } from "../../../../hooks/useTasks";
+import type { TaskSubmissionData } from "../../../../types/task.types";
 
 interface TaskFormFileProps {
-  onSubmitSuccess: (files: File[]) => void;
+  taskId: string;
   deadline?: Date;
+  initialSubmission?: TaskSubmissionData | null;
 }
 
-export default function TaskFormFile({ onSubmitSuccess, deadline }: TaskFormFileProps) {
+export default function TaskFormFile({ taskId, deadline, initialSubmission }: TaskFormFileProps) {
+  const { submission, loading, submitFile, updateFile, remove } = useSubmission(taskId, initialSubmission);
   const [files, setFiles] = useState<File[]>([]);
   const [isDragActive, setIsDragActive] = useState(false);
-  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files && e.target.files.length > 0) {
-      validateAndAddFiles(Array.from(e.target.files));
-    }
-  };
-
-  const handleDrag = (e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (e.type === "dragenter" || e.type === "dragover") {
-      setIsDragActive(true);
-    } else if (e.type === "dragleave") {
-      setIsDragActive(false);
-    }
-  };
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragActive(false);
-
-    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-      validateAndAddFiles(Array.from(e.dataTransfer.files));
-    }
-  };
 
   const validateAndAddFiles = (selectedFiles: File[]) => {
     const allowedExtensions = ["pdf", "docx", "zip"];
     const validFiles: File[] = [];
-
     selectedFiles.forEach((file) => {
-      const fileExtension = file.name.split(".").pop()?.toLowerCase();
-      if (fileExtension && allowedExtensions.includes(fileExtension)) {
-        if (file.size <= 10 * 1024 * 1024) {
-          validFiles.push(file);
-        } else {
-          alert(`Ukuran file ${file.name} melebihi batas maksimal 10MB.`);
-        }
+      const ext = file.name.split(".").pop()?.toLowerCase();
+      if (ext && allowedExtensions.includes(ext)) {
+        if (file.size <= 10 * 1024 * 1024) validFiles.push(file);
+        else alert(`Ukuran file ${file.name} melebihi 10MB.`);
       } else {
-        alert(`Format file ${file.name} tidak didukung. Harap gunakan PDF, DOCX, atau ZIP.`);
+        alert(`Format ${file.name} tidak didukung. Gunakan PDF, DOCX, atau ZIP.`);
       }
     });
-
-    if (validFiles.length > 0) {
-      setFiles((prev) => [...prev, ...validFiles]);
-    }
+    if (validFiles.length > 0) setFiles((prev) => [...prev, ...validFiles]);
   };
 
-  const removeFile = (indexToRemove: number, e: React.MouseEvent) => {
+  const handleDrag = (e: React.DragEvent) => {
+    e.preventDefault(); e.stopPropagation();
+    setIsDragActive(e.type === "dragenter" || e.type === "dragover");
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault(); e.stopPropagation();
+    setIsDragActive(false);
+    if (e.dataTransfer.files.length > 0) validateAndAddFiles(Array.from(e.dataTransfer.files));
+  };
+
+  const removeFile = (index: number, e: React.MouseEvent) => {
     e.stopPropagation();
-    setFiles((prev) => prev.filter((_, index) => index !== indexToRemove));
+    setFiles((prev) => prev.filter((_, i) => i !== index));
   };
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (files.length === 0) {
-      alert("Silakan pilih atau jatuhkan berkas tugas Anda terlebih dahulu.");
-      return;
-    }
-    // Set to local submitted mode
-    setIsSubmitted(true);
-    // Call parent handler
-    onSubmitSuccess(files);
+    if (files.length === 0) { alert("Pilih file terlebih dahulu."); return; }
+    const res = isEditing
+      ? await updateFile(submission!.id, files[0])
+      : await submitFile(files[0]);
+    if (res) { setIsEditing(false); setFiles([]); }
   };
 
-  const handleEditSubmission = () => {
-    setIsSubmitted(false);
+  const handleDelete = async () => {
+    if (!confirm("Yakin ingin menghapus submission ini?")) return;
+    const ok = await remove(submission!.id);
+    if (ok) { setFiles([]); setIsEditing(false); }
   };
 
-  const handleDeleteSubmission = () => {
-    if (confirm("Are you sure you want to delete this submission?")) {
-      setFiles([]);
-      setIsSubmitted(false);
-    }
-  };
-
-// ganti if (isSubmitted) { return (...) }
-if (isSubmitted) {
-  return (
-    <SubmitStatusTable
-      type="file"
-      files={files}
-      submittedAt={new Date()}
-      deadline={deadline} // opsional, kirim dari parent kalau ada
-      onEdit={handleEditSubmission}
-      onDelete={handleDeleteSubmission}
-    />
-  );
-}
+  // Sudah ada submission dan tidak sedang edit → tampilkan status
+  if (submission && !isEditing) {
+    return (
+      <SubmitStatusTable
+        type="file"
+        filePath={submission.file_path}
+        submittedAt={new Date(submission.submitted_at)}
+        deadline={deadline}
+        onEdit={() => setIsEditing(true)}
+        onDelete={handleDelete}
+      />
+    );
+  }
 
   return (
     <form onSubmit={handleSubmit} className="space-y-4">
@@ -109,16 +84,13 @@ if (isSubmitted) {
         type="file"
         multiple
         ref={fileInputRef}
-        onChange={handleFileChange}
+        onChange={(e) => e.target.files && validateAndAddFiles(Array.from(e.target.files))}
         accept=".pdf,.docx,.zip"
         className="hidden"
       />
-
       <div
-        onDragEnter={handleDrag}
-        onDragOver={handleDrag}
-        onDragLeave={handleDrag}
-        onDrop={handleDrop}
+        onDragEnter={handleDrag} onDragOver={handleDrag}
+        onDragLeave={handleDrag} onDrop={handleDrop}
         onClick={() => fileInputRef.current?.click()}
         className={`w-full min-h-[120px] border border-dashed rounded-xl p-4 bg-box-secondary cursor-pointer transition-all ${isDragActive ? "border-[#B30000] bg-red-50/40" : "border-foreground hover:border-gray-500"
           }`}
@@ -126,20 +98,12 @@ if (isSubmitted) {
         {files.length > 0 ? (
           <div className="space-y-2">
             {files.map((file, index) => (
-              <div
-                key={index}
-                className="flex items-center justify-between text-sm font-medium text-gray-800"
-                onClick={(e) => e.stopPropagation()}
-              >
+              <div key={index} className="flex items-center justify-between text-sm font-medium text-gray-800" onClick={(e) => e.stopPropagation()}>
                 <div className="flex items-center gap-2">
                   <FileText className="w-4 h-4 text-red-700 stroke-[2.5]" />
                   {file.name}
                 </div>
-                <button
-                  type="button"
-                  onClick={(e) => removeFile(index, e)}
-                  className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors"
-                >
+                <button type="button" onClick={(e) => removeFile(index, e)} className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors">
                   <X className="w-4 h-4" />
                 </button>
               </div>
@@ -148,19 +112,16 @@ if (isSubmitted) {
         ) : (
           <div className="flex flex-col items-center justify-center h-full space-y-2 pointer-events-none text-center py-6">
             <UploadCloud className="w-8 h-8 text-gray-400 mx-auto stroke-[1.5]" />
-            <p className="text-sm font-bold text-gray-700">
-              Click to upload <span className="font-medium text-gray-500">or drag & drop</span>
-            </p>
+            <p className="text-sm font-bold text-gray-700">Click to upload <span className="font-medium text-gray-500">or drag & drop</span></p>
             <p className="text-[11px] text-gray-400 font-semibold">PDF, DOCX, or ZIP (Max. 10MB)</p>
           </div>
         )}
       </div>
-
       <button
-        type="submit"
-        className="w-full bg-[#B30000] hover:bg-[#990000] text-white font-bold text-base py-3 rounded-xl transition-colors shadow-md flex items-center justify-center gap-2 tracking-wide cursor-pointer"
+        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"
       >
-        Save Changes
+        {loading ? "Mengirim..." : isEditing ? "Update Submission" : "Save Changes"}
         <LuSendHorizontal className="w-4 h-4 stroke-[2.5]" />
       </button>
     </form>
diff --git a/src/Pages/internify/intern/components/TaskForm-link.tsx b/src/Pages/internify/intern/components/TaskForm-link.tsx
index 478133f..618682d 100644
--- a/src/Pages/internify/intern/components/TaskForm-link.tsx
+++ b/src/Pages/internify/intern/components/TaskForm-link.tsx
@@ -1,80 +1,76 @@
 import { useState } from "react";
-import { Link, FileText } from "lucide-react";
+import { Link } from "lucide-react";
 import { LuSendHorizontal } from "react-icons/lu";
 import SubmitStatusTable from "./SubmissionStatusTable";
+import { useSubmission } from "../../../../hooks/useTasks";
+import type { TaskSubmissionData } from "../../../../types/task.types";
 
 interface TaskFormLinkProps {
-  onSubmitSuccess: (link: string) => void;
+  taskId: string;
   deadline?: Date;
+  initialSubmission?: TaskSubmissionData | null;
 }
 
-export default function TaskFormLink({ onSubmitSuccess, deadline }: TaskFormLinkProps) {
-  const [submissionLink, setSubmissionLink] = useState("");
-  const [isSubmitted, setIsSubmitted] = useState(false);
+export default function TaskFormLink({ taskId, deadline, initialSubmission }: TaskFormLinkProps) {
+  const { submission, loading, submitLink, updateLink, remove } = useSubmission(taskId, initialSubmission);
+  const [inputLink, setInputLink] = useState(initialSubmission?.url_link ?? "");
+  const [isEditing, setIsEditing] = useState(false);
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!submissionLink.trim()) {
-      // alert("Silakan masukkan link tugas Anda terlebih dahulu.");
-      return;
-    }
-    setIsSubmitted(true); // ini hilang
-    onSubmitSuccess(submissionLink);
+    if (!inputLink.trim()) return;
+    const res = isEditing
+      ? await updateLink(submission!.id, inputLink)
+      : await submitLink(inputLink);
+    if (res) { setIsEditing(false); }
   };
 
-  const handleEditSubmission = () => {
-    setIsSubmitted(false);
-  };
+  const handleDelete = async () => {
+  if (!confirm("Yakin ingin menghapus submission ini?")) return;
+  const ok = await remove(submission!.id);
+  if (ok) setInputLink("");
+};
 
-  const handleDeleteSubmission = () => {
-    if (confirm("Are you sure you want to delete this submission?")) {
-      setSubmissionLink("");
-      setIsSubmitted(false);
-    }
-  };
-
-  if (isSubmitted) {
-  return (
-    <SubmitStatusTable
-      type="link"
-      link={submissionLink}
-      submittedAt={new Date()}
-      deadline={deadline}
-      onEdit={handleEditSubmission}
-      onDelete={handleDeleteSubmission}
-    />
-  );
-}
+  if (submission && !isEditing) {
+    return (
+      <SubmitStatusTable
+        type="link"
+        link={submission.url_link ?? ""}
+        submittedAt={new Date(submission.submitted_at)}
+        deadline={deadline}
+        onEdit={() => setIsEditing(true)}
+        onDelete={handleDelete}
+      />
+    );
+  }
 
   return (
     <form onSubmit={handleSubmit} className="space-y-5">
       <div className="space-y-1.5">
-        <label className="text-[11px] font-bold text-gray-700 tracking-wide block">
-          Submission Link (PDF)
+        <label className="text-[11px] font-bold text-font-shade tracking-wide block">
+          {isEditing ? "Update Submission Link" : "Submission Link"}
         </label>
         <div className="relative flex items-center">
-          <span className="absolute left-3.5 text-gray-400">
+          <span className="absolute left-3.5 text-font/70">
             <Link className="w-4 h-4 stroke-[2]" />
           </span>
           <input
-            type="url"
-            required
+            type="url" required
             placeholder="https://example.com/your-pdf-link"
-            value={submissionLink}
-            onChange={(e) => setSubmissionLink(e.target.value)}
-            className="w-full pl-10 pr-4 py-2.5 bg-gray-50/50 border border-gray-200 rounded-lg text-sm placeholder-gray-400 text-gray-700 focus:outline-none focus:bg-white focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium"
+            value={inputLink}
+            onChange={(e) => setInputLink(e.target.value)}
+            className="w-full pl-10 pr-4 py-2.5 bg-box-primary/50 border border-box-border rounded-lg text-sm placeholder-font text-font focus:outline-none focus:bg-white focus:border-red-600 focus:ring-1 focus:ring-red-600 font-medium"
           />
         </div>
-        <p className="text-[11px] text-gray-400 font-medium pt-0.5">
+        <p className="text-[11px] text-font font-medium pt-0.5">
           Ensure the link is accessible to the mentor (e.g., Google Drive, Dropbox).
         </p>
       </div>
-
       <button
-        type="submit"
-        className="w-full bg-[#B30000] hover:bg-[#990000] text-white font-bold text-base py-3 rounded-xl transition-colors shadow-md flex items-center justify-center gap-2 tracking-wide cursor-pointer"
+        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"
       >
-        Submit Task
+        {loading ? "Mengirim..." : isEditing ? "Update Submission" : "Submit Task"}
         <LuSendHorizontal className="w-4 h-4 stroke-[2.5]" />
       </button>
     </form>
diff --git a/src/Pages/internify/intern/components/TaskTimeline.tsx b/src/Pages/internify/intern/components/TaskTimeline.tsx
index 5947724..5206e25 100644
--- a/src/Pages/internify/intern/components/TaskTimeline.tsx
+++ b/src/Pages/internify/intern/components/TaskTimeline.tsx
@@ -1,36 +1,50 @@
-import { DEADLINES } from "../../../../lib/mockDeadline";
-import type { Deadline } from "../../../../lib/mockDeadline"; 
+import { useMyTasks } from "../../../../hooks/useProjects";
+import type { InternTaskItem } from "../../../../types/project.types";
 
 const TaskTimeline = () => {
+  const { tasks, loading, error } = useMyTasks();
   const today = new Date();
 
-  const isOverdue = (date: Date) => {
-    return date < today;
-  };
+  const isOverdue = (dateStr: string) => new Date(dateStr) < today;
+
+  if (loading) return (
+    <div className="flex flex-col gap-5">
+      {[...Array(3)].map((_, i) => (
+        <div key={i} className="h-10 bg-gray-100 rounded animate-pulse" />
+      ))}
+    </div>
+  );
+
+  if (error) return <p className="text-red-500 text-sm">{error}</p>;
 
   return (
     <div>
-      <h2 className="text-base font-semibold text-gray-800 mb-5">Task Timeline</h2>
+      <h2 className="font-semibold text-font-shade mb-5">Task Timeline</h2>
       <div className="relative">
-        <div className="absolute left-1 top-2 bottom-2 w-px bg-gray-200" />
+        <div className="absolute left-1 top-2 bottom-2 w-px bg-gray-300" />
         <ul className="flex flex-col gap-5">
-          {DEADLINES.map((item: Deadline, index: number) => {
-            const overdue = isOverdue(item.date);
+          {tasks.map((item: InternTaskItem) => {
+            const overdue = isOverdue(item.deadline_at);
+            const deadlineDate = new Date(item.deadline_at);
             return (
-              <li key={index} className="flex gap-4 pl-0">
+              <li key={item.id} className="flex gap-4 pl-0">
                 <div className="relative flex-shrink-0 mt-1">
                   <span
                     className={`block w-2 h-2 rounded-full z-10 relative ${
-                      overdue ? "bg-red-700" : "bg-gray-400"
+                      overdue ? "bg-primary" : "bg-gray-500"
                     }`}
                   />
                 </div>
                 <div className="flex flex-col gap-0.5 min-w-0">
                   <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-widest">
-                    {item.date.toLocaleDateString("id-ID")}
+                    {deadlineDate.toLocaleDateString("id-ID")} AT{" "}
+                    {deadlineDate.toLocaleTimeString("id-ID", {
+                      hour: "2-digit",
+                      minute: "2-digit",
+                    })}
                   </p>
-                  <p className="text-sm font-semibold text-gray-800">{item.label}</p>
-                  <p className="text-xs text-gray-500">{item.time}</p>
+                  <p className="text-sm font-semibold text-gray-800">{item.title}</p>
+                  <p className="text-xs text-gray-500">{item.description}</p>
                 </div>
               </li>
             );
diff --git a/src/Pages/internify/layout.tsx b/src/Pages/internify/layout.tsx
index 0379c1c..2c05d3e 100644
--- a/src/Pages/internify/layout.tsx
+++ b/src/Pages/internify/layout.tsx
@@ -17,7 +17,7 @@ export const InternLayout = () => {
         <SidebarIntern isOpen={isSidebarOpen} closeSidebar={closeSidebar} />
         {isSidebarOpen && (
           <div 
-            className="fixed inset-0 bg-black/20 z-20 md:hidden min-h-screen" 
+            className="fixed inset-0 bg-black/20 z-20 lg:hidden min-h-screen" 
             onClick={closeSidebar}
           />
         )}
@@ -47,7 +47,7 @@ export const MentorLayout = () => {
           />
         )}
         <main className="container">
-          <Breadcrumbs/>
+          {/* <Breadcrumbs/> */}
           <Outlet />
         </main>
       </div>
diff --git a/src/Pages/internify/mentor/HomePage.tsx b/src/Pages/internify/mentor/HomeMentorPage.tsx
similarity index 100%
rename from src/Pages/internify/mentor/HomePage.tsx
rename to src/Pages/internify/mentor/HomeMentorPage.tsx
diff --git a/src/Pages/internify/mentor/components/SidebarMentor.tsx b/src/Pages/internify/mentor/components/SidebarMentor.tsx
index 60f231d..e7034aa 100644
--- a/src/Pages/internify/mentor/components/SidebarMentor.tsx
+++ b/src/Pages/internify/mentor/components/SidebarMentor.tsx
@@ -12,7 +12,7 @@ const navItems = [
 const prefItems = [
   { label: "Settings", icon: Settings, path: "/mentor/settings" },
   { label: "FAQ", icon: HelpCircle, path: "/mentor/faq" },
-  { label: "Logout", icon: LogOut, path: "/login-internify", danger: true },
+  { label: "Logout", icon: LogOut, path: "/login-internify", danger: true, isLogout: true },
 ];
 
 interface SidebarProps {
@@ -29,6 +29,13 @@ export default function SidebarMentor({ isOpen, closeSidebar }: SidebarProps) {
     closeSidebar();
   };
 
+  const handleLogout = () => {
+    document.cookie = "token=; path=/; max-age=86400; SameSite=Strict";
+
+    closeSidebar();
+    navigate("/login-internify", { replace: true });
+  };
+
   return (
     <aside
       className={`
@@ -39,7 +46,7 @@ export default function SidebarMentor({ isOpen, closeSidebar }: SidebarProps) {
       `}
     >
       {/* Brand & Tombol Close untuk Mobile */}
-      <div className="flex items-center justify-between px-2 pb-4">
+      <div className="flex items-center justify-between px-2 pb-10">
         <div className="flex items-center gap-2.5">
           <div className="w-9 h-9 rounded-[10px] bg-red-600 flex items-center justify-center flex-shrink-0"></div>
           <div>
@@ -56,8 +63,6 @@ export default function SidebarMentor({ isOpen, closeSidebar }: SidebarProps) {
         </button>
       </div>
 
-      <div className="h-px bg-gray-300 my-1" />
-
       {/* Main nav */}
       <nav className="flex flex-col gap-0.5">
         {navItems.map(({ label, icon: Icon, path }) => {
@@ -67,14 +72,13 @@ export default function SidebarMentor({ isOpen, closeSidebar }: SidebarProps) {
               key={path}
               onClick={() => handleNav(path)}
               className={`flex items-center gap-2.5 w-full px-3 py-2 rounded-lg text-[13.5px] font-medium text-left transition-colors
-                      ${isActive
-                  ? "bg-red-50 text-red-600 font-semibold border-l-4 border-red-600"
-                  : "text-gray-500 hover:bg-red-50 hover:text-red-600"
+                ${isActive
+                  ? "bg-base-foreground text-base font-semibold border-l-4 border-base"
+                  : "text-font hover:bg-base-foreground hover:text-base"
                 }`}
             >
               <Icon className="w-[18px] h-[18px] flex-shrink-0" />
               <span>{label}</span>
-              {isActive && <ChevronRight className="w-3.5 h-3.5 ml-auto opacity-60" />}
             </button>
           );
         })}
@@ -87,18 +91,18 @@ export default function SidebarMentor({ isOpen, closeSidebar }: SidebarProps) {
         PREFERENCES
       </p>
       <nav className="flex flex-col gap-0.5">
-        {prefItems.map(({ label, icon: Icon, path, danger }) => {
+        {prefItems.map(({ label, icon: Icon, path, danger, isLogout }) => {
           const isActive = location.pathname === path;
           return (
             <button
               key={path}
-              onClick={() => handleNav(path)}
+              onClick={() => isLogout ? handleLogout() : handleNav(path)}
               className={`flex items-center gap-2.5 w-full px-3 py-2 rounded-lg text-[13.5px] font-medium text-left transition-colors
                 ${isActive
                   ? "bg-red-50 text-red-600 font-semibold"
                   : danger
-                    ? "text-gray-400 hover:bg-red-50 hover:text-red-600"
-                    : "text-gray-500 hover:bg-red-50 hover:text-red-600"
+                    ? "text-font hover:bg-base-foreground hover:text-base"
+                    : "text-font hover:bg-base-foreground hover:text-base"
                 }`}
             >
               <Icon className="w-[18px] h-[18px] flex-shrink-0" />
diff --git a/src/Pages/utils/ProtectedRoute.tsx b/src/Pages/utils/ProtectedRoute.tsx
index 1f4094f..59c0119 100644
--- a/src/Pages/utils/ProtectedRoute.tsx
+++ b/src/Pages/utils/ProtectedRoute.tsx
@@ -1,13 +1,12 @@
 import { Outlet, Navigate } from "react-router-dom";
 
 interface PrivateRouteProps {
-  allowedRoles?: ("admin" | "intern" | "mentor")[];
+  allowedRoles?: ("intern" | "admin")[];
 }
 
-// Helper function untuk decode payload JWT tanpa library external
 const decodeJWT = (token: string) => {
   try {
-    const base64Url = token.split(".")[1]; // Ambil bagian payload (segmen kedua)
+    const base64Url = token.split(".")[1];
     const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
     const jsonPayload = decodeURIComponent(
       window
@@ -23,31 +22,25 @@ const decodeJWT = (token: string) => {
 };
 
 const ProtectedRoutes = ({ allowedRoles }: PrivateRouteProps) => {
-  // 1. Ambil token dari cookie
   const token = document.cookie
     .split("; ")
     .find((row) => row.startsWith("token="))
     ?.split("=")[1];
 
-  // Jika tidak punya token, tendang ke login admin awal
   if (!token) {
-    return <Navigate to="/login-admin" replace />;
+    return <Navigate to="/login-internify" replace />;
   }
 
-  // 2. Decode token untuk mendapatkan role asli dari Backend
   const decoded = decodeJWT(token);
-  const userRole = decoded?.role as "admin" | "intern" | "mentor" | undefined;
+  const userRole = decoded?.role as"intern" | "admin" | undefined;
 
-  // Jika token corrupt atau tidak bisa di-decode, hanguskan dan tendang ke login
   if (!userRole) {
-    return <Navigate to="/login-admin" replace />;
+    return <Navigate to="/login-internify" replace />;
   }
 
-  // 3. Periksa hak akses role terhadap halaman yang dituju
   if (allowedRoles && !allowedRoles.includes(userRole)) {
     // Jika role tidak diizinkan, kembalikan ke base dashboard masing-masing role
-    if (userRole === "admin") return <Navigate to="/dashboard" replace />;
-    if (userRole === "mentor") return <Navigate to="/mentor" replace />;
+    if (userRole === "admin") return <Navigate to="/mentor" replace />;
     if (userRole === "intern") return <Navigate to="/intern" replace />;
   }
 
diff --git a/src/hooks/useProjects.ts b/src/hooks/useProjects.ts
new file mode 100644
index 0000000..5cfd188
--- /dev/null
+++ b/src/hooks/useProjects.ts
@@ -0,0 +1,230 @@
+// hooks/useProject.ts
+import { useState, useEffect, useCallback } from "react";
+import type {
+  Project,
+  ProjectDetail,
+  InternTaskItem,
+  InternDetail,
+  CreateProjectPayload,
+  UpdateProjectPayload,
+  AssignMemberPayload,
+  ProjectMember
+} from "../types/project.types";
+import {
+  getProjects,
+  getProjectById,
+  getMyProjects,
+  getMyTasks,
+  getMentorProjects,
+  getAllInterns,
+  createProject,
+  updateProject,
+  archiveProject,
+  assignMember,
+  getProjectMembers
+} from "../services/ProjectService";
+
+// GET /project-api/get
+export const useProjects = (status?: "active" | "completed" | "archived") => {
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const refetch = useCallback(() => {
+    setLoading(true);
+    getProjects(status)
+      .then(setProjects)
+      .catch(() => setError("Gagal memuat projects."))
+      .finally(() => setLoading(false));
+  }, [status]);
+
+  useEffect(() => { refetch(); }, [refetch]);
+
+  return { projects, loading, error, refetch };
+};
+
+// GET /project-api/get/{id}
+export const useProjectDetail = (id: string) => {
+  const [project, setProject] = useState<ProjectDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const refetch = useCallback(() => {
+    if (!id) return;
+    setLoading(true);
+    getProjectById(id)
+      .then(setProject)
+      .catch(() => setError("Gagal memuat detail project."))
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  useEffect(() => { refetch(); }, [refetch]);
+
+  return { project, loading, error, refetch };
+};
+
+//Khusus Ambil Intern dari Project/{id}
+export const useProjectInterns = (projectId: string) => {
+  const [interns, setInterns] = useState<ProjectMember[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!projectId) return;
+    setLoading(true);
+    getProjectMembers(projectId)
+      .then(setInterns)
+      .catch(() => setError("Gagal memuat participants."))
+      .finally(() => setLoading(false));
+  }, [projectId]);
+
+  return { interns, loading, error };
+};
+
+// GET /project-api/my-projects
+export const useMyProjects = () => {
+  const [projects, setProjects] = useState<ProjectDetail[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    getMyProjects()
+      .then(setProjects)
+      .catch(() => setError("Gagal memuat my projects."))
+      .finally(() => setLoading(false));
+  }, []);
+
+  return { projects, loading, error };
+};
+
+// GET /project-api/my-tasks
+export const useMyTasks = () => {
+  const [tasks, setTasks] = useState<InternTaskItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    getMyTasks()
+      .then(setTasks)
+      .catch(() => setError("Gagal memuat tasks."))
+      .finally(() => setLoading(false));
+  }, []);
+
+  return { tasks, loading, error };
+};
+
+// GET /project-api/mentor-projects
+export const useMentorProjects = () => {
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    getMentorProjects()
+      .then(setProjects)
+      .catch(() => setError("Gagal memuat mentor projects."))
+      .finally(() => setLoading(false));
+  }, []);
+
+  return { projects, loading, error };
+};
+
+// GET /project-api/interns
+export const useAllInterns = () => {
+  const [interns, setInterns] = useState<InternDetail[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    getAllInterns()
+      .then(setInterns)
+      .catch(() => setError("Gagal memuat data interns."))
+      .finally(() => setLoading(false));
+  }, []);
+
+  return { interns, loading, error };
+};
+
+// POST /project-api/add
+export const useCreateProject = () => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const create = async (payload: CreateProjectPayload) => {
+    setLoading(true);
+    setError(null);
+    try {
+      return await createProject(payload);
+    } catch {
+      setError("Gagal membuat project.");
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { create, loading, error };
+};
+
+// PATCH /project-api/update/{id}
+export const useUpdateProject = () => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const update = async (id: string | number, payload: UpdateProjectPayload) => {
+    setLoading(true);
+    setError(null);
+    try {
+      return await updateProject(id, payload);
+    } catch {
+      setError("Gagal mengupdate project.");
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { update, loading, error };
+};
+
+// DELETE /project-api/delete/{id}
+export const useArchiveProject = () => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const archive = async (id: string | number) => {
+    setLoading(true);
+    setError(null);
+    try {
+      return await archiveProject(id);
+    } catch {
+      setError("Gagal mengarsipkan project.");
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { archive, loading, error };
+};
+
+// POST /project-api/assign-member
+export const useAssignMember = () => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const assign = async (payload: AssignMemberPayload) => {
+    setLoading(true);
+    setError(null);
+    try {
+      return await assignMember(payload);
+    } catch {
+      setError("Gagal assign member.");
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { assign, loading, error };
+};
\ No newline at end of file
diff --git a/src/hooks/useTasks.ts b/src/hooks/useTasks.ts
new file mode 100644
index 0000000..49cc841
--- /dev/null
+++ b/src/hooks/useTasks.ts
@@ -0,0 +1,180 @@
+// hooks/useTasks.ts
+import { useState, useEffect, useCallback } from "react";
+import type { ProjectTask, ProjectTaskDetail, CreateTaskPayload, UpdateTaskPayload, TaskSubmissionData } from "../types/task.types";
+import {
+  getProjectTasks,
+  getTaskById,
+  createTask,
+  updateTask,
+  deleteTask,
+  submitTaskFile,
+  submitTaskLink,
+  updateSubmissionFile,
+  updateSubmissionLink,
+  deleteSubmission,
+} from "../services/TaskService";
+
+// GET /task-api/projects/{id_project}/tasks
+export const useProjectTasks = (projectId: string) => {
+  const [tasks, setTasks] = useState<ProjectTask[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!projectId) return;
+    setLoading(true);
+    getProjectTasks(projectId)
+      .then(setTasks)
+      .catch(() => setError("Gagal memuat task."))
+      .finally(() => setLoading(false));
+  }, [projectId]);
+
+  return { tasks, loading, error };
+};
+
+// GET /task-api/tasks/{id}
+export const useTaskDetail = (taskId: string, projectId?: string) => {
+  const [task, setTask] = useState<ProjectTaskDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const refetch = useCallback(() => {
+    if (!taskId) return;
+    setLoading(true);
+    getTaskById(taskId, projectId)
+      .then(setTask)
+      .catch(() => setError("Gagal memuat detail task."))
+      .finally(() => setLoading(false));
+  }, [taskId, projectId]);
+
+  useEffect(() => { refetch(); }, [refetch]);
+
+  return { task, loading, error, refetch };
+};
+
+// POST /task-api/projects/{id_project}/tasks
+export const useCreateTask = (projectId: string) => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const create = async (payload: CreateTaskPayload): Promise<ProjectTask | null> => {
+    setLoading(true);
+    setError(null);
+    try {
+      return await createTask(projectId, payload);
+    } catch {
+      setError("Gagal membuat task.");
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { create, loading, error };
+};
+
+// PATCH /task-api/tasks/{id}
+export const useUpdateTask = () => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const update = async (
+    taskId: string | number,
+    payload: UpdateTaskPayload,
+    projectId?: string
+  ) => {
+    setLoading(true);
+    setError(null);
+    try {
+      return await updateTask(taskId, payload, projectId);
+    } catch {
+      setError("Gagal mengupdate task.");
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { update, loading, error };
+};
+
+// DELETE /task-api/tasks/{id}
+export const useDeleteTask = () => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const remove = async (taskId: string | number, projectId?: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      await deleteTask(taskId, projectId);
+      return true;
+    } catch {
+      setError("Gagal menghapus task.");
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { remove, loading, error };
+};
+
+// POST + PATCH + DELETE submission — digabung dalam satu hook per task
+export const useSubmission = (taskId: string, initialSubmission?: TaskSubmissionData | null, projectId?: string) => {
+  const [submission, setSubmission] = useState<TaskSubmissionData | null>(initialSubmission ?? null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const submitFile = async (file: File) => {
+    setLoading(true); setError(null);
+    try {
+      const res = await submitTaskFile(taskId, file, projectId);
+      if (res) setSubmission(res);
+      return res;
+    } catch { setError("Gagal submit file."); return null; }
+    finally { setLoading(false); }
+  };
+
+  const submitLink = async (url: string) => {
+    setLoading(true); setError(null);
+    try {
+      const res = await submitTaskLink(taskId, url, projectId);
+      if (res) setSubmission(res);
+      return res;
+    } catch { setError("Gagal submit link."); return null; }
+    finally { setLoading(false); }
+  };
+
+  const updateFile = async (submissionId: number, file: File) => {
+    setLoading(true); setError(null);
+    try {
+      const res = await updateSubmissionFile(submissionId, file);
+      if (res) setSubmission(res);
+      return res;
+    } catch { setError("Gagal update submission."); return null; }
+    finally { setLoading(false); }
+  };
+
+  const updateLink = async (submissionId: number, url: string) => {
+    setLoading(true); setError(null);
+    try {
+      const res = await updateSubmissionLink(submissionId, url);
+      if (res) setSubmission(res);
+      return res;
+    } catch { setError("Gagal update submission."); return null; }
+    finally { setLoading(false); }
+  };
+
+  const remove = async (submissionId: number) => {
+    setLoading(true); setError(null);
+    try {
+      await deleteSubmission(submissionId);
+      setSubmission(null);
+      return true;
+    } catch { setError("Gagal hapus submission."); return false; }
+    finally { setLoading(false); }
+  };
+
+  return { submission, submitFile, submitLink, updateFile, updateLink, remove, loading, error };
+};
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 01502d2..a6d3e55 100644
--- a/src/index.css
+++ b/src/index.css
@@ -16,16 +16,23 @@
   /* Dasar Warna Gelap */
   --color-background: #fdfdfd;
   --color-foreground: #1e282c;
+  --color-font: #6a7282;
+  --color-font-shade: #393b40;
 
   --color-card: #f3f3f3;
+  --color-card-outline: #a9afbb;
   --color-card-hover: #d5d5d5;
 
-  --color-box-primary: #ebebeb;
+  --color-box-primary: #FFFFFF;
   --color-box-secondary: #f3f4f6 ;
-  --color-box-border: #d8d9db;
+  --color-box-border: #a9afbb;
 
   --color-primary: #ad2b19;
   --color-primary-foreground: #ffffff;
+  --color-primary-hover: #84281c;
+
+  --color-red: #e82222;
+  --color-red-foreground: #fef2f2;
 
   --color-border: #a8a9aa;
 
@@ -36,14 +43,11 @@
 }
 
 .container {
-  flex: 1;
-  min-width: 0; /* penting! mencegah overflow */
+  min-width: 0;
   padding-inline: calc(var(--spacing) * 14);
   padding-block: calc(var(--spacing) * 12);
   background-color: var(--color-background);
-  display: flex;
   flex-direction: column;
-  gap: 13px;
   min-height: 100vh;
 }
 
@@ -123,6 +127,12 @@ dialog.custom-dialog::backdrop {
   border-bottom: 2px solid #b3b8c0; /* border-gray-100 */
 }
 
+@media (max-width: 1024px) {
+  .container {
+    padding-inline: calc(var(--spacing) * 16);
+  }
+}
+
 /* Breakpoint Medium (md:) - Aktif saat lebar layar >= 768px */
 @media (min-width: 768px) {
   .dialog-header {
@@ -132,4 +142,9 @@ dialog.custom-dialog::backdrop {
     padding-top: 1.25rem;   /* 20px */
     padding-bottom: 1.25rem;/* 20px */
   }
+
+  .container {
+    padding-inline: calc(var(--spacing) * 14);
+    padding-block: calc(var(--spacing) * 10);
+  }
 }
\ No newline at end of file
diff --git a/src/Pages/utils/api.ts b/src/lib/api.ts
similarity index 87%
rename from src/Pages/utils/api.ts
rename to src/lib/api.ts
index 0d7b8be..808fe35 100644
--- a/src/Pages/utils/api.ts
+++ b/src/lib/api.ts
@@ -4,7 +4,6 @@ const api = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL,
 });
 
-// Otomatis tempel Token Bearer di setiap request ke BE
 api.interceptors.request.use((config) => {
   const token = document.cookie
     .split("; ")
diff --git a/src/services/ProjectService.ts b/src/services/ProjectService.ts
new file mode 100644
index 0000000..3192758
--- /dev/null
+++ b/src/services/ProjectService.ts
@@ -0,0 +1,96 @@
+// services/ProjectService.ts
+import api from "../lib/api";
+import type {
+  Project,
+  ProjectDetail,
+  InternTaskItem,
+  InternDetail,
+  CreateProjectPayload,
+  UpdateProjectPayload,
+  AssignMemberPayload,
+  MemberAssignment,
+  ProjectMember
+} from "../types/project.types";
+
+// POST /project-api/add
+export const createProject = async (
+  payload: CreateProjectPayload
+): Promise<ProjectDetail> => {
+  const res = await api.post("/project-api/add", payload);
+  return res.data.data;
+};
+
+// GET /project-api/get
+export const getProjects = async (
+  status?: "active" | "completed" | "archived"
+): Promise<Project[]> => {
+  const res = await api.get("/project-api/get", {
+    params: status ? { status } : undefined,
+  });
+  return res.data.data;
+};
+
+// GET /project-api/get/{id} → ambil members saja
+export const getProjectMembers = async (
+  id: string | number
+): Promise<ProjectMember[]> => {
+  const res = await api.get(`/project-api/get/${id}`);
+  return res.data.data.members;
+};
+
+// GET /project-api/get/{id}
+export const getProjectById = async (
+  id: string | number
+): Promise<ProjectDetail> => {
+  const res = await api.get(`/project-api/get/${id}`);
+  return res.data.data;
+};
+
+// PATCH /project-api/update/{id}
+export const updateProject = async (
+  id: string | number,
+  payload: UpdateProjectPayload
+): Promise<ProjectDetail> => {
+  const res = await api.patch(`/project-api/update/${id}`, payload);
+  return res.data.data;
+};
+
+// DELETE /project-api/delete/{id} — soft delete (archive)
+export const archiveProject = async (
+  id: string | number
+): Promise<ProjectDetail> => {
+  const res = await api.delete(`/project-api/delete/${id}`);
+  return res.data.data;
+};
+
+// GET /project-api/my-projects (intern only)
+export const getMyProjects = async (): Promise<ProjectDetail[]> => {
+  const res = await api.get("/project-api/my-projects");
+  return res.data.data;
+};
+
+// GET /project-api/my-tasks (intern only)
+export const getMyTasks = async (): Promise<InternTaskItem[]> => {
+  const res = await api.get("/project-api/my-tasks");
+  return res.data.data;
+};
+
+// GET /project-api/mentor-projects (admin/mentor only)
+export const getMentorProjects = async (): Promise<Project[]> => {
+  const res = await api.get("/project-api/mentor-projects");
+  return res.data.data;
+};
+
+// GET /project-api/interns (admin/mentor only)
+export const getAllInterns = async (): Promise<InternDetail[]> => {
+  const res = await api.get("/project-api/interns");
+  return res.data.data;
+};
+
+// POST /project-api/assign-member (admin/mentor only)
+export const assignMember = async (
+  payload: AssignMemberPayload
+): Promise<MemberAssignment> => {
+  const res = await api.post("/project-api/assign-member", payload);
+  return res.data.data;
+};
\ No newline at end of file
diff --git a/src/services/TaskService.ts b/src/services/TaskService.ts
new file mode 100644
index 0000000..3d6b0c1
--- /dev/null
+++ b/src/services/TaskService.ts
@@ -0,0 +1,108 @@
+// services/TaskService.ts
+import api from "../lib/api";
+import type {
+  ProjectTask,
+  ProjectTaskDetail,
+  CreateTaskPayload,
+  UpdateTaskPayload,
+  TaskSubmissionData,
+} from "../types/task.types";
+
+// ── Task ──────────────────────────────────────────────
+
+export const createTask = async (
+  projectId: string | number,
+  payload: CreateTaskPayload
+): Promise<ProjectTask> => {
+  const res = await api.post(`/task-api/projects/${projectId}/tasks`, payload);
+  return res.data.data;
+};
+
+export const getProjectTasks = async (
+  projectId: string | number
+): Promise<ProjectTask[]> => {
+  const res = await api.get(`/task-api/projects/${projectId}/tasks`);
+  return res.data.data;
+};
+
+export const getTaskById = async (
+  taskId: string | number,
+  projectId?: string | number
+): Promise<ProjectTaskDetail> => {
+  const res = await api.get(`/task-api/tasks/${taskId}`, {
+    params: projectId ? { project: projectId } : undefined,
+  });
+  return res.data.data;
+};
+
+export const updateTask = async (
+  taskId: string | number,
+  payload: UpdateTaskPayload,
+  projectId?: string | number
+): Promise<ProjectTask> => {
+  const res = await api.patch(`/task-api/tasks/${taskId}`, payload, {
+    params: projectId ? { project: projectId } : undefined,
+  });
+  return res.data.data;
+};
+
+export const deleteTask = async (
+  taskId: string | number,
+  projectId?: string | number
+): Promise<void> => {
+  await api.delete(`/task-api/tasks/${taskId}`, {
+    params: projectId ? { project: projectId } : undefined,
+  });
+};
+
+// ── Submission ────────────────────────────────────────
+
+export const submitTaskFile = async (
+  taskId: string | number,
+  file: File,
+  projectId?: string | number
+): Promise<TaskSubmissionData> => {
+  const formData = new FormData();
+  formData.append("submission_file", file);
+  const res = await api.post(`/task-api/tasks/${taskId}/submissions`, formData, {
+    params: projectId ? { project: projectId } : undefined,
+  });
+  return res.data.data;
+};
+
+export const submitTaskLink = async (
+  taskId: string | number,
+  url_link: string,
+  projectId?: string | number
+): Promise<TaskSubmissionData> => {
+  const formData = new FormData();
+  formData.append("url_link", url_link);
+  const res = await api.post(`/task-api/tasks/${taskId}/submissions`, formData, {
+    params: projectId ? { project: projectId } : undefined,
+  });
+  return res.data.data;
+};
+
+export const updateSubmissionFile = async (
+  submissionId: number,
+  file: File
+): Promise<TaskSubmissionData> => {
+  const formData = new FormData();
+  formData.append("submission_file", file);
+  const res = await api.patch(`/task-api/submissions/${submissionId}`, formData);
+  return res.data.data;
+};
+
+export const updateSubmissionLink = async (
+  submissionId: number,
+  url_link: string
+): Promise<TaskSubmissionData> => {
+  const formData = new FormData();
+  formData.append("url_link", url_link);
+  const res = await api.patch(`/task-api/submissions/${submissionId}`, formData);
+  return res.data.data;
+};
+
+export const deleteSubmission = async (submissionId: number): Promise<void> => {
+  await api.delete(`/task-api/submissions/${submissionId}`);
+};
\ No newline at end of file
diff --git a/src/services/UserService.ts b/src/services/UserService.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/types/project.types.ts b/src/types/project.types.ts
new file mode 100644
index 0000000..3db67ef
--- /dev/null
+++ b/src/types/project.types.ts
@@ -0,0 +1,120 @@
+// types/project.types.ts
+
+export type ProjectStatus = "active" | "completed" | "archived";
+export type MemberStatus = "active" | "inactive";
+
+export interface ProjectAdmin {
+  id: number;
+  full_name: string;
+  email: string;
+  profile_picture: string | null;
+  professional_bio: string | null;
+}
+
+export interface ProjectMember {
+  id: number;
+  id_user: number;
+  status?: MemberStatus;
+  created_at?: string;
+  updated_at?: string;
+}
+
+// Response GET /project-api/get dan GET /project-api/get/{id}
+export interface Project {
+  id: number;
+  slug: string;
+  project_icon: string;
+  project_name: string;
+  description: string;
+  start_date: string;
+  end_date: string;
+  status: ProjectStatus;
+  admin: ProjectAdmin;
+  total_members: number;
+  total_tasks: number;
+  created_at: string;
+  updated_at: string;
+}
+
+// Detail project (includes members array)
+export interface ProjectDetail extends Project {
+  members: ProjectMember[];
+}
+
+// Response GET /project-api/my-tasks
+export interface InternTaskItem {
+  id: number;
+  slug: string;
+  id_project: number;
+  project_slug: string;
+  project_name: string;
+  project_icon: string;
+  title: string;
+  description: string;
+  deadline_at: string;
+  submission_type: "file_upload" | "url_link";
+  submission_status: "pending" | "submitted" | "done" | "overdue";
+  submission_details: {
+    id: number;
+    file_path: string | null;
+    url_link: string | null;
+    submitted_at: string;
+    updated_at: string;
+  } | null;
+}
+
+// Response GET /project-api/interns
+export interface InternDetail {
+  id: number;
+  name: string;
+  email: string;
+  projectName: string;
+  role: string;
+  isAssignedByMentor: boolean;
+  avatar: string | null;
+}
+
+// Payload POST /project-api/add
+export interface CreateProjectPayload {
+  project_icon: string;
+  project_name: string;
+  description: string;
+  start_date: string; // "YYYY-MM-DD"
+  end_date: string;   // "YYYY-MM-DD"
+  member_emails?: string[];
+}
+
+// Payload PATCH /project-api/update/{id}
+export interface UpdateProjectPayload {
+  project_icon?: string;
+  project_name?: string;
+  description?: string;
+  start_date?: string;
+  end_date?: string;
+  status?: ProjectStatus;
+}
+
+// Payload POST /project-api/assign-member
+export interface AssignMemberPayload {
+  id_project: number;
+  id_user: number;
+}
+
+// Response assign-member
+export interface MemberAssignment {
+  id: number;
+  id_project: number;
+  id_user: number;
+  status: MemberStatus;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ProjectMember {
+  id: number;
+  full_name: string;
+  email: string;
+  professional_bio: string | null;
+  position: string;
+  kelompok_peminatan: string;
+}
\ No newline at end of file
diff --git a/src/types/task.types.ts b/src/types/task.types.ts
new file mode 100644
index 0000000..4fc6b02
--- /dev/null
+++ b/src/types/task.types.ts
@@ -0,0 +1,69 @@
+// types/task.types.ts
+
+export type SubmissionType = "file_upload" | "url_link";
+export type DisplayStatus = "pending" | "submitted" | "done" | "overdue";
+
+export interface ProjectTask {
+  id: number;
+  id_project: number;
+  slug: string;
+  title: string;
+  description: string;
+  deadline_at: string;
+  submission_type: SubmissionType;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface TaskSubmissionData {
+  id: number;
+  id_task: number;
+  id_user: number;
+  file_path: string | null;
+  url_link: string | null;
+  submitted_at: string;
+  updated_at: string;
+}
+
+export interface ProjectTaskDetail extends ProjectTask {
+  project: {
+    id: number;
+    project_name: string;
+    project_icon: string;
+  };
+  display_status: DisplayStatus;
+  my_submission: TaskSubmissionData | null;
+}
+
+export interface AdminTaskDetail extends ProjectTask {
+  project: {
+    id: number;
+    project_name: string;
+    project_icon: string;
+  };
+  submission_summary: {
+    total_members: number;
+    total_submitted: number;
+    total_done: number;
+    total_pending: number;
+    total_overdue: number;
+  };
+  submissions: Array<{
+    id_user: number;
+    full_name: string;
+    file_path: string | null;
+    url_link: string | null;
+    submitted_at: string | null;
+    updated_at: string | null;
+  }>;
+}
+
+export interface CreateTaskPayload {
+  title: string;
+  description: string;
+  deadline_date: string; // "YYYY-MM-DD"
+  specific_time: string; // "HH:mm"
+  submission_type: SubmissionType;
+}
+
+export interface UpdateTaskPayload extends Partial<CreateTaskPayload> {}
\ No newline at end of file
diff --git a/src/types/user.types.ts b/src/types/user.types.ts
new file mode 100644
index 0000000..e69de29