diff --git a/src/components/Navigation/KebabMenu/index.tsx b/src/components/Navigation/KebabMenu/index.tsx
index ba7f6c7fb..6b7c52a15 100644
--- a/src/components/Navigation/KebabMenu/index.tsx
+++ b/src/components/Navigation/KebabMenu/index.tsx
@@ -22,9 +22,11 @@ import { KebabMenuProps } from "./types";
 
 export const KebabMenu = ({ onClose }: KebabMenuProps) => {
   const { backendInfo, digmaStatus, environment } = useConfigSelector();
-  const isDigmaMetricsEnabled =
+  const isDigmaMetricsVisible =
     backendInfo?.centralize &&
     getFeatureFlagValue(backendInfo, FeatureFlag.IS_METRICS_REPORT_ENABLED);
+  const isDigmaMetricsEnabled =
+    isDigmaMetricsVisible && environment?.type === "Public";
 
   const handleOnboardingClick = () => {
     sendUserActionTrackingEvent(trackingEvents.ONBOARDING_LINK_CLICKED);
@@ -129,12 +131,16 @@ export const KebabMenu = ({ onClose }: KebabMenuProps) => {
     });
   }
 
-  if (isDigmaMetricsEnabled) {
+  if (isDigmaMetricsVisible) {
     items.push({
       id: "metrics",
       label: "Digma Metrics",
-      icon: <MetricsIcon size={16} color={"currentColor"} />,
-      onClick: handleReportClick
+      icon: <MetricsIcon color={"currentColor"} />,
+      onClick: handleReportClick,
+      tooltip: !isDigmaMetricsEnabled
+        ? "Available for CI/Prod environments only"
+        : undefined,
+      isDisabled: !isDigmaMetricsEnabled
     });
   }
 
diff --git a/src/components/Navigation/common/MenuList/index.tsx b/src/components/Navigation/common/MenuList/index.tsx
index f44d6ccb2..6bdbc40b5 100644
--- a/src/components/Navigation/common/MenuList/index.tsx
+++ b/src/components/Navigation/common/MenuList/index.tsx
@@ -30,10 +30,17 @@ export const MenuList = ({
           return item.customContent ? (
             <li key={item.id}>{item.customContent}</li>
           ) : (
-            <Tooltip title={item.label} key={item.id}>
-              <s.ListItem $isHighlighted={isHighlighted} onClick={item.onClick}>
+            <Tooltip title={item.tooltip ?? item.label} key={item.id}>
+              <s.ListItem
+                $isHighlighted={isHighlighted}
+                onClick={item.onClick}
+                $isDisabled={item.isDisabled}
+              >
                 {item.icon && (
-                  <s.ListItemIconContainer $isHighlighted={isHighlighted}>
+                  <s.ListItemIconContainer
+                    $isHighlighted={isHighlighted}
+                    $isDisabled={item.isDisabled}
+                  >
                     {item.icon}
                   </s.ListItemIconContainer>
                 )}
diff --git a/src/components/Navigation/common/MenuList/styles.ts b/src/components/Navigation/common/MenuList/styles.ts
index 2779a35f2..bf226a020 100644
--- a/src/components/Navigation/common/MenuList/styles.ts
+++ b/src/components/Navigation/common/MenuList/styles.ts
@@ -58,19 +58,23 @@ export const ListItem = styled.li<ListItemProps>`
 
 export const ListItemIconContainer = styled.div<ListItemIconContainerProps>`
   display: flex;
-  color: ${({ theme, $isHighlighted }) =>
-    $isHighlighted
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: ${({ theme, $isHighlighted, $isDisabled }) =>
+    $isDisabled
+      ? theme.colors.v3.icon.disabled
+      : $isHighlighted
       ? theme.colors.v3.icon.brandTertiary
       : theme.colors.v3.icon.tertiary};
 
-  &:disabled {
-    color: ${({ theme }) => theme.colors.v3.icon.disabled};
-  }
-
-  &:hover:enabled,
-  &:active:enabled {
-    color: ${({ theme, $isHighlighted }) =>
-      $isHighlighted
+  &:hover,
+  &:active {
+    color: ${({ theme, $isHighlighted, $isDisabled }) =>
+      $isDisabled
+        ? theme.colors.v3.icon.disabled
+        : $isHighlighted
         ? theme.colors.v3.icon.brandTertiary
         : theme.colors.v3.icon.primary};
   }
diff --git a/src/components/Navigation/common/MenuList/types.ts b/src/components/Navigation/common/MenuList/types.ts
index 6f16179db..1a16b9ef6 100644
--- a/src/components/Navigation/common/MenuList/types.ts
+++ b/src/components/Navigation/common/MenuList/types.ts
@@ -6,6 +6,7 @@ export interface MenuListProps {
   showGroupDividers?: boolean;
   highlightSelected?: boolean;
   header?: ReactNode;
+  isDisabled?: boolean;
 }
 
 export interface ListItemProps {
@@ -15,6 +16,7 @@ export interface ListItemProps {
 
 export interface ListItemIconContainerProps {
   $isHighlighted?: boolean;
+  $isDisabled?: boolean;
 }
 
 export interface MenuItem {
@@ -26,4 +28,5 @@ export interface MenuItem {
   isDisabled?: boolean;
   groupName?: string;
   isSelected?: boolean;
+  tooltip?: string;
 }
diff --git a/src/components/common/icons/12px/MetricsIcon.tsx b/src/components/common/icons/12px/MetricsIcon.tsx
index c1b0dc661..2c7349ae1 100644
--- a/src/components/common/icons/12px/MetricsIcon.tsx
+++ b/src/components/common/icons/12px/MetricsIcon.tsx
@@ -6,7 +6,7 @@ const MetricsIconComponent = (props: IconProps) => {
   const { size, color } = useIconProps(props);
 
   return (
-    <svg width={size} height={size} fill="none">
+    <svg width={size} height={size} fill="none" viewBox="0 0 12 12">
       <path
         stroke={color}
         strokeLinecap="round"