diff --git a/nextjs/src/app/course/[courseName]/settings/SettingsHeader.tsx b/nextjs/src/app/course/[courseName]/settings/SettingsHeader.tsx
index acc164a..274a47b 100644
--- a/nextjs/src/app/course/[courseName]/settings/SettingsHeader.tsx
+++ b/nextjs/src/app/course/[courseName]/settings/SettingsHeader.tsx
@@ -1,8 +1,31 @@
-"use client"
+"use client";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import { getCourseUrl } from "@/services/urlUtils";
+import Link from "next/link";
 import React from "react";
+import { useCourseContext } from "../context/courseContext";
 
 export default function SettingsHeader() {
+  const { courseName } = useCourseContext();
   const { data: settings } = useLocalCourseSettingsQuery();
-  return <h3 className="text-center mb-3">{settings.name} <span className="text-slate-500 text-xl"> settings</span></h3>;
+  return (
+    <>
+      <div className="flex flex-row justify-between">
+        <div className="my-auto">
+
+        <Link className="btn" href={getCourseUrl(courseName)}>
+          Back To Course
+        </Link>
+        </div>
+        <h3 className="text-center mb-3">
+          {settings.name}{" "}
+          <span className="text-slate-500 text-xl"> settings</span>
+        </h3>
+        <div>
+
+        </div>
+      </div>
+      <hr />
+    </>
+  );
 }
diff --git a/nextjs/src/app/course/[courseName]/settings/page.tsx b/nextjs/src/app/course/[courseName]/settings/page.tsx
index c10a59f..b04241b 100644
--- a/nextjs/src/app/course/[courseName]/settings/page.tsx
+++ b/nextjs/src/app/course/[courseName]/settings/page.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import StartAndEndDate from "./StartAndEndDate";
 import SettingsHeader from "./SettingsHeader";
 import DefaultDueTime from "./DefaultDueTime";