diff --git a/app/client/src/pages/AppViewer/utils.ts b/app/client/src/pages/AppViewer/utils.ts
index a65626b8d3..f55878f1ef 100644
--- a/app/client/src/pages/AppViewer/utils.ts
+++ b/app/client/src/pages/AppViewer/utils.ts
@@ -3,7 +3,7 @@ import { NAVIGATION_SETTINGS } from "constants/AppConstants";
 import { Colors } from "constants/Colors";
 import tinycolor from "tinycolor2";
 import {
-  calulateHoverColor,
+  calculateHoverColor,
   getComplementaryGrayscaleColor,
   isLightColor,
 } from "widgets/WidgetUtils";
@@ -30,7 +30,7 @@ export const getMenuItemBackgroundColorWhenActive = (
       }
     }
     case NAVIGATION_SETTINGS.COLOR_STYLE.THEME: {
-      return calulateHoverColor(color);
+      return calculateHoverColor(color);
     }
   }
 };
@@ -44,7 +44,7 @@ export const getMenuItemBackgroundColorOnHover = (
   if (navColorStyle === NAVIGATION_SETTINGS.COLOR_STYLE.LIGHT) {
     return "var(--ads-v2-color-bg-subtle)";
   } else if (navColorStyle === NAVIGATION_SETTINGS.COLOR_STYLE.THEME) {
-    return tinycolor(calulateHoverColor(color)).toHexString();
+    return tinycolor(calculateHoverColor(color)).toHexString();
   }
 };
 
@@ -136,7 +136,7 @@ export const getSignInButtonStyles = (
     styles.color = isLightColor(color) ? Colors.WHITE : color;
   }
 
-  styles.backgroundOnHover = calulateHoverColor(styles.background, false);
+  styles.backgroundOnHover = calculateHoverColor(styles.background, false);
 
   return styles;
 };
diff --git a/app/client/src/widgets/WidgetUtils.ts b/app/client/src/widgets/WidgetUtils.ts
index 01e5323a7b..9acf123c4c 100644
--- a/app/client/src/widgets/WidgetUtils.ts
+++ b/app/client/src/widgets/WidgetUtils.ts
@@ -142,17 +142,17 @@ export const getCustomHoverColor = (
   switch (buttonVariant) {
     case ButtonVariantTypes.SECONDARY:
       return backgroundColor
-        ? calulateHoverColor(backgroundColor, true)
+        ? calculateHoverColor(backgroundColor, true)
         : theme.colors.button.primary.secondary.hoverColor;
 
     case ButtonVariantTypes.TERTIARY:
       return backgroundColor
-        ? calulateHoverColor(backgroundColor, true)
+        ? calculateHoverColor(backgroundColor, true)
         : theme.colors.button.primary.tertiary.hoverColor;
 
     default:
       return backgroundColor
-        ? calulateHoverColor(backgroundColor, false)
+        ? calculateHoverColor(backgroundColor, false)
         : theme.colors.button.primary.primary.hoverColor;
   }
 };
@@ -175,7 +175,7 @@ export const getCustomHoverColor = (
  *
  * @returns An RGB string (in case of transparent backgrounds) or a HSL string (in case of solid backgrounds).
  */
-export const calulateHoverColor = (
+export const calculateHoverColor = (
   backgroundColor: string,
   hasTransparentBackground?: boolean,
 ) => {