diff --git a/app/AuthClientProvider.tsx b/app/AuthClientProvider.tsx
new file mode 100644
index 0000000..e64460e
--- /dev/null
+++ b/app/AuthClientProvider.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import { useAuth } from "@/context/AuthContext";
+
+export default function AuthClientProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { user, loading } = useAuth();
+
+  useEffect(() => {
+    if (loading) return;
+    if (pathname === "/" || pathname === "/auth") return;
+    if (!user.isLoggedIn) {
+      router.replace("/auth");
+      return;
+    }
+    if (!user.hasCompletedOnboarding && pathname !== "/onboarding") {
+      router.replace("/onboarding");
+    }
+  }, [loading, pathname, user, router]);
+
+  return <>{children}</>;
+}
diff --git a/app/AuthClientServer.tsx b/app/AuthClientServer.tsx
new file mode 100644
index 0000000..ddd2e38
--- /dev/null
+++ b/app/AuthClientServer.tsx
@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import AuthClientProvider from "./AuthClientProvider";
+
+export default function AuthServerProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return <AuthClientProvider>{children}</AuthClientProvider>;
+}
diff --git a/app/auth/page.tsx b/app/auth/page.tsx
index 3d7e6c7..efa5091 100644
--- a/app/auth/page.tsx
+++ b/app/auth/page.tsx
@@ -1,4 +1,3 @@
-// app/auth/page.tsx
 import { redirect } from "next/navigation";
 import { getAuthUser } from "@/lib/auth";
 import AuthClient from "./AuthClient";
diff --git a/app/courses/[courseId]/edit/page.tsx b/app/courses/[courseId]/edit/page.tsx
new file mode 100644
index 0000000..99b32c9
--- /dev/null
+++ b/app/courses/[courseId]/edit/page.tsx
@@ -0,0 +1,24 @@
+import { redirect } from "next/navigation";
+import { getAuthUser } from "@/lib/auth";
+import CourseForm from "@/components/organisation/courses/CourseForm";
+
+export default async function EditCoursePage({
+  params,
+}: {
+  params: { courseId: string };
+}) {
+  const user = await getAuthUser();
+  const { courseId } = await params;
+  if (user?.organisation?.role !== "admin") {
+    redirect(`/courses/${courseId}`);
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow">
+      <h2 className="text-2xl font-semibold text-purple-600 mb-4">
+        Edit Course
+      </h2>
+      <CourseForm mode="edit" courseId={courseId} />
+    </div>
+  );
+}
diff --git a/app/courses/[courseId]/layout.tsx b/app/courses/[courseId]/layout.tsx
new file mode 100644
index 0000000..5c27e2b
--- /dev/null
+++ b/app/courses/[courseId]/layout.tsx
@@ -0,0 +1,50 @@
+import { ReactNode } from "react";
+import Link from "next/link";
+import { getAuthUser } from "@/lib/auth";
+
+export default async function CourseLayout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: { courseId: string };
+}) {
+  const user = await getAuthUser();
+  const isAdmin = user?.organisation?.role === "admin";
+  const { courseId } = await params;
+
+  const response = {
+    id: courseId,
+    name: "Sample Course", // Replace with actual API call to fetch course details
+  };
+  return (
+    <div className="max-w-4xl mx-auto bg-white p-6 rounded shadow">
+      <nav className="text-sm mb-4">
+        <Link href="/courses" className="text-purple-600 hover:underline">
+          Go to All Courses
+        </Link>
+        {/* <span className="mx-2">/</span>
+        <span className="font-medium">{response.name}</span> */}
+      </nav>
+
+      {isAdmin && (
+        <div className="text-right mb-6 space-x-2">
+          <Link
+            href={`/courses/${response.id}/edit`}
+            className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded"
+          >
+            Edit Course Details
+          </Link>
+          <Link
+            href={`/courses/${response.id}/modules/new`}
+            className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded"
+          >
+            Add new module
+          </Link>
+        </div>
+      )}
+
+      {children}
+    </div>
+  );
+}
diff --git a/app/courses/[courseId]/modules/[moduleId]/edit/page.tsx b/app/courses/[courseId]/modules/[moduleId]/edit/page.tsx
new file mode 100644
index 0000000..dd6b95e
--- /dev/null
+++ b/app/courses/[courseId]/modules/[moduleId]/edit/page.tsx
@@ -0,0 +1,27 @@
+import { redirect } from "next/navigation";
+import { getAuthUser } from "@/lib/auth";
+import ModuleForm from "@/components/organisation/courses/ModuleForm";
+
+export default async function EditModulePage({
+  params,
+}: {
+  params: { courseId: string; moduleId: string };
+}) {
+  const user = await getAuthUser();
+  const { courseId, moduleId } = await params;
+  if (!courseId || !moduleId) {
+    redirect("/courses");
+  }
+  if (user?.organisation?.role !== "admin") {
+    redirect(`/${courseId}/modules`);
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow">
+      <h2 className="text-2xl font-semibold text-purple-600 mb-4">
+        Edit Module
+      </h2>
+      <ModuleForm mode="edit" courseId={courseId} moduleId={moduleId} />
+    </div>
+  );
+}
diff --git a/app/courses/[courseId]/modules/[moduleId]/page.tsx b/app/courses/[courseId]/modules/[moduleId]/page.tsx
new file mode 100644
index 0000000..cc8e5b2
--- /dev/null
+++ b/app/courses/[courseId]/modules/[moduleId]/page.tsx
@@ -0,0 +1,18 @@
+// app/courses/[courseId]/modules/[moduleId]/page.tsx
+import ModuleDetail, {
+  ModuleDetailData,
+} from "@/components/organisation/courses/ModuleDetail";
+
+export default async function ModulePage({
+  params,
+}: {
+  params: { courseId: string; moduleId: string };
+}) {
+  const { moduleId } = await params;
+
+  return (
+    <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow">
+      <ModuleDetail moduleId={moduleId} />
+    </div>
+  );
+}
diff --git a/app/courses/[courseId]/modules/new/page.tsx b/app/courses/[courseId]/modules/new/page.tsx
new file mode 100644
index 0000000..e11a5c1
--- /dev/null
+++ b/app/courses/[courseId]/modules/new/page.tsx
@@ -0,0 +1,27 @@
+import { redirect } from "next/navigation";
+import { getAuthUser } from "@/lib/auth";
+import ModuleForm from "@/components/organisation/courses/ModuleForm";
+
+export default async function NewModulePage({
+  params,
+}: {
+  params: { courseId: string };
+}) {
+  const user = await getAuthUser();
+  const { courseId } = await params;
+  if (!courseId) {
+    redirect("/courses");
+  }
+  if (user?.organisation?.role !== "admin") {
+    redirect(`/${courseId}/modules`);
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow">
+      <h2 className="text-2xl font-semibold text-purple-600 mb-4">
+        Create New Module
+      </h2>
+      <ModuleForm mode="create" courseId={courseId} />
+    </div>
+  );
+}
diff --git a/app/courses/[courseId]/page.tsx b/app/courses/[courseId]/page.tsx
new file mode 100644
index 0000000..3f8f466
--- /dev/null
+++ b/app/courses/[courseId]/page.tsx
@@ -0,0 +1,14 @@
+import ModuleList from "@/components/organisation/courses/ModuleList";
+import { getAuthUser } from "@/lib/auth";
+
+export default async function CoursePage({
+  params,
+}: {
+  params: { courseId: string };
+}) {
+  const user = await getAuthUser();
+  const isAdmin = user?.organisation?.role === "admin";
+  const { courseId } = await params;
+
+  return <ModuleList courseId={courseId} isEditMode={isAdmin} />;
+}
diff --git a/app/courses/layout.tsx b/app/courses/layout.tsx
new file mode 100644
index 0000000..675d669
--- /dev/null
+++ b/app/courses/layout.tsx
@@ -0,0 +1,11 @@
+// app/courses/layout.tsx
+import { ReactNode } from "react";
+
+export default function CoursesLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="min-h-screen bg-white p-6">
+      <h1 className="text-4xl font-bold text-purple-600 mb-8">Courses</h1>
+      {children}
+    </div>
+  );
+}
diff --git a/app/courses/new/page.tsx b/app/courses/new/page.tsx
new file mode 100644
index 0000000..f47e241
--- /dev/null
+++ b/app/courses/new/page.tsx
@@ -0,0 +1,20 @@
+// app/courses/new/page.tsx
+import { redirect } from "next/navigation";
+import { getAuthUser } from "@/lib/auth";
+import CourseForm from "@/components/organisation/courses/CourseForm";
+
+export default async function NewCoursePage() {
+  const user = await getAuthUser();
+  if (user?.organisation?.role !== "admin") {
+    redirect("/courses");
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto bg-white p-6 rounded shadow">
+      <h2 className="text-2xl font-semibold text-purple-600 mb-4">
+        Create New Course
+      </h2>
+      <CourseForm mode="create" />
+    </div>
+  );
+}
diff --git a/app/courses/page.tsx b/app/courses/page.tsx
index 29a7f48..7ab03f0 100644
--- a/app/courses/page.tsx
+++ b/app/courses/page.tsx
@@ -1,8 +1,38 @@
+"use client";
+
+import CourseList from "@/components/organisation/courses/CourseList";
+import { Course } from "@/components/organisation/courses/CourseCard";
+import { useAuth } from "@/context/AuthContext";
+import { useState, useEffect } from "react";
+
 export default function CoursesPage() {
-  return (
-    <div>
-      <h1>Courses</h1>
-      <p>List of courses will be displayed here.</p>
-    </div>
-  );
+  const { user } = useAuth();
+  const [courses, setCourses] = useState<Course[]>([]);
+
+  if (!user || !user.hasCompletedOnboarding) {
+    return null;
+  }
+
+  const isAdmin = user?.organisation?.role === "admin";
+
+  useEffect(() => {
+    // Fetch courses from API or database
+    async function fetchCourses() {
+      // Replace with actual API call
+      const fetchedCourses = await fetch("/api/courses", {
+        credentials: "include",
+      })
+        .then((response) => response.json())
+        .then((data) => data["courses"] || [])
+        .catch((error) => {
+          console.error("Failed to fetch courses:", error);
+          return [];
+        });
+      setCourses(fetchedCourses);
+    }
+    fetchCourses();
+  }, []);
+
+  // 3) Render the client component that will show/hide admin buttons
+  return <CourseList courses={courses} isAdmin={isAdmin} />;
 }
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 486d7a8..da6092a 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -1,9 +1,8 @@
-import { redirect } from "next/navigation";
 import { getAuthUser } from "@/lib/auth";
 
 export default async function DashboardPage() {
   const user = await getAuthUser();
-  if (!user) {
+  if (!user || !user.hasCompletedOnboarding) {
     return null;
   }
 
@@ -12,6 +11,7 @@ export default async function DashboardPage() {
       <h1>Welcome, {user.firstname || user.email}</h1>
       <p>Organisation: {user.organisation?.organisationname}</p>
       <p>Role: {user.organisation.role}</p>
+      <p>Dashboard is currently in progress.</p>
     </div>
   );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index c0e726d..f02a20c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import { AuthProvider } from "@/context/AuthContext";
 import LayoutClient from "./layoutClient";
+import AuthServerProvider from "./AuthClientServer";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -20,7 +21,9 @@ export default async function RootLayout({
     <html lang="en">
       <body className={`${inter.className} bg-white`}>
         <AuthProvider>
-          <LayoutClient>{children}</LayoutClient>
+          <AuthServerProvider>
+            <LayoutClient>{children}</LayoutClient>
+          </AuthServerProvider>
         </AuthProvider>
       </body>
     </html>
diff --git a/app/layoutClient.tsx b/app/layoutClient.tsx
index f780c94..47e4591 100644
--- a/app/layoutClient.tsx
+++ b/app/layoutClient.tsx
@@ -1,8 +1,6 @@
 "use client";
 
 import { useAuth } from "@/context/AuthContext";
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
 import HeaderNav from "@/components/HeaderNav";
 import SideNav from "@/components/SideNav";
 import OrgNav from "@/components/organisation/OrgNav";
@@ -16,24 +14,9 @@ export default function LayoutClient({
 }) {
   const { user } = useAuth();
   const isLoggedIn = user && user.isLoggedIn;
-  const router = useRouter();
   const role = user && user.hasCompletedOnboarding && user.organisation?.role;
   const isAdmin = role === "admin";
 
-  const shouldRedirectToOnboarding = isLoggedIn && !user.hasCompletedOnboarding;
-
-  useEffect(() => {
-    if (shouldRedirectToOnboarding) {
-      router.push("/onboarding");
-    }
-  }, [shouldRedirectToOnboarding, router]);
-
-  useEffect(() => {
-    if (!isLoggedIn) {
-      router.push("/auth");
-    }
-  }, [isLoggedIn, router]);
-
   return (
     <div>
       {isLoggedIn && user.hasCompletedOnboarding && isAdmin && (
diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx
index 293187c..db0a5c9 100644
--- a/app/onboarding/page.tsx
+++ b/app/onboarding/page.tsx
@@ -8,9 +8,13 @@ export default function OnboardingPage() {
   const router = useRouter();
   const { user, setUser } = useAuth();
 
+  if (!user || !user.isLoggedIn) {
+    return null;
+  }
+
   const [role, setRole] = useState<"admin" | "employee">("employee");
   const [orgName, setOrgName] = useState("");
-  const [orgId, setOrgId] = useState("");
+  const [orgInvite, setOrgInvite] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
 
@@ -37,7 +41,9 @@ export default function OnboardingPage() {
           method: "POST",
           credentials: "include",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ organisationId: orgId }),
+          body: JSON.stringify({
+            inviteCode: orgInvite,
+          }),
         });
         if (!addemp.ok) {
           const body = await addemp.json().catch(() => ({}));
@@ -45,7 +51,6 @@ export default function OnboardingPage() {
         }
       }
 
-      // 2) Mark onboarding complete
       const done = await fetch("/api/complete-onboarding", {
         method: "POST",
         credentials: "include",
@@ -137,8 +142,8 @@ export default function OnboardingPage() {
             <input
               id="orgName"
               type="text"
-              value={orgId}
-              onChange={(e) => setOrgId(e.target.value)}
+              value={orgInvite}
+              onChange={(e) => setOrgInvite(e.target.value)}
               required
               className="w-full border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-purple-300"
             />
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index 2d5771f..a6b1030 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -1,8 +1,35 @@
-export default function SettingsPage() {
+import { getAuthUser } from "@/lib/auth";
+import OrgSettings from "@/components/organisation/settings/OrgSettings";
+
+export default async function SettingsPage() {
+  const user = await getAuthUser();
+  if (!user || !user.hasCompletedOnboarding) {
+    return null;
+  }
+  const organisation = user.organisation;
+  const role = organisation.role;
+  const isAdmin = role === "admin";
+  const isMember = role === "employee";
+
+  if (isAdmin) {
+    return (
+      <div>
+        <OrgSettings />
+      </div>
+    );
+  }
+
+  if (isMember) {
+    return (
+      <div>
+        <h1>Member Settings</h1>
+      </div>
+    );
+  }
+
   return (
     <div>
-      <h1>Settings</h1>
-      <p>Settings page content goes here.</p>
+      <h1>Page should not reach here</h1>
     </div>
   );
 }
diff --git a/app/users/layout.tsx b/app/users/layout.tsx
new file mode 100644
index 0000000..1c4aaa3
--- /dev/null
+++ b/app/users/layout.tsx
@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+
+export default function UsersLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="min-h-screen bg-white p-6">
+      <h1 className="text-4xl font-bold text-purple-600 mb-8">Users</h1>
+      {children}
+    </div>
+  );
+}
diff --git a/app/users/page.tsx b/app/users/page.tsx
new file mode 100644
index 0000000..f287a12
--- /dev/null
+++ b/app/users/page.tsx
@@ -0,0 +1,17 @@
+import { getAuthUser } from "@/lib/auth";
+import { redirect } from "next/navigation";
+import UsersList from "@/components/organisation/users/UsersList";
+
+export default async function UsersPage() {
+  const user = await getAuthUser();
+  if (!user || !user.hasCompletedOnboarding) {
+    return null;
+  }
+  const isAdmin = user?.organisation?.role === "admin";
+  if (!isAdmin) {
+    redirect("/dashboard");
+    return null;
+  }
+
+  return <UsersList />;
+}
diff --git a/components/SideNav.tsx b/components/SideNav.tsx
index 1b6783d..6d38d41 100644
--- a/components/SideNav.tsx
+++ b/components/SideNav.tsx
@@ -45,7 +45,7 @@ export default function SideNav() {
   const [imgSrc, setImgSrc] = useState(avatarUrl);
 
   return (
-    <aside className="w-64 h-screen bg-white border-r border-gray-200 flex flex-col justify-between">
+    <aside className="sticky top-0 w-64 h-screen bg-white border-r border-gray-200 flex flex-col justify-between overflow-y-auto">
       <div>
         <Link
           href="/"
diff --git a/components/organisation/OrgNav.tsx b/components/organisation/OrgNav.tsx
index 393472a..bc14a2a 100644
--- a/components/organisation/OrgNav.tsx
+++ b/components/organisation/OrgNav.tsx
@@ -42,7 +42,7 @@ export default function OrgNav() {
   const [imgSrc, setImgSrc] = useState(avatarUrl);
 
   return (
-    <aside className="w-64 h-screen bg-white border-r border-gray-200 flex flex-col justify-between">
+    <aside className="sticky top-0 w-64 h-screen bg-white border-r border-gray-200 flex flex-col justify-between overflow-y-auto">
       <div>
         <Link
           href="/"
diff --git a/components/organisation/courses/CourseCard.tsx b/components/organisation/courses/CourseCard.tsx
new file mode 100644
index 0000000..6ab3e5f
--- /dev/null
+++ b/components/organisation/courses/CourseCard.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import Link from "next/link";
+
+export interface Course {
+  id: number;
+  name: string;
+  description?: string;
+}
+
+interface Props {
+  course: Course;
+  isAdmin: boolean;
+}
+
+export default function CourseCard({ course, isAdmin }: Props) {
+  return (
+    <div className="bg-white border rounded-lg p-6 shadow-sm hover:shadow-md transition">
+      <h2 className="text-xl font-semibold text-purple-600">{course.name}</h2>
+      <p className="mt-2 text-gray-700">{course.description?.slice(0, 100)}</p>
+
+      <div className="mt-4 flex items-center space-x-4">
+        <Link href={`/courses/${course.id}`}>
+          <button className="text-purple-600 hover:underline">
+            View Modules
+          </button>
+        </Link>
+        {isAdmin && (
+          <Link href={`/courses/${course.id}/edit`}>
+            <button className="px-3 py-1 border border-purple-600 rounded text-purple-600 hover:bg-purple-50">
+              Edit
+            </button>
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/organisation/courses/CourseDetail.tsx b/components/organisation/courses/CourseDetail.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/components/organisation/courses/CourseForm.tsx b/components/organisation/courses/CourseForm.tsx
new file mode 100644
index 0000000..a40e3b8
--- /dev/null
+++ b/components/organisation/courses/CourseForm.tsx
@@ -0,0 +1,180 @@
+// components/organisation/courses/CourseForm.tsx
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export interface Course {
+  id: number;
+  name: string;
+  description?: string;
+}
+
+interface Props {
+  mode: "create" | "edit";
+  courseId?: string;
+}
+
+export default function CourseForm({ mode, courseId }: Props) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [deleteMode, setDeleteMode] = useState(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    async function fetchCourse() {
+      const response = await fetch(
+        `http://localhost:4000/api/courses/get-course`,
+        {
+          credentials: "include",
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ courseId }),
+        }
+      ).then((res) => {
+        if (!res.ok) {
+          throw new Error("Failed to fetch course");
+        }
+        return res.json();
+      });
+      setName(response.name);
+      setDescription(response.description || "");
+    }
+    if (mode === "edit" && courseId) {
+      // Fetch course details if in edit mode
+      fetchCourse().catch((error) => {
+        console.error("Error fetching course:", error);
+        alert("Failed to load course data. Please try again.");
+        router.push("/courses");
+      });
+    }
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const payload = { courseName: name, description };
+
+    if (mode === "create") {
+      try {
+        const res = await fetch("/api/courses", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          credentials: "include",
+          body: JSON.stringify(payload),
+        });
+        if (!res.ok) {
+          throw new Error("Failed to create course");
+        }
+        const data = await res.json();
+        console.log("Course created:", data);
+        router.push("/courses");
+      } catch (error) {
+        console.error("Error creating course:", error);
+        alert("Failed to create course. Please try again.");
+        return;
+      }
+    } else if (deleteMode) {
+      const confirmed = window.confirm(
+        "Are you sure you want to delete this course? This action cannot be undone."
+      );
+      if (!confirmed) {
+        setDeleteMode(false);
+        return;
+      }
+      if (!courseId) {
+        alert("Please provide a course name to delete.");
+        return;
+      }
+      try {
+        const res = await fetch(`/api/courses`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          credentials: "include",
+          body: JSON.stringify({ courseId: courseId }),
+        });
+        if (!res.ok) {
+          throw new Error("Failed to delete course");
+        }
+        const data = await res.json();
+        console.log("Course deleted:", data);
+        router.push("/courses");
+      } catch (error) {
+        console.error("Error deleting course:", error);
+        alert("Failed to delete course. Please try again.");
+        return;
+      }
+    } else {
+      try {
+        const res = await fetch("/api/courses", {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          credentials: "include",
+          body: JSON.stringify({ courseId: courseId, ...payload }),
+        });
+        if (!res.ok) {
+          throw new Error("Failed to update course");
+        }
+        const data = await res.json();
+        console.log("Course updated:", data);
+        router.push("/courses");
+      } catch (error) {
+        console.error("Error creating course:", error);
+        alert("Failed to update course. Please try again.");
+        return;
+      }
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div>
+        <label className="block text-gray-700">Name</label>
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          required
+          className="w-full mt-1 p-2 border rounded"
+        />
+      </div>
+
+      <div>
+        <label className="block text-gray-700">Description</label>
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          className="w-full mt-1 p-2 border rounded"
+          rows={4}
+        />
+      </div>
+      <div className="space-x-4">
+        <button
+          type="submit"
+          className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded"
+        >
+          {mode === "create" ? "Create Course" : "Save Changes"}
+        </button>
+        {mode === "edit" && (
+          <button
+            type="submit"
+            className="px-6 py-2 bg-red-600 hover:bg-red-700 text-white rounded"
+            onClick={(e) => {
+              setDeleteMode(true);
+            }}
+          >
+            Delete Course
+          </button>
+        )}
+      </div>
+    </form>
+  );
+}
diff --git a/components/organisation/courses/CourseList.tsx b/components/organisation/courses/CourseList.tsx
new file mode 100644
index 0000000..12b0d58
--- /dev/null
+++ b/components/organisation/courses/CourseList.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import Link from "next/link";
+import CourseCard, { Course } from "./CourseCard";
+
+interface Props {
+  courses: Course[];
+  isAdmin: boolean;
+}
+
+export default function CourseList({ courses, isAdmin }: Props) {
+  return (
+    <div className="space-y-6">
+      {isAdmin && (
+        <div className="text-right">
+          <Link href="/courses/new">
+            <button className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded">
+              + Add Course
+            </button>
+          </Link>
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {courses.map((c) => (
+          <CourseCard key={c.id} course={c} isAdmin={isAdmin} />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/components/organisation/courses/ModuleCard.tsx b/components/organisation/courses/ModuleCard.tsx
new file mode 100644
index 0000000..fc4fdb9
--- /dev/null
+++ b/components/organisation/courses/ModuleCard.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import Link from "next/link";
+import { useParams } from "next/navigation";
+
+export interface Module {
+  id: number;
+  title: string;
+  module_type: string;
+  position: number;
+}
+
+interface Props {
+  module: Module;
+  isEditMode: boolean;
+}
+
+export default function ModuleCard({ module, isEditMode }: Props) {
+  const { courseId } = useParams() as { courseId: string };
+
+  return (
+    <div className="bg-white border rounded-lg p-4 shadow-sm hover:shadow-md transition">
+      <div className="flex justify-between items-center">
+        <div>
+          <h3 className="text-lg font-semibold text-purple-600">
+            {module.position}. {module.title}
+          </h3>
+          <p className="text-sm text-gray-500 capitalize">
+            {module.module_type}
+          </p>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Link href={`/courses/${courseId}/modules/${module.id}`}>
+            <button className="px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white rounded">
+              Open
+            </button>
+          </Link>
+          {isEditMode && (
+            <Link href={`/courses/${courseId}/modules/${module.id}/edit`}>
+              <button className="px-3 py-1 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded">
+                Edit
+              </button>
+            </Link>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/organisation/courses/ModuleDetail.tsx b/components/organisation/courses/ModuleDetail.tsx
new file mode 100644
index 0000000..7b16fb6
--- /dev/null
+++ b/components/organisation/courses/ModuleDetail.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import React, { useEffect } from "react";
+
+export interface QuizQuestion {
+  id: number;
+  question_text: string;
+  question_type: string;
+  options?: { id: number; option_text: string }[];
+}
+
+export interface ModuleDetailData {
+  id: number;
+  title: string;
+  module_type: "video" | "pdf" | "slide" | "quiz" | string;
+  description?: string;
+  file_url?: string;
+  quiz?: {
+    title: string;
+    questions: QuizQuestion[];
+  };
+}
+
+interface Props {
+  moduleId: string;
+}
+
+export default function ModuleDetail({ moduleId }: Props) {
+  const [data, setData] = React.useState<ModuleDetailData | null>(null);
+
+  useEffect(() => {
+    async function fetchModuleDetails() {
+      try {
+        const response = await fetch(`/api/courses/get-module`, {
+          credentials: "include",
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ moduleId }),
+        });
+        if (!response.ok) {
+          throw new Error("Failed to fetch module details");
+        }
+        const result = await response.json();
+        setData(result);
+      } catch (error) {
+        console.error("Error fetching module details:", error);
+        setData(null);
+      }
+    }
+    fetchModuleDetails();
+  }, [moduleId]);
+
+  if (!data) {
+    return <p className="text-gray-600">Loading module details...</p>;
+  }
+
+  const finalUrl = `http://localhost:4000${data.file_url}`;
+  return (
+    <div className="space-y-6">
+      <h2 className="text-3xl font-bold text-purple-600">{data.title}</h2>
+      <p>{data.description}</p>
+
+      {data.module_type === "video" && data.file_url && (
+        <video controls src={finalUrl} className="w-full rounded-lg" />
+      )}
+
+      {["pdf", "slide"].includes(data.module_type) && data.file_url && (
+        <iframe src={finalUrl} className="w-full h-[600px] rounded-lg border" />
+      )}
+
+      {data.module_type === "quiz" && data.quiz && (
+        <div className="space-y-4">
+          <h3 className="text-2xl font-semibold">{data.quiz.title}</h3>
+          {data.quiz.questions.map((q) => (
+            <div key={q.id} className="space-y-2">
+              <p className="font-medium">{q.question_text}</p>
+              {q.options?.map((opt) => (
+                <div key={opt.id} className="flex items-center space-x-2">
+                  <input
+                    type="radio"
+                    name={`q-${q.id}`}
+                    disabled
+                    className="border-gray-300"
+                  />
+                  <label>{opt.option_text}</label>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {!["video", "pdf", "slide", "quiz"].includes(data.module_type) && (
+        <p className="text-gray-600">No preview available for this module.</p>
+      )}
+    </div>
+  );
+}
diff --git a/components/organisation/courses/ModuleForm.tsx b/components/organisation/courses/ModuleForm.tsx
new file mode 100644
index 0000000..ef7b55c
--- /dev/null
+++ b/components/organisation/courses/ModuleForm.tsx
@@ -0,0 +1,230 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { ModuleDetailData } from "./ModuleDetail";
+interface Props {
+  mode: "create" | "edit";
+  courseId: string;
+  moduleId?: string;
+}
+
+export default function ModuleForm({ mode, courseId, moduleId }: Props) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [uploadFile, setUploadFile] = useState<File | null>(null);
+  const [deleteMode, setDeleteMode] = useState(false);
+  const router = useRouter();
+  const [moduleType, setModuleType] =
+    useState<ModuleDetailData["module_type"]>("pdf");
+
+  useEffect(() => {
+    async function fetchModuleDetails() {
+      try {
+        const response = await fetch(`/api/courses/get-module`, {
+          credentials: "include",
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ moduleId }),
+        });
+        if (!response.ok) {
+          throw new Error("Failed to fetch module details");
+        }
+        const result = await response.json();
+        setName(result.title);
+        setDescription(result.description);
+        setModuleType(result.module_type);
+      } catch (error) {
+        console.error("Error fetching module details:", error);
+        setName("");
+        setDescription("");
+        setModuleType("pdf");
+      }
+    }
+
+    if (mode === "edit" && moduleId) {
+      fetchModuleDetails();
+    }
+  }, [moduleId]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (mode === "create") {
+      const fd = new FormData();
+      fd.append("courseId", courseId);
+      fd.append("name", name);
+      fd.append("description", description);
+      fd.append("type", moduleType);
+      if (uploadFile) {
+        fd.append("file", uploadFile);
+      }
+      try {
+        const res = await fetch("/api/courses/add-module", {
+          method: "POST",
+          credentials: "include",
+          body: fd,
+        });
+
+        if (!res.ok) throw new Error("Failed to upload module");
+
+        const data = await res.json();
+        console.log("Module created:", data);
+        router.push(`/courses/${courseId}/modules/${data.module_id}`);
+      } catch (err) {
+        console.error(err);
+        alert("Could not create module. Please try again.");
+      }
+    } else if (deleteMode) {
+      if (!confirm("Are you sure you want to delete this module?")) return;
+
+      try {
+        const response = await fetch("/api/courses/delete-module", {
+          method: "DELETE",
+          credentials: "include",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ moduleId }),
+        });
+
+        if (!response.ok) {
+          throw new Error("Failed to delete module");
+        }
+
+        router.push(`/courses`);
+      } catch (error) {
+        console.error("Error deleting module:", error);
+        alert("Failed to delete module. Please try again.");
+      }
+    } else {
+      const fd = new FormData();
+      fd.append("moduleId", moduleId || "");
+      fd.append("name", name);
+      fd.append("description", description);
+      if (uploadFile) {
+        fd.append("type", moduleType);
+        fd.append("file", uploadFile);
+      }
+      try {
+        const res = await fetch("/api/courses/update-module", {
+          method: "PUT",
+          credentials: "include",
+          body: fd,
+        });
+
+        if (!res.ok) throw new Error("Failed to update module");
+
+        const data = await res.json();
+        console.log("Module updated:", data);
+        router.push(`/courses/${courseId}/modules/${moduleId}`);
+      } catch (err) {
+        console.error(err);
+        alert("Could not update module. Please try again.");
+      }
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div>
+        <label className="block text-gray-700">Name</label>
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          required
+          className="w-full mt-1 p-2 border rounded"
+        />
+      </div>
+
+      <div>
+        <label className="block text-gray-700">Description</label>
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          className="w-full mt-1 p-2 border rounded"
+          rows={4}
+        />
+      </div>
+      <div>
+        <label className="block text-gray-700">Material Type</label>
+        <select
+          value={moduleType}
+          onChange={(e) => setModuleType(e.target.value as any)}
+          className="w-full mt-1 p-2 border rounded"
+        >
+          <option value="video">Video</option>
+          <option value="pdf">PDF</option>
+          <option value="slide">Slide</option>
+          <option value="quiz">Quiz</option>
+        </select>
+      </div>
+      <div>
+        <label className="block text-gray-700">Upload Material</label>{" "}
+        <input
+          key={moduleType}
+          type="file"
+          accept={
+            moduleType === "video"
+              ? "video/*"
+              : moduleType === "pdf"
+              ? "application/pdf"
+              : moduleType === "slide"
+              ? ".ppt,.pptx,application/pdf"
+              : undefined
+          }
+          onChange={(e) => setUploadFile(e.target.files?.[0] || null)}
+          required={mode === "create"}
+          className="
+      block w-full 
+      mt-1 p-3 
+      text-gray-600 bg-white 
+      border-2 border-dashed border-gray-300 
+      rounded-lg 
+      cursor-pointer 
+      hover:border-purple-600
+
+      /* style the “Choose file” button: */
+      file:mr-4 
+      file:py-2 file:px-4 
+      file:rounded 
+      file:border-0 
+      file:bg-purple-600 
+      file:text-white 
+      file:font-semibold 
+      hover:file:bg-purple-700
+    "
+        />
+      </div>
+      <div className="space-x-4">
+        {mode === "edit" && (
+          <p className="mb-4 text-sm text-red-500">
+            <strong>Note:</strong> If you upload a new file, the existing file
+            will be replaced with the new one. If you don't upload a new file,
+            the existing file and file type will remain unchanged.
+          </p>
+        )}
+        <button
+          type="submit"
+          className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded"
+        >
+          {mode === "create" ? "Create Module" : "Save Changes"}
+        </button>
+        {mode === "edit" && (
+          <button
+            type="submit"
+            className="px-6 py-2 bg-red-600 hover:bg-red-700 text-white rounded"
+            onClick={(e) => {
+              setDeleteMode(true);
+            }}
+          >
+            Delete Module
+          </button>
+        )}
+      </div>
+    </form>
+  );
+}
diff --git a/components/organisation/courses/ModuleList.tsx b/components/organisation/courses/ModuleList.tsx
new file mode 100644
index 0000000..ae63b8d
--- /dev/null
+++ b/components/organisation/courses/ModuleList.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import ModuleCard, { Module } from "./ModuleCard";
+import { useEffect, useState } from "react";
+
+interface Props {
+  courseId: string;
+  isEditMode: boolean;
+}
+
+export default function ModuleList({ courseId, isEditMode }: Props) {
+  const [modules, setModules] = useState<Module[]>([]);
+
+  useEffect(() => {
+    async function fetchModules() {
+      try {
+        const response = await fetch(`/api/courses/get-modules`, {
+          credentials: "include",
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ courseId }),
+        });
+        if (!response.ok) {
+          throw new Error("Failed to fetch modules");
+        }
+        const data = await response.json();
+        setModules(data.modules || []);
+      } catch (error) {
+        console.error("Error fetching modules:", error);
+        setModules([]);
+      }
+    }
+    fetchModules();
+  }, [courseId]);
+
+  if (modules.length === 0) {
+    return <p className="text-gray-600">No modules added yet.</p>;
+  }
+  // assume modules already sorted by position???
+  return (
+    <div className="space-y-4">
+      {modules.map((m) => (
+        <ModuleCard key={m.id} module={m} isEditMode={isEditMode} />
+      ))}
+    </div>
+  );
+}
diff --git a/components/organisation/settings/OrgSettings.tsx b/components/organisation/settings/OrgSettings.tsx
new file mode 100644
index 0000000..9a1a6e6
--- /dev/null
+++ b/components/organisation/settings/OrgSettings.tsx
@@ -0,0 +1,203 @@
+"use client";
+import { useState, useEffect } from "react";
+
+interface OrganisationData {
+  organisation_name: string;
+  description: string;
+  ai_enabled: boolean;
+  id: string;
+}
+
+export default function OrgSettings() {
+  const [initialData, setInitialData] = useState<OrganisationData | null>(null);
+  const [organisationId, setOrganisationId] = useState("");
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [aiEnabled, setAiEnabled] = useState(false);
+  const [transferEmail, setTransferEmail] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [message, setMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function loadSettings() {
+      try {
+        const res = await fetch("/api/orgs/settings", {
+          credentials: "include",
+        });
+        if (!res.ok) throw new Error("Network response was not ok");
+        const data = (await res.json()).organisation;
+        setInitialData(data);
+        setName(data.organisation_name);
+        setDescription(data.description);
+        setAiEnabled(data.ai_enabled);
+        setOrganisationId(data.id);
+        setError(null);
+        setMessage(null);
+      } catch (err: any) {
+        setError(err.message || "Failed to load settings");
+        setMessage(null);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadSettings();
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setMessage(null);
+    setError(null);
+    if (
+      initialData &&
+      initialData.organisation_name === name &&
+      initialData.description === description &&
+      initialData.ai_enabled === aiEnabled
+    ) {
+      setMessage("No changes made");
+      return;
+    }
+    setIsSaving(true);
+    try {
+      const res = await fetch("/api/orgs/settings", {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          organisation_id: organisationId,
+          organisation_name: name,
+          description,
+          ai_enabled: aiEnabled,
+        }),
+      });
+      if (!res.ok) throw new Error("Failed to save settings");
+      setName(name);
+      setDescription(description);
+      setAiEnabled(aiEnabled);
+      setError(null);
+      setMessage("Settings saved successfully");
+    } catch (err: any) {
+      setError(err.message || "Failed to save settings");
+      setMessage(null);
+      console.error("Error saving organisation settings:", err);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleTransfer = async () => {
+    if (!transferEmail) return;
+    // open confirmation modal...
+    // then call API to transfer ownership
+    alert(`Transfer ownership is not implemented yet.`);
+  };
+
+  return (
+    <div className="flex justify-center py-10 px-4">
+      <div className="w-full max-w-lg bg-white p-8 rounded-2xl shadow-lg">
+        <h2 className="text-2xl font-semibold mb-6 text-purple-700">
+          Organisation Settings
+        </h2>
+        <form onSubmit={handleSubmit} className="space-y-5">
+          {/* Organisation Name */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700">
+              Organisation Name
+            </label>
+            <input
+              type="text"
+              value={name}
+              maxLength={100}
+              required
+              onChange={(e) => setName(e.target.value)}
+              className="mt-1 block w-full rounded-md border border-gray-300 p-2 focus:border-purple-700 focus:ring focus:ring-blue-200"
+            />
+          </div>
+
+          {/* Description */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700">
+              Description
+            </label>
+            <textarea
+              value={description}
+              rows={4}
+              onChange={(e) => setDescription(e.target.value)}
+              className="mt-1 block w-full rounded-md border border-gray-300 p-2 focus:border-purple-600 focus:ring focus:ring-purple-200"
+            />
+          </div>
+
+          {/* AI Toggle */}
+          <div className="flex items-center">
+            <input
+              id="aiEnabled"
+              type="checkbox"
+              checked={aiEnabled}
+              onChange={(e) => setAiEnabled(e.target.checked)}
+              className="h-4 w-4 text-purple-600 focus:ring-purple-500 rounded"
+            />
+            <label htmlFor="aiEnabled" className="ml-2 text-sm text-gray-700">
+              Enable AI-powered recommendations
+            </label>
+          </div>
+
+          {/* Transfer Ownership */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700">
+              Transfer Ownership
+            </label>
+            <div className="flex space-x-2 mt-1">
+              <input
+                type="email"
+                placeholder="New admin’s email"
+                value={transferEmail}
+                onChange={(e) => setTransferEmail(e.target.value)}
+                className="flex-1 rounded-md border border-gray-300 p-2 focus:border-red-500 focus:ring focus:ring-red-200"
+              />
+              <button
+                type="button"
+                onClick={handleTransfer}
+                className="rounded bg-red-500 px-4 py-2 text-white hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-300"
+              >
+                Transfer
+              </button>
+            </div>
+          </div>
+
+          {error && (
+            <div className="text-red-600 text-sm mb-4 text-center">{error}</div>
+          )}
+          {message && (
+            <div className="text-green-600 text-sm mb-4 text-center">
+              {message}
+            </div>
+          )}
+
+          {/* Save / Cancel */}
+          <div className="flex justify-end space-x-3 pt-6 border-t">
+            <button
+              type="button"
+              onClick={() => {
+                setName(name);
+                setDescription(description);
+                setAiEnabled(aiEnabled);
+              }}
+              disabled={isSaving}
+              className="rounded border border-gray-300 px-4 py-2 text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-200"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={isSaving}
+              className="rounded bg-purple-600 px-4 py-2 text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-300"
+            >
+              {isSaving ? "Saving..." : "Save Changes"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/components/organisation/users/UsersList.tsx b/components/organisation/users/UsersList.tsx
new file mode 100644
index 0000000..43225d0
--- /dev/null
+++ b/components/organisation/users/UsersList.tsx
@@ -0,0 +1,199 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+
+interface User {
+  id: number;
+  firstname: string;
+  lastname: string;
+  email: string;
+  role: string;
+}
+
+export default function UsersList() {
+  const [users, setUsers] = useState<User[]>([]);
+  const sortedUsers = [...users].sort((a, b) =>
+    a.role === "admin" && b.role !== "admin"
+      ? -1
+      : b.role === "admin" && a.role !== "admin"
+      ? 1
+      : 0
+  );
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [inviteCode, setInviteCode] = useState<string | null>(null);
+  const [inviteLoading, setInviteLoading] = useState(true);
+  const [inviteError, setInviteError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchUsers() {
+      try {
+        const res = await fetch(`/api/users`, {
+          credentials: "include",
+        });
+        if (!res.ok) throw new Error("Failed to fetch users");
+        const data: User[] = await res.json();
+        setUsers(data);
+      } catch (err: any) {
+        setError(err.message || "Unknown error");
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchUsers();
+  }, []);
+
+  useEffect(() => {
+    async function loadInvite() {
+      try {
+        const res = await fetch("/api/orgs/get-curent-invitecode", {
+          credentials: "include",
+        });
+        if (!res.ok) throw new Error("Failed to load invite code");
+        const { inviteCode } = await res.json();
+        setInviteCode(inviteCode);
+      } catch (e: any) {
+        setInviteError(e.message);
+      } finally {
+        setInviteLoading(false);
+      }
+    }
+    loadInvite();
+  }, []);
+
+  if (loading) {
+    return <p className="text-center py-6">Loading users…</p>;
+  }
+  if (error) {
+    return <p className="text-center py-6 text-red-500">Error: {error}</p>;
+  }
+
+  const handleGenerate = async () => {
+    setInviteLoading(true);
+    try {
+      const res = await fetch("/api/orgs/generate-invite-code", {
+        credentials: "include",
+      });
+      if (!res.ok) throw new Error("Failed to generate invite code");
+      const { inviteCode } = await res.json();
+      setInviteCode(inviteCode);
+      setInviteError(null);
+    } catch (e: any) {
+      setInviteError(e.message);
+    } finally {
+      setInviteLoading(false);
+    }
+  };
+
+  const handleRemoveUser = async (userId: number) => {
+    if (
+      !confirm(
+        "Are you sure you want to remove this user from your organisation? All enrolments and data will be deleted permanently." +
+          "\n\nThis action cannot be undone."
+      )
+    )
+      return;
+    try {
+      const res = await fetch(`/api/users`, {
+        method: "DELETE",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ userId }),
+      });
+      if (!res.ok) throw new Error("Failed to remove user");
+      setUsers(users.filter((u) => u.id !== userId));
+      alert("User removed successfully");
+    } catch (err: any) {
+      setError(err.message || "Failed to remove user");
+      console.error("Error removing user:", err);
+    }
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto bg-white p-6 rounded shadow">
+      <h1 className="text-2xl font-bold mb-4">Users in Your Organisation</h1>
+
+      <div className="mb-6 p-4 bg-blue-50 rounded">
+        <h2 className="text-lg font-semibold mb-2">Invitation Code</h2>
+        {inviteLoading ? (
+          <p>Loading…</p>
+        ) : inviteError ? (
+          <p className="text-red-500">{inviteError}</p>
+        ) : (
+          <div className="flex items-center space-x-2">
+            <code className="font-mono bg-white px-2 py-1 rounded">
+              {inviteCode || "No invite code generated yet"}
+            </code>
+            <button
+              onClick={handleGenerate}
+              className="px-3 py-1 bg-purple-600 text-white rounded text-sm"
+            >
+              Generate New
+            </button>
+            <button
+              onClick={() =>
+                inviteCode && navigator.clipboard.writeText(inviteCode)
+              }
+              className="px-3 py-1 bg-gray-200 rounded text-sm"
+            >
+              Copy
+            </button>
+          </div>
+        )}
+      </div>
+
+      {sortedUsers.length === 0 ? (
+        <p className="text-gray-600">No users found.</p>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full table-auto border-collapse">
+            <thead>
+              <tr className="bg-gray-100">
+                <th className="px-4 py-2 text-left text-sm font-medium">
+                  Name
+                </th>
+                <th className="px-4 py-2 text-left text-sm font-medium">
+                  Email
+                </th>
+                <th className="px-4 py-2 text-left text-sm font-medium">
+                  Role
+                </th>
+                <th className="px-4 py-2 text-left text-sm font-medium">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {sortedUsers.map((u, idx) => (
+                <tr
+                  key={u.id}
+                  className={idx % 2 === 0 ? "bg-white" : "bg-gray-50"}
+                >
+                  <td className="px-4 py-2 text-sm">
+                    {u.firstname} {u.lastname}
+                  </td>
+                  <td className="px-4 py-2 text-sm text-gray-700">{u.email}</td>
+                  <td className="px-4 py-2 text-sm text-purple-600 font-medium">
+                    {u.role}
+                  </td>
+                  {u.role !== "admin" && (
+                    <td className="px-4 py-2 text-sm">
+                      <button
+                        onClick={() => handleRemoveUser(u.id)}
+                        className="text-red-600 hover:text-red-800"
+                      >
+                        Remove
+                      </button>
+                    </td>
+                  )}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/context/AuthContext.tsx b/context/AuthContext.tsx
index b5901ec..963ef66 100644
--- a/context/AuthContext.tsx
+++ b/context/AuthContext.tsx
@@ -13,7 +13,7 @@ type OrgRole = "admin" | "employee";
 
 export interface OrganisationMembership {
   id: number;
-  organisationName: string;
+  organisationname: string;
   role: OrgRole;
 }
 
@@ -31,19 +31,51 @@ interface AuthCtx {
   user: User;
   setUser: (u: User) => void;
   logout: () => Promise<void>;
+  loading: boolean;
 }
 
 const AuthContext = createContext<AuthCtx | undefined>(undefined);
 
+// export function AuthProvider({ children }: { children: ReactNode }) {
+//   const [user, setUser] = useState<User>({ isLoggedIn: false });
+
+//   useEffect(() => {
+//     // 1) Fetch the “whoami”
+//     fetch("/api/me", { credentials: "include" })
+//       .then((r) => r.json())
+//       .then((u: User) => setUser(u))
+//       .catch(() => {});
+//   }, []);
+
+//   async function logout() {
+//     await fetch("/api/logout", { method: "POST", credentials: "include" });
+//     setUser({ isLoggedIn: false });
+//   }
+
+//   return (
+//     <AuthContext.Provider value={{ user, setUser, logout }}>
+//       {children}
+//     </AuthContext.Provider>
+//   );
+// }
+
+// export function useAuth() {
+//   const ctx = useContext(AuthContext);
+//   if (!ctx) throw new Error("useAuth must be inside AuthProvider");
+//   return ctx;
+// }
+
+// add a loading flag in state
 export function AuthProvider({ children }: { children: ReactNode }) {
   const [user, setUser] = useState<User>({ isLoggedIn: false });
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    // 1) Fetch the “whoami”
     fetch("/api/me", { credentials: "include" })
       .then((r) => r.json())
       .then((u: User) => setUser(u))
-      .catch(() => {});
+      .catch(() => {})
+      .finally(() => setLoading(false));
   }, []);
 
   async function logout() {
@@ -52,7 +84,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   }
 
   return (
-    <AuthContext.Provider value={{ user, setUser, logout }}>
+    <AuthContext.Provider value={{ user, setUser, logout, loading }}>
       {children}
     </AuthContext.Provider>
   );
@@ -61,5 +93,5 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 export function useAuth() {
   const ctx = useContext(AuthContext);
   if (!ctx) throw new Error("useAuth must be inside AuthProvider");
-  return ctx;
+  return ctx; // now includes { user, setUser, logout, loading }
 }