diff --git a/apps/designer/app/designer/features/style-panel/shared/property-name.tsx b/apps/designer/app/designer/features/style-panel/shared/property-name.tsx
index b9b555348a..d135085149 100644
--- a/apps/designer/app/designer/features/style-panel/shared/property-name.tsx
+++ b/apps/designer/app/designer/features/style-panel/shared/property-name.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import type { StyleProperty } from "@webstudio-is/css-data";
+import { toValue } from "@webstudio-is/css-engine";
 import {
   Button,
   Flex,
@@ -14,8 +15,109 @@ import {
   Separator,
 } from "@webstudio-is/design-system";
 import { UndoIcon } from "@webstudio-is/icons";
+import { utils } from "@webstudio-is/project";
 import { isFeatureEnabled } from "~/shared/feature-flags";
-import { getStyleSource, StyleInfo } from "./style-info";
+import { useBreakpoints, useRootInstance } from "~/shared/nano-states";
+import { type StyleInfo, type StyleSource, getStyleSource } from "./style-info";
+
+const PropertyPopoverContent = ({
+  properties,
+  style,
+  styleSource,
+  onReset,
+}: {
+  properties: StyleProperty[];
+  style: StyleInfo;
+  styleSource: StyleSource;
+  onReset: () => void;
+}) => {
+  const [breakpoints] = useBreakpoints();
+  const [rootInstance] = useRootInstance();
+
+  if (styleSource === "local") {
+    return (
+      <>
+        <Flex align="start" css={{ px: "$spacing$4", py: "$spacing$3" }}>
+          <Button onClick={onReset}>
+            <UndoIcon /> &nbsp; Reset
+          </Button>
+        </Flex>
+        <Separator />
+        <Box css={{ px: "$spacing$4", py: "$spacing$3" }}>
+          {properties.map((property) => {
+            const styleValueInfo = style[property];
+
+            if (styleValueInfo?.cascaded) {
+              const { value, breakpointId } = styleValueInfo.cascaded;
+              const breakpoint = breakpoints.find(
+                (item) => item.id === breakpointId
+              );
+              return (
+                <Text key={property} color="hint">
+                  Resetting will change {property} to cascaded {toValue(value)}{" "}
+                  from {breakpoint?.label}
+                </Text>
+              );
+            }
+
+            if (styleValueInfo?.inherited) {
+              const { value, instanceId } = styleValueInfo.inherited;
+              const instance =
+                rootInstance === undefined
+                  ? undefined
+                  : utils.tree.findInstanceById(rootInstance, instanceId);
+              return (
+                <Text key={property} color="hint">
+                  Resetting will change {property} to inherited {toValue(value)}{" "}
+                  from {instance?.component}
+                </Text>
+              );
+            }
+
+            return (
+              <Text key={property} color="hint">
+                Resetting will change to initial value
+              </Text>
+            );
+          })}
+        </Box>
+      </>
+    );
+  }
+
+  return (
+    <Box css={{ px: "$spacing$4", py: "$spacing$3" }}>
+      {properties.map((property) => {
+        const styleValueInfo = style[property];
+
+        if (styleValueInfo?.cascaded) {
+          const { breakpointId } = styleValueInfo.cascaded;
+          const breakpoint = breakpoints.find(
+            (item) => item.id === breakpointId
+          );
+          return (
+            <Text key={property} color="hint">
+              {property} value is cascaded from {breakpoint?.label}
+            </Text>
+          );
+        }
+
+        if (styleValueInfo?.inherited) {
+          const { instanceId } = styleValueInfo.inherited;
+          const instance =
+            rootInstance === undefined
+              ? undefined
+              : utils.tree.findInstanceById(rootInstance, instanceId);
+          return (
+            <Text key={property} color="hint">
+              {property} value is inherited from {instance?.component}
+            </Text>
+          );
+        }
+      })}
+    </Box>
+  );
+};
 
 type PropertyNameProps = {
   style: StyleInfo;
@@ -25,18 +127,19 @@ type PropertyNameProps = {
 };
 
 export const PropertyName = ({
-  style: currentStyle,
+  style,
   property,
   label,
   onReset,
 }: PropertyNameProps) => {
   const properties = Array.isArray(property) ? property : [property];
   const styleSource = getStyleSource(
-    ...properties.map((property) => currentStyle[property])
+    ...properties.map((property) => style[property])
   );
   const [isOpen, setIsOpen] = useState(false);
   const isPopoverEnabled =
-    isFeatureEnabled("propertyReset") && styleSource === "local";
+    isFeatureEnabled("propertyReset") &&
+    (styleSource === "local" || styleSource === "remote");
 
   const labelElement = (
     <Label
@@ -71,17 +174,12 @@ export const PropertyName = ({
           </PopoverTrigger>
           <PopoverPortal>
             <PopoverContent align="start" onClick={() => setIsOpen(false)}>
-              <Flex align="start" css={{ px: "$spacing$4", py: "$spacing$3" }}>
-                <Button onClick={onReset}>
-                  <UndoIcon /> &nbsp; Reset
-                </Button>
-              </Flex>
-              <Separator />
-              <Box css={{ px: "$spacing$4", py: "$spacing$3" }}>
-                <Text color="hint">
-                  Resetting will revert to initial or inherited value
-                </Text>
-              </Box>
+              <PropertyPopoverContent
+                properties={properties}
+                style={style}
+                styleSource={styleSource}
+                onReset={onReset}
+              />
             </PopoverContent>
           </PopoverPortal>
         </Popover>