diff --git a/src/components/GalleryImage/GalleryImage.js b/src/components/GalleryImage/GalleryImage.js
index b3bcb74..98f266a 100644
--- a/src/components/GalleryImage/GalleryImage.js
+++ b/src/components/GalleryImage/GalleryImage.js
@@ -150,7 +150,7 @@ const GalleryImage = ({ data, location: { state } }) => {
       <Helmet>
         <title>{name} - Gallery | Chuck Dries</title>
         <body
-          className="text-vibrant-light bg-vibrant-dark"
+          className="text-vibrant-light bg-vibrant-dark transition-colors"
           style={getHelmetSafeBodyStyle(vibrant)}
         />
       </Helmet>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2bd4f41..a1c5e58 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -71,7 +71,7 @@ const IndexPage = ({
       <Helmet>
         <title>Chuck Dries</title>
         <body
-          className="bg-white"
+          className="bg-white transition-colors"
           // @ts-ignore
           style={getHelmetSafeBodyStyle({
             Muted: [0, 0, 0],
diff --git a/src/pages/photogallery.tsx b/src/pages/photogallery.tsx
index d22c493..e6f750d 100644
--- a/src/pages/photogallery.tsx
+++ b/src/pages/photogallery.tsx
@@ -164,7 +164,7 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
       <Helmet>
         <title>Photo Gallery | Chuck Dries</title>
         <body
-          className="bg-white"
+          className="bg-white transition-color"
           // @ts-ignore
           style={getHelmetSafeBodyStyle({
             Muted: [0, 0, 0],
