diff --git a/src/components/Job/JobIcons.js b/src/components/Job/JobIcons.tsx
similarity index 82%
rename from src/components/Job/JobIcons.js
rename to src/components/Job/JobIcons.tsx
index 9767ffce1501c85585901c8a971964f2c0d9033a..7d73eca977333e4f033d9412cb3c5fb41bdef14a 100644
--- a/src/components/Job/JobIcons.js
+++ b/src/components/Job/JobIcons.tsx
@@ -26,7 +26,7 @@ const SemiCircle = () => {
   );
 };
 
-export const BatchJobIcon = ({ add }) => {
+export const BatchJobIcon = ({ add = false }) => {
   return (
     <Box
       sx={{
@@ -96,8 +96,21 @@ export const JobTypesComponent = {
   }
 };
 
-export const JobTypeIconText = ({ type, iconProps, fontProps }) => {
-  const Icon = JobTypesComponent[type].icon;
+interface JobTypeIconTextProps {
+  type: string | undefined;
+}
+
+export interface JobType {
+  DEPLOY: string;
+  UNDEPLOY: string;
+  BATCH_DEPLOY: string;
+  BATCH_UNDEPLOY: string;
+  START: string;
+  STOP: string;
+}
+
+export const JobTypeIconText = ({ type }: JobTypeIconTextProps) => {
+  const Icon = JobTypesComponent[type as keyof JobType].icon;
 
   return (
     <Stack
@@ -107,9 +120,9 @@ export const JobTypeIconText = ({ type, iconProps, fontProps }) => {
       sx={{ width: "100%" }}
     >
       <Box sx={{ width: "26px", height: "24px" }}>
-        <Icon {...iconProps} />
+        <Icon />
       </Box>
-      <Typography {...fontProps}>{JobTypesComponent[type].label}</Typography>
+      <Typography>{JobTypesComponent[type as keyof JobType].label}</Typography>
     </Stack>
   );
 };