diff --git a/styles/components/_site.scss b/styles/components/_site.scss
index ff4aa44..e71624c 100644
--- a/styles/components/_site.scss
+++ b/styles/components/_site.scss
@@ -1,5 +1,6 @@
 @use '../lib/colors';
 @use '../lib/layout';
+@use '../lib/motion';
 @use '../lib/typography';
 
 @mixin header-item {
@@ -12,6 +13,48 @@
 .site-logo {
 	margin: 0 layout.$large-gap;
 	text-transform: lowercase;
+
+	> .angestoepselt-logo {
+		height: 1em;
+		vertical-align: middle;
+
+		fill: none;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+		stroke-width: 4px;
+		stroke: colors.$gray-900;
+		stroke-miterlimit: 10;
+
+		.plug {
+			fill: colors.$teal-500;
+		}
+
+		+ span {
+			display: inline-block;
+		}
+	}
+
+	&:hover > .angestoepselt-logo {
+		@keyframes angestoepselt-logo-hover {
+			0% {
+				transform: none;
+			}
+			50% {
+				transform: translateX(0.6rem);
+			}
+			100% {
+				transform: translateX(-0.6rem);
+			}
+		}
+
+		animation: angestoepselt-logo-hover motion.$prominent forwards;
+
+		+ span {
+			transform-origin: 100% 50%;
+			transition: transform #{0.5 * motion.$prominent-duration} motion.$prominent-timing #{0.5 * motion.$prominent-duration};
+			transform: scale(1.1);
+		}
+	}
 }
 
 // The navigation is present twice on the site: once in the header and once in
diff --git a/styles/lib/_motion.scss b/styles/lib/_motion.scss
index e638f80..fa117f0 100644
--- a/styles/lib/_motion.scss
+++ b/styles/lib/_motion.scss
@@ -1,4 +1,6 @@
 $subtle: 0.1s cubic-bezier(0.56, 0.03, 0.35, 0.9);
 $gentle: 0.2s cubic-bezier(1, 0.11, 0.41, 0.69);
-$prominent: 0.7s cubic-bezier(0.45, 0.16, 0.38, 0.7);
+$prominent-duration: 0.7s;
+$prominent-timing: cubic-bezier(0.45, 0.16, 0.38, 0.7);
+$prominent: $prominent-duration $prominent-timing;
 $background: 8s cubic-bezier(0.45, 0.16, 0.38, 0.7);