diff --git a/wins/wins-hero.html b/_includes/wins-hero.html
similarity index 59%
rename from wins/wins-hero.html
rename to _includes/wins-hero.html
index c6243a2b37..301f794287 100644
--- a/wins/wins-hero.html
+++ b/_includes/wins-hero.html
@@ -1,11 +1,8 @@
 <div class='home-getting-started-container content-section section-hack-nights wins-hero'>
-    <img src="/assets/images/wins-page/wins-trophy.png" alt="image of a person being celebrated and holding a trophy">
+    <img src="./assets/images/wins-page/wins-trophy.png" alt="image of a person being celebrated and holding a trophy">
     <div>
     <h1>Let's celebrate together!</h1>
     <a href='https://docs.google.com/forms/d/e/1FAIpQLSdF0MgS-M_Soi77qTp-MNfxMGqq85yqsHwvfHDngHAMyDQ8uQ/viewform'><button class='btn btn-primary btn-xl btn--wins'>Share your wins</button></a>
-    <!-- <a href='/share-your-wins'><button class='btn btn-primary btn-xl btn--wins'>Share your wins</button></a> -->
-
-    
     </div>
 </div>
 
diff --git a/_sass/components/_wins-page.scss b/_sass/components/_wins-page.scss
index 23cb31a721..d55e4db567 100644
--- a/_sass/components/_wins-page.scss
+++ b/_sass/components/_wins-page.scss
@@ -1,293 +1,248 @@
 //Hero styling
 .wins-hero{
-    margin-top: 40px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-evenly;
-    img{
-        height: 366;
-    }
-    h1{
-        font-size: 59px;
-        line-height: 69px;
-        text-align: center;
-        font-style: normal;
-        font-weight: normal;
-    }
-}
-
-.wins-btn{
-    max-width: 300px;
-    max-height: 75px;
+	margin-top: 40px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-evenly;
+	img{
+		height: 366;
+	}
+	h1{
+		font-size: 59px;
+		line-height: 69px;
+		text-align: center;
+		font-style: normal;
+		font-weight: normal;
+	}
 }
 
-
-.wins-see-more-div {
-    position: absolute;
-    background-color: white;
-    right: 0px;
-    bottom: 0px;
-    color: red;
-    padding: 0px 3px;
-    cursor: pointer;
+.wins__see-more-div {
+	position: absolute;
+	background-color: white;
+	right: 0px;
+	bottom: 0px;
+	color: red;
+	padding: 0px 3px;
+	cursor: pointer;
 }
 
-.wins-card-text {
-	margin-top: 40px;
-	height: 88px;
-	overflow: hidden;
-	position: relative;
-    p {
-        margin: 0;
-    }
+.wins__card-text {
+	padding-top: 40px;
+	p {
+		margin: 0;
+	}
 
 }
 
 @media #{$bp-below-tablet} {
-    .wins-hero{
-
-        img{
-            height: 230px;
-        }
-        h1{
-            font-style: normal;
-            font-weight: normal;
-            font-size: 38px;
-        }
-        .wins-btn{
-            max-width: 217px;
-            max-height: 60.5px;
-            font-size: 18.5px;
-        }
-        
-    }
+	.wins-hero{
+
+		img{
+			height: 230px;
+		}
+		h1{
+			font-style: normal;
+			font-weight: normal;
+			font-size: 38px;
+		}
+		.btn--wins{
+			height: 60px;
+			padding: 0 50px;
+			border-radius: 60px;
+			font-size: 1.25rem;
+		}
+		
+	}
 }
 
 @media #{$bp-below-mobile} {
-    .wins-hero{
-
-        img{
-            height: 105px;
-        }
-        h1{
-            font-style: normal;
-            font-weight: normal;
-            font-size: 24px;
-            line-height: 28px;
-        }
-        .wins-btn{
-            max-width: 134px;
-            max-height: 46px;
-            font-size: 12px;
-            line-height: 14px;
-        }
-    }
+	.wins-hero{
+
+		img{
+			height: 105px;
+		}
+		h1{
+			font-style: normal;
+			font-weight: normal;
+			font-size: 24px;
+			line-height: 28px;
+		}
+		.btn--wins{
+			height: 40px;
+			padding: 0 32px;
+			border-radius: 20px;
+			font-size: 1rem;
+		}
+	}
 }
 
 // page
 .wins-page-contain{
-    margin:0 auto;
-    max-width: 1292px;
+	margin:0 auto;
+	max-width: 1292px;
 }
 .wins-page-contain > p{
-    margin: 18px 60px;
+	margin: 18px 60px;
 }
 
 //card styling
 .wins-card{
-    padding: 45px;
-    display: flex;
-    flex-direction: column;
-}
-.wins-card-top{
-    display: flex;
+	padding: 45px;
+	display: flex;
+	flex-direction: row;
 }
-.wins-card-top-right{
-    flex-grow: 1;
+.wins-card-left{
+	width: 100px;
+	margin-right: 10px;
+	display: flex;
+	align-items: flex-end;
+	flex-direction: column;
 }
 .wins-card-profile-img{
-    width: 86px;
-    height: 86px;
-    border-radius: 100px;
-    margin-right: 20px;
+	border-radius: 100px;
 }
 .wins-card-big-quote{
-    width: 28px;
-    height: 112px;
-    margin-right: 20px;
-    margin-left: 58px;
-    position: relative;
-}
-.wins-card-bottom{
-    display: flex;
+	width: 28px;
+	height: 96.05px;
+	position: relative;
+	top: -20px;
 }
 .wins-card-content{
-    display: flex;
-    flex-direction: column;
-    margin-left: 20px;
-    width: 100%;
-    position: relative;
-    overflow: hidden;
-    margin-left: 6px;
+	display: flex;
+	flex-direction: column;
+	margin-left: 20px;
+	width: 100%;
+	position: relative;
+	height: 225px;
+	overflow: hidden;
+	margin-left: 6px;
 }
 
 .wins-card-name{
-    font-weight: bold;
-    font-size: 20px;
-    line-height: 22px;
-    margin-top: 13px;
+	font-weight: bold;
+	font-size: 20px;
+	line-height: 22px;
+	margin-top: 13px;
 }
 .wins-card-team{
-    font-weight: normal;
-    font-size: 16px;
-    line-height: 18px;
-    display: flex;
-    align-items: center;
-}
-.wins-card-title{
-    display: flex;
-    justify-content: space-between;
+	font-weight: normal;
+	font-size: 16px;
+	line-height: 18px;
+	display: flex;
+	align-items: center;
 }
-.wins-card-icon, .wins-card-github-icon, .wins-card-linkedin-icon{
-    margin-left: 18px;
+.wins-card-top{
+	display: flex;
+	justify-content: space-between;
 }
-.wins-card-icons{
-    display: flex;
+.wins-card-icon{
+	margin-left: 18px;
 }
 .wins-card-info{
-    font-weight: bold;
+	font-weight: bold;
 }
 
 .wins-card-overview{
-    margin-top: 1em;
+	margin-top: 1em;
 }
 
 @media #{$bp-below-tablet} {
-    .wins-card-text{
-        height: 81px;
-    }
+	.wins-card-content{
+		height: 233px;
+	}
 }
 
 @media #{$bp-below-mobile} {
-    .wins-card-text{
-        height: 80px;
-    }
-    .wins-card{
-        padding: 24px;
-    }
-    .wins-card-left{
-        width: 50px;
-    }
-    .wins-card-profile-img{
-        width: 50px;
-        height: 50px;
-        border-radius: 100px;
-        margin-right: 6px;
-    }
-    .wins-card-big-quote{
-        margin: 0 6px 0 32px;
-        height: 54px;
-        width: 18px;
-        position: static;
-    }
-
-    .wins-card-name{
-        font-size: 19px;
-        line-height: 22px;
-        margin: 0;
-        padding-top: 5px;
-    }
-    .wins-card-team{
-        font-size: 12px;
-        line-height: 16px;
-    }
-    .wins-card-icon{
-        margin-left: 13.5px;
-    }
-    .github-icon{
-        height: 20px;
-        width: 20px;
-    }
-    .linkedin-icon{
-        height: 20px;
-        width: 20px;
-    }
-    .wins-card-text{
-        margin-top: 16px;
-    }
-
-    .wins-card-overview{
-        margin-top: 0;
-        font-size: 16px;
-    }
+	.wins-card-content{
+		height: 215px;
+	}
+	.wins-card{
+		padding: 24px;
+	}
+	.wins-card-left{
+		width: 50px;
+	}
+	.wins-card-profile-img{
+		width: 50px;
+		height: 50px;
+		border-radius: 100px;
+	}
+	.wins-card-big-quote{
+		margin: 4px;    
+		height: 60px;
+		width: 18px;
+		position: static;
+	}
+
+	.wins-card-name{
+		font-size: 19px;
+		line-height: 22px;
+		margin: 0;
+		padding-top: 5px;
+	}
+	.wins-card-team{
+		font-size: 12px;
+		line-height: 16px;
+	}
+	.wins-card-icon{
+		margin-left: 13.5px;
+	}
+	.github-icon{
+		height: 20px;
+		width: 20px;
+	}
+	.linkedin-icon{
+		height: 20px;
+		width: 20px;
+	}
+	.wins__card-text{
+		padding-top: 16px;
+	}
+
+	.wins-card-overview{
+		margin-top: 0;
+		font-size: 16px;
+	}
 }
 
 
 
 //modal overlay
 @media #{$bp-desktop-up} {
-    .wins-card-overview{
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    .overlay {
-        display: none;
-        z-index: 1;
-        position: fixed;
-        left: 0px;
-        top: 0px;
-        width: calc(100vw + 17px);
-        height: 100%;
-        background-color: rgba(70, 70, 70, 0.5);
-        padding: 10px;
-        overflow-y: auto;
-        overflow-x: hidden;
-    }
-
-    .display-none {
-        display: none;
-    }
-
-    .display-initial {
-        display: flex;
-        flex-direction: column;
-    }
-    .top-buffer{
-        height: 20vh;
-    }
-    .bottom-buffer {
-        height: 5vh;
-    }
-    .modal-container{
-        position: absolute;
-        width: 60%;
-        left: 20%;
-    }
-    .center-screen {
-        opacity: 1;
+	.wins-card-overview{
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
-	.overlay-card-text{
-		padding-top: 40px;
-	}
-	.wins-card-badges{
-		display:flex;
-		flex-flow: row wrap;
+
+	.overlay {
+		display: none;
+		z-index: 1;
+		position: fixed;
+		left: 0px;
+		top: 0px;
 		width: 100%;
-		.badge-item{
-            flex: 1 1;
-            flex-basis: 250px;
-			// width: 100px;
-			margin: 4px;
-			display: flex;
-			.badge-icon{
-				margin: 2px 12.5px 0 0;
-				height: 15px;
-				min-width: 30px;
-				display: flex;
-				justify-content: center;
-			}
+		height: 100%;
+		background-color: rgba(70, 70, 70, 0.5);
+		padding: 10px;
+	}
+
+	.display-none {
+		display: none;
+	}
+
+	.display-initial {
+		display: initial;
+	}
+
+	.center-screen {
+		position: fixed;
+		opacity: 1;
+		width: 60%;
+		left: 20%;
+		top: 30%;
+		.wins-card-content{
+			height: auto;
 		}
 	}
 
@@ -296,23 +251,23 @@
 
 //mobile see more
 @media #{$bp-below-desktop} {
-    .overlay {
-        display: none;
-    }
-    .display-none {
-        display: none;
-    }
-    .expanded{
-        height: auto;
-        .wins-see-more-div {
-            position: relative;
-            text-align: right;
-        }
-    }
+	.overlay {
+		display: none;
+	}
+	.display-none {
+		display: none;
+	}
+	.expanded{
+		height: auto;
+		.wins__see-more-div {
+			position: relative;
+			text-align: right;
+		}
+	}
 }
 
 .wins-card-content > * {
-    flex: 0 0 auto;
+	flex: 0 0 auto;
 }
 
 
@@ -336,4 +291,4 @@
 		grid-template-rows: none;
 	}
 }
-//wins page filter override section end
+//wins page filter override section end
\ No newline at end of file
diff --git a/wins/wins.html b/wins.html
similarity index 65%
rename from wins/wins.html
rename to wins.html
index 219a3f1dcf..4b24d28f3f 100644
--- a/wins/wins.html
+++ b/wins.html
@@ -1,21 +1,75 @@
 ---
 layout: default
 title: Wins
-permalink: /wins/
-
 ---
 
-{%- include_relative wins-hero.html -%}
-{% include_relative wins-overlay.html %}
+{%- include wins-hero.html -%}
+<div class="overlay" onclick="hideOverlay()">
+  <div id="overlay-project-card" class="project-card wins-card center-screen">
+    <div class="wins-card-left">
+      <img
+        class="wins-card-profile-img"
+        src="/assets/images/wins-page/avatar-default.svg"
+      />
+      <img
+        class="wins-card-big-quote"
+        src="/assets/images/wins-page/quote-icon.svg"
+      />
+    </div>
+    <div class="wins-card-content project-card-inner">
+      <div class="project-inner wins-card-top">
+        <span id="overlay-name" class="wins-card-name">Blank</span>
+        <span id="overlay-icons" class="wins-card-icons"></span>
+      </div>
+      <div id="overlay-teams" class="project-inner wins-card-team">
+        Team(s): Blank
+      </div>
+      <div id="overlay-roles" class="project-inner wins-card-team">
+        Role(s): Blank
+      </div>
+      <div class="project-inner wins__card-text">
+        <p id="overlay-overview">Blank</p>
+        <p id="overlay-info" class="wins-card-info">Blank</p>
+      </div>
+    </div>
+  </div>
+</div>
 <a class="anchor" id="projects"></a>
 <section class="content-section projects">
-	<div   class="wins-page-contain projects-inner" >
-
-		{% include_relative wins-filter-template.html %}
-		{% include_relative wins-card-template.html %}
+  <div
+    class="wins-page-contain projects-inner"
+    id="filter-template-container"
+    style="clear: left"
+  >
+    <ul class="filter-list wins-filter" id="filter-list" 
+	 >
+      <li class="filter-item">
+        <a
+          >Role<span class="labelArrow"> ∟ </span></a
+        >
+        <ul class="dropdown" id="role-dropdown"></ul>
+      </li>
+      <li class="filter-item">
+        <a
+          >Team<span class="labelArrow"> ∟ </span></a
+        >
+        <ul class="dropdown" id="team-dropdown"></ul>
+      </li>
+    </ul>
+    <template id="template">
+      <li>
+        <div>
+          <input type="checkbox" class="filter-checkbox" />
+          <span id=""></span>
+        </div>
+      </li>
+    </template>
+
+    <ul id="responses" class="project-list unstyled-list">
 
-		<ul id="responses" class="project-list unstyled-list"></ul>
-	</div>
+		
+	</ul>
+  </div>
 </section>
 
 <script>
@@ -90,13 +144,13 @@
 
   	})
 
-
   	//Create dropdown key,values where the keys are name of the drops downs and the values are the number of occurences of each key
   	const roleHash =  Object.fromEntries([ ...roleArr.reduce((map, key) => map.set(key, (map.get(key) || 0) + 1), new Map()) ]);
   	const teamHash =  Object.fromEntries([ ...teamArr.reduce((map, key) => map.set(key, (map.get(key) || 0) + 1), new Map()) ]);
 
 
-	const filterTemplate = document.getElementById("wins-filter-template-repeat");
+  	const filterTemplate = document.getElementById("template");
+  	var cloneFilterTemplate = filterTemplate.content.cloneNode(true);
   	const roleDropwDown =  document.getElementById("role-dropdown");
   	const teamDropDown = document.getElementById("team-dropdown");
 
@@ -243,92 +297,116 @@
   	if (document.querySelectorAll('.wins-card').length == 0) {
   		const page = document.querySelector('.wins-page-contain');
   		const p = document.createElement('p');
+  		//p.classList.add("project-card");
   		page.appendChild(p);
   		p.innerHTML = "No one has shared a win yet...be the first!";
   	}
   }
 
-
-
-
+  function makeElement(elementType, parent, className) {
+  	let child = document.createElement(elementType);
+  	child.classList.add(className);
+  	parent.appendChild(child);
+  	return child;
+  }
+  function makeIcon(href, parent, className, src) {
+  	let icon = makeElement('a', parent, 'wins-card-icon');
+  	icon.setAttribute("href", href);
+  	let iconImg = makeElement('img', icon, className);
+  	iconImg.setAttribute("src", src);
+  }
 
   function makeCards(data) {
   	{% assign githubData = site.data.github-data | jsonify %}
   	let githubData = {{ githubData }};
 
-	const cards = data.reverse();
-	const cardTemplate = document.getElementById("wins-card-template");
-	const QUOTE_ICON_PATH = '/assets/images/wins-page/quote-icon.svg'
-	const AVATAR_DEFAULT_PATH = "/assets/images/wins-page/avatar-default.svg"
-	const GITHUB_ICON = '/assets/images/wins-page/icon-github-small.svg';
-	const LINKEDIN_ICON = '/assets/images/wins-page/icon-linkedin-small.svg'
-	const winsCardContainer  = document.querySelector('#responses');
-
-	cards.forEach((card, index) => {
-		if (card[display] != "TRUE") return;
-		let cloneCardTemplate = cardTemplate.content.firstElementChild.cloneNode(true);
-		let ghId;
-		if(card[github_url] && card[github_permission] === "Yes"){
-			githubData.slice(1).map(item=>{
-				item.contributorsComplete.data.map(contributors=>{
-					if(contributors.github_url == card[github_url]){
-						ghId = contributors.id;
-					}
-				})
-
-			})
-
-		} 
-		let profileImgSrc = ghId ?
-			`https://avatars1.githubusercontent.com/u/${ghId}?v=4` :
-			AVATAR_DEFAULT_PATH;
-		
-		cloneCardTemplate.querySelector('.wins-card-profile-img').src = profileImgSrc;
-
-		cloneCardTemplate.querySelector('.wins-card-big-quote').src = QUOTE_ICON_PATH;
-		cloneCardTemplate.querySelector('.wins-card-name').textContent = card[name];
-	
-		if (card[linkedin_url].length > 0) {
-			cloneCardTemplate.querySelector('.wins-card-linkedin-icon').href = card[linkedin_url];
-			cloneCardTemplate.querySelector('.linkedin-icon').src = LINKEDIN_ICON ;
-		} else {
-			cloneCardTemplate.querySelector('.wins-card-linkedin-icon').setAttribute('hidden', 'true')
-		};
-
-		if (card[github_url].length > 0){
-			cloneCardTemplate.querySelector('.wins-card-github-icon').href = card[github_url];
-			cloneCardTemplate.querySelector('.github-icon').src = GITHUB_ICON ;
-		} else {
-			cloneCardTemplate.querySelector('.wins-card-github-icon').setAttribute('hidden', 'true')
-		}
-
-		cloneCardTemplate.querySelector('.project-inner.wins-card-team').textContent = `Team(s): ${card[team]}`;
-		cloneCardTemplate.querySelector('.project-inner.wins-card-role').textContent = `Role(s): ${card[role]}`;
-
-		cloneCardTemplate.querySelector('.wins-card-overview').textContent = card[overview];
-		cloneCardTemplate.querySelector('.wins-card-info').textContent = card[win];
-		cloneCardTemplate.querySelector('span.see-more-div').id = index;
+  	const list = document.querySelector('#responses');
+  	let idNum = 0
+  	data.reverse().forEach( (card) => {
+  		if (card[display] != "TRUE"){
+  			idNum++;
+  			return; //checks if Display column is set to true
+  		}
 
-		
-		winsCardContainer.append(cloneCardTemplate);
-		
-		const winText = cloneCardTemplate.querySelector('.wins-card-text')
-		function addSeeMore() {
-			let innerHeight = Array.from(winText.childNodes).reduce((acc, el) => (el.offsetHeight || 0) + acc, 0) - 22
+  		let ghId;
+  		if (card[github_url] && card[github_permission] === "Yes") {
+  			githubData.slice(1) //first key is a timestamp
+  			.forEach(project => {
+
+  		/* Exit forEach if githubId is already defined, otherwise
+  		iterate through each project (and its contributors) until
+  		a matching github_url is found */
+  				if (ghId) return;
+  				project.contributorsComplete.data.forEach(contrib => {
+  					if (contrib.github_url === card[github_url]) {
+  						ghId = contrib.id;
+  					}
+  				});
+  			});
 
-			//makes the see more span on the bottom of the card
-			if (innerHeight <= winText.offsetHeight) { //checks if see more is needed.
-				winText.querySelector('.wins-see-more-div').setAttribute('hidden', 'true')
-			} else {
-				winText.querySelector('.wins-see-more-div').removeAttribute('hidden')
-			}
-		}
-		addSeeMore()
+  		}
 
-		new ResizeObserver(addSeeMore).observe(winText)
-	})
+  		/* if github url is provided in wins-data and permission
+  		is granted, ghId is defined & we can use their github avatar
+  		otherwise, use default avatar */
+
+  		let profileImgSrc = ghId ?
+  			`https://avatars1.githubusercontent.com/u/${ghId}?v=4` :
+  			"/assets/images/wins-page/avatar-default.svg";
+
+  		let cardElement = makeElement('li', list, "project-card");
+  		cardElement.classList.add("wins-card");
+
+  		let leftDiv = makeElement('div', cardElement, "wins-card-left");
+
+  		let profileImg = makeElement('img', leftDiv, "wins-card-profile-img");
+  		profileImg.setAttribute("src", profileImgSrc);
+
+  		let quote = makeElement('img', leftDiv, "wins-card-big-quote");
+  		quote.setAttribute("src", "/assets/images/wins-page/quote-icon.svg");
+  		let rightDiv = makeElement('div', cardElement, "wins-card-content");
+  		rightDiv.classList.add("project-card-inner");
+
+  		//makes the top of thecard name and icons
+  			let topDiv = makeElement('div', rightDiv, "project-inner");
+  			topDiv.classList.add("wins-card-top");
+  			let nameElement = makeElement('span', topDiv, "wins-card-name");
+  			nameElement.innerHTML = card[name];
+  			let icons = makeElement('span', topDiv, "wins-card-icons");
+  			if (card[linkedin_url].length > 0) {
+  				makeIcon(card[linkedin_url], icons, 'linkedin-icon', '/assets/images/wins-page/icon-linkedin-small.svg');
+  			} if (card[github_url].length > 0) {
+  				makeIcon(card[github_url], icons, 'github-icon', '/assets/images/wins-page/icon-github-small.svg');
+  			}
 
+  		//makes the team and roles portion in the middle
+  			let nameDiv = makeElement('div', rightDiv, "project-inner");
+  			nameDiv.classList.add("wins-card-team");
+  			nameDiv.innerHTML = `Team(s): ${card[team]}`;
+  			if (card[role].length > 0) {
+  				let roleDiv = makeElement('div', rightDiv, "project-inner");
+  				roleDiv.classList.add("wins-card-role");
+  				roleDiv.innerHTML = `Role(s): ${card[role]}`;
+  			}
 
+  		//makes the win and info text on the bottom of the card
+  			let winDiv = makeElement('div', rightDiv, "project-inner");
+  			winDiv.classList.add("wins__card-text");
+  			let overviewElement = makeElement('p', winDiv, "wins-card-overview");
+  			overviewElement.innerHTML = card[overview];//description
+  			let winElement = makeElement('p', winDiv, "wins-card-info");
+  			winElement.innerHTML = formatMessage(card[win]); //win
+
+  		let innerHeight = Array.from(rightDiv.childNodes).reduce((acc, el) => el.offsetHeight + acc, 0)
+
+  		//makes the see more span on the bottom of the card
+  		if(innerHeight > rightDiv.offsetHeight){ //checks if see more is needed.
+  			let seeMoreDiv = makeElement('div', rightDiv, "project-inner");
+  			seeMoreDiv.classList.add("wins__see-more-div")
+  			seeMoreDiv.innerHTML = `<span id="${idNum}" onclick="seeMore(id)" class="wins__see-more-span" expandable>...see more</span>`
+  		}
+  			idNum++
+  	})
   }
   function seeMore(id){
   	screenWidth = window.innerWidth;
@@ -349,19 +427,6 @@
   		span.innerHTML = "...see more"
   	}
   }
-  // need to delete makeElement and makeIcon
-  function makeElement(elementType, parent, className) {
-		let child = document.createElement(elementType);
-		child.classList.add(className);
-		parent.appendChild(child);
-		return child;
-	}
-  function makeIcon(href, parent, className, src) {
-		let icon = makeElement('a', parent, 'wins-card-icon');
-		icon.setAttribute("href", href);
-		let iconImg = makeElement('img', icon, className);
-		iconImg.setAttribute("src", src);
-	}
   function updateOverlay(i) {
   		let stringData = window.localStorage.getItem("data");
   		let data = JSON.parse(stringData).reverse();
diff --git a/wins/wins-card-template.html b/wins/wins-card-template.html
deleted file mode 100644
index 26b10016e4..0000000000
--- a/wins/wins-card-template.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<template id="wins-card-template">
-  <li class="project-card wins-card">
-    <div class="wins-card-top">
-      <img class="wins-card-profile-img" />
-      <div class="project-inner wins-card-top-right">
-        <div class="wins-card-title project-card-inner">
-          <span class="wins-card-name"> </span>
-          <span class="wins-card-icons">
-            <a target="_blank" class="wins-card-linkedin-icon"><img class="linkedin-icon" /></a>
-            <a target="_blank" class="wins-card-github-icon"><img class="github-icon" /></a>
-          </span>
-        </div>
-        <div class="project-inner wins-card-team"></div>
-        <div class="project-inner wins-card-role"></div>
-      </div>
-    </div>
-    <div class="wins-card-bottom">
-      <img class="wins-card-big-quote" />
-      <div class="project-inner wins-card-text">
-        <p class="wins-card-overview"></p>
-        <p class="wins-card-info"></p>
-        <div class="project-inner wins-see-more-div">
-          <span
-            id="0"
-            onclick="seeMore(id)"
-            expandable
-            class="see-more-div"
-            >...see more</span
-          >
-        </div>
-      </div>
-    </div>
-  </li>
-</template>
diff --git a/wins/wins-filter-template.html b/wins/wins-filter-template.html
deleted file mode 100644
index 573ff503ad..0000000000
--- a/wins/wins-filter-template.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<ul class="filter-list wins-filter" id="filter-list">
-  <li class="filter-item">
-    <a>Role<span class="labelArrow"> ∟ </span></a>
-    <ul class="dropdown" id="role-dropdown"></ul>
-  </li>
-  <li class="filter-item">
-    <a>Team<span class="labelArrow"> ∟ </span></a>
-    <ul class="dropdown" id="team-dropdown"></ul>
-  </li>
-</ul>
-<template id="wins-filter-template-repeat">
-  <li>
-    <div>
-      <input type="checkbox" class="filter-checkbox" />
-      <span id=""></span>
-    </div>
-  </li>
-</template>
diff --git a/wins/wins-overlay.html b/wins/wins-overlay.html
deleted file mode 100644
index e485ba6373..0000000000
--- a/wins/wins-overlay.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<div class="overlay" onclick="hideOverlay()">
-  <div id="overlay-project-card" class="modal-container">
-    <div class="top-buffer" onclick="hideOverlay()"></div>
-    <div class="project-card wins-card center-screen">
-      <div class="wins-card-top">
-        <img class="wins-card-profile-img" src="/assets/images/wins-page/avatar-default.svg">
-        <div class="wins-card-top-right">
-          <div class="wins-card-title project-card-inner">
-            <span id="overlay-name" class="wins-card-name">Blank</span>
-            <span id="overlay-icons" class="wins-card-icons"></span>
-          </div>
-          <div id="overlay-teams" class="project-inner wins-card-team">Team(s): Blank</div>
-          <div id="overlay-roles" class="project-inner wins-card-team">Role(s): Blank</div>
-        </div>
-      </div>
-      <div class="wins-card-bottom">
-        <img class="wins-card-big-quote" src="/assets/images/wins-page/quote-icon.svg">
-        <div class="project-inner overlay-card-text">
-          <p id="overlay-overview">Blank</p>
-          <p id="overlay-info" class="wins-card-info">Blank</p>
-        </div>
-      </div>
-    </div>
-    <div class="bottom-buffer" onclick="hideOverlay()"></div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/wins/wins-share-form.html b/wins/wins-share-form.html
deleted file mode 100644
index f1ebac5b03..0000000000
--- a/wins/wins-share-form.html
+++ /dev/null
@@ -1,550 +0,0 @@
----
-layout: null
-permalink: /share-your-wins/
----
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <style>
-      #professionalLinkForm {
-        display: none;
-      }
-      #teamsRolesForm {
-        display: none;
-      }
-      #celebrationsForm {
-        display: none;
-      }
-
-      #linkedinPhotoPermission {
-        display: none;
-      }
-      #githubPhotoPermission {
-        display: none;
-      }
-      .form-group {
-        margin-bottom: 1rem;
-      }
-      label {
-        display: inline-block;
-        margin-bottom: 0.5rem;
-      }
-      .form-control {
-        display: block;
-        width: 100%;
-        height: calc(1.5em + 0.75rem + 2px);
-        padding: 0.375rem 0.75rem;
-        font-size: 1rem;
-        font-weight: 400;
-        line-height: 1.5;
-        color: #495057;
-        background-color: #fff;
-        background-clip: padding-box;
-        border: 1px solid #ced4da;
-        border-radius: 0.25rem;
-        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-      }
-      .container-fluid {
-        width: 100%;
-        padding-right: 30px;
-        padding-left: 30px;
-      }
-    </style>
-    <title>Share your wins with us!</title>
-  </head>
-
-  <body class="container-fluid">
-    <form id="nameEmailForm">
-      <div class="form-group">
-        <label for="fullName">Full name</label>
-        <input
-          type="text"
-          class="form-control"
-          id="fullName"
-          placeholder="Enter fullname"
-          required
-        />
-      </div>
-      <div class="form-group">
-        <label for="email">Email address</label>
-        <input
-          type="email"
-          class="form-control"
-          id="email"
-          placeholder="Enter email"
-          required
-        />
-      </div>
-
-      <button type="submit" id="nameEmailNextButton">Next</button>
-    </form>
-
-    <form id="professionalLinkForm">
-      <div class="form-group">
-        <label for="linkedinurl">LinkedIn URL(optional)</label>
-        <input
-          type="text"
-          class="form-control"
-          id="linkedinurl"
-          placeholder="Enter LinkedIn URL"
-          pattern="https:\/\/www\.linkedin\.com\/.+"
-          title="https://www.linkedin.com/in/<your-username>"
-        />
-      </div>
-
-      <div class="form-group" id="linkedinPhotoPermission">
-        <p>Can we use the photo in your linkedin profile picture?</p>
-        <input
-          type="radio"
-          name="linkedinPhotoPermission"
-          id="linkedInYes"
-          value="yes"
-          disabled
-        />
-        <label for="linkedInYes">Yes</label>
-
-        <input
-          type="radio"
-          name="linkedinPhotoPermission"
-          id="linkedInNo"
-          value="no"
-          disabled
-        />
-        <label for="linkedInNo">No</label>
-      </div>
-
-      <p>OR</p>
-
-      <div class="form-group">
-        <label for="githuburl">Github URL(optional)</label>
-        <input
-          type="text"
-          class="form-control"
-          id="githuburl"
-          placeholder="Enter GitHub URL"
-          pattern='https:\/\/www\.github\.com\/.+'
-          title="https://www.github.com/<your-username>"
-        />
-      </div>
-
-      <div class="form-group" id="githubPhotoPermission">
-        <p>Can we use the photo in your github profile picture?</p>
-        <input
-          type="radio"
-          name="githubPhotoPermission"
-          id="githubYes"
-          value="yes"
-          disabled
-        />
-        <label for="githubYes">Yes</label>
-
-        <input
-          type="radio"
-          name="githubPhotoPermission"
-          id="githubNo"
-          value="no"
-          disabled
-        />
-        <label for="githubNo">No</label>
-      </div>
-
-      <button type="submit" id="professionalLinkNextButton" disabled>
-        Next
-      </button>
-    </form>
-
-    <form id="teamsRolesForm">
-      <section id="teams">
-        <p>Select the team(s) you're on</p>
-        <template id="teamsCheckBoxTemplate">
-          <input type="checkbox" data-type="teams" />
-          <label></label><br />
-        </template>
-      </section>
-      <section id="roles">
-        <p>Select the role(s) you're on</p>
-        <template id="rolesCheckBoxTemplate">
-          <input type="checkbox" data-type="roles" />
-          <label> </label><br />
-        </template>
-      </section>
-      <div class="form-group">
-        <label for="specificRole">What is/was your specific role</label>
-        <input
-          type="text"
-          class="form-control"
-          id="specificRole"
-          placeholder="Your Role..."
-          required
-        />
-      </div>
-      <section id="joinDate">
-        <label for="joinDateInput">Join date</label>
-        <input
-          type="date"
-          id="joinDateInput"
-          name="join-date-input"
-          min="2018-01-01"
-        />
-      </section>
-
-      <button type="submit" id="teamsRolesNextButton">Next</button>
-    </form>
-
-    <form id="celebrationsForm">
-      <section id="wins">
-        <p>What do you want to celebrate (select all that apply)?</p>
-        <template id="winsCheckboxTemplate">
-          <input type="checkbox" data-type="wins" />
-          <label> </label><br />
-        </template>
-      </section>
-      <div class="form-group">
-        <label for="winsOverview">Give us a brief overview</label>
-        <textarea name="winsOverview" id="winsOverview" form="celebrationsForm">
-Enter text here...</textarea
-        >
-      </div>
-
-      <button id="submitButton" type="submit" class="btn btn-primary">
-        Submit
-      </button>
-    </form>
-  </body>
-  <script>
-    /**
-     * Resources:
-     *  1. The google sheet that is being populated: https://docs.google.com/spreadsheets/d/1zkr_dEyiT-WTksUkVyL4jYQuYC5_YvJCLrUIfBf1CeE/edit?usp=sharing
-     *  2. The github issue this is related to :[
-     *                                            "https://github.com/hackforla/website/issues/1060",
-     *                                            "https://github.com/hackforla/website/issues/1066"
-     *                                          ]
-     *
-     * TODOS:
-     *  1. Error checking things in try block statements
-     *  2. Redirect back to wins page on successfull forms submission
-     *  3. Look into liquid templating on how to get the current date to be set for max value for the DOM element #joinDateInput
-     *
-     */
-
-    //Create formObject with the nessecary keys as specified by the google sheet and store it in local storage
-    const formObj = {
-      time: "",
-      email: "",
-      name: "",
-      linkedin_url: "",
-      linkedin_permission: "",
-      github_url: "",
-      github_permission: "",
-      team: "",
-      role: "",
-      specific_role: "",
-      join_date: "",
-      win: "",
-      overview: "",
-    };
-    localStorage.setItem("form", JSON.stringify(formObj));
-
-    //Event listner that populates the teamsRoles form on page ready by calling the function populateTeamsRolesForm
-    document.addEventListener("DOMContentLoaded", populateTeamsRolesForm);
-    function populateTeamsRolesForm() {
-      //Checkbox items creations
-      const availableTeams = [
-        "311 Data",
-        "Civic Tech Index",
-        "Engage",
-        "Food Oasis",
-        "HackforLA Website",
-        "HelloGov",
-        "Home Unite Us",
-        "The LA TDM Calculator",
-        "Lucky Parking",
-        "New Schools Today",
-        "Not Today",
-        "Public Tree Map",
-        "Record Clearance Project",
-        "Undebate",
-        "VRMS",
-      ];
-      const availableRoles = [
-        "Buisness Analyst",
-        "Content",
-        "Data",
-        "Development",
-        "PM",
-        "Operations",
-        "QA",
-        "SEO/Marketing",
-        "UI/UX",
-      ];
-
-      //Grab checkbox templates from the DOM
-      const teamsCheckBoxTemplate = document.querySelector(
-        "#teamsCheckBoxTemplate"
-      );
-      const rolesCheckBoxTemplate = document.querySelector(
-        "#rolesCheckBoxTemplate"
-      );
-
-      //Create and append teams checkboxes
-      for (const team of availableTeams) {
-        let cloneteamsCheckBoxTemplate = teamsCheckBoxTemplate.content.cloneNode(
-          true
-        );
-        cloneteamsCheckBoxTemplate.querySelector("input").id = team.replaceAll(
-          " ",
-          ""
-        );
-        cloneteamsCheckBoxTemplate.querySelector(
-          "input"
-        ).name = team.replaceAll(" ", "");
-        cloneteamsCheckBoxTemplate.querySelector(
-          "label"
-        ).htmlFor = team.replaceAll(" ", "");
-        cloneteamsCheckBoxTemplate.querySelector("label").textContent = team;
-        cloneteamsCheckBoxTemplate.querySelector("input").value = team;
-        document.querySelector("#teams").append(cloneteamsCheckBoxTemplate);
-      }
-
-      //Create and append roles checkboxes
-      for (const role of availableRoles) {
-        let clonerolesCheckBoxTemplate = rolesCheckBoxTemplate.content.cloneNode(
-          true
-        );
-        clonerolesCheckBoxTemplate.querySelector("input").id = role.replaceAll(
-          " ",
-          ""
-        );
-        clonerolesCheckBoxTemplate.querySelector(
-          "input"
-        ).name = role.replaceAll(" ", "");
-        clonerolesCheckBoxTemplate.querySelector(
-          "label"
-        ).htmlFor = role.replaceAll(" ", "");
-        clonerolesCheckBoxTemplate.querySelector("label").textContent = role;
-        clonerolesCheckBoxTemplate.querySelector("input").value = role;
-        document.querySelector("#roles").append(clonerolesCheckBoxTemplate);
-      }
-    }
-
-    //Event listner that populates the wins/celebration form on page ready by calling the function populateCelebrationsForm
-    document.addEventListener("DOMContentLoaded", populateCelebrationsForm);
-    function populateCelebrationsForm() {
-      //celebrations/wins array creation
-      const celebrations = [
-        "I got a new job",
-        "I produced something for my portfolio",
-        "I improved my Linkedin",
-        "I learned how to work better on a team",
-        "I increased the number of commits on my github profile",
-        "I learned a new language",
-        "I became proficient at GitHub",
-        "I setup 2FA",
-        "I worked on an enterprise project",
-        "I migrated google forms to personalized forms",
-        "I worked on a project that will help the people of Los Angeles",
-        "I worked on two or more projects",
-        "I taught or mentored a person on my team",
-        "I taught or mentored a person on another team",
-        "My team delievered software to a stakeholder",
-        "My team launched our MVP",
-      ];
-
-      //Grab celebrations/wins checkbox template from the DOM
-      const winsCheckBoxTemplate = document.querySelector(
-        "#winsCheckboxTemplate"
-      );
-
-      //Create and append celebreations/wins checkbox template
-      for (const celebration of celebrations) {
-        let cloneWinsCheckBoxTemplate = winsCheckBoxTemplate.content.cloneNode(
-          true
-        );
-        cloneWinsCheckBoxTemplate.querySelector(
-          "input"
-        ).id = celebration.replaceAll(" ", "");
-        cloneWinsCheckBoxTemplate.querySelector(
-          "input"
-        ).name = celebration.replaceAll(" ", "");
-        cloneWinsCheckBoxTemplate.querySelector(
-          "label"
-        ).htmlFor = celebration.replaceAll(" ", "");
-        cloneWinsCheckBoxTemplate.querySelector(
-          "label"
-        ).textContent = celebration;
-        cloneWinsCheckBoxTemplate.querySelector("input").value = celebration;
-        document.querySelector("#wins").append(cloneWinsCheckBoxTemplate);
-      }
-    }
-
-    //1st Form -> On next hide 1st form show 2nd form
-    document
-      .querySelector("#nameEmailForm")
-      .addEventListener("submit", function (e) {
-        e.preventDefault();
-
-        form = JSON.parse(localStorage.getItem("form"));
-        form.name = this.fullName.value;
-        form.email = this.email.value;
-        localStorage.setItem("form", JSON.stringify(form));
-
-        this.style.display = "none";
-        document.querySelector("#professionalLinkForm").style.display = "block";
-      });
-
-    //2nd Form -> On next hide 2nd form show 3rd form
-    document
-      .querySelector("#professionalLinkForm")
-      .addEventListener("submit", function (e) {
-        e.preventDefault();
-
-        const form = JSON.parse(localStorage.getItem("form"));
-        form.linkedin_url = this.linkedinurl.value || "";
-        form.linkedin_permission = this.linkedinPhotoPermission.value || "";
-        form.github_url = this.githuburl.value || "";
-        form.github_permission = this.githubPhotoPermission.value || "";
-        localStorage.setItem("form", JSON.stringify(form));
-
-        this.style.display = "none";
-        document.querySelector("#teamsRolesForm").style.display = "block";
-      });
-
-    //3rd Form -> On next hide 3rd form show 4th form
-    document
-      .querySelector("#teamsRolesForm")
-      .addEventListener("submit", function (e) {
-        e.preventDefault();
-
-        //creates a static NodeList of all the teams checkboxes that are checked
-        const teams = document.querySelectorAll(
-          'input[data-type="teams"]:checked'
-        );
-        let teamsArray = [];
-        teams.forEach((team) => {
-          teamsArray.push(team.value);
-        });
-
-        //creates a static NodeList of all the roles checkboxes that are checked
-        const roles = document.querySelectorAll(
-          'input[data-type="roles"]:checked'
-        );
-        let rolesArray = [];
-        roles.forEach((role) => {
-          rolesArray.push(role.value);
-        });
-
-        const form = JSON.parse(localStorage.getItem("form"));
-        form.team = teamsArray;
-        form.role = rolesArray;
-        form.specific_role = document.querySelector("#specificRole").value;
-        form.join_date = Date.parse(
-          document.querySelector("#joinDateInput").value
-        );
-        localStorage.setItem("form", JSON.stringify(form));
-
-        this.style.display = "none";
-        document.querySelector("#celebrationsForm").style.display = "block";
-      });
-
-    //4th form -> On submit calls submitFormToGoogleSheets()
-    document
-      .querySelector("#celebrationsForm")
-      .addEventListener("submit", function (e) {
-        e.preventDefault();
-
-        //creates a static NodeList of all the wins checkboxes that are checked
-        const wins = document.querySelectorAll(
-          'input[data-type="wins"]:checked'
-        );
-        const winsArray = [];
-        wins.forEach((win) => {
-          winsArray.push(win.value);
-        });
-
-        const form = JSON.parse(localStorage.getItem("form"));
-        form.win = winsArray;
-        form.overview = document.querySelector("#winsOverview").value;
-        localStorage.setItem("form", JSON.stringify(form));
-
-        submitFormToGoogleSheets();
-      });
-
-    //linked in photo permission
-    document
-      .querySelector("#linkedinurl")
-      .addEventListener("input", function (e) {
-        //If it is a valid linkedin url
-        const str = e.target.value;
-        if (str.match(/https:\/\/www\.linkedin\.com\/.+/g).length >0) {
-          //display the linkedIn photo permission question
-          document.querySelector("#linkedinPhotoPermission").style.display =
-            "block";
-
-          //default photo usage to yes
-          document.querySelector("#linkedInYes").checked = true;
-
-          //enable the linnkedin photo permissions input
-          document.querySelector("#linkedInYes").disabled = false;
-          document.querySelector("#linkedInNo").disabled = false;
-
-          //enable the next button
-          document.querySelector(
-            "#professionalLinkNextButton"
-          ).disabled = false;
-        }
-      });
-
-    //github photo permission
-    document
-      .querySelector("#githuburl")
-      .addEventListener("input", function (e) {
-        //If it is a valid linkedin url
-        const str = e.target.value;
-        if (str.match(/https:\/\/www\.github\.com\/.+/g).length >0) {
-          //display the github photo permission question
-          document.querySelector("#githubPhotoPermission").style.display =
-            "block";
-
-          //default photo usage to yes
-          document.querySelector("#githubYes").checked = true;
-
-          //enable the linnkedin photo permissions input
-          document.querySelector("#githubYes").disabled = false;
-          document.querySelector("#githubNo").disabled = false;
-
-          //enable the next button
-          document.querySelector(
-            "#professionalLinkNextButton"
-          ).disabled = false;
-        }
-      });
-
-    //Finalize form data and submit to google
-    function submitFormToGoogleSheets() {
-      //The google app script url to call to populate the google sheets
-      const googleFormUri =
-        "https://script.google.com/macros/s/AKfycbza-c14TyNZ1l8SIzOOZJZH7KYyhIT_4WXUlPYHB_DFsyYto742YelpHA/exec";
-
-      const form = JSON.parse(localStorage.getItem("form"));
-      form.time = new Date().getTime();
-      let queryString = Object.keys(form)
-        .map((key) => key + "=" + form[key])
-        .join("&")
-        .replaceAll(" ", "+");
-
-      fetch(`${googleFormUri}?${queryString}`)
-        .then((response) => {
-          response.json().then((data) => {
-            console.log(data);
-            alert(
-              `This is submission success debug alert that you can comment out: ${JSON.stringify(
-                data
-              )}`
-            );
-          });
-        })
-        .catch((error) => console.error("Error!", error.message));
-    }
-  </script>
-</html>