diff --git a/src/components/ItemBodyView/ItemBodyView.js b/src/components/ItemBodyView/ItemBodyView.js
index bed15c1..83f76ad 100644
--- a/src/components/ItemBodyView/ItemBodyView.js
+++ b/src/components/ItemBodyView/ItemBodyView.js
@@ -8,35 +8,33 @@ import { objectIsEmpty } from "../../utilities";
 
 export default function ItemBodyView({ item }) {
 
-	const theme = webqueue2Theme(false);
-	const useStyles = makeStyles((theme) => ({
+	const useStyles = makeStyles(() => ({
 		missingOppositeContent: {
 			'&:before': {
 				content: '""',
 				flex: 0,
 				padding: '0',
 			},
-		},
-	}));
-	const classes = useStyles(theme);
+		}}));
+	const classes = useStyles();
 
 	const generateTimelineItem = (section) => {
-		switch(section.type) {
-			case "directoryInformation": 
-				if (section.content.length === 0){
+		switch (section.type) {
+			case "directory_information":
+				if (Object.entries(section) === 0) {
 					return "No Directory Information";
 				} else {
 					return "Directory Information Present"
 				}
-			case "initialMessage":
-				return(
+			case "initial_message":
+				return (
 					<>
 						<EmailHeader name={section.userName} date={section.datetime} email={section.userEmail} />
 						{section.content.map((line, index) => <Typography variant="body1">{line}</Typography>)}
 					</>
 				);
 			case "edit":
-				return(
+				return (
 					<>
 						<Typography variant="subtitle2">
 							{`${section.by} assigned thisat ${Date(section.datetime)}`}
@@ -45,7 +43,7 @@ export default function ItemBodyView({ item }) {
 					</>
 				);
 			case "status":
-				return(
+				return (
 					<>
 						<Typography variant="subtitle2">
 							{`${section.by} update the status to at ${Date(section.datetime)}`}
@@ -53,14 +51,14 @@ export default function ItemBodyView({ item }) {
 						{section.content.map((line) => <Typography variant="body1">{line}</Typography>)}
 					</>
 				);
-			case "assign":
+			case "assignment":
 				return (
 					<Typography variant="subtitle2">
 						{`${section.by} assigned this to ${section.to} at ${Date(section.datetime)}`}
 					</Typography>
 				);
-			case "replyToUser":
-				return(
+			case "reply_to_user":
+				return (
 					<>
 						<Typography variant="subtitle2">
 							{`${section.by} replied ${Date(section.datetime)}`}
@@ -68,8 +66,8 @@ export default function ItemBodyView({ item }) {
 						{section.content.map((line) => <Typography variant="body1">{line}</Typography>)}
 					</>
 				);
-			case "replyFromUser":
-				return(
+			case "reply_from_user":
+				return (
 					<>
 						<EmailHeader name={section.userName} date={section.datetime} email={section.userEmail} />
 						{section.content.map((line, index) => <Typography variant="body1">{line}</Typography>)}
@@ -81,20 +79,22 @@ export default function ItemBodyView({ item }) {
 	};
 
 	return (
-		<Timeline align="left">
-			{objectIsEmpty(item) ? "" : item.content.map((section, index) => {
-				return (
-					<TimelineItem classes={{missingOppositeContent: classes.missingOppositeContent}}>
-						<TimelineSeparator>
-							<TimelineDot />
-							<TimelineConnector />
-						</TimelineSeparator>
-						<TimelineContent>
-							{generateTimelineItem(section)}
-						</TimelineContent>
-					</TimelineItem>
-				);
-			})}
+		<Timeline align="left" classes={{ root: classes["Timeline-root"] }}>
+			{objectIsEmpty(item) ? "" : item.content.map((section) => (
+				<TimelineItem
+					classes={{
+						missingOppositeContent: classes.missingOppositeContent,
+					}}
+				>
+					<TimelineSeparator>
+						<TimelineDot />
+						<TimelineConnector />
+					</TimelineSeparator>
+					<TimelineContent>
+						{generateTimelineItem(section)}
+					</TimelineContent>
+				</TimelineItem>
+			))}
 		</Timeline>
 	);
 };