diff --git a/src/components/ItemBodyView/ItemBodyView.js b/src/components/ItemBodyView/ItemBodyView.js
new file mode 100644
index 0000000..3d6266e
--- /dev/null
+++ b/src/components/ItemBodyView/ItemBodyView.js
@@ -0,0 +1,105 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, TimelineDot } from '@material-ui/lab';
+import { Card, CardHeader, CardContent, Typography, makeStyles } from "@material-ui/core";
+import webqueue2Theme from "../../theme";
+import EmailHeader from "../EmailHeader/";
+import { objectIsEmpty } from "../../utilities";
+
+export default function ItemBodyView({ item }) {
+
+ const theme = webqueue2Theme(false);
+ const useStyles = makeStyles((theme) => ({
+ missingOppositeContent: {
+ '&:before': {
+ content: '""',
+ flex: 0,
+ padding: '0',
+ },
+ },
+ }));
+ const classes = useStyles(theme);
+
+ const generateTimelineItem = (section) => {
+ switch(section.type) {
+ case "directoryInformation":
+ if (section.content.length === 0){
+ return "No Directory Information";
+ } else {
+ return "Directory Information Present"
+ }
+ case "initialMessage":
+ return(
+ <>
+
+ {section.content.map((line, index) => {line})}
+
+ );
+ case "edit":
+ return(
+ <>
+
+ {`${section.by} assigned thisat ${Date(section.datetime)}`}
+
+ {section.content.map((line) => {line})}
+
+ );
+ case "status":
+ return(
+ <>
+
+ {`${section.by} update the status to at ${Date(section.datetime)}`}
+
+ {section.content.map((line) => {line})}
+
+ );
+ case "assign":
+ return (
+
+ {`${section.by} assigned this to ${section.to} at ${Date(section.datetime)}`}
+
+ );
+ case "replyToUser":
+ return(
+ <>
+
+ {`${section.by} replied ${Date(section.datetime)}`}
+
+ {section.content.map((line) => {line})}
+
+ );
+ case "replyFromUser":
+ return(
+ <>
+
+ {section.content.map((line, index) => {line})}
+
+ );
+ default:
+ return "No Match Found";
+ };
+ };
+
+ return (
+
+ {objectIsEmpty(item) ? "" : item.content.map((section, index) => {
+ return (
+
+
+
+
+
+
+ {generateTimelineItem(section)}
+
+
+ );
+ })}
+
+ );
+};
+
+ItemBodyView.propTypes = {
+ /** The item to diplay. */
+ "item": PropTypes.object.isRequired
+};
\ No newline at end of file
diff --git a/src/components/ItemBodyView/ItemBodyView.md b/src/components/ItemBodyView/ItemBodyView.md
new file mode 100644
index 0000000..2c224d1
--- /dev/null
+++ b/src/components/ItemBodyView/ItemBodyView.md
@@ -0,0 +1,23 @@
+The ItemBodyView displays the seven actions possible in an item:
+
+- **Directory information**: present when a user submits a ticket from the Contact Us page
+- **Initial Message**: the first message a user sends.
+- **Edit:** an internal note to and from ECN staff.
+- **Status:** an internal summary of the current/next task for the item.
+- **Assignment:** the career account alias for the ECN employee the item is assigned to.
+- **Reply To User:** a message sent from an ECN employee to a user.
+- **Reply To ECN:** a message sent from the user to ECN that has been merged into an existing item.
+
+```jsx
+import ItemBodyView from "./ItemBodyView";
+
+const demoItem = {"queue": "ce", "number": 100, "lastUpdated": "08-27-20 09:49 PM", "headers": [{"type": "Merged-Time", "content": "Tue, 23 Jun 2020 13:31:53 -0400"}, {"type": "Merged-By", "content": "campb303"}, {"type": "QTime", "content": "1"}, {"type": "QTime-Updated-Time", "content": "Tue, 23 Jun 2020 13:28:50 EDT"}, {"type": "QTime-Updated-By", "content": "campb303"}, {"type": "Time", "content": "1"}, {"type": "Time-Updated-Time", "content": "Tue, 23 Jun 2020 13:28:50 EDT"}, {"type": "Time-Updated-By", "content": "campb303"}, {"type": "Replied-Time", "content": "Tue, 23 Jun 2020 13:28:48 -0400"}, {"type": "Replied-By", "content": "campb303"}, {"type": "Edited-Time", "content": "Tue, 23 Jun 2020 13:27:56 -0400"}, {"type": "Edited-By", "content": "campb303"}, {"type": "QAssigned-To", "content": "campb303"}, {"type": "QAssigned-To-Updated-Time", "content": "Tue, 23 Jun 2020 13:27:00 EDT"}, {"type": "QAssigned-To-Updated-By", "content": "campb303"}, {"type": "Assigned-To", "content": "campb303"}, {"type": "Assigned-To-Updated-Time", "content": "Tue, 23 Jun 2020 13:27:00 EDT"}, {"type": "Assigned-To-Updated-By", "content": "campb303"}, {"type": "QStatus", "content": "Dont Delete"}, {"type": "QStatus-Updated-Time", "content": "Tue, 23 Jun 2020 13:26:55 EDT"}, {"type": "QStatus-Updated-By", "content": "campb303"}, {"type": "Status", "content": "Dont Delete"}, {"type": "Status-Updated-Time", "content": "Tue, 23 Jun 2020 13:26:55 EDT"}, {"type": "Status-Updated-By", "content": "campb303"}, {"type": "Date", "content": "Tue, 23 Jun 2020 13:25:51 -0400"}, {"type": "From", "content": "Justin Campbell "}, {"type": "Message-ID", "content": "<911CE050-3240-4980-91DD-9C3EBB8DBCF8@purdue.edu>"}, {"type": "Subject", "content": "Beepboop"}, {"type": "To", "content": "cesite@ecn.purdue.edu"}, {"type": "Content-Type", "content": "text/plain; charset=\"utf-8\""}, {"type": "X-ECN-Queue-Original-Path", "content": "/home/pier/e/queue/Attachments/inbox/2020-06-23/208-original.txt"}, {"type": "X-ECN-Queue-Original-URL", "content": "https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/208-original.txt"}], "content": [{"type": "directoryInformation", "content": []}, {"type": "initialMessage", "datetime": "2020-06-23T13:25:51-0400", "userName": "Justin Campbell", "userEmail": "campb303@purdue.edu", "ccRecipients": [], "content": ["Testtest\n"]}, {"type": "assign", "by": "campb303", "datetime": "2020-06-23T13:27:00-0400", "to": "campb303"}, {"type": "status", "by": "campb303", "datetime": "2020-06-23T13:26:55", "content": ["*** Status updated by: campb303 at: 6/23/2020 13:26:55 ***\n", "Dont Delete\n"]}, {"type": "edit", "by": "campb303", "datetime": "2020-06-23T13:27:56", "content": ["*** Edited by: campb303 at: 06/23/20 13:27:56 ***\n", "\n", "This be an edit my boy\n", "\n", "\n", "\n"]}, {"type": "replyToUser", "by": "campb303", "datetime": "2020-06-23T13:28:18", "content": ["*** Replied by: campb303 at: 06/23/20 13:28:18 ***\n", "\n", "This be a reply my son\n", "\n", "Justin\n", "ECN\n", "\n"]}, {"type": "replyFromUser", "datetime": "2020-06-23T13:30:45-0400", "subject": "Re: Beepboop", "userName": "Justin Campbell", "userEmail": "campb303@purdue.edu", "content": ["=== Additional information supplied by user ===\n", "\n", "Subject: Re: Beepboop\n", "From: Justin Campbell \n", "Date: Tue, 23 Jun 2020 13:30:45 -0400\n", "X-ECN-Queue-Original-Path: /home/pier/e/queue/Attachments/inbox/2020-06-23/212-original.txt\n", "X-ECN-Queue-Original-URL: https://engineering.purdue.edu/webqueue/Attachments/inbox/2020-06-23/212-original.txt\n", "\n", "Huzzah!\n", "\n", "===============================================\n", "\n"], "ccRecipients": []}], "isLocked": "ce 100 is locked by knewell using qvi", "userEmail": "campb303@purdue.edu", "userName": "Justin Campbell", "userAlias": "campb303", "assignedTo": "campb303", "subject": "Beepboop", "status": "Dont Delete", "priority": "", "department": "", "building": "", "dateReceived": "2020-06-23T13:25:51-0400"};
+
+
+
+
+```
+
+```jsx static
+
+```
\ No newline at end of file
diff --git a/src/components/ItemBodyView/index.js b/src/components/ItemBodyView/index.js
new file mode 100644
index 0000000..076a727
--- /dev/null
+++ b/src/components/ItemBodyView/index.js
@@ -0,0 +1,3 @@
+import ItemBodyView from "./ItemBodyView";
+
+export default ItemBodyView;
\ No newline at end of file