diff --git a/src/custom/CustomImage/CustomImage.tsx b/src/custom/CustomImage/CustomImage.tsx
new file mode 100644
index 00000000..3df9025b
--- /dev/null
+++ b/src/custom/CustomImage/CustomImage.tsx
@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { Dialog } from '../../base';
+
+interface ImageComponentProps {
+  src: string;
+  alt?: string;
+  width?: number | string;
+  height?: number | string;
+  loading?: undefined | 'eager' | 'lazy';
+  decoding?: 'sync' | 'async' | 'auto';
+  crossOrigin?: 'anonymous' | 'use-credentials' | '';
+  sizes?: string;
+  srcSet?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  onClick?: (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void;
+}
+
+const CustomImage: React.FC<ImageComponentProps> = ({ src, alt, ...props }) => {
+  const [isZoomed, setIsZoomed] = useState(false);
+
+  const handleZoomClick = () => {
+    setIsZoomed(true);
+  };
+
+  const handleZoomClose = () => {
+    setIsZoomed(false);
+  };
+
+  return (
+    <>
+      <img
+        src={src}
+        alt={alt}
+        loading="lazy"
+        onClick={handleZoomClick}
+        {...props}
+        style={{
+          cursor: 'pointer',
+          maxWidth: '100%',
+          height: 'auto',
+          ...props.style
+        }}
+      />
+      <Dialog
+        open={isZoomed}
+        onClose={handleZoomClose}
+        style={{
+          backgroundColor: 'rgba(0, 0, 0, 0.8)'
+        }}
+        PaperProps={{
+          style: {
+            background: 'transparent',
+            boxShadow: 'none',
+            overflow: 'auto',
+            maxWidth: '60rem'
+          }
+        }}
+      >
+        <img
+          src={src}
+          alt={alt}
+          style={{
+            objectFit: 'contain',
+            maxWidth: '100%',
+            maxHeight: '100%'
+          }}
+        />
+      </Dialog>
+    </>
+  );
+};
+
+export default CustomImage;
diff --git a/src/custom/CustomImage/index.tsx b/src/custom/CustomImage/index.tsx
new file mode 100644
index 00000000..cb201365
--- /dev/null
+++ b/src/custom/CustomImage/index.tsx
@@ -0,0 +1,2 @@
+import CustomImage from './CustomImage';
+export { CustomImage };
diff --git a/src/custom/Note/Note.tsx b/src/custom/Note/Note.tsx
index 09eef230..e9ac9ebd 100644
--- a/src/custom/Note/Note.tsx
+++ b/src/custom/Note/Note.tsx
@@ -1,10 +1,11 @@
 import { styled } from '@mui/material';
 import { FC } from 'react';
+import { RenderMarkdownTooltip } from '../Markdown';
 
 interface AlertProps {
   type?: 'success' | 'warning' | 'note';
   title?: string;
-  content?: string;
+  content: string;
 }
 
 const NoteWrapper = styled('div')<NoteWrapperProps>(({ type, theme }) => ({
@@ -40,7 +41,9 @@ const Note: FC<AlertProps> = ({ type = 'note', title, content }) => {
   return (
     <NoteWrapper type={type}>
       <NoteHeading type={type}>{title}</NoteHeading>
-      <NoteContent>{content}</NoteContent>
+      <NoteContent>
+        <RenderMarkdownTooltip content={content} />
+      </NoteContent>
     </NoteWrapper>
   );
 };
diff --git a/src/custom/index.tsx b/src/custom/index.tsx
index 55c7f0f9..94200bd5 100644
--- a/src/custom/index.tsx
+++ b/src/custom/index.tsx
@@ -8,6 +8,7 @@ import {
   CustomColumnVisibilityControl,
   CustomColumnVisibilityControlProps
 } from './CustomColumnVisibilityControl/CustomColumnVisibilityControl';
+import { CustomImage } from './CustomImage';
 import { CustomTooltip, InfoTooltip } from './CustomTooltip';
 import {
   CustomDialog,
@@ -54,6 +55,7 @@ export {
   ConnectionChip,
   CustomColumnVisibilityControl,
   CustomDialog,
+  CustomImage,
   CustomTooltip,
   EmptyState,
   ErrorBoundary,