diff --git a/themes/one-pager/assets/css/style.css b/themes/one-pager/assets/css/style.css
index ccd17c1..53a71cd 100644
--- a/themes/one-pager/assets/css/style.css
+++ b/themes/one-pager/assets/css/style.css
@@ -156,6 +156,30 @@ body {
   pointer-events: none;
 }
 
+#bannerino {
+
+  position:absolute;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+  z-index:0;
+  background-size:cover;
+  background-position:center;
+  background-attachment:fixed;
+}
+#texture {
+  filter: invert(50%) sepia(100%) saturate(100%) hue-rotate(15deg);
+  position:absolute;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+  z-index:1;
+  background-image:url('/images/texture.png');
+  pointer-events:none;
+}
+
 /* Content sits above overlay */
 .header-content {
   max-width: 1200px;
@@ -163,8 +187,11 @@ body {
   width: 100%;
   position: relative;
   z-index: 1;
+  transition: all 1s ease;
+}
+.header-content:hover {
+  transition: all 1s ease;
 }
-
 /* Profile layout */
 .header-profile {
   display: flex;
@@ -179,16 +206,18 @@ body {
   width: 180px;
   height: 180px;
   border-radius: 0;
-  border: 4px solid var(--accent-yellow);
+  border: 4px solid var(--accent-grey);
   object-fit: cover;
-  box-shadow: 12px 12px 0 var(--accent-yellow);
+  box-shadow: 12px 12px 0 var(--accent-grey);
   transition: all 0.3s ease;
   border-radius: 100%;
+
 }
 
 .profile-picture:hover {
   transform: scale(1.02);
   box-shadow: 16px 16px 0 var(--accent-yellow);
+  border: 4px solid var(--accent-yellow);
 
 }
 
@@ -206,7 +235,7 @@ body {
   font-size: 7rem;
   letter-spacing: -2px;
   line-height: 1.1;
-  color: var(--accent-yellow);
+  color: var(--accent-grey);
   text-transform: uppercase;
   margin-bottom: 0.5rem;
   text-shadow:
@@ -341,11 +370,12 @@ body {
   z-index: 999;
   background: var(--bg-primary);
   border-bottom: 3px solid var(--accent-yellow);
+  opacity: .9;
   padding: 0.8rem 2rem;
   transform: translateY(-100%);
   transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease;
   box-shadow: 0 4px 20px var(--shadow-color);
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(10px);
 }
 
diff --git a/themes/one-pager/layouts/partials/header.html b/themes/one-pager/layouts/partials/header.html
index f29e478..ef94269 100644
--- a/themes/one-pager/layouts/partials/header.html
+++ b/themes/one-pager/layouts/partials/header.html
@@ -56,9 +56,9 @@
 <header class="main-header" style="position:relative;overflow:hidden;">
     <!-- Background image -->
     {{ if $banner }}
-    <div style="position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-image:url('{{ $banner }}');background-size:cover;background-position:center; background-attachment:fixed;"></div>
+    <div id="bannerino" style="background-image:url('{{ $banner }}');"></div>
     <!-- Dark overlay for readability -->
-    <div style="position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;background-image:url('/images/texture.png');pointer-events:none;"></div>
+    <div id="texture"></div>
     {{ end }}
     
 
@@ -69,7 +69,7 @@
     <div class="header-content">
         <div class="header-profile">
             {{ if $picture }}
-            <img src="{{ $picture }}" alt="{{ $displayName }}" class="profile-picture" loading="lazy">
+            <img src="{{ $picture }}" alt="{{ $displayName }}'s profile picture'" class="profile-picture" loading="lazy">
             {{ end }}
             <div class="header-text">