diff --git a/src/custom/YamlDialog/YamlDialog.tsx b/src/custom/YamlDialog/YamlDialog.tsx
new file mode 100644
index 00000000..04e0c2ca
--- /dev/null
+++ b/src/custom/YamlDialog/YamlDialog.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  Divider,
+  IconButton,
+  Tooltip
+} from '../../base';
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import FullscreenIcon from '@mui/icons-material/Fullscreen';
+import SaveIcon from '@mui/icons-material/Save';
+import { YamlDialogTitleText, StyledCodeMirrorWrapper } from './style';
+
+interface YamlDialogProps {
+  name: string;
+  open: boolean;
+  fullScreen?: boolean;
+  config_file: string;
+  isReadOnly?: boolean;
+  onClose: () => void;
+  onToggleFullScreen: () => void;
+  onYamlChange: (value: string) => void;
+  onUpdate?: () => void;
+  onDelete?: () => void;
+  editorComponent?: React.ReactNode;
+}
+
+const YamlDialog = React.forwardRef<HTMLDivElement, YamlDialogProps>(
+  (
+    {
+      name,
+      open,
+      fullScreen = false,
+      isReadOnly = false,
+      onClose,
+      onToggleFullScreen,
+      onUpdate,
+      onDelete,
+      editorComponent
+    },
+    ref
+  ) => {
+    return (
+      <Dialog
+        ref={ref}
+        aria-labelledby="yaml-dialog-title"
+        open={open}
+        onClose={onClose}
+        maxWidth="md"
+        fullScreen={fullScreen}
+        fullWidth={!fullScreen}
+      >
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '1rem'
+          }}
+          id="yaml-dialog-title"
+        >
+          <YamlDialogTitleText variant="h6">{name}</YamlDialogTitleText>
+          <Tooltip title={fullScreen ? 'Exit Fullscreen' : 'Fullscreen'} arrow placement="bottom">
+            <IconButton onClick={onToggleFullScreen} size="large">
+              {fullScreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
+            </IconButton>
+          </Tooltip>
+        </div>
+        <Divider />
+        <DialogContent>
+          <StyledCodeMirrorWrapper fullScreen={fullScreen}>{editorComponent}</StyledCodeMirrorWrapper>
+        </DialogContent>
+        <Divider />
+        {!isReadOnly && (
+          <DialogActions>
+            <Tooltip title="Update Pattern">
+              <IconButton
+                aria-label="Update"
+                color="primary"
+                onClick={onUpdate}
+                size="large"
+              >
+                <SaveIcon />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Delete Filter">
+              <IconButton
+                aria-label="Delete"
+                color="primary"
+                onClick={onDelete}
+                size="large"
+              >
+                <DeleteIcon />
+              </IconButton>
+            </Tooltip>
+          </DialogActions>
+        )}
+      </Dialog>
+    );
+  }
+);
+
+YamlDialog.displayName = 'YamlDialog';
+
+export default YamlDialog;
diff --git a/src/custom/YamlDialog/index.tsx b/src/custom/YamlDialog/index.tsx
new file mode 100644
index 00000000..b6a6b4a6
--- /dev/null
+++ b/src/custom/YamlDialog/index.tsx
@@ -0,0 +1 @@
+export { default as YamlDialog } from './YamlDialog';
diff --git a/src/custom/YamlDialog/style.tsx b/src/custom/YamlDialog/style.tsx
new file mode 100644
index 00000000..81152212
--- /dev/null
+++ b/src/custom/YamlDialog/style.tsx
@@ -0,0 +1,19 @@
+import { styled } from '@mui/material';
+import { DialogTitle } from '../../base/DialogTitle';
+
+export const YamlDialogTitleText = styled(DialogTitle)(() => ({
+  fontWeight: 600,
+  fontSize: '1.25rem',
+  flex: 1
+}));
+
+export const StyledCodeMirrorWrapper = styled('div')<{ fullScreen?: boolean }>(
+  ({ fullScreen }) => ({
+    height: fullScreen ? '100vh' : '400px',
+    overflow: 'auto',
+    '& .CodeMirror': {
+      height: '100%',
+      fontFamily: 'monospace'
+    }
+  })
+);
diff --git a/src/custom/index.tsx b/src/custom/index.tsx
index a7d300d9..d41df9a7 100644
--- a/src/custom/index.tsx
+++ b/src/custom/index.tsx
@@ -52,6 +52,7 @@ import { TransferListProps } from './TransferModal/TransferList/TransferList';
 import UniversalFilter, { UniversalFilterProps } from './UniversalFilter';
 import { UserTableAvatarInfo, UsersTable } from './UsersTable';
 import { VisibilityChipMenu } from './VisibilityChipMenu';
+import { YamlDialog } from './YamlDialog';
 export { CatalogCard } from './CatalogCard';
 export { CatalogFilterSidebar } from './CatalogFilterSection';
 export type { FilterListType } from './CatalogFilterSection';
@@ -75,6 +76,7 @@ export { Terminal } from './Terminal';
 export { TOC } from './TOCChapter';
 export { TOCLearning } from './TOCLearning';
 export { UserSearchField } from './UserSearchField';
+export { YamlDialog } from './YamlDialog';
 
 export {
   ActionButton,
diff --git a/src/icons/Description/DescriptionIcon.tsx b/src/icons/Description/DescriptionIcon.tsx
index 0bfd51aa..67de472d 100644
--- a/src/icons/Description/DescriptionIcon.tsx
+++ b/src/icons/Description/DescriptionIcon.tsx
@@ -1,4 +1,4 @@
-import { KEPPEL_GREEN_FILL, DEFAULT_HEIGHT, DEFAULT_WIDTH, DEFAULT_FILL_NONE } from '../../constants/constants';
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH, DEFAULT_FILL_NONE } from '../../constants/constants';
 import { IconProps } from '../types';
 
 const DescriptionIcon = ({