diff --git a/assets/scss/base/components.scss b/assets/scss/base/components.scss
index 4bca5fa..b39201f 100644
--- a/assets/scss/base/components.scss
+++ b/assets/scss/base/components.scss
@@ -1,15 +1,15 @@
 .button {
 	background: #0060ff;
-	color: white !important;
+	color: white;
 	width: max-content;
 	font-size: clamp(1em,2vw,1em);
-	padding: 0.75em;
+	padding: 1em;
 	display: flex;
 	justify-content: center;
+	align-items: center;
 	text-decoration: none;
-	border-radius: 100em;
+	border-radius: 0.25em;
 	font-weight: 700;
-
 }
 
 
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 0abdc10..fcd917d 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -9,6 +9,7 @@
 @import "index/testimonials.scss";
 
 @import "work/index.scss";
+@import "work/trilogy/index.scss";
 
 @import "partials/site-header.scss";
 @import "partials/site-footer.scss";
\ No newline at end of file
diff --git a/assets/scss/partials/site-header.scss b/assets/scss/partials/site-header.scss
index f7eb2ec..47b2777 100644
--- a/assets/scss/partials/site-header.scss
+++ b/assets/scss/partials/site-header.scss
@@ -1,4 +1,5 @@
 .site-header {
+	z-index: 10;
 	a {text-decoration: none; color: inherit;}
 	.container {
 		display: flex;
diff --git a/assets/scss/work/index.scss b/assets/scss/work/index.scss
index b5b18d9..2d849db 100644
--- a/assets/scss/work/index.scss
+++ b/assets/scss/work/index.scss
@@ -9,22 +9,16 @@
 			margin-bottom: 1em;
 		}
 	}
-	.resume-link {
-		height: 3em;
-		background: #06f;
-		color: white;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		padding: 0 1em;
-		border-radius: 6px;
-		text-decoration: none;
-		font-weight: 700;
-	}
 	.timeline {
 		position: relative;
 		max-width: 60em;
 		margin: 0 auto;
+		&::before {
+			content: 'TODAY';
+			position: absolute;
+			top: 0;
+			left: 2.5em;
+		}
 		&::after {
 			content: '';
 			position: absolute;
@@ -58,11 +52,12 @@
 				width: 2em;
 				height: 2em;
 				z-index: 1;
-				left: -2.75em;
+				left: -3em;
 				border-width: 1em;
 				border-color: #06f;
 				border-radius: 100em;
 				background-color: #06f;
+				border: 0.25em solid #ddd;
 			}
 			&.worktrilogy::before {
 				background: url("/icons/trilogy.png");
@@ -80,7 +75,15 @@
 			&.workeqin::before {
 				background: url("/icons/eqin.png");
 				background-size: cover;
-				box-shadow: 0px 0px 2px black;
+			}
+			&.workuab {
+				&::before {
+					background: url("/icons/uab.png");
+					background-size: contain;
+					background-repeat: no-repeat;
+					background-position: center;
+					background-color: white;
+				}
 			}
 			&__daterange {
 				margin-left: 0em;
@@ -114,4 +117,51 @@
 			}
 		}
 	}
+	.cta {
+		.container  {
+			display: flex;
+			flex-flow: column;
+			align-items: start;
+		}
+		.title {
+			font-size: 1.4em;
+			font-weight: 700;
+			margin-bottom: 1.4em;
+		}
+		.blurb {
+			line-height: 1.4;
+			margin-bottom: 1.4em;
+			strong {
+				font-weight: 700;
+				background: hsl(120, 240, 80,);
+				border-radius: 0.25em;
+				padding: 0.25em;
+			}
+		}
+		.buttons {
+			margin-top: 1em;
+			display: grid;
+			grid-template-columns: 1fr;
+			width: 100%;
+			font-size: 1.25em;
+			@media (min-width: 34em) {
+				grid-template-columns: 1fr 1fr;
+				width: unset;
+			}
+			gap: 1em;
+			.button {
+				justify-content: start;
+				width: 100%;
+				i {margin-right: 1em;}
+			}
+		}
+		.email.button {
+
+		}
+		.resume.button {
+			background: white;
+			border: 2px solid #06f;
+			color: #06f;
+		}
+	}
 }
\ No newline at end of file
diff --git a/assets/scss/work/trilogy/index.scss b/assets/scss/work/trilogy/index.scss
new file mode 100644
index 0000000..c217cae
--- /dev/null
+++ b/assets/scss/work/trilogy/index.scss
@@ -0,0 +1,191 @@
+#trilogy {
+	background: #002663;
+	color: white;
+	.page-header {
+		.container {
+			display: grid;
+			@media (min-width: 51.75em) {
+				grid-template-columns: auto 1fr;
+			}
+			gap: 1em;
+			justify-items: center;
+		}
+	}
+	.page-title {
+		color: white;
+		line-height: 1.4;
+		font-weight: 400;
+		font-size: 1.75em;
+		text-align: center;
+		@media (min-width: 51.75em) {
+			text-align: left;
+		}
+	}
+	.cover-image {
+		width: auto;
+		height: 100%;
+	}
+	.separator {
+		width: 10em;
+		height: 0.5em;
+		border-radius: 100em;
+		border: none;
+		background: white;
+	}
+	#responsibilities {
+		display: flex;
+		flex-flow: column;
+		overflow: hidden;
+		.container {
+			display: flex;
+			flex-flow: column;
+			gap: 2em;
+		}
+		.title {
+			font-size: 2em;
+			font-weight: 700;
+			position: relative;
+			margin-bottom: 2em;
+			margin-top: 3em;
+			&::before {
+				content: 'Responsibilities';
+				position: absolute;
+				top: -0.5em;
+				left: -0.5em;
+				font-size: 4em;
+				font-weight: 900;
+				opacity: 0.2;
+			}
+		}
+		section {
+			width: 100%;
+			max-width: 45em;
+			margin: auto;
+		}
+	}
+	.subtitle {
+		font-size: 1.6em;
+		font-weight: 700;
+		margin-top: 2em;
+		margin-bottom: 1em;
+		position: relative;
+	}
+	.blurb {
+		line-height: 1.4;
+		max-width: 45ch;
+		font-size: 1.2em;
+	}
+	#quick-learning {
+		.subtitle {
+			&:before {
+				content: '01';
+				position: absolute;
+				top: -0.5em;
+				left: -0.25em;
+				font-size: 4em;
+				font-weight: 900;
+				opacity: 0.2;
+			}
+		}
+	}
+	#problem-solving {
+		text-align: right;
+		display: flex;
+		flex-flow: column;
+		align-items: end;
+		.subtitle {
+			&:before {
+				content: '02';
+				position: absolute;
+				top: -0.5em;
+				right: -0.25em;
+				font-size: 4em;
+				font-weight: 900;
+				opacity: 0.2;
+			}
+		}
+	}
+	#writing-articles {
+		display: flex;
+		flex-flow: column;
+		align-items: center;
+		.subtitle {
+			&:before {
+				content: '03';
+				position: absolute;
+				top: -0.5em;
+				right: calc(50% - 1ch);
+				font-size: 4em;
+				font-weight: 900;
+				opacity: 0.2;
+			}
+		}
+	}
+	#kba {
+		display: grid;
+		gap: 1em;
+		@media (min-width: 40em) {
+			grid-template-columns: 1fr 1fr;
+		}
+		section {
+			background: white;
+			color: black;
+			height: 100%;
+			padding: 1em;
+			border-radius: 0.375em;
+		}
+	}
+	.card {
+		&__title {
+			margin-top: 1em;
+			margin-bottom: 2em;
+			font-size: 1.25em;
+		}
+		&__text {
+			font-size: 1em;
+			line-height: 1.4;
+		}
+	}
+	#skb {
+		text-align: right;
+		.card__title {
+			position: relative;
+			&:before {
+				content: 'SKB';
+				position: absolute;
+				top: -0.5em;
+				left: 0;
+				font-size: 4em;
+				font-weight: 900;
+				opacity: 0.15;
+			}
+		}
+	}
+	#tkb {
+		.card__title {
+			position: relative;
+			&:before {
+				content: 'TKB';
+				position: absolute;
+				top: -0.5em;
+				right: 0;
+				font-size: 4em;
+				font-weight: 900;
+				opacity: 0.15;
+			}
+		}
+	}
+	#tnc {
+		.subtitle {
+			&:before {
+				content: '04';
+				position: absolute;
+				top: -0.5em;
+				right: 0;
+				font-size: 4em;
+				font-weight: 900;
+				opacity: 0.2;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/content/work/trilogy/index.html b/content/work/trilogy/index.html
new file mode 100644
index 0000000..a60371f
--- /dev/null
+++ b/content/work/trilogy/index.html
@@ -0,0 +1,61 @@
+---
+title: "Senior Technical Writer at Trilogy"
+summary: "Managing knowledge bases for numerous products owned by Trilogy."
+author: "Abdullah Tarawneh"
+date: "2021-05-16"
+start: "May 2021"
+end: "current"
+at: "Trilogy"
+position: "Senior Technical Writer / Product Knowledge Curator"
+tags: ["technical writing", "senior role", "customer support", "product knowledge", "knowledge base", "curator", "curation"]
+category: "Work"
+cover: "/images/trilogy.png"
+---
+
+<main id="trilogy">
+<header class="page-header section">
+	<div class="container">
+		<img src="/images/trilogy.png" alt="" class="cover-image">
+		<h1 class="page-title">I managed the knowledge bases for numerous enterprise applications owned by a company and its many subsidiaries.</h1>
+		
+	</div>
+</header>
+<hr class="separator">
+<section id="responsibilities" class="section">
+	<div class="container">
+		<h2 class="title">I had several responsibilities.</h2>
+		<section id="quick-learning">
+		<h3 class="subtitle">Being a quick learner.</h3>
+		<p class="blurb">Being responsible for several products under the banner of Central Support meant that I had to quickly and rapidly learn new products with limited information.</p>
+		</section>
+		<section id="problem-solving">
+			<h3 class="subtitle">Analyzing real problems from real customers.</h3>
+			<p class="blurb">I was tasked with reading customer support tickets one by one, in order to document the problems and solutions faced by actual customers.</p>
+		</section>
+		<section id="writing-articles">
+			<h3 class="subtitle">Writing clear and concise articles.</h3>
+			<p class="blurb">After reading each ticket, I would have to write two different types of articles:</p>
+		</section>
+		<div class="kba-types" id="kba">
+			<section class="card" id="skb">
+				<h4 class="card__title">Solution Articles</h4>
+				<p class="card__text">Solution articles are written to deal with a unique problem-solution pair. These articles contain an overview of the problem and its diagnosed symptoms, as well as the documented solution.</p>
+			</section>
+			<section class="card" id="tkb">
+				<h4 class="card__title">Troubleshooting Articles</h4>
+				<p class="card__text">Troubleshooting articles are based on troubleshooting steps within tickets that have the same symptoms, but multiple different possible solutions. These articles contain a flowchart with various steps.</p>
+			</section>
+		</div>
+		<section id="tnc">
+			<h3 class="subtitle">Training and certifying support agents.</h3>
+			<p class="blurb">Based on the amassed product knowledge within the articles written throughout the above process, I would create training units within a learning management system, consisting of either a test or a task based on each article/ticket pair.</p>
+		</section>
+	</div>
+</section>
+<section class="section">
+	<div class="container">
+
+	</div>
+</section>
+
+</main>
\ No newline at end of file
diff --git a/content/work/trilogy/index.md b/content/work/trilogy/index.md
deleted file mode 100644
index 89a75ec..0000000
--- a/content/work/trilogy/index.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: "Senior Technical Writer at Trilogy"
-summary: "Managing knowledge bases for numerous products owned by Trilogy."
-author: "Abdullah Tarawneh"
-date: "2021-05-16"
-start: "May 2021"
-end: "current"
-at: "Trilogy"
-position: "Senior Technical Writer / Product Knowledge Curator"
-tags: ["technical writing", "senior role", "customer support", "product knowledge", "knowledge base", "curator", "curation"]
-category: "Work"
-cover: "/images/trilogy.png"
----
-
-## Responsibilities
-
-- Quickly and rapidly learning new products with limited information.
-- Reading customer support tickets to document the problems and solutions faced by actual customers.
-- Writing solution KB articles based on each problem-solution pair.
-- Writing troubleshooting KB articles based on troubleshooting steps within tickets that have the same symptoms but multiple different solutions.
\ No newline at end of file
diff --git a/content/work/uab/index.md b/content/work/uab/index.md
new file mode 100644
index 0000000..2389c60
--- /dev/null
+++ b/content/work/uab/index.md
@@ -0,0 +1,13 @@
+---
+title: ""
+summary: "B.S. Biomedical Engineering<br>B.S. Computer Science<br>Minor, Mathematics<br>Science and Technology Honors Program"
+author: "Abdullah Tarawneh"
+date: "2018-12-15"
+start: ""
+end: "Fall 2018"
+at: "UAB"
+position: "Graduated from The University of Alabama at Birmingham"
+tags: []
+category: "Work"
+cover: ""
+---
\ No newline at end of file
diff --git a/layouts/work/list.html b/layouts/work/list.html
index 5a8b753..8b056d4 100644
--- a/layouts/work/list.html
+++ b/layouts/work/list.html
@@ -1,12 +1,11 @@
 {{ define "main" }}
 <main id="work">
-	<header class="section page-header">
+	<header class="page-header section">
 		<div class="container">
-			<h1 class="page-title">{{ .Title }}</h1>
-			<a href="https://resume.abdullahtarawneh.com" class="resume-link">One-page Resume (HTML)</a>
+			<h1 class="page-title">here's a timeline of the work i've done.</h1>
 		</div>
 	</header>
-	<section class="section timeline">
+	<section class="timeline section">
 		<div class="container">
 			{{ range .Pages }}
 				<article class="timeline-item {{ .Permalink | relURL | anchorize }}">
@@ -21,5 +20,15 @@
 			{{ end }}
 		</div>
 	</section>
+	<section class="cta section">
+		<div class="container">
+			<h1 class="title">wanna hire me?</h1>
+			<p class="blurb">i'm currently <strong>available</strong> for work. let's get in touch.</p>
+			<div class="buttons">
+			<a href="mailto:a@trwnh.com" class="email button"><i class="fa fa-envelope"></i> email me</a>
+			<a href="https://resume.abdullahtarawneh.com" class="resume button"><i class="fa fa-id-card-o"></i> Résume (HTML)</a>
+			</div>
+		</div>
+	</section>
 </main>
 {{ end }}
\ No newline at end of file
diff --git a/layouts/work/single.html b/layouts/work/single.html
new file mode 100644
index 0000000..f752ee3
--- /dev/null
+++ b/layouts/work/single.html
@@ -0,0 +1,3 @@
+{{ define "main" }}
+{{ .Content }}
+{{ end }}
\ No newline at end of file
diff --git a/static/icons/uab.png b/static/icons/uab.png
new file mode 100644
index 0000000..bbe32c9
Binary files /dev/null and b/static/icons/uab.png differ