diff --git a/site/themes/carvel/assets/scss/_base.scss b/site/themes/carvel/assets/scss/_base.scss
index eb4eb8da8..36ca1c17e 100644
--- a/site/themes/carvel/assets/scss/_base.scss
+++ b/site/themes/carvel/assets/scss/_base.scss
@@ -10,15 +10,16 @@ body {
     font-size: 16px;
     color: $grey;
 }
+
 .wrapper {
     max-width: 980px;
-    //width: 100%;
     margin: 0px auto;
     padding: 20px;
     @include breakpoint(small) {
         max-width: 100%;
     }
 }
+
 .clearfix {
     *zoom: 1;
 	&:before, &:after {
@@ -30,45 +31,41 @@ body {
 		clear: both;
 	}
 }
+
 h1, h2, h3, h4, h5, h6 {
     font-weight: 300;
     line-height: 1.25;
     color: $black;
 }
-h1 {
-    font-size: 36px;
-}
-h2 {
-    font-size: 28px;
-}
-h3 {
-    font-size: 22px;
-}
-h4 {
-    font-size: 18px;
-    font-weight: 600;
-}
-h5 {
-    font-size: 16px;
-    font-weight: 600;
-}
-h6 {
-    font-size: 14px;
-    font-weight: 600;
-}
+
+h1 { font-size: 36px; }
+h2 { font-size: 28px; }
+h3 { font-size: 22px; }
+h4 { font-size: 18px; font-weight: 600; }
+h5 { font-size: 16px; font-weight: 600; }
+h6 { font-size: 14px; font-weight: 600; }
+
 .strong {
     font-family: $metropolis-medium;
 }
+
 a {
     text-decoration: none;
     color: $blue;
     font-family: $metropolis-medium;
+    &:hover {
+        color: $brightblue;
+        text-decoration: underline;
+    }
 }
 
 summary {
   text-decoration: underline;
   color: $blue;
   cursor: pointer;
+  &:hover {
+      color: $brightblue;
+  }
 }
 
 hr {
@@ -76,13 +73,12 @@ hr {
     border-width: 1px 0 0;
     border-color: $lightgrey;
 }
-a:hover {
-    text-decoration: underline;
-}
+
 button {
     background-color: unset;
     border: none;
 }
+
 .button {
     color: $blue;
     font-size: 12px;
@@ -92,30 +88,41 @@ button {
     padding: 14px 40px;
     text-transform: uppercase;
     border: 1px solid $white;
+
     &.secondary {
         background-color: $blue;
         color: $white;
     }
+
     &.tertiary {
         background-color: unset;
         color: $white;
     }
+
+    &:hover {
+        color: $white;
+        background-color: $brightblue;
+        text-decoration: underline;
+    }
 }
-.button:hover {
-  color: $white;
-  background-color: $brightblue;
-  text-decoration: underline;
-}
+
 .section-link {
     color: #bbb;
     font-size: 20px;
+    &:hover {
+        color: $blue;
+        text-decoration: underline;
+    }
 }
+
 strong {
     font-family: $metropolis-medium;
 }
+
 .bg-grey {
     background-color: $lightgrey;
 }
+
 .green-text {
     color: $green;
 }
@@ -125,9 +132,11 @@ strong {
     grid-template-columns: 1fr 1fr 1fr 1fr;
     row-gap: 20px;
     column-gap: 15px;
+
     @include breakpoint(medium) {
         grid-template-columns: 1fr 1fr;
     }
+
     @include breakpoint(small) {
         grid-template-columns: 1fr;
     }
@@ -138,6 +147,7 @@ strong {
     grid-template-columns: 1fr 1fr 1fr;
     row-gap: 20px;
     column-gap: 20px;
+
     @include breakpoint(small) {
         grid-template-columns: 1fr;
     }
@@ -146,6 +156,7 @@ strong {
 .grid.two {
     display: grid;
     grid-template-columns: 1fr 1fr;
+
     @include breakpoint(small) {
         grid-template-columns: 1fr;
     }
@@ -155,7 +166,12 @@ code {
     background: #efefef;
     padding: 2px 4px;
     font-size: 85%;
+
+    &:hover {
+        background: #ddd;
+    }
 }
+
 pre {
     code {
         display: block;
@@ -163,14 +179,21 @@ pre {
         margin-bottom: 30px;
         overflow-x: auto;
         background: #f6f8fa;
+
+        &:hover {
+            background: #e1e4e8;
+        }
+
         &.language-bash, &.language-bash-plain {
             background: #202020;
             color: #d0d0d0;
+
             // Cannot see dark letters on dark bg
             span[style*="color:#000"] {
                 color: #d0d0d0 !important;
             }
         }
+
         &.language-yaml {
             // A bit harder to read italicized text
             span[style*="font-style:italic"] {
diff --git a/site/themes/carvel/assets/scss/_footer.scss b/site/themes/carvel/assets/scss/_footer.scss
index 7088cdd01..906146aff 100644
--- a/site/themes/carvel/assets/scss/_footer.scss
+++ b/site/themes/carvel/assets/scss/_footer.scss
@@ -21,6 +21,21 @@ footer {
             padding-right: 0px;
         }
     }
+
+    a {
+        color: $darkgrey;
+        font-weight: 300;
+        font-size: 12px;
+        font-family: $metropolis-light;
+        text-decoration: none;
+
+        &:hover {
+            color: darken($darkgrey, 15%); // Darken color on hover
+            font-weight: 400; // Adjust font weight on hover if needed
+            text-decoration: underline; // Add underline for hover state
+        }
+    }
+    
     .right-links {
         padding: 0px;
         li {
@@ -33,12 +48,18 @@ footer {
                 font-weight: 300;
                 font-size: 12px;
                 font-family: $metropolis-light;
+                text-decoration: none;
+
+                 &:hover {
+                    color: $blue; // Customize hover color for right-links
+                }
             }
         }
         .mobile {
             display: none;
         }
     }
+    
     .left-links {
         p {
             margin: 0px;
@@ -46,14 +67,23 @@ footer {
         .copywrite {
             font-size: 12px;
             padding-right: 10px;
-            a {
+           a {
                 font-size: 12px;
                 color: $darkgrey;
                 font-family: $metropolis-light;
+
+                &:hover {
+                    color: lighten($darkgrey, 10%); // Custom hover for copywrite links
+                    text-decoration: underline;
+                }
             }
         }
         a {
             vertical-align: middle;
+
+             &:hover {
+                color: $blue; // Global hover style for left-links
+            }
         }
         img {
             height: 46px;
@@ -74,6 +104,10 @@ footer {
             font-size: 12px;
             font-family: $metropolis-light;
             vertical-align: middle;
+
+            &:hover {
+                color: $blue; // Customize hover effect for bottom links
+            }
         }
         img {
             height: 30px;
@@ -112,4 +146,4 @@ footer {
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/site/themes/carvel/assets/scss/_header.scss b/site/themes/carvel/assets/scss/_header.scss
index 8221e41df..265f469d3 100644
--- a/site/themes/carvel/assets/scss/_header.scss
+++ b/site/themes/carvel/assets/scss/_header.scss
@@ -27,23 +27,33 @@ header {
         }
     }
     a {
-        color: $grey;
+        color: $grey; // Use a variable for color consistency
         font-weight: 300;
         font-size: 16px;
         font-family: $metropolis-light;
+        transition: all 0.3s ease; // Smooth transition for hover effects
+
         &.active {
             font-family: $metropolis-medium;
         }
     }
+    
+     // Updated hover effect for links
     a:hover {
-        color: $grey;
-        font-weight: 300;
-        font-family: $metropolis-light;
+        color: lighten($grey, 15%); // Make the text color lighter on hover
+        font-weight: 400; // Slightly increase font weight on hover
+        text-decoration: none; // Remove underline for a cleaner look
+        transform: scale(1.1); // Pop-up effect by scaling the link
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); // Subtle shadow for pop-up effect
+        background-color: lighten($grey, 40%); // Background box on hover
+        padding: 5px 10px; // Add padding for a boxed feel
+        border-radius: 5px; // Rounded corners for the hover effect
+
         &.active {
             font-family: $metropolis-medium;
         }
-        text-decoration: underline;
     }
+    
     li {
         list-style-type: none;
         display: inline;
@@ -182,10 +192,12 @@ header {
     }
 }
 
+// Hover effect for subproject links
 .subprojects-in-primary-nav {
     position: relative;
     padding-top: 10px;
     padding-bottom: 10px;
+
     ul {
         display: none;
         position: absolute;
@@ -195,15 +207,24 @@ header {
         z-index: 1;
         padding: 0;
         left: 0;
+        
         li {
             display: block;
             padding: 10px 15px;
             width: 150px;
+            transition: all 0.3s ease; // Smooth transition for sublinks
         }
     }
 }
+
 .subprojects-in-primary-nav:hover {
     ul {
         display: block;
     }
+
+    li:hover {
+        background-color: lighten($grey, 40%); // Background on hover
+        transform: scale(1.05); // Slight scale effect
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); // Subtle shadow
+    }
 }