diff --git a/public/assets/css/shell.css b/public/assets/css/shell.css
index d77462d..62f8204 100644
--- a/public/assets/css/shell.css
+++ b/public/assets/css/shell.css
@@ -138,7 +138,7 @@ button.inline {
 }
 
 button.inline:not(.solid) {
-	box-shadow: 
+	box-shadow:
 		0 0 0 2px rgba(var(--primer-color-accent), .1),
 		10px 7px 40px 3px rgba(var(--primer-color-accent), .06)
 	;
@@ -392,7 +392,7 @@ search-results .info :is(svg, img) {
 	}
 
 	button.inline:not(.solid):hover {
-		box-shadow: 
+		box-shadow:
 			0 0 0 2px rgba(var(--primer-color-accent), 1),
 			10px 7px 30px 3px rgba(var(--primer-color-accent), .07)
 		;
@@ -486,7 +486,7 @@ search-results .info :is(svg, img) {
 			width: 50%;
 			height: calc(100svh - 100px);
 			background-color: rgba(0, 0, 0, .8);
-			box-shadow: 
+			box-shadow:
 				inset 0 0 100px 200px rgba(0, 0, 0, 1),
 				0 0 100px 200px rgba(0, 0, 0, 1)
 			;
@@ -499,22 +499,32 @@ search-results .info :is(svg, img) {
 @media (min-width: 900px) {
 	header {
 		.buttons {
-			gap: 10px;
-			width: 100%;
-			display: grid;
+			display: flex;
 			white-space: nowrap;
 			align-items: center;
 			grid-template-columns: repeat(3, 100px);
 
 			button {
-				transition: 100ms border;
-				border: dashed 1px rgba(255, 255, 255, .3);
-				padding: 13px var(--padding);
-				border-radius: 6px;
-				
-				&:hover {
-					border-color: var(--color-accent);
-					background-color: transparent;
+				display: flex;
+				border-left: unset;
+
+				div {
+					width: 4px;
+					height: 2em;
+					transform: rotate(20deg);
+					transition:
+						200ms background-position ease,
+						500ms box-shadow ease
+					;
+					background: linear-gradient(
+						0deg,
+						rgb(var(--primer-color-accent)) 0%,
+						rgb(var(--primer-color-accent)) 50%,
+						rgba(255, 255, 255, .3) 50%,
+						rgba(255, 255, 255, .3) 100%
+					);
+					background-size: 100% 200%;
+					background-position: 0% 0%;
 				}
 
 				:is(
@@ -522,9 +532,30 @@ search-results .info :is(svg, img) {
 					[vv-page="/about"] a[href="/about"],
 					[vv-page="/contact"] a[href="/contact"]
 				) & {
-					color: var(--color-accent);
-					border-style: solid;
-					border-color: var(--color-accent);
+					background-color: transparent;
+
+					div {
+						background-position: 0% 100%;
+						box-shadow: 0 0 10px 0 var(--color-accent);
+					}
+
+					p {
+						color: white;
+					}
+				}
+
+				@media (hover: hover) {
+					&:hover {
+						background-color: transparent;
+
+						div {
+							background-position: 0% 100%;
+						}
+
+						p {
+							color: white;
+						}
+					}
 				}
 			}
 		}
diff --git a/public/shell.php b/public/shell.php
index a8eed79..4b6fd24 100644
--- a/public/shell.php
+++ b/public/shell.php
@@ -48,9 +48,18 @@
 		<nav>
 			<p><a href="/">victor westerlund</a></p>
 			<div class="buttons">
-				<a href="/work"><button><p>/work</p></button></a>
-				<a href="/about"><button><p>/about</p></button></a>
-				<a href="/contact"><button><p>/contact</p></button></a>
+				<a href="/work"><button>
+					<div></div>
+					<p>work</p>
+				</button></a>
+				<a href="/about"><button>
+					<div></div>
+					<p>about</p>
+				</button></a>
+				<a href="/contact"><button>
+					<div></div>
+					<p>contact</p>
+				</button></a>
 			</div>
 		</nav>
 		<button class="search searchbox-open">
@@ -76,4 +85,4 @@
 	<?= VV::init() ?>
 	<script><?= VV::js("public/assets/js/shell") ?></script>
 </body>
-</html>
\ No newline at end of file
+</html>