diff --git a/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Basic_spec.js b/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Basic_spec.js
index 6ff56f0310..1718cd4de2 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Basic_spec.js
+++ b/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Basic_spec.js
@@ -777,27 +777,14 @@ describe("App Theming funtionality", function () {
       });
 
     //Change Shadow & verify
-    cy.get(".ads-v2-segmented-control-value-0").eq(2).click({ force: true });
-    cy.get(".ads-v2-segmented-control-value-0 div")
-      .eq(2)
-      .invoke("css", "box-shadow")
-      .then((boxshadow) => {
-        cy.get(".t--widget-button2 button").should(
-          "have.css",
-          "box-shadow",
-          boxshadow, //rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px
-        );
-        cy.get(widgetsPage.iconWidgetBtn).should(
-          "have.css",
-          "box-shadow",
-          "none",
-        );
-        cy.get(".t--widget-button1 button").should(
-          "have.css",
-          "box-shadow",
-          "none",
-        );
-      });
+    cy.contains(".ads-v2-segmented-control-value-0", "Large").click();
+
+    cy.get(widgetsPage.iconWidgetBtn).should("have.css", "box-shadow", "none");
+    cy.get(".t--widget-button1 button").should(
+      "have.css",
+      "box-shadow",
+      "none",
+    );
 
     cy.assertPageSave();
     cy.wait(2000);
@@ -1004,29 +991,15 @@ describe("App Theming funtionality", function () {
       });
 
     //Change Shadow & verify
-    cy.get(".ads-v2-segmented-control-value-0").eq(0).click({ force: true });
-    cy.get(".ads-v2-segmented-control-value-0 div")
-      .eq(0)
-      .invoke("css", "box-shadow")
-      .then((boxshadow) => {
-        cy.get(".t--widget-button1 button").should(
-          "have.css",
-          "box-shadow",
-          boxshadow, //rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px
-        );
-        cy.get(widgetsPage.iconWidgetBtn).should(
-          "have.css",
-          "box-shadow",
-          "none",
-        );
-        cy.get(".t--widget-button2 button").should(
-          "have.css",
-          "box-shadow",
-          //same value as previous box shadow selection
-          //since revertion is not possible for box shadow - hence this widget maintains the same value
-          "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
-        );
-      });
+    cy.contains(".ads-v2-segmented-control-value-0", "Small").click();
+    cy.get(widgetsPage.iconWidgetBtn).should("have.css", "box-shadow", "none");
+    cy.get(".t--widget-button2 button").should(
+      "have.css",
+      "box-shadow",
+      //same value as previous box shadow selection
+      //since revertion is not possible for box shadow - hence this widget maintains the same value
+      "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
+    );
 
     cy.assertPageSave();
 
diff --git a/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_Default_spec.js b/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_Default_spec.js
index f4d2d02eff..60cb014ab9 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_Default_spec.js
+++ b/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_Default_spec.js
@@ -40,10 +40,6 @@ describe("Theme validation for default data", function () {
     //Shadow validation
     //cy.contains("Shadow").click({ force: true });
     cy.wait(2000);
-    cy.shadowMouseover("none");
-    cy.shadowMouseover("S");
-    cy.shadowMouseover("M");
-    cy.shadowMouseover("L");
     cy.contains("Shadow").click({ force: true });
 
     //Font
diff --git a/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_FormWidget_spec.js b/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_FormWidget_spec.js
index 2d7b31e070..6b6267968a 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_FormWidget_spec.js
+++ b/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_FormWidget_spec.js
@@ -47,11 +47,6 @@ describe("Theme validation usecases", function () {
     cy.contains("Border").click({ force: true });
 
     //Shadow validation
-    //cy.contains("Shadow").click({ force: true });
-    cy.shadowMouseover("none");
-    cy.shadowMouseover("S");
-    cy.shadowMouseover("M");
-    cy.shadowMouseover("L");
     cy.xpath(theme.locators._boxShadow("L")).click({ force: true });
     cy.wait("@updateTheme").should(
       "have.nested.property",
diff --git a/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js b/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js
index 7260e963ab..35535438be 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js
+++ b/app/client/cypress/e2e/Regression/ClientSide/ThemingTests/Theme_MultiSelectWidget_spec.js
@@ -34,10 +34,6 @@ describe("Theme validation usecase for multi-select widget", function () {
     //Shadow validation
     //cy.contains("Shadow").click({ force: true });
     cy.wait(2000);
-    cy.shadowMouseover("none");
-    cy.shadowMouseover("S");
-    cy.shadowMouseover("M");
-    cy.shadowMouseover("L");
     cy.xpath(theme.locators._boxShadow("L")).click({ force: true });
     cy.wait("@updateTheme").should(
       "have.nested.property",
diff --git a/app/client/src/components/propertyControls/BoxShadowOptionsControl.tsx b/app/client/src/components/propertyControls/BoxShadowOptionsControl.tsx
index ea07504da9..fb674cdd34 100644
--- a/app/client/src/components/propertyControls/BoxShadowOptionsControl.tsx
+++ b/app/client/src/components/propertyControls/BoxShadowOptionsControl.tsx
@@ -2,8 +2,8 @@ import * as React from "react";
 
 import type { ControlData, ControlProps } from "./BaseControl";
 import BaseControl from "./BaseControl";
-import { Icon, SegmentedControl, Tooltip } from "design-system";
-import { boxShadowOptions } from "constants/ThemeConstants";
+import { Icon, SegmentedControl } from "design-system";
+import { boxShadowOptions, sizeMappings } from "constants/ThemeConstants";
 import type { DSEventDetail } from "utils/AppsmithUtils";
 import {
   DSEventTypes,
@@ -13,23 +13,13 @@ import {
 export interface BoxShadowOptionsControlProps extends ControlProps {
   propertyValue: string | undefined;
 }
-
 const options = Object.keys(boxShadowOptions).map((optionKey) => ({
-  label: (
-    <Tooltip content={optionKey} key={optionKey}>
-      {optionKey === "none" ? (
-        <div className="flex items-center justify-center w-5 h-5">
-          <Icon name="close-line" size="md" />
-        </div>
-      ) : (
-        <div
-          className="flex items-center justify-center w-5 h-5 bg-white"
-          style={{ boxShadow: boxShadowOptions[optionKey] }}
-        />
-      )}
-    </Tooltip>
-  ),
-
+  label:
+    optionKey === "none" ? (
+      <Icon name="close-line" size="md" />
+    ) : (
+      sizeMappings[optionKey]
+    ),
   value: boxShadowOptions[optionKey],
 }));
 
diff --git a/app/client/src/constants/ThemeConstants.tsx b/app/client/src/constants/ThemeConstants.tsx
index bade37be1f..7369a5e549 100644
--- a/app/client/src/constants/ThemeConstants.tsx
+++ b/app/client/src/constants/ThemeConstants.tsx
@@ -143,6 +143,15 @@ export const boxShadowOptions: Record<string, string> = {
   L: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
 };
 
+/**
+ * box shadow size mapping for the size name to displayed in property pane
+ */
+export const sizeMappings: Record<string, string> = {
+  S: "Small",
+  M: "Medium",
+  L: "Large",
+};
+
 export const invertedBoxShadowOptions: Record<string, string> =
   invert(boxShadowOptions);
 
diff --git a/app/client/src/pages/Editor/ThemePropertyPane/controls/ThemeShadowControl.tsx b/app/client/src/pages/Editor/ThemePropertyPane/controls/ThemeShadowControl.tsx
index 51709a6b4e..498976e7bf 100644
--- a/app/client/src/pages/Editor/ThemePropertyPane/controls/ThemeShadowControl.tsx
+++ b/app/client/src/pages/Editor/ThemePropertyPane/controls/ThemeShadowControl.tsx
@@ -1,7 +1,10 @@
 import React, { useCallback } from "react";
 import type { AppTheme } from "entities/AppTheming";
-import { Icon, Tooltip } from "design-system";
-import { invertedBoxShadowOptions } from "constants/ThemeConstants";
+import { Icon } from "design-system";
+import {
+  invertedBoxShadowOptions,
+  sizeMappings,
+} from "constants/ThemeConstants";
 import { SegmentedControl } from "design-system";
 
 interface ThemeBoxShadowControlProps {
@@ -41,20 +44,12 @@ function ThemeBoxShadowControl(props: ThemeBoxShadowControlProps) {
     : "";
 
   const buttonGroupOptions = Object.keys(options).map((optionKey) => ({
-    label: (
-      <Tooltip content={optionKey} key={optionKey}>
-        {optionKey === "none" ? (
-          <div className="flex items-center justify-center w-5 h-5">
-            <Icon name="close-line" size="md" />
-          </div>
-        ) : (
-          <div
-            className="flex items-center justify-center w-5 h-5 bg-white"
-            style={{ boxShadow: options[optionKey] }}
-          />
-        )}
-      </Tooltip>
-    ),
+    label:
+      optionKey === "none" ? (
+        <Icon name="close-line" size="md" />
+      ) : (
+        sizeMappings[optionKey]
+      ),
     value: optionKey,
   }));