diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/NumberedReportSection.tsx b/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/NumberedReportSection.tsx
new file mode 100644
index 000000000..a80e0e943
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/NumberedReportSection.tsx
@@ -0,0 +1,41 @@
+import React, {ReactFragment, ReactElement} from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {faInfoCircle} from '@fortawesome/free-solid-svg-icons';
+
+type Props = {
+ index: number,
+ title: string,
+ description: string,
+ body: ReactFragment
+}
+
+function NumberedReportSection(props: Props): ReactElement {
+ return (
+
+ )
+}
+
+function Header({index, title}: {index: number, title: string}): ReactElement {
+ return (
+ {index}. {title}
+ )
+}
+
+function Description({text}: {text: string}): ReactElement {
+ return (
+
+
+
+ {text}
+
+
+ )
+}
+
+export default NumberedReportSection;
diff --git a/monkey/monkey_island/cc/ui/src/styles/pages/report/RansomwareReport.scss b/monkey/monkey_island/cc/ui/src/styles/pages/report/RansomwareReport.scss
index 4d55ef8df..0a3ea2bf9 100644
--- a/monkey/monkey_island/cc/ui/src/styles/pages/report/RansomwareReport.scss
+++ b/monkey/monkey_island/cc/ui/src/styles/pages/report/RansomwareReport.scss
@@ -1,3 +1,20 @@
.ransomware-report .report-section-header {
margin-top: 40px;
}
+
+.numbered-report-section {
+ margin-top: 2.5em;
+ margin-bottom: 2.5em;
+}
+
+.numbered-report-section .indented {
+ padding-left: 2em;
+}
+.numbered-report-section .description {
+ display: flex
+}
+
+.numbered-report-section .alert-icon {
+ margin-top: .28em;
+ margin-right: .5em;
+}