diff --git a/src/components/Job/JobDetails.tsx b/src/components/Job/JobDetails.tsx
index 1a60b195736de7fd898fc5f885589258ffa517c4..7fe72e63b842a3c30dcf5878d8346e8cfe0c62f3 100644
--- a/src/components/Job/JobDetails.tsx
+++ b/src/components/Job/JobDetails.tsx
@@ -18,9 +18,12 @@ import { JobBadge } from "./JobBadge";
 import { DeploymentJobOutput } from "../deployments/DeploymentJobOutput";
 import { JobGitRefIcon } from "./JobGitRefIcon";
 import { JobGitRefLink } from "./JobGitRefLink";
-import AccessControl from "../auth/AccessControl";
-import { AWXJobDetails } from "../../api/DataTypes";
-import { JobStatusStepper } from "./JobStatus";
+import { AWXJobDetails, Status } from "../../api/DataTypes";
+
+interface JobDetailsProps {
+  operation: OperationDetails;
+  job: AwxJobDetails;
+}
 
 const createAlert = (type: Status, message: string) => {
   return {
@@ -49,10 +52,7 @@ const getDeploymentDetails = (operation: OperationDetails) => {
   return {
     Revision: (
       <Box sx={{ display: "flex", gap: "6px", alignItems: "center" }}>
-        <JobGitRefIcon
-          job={operation}
-          fontSize="medium"
-        />
+        <JobGitRefIcon job={operation} />
         <JobGitRefLink job={operation} />
       </Box>
     ),
diff --git a/src/components/Job/JobIcons.js b/src/components/Job/JobIcons.js
index f2196ce0f025e04f96f0b9682a5711a7fde73dee..4e9797a98c984485314af0848de009d595c51b6d 100644
--- a/src/components/Job/JobIcons.js
+++ b/src/components/Job/JobIcons.js
@@ -3,11 +3,127 @@ import {
   DeploymentTypeIcon
 } from "../deployments/DeploymentIcons";
 import { CommandTypeIcon } from "../common/Status";
+import { Box, Stack, Typography } from "@mui/material";
+import {
+  PlayCircleFilled,
+  PauseCircleFilled,
+  AddCircleOutline,
+  RemoveCircleOutline
+} from "@mui/icons-material";
 
 export function JobStatusIcon({ status }) {
   return <DeploymentStatusIcon status={status} />;
 }
 
+const SemiCircle = () => {
+  return (
+    <Box
+      sx={{
+        position: "absolute",
+        zIndex: "1",
+        marginLeft: "5px",
+        top: "-1px",
+        width: "20px",
+        height: "20px",
+        border: "2px solid black",
+        borderRadius: "50%",
+        borderBottomColor: "transparent",
+        borderLeftColor: "transparent",
+        transform: "rotate(-2deg)"
+      }}
+    />
+  );
+};
+
+export const BatchJobIcon = ({ add }) => {
+  return (
+    <Box
+      sx={{
+        position: "relative",
+        width: "25px",
+        height: "25px",
+        display: "flex"
+      }}
+    >
+      {add ? (
+        <AddCircleOutline sx={{ position: "absolute", zIndex: "3" }} />
+      ) : (
+        <RemoveCircleOutline sx={{ position: "absolute", zIndex: "3" }} />
+      )}
+      <SemiCircle />
+    </Box>
+  );
+};
+
+export const StartIcon = ({ ...props }) => <PlayCircleFilled {...props} />;
+export const StopIcon = ({ ...props }) => <PauseCircleFilled {...props} />;
+export const DeployIcon = ({ ...props }) => <AddCircleOutline {...props} />;
+export const UndeployIcon = ({ ...props }) => (
+  <RemoveCircleOutline {...props} />
+);
+export const BatchDeployIcon = ({ ...props }) => (
+  <BatchJobIcon
+    add
+    {...props}
+  />
+);
+export const BatchUndeployIcon = ({ ...props }) => <BatchJobIcon {...props} />;
+
+export const JOB_TYPES = {
+  DEPLOY: "DEPLOY",
+  UNDEPLOY: "UNDEPLOY",
+  BATCH_DEPLOY: "BATCH_DEPLOY",
+  BATCH_UNDEPLOY: "BATCH_UNDEPLOY",
+  START: "START",
+  STOP: "STOP"
+};
+
+export const JobTypesComponent = {
+  DEPLOY: {
+    label: "Deployment",
+    icon: DeployIcon
+  },
+  UNDEPLOY: {
+    label: "Undeployment",
+    icon: UndeployIcon
+  },
+  BATCH_DEPLOY: {
+    label: "Batch deployment",
+    icon: BatchDeployIcon
+  },
+  BATCH_UNDEPLOY: {
+    label: "Batch undeployment",
+    icon: BatchUndeployIcon
+  },
+  START: {
+    label: "Set active",
+    icon: StartIcon
+  },
+  STOP: {
+    label: "Set inactive",
+    icon: StopIcon
+  }
+};
+
+export const JobTypeIconText = ({ type, iconProps, fontProps }) => {
+  const Icon = JobTypesComponent[type].icon;
+
+  return (
+    <Stack
+      flexDirection="row"
+      alignItems="center"
+      gap="5px"
+      sx={{ width: "100%" }}
+    >
+      <Box sx={{ width: "26px", height: "24px" }}>
+        <Icon {...iconProps} />
+      </Box>
+      <Typography {...fontProps}>{JobTypesComponent[type].label}</Typography>
+    </Stack>
+  );
+};
+
+// TODO: This will be deleted in later MR
 export function JobTypeIcon({ type, colorStyle, labelPosition }) {
   const icon = ["START", "STOP"].includes(type) ? (
     <CommandTypeIcon
diff --git a/src/components/Job/JobTable/JobDetailsColumn.js b/src/components/Job/JobTable/JobDetailsColumn.js
index d1eb0c2994721c57c362e647d98eaa7c1983b8fd..779e95eb08869a740c970611e42579c1a7d0bfac 100644
--- a/src/components/Job/JobTable/JobDetailsColumn.js
+++ b/src/components/Job/JobTable/JobDetailsColumn.js
@@ -1,62 +1,58 @@
 import { Stack, Typography } from "@mui/material";
 import { InternalLink } from "@ess-ics/ce-ui-common";
-import { JobTypeIcon } from "../JobIcons";
+import { JobTypeIconText, JOB_TYPES } from "../JobIcons";
 import { JobRevisionChip } from "../JobRevisionChip";
 
-export const JobDetailsColumn = ({ job, colorStyle }) => {
-  return (
-    <Stack>
-      <JobTypeIcon
-        type={job.type}
-        colorStyle={colorStyle}
-        labelPosition="right"
-      />
-      {/* TODO: Fix hard coded job types in next commit */}
-      {job.type !== "BATCH_DEPLOY" || job.type !== "BATCH_UNDEPLOY" ? (
-        <Stack>
-          <Stack
-            flexDirection="row"
-            gap={1}
-            alignItems="center"
+export const JobDetailsColumn = ({ job }) => (
+  <Stack>
+    <JobTypeIconText type={job.type} />
+    {job.type !== JOB_TYPES.BATCH_DEPLOY ||
+    job.type !== JOB_TYPES.BATCH_UNDEPLOY ? (
+      <Stack>
+        <Stack
+          flexDirection="row"
+          gap={1}
+          alignItems="center"
+          flexWrap="wrap"
+        >
+          <InternalLink
+            to={`/iocs/${job.iocId}`}
+            label={`IOC Details, ${job.iocName}`}
           >
-            <InternalLink
-              to={`/iocs/${job.iocId}`}
-              label={`IOC Details, ${job.iocName}`}
-            >
-              {job.iocName}
-            </InternalLink>
-            {job.type === "DEPLOY" && <JobRevisionChip job={job} />}
-          </Stack>
-          <Stack
-            flexDirection="row"
-            gap={1}
-            alignItems="baseline"
-          >
-            <InternalLink
-              to={`/hosts/${job?.host?.hostId}`}
-              label={`Host details, ${job.host?.hostName}`}
-            >
-              {job.host.hostName}
-            </InternalLink>
-            <Typography variant="body2">{job.host.network}</Typography>
-          </Stack>
+            {job.iocName}
+          </InternalLink>
+          {job.type === JOB_TYPES.DEPLOY && <JobRevisionChip job={job} />}
         </Stack>
-      ) : (
-        <Stack>
-          <Typography
-            variant="body2"
-            sx={{ width: "30px" }}
-          >
-            {job.noOfIOCs} IOCs
-          </Typography>
-          <Typography
-            variant="body2"
-            sx={{ width: "30px" }}
+        <Stack
+          flexDirection="row"
+          gap={1}
+          alignItems="baseline"
+          flexWrap="wrap"
+        >
+          <InternalLink
+            to={`/hosts/${job?.host?.hostId}`}
+            label={`Host details, ${job.host?.hostName}`}
           >
-            {job.noOfHosts} Hosts
-          </Typography>
+            {job.host.hostName}
+          </InternalLink>
+          <Typography variant="body2">{job.host.network}</Typography>
         </Stack>
-      )}
-    </Stack>
-  );
-};
+      </Stack>
+    ) : (
+      <Stack>
+        <Typography
+          variant="body2"
+          sx={{ width: "30px" }}
+        >
+          {job.noOfIOCs} IOCs
+        </Typography>
+        <Typography
+          variant="body2"
+          sx={{ width: "30px" }}
+        >
+          {job.noOfHosts} Hosts
+        </Typography>
+      </Stack>
+    )}
+  </Stack>
+);
diff --git a/src/components/Job/JobTable/JobTable.js b/src/components/Job/JobTable/JobTable.js
index ca209742365fd76558dd34095184c6f7e6d1683a..8a3d994e3a7f5b867e3ccf861554d7d9d4446e0b 100644
--- a/src/components/Job/JobTable/JobTable.js
+++ b/src/components/Job/JobTable/JobTable.js
@@ -32,7 +32,7 @@ const shapeColumns = (customColumns) => {
   });
 };
 
-const createTableRow = (job, colorStyle) => ({
+const createTableRow = (job) => ({
   id: job.id,
   status: <JobStatusColumn {...{ job }} />,
   jobId: (
@@ -43,7 +43,7 @@ const createTableRow = (job, colorStyle) => ({
       {`#${job.id}`}
     </InternalLink>
   ),
-  job: <JobDetailsColumn {...{ job, colorStyle }} />,
+  job: <JobDetailsColumn {...{ job }} />,
   user: <UserAvatar username={job.createdBy} />
 });