diff --git a/public/assets/css/upgrade.css b/public/assets/css/upgrade.css
new file mode 100644
index 0000000..9f7db62
--- /dev/null
+++ b/public/assets/css/upgrade.css
@@ -0,0 +1,230 @@
+.wrapper {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  min-height: 100vh;
+}
+.wrapper::before {
+  position: absolute;
+  top: -800px;
+  content: "";
+  background: #111531;
+  border-radius: 100%;
+  width: 1600px;
+  height: 1400px;
+}
+
+.account-form-wrapper {
+  display: flex;
+  flex-flow: column;
+  width: min(1200px, 100%);
+  color: var(--text-secondary);
+  margin: 0 auto 48px;
+  z-index: 1;
+}
+
+.account-form-wrapper .logotype {
+  margin: 36px auto 0;
+  width: fit-content;
+}
+
+h1.title {
+  color: var(--text);
+}
+p.caption {
+  width: min(100%, 500px);
+  margin: 0 auto 72px;
+}
+
+form {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.3rem;
+}
+
+form .tier-radio {
+  display: none;
+}
+form .tier-radio:checked + label::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-shadow: inset 0 0 0 4px #9d70f1;
+  border-radius: 10px;
+}
+form .tier-radio:checked + label::after {
+  content: url(/assets/images/check.svg);
+  display: flex;
+  justify-content: center;
+  background: #9d70f1;
+  width: 24px;
+  height: 24px;
+  border-radius: 100%;
+  position: absolute;
+  top: -16px;
+  right: -16px;
+  padding: 6px;
+}
+
+label.tier {
+  display: flex;
+  flex-flow: column;
+  position: relative;
+  border-radius: 10px;
+  align-items: center;
+  padding-top: calc(50px + 1rem);
+  background: #393b5f;
+  cursor: pointer;
+  transition: all 150ms;
+  margin-top: 50px;
+  text-align: center;
+}
+
+label.tier p {
+  margin: 0;
+  margin-bottom: 0.5rem;
+}
+
+label.tier .tier-thumbnail {
+  height: 100px;
+  width: 100px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  border-radius: 8px;
+  position: absolute;
+  top: -50px;
+  z-index: 2;
+  background: #47496d;
+}
+form .tier-radio:checked + label .tier-thumbnail::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-shadow: inset 0 0 0 4px #9d70f1;
+  border-radius: 8px;
+}
+
+label.tier .tier-text {
+  display: flex;
+  flex-flow: column;
+  margin-bottom: auto;
+}
+
+label.tier .tier-name {
+  color: var(--text);
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+
+label.tier .tier-perks {
+  text-align: left;
+  width: 70%;
+  margin: 24px auto 48px;
+}
+label.tier .tier-perks div {
+  display: grid;
+  grid-template-columns: 16px auto;
+  gap: 8px;
+}
+label.tier .tier-perks svg {
+  stroke-width: 5px;
+  stroke: #59c9a5;
+  stroke-linecap: square;
+  width: 16px;
+  height: 16px;
+  vertical-align: top;
+  margin-top: 0.5ex;
+}
+
+label.tier p.price {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  background: #47496d;
+  margin: 0;
+  padding: 1.5rem 1rem;
+  box-sizing: border-box;
+  border-radius: 0 0 10px 10px;
+}
+label.tier p.price span {
+  font-size: 2rem;
+  color: var(--text);
+  font-weight: bold;
+  margin-right: 0.5ch;
+}
+
+form .button-wrapper {
+  grid-column: 2 / span 1;
+}
+form button {
+  appearance: none;
+  -webkit-appearance: none;
+  display: block;
+  font-family: Poppins, Arial, Helvetica, sans-serif;
+  font-size: 1rem;
+  height: fit-content;
+
+  background: var(--btn);
+  border: none;
+  border-radius: 4px;
+  padding: 12px;
+  color: var(--text);
+  width: 100%;
+  margin-top: 24px;
+  pointer-events: none;
+  filter: brightness(0.75) saturate(0.75); /* not using opacity here 'cause in the mobile layout you would see the cards under it */
+  transition: filter 300ms;
+}
+form .tier-radio:checked ~ .button-wrapper button {
+  pointer-events: all;
+  cursor: pointer;
+  filter: none;
+}
+
+@media screen and (max-width: 900px) {
+  .account-form-wrapper {
+    width: min(500px, 100%);
+    margin-bottom: 120px;
+  }
+
+  form {
+    grid-template-columns: 1fr;
+    gap: 2.4rem;
+  }
+
+  form button {
+    position: relative;
+    width: 100%;
+  }
+  form .button-wrapper {
+    grid-column: 1 / span 1;
+    position: fixed;
+    bottom: 24px;
+    width: min(500px, 90%);
+    z-index: 5;
+  }
+  form .button-wrapper::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -100vw;
+    width: 200vw;
+    height: 150%;
+    background: #111531;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  label.tier .tier-perks {
+    width: 80%;
+  }
+}
diff --git a/views/account/upgrade.handlebars b/views/account/upgrade.handlebars
index 5a45dec..55e7d23 100644
--- a/views/account/upgrade.handlebars
+++ b/views/account/upgrade.handlebars
@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="/assets/css/login.css" />
+<link rel="stylesheet" href="/assets/css/upgrade.css" />
 
 <div class="wrapper">
 	<div class="account-form-wrapper">
@@ -26,25 +26,60 @@
 				</g>
 			</svg>
 		</a>
+  
+		<h1 class="title dot">Upgrade</h1>
+		<p class="caption">Subscribing to a tier gives you access to our developer chats and, depending on the tier,
+				to our beta servers. Please someone reword this, it sucks. No fr.</p>
 
-		{{#each tiers }}
-		<div class="tier">
-			<form action="/account/checkout/{{this.price_id}}" method="post">
-				<img src="{{this.thumbnail}}" width="100" height="auto" alt="" srcset="">
-				<p>{{this.name}}</p>
-				<p>{{this.description}}</p>
-				<p>{{this.price}}+Tax</p>
-				<button type="submit">Checkout</button>
-			</form>
-		</div>
-		{{/each}}
-	</div>
+
+    	<form method="post">
+      		{{#each tiers}}
+				<input type="radio" class="tier-radio" data-tier-name="{{this.name}}" name="tier" value="{{this.price_id}}" id="{{this.price_id}}" />
+        		<label class="tier" for="{{this.price_id}}">
+					<div class="tier-thumbnail">
+          				<img src="{{this.thumbnail}}" width="100%" height="auto" alt="Tier icon" />
+					</div>
+          			<div class="tier-text">
+						<p class="tier-name">{{this.name}}</p>
+						<div class="tier-perks">
+							{{#each this.perks}}
+
+								<div>
+									<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+            						<p>{{this}}</p>
+								</div>
+							{{/each}}
+						</div>
+          			</div>
+					<p class="price">
+						<span>{{this.price}}</span> / month
+					</p>
+       			</label>
+      		{{/each}}
+			<div class="button-wrapper">
+				<button type="submit" id="submitButton">
+					Select a tier
+				</button>
+			</div>
+    	</form>
+  	</div>
 </div>
 
-<style>
-	.tier {
-		padding: 10px;
-		background-color: white;
-		color: black;
-	}
-</style>
\ No newline at end of file
+<script>
+	document.querySelector('#submitButton').addEventListener('click', function(e) {
+		e.preventDefault();
+
+		const form = document.querySelector('form');
+		const selectedTier = form.querySelector('input[type="radio"]:checked').value;
+		form.action = `/account/checkout/${selectedTier}`;
+		form.submit();
+	});
+
+	document.querySelector('form').addEventListener('change', function(e) {
+		e.preventDefault();
+
+		const clickedTierID = e.srcElement.id;
+		const clickedTierName = e.srcElement.dataset.tierName;
+		document.querySelector('#submitButton').innerText = `Subscribe to ${clickedTierName}`;
+	});
+</script>
\ No newline at end of file