diff --git a/.eslintrc b/.eslintrc
index 9e572da..933aa11 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -8,6 +8,7 @@
   "extends": ["standard", "standard-react", "plugin:jest/recommended"],
   "plugins": ["jest"],
   rules: {
-    'jest/valid-expect': 0
+    'jest/valid-expect': 0,
+    'react/jsx-boolean-value': 0
   }
 }
diff --git a/output/coverage/jest/index.html b/output/coverage/jest/index.html
index 5387181..fab68d7 100644
--- a/output/coverage/jest/index.html
+++ b/output/coverage/jest/index.html
@@ -20,28 +20,28 @@ <h1>
     </h1>
     <div class='clearfix'>
       <div class='fl pad1y space-right2'>
-        <span class="strong">21.79% </span>
+        <span class="strong">Unknown% </span>
         <span class="quiet">Statements</span>
-        <span class='fraction'>17/78</span>
+        <span class='fraction'>0/0</span>
       </div>
       <div class='fl pad1y space-right2'>
-        <span class="strong">0% </span>
+        <span class="strong">Unknown% </span>
         <span class="quiet">Branches</span>
-        <span class='fraction'>0/26</span>
+        <span class='fraction'>0/0</span>
       </div>
       <div class='fl pad1y space-right2'>
-        <span class="strong">30.77% </span>
+        <span class="strong">Unknown% </span>
         <span class="quiet">Functions</span>
-        <span class='fraction'>4/13</span>
+        <span class='fraction'>0/0</span>
       </div>
       <div class='fl pad1y space-right2'>
-        <span class="strong">20.55% </span>
+        <span class="strong">Unknown% </span>
         <span class="quiet">Lines</span>
-        <span class='fraction'>15/73</span>
+        <span class='fraction'>0/0</span>
       </div>
     </div>
   </div>
-  <div class='status-line low'></div>
+  <div class='status-line medium'></div>
 <div class="pad1">
 <table class="coverage-summary">
 <thead>
@@ -58,65 +58,13 @@ <h1>
    <th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
 </tr>
 </thead>
-<tbody><tr>
-	<td class="file low" data-value="src"><a href="src/index.html">src</a></td>
-	<td data-value="33.33" class="pic low"><div class="chart"><div class="cover-fill" style="width: 33%;"></div><div class="cover-empty" style="width:67%;"></div></div></td>
-	<td data-value="33.33" class="pct low">33.33%</td>
-	<td data-value="3" class="abs low">1/3</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="0" class="abs high">0/0</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="0" class="abs high">0/0</td>
-	<td data-value="33.33" class="pct low">33.33%</td>
-	<td data-value="3" class="abs low">1/3</td>
-	</tr>
-
-<tr>
-	<td class="file low" data-value="src/image-upload"><a href="src/image-upload/index.html">src/image-upload</a></td>
-	<td data-value="0" class="pic low"><div class="chart"><div class="cover-fill" style="width: 0%;"></div><div class="cover-empty" style="width:100%;"></div></div></td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="54" class="abs low">0/54</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="26" class="abs low">0/26</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="4" class="abs low">0/4</td>
-	<td data-value="0" class="pct low">0%</td>
-	<td data-value="53" class="abs low">0/53</td>
-	</tr>
-
-<tr>
-	<td class="file medium" data-value="src/image-upload/components"><a href="src/image-upload/components/index.html">src/image-upload/components</a></td>
-	<td data-value="68.75" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 68%;"></div><div class="cover-empty" style="width:32%;"></div></div></td>
-	<td data-value="68.75" class="pct medium">68.75%</td>
-	<td data-value="16" class="abs medium">11/16</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="0" class="abs high">0/0</td>
-	<td data-value="28.57" class="pct low">28.57%</td>
-	<td data-value="7" class="abs low">2/7</td>
-	<td data-value="76.92" class="pct medium">76.92%</td>
-	<td data-value="13" class="abs medium">10/13</td>
-	</tr>
-
-<tr>
-	<td class="file high" data-value="src/message-card"><a href="src/message-card/index.html">src/message-card</a></td>
-	<td data-value="100" class="pic high"><div class="chart"><div class="cover-fill cover-full" style="width: 100%;"></div><div class="cover-empty" style="width:0%;"></div></div></td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="5" class="abs high">5/5</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="0" class="abs high">0/0</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="2" class="abs high">2/2</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="4" class="abs high">4/4</td>
-	</tr>
-
-</tbody>
+<tbody></tbody>
 </table>
 </div><div class='push'></div><!-- for sticky footer -->
 </div><!-- /wrapper -->
 <div class='footer quiet pad2 space-top1 center small'>
   Code coverage
-  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Tue Oct 02 2018 01:51:43 GMT-0700 (Pacific Daylight Time)
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Wed Oct 17 2018 14:02:40 GMT-0700 (Pacific Daylight Time)
 </div>
 </div>
 <script src="prettify.js"></script>
diff --git a/package-lock.json b/package-lock.json
index 2947690..c37e598 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1052,11 +1052,11 @@
       "dev": true
     },
     "@material-ui/core": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.1.2.tgz",
-      "integrity": "sha512-tTRjlTVJY78GDKRHKSuxpoghrFyDAu9GrYCnaARHaZ2pZWiBHuviqUgAC8n8jWUXG3e6vfAXn9zZWzFedb4LwQ==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.2.2.tgz",
+      "integrity": "sha512-wDTJyR76+OBdlltiPs3lc1gD6zR+dSA6nITtgkBeLf1NvWfNotMWdvldIDnF3bu24ySAX9imfzDfkBu4Edtqww==",
       "requires": {
-        "@babel/runtime": "7.0.0",
+        "@babel/runtime": "7.1.2",
         "@types/jss": "^9.5.6",
         "@types/react-transition-group": "^2.0.8",
         "brcast": "^3.0.1",
@@ -1079,10 +1079,19 @@
         "popper.js": "^1.14.1",
         "prop-types": "^15.6.0",
         "react-event-listener": "^0.6.2",
-        "react-jss": "^8.1.0",
         "react-transition-group": "^2.2.1",
         "recompose": "0.28.0 - 0.30.0",
         "warning": "^4.0.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.1.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.1.2.tgz",
+          "integrity": "sha512-Y3SCjmhSupzFB6wcv1KmmFucH6gDVnI30WjOcicV10ju0cZjak3Jcs67YLIXBrmZYw1xCrVeJPbycFwrqNyxpg==",
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        }
       }
     },
     "@material-ui/icons": {
@@ -1680,9 +1689,9 @@
       }
     },
     "@types/jss": {
-      "version": "9.5.6",
-      "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.6.tgz",
-      "integrity": "sha512-7TWmR5y1jYG4ka4wTZt65RR0kw4WgALFUWktQIWbLnDd6/z/0SQZ/4+UeH0rhdp+HEdIfmzPBH0VwE/4Z9Evzw==",
+      "version": "9.5.7",
+      "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.7.tgz",
+      "integrity": "sha512-OZimStu2QdDMtZ0h72JXqvLVbWUjXd5ZLk8vxLmfuC/nM1AabRyyGoxSufnzixrbpEcVcyy/JV5qeQu2JnjVZw==",
       "requires": {
         "csstype": "^2.0.0",
         "indefinite-observable": "^1.0.1"
@@ -1709,9 +1718,9 @@
       "integrity": "sha512-HtKGu+qG1NPvYe1z7ezLsyIaXYyi8SoAVqWDZgDQ8dLrsZvSzUNCwZyfX33uhWxL/SU0ZDQZ3nwZ0nimt507Kw=="
     },
     "@types/react": {
-      "version": "16.4.14",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.4.14.tgz",
-      "integrity": "sha512-Gh8irag2dbZ2K6vPn+S8+LNrULuG3zlCgJjVUrvuiUK7waw9d9CFk2A/tZFyGhcMDUyO7tznbx1ZasqlAGjHxA==",
+      "version": "16.4.18",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.4.18.tgz",
+      "integrity": "sha512-eFzJKEg6pdeaukVLVZ8Xb79CTl/ysX+ExmOfAAqcFlCCK5TgFDD9kWR0S18sglQ3EmM8U+80enjUqbfnUyqpdA==",
       "requires": {
         "@types/prop-types": "*",
         "csstype": "^2.2.0"
@@ -5640,9 +5649,9 @@
       "dev": true
     },
     "deepmerge": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.1.1.tgz",
-      "integrity": "sha512-urQxA1smbLZ2cBbXbaYObM1dJ82aJ2H57A1C/Kklfh/ZN1bgH4G/n5KWhdNfOK11W98gqZfyYj7W4frJJRwA2w=="
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
     },
     "default-require-extensions": {
       "version": "1.0.0",
@@ -9346,11 +9355,6 @@
         "number-is-nan": "^1.0.0"
       }
     },
-    "is-function": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.1.tgz",
-      "integrity": "sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU="
-    },
     "is-generator-fn": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-1.0.0.tgz",
@@ -10905,52 +10909,11 @@
         "hyphenate-style-name": "^1.0.2"
       }
     },
-    "jss-compose": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/jss-compose/-/jss-compose-5.0.0.tgz",
-      "integrity": "sha512-YofRYuiA0+VbeOw0VjgkyO380sA4+TWDrW52nSluD9n+1FWOlDzNbgpZ/Sb3Y46+DcAbOS21W5jo6SAqUEiuwA==",
-      "requires": {
-        "warning": "^3.0.0"
-      },
-      "dependencies": {
-        "warning": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
-          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
-          "requires": {
-            "loose-envify": "^1.0.0"
-          }
-        }
-      }
-    },
     "jss-default-unit": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-8.0.2.tgz",
       "integrity": "sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg=="
     },
-    "jss-expand": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/jss-expand/-/jss-expand-5.3.0.tgz",
-      "integrity": "sha512-NiM4TbDVE0ykXSAw6dfFmB1LIqXP/jdd0ZMnlvlGgEMkMt+weJIl8Ynq1DsuBY9WwkNyzWktdqcEW2VN0RAtQg=="
-    },
-    "jss-extend": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/jss-extend/-/jss-extend-6.2.0.tgz",
-      "integrity": "sha512-YszrmcB6o9HOsKPszK7NeDBNNjVyiW864jfoiHoMlgMIg2qlxKw70axZHqgczXHDcoyi/0/ikP1XaHDPRvYtEA==",
-      "requires": {
-        "warning": "^3.0.0"
-      },
-      "dependencies": {
-        "warning": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
-          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
-          "requires": {
-            "loose-envify": "^1.0.0"
-          }
-        }
-      }
-    },
     "jss-global": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-3.0.0.tgz",
@@ -10974,46 +10937,11 @@
         }
       }
     },
-    "jss-preset-default": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-4.5.0.tgz",
-      "integrity": "sha512-qZbpRVtHT7hBPpZEBPFfafZKWmq3tA/An5RNqywDsZQGrlinIF/mGD9lmj6jGqu8GrED2SMHZ3pPKLmjCZoiaQ==",
-      "requires": {
-        "jss-camel-case": "^6.1.0",
-        "jss-compose": "^5.0.0",
-        "jss-default-unit": "^8.0.2",
-        "jss-expand": "^5.3.0",
-        "jss-extend": "^6.2.0",
-        "jss-global": "^3.0.0",
-        "jss-nested": "^6.0.1",
-        "jss-props-sort": "^6.0.0",
-        "jss-template": "^1.0.1",
-        "jss-vendor-prefixer": "^7.0.0"
-      }
-    },
     "jss-props-sort": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz",
       "integrity": "sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g=="
     },
-    "jss-template": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/jss-template/-/jss-template-1.0.1.tgz",
-      "integrity": "sha512-m5BqEWha17fmIVXm1z8xbJhY6GFJxNB9H68GVnCWPyGYfxiAgY9WTQyvDAVj+pYRgrXSOfN5V1T4+SzN1sJTeg==",
-      "requires": {
-        "warning": "^3.0.0"
-      },
-      "dependencies": {
-        "warning": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
-          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
-          "requires": {
-            "loose-envify": "^1.0.0"
-          }
-        }
-      }
-    },
     "jss-vendor-prefixer": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz",
@@ -16577,18 +16505,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.5.2.tgz",
       "integrity": "sha512-hSl7E6l25GTjNEZATqZIuWOgSnpXb3kD0DVCujmg46K5zLxsbiKaaT6VO9slkSBDPZfYs30lwfJwbOFOnoEnKQ=="
     },
-    "react-jss": {
-      "version": "8.6.1",
-      "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-8.6.1.tgz",
-      "integrity": "sha512-SH6XrJDJkAphp602J14JTy3puB2Zxz1FkM3bKVE8wON+va99jnUTKWnzGECb3NfIn9JPR5vHykge7K3/A747xQ==",
-      "requires": {
-        "hoist-non-react-statics": "^2.5.0",
-        "jss": "^9.7.0",
-        "jss-preset-default": "^4.3.0",
-        "prop-types": "^15.6.0",
-        "theming": "^1.3.0"
-      }
-    },
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -18667,17 +18583,6 @@
       "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
       "dev": true
     },
-    "theming": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/theming/-/theming-1.3.0.tgz",
-      "integrity": "sha512-ya5Ef7XDGbTPBv5ENTwrwkPUexrlPeiAg/EI9kdlUAZhNlRbCdhMKRgjNX1IcmsmiPcqDQZE6BpSaH+cr31FKw==",
-      "requires": {
-        "brcast": "^3.0.1",
-        "is-function": "^1.0.1",
-        "is-plain-object": "^2.0.1",
-        "prop-types": "^15.5.8"
-      }
-    },
     "thenify": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.0.tgz",
diff --git a/package.json b/package.json
index 64fcd1a..da194a4 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
   ],
   "main": "src/index.js",
   "scripts": {
-    "test": "jest --no-cache --coverage --coverageDirectory=output/coverage/jest",
+    "test": "jest -u --no-cache --coverage --coverageDirectory=output/coverage/jest",
     "test-watch": "jest --watch --no-cache --coverage --coverageDirectory=output/coverage/jest",
     "storybook": "start-storybook -p 6006",
     "dev": "NODE_ENV=development PORT=3333 webpack-serve --config ./webpack.config.js",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@azure/storage-blob": "^10.1.0-preview",
-    "@material-ui/core": "^3.0.3",
+    "@material-ui/core": "^3.2.2",
     "@material-ui/icons": "^3.0.1",
     "apollo-client": "^2.4.2",
     "blob-util": "^2.0.2",
diff --git a/src/image-upload/__tests__/CropperDialog.test.js b/src/image-upload/__tests__/CropperDialog.test.js
index 603cab7..1c9a7c8 100644
--- a/src/image-upload/__tests__/CropperDialog.test.js
+++ b/src/image-upload/__tests__/CropperDialog.test.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
+import { unwrap } from '@material-ui/core/test-utils'
 
 import { shallow } from '../../enzyme'
 
@@ -14,11 +15,31 @@ const cropPreview = {
 }
 const placeHolder = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22288%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20288%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164edaf95ee%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164edaf95ee%22%3E%3Crect%20width%3D%22288%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2296.32500076293945%22%20y%3D%22118.8%22%3EAvatar%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'
 
-describe('MessageCard tests', () => {
+const ComponentNaked = unwrap(CropperDialog)
+
+describe('CropperDialog tests', () => {
+  it('with shallow', () => {
+    const wrapper = shallow(<ComponentNaked open={false}
+      imgSrc={placeHolder}
+      handleClose={handleCloseMock}
+      handleCrop={handleCropMock}
+      handleCancel={handleCancelMock}
+      cropImagePreview={cropPreview}
+      cropperRef={(e) => this.instance()}
+      cropRatio={1}
+      classes={{
+        dialogContainer: '',
+        cropImageBox: ''
+      }}
+    />)
+    console.log('shallow', wrapper.debug())
+    expect(wrapper.find('CropperDialog')).toBeDefined()
+  })
+
   it('renders matching snapshot with dialog closed', () => {
     const tree = renderer
       .create(
-        <CropperDialog
+        <ComponentNaked
           open={false}
           imgSrc={placeHolder}
           handleClose={handleCloseMock}
@@ -26,6 +47,33 @@ describe('MessageCard tests', () => {
           handleCancel={handleCancelMock}
           cropImagePreview={cropPreview}
           cropperRef={(e) => this.instance()}
+          cropRatio={1}
+          classes={{
+            dialogContainer: '',
+            cropImageBox: ''
+          }}
+        />
+      )
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('renders matching snapshot with dialog open', () => {
+    const tree = renderer
+      .create(
+        <ComponentNaked
+          open={true}
+          imgSrc={placeHolder}
+          handleClose={handleCloseMock}
+          handleCrop={handleCropMock}
+          handleCancel={handleCancelMock}
+          cropImagePreview={cropPreview}
+          cropperRef={(e) => this.instance()}
+          cropRatio={1}
+          classes={{
+            dialogContainer: '',
+            cropImageBox: ''
+          }}
         />
       )
       .toJSON()
@@ -42,6 +90,11 @@ describe('MessageCard tests', () => {
         handleCancel={handleCancelMock}
         cropImagePreview={cropPreview}
         cropperRef={(e) => this.instance()}
+        cropRatio={1}
+        classes={{
+          dialogContainer: '',
+          cropImageBox: ''
+        }}
       />
     )
 
diff --git a/src/image-upload/__tests__/__snapshots__/CropperDialog.test.js.snap b/src/image-upload/__tests__/__snapshots__/CropperDialog.test.js.snap
index 2dab86e..a70c7f8 100644
--- a/src/image-upload/__tests__/__snapshots__/CropperDialog.test.js.snap
+++ b/src/image-upload/__tests__/__snapshots__/CropperDialog.test.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MessageCard tests renders matching snapshot with dialog closed 1`] = `null`;
+exports[`CropperDialog tests renders matching snapshot with dialog closed 1`] = `null`;
diff --git a/src/message-card/__tests__/__snapshots__/MessageCard.test.js.snap b/src/message-card/__tests__/__snapshots__/MessageCard.test.js.snap
index 02480a4..e35a3b3 100644
--- a/src/message-card/__tests__/__snapshots__/MessageCard.test.js.snap
+++ b/src/message-card/__tests__/__snapshots__/MessageCard.test.js.snap
@@ -10,11 +10,11 @@ exports[`MessageCard tests renders matching snapshot 1`] = `
     <div
       className="MuiCardContent-root-32 MessageCard-cardContent-3"
     >
-      <h1
-        className="MuiTypography-root-33 MuiTypography-headline-38 MuiTypography-gutterBottom-51 MuiTypography-alignCenter-47"
+      <h5
+        className="MuiTypography-root-33 MuiTypography-h5-49 MuiTypography-gutterBottom-60 MuiTypography-alignCenter-56"
       >
         Renders correctly
-      </h1>
+      </h5>
     </div>
   </div>
 </div>