diff --git a/src/app/App.js b/src/app/App.js
index bbcdfd0..b48148d 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -17,6 +17,7 @@ const theme = {
     global: ({ colorMode, ...rest }) => ({
       ...defaultTheme.styles.global({ colorMode, ...rest }),
       color: colorMode === "light" ? "green.800" : "green.50",
+      transition: "all 0.25s",
     }),
   },
 };
diff --git a/src/app/components/SpeciesColorPicker.js b/src/app/components/SpeciesColorPicker.js
index 2f56ad4..40a74ef 100644
--- a/src/app/components/SpeciesColorPicker.js
+++ b/src/app/components/SpeciesColorPicker.js
@@ -80,6 +80,7 @@ function SpeciesColorPicker({
         borderColor={borderColor}
         boxShadow="md"
         width="auto"
+        transition="all 0.25s"
         _hover={{
           borderColor: "green.400",
         }}