diff --git a/src/Components/Grid/Status.css b/src/Components/Grid/Status.css
new file mode 100644
index 0000000..f37a390
--- /dev/null
+++ b/src/Components/Grid/Status.css
@@ -0,0 +1,18 @@
+.statusicon {
+    vertical-align: text-bottom;
+}
+
+.passed {
+    color: green;
+}
+
+.failed {
+    color: red;
+}
+.pending {
+    color: orange;
+}
+
+.todo {
+    color: gray;
+}
diff --git a/src/Components/Grid/Status.js b/src/Components/Grid/Status.js
new file mode 100644
index 0000000..9a0957d
--- /dev/null
+++ b/src/Components/Grid/Status.js
@@ -0,0 +1,106 @@
+import React, { Component, Fragment } from 'react';
+import './Status.css';
+import PropTypes from 'prop-types';
+class Status extends Component {
+    render() {
+        if (this.props.status === 'passed') {
+            return (
+                <Fragment>
+                    <i>
+                        <svg
+                            aria-label="passed"
+                            fill="currentColor"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="1em"
+                            height="1em"
+                            role="img"
+                            className="passed statusicon"
+                        >
+                            <path
+                                fillRule="evenodd"
+                                // eslint-disable-next-line max-len
+                                d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
+                            ></path>
+                        </svg>
+                    </i>
+                    {this.props.status}
+                </Fragment>
+            );
+        } else if (this.props.status === 'failed') {
+            return (
+                <Fragment>
+                    <i>
+                        <svg
+                            aria-label="failed"
+                            className="failed statusicon"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="1em"
+                            height="1em"
+                            role="img"
+                            fill="currentColor"
+                        >
+                            <path
+                                fillRule="evenodd"
+                                // eslint-disable-next-line max-len
+                                d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
+                            ></path>
+                        </svg>
+                    </i>
+                    {this.props.status}
+                </Fragment>
+            );
+        } else if (this.props.status === 'pending') {
+            return (
+                <Fragment>
+                    <i>
+                        <svg
+                            className="pending statusicon"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="1em"
+                            height="1em"
+                            aria-hidden="true"
+                            fill="currentColor"
+                        >
+                            <path
+                                fillRule="evenodd"
+                                d="M8 4a4 4 0 100 8 4 4 0 000-8z"
+                            ></path>
+                        </svg>
+                    </i>
+                    {this.props.status}
+                </Fragment>
+            );
+        } else if (this.props.status === 'todo') {
+            return (
+                <Fragment>
+                    <i>
+                        <svg
+                            className="todo statusicon"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="1em"
+                            height="1em"
+                            aria-hidden="true"
+                            fill="currentColor"
+                        >
+                            <path
+                                fillRule="evenodd"
+                                d="M8 4a4 4 0 100 8 4 4 0 000-8z"
+                            ></path>
+                        </svg>
+                    </i>
+                    {this.props.status}
+                </Fragment>
+            );
+        } else {
+            return <Fragment>{this.props.status}</Fragment>;
+        }
+    }
+}
+Status.propTypes = {
+    status: PropTypes.string.isRequired,
+};
+export default Status;
diff --git a/src/Components/Grid/Status.test.js b/src/Components/Grid/Status.test.js
new file mode 100644
index 0000000..dcedbc8
--- /dev/null
+++ b/src/Components/Grid/Status.test.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Status from './Status';
+test('Should contain passed', () => {
+    const { container } = render(<Status status="passed"></Status>);
+    expect(container.textContent).toEqual('passed');
+    expect(container).toMatchSnapshot();
+});
+test('Should contain failed', () => {
+    const { container } = render(<Status status="failed"></Status>);
+    expect(container.textContent).toEqual('failed');
+    expect(container).toMatchSnapshot();
+});
+test('Should contain pending', () => {
+    const { container } = render(<Status status="pending"></Status>);
+    expect(container.textContent).toEqual('pending');
+    expect(container).toMatchSnapshot();
+});
+test('Should contain todo', () => {
+    const { container } = render(<Status status="todo"></Status>);
+    expect(container.textContent).toEqual('todo');
+    expect(container).toMatchSnapshot();
+});
diff --git a/src/Components/Grid/TabContent.css b/src/Components/Grid/TabContent.css
index d3aebea..dfcb88e 100644
--- a/src/Components/Grid/TabContent.css
+++ b/src/Components/Grid/TabContent.css
@@ -1,9 +1,17 @@
-.informationicon{
+.informationiconwrapper {
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 10%;
     box-shadow: 1px -1px #fafafa inset;
+    color: black;
 }
 
+.informationicon {
+    vertical-align: text-bottom;
+}
+
+.status {
+    text-transform: capitalize;
+}
diff --git a/src/Components/Grid/TabContent.js b/src/Components/Grid/TabContent.js
index 9384536..5d32636 100644
--- a/src/Components/Grid/TabContent.js
+++ b/src/Components/Grid/TabContent.js
@@ -4,6 +4,7 @@ import './TabContent.css';
 import TabHeading from './TabHeading';
 import PropTypes from 'prop-types';
 import DateUtilities from './../../Utilities/DateUtilities';
+import Status from './Status';
 class TabContent extends Component {
     formatTime(value) {
         return new DateUtilities().convertMillisecondsToTime(value);
@@ -26,27 +27,28 @@ class TabContent extends Component {
                     <div className="column testcase">
                         {this.props.item.title}
                     </div>
-                    <div className="column result">
-                        {this.props.item.status}
+                    <div className="column result status">
+                        <Status status={this.props.item.status} />
                     </div>
                     <div className="column time">
                         {this.formatTime(this.props.item?.duration)}
                     </div>
                     <div className="column information">
                         <div
-                            className="informationicon"
+                            className="informationiconwrapper"
                             onClick={() =>
                                 this.props.onShowModel(this.props.item)
                             }
                         >
                             <i>
                                 <svg
+                                    aria-label="more information"
                                     viewBox="64 64 896 896"
                                     data-icon="exclamation-circle"
                                     width="1em"
                                     height="1em"
                                     fill="currentColor"
-                                    aria-hidden="true"
+                                    className="informationicon"
                                 >
                                     <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"></path>
                                 </svg>
diff --git a/src/Components/Grid/TabContent.test.js b/src/Components/Grid/TabContent.test.js
index f01039d..0c85c8e 100644
--- a/src/Components/Grid/TabContent.test.js
+++ b/src/Components/Grid/TabContent.test.js
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import React from 'react';
 import TabContent from './TabContent';
 import { render, fireEvent } from '@testing-library/react';
diff --git a/src/Components/Grid/__snapshots__/Status.test.js.snap b/src/Components/Grid/__snapshots__/Status.test.js.snap
new file mode 100644
index 0000000..84a44a3
--- /dev/null
+++ b/src/Components/Grid/__snapshots__/Status.test.js.snap
@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should contain failed 1`] = `
+<div>
+  <i>
+    <svg
+      aria-label="failed"
+      class="failed statusicon"
+      fill="currentColor"
+      height="1em"
+      role="img"
+      version="1.1"
+      viewBox="0 0 16 16"
+      width="1em"
+    >
+      <path
+        d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </i>
+  failed
+</div>
+`;
+
+exports[`Should contain passed 1`] = `
+<div>
+  <i>
+    <svg
+      aria-label="passed"
+      class="passed statusicon"
+      fill="currentColor"
+      height="1em"
+      role="img"
+      version="1.1"
+      viewBox="0 0 16 16"
+      width="1em"
+    >
+      <path
+        d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </i>
+  passed
+</div>
+`;
+
+exports[`Should contain pending 1`] = `
+<div>
+  <i>
+    <svg
+      aria-hidden="true"
+      class="pending statusicon"
+      fill="currentColor"
+      height="1em"
+      version="1.1"
+      viewBox="0 0 16 16"
+      width="1em"
+    >
+      <path
+        d="M8 4a4 4 0 100 8 4 4 0 000-8z"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </i>
+  pending
+</div>
+`;
+
+exports[`Should contain todo 1`] = `
+<div>
+  <i>
+    <svg
+      aria-hidden="true"
+      class="todo statusicon"
+      fill="currentColor"
+      height="1em"
+      version="1.1"
+      viewBox="0 0 16 16"
+      width="1em"
+    >
+      <path
+        d="M8 4a4 4 0 100 8 4 4 0 000-8z"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </i>
+  todo
+</div>
+`;
diff --git a/src/__snapshots__/App.test.js.snap b/src/__snapshots__/App.test.js.snap
index 21d77e6..dc9f16d 100644
--- a/src/__snapshots__/App.test.js.snap
+++ b/src/__snapshots__/App.test.js.snap
@@ -255,8 +255,25 @@ exports[`Tree click Should call function on tree node click 1`] = `
                 should pass
               </div>
               <div
-                class="column result"
+                class="column result status"
               >
+                <i>
+                  <svg
+                    aria-label="passed"
+                    class="passed statusicon"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    version="1.1"
+                    viewBox="0 0 16 16"
+                    width="1em"
+                  >
+                    <path
+                      d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </i>
                 passed
               </div>
               <div
@@ -268,11 +285,12 @@ exports[`Tree click Should call function on tree node click 1`] = `
                 class="column information"
               >
                 <div
-                  class="informationicon"
+                  class="informationiconwrapper"
                 >
                   <i>
                     <svg
-                      aria-hidden="true"
+                      aria-label="more information"
+                      class="informationicon"
                       data-icon="exclamation-circle"
                       fill="currentColor"
                       height="1em"
@@ -384,8 +402,25 @@ exports[`Tree click Should call function on tree node click 1`] = `
                         should pass
                       </div>
                       <div
-                        class="column result"
+                        class="column result status"
                       >
+                        <i>
+                          <svg
+                            aria-label="passed"
+                            class="passed statusicon"
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            version="1.1"
+                            viewBox="0 0 16 16"
+                            width="1em"
+                          >
+                            <path
+                              d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </i>
                         passed
                       </div>
                       <div
@@ -395,11 +430,12 @@ exports[`Tree click Should call function on tree node click 1`] = `
                         class="column information"
                       >
                         <div
-                          class="informationicon"
+                          class="informationiconwrapper"
                         >
                           <i>
                             <svg
-                              aria-hidden="true"
+                              aria-label="more information"
+                              class="informationicon"
                               data-icon="exclamation-circle"
                               fill="currentColor"
                               height="1em"
@@ -515,8 +551,25 @@ exports[`Tree click Should call function on tree node click 1`] = `
                         should pass
                       </div>
                       <div
-                        class="column result"
+                        class="column result status"
                       >
+                        <i>
+                          <svg
+                            aria-label="passed"
+                            class="passed statusicon"
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            version="1.1"
+                            viewBox="0 0 16 16"
+                            width="1em"
+                          >
+                            <path
+                              d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </i>
                         passed
                       </div>
                       <div
@@ -526,11 +579,12 @@ exports[`Tree click Should call function on tree node click 1`] = `
                         class="column information"
                       >
                         <div
-                          class="informationicon"
+                          class="informationiconwrapper"
                         >
                           <i>
                             <svg
-                              aria-hidden="true"
+                              aria-label="more information"
+                              class="informationicon"
                               data-icon="exclamation-circle"
                               fill="currentColor"
                               height="1em"
@@ -552,8 +606,25 @@ exports[`Tree click Should call function on tree node click 1`] = `
                         should fail
                       </div>
                       <div
-                        class="column result"
+                        class="column result status"
                       >
+                        <i>
+                          <svg
+                            aria-label="failed"
+                            class="failed statusicon"
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            version="1.1"
+                            viewBox="0 0 16 16"
+                            width="1em"
+                          >
+                            <path
+                              d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </i>
                         failed
                       </div>
                       <div
@@ -565,11 +636,12 @@ exports[`Tree click Should call function on tree node click 1`] = `
                         class="column information"
                       >
                         <div
-                          class="informationicon"
+                          class="informationiconwrapper"
                         >
                           <i>
                             <svg
-                              aria-hidden="true"
+                              aria-label="more information"
+                              class="informationicon"
                               data-icon="exclamation-circle"
                               fill="currentColor"
                               height="1em"
@@ -640,8 +712,25 @@ exports[`Tree click Should call function on tree node click 1`] = `
                     should be around
                   </div>
                   <div
-                    class="column result"
+                    class="column result status"
                   >
+                    <i>
+                      <svg
+                        aria-label="passed"
+                        class="passed statusicon"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        version="1.1"
+                        viewBox="0 0 16 16"
+                        width="1em"
+                      >
+                        <path
+                          d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
+                    </i>
                     passed
                   </div>
                   <div
@@ -651,11 +740,12 @@ exports[`Tree click Should call function on tree node click 1`] = `
                     class="column information"
                   >
                     <div
-                      class="informationicon"
+                      class="informationiconwrapper"
                     >
                       <i>
                         <svg
-                          aria-hidden="true"
+                          aria-label="more information"
+                          class="informationicon"
                           data-icon="exclamation-circle"
                           fill="currentColor"
                           height="1em"
@@ -722,8 +812,25 @@ exports[`Tree click Should call function on tree node click 1`] = `
                         should pass
                       </div>
                       <div
-                        class="column result"
+                        class="column result status"
                       >
+                        <i>
+                          <svg
+                            aria-label="passed"
+                            class="passed statusicon"
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            version="1.1"
+                            viewBox="0 0 16 16"
+                            width="1em"
+                          >
+                            <path
+                              d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </i>
                         passed
                       </div>
                       <div
@@ -733,11 +840,12 @@ exports[`Tree click Should call function on tree node click 1`] = `
                         class="column information"
                       >
                         <div
-                          class="informationicon"
+                          class="informationiconwrapper"
                         >
                           <i>
                             <svg
-                              aria-hidden="true"
+                              aria-label="more information"
+                              class="informationicon"
                               data-icon="exclamation-circle"
                               fill="currentColor"
                               height="1em"
@@ -759,8 +867,25 @@ exports[`Tree click Should call function on tree node click 1`] = `
                         should fail
                       </div>
                       <div
-                        class="column result"
+                        class="column result status"
                       >
+                        <i>
+                          <svg
+                            aria-label="failed"
+                            class="failed statusicon"
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            version="1.1"
+                            viewBox="0 0 16 16"
+                            width="1em"
+                          >
+                            <path
+                              d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </i>
                         failed
                       </div>
                       <div
@@ -770,11 +895,12 @@ exports[`Tree click Should call function on tree node click 1`] = `
                         class="column information"
                       >
                         <div
-                          class="informationicon"
+                          class="informationiconwrapper"
                         >
                           <i>
                             <svg
-                              aria-hidden="true"
+                              aria-label="more information"
+                              class="informationicon"
                               data-icon="exclamation-circle"
                               fill="currentColor"
                               height="1em"
@@ -798,8 +924,25 @@ exports[`Tree click Should call function on tree node click 1`] = `
                     should be around too
                   </div>
                   <div
-                    class="column result"
+                    class="column result status"
                   >
+                    <i>
+                      <svg
+                        aria-label="passed"
+                        class="passed statusicon"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        version="1.1"
+                        viewBox="0 0 16 16"
+                        width="1em"
+                      >
+                        <path
+                          d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
+                    </i>
                     passed
                   </div>
                   <div
@@ -809,11 +952,12 @@ exports[`Tree click Should call function on tree node click 1`] = `
                     class="column information"
                   >
                     <div
-                      class="informationicon"
+                      class="informationiconwrapper"
                     >
                       <i>
                         <svg
-                          aria-hidden="true"
+                          aria-label="more information"
+                          class="informationicon"
                           data-icon="exclamation-circle"
                           fill="currentColor"
                           height="1em"
@@ -927,8 +1071,25 @@ exports[`Tree click Should call function on tree node click 1`] = `
                         should pass
                       </div>
                       <div
-                        class="column result"
+                        class="column result status"
                       >
+                        <i>
+                          <svg
+                            aria-label="passed"
+                            class="passed statusicon"
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            version="1.1"
+                            viewBox="0 0 16 16"
+                            width="1em"
+                          >
+                            <path
+                              d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </i>
                         passed
                       </div>
                       <div
@@ -938,11 +1099,12 @@ exports[`Tree click Should call function on tree node click 1`] = `
                         class="column information"
                       >
                         <div
-                          class="informationicon"
+                          class="informationiconwrapper"
                         >
                           <i>
                             <svg
-                              aria-hidden="true"
+                              aria-label="more information"
+                              class="informationicon"
                               data-icon="exclamation-circle"
                               fill="currentColor"
                               height="1em"
diff --git a/src/setupTests.js b/src/setupTests.js
index 666127a..174d89c 100644
--- a/src/setupTests.js
+++ b/src/setupTests.js
@@ -1 +1,2 @@
 import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
diff --git a/webpack.development.config.js b/webpack.development.config.js
index 1109608..0cac413 100644
--- a/webpack.development.config.js
+++ b/webpack.development.config.js
@@ -2,7 +2,7 @@ const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
 const path = require('path');
 const publicUrl = './public';
-const data = require('./src/data/nested.json');
+const data = require('./src/data/sample.json');
 const HtmlWebPackPlugin = require('html-webpack-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 
@@ -18,6 +18,7 @@ module.exports = merge.merge(common, {
         port: 9000,
         hot: true,
         open: true,
+        writeToDisk: true,
         overlay: {
             errors: true,
         },