Fixed as requested: 1. Added maintenance window frame image. 2. Updated font color and size.

Client/src/Pages/Incidents/index.css

@@ -13,13 +13,16 @@
 }
 
 .maintenance-title {
-  font-size: 20px;
+  color: var(--env-var-color-2);
+  font-size: 16px;
   font-weight: bold;
   margin-top: 40px;
   margin-bottom: 30px;
 }
 
 .checklist-item {
+  font-size: 13px;
+  color: var(--env-var-color-2);
   display: flex;
   margin-bottom: 10px;
 }

Client/src/Pages/Incidents/index.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import "./index.css";
+import WindowFrame from "./../../assets/Images/maintenance_window_frame.svg";
 import { Button } from "@mui/material";
 import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 
@@ -12,7 +13,7 @@ const Incidents = () => {
 
   return (
     <div className="maintenance-checklist-main">
-      <div className="maintenance-image"></div>
+      <img className="maintenance-image" src={WindowFrame} alt="WindowFrame" />
       <div className="maintenance-title">Create a maintenance window to</div>
       <div>
         {maintenanceItems.map((item) => (

Client/src/assets/Images/maintenance_window_frame.svg

@@ -0,0 +1,9 @@
+<svg width="256" height="136" viewBox="0 0 256 136" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.390244" y="0.390244" width="255.22" height="135.22" rx="7.41463" fill="white"/>
+<rect x="0.390244" y="0.390244" width="255.22" height="135.22" rx="7.41463" stroke="#EBEBEB" stroke-width="0.780488"/>
+<rect x="17.9512" y="16.3901" width="220.098" height="54.6341" rx="3.12195" fill="#EFF2FF"/>
+<rect x="17.9512" y="78.8293" width="85.0732" height="9.36585" rx="3.12195" fill="#D9D9D9"/>
+<rect x="111" y="79" width="127" height="9" rx="3.12195" fill="#F3F3F3"/>
+<rect width="85" height="9" rx="3.12195" transform="matrix(-1 0 0 1 238 98)" fill="#D9D9D9"/>
+<rect width="127" height="9" rx="3.12195" transform="matrix(-1 0 0 1 145 98)" fill="#F3F3F3"/>
+</svg>