diff --git a/_sass/components/_wins-page.scss b/_sass/components/_wins-page.scss
index d55e4db567..23cb31a721 100644
--- a/_sass/components/_wins-page.scss
+++ b/_sass/components/_wins-page.scss
@@ -1,248 +1,293 @@
 //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;
-	}
+    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-btn{
+    max-width: 300px;
+    max-height: 75px;
 }
 
-.wins__card-text {
-	padding-top: 40px;
-	p {
-		margin: 0;
-	}
 
+.wins-see-more-div {
+    position: absolute;
+    background-color: white;
+    right: 0px;
+    bottom: 0px;
+    color: red;
+    padding: 0px 3px;
+    cursor: pointer;
 }
 
-@media #{$bp-below-tablet} {
-	.wins-hero{
+.wins-card-text {
+	margin-top: 40px;
+	height: 88px;
+	overflow: hidden;
+	position: relative;
+    p {
+        margin: 0;
+    }
 
-		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{
+@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;
+        }
+        
+    }
+}
 
-		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;
-		}
-	}
+@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;
+        }
+    }
 }
 
 // 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: row;
+    padding: 45px;
+    display: flex;
+    flex-direction: column;
+}
+.wins-card-top{
+    display: flex;
 }
-.wins-card-left{
-	width: 100px;
-	margin-right: 10px;
-	display: flex;
-	align-items: flex-end;
-	flex-direction: column;
+.wins-card-top-right{
+    flex-grow: 1;
 }
 .wins-card-profile-img{
-	border-radius: 100px;
+    width: 86px;
+    height: 86px;
+    border-radius: 100px;
+    margin-right: 20px;
 }
 .wins-card-big-quote{
-	width: 28px;
-	height: 96.05px;
-	position: relative;
-	top: -20px;
+    width: 28px;
+    height: 112px;
+    margin-right: 20px;
+    margin-left: 58px;
+    position: relative;
+}
+.wins-card-bottom{
+    display: flex;
 }
 .wins-card-content{
-	display: flex;
-	flex-direction: column;
-	margin-left: 20px;
-	width: 100%;
-	position: relative;
-	height: 225px;
-	overflow: hidden;
-	margin-left: 6px;
+    display: flex;
+    flex-direction: column;
+    margin-left: 20px;
+    width: 100%;
+    position: relative;
+    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;
+    font-weight: normal;
+    font-size: 16px;
+    line-height: 18px;
+    display: flex;
+    align-items: center;
 }
-.wins-card-top{
-	display: flex;
-	justify-content: space-between;
+.wins-card-title{
+    display: flex;
+    justify-content: space-between;
 }
-.wins-card-icon{
-	margin-left: 18px;
+.wins-card-icon, .wins-card-github-icon, .wins-card-linkedin-icon{
+    margin-left: 18px;
+}
+.wins-card-icons{
+    display: flex;
 }
 .wins-card-info{
-	font-weight: bold;
+    font-weight: bold;
 }
 
 .wins-card-overview{
-	margin-top: 1em;
+    margin-top: 1em;
 }
 
 @media #{$bp-below-tablet} {
-	.wins-card-content{
-		height: 233px;
-	}
+    .wins-card-text{
+        height: 81px;
+    }
 }
 
 @media #{$bp-below-mobile} {
-	.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;
-	}
+    .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;
+    }
 }
 
 
 
 //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: 100%;
-		height: 100%;
-		background-color: rgba(70, 70, 70, 0.5);
-		padding: 10px;
-	}
-
-	.display-none {
-		display: none;
+    .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;
 	}
-
-	.display-initial {
-		display: initial;
+	.overlay-card-text{
+		padding-top: 40px;
 	}
-
-	.center-screen {
-		position: fixed;
-		opacity: 1;
-		width: 60%;
-		left: 20%;
-		top: 30%;
-		.wins-card-content{
-			height: auto;
+	.wins-card-badges{
+		display:flex;
+		flex-flow: row wrap;
+		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;
+			}
 		}
 	}
 
@@ -251,23 +296,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;
 }
 
 
@@ -291,4 +336,4 @@
 		grid-template-rows: none;
 	}
 }
-//wins page filter override section end
\ No newline at end of file
+//wins page filter override section end
diff --git a/wins/wins-card-template.html b/wins/wins-card-template.html
new file mode 100644
index 0000000000..26b10016e4
--- /dev/null
+++ b/wins/wins-card-template.html
@@ -0,0 +1,34 @@
+<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
new file mode 100644
index 0000000000..573ff503ad
--- /dev/null
+++ b/wins/wins-filter-template.html
@@ -0,0 +1,18 @@
+<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/_includes/wins-hero.html b/wins/wins-hero.html
similarity index 59%
rename from _includes/wins-hero.html
rename to wins/wins-hero.html
index 301f794287..c6243a2b37 100644
--- a/_includes/wins-hero.html
+++ b/wins/wins-hero.html
@@ -1,8 +1,11 @@
 <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/wins/wins-overlay.html b/wins/wins-overlay.html
new file mode 100644
index 0000000000..e485ba6373
--- /dev/null
+++ b/wins/wins-overlay.html
@@ -0,0 +1,26 @@
+<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
new file mode 100644
index 0000000000..f1ebac5b03
--- /dev/null
+++ b/wins/wins-share-form.html
@@ -0,0 +1,550 @@
+---
+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>
diff --git a/wins.html b/wins/wins.html
similarity index 65%
rename from wins.html
rename to wins/wins.html
index 4b24d28f3f..219a3f1dcf 100644
--- a/wins.html
+++ b/wins/wins.html
@@ -1,75 +1,21 @@
 ---
 layout: default
 title: Wins
+permalink: /wins/
+
 ---
 
-{%- 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>
+{%- include_relative wins-hero.html -%}
+{% include_relative wins-overlay.html %}
 <a class="anchor" id="projects"></a>
 <section class="content-section projects">
-  <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">
+	<div   class="wins-page-contain projects-inner" >
 
-		
-	</ul>
-  </div>
+		{% include_relative wins-filter-template.html %}
+		{% include_relative wins-card-template.html %}
+
+		<ul id="responses" class="project-list unstyled-list"></ul>
+	</div>
 </section>
 
 <script>
@@ -144,13 +90,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("template");
-  	var cloneFilterTemplate = filterTemplate.content.cloneNode(true);
+	const filterTemplate = document.getElementById("wins-filter-template-repeat");
   	const roleDropwDown =  document.getElementById("role-dropdown");
   	const teamDropDown = document.getElementById("team-dropdown");
 
@@ -297,116 +243,92 @@
   	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 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
-  		}
+	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;
 
-  		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;
-  					}
-  				});
-  			});
+		
+		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
 
-  		}
+			//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()
 
-  		/* 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');
-  			}
+		new ResizeObserver(addSeeMore).observe(winText)
+	})
 
-  		//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;
@@ -427,6 +349,19 @@
   		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();