diff --git a/styles/header.module.css b/styles/header.module.css
index dd78daa..7353e3d 100644
--- a/styles/header.module.css
+++ b/styles/header.module.css
@@ -5,6 +5,7 @@
 	width: calc(100% + 6px);
 	border-radius: 0 0 16.5px 16.5px;
 	filter: var(--theme-ui-colors-cardFilter);
+	transition: filter 0.3s ease-in-out;
 }
 
 .header {
@@ -13,6 +14,7 @@
 	position: relative;
 	overflow: hidden;
 	filter: var(--theme-ui-colors-cardFilter);
+	transition: filter 0.3s ease-in-out;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
@@ -26,6 +28,7 @@
 	height: auto;
 	border-radius: 16.5px;
 	background-color: var(--theme-ui-colors-cardBackground);
+	transition: background-color 0.3s ease-in-out;
 	backdrop-filter: blur(7px);
 	padding-top: 30px;
 	padding-bottom: 40px;
@@ -42,6 +45,7 @@
 	margin-bottom: -20px;
     font-size: max(2em, 4vw);
     color: var(--theme-ui-colors-text);
+	transition: color 0.3s ease-in-out;
 	word-break: break-word;
 }
 
@@ -52,6 +56,7 @@
     font-weight: 100;
     font-size: max(1.5em, 1.5vw);
     color: var(--theme-ui-colors-text);
+	transition: color 0.3s ease-in-out;
 }
 
 .subtextExtra {