diff --git a/src/OurSponsors/OurSponsors.css b/src/OurSponsors/OurSponsors.css
index fcfd4f0..a32ccbd 100644
--- a/src/OurSponsors/OurSponsors.css
+++ b/src/OurSponsors/OurSponsors.css
@@ -41,8 +41,8 @@
 	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 	transition: scale 0.3s;
 	border-radius: 5px;
-	margin-left: 1rem;
-	margin-right: 3rem;
+	margin-left: 1svw;
+	margin-right: 3svw;
 	width: fit-content;
 }
 
@@ -52,7 +52,7 @@
 }
 
 #BecomeASponsors div a img {
-	height: 18rem;
+	height: 40svh;
 	width: auto;
 }
 
@@ -89,6 +89,7 @@
 
 #Sponsor {
 	background-color: white;
+	padding-bottom: 3svh;
 }
 
 #SponsorEnd {
@@ -115,8 +116,8 @@
 	flex-direction: row;
 	padding-top: 2svh;
 	padding-bottom: 2svh;
-	margin-top: 2svh;
-	margin-bottom: 4svh;
+	margin-top: 1svh;
+	margin-bottom: 3svh;
 	border-bottom: var(--sponsorBorder);
 	align-items: center;
 }
@@ -152,7 +153,6 @@
 	background-color: whitesmoke;
 	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 	transition: scale 0.3s;
-	margin: 1rem;
 }
 
 .Sponsors a:hover {
@@ -163,6 +163,8 @@
 .Sponsors a div {
 	display: flex;
 	flex-direction: row;
+	height: inherit;
+	width: inherit;
 }
 
 .Sponsors a div div {
@@ -171,12 +173,47 @@
 	padding-left: 5svw;
 }
 
-.Sponsors a h4 {
+.Sponsors a h3 {
+	display: flex;
 	width: fit-content;
 	border-bottom: var(--sponsorBorder);
 }
 
 .Sponsors a img {
 	max-height: 24svh;
-	width: 25svw;
+	width: 24svw;
+	padding-top: 1svh;
+	padding-bottom: 1svh;
+}
+
+.sponsorCenter {
+	display: flex;
+	justify-content: center;
+}
+
+.sponsorGridContainer {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	grid-gap: 20px;
+}
+
+.sponsorGridItem {
+	background-color: aqua;
+	width: calc(100%- 20px);
+	height: 100%;
+}
+
+.sponsorGridContainer .sponsorGridItem div div {
+	flex: 1;
+	padding-left: 1svw;
+}
+
+.sponsorGridItem h3 {
+	text-align: center;
+	justify-content: center;
+	align-items: center;
+}
+
+.sponsorGridItem {
+	grid-column: span 1;
 }
diff --git a/src/OurSponsors/OurSponsors.js b/src/OurSponsors/OurSponsors.js
index 1402972..4c6346d 100644
--- a/src/OurSponsors/OurSponsors.js
+++ b/src/OurSponsors/OurSponsors.js
@@ -145,7 +145,7 @@ const OurSponsors = () => {
 						rel="noreferrer">
 						<table>
 							<caption>
-								<h2>Sponsor Packages</h2>
+								<h3>Sponsor Packages</h3>
 							</caption>
 							<thead>
 								<tr>
@@ -255,52 +255,69 @@ const OurSponsors = () => {
 					<>
 						{/* gets the outmost name of the Object Name of tier*/}
 						{Object.keys(currentSponsorsDict).map((sponsorsTier) => {
+							let changetoGridStyle =
+								sponsorsTier === "Diamond Tier" ||
+								sponsorsTier === "Platinum Tier";
+							let girdContainer = changetoGridStyle
+								? ""
+								: "sponsorGridContainer";
+							let gridItem = changetoGridStyle ? "" : "sponsorGridItem";
+
 							return (
 								<div
 									key={sponsorsTier}
 									className="Sponsors">
 									<h3>{sponsorsTier}</h3>
-									{/* gets key form list of tier */}
-									{Object.keys(currentSponsorsDict[sponsorsTier]).map(
-										(sponsorsKey) => {
-											return (
-												<>
-													{/* gets name out of object and gets data of that sponsor preped */}
-													{Object.keys(
-														currentSponsorsDict[sponsorsTier][sponsorsKey]
-													).map((sponsorName) => {
-														let sponsorData =
-															currentSponsorsDict[sponsorsTier][sponsorsKey][
-																sponsorName
-															];
-														return (
-															<a
-																key={sponsorData}
-																href={sponsorData.Url}
-																target="_blank"
-																rel="noreferrer">
-																<div>
-																	<img
-																		src={sponsorData.LogoUrl}
-																		alt={sponsorName + "'s Logo"}
-																	/>
+									<div className={girdContainer}>
+										{/* gets key form list of tier */}
+										{Object.keys(currentSponsorsDict[sponsorsTier]).map(
+											(sponsorsKey) => {
+												return (
+													<div key={sponsorsKey}>
+														{/* gets name out of object and gets data of that sponsor preped */}
+														{Object.keys(
+															currentSponsorsDict[sponsorsTier][sponsorsKey]
+														).map((sponsorName) => {
+															let sponsorData =
+																currentSponsorsDict[sponsorsTier][sponsorsKey][
+																	sponsorName
+																];
+															let sponsorBronzeSilver =
+																sponsorsTier !== "Silver Tier" &&
+																sponsorsTier !== "Bronze Tier";
+															return (
+																<a
+																	key={sponsorData}
+																	href={sponsorData.Url}
+																	target="_blank"
+																	className={gridItem}
+																	rel="noreferrer">
 																	<div>
-																		<h4>{sponsorName}</h4>
-																		{(sponsorsTier !== "Silver Tier" ||
-																			sponsorsTier !== "Bronze Tier") && (
-																			<p>
-																				{sponsorData.DescriptionAboutSponsor}
-																			</p>
+																		<img
+																			src={sponsorData.LogoUrl}
+																			alt={sponsorName + "'s Logo"}
+																		/>
+																		{sponsorBronzeSilver === true ? (
+																			<div>
+																				<h3>{sponsorName}</h3>
+																				<p>
+																					{sponsorData.DescriptionAboutSponsor}
+																				</p>
+																			</div>
+																		) : (
+																			<div className="sponsorCenter">
+																				<h3>{sponsorName}</h3>
+																			</div>
 																		)}
 																	</div>
-																</div>
-															</a>
-														);
-													})}
-												</>
-											);
-										}
-									)}
+																</a>
+															);
+														})}
+													</div>
+												);
+											}
+										)}
+									</div>
 								</div>
 							);
 						})}
@@ -308,44 +325,53 @@ const OurSponsors = () => {
 				)}
 			</div>
 			<div id="Sponsor">
-				<h1
-					className="SponsorsTitle"
-					id="SponsorEnd">
-					Past Sponsors
-				</h1>
+				<div id="sideBorder">
+					<div></div>
+					<h1
+						className="SponsorsTitle"
+						id="SponsorEnd">
+						Past Sponsors
+					</h1>
+				</div>
+
 				{/* shows past sponsors only when recieved, do not duplicate the sponsors from current ones */}
 				{pastSponsorsDict === undefined ? (
 					<p>Loading...</p>
 				) : (
 					<>
-						{/* gets keys o objects in list */}
-						{Object.keys(pastSponsorsDict).map((pastSponsorKey) => {
-							return (
-								<div className="Sponsors">
-									{/* gets name of sponsor then uses it to get data of past sponsor */}
-									{Object.keys(pastSponsorsDict[pastSponsorKey]).map(
-										(pastSponsorName) => {
-											let pastSponsors =
-												pastSponsorsDict[pastSponsorKey][pastSponsorName];
-											return (
-												<a
-													href={pastSponsors.Url}
-													target="_blank"
-													rel="noreferrer">
-													<div>
-														<h4>{pastSponsorName}</h4>
-														<img
-															src={pastSponsors.LogoUrl}
-															alt={pastSponsorName + "'s Logo"}
-														/>
-													</div>
-												</a>
-											);
-										}
-									)}
-								</div>
-							);
-						})}
+						<div className="Sponsors sponsorGridContainer">
+							{/* gets keys o objects in list */}
+							{Object.keys(pastSponsorsDict).map((pastSponsorKey) => {
+								return (
+									<>
+										{/* gets name of sponsor then uses it to get data of past sponsor */}
+										{Object.keys(pastSponsorsDict[pastSponsorKey]).map(
+											(pastSponsorName) => {
+												let pastSponsors =
+													pastSponsorsDict[pastSponsorKey][pastSponsorName];
+												return (
+													<a
+														href={pastSponsors.Url}
+														target="_blank"
+														className="sponsorGridItem"
+														rel="noreferrer">
+														<div>
+															<img
+																src={pastSponsors.LogoUrl}
+																alt={pastSponsorName + "'s Logo"}
+															/>
+															<div className="sponsorCenter">
+																<h3>{pastSponsorName}</h3>
+															</div>
+														</div>
+													</a>
+												);
+											}
+										)}
+									</>
+								);
+							})}
+						</div>
 					</>
 				)}
 			</div>