diff --git a/public/assets/css/styles.css b/public/assets/css/styles.css
index 9958052..a99c2b1 100644
--- a/public/assets/css/styles.css
+++ b/public/assets/css/styles.css
@@ -1,3 +1,11 @@
+:target::before {
+  content: "";
+  display: block;
+  height: 4rem;
+  margin-top: -4rem;
+  visibility: hidden;
+}
+
 /* Style for active link based on body class */
 body.home .home-link,
 body.about .about-link,
@@ -7,6 +15,11 @@ body.contact .contact-link {
 
 nav.bg-dark {
   background-color: rgba(var(--bs-dark-rgb), 0.7) !important;
+  transition: background-color 0.5s;
+}
+
+body.is-scrolled nav.bg-dark {
+  background-color: rgba(var(--bs-dark-rgb), 1.0) !important;
 }
 
 section.hero {
diff --git a/public/assets/js/header.js b/public/assets/js/header.js
new file mode 100644
index 0000000..117b2e0
--- /dev/null
+++ b/public/assets/js/header.js
@@ -0,0 +1,3 @@
+window.addEventListener('scroll', function() {
+  document.body.classList.toggle('is-scrolled', window.scrollY > 0);
+});
\ No newline at end of file
diff --git a/public/includes/head.html b/public/includes/head.html
index 34c26ff..1ae7d77 100644
--- a/public/includes/head.html
+++ b/public/includes/head.html
@@ -8,4 +8,5 @@
   <link rel="stylesheet" href="assets/css/styles.css">
 
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.min.js" crossorigin="anonymous" defer></script>
+  <script src="assets/js/header.js" defer></script>
 </head>
\ No newline at end of file