diff --git a/frontend/src/components/common/Label.stories/DateLabel.stories.tsx b/frontend/src/components/common/Label.stories/DateLabel.stories.tsx
new file mode 100644
index 00000000000..f69b4aee637
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/DateLabel.stories.tsx
@@ -0,0 +1,104 @@
+/*
+ * Copyright 2025 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Box } from '@mui/material';
+import { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+import { getTestDate } from '../../../helpers/testHelpers';
+import { TestContext } from '../../../test';
+import { DateLabel, DateLabelProps } from '../Label';
+
+const baseDate = getTestDate();
+const oneHourAgo = new Date(baseDate.getTime() - 60 * 60 * 1000);
+const twoDaysAgo = new Date(baseDate.getTime() - 2 * 24 * 60 * 60 * 1000);
+const sixtyDaysAgo = new Date(baseDate.getTime() - 60 * 24 * 60 * 60 * 1000);
+
+export default {
+  title: 'Labels/DateLabel',
+  component: DateLabel,
+  decorators: [
+    Story => (
+      <TestContext>
+        <Box sx={{ padding: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <Story />
+        </Box>
+      </TestContext>
+    ),
+  ],
+  argTypes: {
+    date: {
+      control: 'date',
+      description: 'The date to display. Can be a Date object, string, or timestamp number.',
+    },
+    format: {
+      control: 'radio',
+      options: ['brief', 'mini', undefined],
+      description:
+        'The format for displaying the time ago text (e.g., "1 hour ago" vs "1h"). Defaults to brief.',
+    },
+    iconProps: {
+      control: 'object',
+      description: 'Props to pass to the calendar Icon component (Iconify).',
+    },
+  },
+} as Meta<typeof DateLabel>;
+
+const Template: StoryFn<DateLabelProps> = args => <DateLabel {...args} />;
+
+export const RecentBrief = Template.bind({});
+RecentBrief.args = {
+  date: oneHourAgo.toISOString(),
+  format: 'brief',
+};
+RecentBrief.storyName = 'One Hour Ago (Brief)';
+
+export const RecentMini = Template.bind({});
+RecentMini.args = {
+  date: oneHourAgo.toISOString(),
+  format: 'mini',
+};
+RecentMini.storyName = 'One Hour Ago (Mini)';
+
+export const OlderBrief = Template.bind({});
+OlderBrief.args = {
+  date: twoDaysAgo.toISOString(),
+  format: 'brief',
+};
+OlderBrief.storyName = 'Two Days Ago (Brief)';
+
+export const MuchOlderMiniTimestamp = Template.bind({});
+MuchOlderMiniTimestamp.args = {
+  date: sixtyDaysAgo.getTime(),
+  format: 'mini',
+};
+MuchOlderMiniTimestamp.storyName = 'Sixty Days Ago (Mini, Timestamp Input)';
+
+export const WithCustomIconProps = Template.bind({});
+WithCustomIconProps.args = {
+  date: baseDate.toISOString(),
+  iconProps: {
+    color: 'green',
+    width: '20px',
+    height: '20px',
+  },
+};
+WithCustomIconProps.storyName = 'With Custom Icon Props';
+
+export const DefaultFormat = Template.bind({});
+DefaultFormat.args = {
+  date: oneHourAgo.toISOString(),
+};
+DefaultFormat.storyName = 'Default Format (Should be Brief)';
diff --git a/frontend/src/components/common/Label.stories/HeaderLabel.stories.tsx b/frontend/src/components/common/Label.stories/HeaderLabel.stories.tsx
index 42ef648659c..79b65881d2e 100644
--- a/frontend/src/components/common/Label.stories/HeaderLabel.stories.tsx
+++ b/frontend/src/components/common/Label.stories/HeaderLabel.stories.tsx
@@ -16,24 +16,57 @@
 
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
-import { HeaderLabel as HeaderLabelComponent, HeaderLabelProps } from '../Label';
+import { TestContext } from '../../../test';
+import { HeaderLabel, HeaderLabelProps } from '../Label';
 
 export default {
-  title: 'Label/HeaderLabel',
-  component: HeaderLabelComponent,
-  argTypes: {},
-} as Meta;
+  title: 'Labels/HeaderLabel',
+  component: HeaderLabel,
+  decorators: [
+    Story => (
+      <TestContext>
+        <Story />
+      </TestContext>
+    ),
+  ],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'The main label text (typically smaller, above value).',
+    },
+    value: { control: 'text', description: 'The prominent value text (typically larger).' },
+    tooltip: {
+      control: 'text',
+      description: 'Optional tooltip text to show on hover of the info icon.',
+    },
+  },
+} as Meta<typeof HeaderLabel>;
 
-const Template: StoryFn<HeaderLabelProps> = args => <HeaderLabelComponent {...args} />;
+const Template: StoryFn<HeaderLabelProps> = args => <HeaderLabel {...args} />;
 
-export const HeaderLabel = Template.bind({});
-HeaderLabel.args = {
-  value: 'value',
-  label: 'name',
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Uptime',
+  value: '25 days',
 };
-export const HeaderLabelToolTip = Template.bind({});
-HeaderLabelToolTip.args = {
-  value: 'value',
-  label: 'name',
-  tooltip: 'tooltip',
+Default.storyName = 'Basic Header Label';
+
+export const WithTooltip = Template.bind({});
+WithTooltip.args = {
+  label: 'Active Pods',
+  value: '120',
+  tooltip: 'Number of currently active pods in the cluster.',
+};
+WithTooltip.storyName = 'With Tooltip';
+
+export const NumericValue = Template.bind({});
+NumericValue.args = {
+  label: 'CPU Usage',
+  value: '75%',
+};
+
+export const ShortLabelAndValue = Template.bind({});
+ShortLabelAndValue.args = {
+  label: 'Nodes',
+  value: '5',
 };
diff --git a/frontend/src/components/common/Label.stories/HoverInfoLabel.stories.tsx b/frontend/src/components/common/Label.stories/HoverInfoLabel.stories.tsx
index 3d19fad9c5f..27cfead4784 100644
--- a/frontend/src/components/common/Label.stories/HoverInfoLabel.stories.tsx
+++ b/frontend/src/components/common/Label.stories/HoverInfoLabel.stories.tsx
@@ -14,49 +14,109 @@
  * limitations under the License.
  */
 
+import { Box, Typography } from '@mui/material';
 import { Meta, StoryFn } from '@storybook/react';
-import { HoverInfoLabel as HoverInfoLabelComponent, HoverInfoLabelProps } from '../Label';
+import React from 'react';
+import { TestContext } from '../../../test';
+import { HoverInfoLabel, HoverInfoLabelProps } from '../Label';
 
 export default {
-  title: 'Label/HoverInfoLabel',
-  component: HoverInfoLabelComponent,
-  argTypes: {},
-} as Meta;
+  title: 'Labels/HoverInfoLabel',
+  component: HoverInfoLabel,
+  decorators: [
+    Story => (
+      <TestContext>
+        <Box sx={{ padding: 2 }}>
+          <Story />
+        </Box>
+      </TestContext>
+    ),
+  ],
+  argTypes: {
+    label: { control: 'text', description: 'The main label text.' },
+    hoverInfo: {
+      control: 'text',
+      description: 'Information to display on hover (string or ReactNode).',
+    },
+    icon: {
+      control: 'text',
+      description: 'Iconify string for the icon (e.g., "mdi:information-outline").',
+    },
+    iconPosition: {
+      control: 'radio',
+      options: ['start', 'end'],
+      description: 'Position of the icon relative to the label.',
+    },
+    labelProps: {
+      control: 'object',
+      description: 'Props to pass to the label Typography component.',
+    },
+    iconProps: { control: 'object', description: 'Props to pass to the Icon component.' },
+  },
+} as Meta<typeof HoverInfoLabel>;
 
-const Template: StoryFn<HoverInfoLabelProps> = args => <HoverInfoLabelComponent {...args} />;
+const Template: StoryFn<HoverInfoLabelProps> = args => <HoverInfoLabel {...args} />;
 
-export const HoverInfoLabel = Template.bind({});
-HoverInfoLabel.args = {
-  label: 'Some label',
-  hoverInfo: 'hover info',
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Creation Timestamp',
+  hoverInfo: 'The time at which this resource was created.',
 };
+Default.storyName = 'Basic HoverInfoLabel';
 
-export const HoverInfoLabelInfo = Template.bind({});
-HoverInfoLabelInfo.args = {
-  label: 'Some label',
-  hoverInfo: <div>hover info div</div>,
+export const WithCustomIcon = Template.bind({});
+WithCustomIcon.args = {
+  label: 'Status Details',
+  hoverInfo: 'Current operational status of the resource.',
+  icon: 'mdi:help-circle-outline',
 };
+WithCustomIcon.storyName = 'With Custom Icon';
 
-export const LabelProps = Template.bind({});
-LabelProps.args = {
-  label: 'Some label',
-  hoverInfo: <div>hover info div</div>,
-  labelProps: {
-    variant: 'body2',
-  },
+export const WithReactNodeAsHoverInfo = Template.bind({});
+WithReactNodeAsHoverInfo.args = {
+  label: 'Complex Information',
+  hoverInfo: (
+    <>
+      <Typography variant="subtitle2" sx={{ fontWeight: 'bold' }}>
+        Detailed Breakdown
+      </Typography>
+      <ul>
+        <li>Point one about the complex information.</li>
+        <li>Point two with further details.</li>
+      </ul>
+    </>
+  ),
 };
+WithReactNodeAsHoverInfo.storyName = 'With ReactNode as HoverInfo';
 
-export const IconPosition = Template.bind({});
-IconPosition.args = {
-  label: 'Some label',
-  hoverInfo: <div>hover info div</div>,
+export const IconAtStart = Template.bind({});
+IconAtStart.args = {
+  label: 'Information First',
+  hoverInfo: 'The information icon appears before the label text.',
   iconPosition: 'start',
 };
+IconAtStart.storyName = 'Icon Position Start';
 
-// icon isn't used in the codebase.
-// export const HoverInfoLabelIcon = Template.bind({});
-// HoverInfoLabelIcon.args = {
-//   label: "Some label",
-//   hoverInfo: "value",
-//   icon: null, // unused it seems.
-// };
+export const CustomLabelStyling = Template.bind({});
+CustomLabelStyling.args = {
+  label: 'Important System Label',
+  hoverInfo: 'This label uses custom typography styling.',
+  labelProps: {
+    variant: 'h6',
+    color: 'error.dark',
+    sx: { fontStyle: 'italic' },
+  },
+};
+CustomLabelStyling.storyName = 'With Custom Label Styling';
+
+export const CustomIconProps = Template.bind({});
+CustomIconProps.args = {
+  label: 'Label with Big Icon',
+  hoverInfo: 'The icon next to this label is larger and has a different color.',
+  iconProps: {
+    width: '1.5rem',
+    height: '1.5rem',
+    color: 'purple',
+  },
+};
+CustomIconProps.storyName = 'With Custom Icon Props';
diff --git a/frontend/src/components/common/Label.stories/InfoLabel.stories.tsx b/frontend/src/components/common/Label.stories/InfoLabel.stories.tsx
index 3612a1bf385..c34cef780fb 100644
--- a/frontend/src/components/common/Label.stories/InfoLabel.stories.tsx
+++ b/frontend/src/components/common/Label.stories/InfoLabel.stories.tsx
@@ -14,20 +14,66 @@
  * limitations under the License.
  */
 
+import { Typography } from '@mui/material';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
-import { InfoLabel as InfoLabelComponent, InfoLabelProps } from '../Label';
+import { TestContext } from '../../../test';
+import { InfoLabel, InfoLabelProps } from '../Label';
 
 export default {
-  title: 'Label/InfoLabel',
-  component: InfoLabelComponent,
-  argTypes: {},
-} as Meta;
+  title: 'Labels/InfoLabel',
+  component: InfoLabel,
+  decorators: [
+    Story => (
+      <TestContext>
+        <Story />
+      </TestContext>
+    ),
+  ],
+  argTypes: {
+    name: { control: 'text', description: 'The name/key part of the label (left side).' },
+    value: {
+      control: 'text',
+      description:
+        'The value part of the label (right side). If children are provided, this prop is ignored.',
+    },
+    children: {
+      control: 'object',
+      description: 'Custom React node for the value part. Overrides the `value` prop if provided.',
+    },
+  },
+} as Meta<typeof InfoLabel>;
 
-const Template: StoryFn<InfoLabelProps> = args => <InfoLabelComponent {...args} />;
+const Template: StoryFn<InfoLabelProps> = args => <InfoLabel {...args} />;
 
-export const InfoLabel = Template.bind({});
-InfoLabel.args = {
-  name: 'name',
-  value: 'value',
+export const WithStringValue = Template.bind({});
+WithStringValue.args = {
+  name: 'Property Name',
+  value: 'Property Value',
 };
+WithStringValue.storyName = 'With String Value';
+
+export const WithReactNodeValue = Template.bind({});
+WithReactNodeValue.args = {
+  name: 'Complex Property',
+  children: (
+    <Typography color="secondary.main">
+      This is a <em>custom React node</em> value.
+    </Typography>
+  ),
+};
+WithReactNodeValue.storyName = 'With React Node Value';
+
+export const OnlyName = Template.bind({});
+OnlyName.args = {
+  name: 'Property With No Explicit Value',
+};
+OnlyName.storyName = 'Only Name (Value Undefined)';
+
+export const LongNameAndValue = Template.bind({});
+LongNameAndValue.args = {
+  name: 'This is a very long property name to demonstrate how it behaves within the grid layout used by InfoLabel',
+  value:
+    'This is a correspondingly long property value that should also wrap or be handled appropriately by the layout and typography settings.',
+};
+LongNameAndValue.storyName = 'With Long Name and Value';
diff --git a/frontend/src/components/common/Label.stories/NameLabel.stories.tsx b/frontend/src/components/common/Label.stories/NameLabel.stories.tsx
index 523dd48d228..7b5c6f3be53 100644
--- a/frontend/src/components/common/Label.stories/NameLabel.stories.tsx
+++ b/frontend/src/components/common/Label.stories/NameLabel.stories.tsx
@@ -16,18 +16,39 @@
 
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
-import { NameLabel as NameLabelComponent } from '../Label';
+import { TestContext } from '../../../test';
+import { NameLabel } from '../Label';
+
+interface NameLabelStoryProps {
+  children: React.ReactNode;
+}
 
 export default {
-  title: 'Label/NameLabel',
-  component: NameLabelComponent,
-  argTypes: {},
-} as Meta;
+  title: 'Labels/NameLabel',
+  component: NameLabel,
+  decorators: [
+    Story => (
+      <TestContext>
+        <Story />
+      </TestContext>
+    ),
+  ],
+  argTypes: {
+    children: { control: 'text', description: 'The text content of the NameLabel.' },
+  },
+} as Meta<typeof NameLabel>;
+
+const Template: StoryFn<NameLabelStoryProps> = args => <NameLabel {...args} />;
 
-const Template: StoryFn<{}> = args => (
-  <NameLabelComponent {...args}>A name label</NameLabelComponent>
-);
+export const Default = Template.bind({});
+Default.args = {
+  children: 'Label Name',
+};
+Default.storyName = 'Basic NameLabel';
 
-export const NameLabel = Template.bind({
-  component: NameLabelComponent,
-});
+export const LongText = Template.bind({});
+LongText.args = {
+  children:
+    'This is a much longer label name to demonstrate text wrapping or truncation behavior inherent to the component or its typical usage context, if any specific styling is applied by default.',
+};
+LongText.storyName = 'Long NameLabel Text';
diff --git a/frontend/src/components/common/Label.stories/StatusLabel.stories.tsx b/frontend/src/components/common/Label.stories/StatusLabel.stories.tsx
index e4369016e0a..003bc3efe31 100644
--- a/frontend/src/components/common/Label.stories/StatusLabel.stories.tsx
+++ b/frontend/src/components/common/Label.stories/StatusLabel.stories.tsx
@@ -14,37 +14,85 @@
  * limitations under the License.
  */
 
+import { Icon } from '@iconify/react';
+import { Box } from '@mui/material';
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
-import { StatusLabel as StatusLabelComponent, StatusLabelProps } from '../Label';
+import { TestContext } from '../../../test';
+import { StatusLabel, StatusLabelProps } from '../Label';
 
 export default {
-  title: 'Label/StatusLabel',
-  component: StatusLabelComponent,
-  argTypes: {},
-} as Meta;
-
-const Template: StoryFn<StatusLabelProps> = args => (
-  <StatusLabelComponent {...args}>{args.status}</StatusLabelComponent>
-);
-
-export const Success = Template.bind({
-  component: StatusLabelComponent,
-});
+  title: 'Labels/StatusLabel',
+  component: StatusLabel,
+  decorators: [
+    Story => (
+      <TestContext>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+          <Story />
+        </Box>
+      </TestContext>
+    ),
+  ],
+  argTypes: {
+    status: {
+      control: 'select',
+      options: ['success', 'warning', 'error', ''],
+      description: 'The status type, which determines the color scheme.',
+    },
+    children: {
+      control: 'text',
+      description: 'The text content or React node for the status label.',
+    },
+    sx: {
+      control: 'object',
+      description: 'Custom MUI sx props for styling.',
+    },
+  },
+} as Meta<typeof StatusLabel>;
+
+const Template: StoryFn<StatusLabelProps> = args => <StatusLabel {...args} />;
+
+export const Success = Template.bind({});
 Success.args = {
   status: 'success',
+  children: 'Ready',
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  status: 'warning',
+  children: 'Pending',
 };
 
-export const Error = Template.bind({
-  component: StatusLabelComponent,
-});
+export const Error = Template.bind({});
 Error.args = {
   status: 'error',
+  children: 'Failed',
 };
 
-export const Warning = Template.bind({
-  component: StatusLabelComponent,
-});
-Warning.args = {
+export const Neutral = Template.bind({});
+Neutral.args = {
+  status: '',
+  children: 'Unknown',
+};
+Neutral.storyName = 'Neutral (Empty Status)';
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  status: 'success',
+  children: (
+    <>
+      <Icon icon="mdi:check-circle-outline" style={{ marginRight: '4px' }} />
+      Verified
+    </>
+  ),
+};
+WithIcon.storyName = 'With Leading Icon';
+
+export const LongTextStatus = Template.bind({});
+LongTextStatus.args = {
   status: 'warning',
+  children:
+    'This is a rather long status message that might need to wrap or be handled by its container.',
 };
+LongTextStatus.storyName = 'With Long Text';
diff --git a/frontend/src/components/common/Label.stories/ValueLabel.stories.tsx b/frontend/src/components/common/Label.stories/ValueLabel.stories.tsx
index 8bb3650a67a..bb22e8bc7a3 100644
--- a/frontend/src/components/common/Label.stories/ValueLabel.stories.tsx
+++ b/frontend/src/components/common/Label.stories/ValueLabel.stories.tsx
@@ -16,16 +16,39 @@
 
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
-import { ValueLabel as ValueLabelComponent } from '../Label';
+import { TestContext } from '../../../test';
+import { ValueLabel } from '../Label';
+
+interface ValueLabelStoryProps {
+  children: React.ReactNode;
+}
 
 export default {
-  title: 'Label/ValueLabel',
-  component: ValueLabelComponent,
-  argTypes: {},
-} as Meta;
+  title: 'Labels/ValueLabel',
+  component: ValueLabel,
+  decorators: [
+    Story => (
+      <TestContext>
+        <Story />
+      </TestContext>
+    ),
+  ],
+  argTypes: {
+    children: { control: 'text', description: 'The text content of the ValueLabel.' },
+  },
+} as Meta<typeof ValueLabel>;
+
+const Template: StoryFn<ValueLabelStoryProps> = args => <ValueLabel {...args} />;
 
-const ValueLabelTemplate: StoryFn<{}> = args => (
-  <ValueLabelComponent {...args}>A ValueLabel is here</ValueLabelComponent>
-);
+export const Default = Template.bind({});
+Default.args = {
+  children: 'Actual Value',
+};
+Default.storyName = 'Basic ValueLabel';
 
-export const ValueLabel = ValueLabelTemplate.bind({});
+export const LongText = Template.bind({});
+LongText.args = {
+  children:
+    'This is a very long value string to observe how it behaves with word breaks and potential wrapping within its container, especially focusing on the `wordBreak: break-word` style.',
+};
+LongText.storyName = 'Long ValueLabel Text';
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/DateLabel.DefaultFormat.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/DateLabel.DefaultFormat.stories.storyshot
new file mode 100644
index 00000000000..826663fb5c4
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/DateLabel.DefaultFormat.stories.storyshot
@@ -0,0 +1,15 @@
+<body>
+  <div>
+    <div
+      class="MuiBox-root css-plbgj3"
+    >
+      <p
+        aria-label="2024-02-14T23:00:00.000Z"
+        class="MuiTypography-root MuiTypography-body1 css-1d0cpfm-MuiTypography-root"
+        data-mui-internal-clone-element="true"
+      >
+        3 months
+      </p>
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/DateLabel.MuchOlderMiniTimestamp.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/DateLabel.MuchOlderMiniTimestamp.stories.storyshot
new file mode 100644
index 00000000000..680c277e594
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/DateLabel.MuchOlderMiniTimestamp.stories.storyshot
@@ -0,0 +1,15 @@
+<body>
+  <div>
+    <div
+      class="MuiBox-root css-plbgj3"
+    >
+      <p
+        aria-label="2023-12-17T00:00:00.000Z"
+        class="MuiTypography-root MuiTypography-body1 css-1d0cpfm-MuiTypography-root"
+        data-mui-internal-clone-element="true"
+      >
+        3mo
+      </p>
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/DateLabel.OlderBrief.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/DateLabel.OlderBrief.stories.storyshot
new file mode 100644
index 00000000000..927cf3f7cac
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/DateLabel.OlderBrief.stories.storyshot
@@ -0,0 +1,15 @@
+<body>
+  <div>
+    <div
+      class="MuiBox-root css-plbgj3"
+    >
+      <p
+        aria-label="2024-02-13T00:00:00.000Z"
+        class="MuiTypography-root MuiTypography-body1 css-1d0cpfm-MuiTypography-root"
+        data-mui-internal-clone-element="true"
+      >
+        3 months
+      </p>
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/DateLabel.RecentBrief.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/DateLabel.RecentBrief.stories.storyshot
new file mode 100644
index 00000000000..826663fb5c4
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/DateLabel.RecentBrief.stories.storyshot
@@ -0,0 +1,15 @@
+<body>
+  <div>
+    <div
+      class="MuiBox-root css-plbgj3"
+    >
+      <p
+        aria-label="2024-02-14T23:00:00.000Z"
+        class="MuiTypography-root MuiTypography-body1 css-1d0cpfm-MuiTypography-root"
+        data-mui-internal-clone-element="true"
+      >
+        3 months
+      </p>
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/DateLabel.RecentMini.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/DateLabel.RecentMini.stories.storyshot
new file mode 100644
index 00000000000..ebd2b5117a4
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/DateLabel.RecentMini.stories.storyshot
@@ -0,0 +1,15 @@
+<body>
+  <div>
+    <div
+      class="MuiBox-root css-plbgj3"
+    >
+      <p
+        aria-label="2024-02-14T23:00:00.000Z"
+        class="MuiTypography-root MuiTypography-body1 css-1d0cpfm-MuiTypography-root"
+        data-mui-internal-clone-element="true"
+      >
+        3mo
+      </p>
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/DateLabel.WithCustomIconProps.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/DateLabel.WithCustomIconProps.stories.storyshot
new file mode 100644
index 00000000000..9c0b6c55bbd
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/DateLabel.WithCustomIconProps.stories.storyshot
@@ -0,0 +1,15 @@
+<body>
+  <div>
+    <div
+      class="MuiBox-root css-plbgj3"
+    >
+      <p
+        aria-label="2024-02-15T00:00:00.000Z"
+        class="MuiTypography-root MuiTypography-body1 css-1d0cpfm-MuiTypography-root"
+        data-mui-internal-clone-element="true"
+      >
+        3 months
+      </p>
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/HeaderLabel.Default.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/HeaderLabel.Default.stories.storyshot
new file mode 100644
index 00000000000..533cb736fd9
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/HeaderLabel.Default.stories.storyshot
@@ -0,0 +1,30 @@
+<body>
+  <div>
+    <div
+      class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-t0zib5-MuiGrid-root"
+    >
+      <div
+        class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+      >
+        <p
+          class="MuiTypography-root MuiTypography-body1 css-1vtvfmb-MuiTypography-root"
+        >
+          Uptime
+        </p>
+      </div>
+      <div
+        class="MuiGrid-root MuiGrid-container MuiGrid-item css-dcx4qa-MuiGrid-root"
+      >
+        <div
+          class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+        >
+          <p
+            class="MuiTypography-root MuiTypography-body1 css-l0k1rq-MuiTypography-root"
+          >
+            25 days
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/HeaderLabel.NumericValue.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/HeaderLabel.NumericValue.stories.storyshot
new file mode 100644
index 00000000000..cc25aaca3f8
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/HeaderLabel.NumericValue.stories.storyshot
@@ -0,0 +1,30 @@
+<body>
+  <div>
+    <div
+      class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-t0zib5-MuiGrid-root"
+    >
+      <div
+        class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+      >
+        <p
+          class="MuiTypography-root MuiTypography-body1 css-1vtvfmb-MuiTypography-root"
+        >
+          CPU Usage
+        </p>
+      </div>
+      <div
+        class="MuiGrid-root MuiGrid-container MuiGrid-item css-dcx4qa-MuiGrid-root"
+      >
+        <div
+          class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+        >
+          <p
+            class="MuiTypography-root MuiTypography-body1 css-l0k1rq-MuiTypography-root"
+          >
+            75%
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/HeaderLabel.ShortLabelAndValue.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/HeaderLabel.ShortLabelAndValue.stories.storyshot
new file mode 100644
index 00000000000..c4f1b1648fa
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/HeaderLabel.ShortLabelAndValue.stories.storyshot
@@ -0,0 +1,30 @@
+<body>
+  <div>
+    <div
+      class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-t0zib5-MuiGrid-root"
+    >
+      <div
+        class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+      >
+        <p
+          class="MuiTypography-root MuiTypography-body1 css-1vtvfmb-MuiTypography-root"
+        >
+          Nodes
+        </p>
+      </div>
+      <div
+        class="MuiGrid-root MuiGrid-container MuiGrid-item css-dcx4qa-MuiGrid-root"
+      >
+        <div
+          class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+        >
+          <p
+            class="MuiTypography-root MuiTypography-body1 css-l0k1rq-MuiTypography-root"
+          >
+            5
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/HeaderLabel.WithTooltip.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/HeaderLabel.WithTooltip.stories.storyshot
new file mode 100644
index 00000000000..b4db45fab48
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/HeaderLabel.WithTooltip.stories.storyshot
@@ -0,0 +1,33 @@
+<body>
+  <div>
+    <div
+      class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-t0zib5-MuiGrid-root"
+    >
+      <div
+        class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+      >
+        <p
+          class="MuiTypography-root MuiTypography-body1 css-1vtvfmb-MuiTypography-root"
+        >
+          Active Pods
+        </p>
+        <div
+          class="MuiContainer-root MuiContainer-maxWidthLg css-64uahr-MuiContainer-root"
+        />
+      </div>
+      <div
+        class="MuiGrid-root MuiGrid-container MuiGrid-item css-dcx4qa-MuiGrid-root"
+      >
+        <div
+          class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+        >
+          <p
+            class="MuiTypography-root MuiTypography-body1 css-l0k1rq-MuiTypography-root"
+          >
+            120
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/HoverInfoLabel.CustomIconProps.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/HoverInfoLabel.CustomIconProps.stories.storyshot
new file mode 100644
index 00000000000..b5242df323e
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/HoverInfoLabel.CustomIconProps.stories.storyshot
@@ -0,0 +1,15 @@
+<body>
+  <div>
+    <div
+      class="MuiBox-root css-19midj6"
+    >
+      <p
+        aria-label="The icon next to this label is larger and has a different color."
+        class="MuiTypography-root MuiTypography-body1 css-1d0cpfm-MuiTypography-root"
+        data-mui-internal-clone-element="true"
+      >
+        Label with Big Icon
+      </p>
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/HoverInfoLabel.CustomLabelStyling.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/HoverInfoLabel.CustomLabelStyling.stories.storyshot
new file mode 100644
index 00000000000..b8d1d08b586
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/HoverInfoLabel.CustomLabelStyling.stories.storyshot
@@ -0,0 +1,15 @@
+<body>
+  <div>
+    <div
+      class="MuiBox-root css-19midj6"
+    >
+      <h6
+        aria-label="This label uses custom typography styling."
+        class="MuiTypography-root MuiTypography-h6 css-1pjenbz-MuiTypography-root"
+        data-mui-internal-clone-element="true"
+      >
+        Important System Label
+      </h6>
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/HoverInfoLabel.Default.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/HoverInfoLabel.Default.stories.storyshot
new file mode 100644
index 00000000000..ab111afdfe5
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/HoverInfoLabel.Default.stories.storyshot
@@ -0,0 +1,15 @@
+<body>
+  <div>
+    <div
+      class="MuiBox-root css-19midj6"
+    >
+      <p
+        aria-label="The time at which this resource was created."
+        class="MuiTypography-root MuiTypography-body1 css-1d0cpfm-MuiTypography-root"
+        data-mui-internal-clone-element="true"
+      >
+        Creation Timestamp
+      </p>
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/HoverInfoLabel.IconAtStart.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/HoverInfoLabel.IconAtStart.stories.storyshot
new file mode 100644
index 00000000000..ad38eda983e
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/HoverInfoLabel.IconAtStart.stories.storyshot
@@ -0,0 +1,15 @@
+<body>
+  <div>
+    <div
+      class="MuiBox-root css-19midj6"
+    >
+      <p
+        aria-label="The information icon appears before the label text."
+        class="MuiTypography-root MuiTypography-body1 css-1d0cpfm-MuiTypography-root"
+        data-mui-internal-clone-element="true"
+      >
+        Information First
+      </p>
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/HoverInfoLabel.WithCustomIcon.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/HoverInfoLabel.WithCustomIcon.stories.storyshot
new file mode 100644
index 00000000000..cbd1b0e9059
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/HoverInfoLabel.WithCustomIcon.stories.storyshot
@@ -0,0 +1,15 @@
+<body>
+  <div>
+    <div
+      class="MuiBox-root css-19midj6"
+    >
+      <p
+        aria-label="Current operational status of the resource."
+        class="MuiTypography-root MuiTypography-body1 css-1d0cpfm-MuiTypography-root"
+        data-mui-internal-clone-element="true"
+      >
+        Status Details
+      </p>
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/HoverInfoLabel.WithReactNodeAsHoverInfo.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/HoverInfoLabel.WithReactNodeAsHoverInfo.stories.storyshot
new file mode 100644
index 00000000000..f59a0c02222
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/HoverInfoLabel.WithReactNodeAsHoverInfo.stories.storyshot
@@ -0,0 +1,14 @@
+<body>
+  <div>
+    <div
+      class="MuiBox-root css-19midj6"
+    >
+      <p
+        class="MuiTypography-root MuiTypography-body1 css-1d0cpfm-MuiTypography-root"
+        data-mui-internal-clone-element="true"
+      >
+        Complex Information
+      </p>
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/InfoLabel.LongNameAndValue.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/InfoLabel.LongNameAndValue.stories.storyshot
new file mode 100644
index 00000000000..6bf35a36072
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/InfoLabel.LongNameAndValue.stories.storyshot
@@ -0,0 +1,27 @@
+<body>
+  <div>
+    <div
+      class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-spacing-xs-2 css-4lm93d-MuiGrid-root"
+    >
+      <div
+        class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-lc33jo-MuiGrid-root"
+      >
+        <span
+          class="MuiTypography-root MuiTypography-body1 css-1ukuq4j-MuiTypography-root"
+        >
+          This is a very long property name to demonstrate how it behaves within the grid layout used by InfoLabel
+        </span>
+         
+      </div>
+      <div
+        class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1z0dvx8-MuiGrid-root"
+      >
+        <span
+          class="MuiTypography-root MuiTypography-body1 css-e06lsu-MuiTypography-root"
+        >
+          This is a correspondingly long property value that should also wrap or be handled appropriately by the layout and typography settings.
+        </span>
+      </div>
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/InfoLabel.OnlyName.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/InfoLabel.OnlyName.stories.storyshot
new file mode 100644
index 00000000000..cb1ade1557d
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/InfoLabel.OnlyName.stories.storyshot
@@ -0,0 +1,21 @@
+<body>
+  <div>
+    <div
+      class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-spacing-xs-2 css-4lm93d-MuiGrid-root"
+    >
+      <div
+        class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-lc33jo-MuiGrid-root"
+      >
+        <span
+          class="MuiTypography-root MuiTypography-body1 css-1ukuq4j-MuiTypography-root"
+        >
+          Property With No Explicit Value
+        </span>
+         
+      </div>
+      <div
+        class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1z0dvx8-MuiGrid-root"
+      />
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/InfoLabel.WithReactNodeValue.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/InfoLabel.WithReactNodeValue.stories.storyshot
new file mode 100644
index 00000000000..bff19a3d4ec
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/InfoLabel.WithReactNodeValue.stories.storyshot
@@ -0,0 +1,31 @@
+<body>
+  <div>
+    <div
+      class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-spacing-xs-2 css-4lm93d-MuiGrid-root"
+    >
+      <div
+        class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-lc33jo-MuiGrid-root"
+      >
+        <span
+          class="MuiTypography-root MuiTypography-body1 css-1ukuq4j-MuiTypography-root"
+        >
+          Complex Property
+        </span>
+         
+      </div>
+      <div
+        class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1z0dvx8-MuiGrid-root"
+      >
+        <p
+          class="MuiTypography-root MuiTypography-body1 css-1f4o4em-MuiTypography-root"
+        >
+          This is a 
+          <em>
+            custom React node
+          </em>
+           value.
+        </p>
+      </div>
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/InfoLabel.WithStringValue.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/InfoLabel.WithStringValue.stories.storyshot
new file mode 100644
index 00000000000..d68ba76a774
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/InfoLabel.WithStringValue.stories.storyshot
@@ -0,0 +1,27 @@
+<body>
+  <div>
+    <div
+      class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-spacing-xs-2 css-4lm93d-MuiGrid-root"
+    >
+      <div
+        class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-lc33jo-MuiGrid-root"
+      >
+        <span
+          class="MuiTypography-root MuiTypography-body1 css-1ukuq4j-MuiTypography-root"
+        >
+          Property Name
+        </span>
+         
+      </div>
+      <div
+        class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1z0dvx8-MuiGrid-root"
+      >
+        <span
+          class="MuiTypography-root MuiTypography-body1 css-e06lsu-MuiTypography-root"
+        >
+          Property Value
+        </span>
+      </div>
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/NameLabel.Default.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/NameLabel.Default.stories.storyshot
new file mode 100644
index 00000000000..b1e24c28838
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/NameLabel.Default.stories.storyshot
@@ -0,0 +1,9 @@
+<body>
+  <div>
+    <span
+      class="MuiTypography-root MuiTypography-body1 css-1ukuq4j-MuiTypography-root"
+    >
+      Label Name
+    </span>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/NameLabel.LongText.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/NameLabel.LongText.stories.storyshot
new file mode 100644
index 00000000000..90298f77a3f
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/NameLabel.LongText.stories.storyshot
@@ -0,0 +1,9 @@
+<body>
+  <div>
+    <span
+      class="MuiTypography-root MuiTypography-body1 css-1ukuq4j-MuiTypography-root"
+    >
+      This is a much longer label name to demonstrate text wrapping or truncation behavior inherent to the component or its typical usage context, if any specific styling is applied by default.
+    </span>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/StatusLabel.Error.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/StatusLabel.Error.stories.storyshot
index 04d948668f8..00bd372256b 100644
--- a/frontend/src/components/common/Label.stories/__snapshots__/StatusLabel.Error.stories.storyshot
+++ b/frontend/src/components/common/Label.stories/__snapshots__/StatusLabel.Error.stories.storyshot
@@ -1,9 +1,13 @@
 <body>
   <div>
-    <span
-      class="MuiTypography-root MuiTypography-body1 css-1y9cgfq-MuiTypography-root"
+    <div
+      class="MuiBox-root css-1821gv5"
     >
-      error
-    </span>
+      <span
+        class="MuiTypography-root MuiTypography-body1 css-1y9cgfq-MuiTypography-root"
+      >
+        Failed
+      </span>
+    </div>
   </div>
 </body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/StatusLabel.LongTextStatus.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/StatusLabel.LongTextStatus.stories.storyshot
new file mode 100644
index 00000000000..e6a2bcff655
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/StatusLabel.LongTextStatus.stories.storyshot
@@ -0,0 +1,13 @@
+<body>
+  <div>
+    <div
+      class="MuiBox-root css-1821gv5"
+    >
+      <span
+        class="MuiTypography-root MuiTypography-body1 css-op46cf-MuiTypography-root"
+      >
+        This is a rather long status message that might need to wrap or be handled by its container.
+      </span>
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/StatusLabel.Neutral.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/StatusLabel.Neutral.stories.storyshot
new file mode 100644
index 00000000000..c0043db488e
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/StatusLabel.Neutral.stories.storyshot
@@ -0,0 +1,13 @@
+<body>
+  <div>
+    <div
+      class="MuiBox-root css-1821gv5"
+    >
+      <span
+        class="MuiTypography-root MuiTypography-body1 css-nm2nmp-MuiTypography-root"
+      >
+        Unknown
+      </span>
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/StatusLabel.Success.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/StatusLabel.Success.stories.storyshot
index b56672e5596..5fd8d83bd57 100644
--- a/frontend/src/components/common/Label.stories/__snapshots__/StatusLabel.Success.stories.storyshot
+++ b/frontend/src/components/common/Label.stories/__snapshots__/StatusLabel.Success.stories.storyshot
@@ -1,9 +1,13 @@
 <body>
   <div>
-    <span
-      class="MuiTypography-root MuiTypography-body1 css-1ybpqju-MuiTypography-root"
+    <div
+      class="MuiBox-root css-1821gv5"
     >
-      success
-    </span>
+      <span
+        class="MuiTypography-root MuiTypography-body1 css-1ybpqju-MuiTypography-root"
+      >
+        Ready
+      </span>
+    </div>
   </div>
 </body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/StatusLabel.Warning.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/StatusLabel.Warning.stories.storyshot
index 82730685078..df6efe6c134 100644
--- a/frontend/src/components/common/Label.stories/__snapshots__/StatusLabel.Warning.stories.storyshot
+++ b/frontend/src/components/common/Label.stories/__snapshots__/StatusLabel.Warning.stories.storyshot
@@ -1,9 +1,13 @@
 <body>
   <div>
-    <span
-      class="MuiTypography-root MuiTypography-body1 css-op46cf-MuiTypography-root"
+    <div
+      class="MuiBox-root css-1821gv5"
     >
-      warning
-    </span>
+      <span
+        class="MuiTypography-root MuiTypography-body1 css-op46cf-MuiTypography-root"
+      >
+        Pending
+      </span>
+    </div>
   </div>
 </body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/StatusLabel.WithIcon.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/StatusLabel.WithIcon.stories.storyshot
new file mode 100644
index 00000000000..d3780e9fe0f
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/StatusLabel.WithIcon.stories.storyshot
@@ -0,0 +1,13 @@
+<body>
+  <div>
+    <div
+      class="MuiBox-root css-1821gv5"
+    >
+      <span
+        class="MuiTypography-root MuiTypography-body1 css-1ybpqju-MuiTypography-root"
+      >
+        Verified
+      </span>
+    </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/ValueLabel.Default.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/ValueLabel.Default.stories.storyshot
new file mode 100644
index 00000000000..c7aa9c1c6a8
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/ValueLabel.Default.stories.storyshot
@@ -0,0 +1,9 @@
+<body>
+  <div>
+    <span
+      class="MuiTypography-root MuiTypography-body1 css-e06lsu-MuiTypography-root"
+    >
+      Actual Value
+    </span>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.stories/__snapshots__/ValueLabel.LongText.stories.storyshot b/frontend/src/components/common/Label.stories/__snapshots__/ValueLabel.LongText.stories.storyshot
new file mode 100644
index 00000000000..e08bb6f85a7
--- /dev/null
+++ b/frontend/src/components/common/Label.stories/__snapshots__/ValueLabel.LongText.stories.storyshot
@@ -0,0 +1,9 @@
+<body>
+  <div>
+    <span
+      class="MuiTypography-root MuiTypography-body1 css-e06lsu-MuiTypography-root"
+    >
+      This is a very long value string to observe how it behaves with word breaks and potential wrapping within its container, especially focusing on the `wordBreak: break-word` style.
+    </span>
+  </div>
+</body>
\ No newline at end of file
diff --git a/frontend/src/components/common/Label.tsx b/frontend/src/components/common/Label.tsx
index e5cc2b0ea75..a6e2e3ce6dd 100644
--- a/frontend/src/components/common/Label.tsx
+++ b/frontend/src/components/common/Label.tsx
@@ -26,6 +26,7 @@ import { LightTooltip, TooltipIcon } from './Tooltip';
 export interface InfoLabelProps {
   name: string;
   value?: string | null;
+  children?: React.ReactNode;
 }
 
 export function InfoLabel(props: React.PropsWithChildren<InfoLabelProps>) {