diff --git a/src/sections/Meshmap/meshmap-catalog.js b/src/sections/Meshmap/meshmap-catalog.js
index dbc17ec04a6a..52004e7b13d7 100644
--- a/src/sections/Meshmap/meshmap-catalog.js
+++ b/src/sections/Meshmap/meshmap-catalog.js
@@ -120,6 +120,8 @@ box-shadow: 0px 6px 5px 0px rgb(0 0 0 / 25%);
     max-width:5.6rem;
     display:block;
     margin: 0 auto;
+    border: 2px solid ${props => props.theme.borderColorWhiteToTransparent};
+    transition: border-color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
   }
   p{
     text-align:center;
diff --git a/src/theme/app/themeStyles.js b/src/theme/app/themeStyles.js
index f4f8e83b9af9..f20b8f4606b4 100644
--- a/src/theme/app/themeStyles.js
+++ b/src/theme/app/themeStyles.js
@@ -218,7 +218,8 @@ const lighttheme = {
   bannerDescriptionGradient: "linear-gradient(122.25deg, #00B39F 26.92%, #195E4A 46.51%, #1F787D 74.85%)",
   borderGradientTransitionBefore: "linear-gradient(to right bottom, #00b39f, #fff 110%)",
   borderGradientTransitionAfter: "linear-gradient(to left top, #00b39f, #fff 120%)",
-
+  borderColorWhiteToTransparent: "transparent",
+  
   //DarkTheme
   DarkTheme: false,
 
@@ -449,6 +450,9 @@ export const darktheme = {
   bannerDescriptionGradient: "#121212",
   borderGradientTransitionBefore: "linear-gradient(to right top, #00b39f, #121212 80%)",
   borderGradientTransitionAfter: "linear-gradient(to left top, #00b39f, #121212 100%)",
+
+  borderColorWhiteToTransparent: "white",
+
   //DarkTheme
   DarkTheme: true,