diff --git a/src/BecomeASponsor/BecomeASponsor.js b/src/BecomeASponsor/BecomeASponsor.js
index cbdac36..df6953b 100644
--- a/src/BecomeASponsor/BecomeASponsor.js
+++ b/src/BecomeASponsor/BecomeASponsor.js
@@ -9,7 +9,7 @@ import "./BecomeASponsor.css";
  */
 const BecomeASponsor = () => {
 	return (
-		<div id='BecomeASponsor'>
+		<div id="BecomeASponsor">
 			<div>
 				<p>
 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed
@@ -25,12 +25,16 @@ const BecomeASponsor = () => {
 					diam metus sit amet odio. Sed aliquam nulla eu dolor commodo
 					efficitur.
 				</p>
-				<img src='https://static.wixstatic.com/media/5824fc_0d66c0d79eae4882ba76d503d0752012~mv2.jpg/v1/crop/x_0,y_531,w_3120,h_2342/fill/w_752,h_564,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/IMG_20230429_164752611.jpg'></img>
+				<img
+					src="https://static.wixstatic.com/media/5824fc_0d66c0d79eae4882ba76d503d0752012~mv2.jpg/v1/crop/x_0,y_531,w_3120,h_2342/fill/w_752,h_564,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/IMG_20230429_164752611.jpg"
+					alt="Student Driving the Green (2019 Car)"
+				/>
 			</div>
 			<div>
 				<img
-					src='https://res.cloudinary.com/dpgrgsh7g/image/upload/v1708797415/Screenshot_from_2024-02-24_10-52-24_nsn9uv.png'
-					alt='Sponsorship Package with Benefits'></img>
+					src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1708797415/Screenshot_from_2024-02-24_10-52-24_nsn9uv.png"
+					alt="Sponsorship Package with Benefits"
+				/>
 				<p>
 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
 					laoreet nulla eget posuere suscipit. Curabitur vitae porta velit. Nunc
diff --git a/src/Header/Header.js b/src/Header/Header.js
index 9d53f58..28daf4d 100644
--- a/src/Header/Header.js
+++ b/src/Header/Header.js
@@ -1,52 +1,75 @@
-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 { 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();
+	const [isDropdownVisible, setDropdownVisible] = useState(false);
+	const navigate = useNavigate();
 
-    const OpenPage = (arg) => {    
-        navigate(arg);
-        console.log(arg);
-    };
+	const OpenPage = (arg) => {
+		navigate(arg);
+		console.log(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={() => 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 />
+		</>
+	);
+}
diff --git a/src/Header/OpenPage.js b/src/Header/OpenPage.js
index dcd4ae1..e37c982 100644
--- a/src/Header/OpenPage.js
+++ b/src/Header/OpenPage.js
@@ -1,9 +1,25 @@
 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>
+ */
+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;
diff --git a/src/OurSponsors/OurSponsors.css b/src/OurSponsors/OurSponsors.css
index 3f6e24f..7938902 100644
--- a/src/OurSponsors/OurSponsors.css
+++ b/src/OurSponsors/OurSponsors.css
@@ -34,7 +34,7 @@
 #OurSponsors div div div div {
 	display: flex;
 	flex-direction: row;
-	justify-content: end;
+	justify-content: flex-end;
 	padding: 0%;
 	width: 100%;
 }
diff --git a/src/OurSponsors/OurSponsors.js b/src/OurSponsors/OurSponsors.js
index 54419b0..0fce47b 100644
--- a/src/OurSponsors/OurSponsors.js
+++ b/src/OurSponsors/OurSponsors.js
@@ -1,11 +1,8 @@
-import { useEffect } from "react";
-import { useState } from "react";
 import "./OurSponsors.css";
+import { useEffect, useState } from "react";
 import sponsorData from "../MockDB/sponsorship.yml";
-//can be removed later
-import fakeDelay from "../TestingTools/fakeDelay";
-import { useNavigate } from "react-router-dom";
 import yaml from "js-yaml";
+import OpenPage from "../Header/OpenPage";
 
 /**
  * @param {null} null - requires onthing
@@ -18,35 +15,26 @@ const OurSponsors = () => {
 	const [sponsorsDict, setSponsorsDict] = useState(); //variable states for the dictionary of sponsors
 
 	useEffect(() => {
-		//get sponsors on startup of page not optimized
 		getSponsors();
 	}, []);
 
-	const OpenPage = (arg) => {
-		const navigate = useNavigate();
-		navigate(arg);
-		console.log(arg);
-	};
-
 	/**
 	 * @param {null} null - requires nothing (link)
 	 * @returns {Object} sponsorsDict - gets a Dictionary of our sponsors from synology drive
 	 * @description Gets the list of sponsors from the synology drive (not implemented), converts the json file into a dictionary
 	 * @author Brock <darkicewolf50@gmail.com>
-	 * @todo add gPRC to backend and front end
+	 * @todo add gPRC to backend and front end add connect to synology drive
 	 */
 	const getSponsors = async () => {
 		const res = await fetch(sponsorData);
 		const rawText = await res.text();
 		const yamlDict = yaml.load(rawText);
 		try {
-			await fakeDelay(1000);
-			console.log("It ran");
 			let res = yamlDict;
 			setSponsorsDict(res);
 		} catch (error) {
 			//error checking
-			console.error("Error sending data to server:", error);
+			console.error("Error recieving data from server:");
 		}
 	};
 
@@ -59,11 +47,12 @@ const OurSponsors = () => {
 		return (
 			<div id="OurSponsors">
 				<div id="BecomeASponsors">
-					<button onClick={() => OpenPage("/BecomeASponsor")}>
-						Become A Sponsor
-					</button>
+					<OpenPage
+						pageToGoTo={"/BecomeASponsor"}
+						textOnButton={"Become a Sponsor"}
+					/>
 				</div>
-				<div>
+				<div id="CurrentSponosrs">
 					<h3>Current Sponsors</h3>
 					{Object.keys(sponsorsDict).map((sponsorTier) => (
 						<div
@@ -80,29 +69,33 @@ const OurSponsors = () => {
 												{sponsor.LogoUrl && (
 													<a
 														href={sponsor.Url}
+														rel="noreferrer"
 														target="_blank">
 														<img
 															src={sponsor.LogoUrl}
-															alt="Sponsor Logo"
+															alt={
+																sponsor.Name +
+																"'s logo, one of the companies that sponsors Schulich Off-Road"
+															}
 														/>
 													</a>
 												)}
 											</div>
 											{sponsor.DescriptionAboutSponsor !== undefined &&
 												sponsor.DecriptionOnHelp !== undefined &&
-												(sponsorTier != "Bronze Tier" ||
-													sponsorTier != "Silver Tier") && (
+												(sponsorTier !== "Bronze Tier" ||
+													sponsorTier !== "Silver Tier") && (
 													<p>Another Element</p>
 												)}
 										</div>
 										{sponsor.DescriptionAboutSponsor !== undefined &&
-											(sponsorTier != "Bronze Tier" ||
-												sponsorTier != "Silver Tier") && (
+											(sponsorTier !== "Bronze Tier" ||
+												sponsorTier !== "Silver Tier") && (
 												<p>{sponsor.DescriptionAboutSponsor}</p>
 											)}
 										{sponsor.DecriptionOnHelp !== undefined &&
-											(sponsorTier != "Bronze Tier" ||
-												sponsorTier != "Silver Tier") && (
+											(sponsorTier !== "Bronze Tier" ||
+												sponsorTier !== "Silver Tier") && (
 												<p>{sponsor.DecriptionOnHelp}</p>
 											)}
 									</div>