diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c3a967a0..53c4d5ec 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -6,7 +6,6 @@ import {
 } from "react-router-dom";
 import Layout from "./components/Header/Layout";
 import { AllCoursesTeacher } from "./components/Courses/AllCoursesTeacher";
-import { CourseDetailTeacher } from "./components/Courses/CourseDetailTeacher";
 import {
   dataLoaderCourseDetail,
   dataLoaderCourses,
@@ -23,6 +22,7 @@ import { synchronizeJoinCode } from "./loaders/join-code.ts";
 import { fetchMe } from "./utils/fetches/FetchMe.ts";
 import {fetchProjectForm} from "./components/ProjectForm/project-form.ts";
 import loadSubmissionOverview from "./loaders/submission-overview-loader.ts";
+import CoursesDetail from "./components/Courses/CoursesDetail.tsx";
 
 const router = createBrowserRouter(
   createRoutesFromElements(
@@ -38,7 +38,7 @@ const router = createBrowserRouter(
         <Route path="courses">
           <Route index element={<AllCoursesTeacher />} loader={dataLoaderCourses}/>
           <Route path="join" loader={synchronizeJoinCode} />
-          <Route path=":courseId" element={<CourseDetailTeacher />} loader={dataLoaderCourseDetail} />
+          <Route path=":courseId" element={<CoursesDetail />} loader={dataLoaderCourseDetail} />
         </Route>
         <Route path="projects">
           <Route
diff --git a/frontend/src/components/Courses/CourseDetailStudent.tsx b/frontend/src/components/Courses/CourseDetailStudent.tsx
new file mode 100644
index 00000000..9a211db2
--- /dev/null
+++ b/frontend/src/components/Courses/CourseDetailStudent.tsx
@@ -0,0 +1,94 @@
+import {
+  Grid,
+  Paper,
+  Typography,
+} from "@mui/material";
+import { useTranslation } from "react-i18next";
+import {
+  Course,    ProjectDetail,
+} from "./CourseUtils";
+import {
+  useLoaderData,
+} from "react-router-dom";
+import { Title } from "../Header/Title";
+import { Me } from "../../types/me";
+import {EmptyOrNotProjects} from "./CourseDetailTeacher"
+  
+/**
+ *
+ * @returns A jsx component representing the course detail page for a teacher
+ */
+export  default function CourseDetailStudent() {
+  
+  const courseDetail = useLoaderData() as {
+      course: Course;
+      projects: ProjectDetail[];
+      adminMes: Me[];
+      studentMes: Me[];
+      me:Me;
+    };
+  const { course, projects, adminMes } = courseDetail;
+  const { t } = useTranslation("translation", {
+    keyPrefix: "courseDetailTeacher",
+  });
+    
+  return (
+    <>
+      <Title title={course.name}></Title>
+      <Grid
+        container
+        direction={"row"}
+        spacing={2}
+        margin="1rem"
+        style={{ height: "80vh" }}
+      >
+        <Grid item xs={5} height="100%">
+          <Paper
+            style={{ height: "100%", maxHeight: "100%", overflow: "auto" }}
+          >
+            <div style={{ padding: "1rem" }}>
+              <Typography variant="h5">{t("projects")}:</Typography>
+              <EmptyOrNotProjects projects={projects} />
+            </div>
+          </Paper>
+        </Grid>
+        <Grid item xs={5} height="100%">
+          <Grid container direction={"column"} spacing={2} height={"100%"}>
+            <Grid
+              item
+              style={{
+                height: "50%",
+              }}
+            >
+              <Paper
+                style={{
+                  overflow: "auto",
+                  height: "100%",
+                }}
+              >
+                <Typography variant="h5">{t("admins")}:</Typography>
+                <Grid container direction={"column"}>
+                  {adminMes.map((admin: Me) => (
+                    <Grid
+                      container
+                      alignItems="center"
+                      spacing={1}
+                      key={admin.uid}
+                    >
+                      <Grid item>
+                        <Typography variant="body1">
+                          {admin.display_name}
+                        </Typography>
+                      </Grid>
+            
+                    </Grid>
+                  ))}
+                </Grid>
+              </Paper>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+    </>
+  );
+}
diff --git a/frontend/src/components/Courses/CourseDetailTeacher.tsx b/frontend/src/components/Courses/CourseDetailTeacher.tsx
index 80142e00..4b512ccc 100644
--- a/frontend/src/components/Courses/CourseDetailTeacher.tsx
+++ b/frontend/src/components/Courses/CourseDetailTeacher.tsx
@@ -113,7 +113,7 @@ function handleDeleteCourse(
  *
  * @returns A jsx component representing the course detail page for a teacher
  */
-export function CourseDetailTeacher(): JSX.Element {
+export  default function CourseDetailTeacher() {
   const [selectedStudents, setSelectedStudents] = useState<string[]>([]);
   const [anchorEl, setAnchorElStudent] = useState<null | HTMLElement>(null);
   const openCodes = Boolean(anchorEl);
@@ -129,6 +129,7 @@ export function CourseDetailTeacher(): JSX.Element {
     projects: ProjectDetail[];
     adminMes: Me[];
     studentMes: Me[];
+    me:Me;
   };
   const { course, projects, adminMes, studentMes } = courseDetail;
   const { t } = useTranslation("translation", {
@@ -276,7 +277,7 @@ export function CourseDetailTeacher(): JSX.Element {
  * @param projects - The array of projects.
  * @returns Either a place holder for no projects or a grid of cards describing the projects.
  */
-function EmptyOrNotProjects({
+export function EmptyOrNotProjects({
   projects,
 }: {
   projects: ProjectDetail[];
diff --git a/frontend/src/components/Courses/CourseUtils.tsx b/frontend/src/components/Courses/CourseUtils.tsx
index 118f8b88..8525f930 100644
--- a/frontend/src/components/Courses/CourseUtils.tsx
+++ b/frontend/src/components/Courses/CourseUtils.tsx
@@ -247,5 +247,6 @@ export const dataLoaderCourseDetail = async ({
   const student_uids = students.map((student: {uid: string}) => getIdFromLink(student.uid));
   const adminMes = await fetchMes([course.teacher, ...admin_uids]);
   const studentMes = await fetchMes(student_uids);
-  return { course, projects, adminMes, studentMes };
+  const me = await fetchMe();
+  return { course, projects, adminMes, studentMes, me};
 };
diff --git a/frontend/src/components/Courses/CoursesDetail.tsx b/frontend/src/components/Courses/CoursesDetail.tsx
new file mode 100644
index 00000000..a697f58b
--- /dev/null
+++ b/frontend/src/components/Courses/CoursesDetail.tsx
@@ -0,0 +1,24 @@
+import {useLoaderData} from "react-router-dom";
+import {Me} from "../../types/me.ts";
+import {Course, ProjectDetail} from "./CourseUtils.tsx";
+import CourseDetailTeacher from "./CourseDetailTeacher.tsx";
+import CourseDetailStudent from "./CourseDetailStudent.tsx";
+
+/**
+ * gives the right detail page
+ * @returns - detail page
+ */
+export default function CoursesDetail() :JSX.Element {
+  const loader = useLoaderData() as {
+    course: Course;
+    projects: ProjectDetail[];
+    adminMes: Me[];
+    studentMes: Me[];
+    me:Me;
+  };
+  if (loader.course.teacher === loader.me.uid) {
+    return <CourseDetailTeacher/>;
+  } else {
+    return <CourseDetailStudent/>;
+  }
+}
\ No newline at end of file