diff --git a/src/Header/DropdownMenu.js b/src/Header/DropdownMenu.js
index f4c94bb..80545d3 100644
--- a/src/Header/DropdownMenu.js
+++ b/src/Header/DropdownMenu.js
@@ -1,20 +1,24 @@
-// import OpenPage from "./OpenPage";
-import { useNavigate } from "react-router-dom";
+import OpenPage from "./OpenPage";
 
+/**
+ * @param {null} null -  Takes in nothing
+ * @returns {JSX.Element} JSX - HTML tags and JS functionality
+ * @description Drop down menu elements
+ * @author Brock <darkicewolf50@gmail.com>
+ */
 const DropdownMenu = () => {
-  const navigate = useNavigate();
-
-  const OpenPage = (arg) => {    
-      navigate(arg);
-      console.log(arg);
-  };
-
-  return (
-    <div>
-      <button type = "button" onClick = {() => OpenPage('/JoinTheClub')}>Join the Club</button>
-      <button type = "button" onClick = {() => OpenPage('/UpcomingEvents')}>Upcoming Events</button>
-    </div>
-  );
+	return (
+		<div>
+			<OpenPage
+				pageToGoTo={"/JoinTheClub"}
+				textOnButton={"Join the Club"}
+			/>
+			<OpenPage
+				pageToGoTo={"/UpcomingEvents"}
+				textOnButton={"Upcoming Events"}
+			/>
+		</div>
+	);
 };
 
-export default DropdownMenu;
\ No newline at end of file
+export default DropdownMenu;
diff --git a/src/Header/Header.js b/src/Header/Header.js
index 9d53f58..549f6b2 100644
--- a/src/Header/Header.js
+++ b/src/Header/Header.js
@@ -1,52 +1,83 @@
-import logo from './logo.png';
+import logo from "./logo.png";
 import DropdownMenu from "./DropdownMenu";
-// import OpenPage from "./OpenPage";
-import { useNavigate } from "react-router-dom";
+import OpenPage from "./OpenPage";
+import { useNavigate, Outlet } from "react-router-dom";
 import { useState } from "react";
-import { Outlet } from "react-router-dom";
 import "./Header.css";
 
-export default function Header() {
-    const [isDropdownVisible, setDropdownVisible] = useState(false);
-    const navigate = useNavigate();
+/**
+ * @param {null} null -  Takes in nothing
+ * @returns {JSX.Element} JSX - HTML tags and JS functionality
+ * @description The top header part of the page includes the naviagtion
+ * @author Brock <darkicewolf50@gmail.com>
+ */
+const Header = () => {
+	const [isDropdownVisible, setDropdownVisible] = useState(false);
+	const navigate = useNavigate();
 
-    const OpenPage = (arg) => {    
-        navigate(arg);
-        console.log(arg);
-    };
+	/**
+	 * @param {String} arg -  The page that the button goes to
+	 * @returns {JSX.Element} JSX - HTML tags and JS functionality
+	 * @description Function that move you to the specified place
+	 * @author Brock <darkicewolf50@gmail.com>
+	 */
+	const LinkTo = (arg) => {
+		navigate(arg);
+	};
 
-    const handleMouseEnter = () => {
-        setDropdownVisible(true);
-    };
+	const handleMouseEnter = () => {
+		setDropdownVisible(true);
+	};
 
-    const handleMouseLeave = () => {
-        setDropdownVisible(false);
-    };
+	const handleMouseLeave = () => {
+		setDropdownVisible(false);
+	};
 
-    return (
-        <>
-            <header>
-                <div>
-                    <img style={{background: "gray"}} onClick = {() => OpenPage('/')} src={logo} alt="logo" />
-                    <p>Schulich Offroad</p>
-                </div>
-                <div>
-                    <button type = "button" onClick = {() => OpenPage('/')}>About Us</button>
-                    <button type = "button" onClick = {() => OpenPage('/Teams')}>Teams</button>
-                    <button type = "button" onClick = {() => OpenPage('/OurSponsors')}>Our Sponsors</button>
-                    <button type = "button" onClick = {() => OpenPage('/BecomeASponsor')}>Become a Sponsor</button>
-                    <div
-                    onMouseEnter={handleMouseEnter}
-                    onMouseLeave={handleMouseLeave}
-                    style={{background: "red"}}
-                    >
-                        <button type = "button">Club Membership & Upcoming Events</button>
-                        {isDropdownVisible && <DropdownMenu />}
-                    </div>
-                    <button type = "button" onClick = {() => OpenPage('/Gallery')}>Gallery</button>
-                </div>
-            </header>
-            <Outlet />
-        </>
-    );
-};
\ No newline at end of file
+	return (
+		<>
+			<header>
+				<div>
+					<img
+						style={{ background: "gray" }}
+						onClick={() => LinkTo("/")}
+						src={logo}
+						alt="logo"
+					/>
+					<p>Schulich Offroad</p>
+				</div>
+				<nav>
+					<OpenPage
+						pageToGoTo={"/"}
+						textOnButton={"About Us"}
+					/>
+					<OpenPage
+						pageToGoTo={"/Teams"}
+						textOnButton={"Teams"}
+					/>
+					<OpenPage
+						pageToGoTo={"/OurSponsors"}
+						textOnButton={"Our Sponsors"}
+					/>
+					<OpenPage
+						pageToGoTo={"/BecomeASponsor"}
+						textOnButton={"Become a Sponsor"}
+					/>
+					<div
+						onMouseEnter={handleMouseEnter}
+						onMouseLeave={handleMouseLeave}
+						style={{ background: "red" }}>
+						<button type="button">Club Membership & Upcoming Events</button>
+						{isDropdownVisible && <DropdownMenu />}
+					</div>
+					<OpenPage
+						pageToGoTo={"/Gallery"}
+						textOnButton={"Gallery"}
+					/>
+				</nav>
+			</header>
+			<Outlet />
+		</>
+	);
+};
+
+export default Header;
diff --git a/src/Header/OpenPage.js b/src/Header/OpenPage.js
index dcd4ae1..4bf6914 100644
--- a/src/Header/OpenPage.js
+++ b/src/Header/OpenPage.js
@@ -1,9 +1,26 @@
 import { useNavigate } from "react-router-dom";
 
-const OpenPage = (arg) => {    
-    const navigate = useNavigate();
-    navigate(arg);
-    console.log(arg);
+/**
+ * @param {String} pageToGoTo -  The page that the button goes to
+ * @param {String} textOnButton - The Text tht will be on the button
+ * @returns {JSX.Element} JSX - HTML tags and JS functionality
+ * @description Button Template that moves you to the
+ * @author Brock <darkicewolf50@gmail.com>
+ * @todo refactor so that name is OpenPageButton
+ */
+const OpenPage = ({ pageToGoTo, textOnButton }) => {
+	const navigate = useNavigate();
+	const navigateTo = (param) => {
+		navigate(param);
+	};
+
+	return (
+		<button
+			id="navigateButton"
+			onClick={() => navigateTo(pageToGoTo)}>
+			{textOnButton}
+		</button>
+	);
 };
 
-export default OpenPage;
\ No newline at end of file
+export default OpenPage;