diff --git a/client/src/components/nav/TopNavbar.jsx b/client/src/components/nav/TopNavbar.jsx
index a8ff46d..cf22a61 100644
--- a/client/src/components/nav/TopNavbar.jsx
+++ b/client/src/components/nav/TopNavbar.jsx
@@ -57,8 +57,9 @@ function LoggedIn(props) {
 
 	return (
 		<>
-			{navItems.map((item) => (
+			{navItems.map((item, index) => (
 				<a
+					key={index}
 					href={item.path}
 					className={`page ${item.className} ${
 						pathname === item.path ? "curr" : ""
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
index 816f6e3..dc1bd0c 100644
--- a/client/src/pages/Home.jsx
+++ b/client/src/pages/Home.jsx
@@ -7,36 +7,36 @@ import "../styles/home.css"
 function Home() {
     return(
        <div id="home">
-           <div class="section">
-               <p class="homeHeader">Welcome to MyClassroom</p>
+           <div className="section">
+               <p className="homeHeader">Welcome to MyClassroom</p>
                <p>Open-Source Classroom Polling Software</p>
            </div>
 
-           <div class="infoContainer">
-               <div class="infoConnector"></div>
-               <div class="infoBox leftBox">
+           <div className="infoContainer">
+               <div className="infoConnector"></div>
+               <div className="infoBox leftBox">
                    <img src="classroom.png"></img>
-                   <p class="infoText">Create courses and manage lectures easily.</p>
+                   <p className="infoText">Create courses and manage lectures easily.</p>
                </div>
-               <div class="infoBox rightBox">
+               <div className="infoBox rightBox">
                    <img src="goal.png"></img>
-                   <p class="infoText">Track student progress and manage grades.</p>
+                   <p className="infoText">Track student progress and manage grades.</p>
                </div>
-               <div class="infoBox leftBox">
+               <div className="infoBox leftBox">
                    <img src="lms.png"></img>
-                   <p class="infoText">Seamless integration with educational platforms.</p>
+                   <p className="infoText">Seamless integration with educational platforms.</p>
                </div>
-               <div class="infoBox rightBox">
+               <div className="infoBox rightBox">
                    <img src="graph.png"></img>
-                   <p class="infoText">Boost student engagement with interactive polls.</p>
+                   <p className="infoText">Boost student engagement with interactive polls.</p>
                </div>
-               <div class="infoBox leftBox">
+               <div className="infoBox leftBox">
                    <img src="school.png"></img>
-                   <p class="infoText">Highly customizable and free to use.</p>
+                   <p className="infoText">Highly customizable and free to use.</p>
                </div>
            </div>
        </div>
     )
 }
 
-export default Home
+export default Home
\ No newline at end of file
diff --git a/client/src/pages/SingleCoursePage.jsx b/client/src/pages/SingleCoursePage.jsx
index 62e86e6..0643600 100644
--- a/client/src/pages/SingleCoursePage.jsx
+++ b/client/src/pages/SingleCoursePage.jsx
@@ -12,9 +12,11 @@ function DisplayCoursePage(){
     const { courseId } = useParams()
     let navigate = useNavigate()
     const [ course, role, message, error, loading ] = useCourse()
-    if (role === "student") {
-        navigate(`/${courseId}/lectures`)
-    }
+    useEffect(() => {
+        if (role === "student") {
+            navigate(`/${courseId}/lectures`);
+        }
+    }, [role, navigate, courseId]);
 
     return <>
         { loading ? <TailSpin visibile={true}/> : (error ? <Notice message={message} error={error ? "error" : ""}/> : <div className="singleCourseContainer">