diff --git a/www/img/splash-jason.jpg b/www/img/splash-jason.jpg
new file mode 100644
index 0000000..34a18cd
Binary files /dev/null and b/www/img/splash-jason.jpg differ
diff --git a/www/index.html b/www/index.html
index 070e2b8..2cf597c 100644
--- a/www/index.html
+++ b/www/index.html
@@ -6,29 +6,52 @@
 <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet' type='text/css'>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/css/bootstrap.min.css" integrity="sha512-CpIKUSyh9QX2+zSdfGP+eWLx23C8Dj9/XmHjZY2uDtfkdLGo0uY12jgcnkX9vXOgYajEKb/jiw67EYm+kBf+6g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 <style type="text/css">
+	/* Variables */
+	:root {
+    --jason-bg-color: #F2EDEA;
+    --main-accent-color: #302B44;
+    --light-accent-color: #686283;
+    --xlight-accent-color: #88839C;
+    --xxlight-accent-color: #FFFFFF;
+    --alt-accent-color: #B05C71;
+    --dark-alt-accent-color: #913A50;
+    --title-font: 'Cinzel', serif;
+    --body-font: 'Raleway', sans-serif;
+	}
+
   html, body { height: 100%; }
 	.container-fluid { width: 100vw; overflow: hidden; }
 	.col { height: 0; min-height: 50vh; }
 
 	@media ( min-width: 992px ) {
 		.row { width: 200vw; position: relative; left: -50vw; }
+		.row { left: 0vw; }
 		.col { min-height: 100vh; }
 	}
 
-	#info-jason { background-color: #FF0000; }
+	/* .info { text-align: center; } */
+	.splash { width: 100%; height: 100%; }
+	.splash img { width: 100%; height: 100%; border-radius: 1rem; object-fit: cover; }
+	.bg-jason { background-color: var(--jason-bg-color); }
 	#info-flo { background-color: #00FF00; }
-	#back { position: fixed; top: 0; right: 0; }
+	#back { position: fixed; top: 0; right: 0; z-index: 200; }
 </style>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/js/bootstrap.min.js" integrity="sha512-5BqtYqlWfJemW5+v+TZUs22uigI8tXeVah5S/1Z6qBLVO7gakAOtkOzUtgq6dsIo5c0NJdmGPs0H9I+2OHUHVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 <script type="text/javascript">
+	var dispPerson = null
+
 	$(() => {
 		console.log('Hello, world!')
 
 		// Handle clicks to open a profile
 		$('a.openlink').click(function(e) {
 			e.preventDefault();
+			dispPerson = $(this).attr('data-person')
+
+			$('.col').css('z-index', 0)
+			$('#info-' + dispPerson).css('z-index', 100)
 
 			// If the viewport width is at least "large"
 			if ($(window).width() >= 992) {
@@ -36,11 +59,15 @@
 					left: $(this).attr('data-pos')
 				}, {
 					duration: 300,
-					queue: false
+					queue: false,
+					complete: function() {
+						$('.info').css('min-height', 0)
+						$('#info-' + dispPerson).css('min-height', '100vh')
+					}
 				})
 
-				$('.info').css('min-height', 0)
-				$('#info-' + $(this).attr('data-person')).css('min-height', '100vh')
+				// $('.info').css('min-height', 0)
+				// $('#info-' + $(this).attr('data-person')).css('min-height', '100vh')
 			}
 
 			// If the viewport width is smaller
@@ -52,7 +79,7 @@
 					duration: 300,
 					queue: false
 				})
-				$('#info-' + $(this).attr('data-person')).animate({
+				$('#info-' + dispPerson).animate({
 					minHeight: '100vh'
 				}, {
 					duration: 300,
@@ -64,6 +91,9 @@
 		// Handle clicks to close a profile
 		$('a.closelink').click(function(e) {
 			e.preventDefault();
+			dispPerson = null
+
+			$('.col').css('z-index', '')
 
 			// If the viewport width is at least "large"
 			if ($(window).width() >= 992) {
@@ -94,14 +124,21 @@
 <body>
 	<div class="container-fluid">
 		<div id="row" class="row">
-			<div id="bigimage-jason" class="col col-lg-3 d-none d-lg-block">
-				Jason Image
+			<div id="bigimage-jason" class="col col-lg-3 p-3 d-none d-lg-block bg-jason">
+				<div class="splash"><img src="./img/splash-jason.jpg"></div>
 			</div>
-			<div id="info-jason" class="col col-12 col-lg-3 info">
-				<a href="/jason" class="openlink" data-person="jason" data-pos="0vw">Jason Info</a>
+			<div id="info-jason" class="col col-12 col-lg-3 d-flex align-items-center justify-content-center info bg-jason">
+				<div class="text-center">
+					<a href="/jason" class="openlink" data-person="jason" data-pos="0vw"><img src="./img/profile-jason.jpg"></a>
+					<h1><a href="/jason" class="openlink" data-person="jason" data-pos="0vw">Jason Williams</a></h1>
+				</div>
 			</div>
-			<div id="info-flo" class="col col-12 col-lg-3 info">
-				<a href="/flo" class="openlink" data-person="flo" data-pos="-100vw">Flo Info</a>
+			<div id="info-flo" class="col col-12 col-lg-3 d-flex align-items-center justify-content-center info">
+				<div class="text-center">
+					<a href="/flo" class="openlink" data-person="flo" data-pos="-100vw"><img src="./img/profile-flo.jpg"></a>
+					<h1><a href="/flo" class="openlink" data-person="flo" data-pos="-100vw">Flo de Guzman</a></h1>
+				</div>
+
 			</div>
 			<div id="bigimage-flo" class="col col-lg-3 d-none d-lg-block">
 				Flo Image
