diff --git a/styles/card.module.css b/styles/card.module.css
index d2bd0a3..883ddc7 100644
--- a/styles/card.module.css
+++ b/styles/card.module.css
@@ -7,6 +7,7 @@
 	scale: stretch;
 	border-radius: 0;
 	filter: var(--theme-ui-colors-cardFilter);
+	transition: filter 0.3s ease-in-out;
 }
 
 .card {
@@ -19,6 +20,7 @@
 	overflow: hidden;
 	margin: 100px;
 	filter: var(--theme-ui-colors-cardFilter);
+	transition: filter 0.3s ease-in-out;
 }
 
 
@@ -34,6 +36,7 @@
 	padding-bottom: 10px;
 	border-radius: 17px;
 	background-color: var(--theme-ui-colors-cardBackground);
+	transition: background-color 0.3s ease-in-out;
 	backdrop-filter: blur(7px);
 }
 
@@ -55,6 +58,7 @@
 	line-height: 24px;
 	max-lines: 2;
 	color: var(--theme-ui-colors-text);
+	transition: color 0.3s ease-in-out;
 }
 
 .image {
@@ -67,6 +71,7 @@
 	padding-inline: 10px;
 	text-align: center;
 	color: var(--theme-ui-colors-text);
+	transition: color 0.3s ease-in-out;
 }
 
 
diff --git a/styles/globals.css b/styles/globals.css
index 175239c..1b39e04 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -10,13 +10,15 @@
 
 html {
   background-color: var(--theme-ui-colors-background);
+	transition: background-color 0.3s ease-in-out;
 }
 
 
 a {
   text-decoration: none;
   transition: 0.5s ease-in-out;
-  color: var(--theme-ui-colors-primary)
+  color: var(--theme-ui-colors-primary);
+	transition: color 0.3s ease-in-out;
 }
 
 * {
@@ -30,6 +32,7 @@
   font-weight: bold;
   color: #F27878;
   background-color: var(--theme-ui-colors-hint);
+	transition: background-color 0.3s ease-in-out;
   padding: 2px;
   font-size: 105%;
   border-radius: 5px;
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 {
diff --git a/styles/navbar.module.css b/styles/navbar.module.css
index 51d6784..5ad34ec 100644
--- a/styles/navbar.module.css
+++ b/styles/navbar.module.css
@@ -24,6 +24,7 @@
     align-items: center;
 
     background-color: var(--theme-ui-colors-cardBackground);
+    transition: background-color 0.3s ease-in-out;
     backdrop-filter: blur(7px), brightness(0.1);
     border-radius: 32px;
 
@@ -47,6 +48,13 @@
     width: 50px;
     margin-bottom: 5px;
     cursor: pointer;
+    display: block;
+}
+
+.ThemeChangeButton {
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .containerOpen {
diff --git a/styles/sectionheading.module.css b/styles/sectionheading.module.css
index 5b469af..097d4ab 100644
--- a/styles/sectionheading.module.css
+++ b/styles/sectionheading.module.css
@@ -2,6 +2,7 @@
     width: 100%;
     font-size: max(2em, 4vw);
     color: var(--theme-ui-colors-text);
+    transition: color 0.3s ease-in-out;
     font-weight: lighter;
     text-align: center;
     word-break: break-all;
diff --git a/styles/subheading.module.css b/styles/subheading.module.css
index c24926c..ca71918 100644
--- a/styles/subheading.module.css
+++ b/styles/subheading.module.css
@@ -2,6 +2,7 @@
     width: 100%;
     font-size: max(2em, 2vw);
     color: var(--theme-ui-colors-text);
+    transition: color 0.3s ease-in-out;
     font-weight: lighter;
     text-align: center;
     word-break: break-word;