diff --git a/components/BarGraph.module.css b/components/BarGraph.module.css
index af16d7f..2e426fe 100644
--- a/components/BarGraph.module.css
+++ b/components/BarGraph.module.css
@@ -1,9 +1,15 @@
 .barBackground {
   fill: var(--card-background);
+  transition: fill 0.5s ease-out;
 }
 
 .bar {
   fill: var(--primary-accent-light);
+  transition: fill 0.5s ease-out;
+}
+
+.barGroup {
+  transition: fill 0.5s ease-out;
 }
 
 .barGroup:hover .bar {
diff --git a/components/Boxplot.module.css b/components/Boxplot.module.css
index 66dda09..b77fd93 100644
--- a/components/Boxplot.module.css
+++ b/components/Boxplot.module.css
@@ -1,5 +1,6 @@
 .boxplot {
   fill: var(--primary-accent-light);
+  transition: fill 0.5s ease-out;
 }
 
 .boxplot:hover {
diff --git a/components/GroupedBarGraph.module.css b/components/GroupedBarGraph.module.css
index e8b1611..43b5208 100644
--- a/components/GroupedBarGraph.module.css
+++ b/components/GroupedBarGraph.module.css
@@ -19,6 +19,10 @@
   fill: var(--label);
 }
 
+.bar {
+  transition: fill 0.5s ease-out;
+}
+
 .legend {
   display: flex;
   margin: calc(16rem / 16);
diff --git a/components/GroupedBarGraph.tsx b/components/GroupedBarGraph.tsx
index 4ea148a..e437137 100644
--- a/components/GroupedBarGraph.tsx
+++ b/components/GroupedBarGraph.tsx
@@ -603,6 +603,7 @@ function HoverableBar(props: HoverableBarProps) {
       }}
     >
       <Bar
+        className={styles.bar}
         onMouseMove={onMouseMove}
         onMouseOut={onMouseOut}
         x={bar.x}
diff --git a/components/Header.module.css b/components/Header.module.css
index 68d8069..bc1a276 100644
--- a/components/Header.module.css
+++ b/components/Header.module.css
@@ -79,6 +79,7 @@
 .menuIcon {
   background: none;
   border: none;
+  transition: opacity 0.5s ease-out;
 }
 
 .menuIcon:hover {
@@ -115,6 +116,7 @@
   margin-left: calc(20rem / 16);
   /* transparent border fixes weird coloring on the border in some browsers */
   border: calc(1rem / 16) solid transparent;
+  transition: background-color 0.25s ease-out;
 }
 
 .closeMenuButton:hover {
diff --git a/components/LineGraph.module.css b/components/LineGraph.module.css
index a7071cc..0a59a5b 100644
--- a/components/LineGraph.module.css
+++ b/components/LineGraph.module.css
@@ -4,10 +4,14 @@
   fill: var(--label);
 }
 
-.line:hover {
-  filter: drop-shadow(0 0 calc(4rem / 16) var(--primary-accent));
+.line {
+  transition: filter 0.5s ease-out;
 }
 
+.line:hover {
+  filter: drop-shadow(0 0 calc(4rem / 16) var(--primary-accent));
+  transition: filter 0.5s ease-out;
+}
 
 .wrapper {
   display: flex;
diff --git a/components/PieChart.module.css b/components/PieChart.module.css
index b209dca..0dc46e9 100644
--- a/components/PieChart.module.css
+++ b/components/PieChart.module.css
@@ -4,6 +4,7 @@
   stroke-width: 1px;
   stroke-dasharray: 0;
   stroke-linecap: round;
+  transition: fill 0.5s ease-out;
 }
 
 .labelPath {
diff --git a/components/Sections.module.css b/components/Sections.module.css
index 65a1420..4186e14 100644
--- a/components/Sections.module.css
+++ b/components/Sections.module.css
@@ -50,13 +50,29 @@
   color: var(--primary-text);
 }
 
-.linkName:hover {
-  text-decoration: underline;
+.linkName:after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: calc(1rem / 16);
+  bottom: 0;
+  left: 0;
+  background-color: var(--primary-text);
+  cursor: pointer;
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
+}
+
+.linkName:hover:after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
 }
 
 .linkName {
   margin: 0;
   display: inline;
+  position: relative;
 }
 
 @media screen and (max-width: 900px) {
@@ -67,4 +83,5 @@
   .sections h1 {
     text-align: left;
   }
+
 }
\ No newline at end of file
diff --git a/components/StackedBarGraph.module.css b/components/StackedBarGraph.module.css
index 38856a2..249b73f 100644
--- a/components/StackedBarGraph.module.css
+++ b/components/StackedBarGraph.module.css
@@ -2,8 +2,13 @@
   position: relative;
 }
 
+.barStack {
+  transition: filter 0.5s ease-out;
+}
+
 .barStack:hover {
   filter: drop-shadow(0 0 calc(4rem / 16) var(--label));
+  transition: filter 0.5s ease-out;
 }
 
 .legend {
diff --git a/components/WordCloud.module.css b/components/WordCloud.module.css
index a6059ae..78eb29b 100644
--- a/components/WordCloud.module.css
+++ b/components/WordCloud.module.css
@@ -2,4 +2,8 @@
   text-shadow: var(--primary-accent) 0 0 calc(20rem / 16);
   text-anchor: "middle";
   cursor: default;
+}
+
+.word {
+  transition: text-shadow 0.25s ease-out;
 }
\ No newline at end of file
diff --git a/pages/_app.css b/pages/_app.css
index b287870..b4d2c95 100644
--- a/pages/_app.css
+++ b/pages/_app.css
@@ -120,6 +120,7 @@ p {
 a {
   color: var(--link);
   text-decoration: none;
+  transition: color 0.5s ease-out;
 }
 
 a:hover {