diff --git a/__tests__/src/components/WindowSideBarInfoPanel.test.js b/__tests__/src/components/WindowSideBarInfoPanel.test.js
index e74a3e79929e997a818a56538cf1402fbf66c676..5180d0f50e7a093662b926bc19df3be2e2428b7d 100644
--- a/__tests__/src/components/WindowSideBarInfoPanel.test.js
+++ b/__tests__/src/components/WindowSideBarInfoPanel.test.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import Typography from '@material-ui/core/Typography';
 import createStore from '../../../src/state/createStore';
 import * as actions from '../../../src/state/actions';
 import WindowSideBarInfoPanel from '../../../src/components/WindowSideBarInfoPanel';
@@ -13,12 +14,28 @@ describe('WindowSideBarInfoPanel', () => {
   beforeEach(() => {
     store.dispatch(actions.receiveManifest('foo', fixture));
     manifest = store.getState().manifests.foo;
-    wrapper = shallow(<WindowSideBarInfoPanel manifest={manifest} />);
+    wrapper = shallow(
+      <WindowSideBarInfoPanel manifest={manifest} />,
+    ).dive();
   });
 
   it('renders without an error', () => {
-    expect(wrapper.find('h2').text()).toBe('About this item');
-    expect(wrapper.find('h3').text()).toBe('Bodleian Library Human Freaks 2 (33)');
-    expect(wrapper.find('.mirador-window-sidebar-info-panel div').text()).toBe('[Handbill of Mr. Becket, [1787] ]');
+    expect(
+      wrapper.find('WithStyles(Typography)[variant="h2"]').first().matchesElement(
+        <Typography>About this item</Typography>,
+      ),
+    ).toBe(true);
+
+    expect(
+      wrapper.find('WithStyles(Typography)[variant="h3"]').first().matchesElement(
+        <Typography>Bodleian Library Human Freaks 2 (33)</Typography>,
+      ),
+    ).toBe(true);
+
+    expect(
+      wrapper.find('WithStyles(Typography)[variant="body2"]').first().matchesElement(
+        <Typography>[Handbill of Mr. Becket, [1787] ]</Typography>,
+      ),
+    ).toBe(true);
   });
 });
diff --git a/__tests__/src/components/WindowSideBarPanel.test.js b/__tests__/src/components/WindowSideBarPanel.test.js
index 1478f900e36add28440a0f2a47a87ea14f07c015..d262ecd0f59dd1a06423b1579079321302905bd9 100644
--- a/__tests__/src/components/WindowSideBarPanel.test.js
+++ b/__tests__/src/components/WindowSideBarPanel.test.js
@@ -21,7 +21,7 @@ describe('WindowSideBarPanel', () => {
     });
 
     it('renders the WindowSideBarInfoPanel', () => {
-      expect(wrapper.find('WindowSideBarInfoPanel').length).toBe(1);
+      expect(wrapper.find('WithStyles(WindowSideBarInfoPanel)').length).toBe(1);
     });
   });
 
@@ -31,7 +31,7 @@ describe('WindowSideBarPanel', () => {
     });
 
     it('does not render any panel component', () => {
-      expect(wrapper.find('WindowSideBarInfoPanel').length).toBe(0);
+      expect(wrapper.find('WithStyes(WindowSideBarInfoPanel)').length).toBe(0);
     });
   });
 });
diff --git a/src/components/WindowSideBarInfoPanel.js b/src/components/WindowSideBarInfoPanel.js
index 83de8502b1559a935a636c4e4dc5bd816e61ef73..80904da9938cb336834d86f414c47199cb990c18 100644
--- a/src/components/WindowSideBarInfoPanel.js
+++ b/src/components/WindowSideBarInfoPanel.js
@@ -1,11 +1,13 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import Typography from '@material-ui/core/Typography';
+import { withStyles } from '@material-ui/core/styles';
 import ns from '../config/css-ns';
 
 /**
  * WindowSideBarInfoPanel
  */
-export default class WindowSideBarInfoPanel extends Component {
+class WindowSideBarInfoPanel extends Component {
   /**
    * manifestLabel - get the label from the manifesto manifestation
    * @return String
@@ -37,21 +39,34 @@ export default class WindowSideBarInfoPanel extends Component {
    * @return
    */
   render() {
+    const { classes } = this.props;
     return (
       <div className={ns('window-sidebar-info-panel')}>
-        <h2>About this item</h2>
-        <h3>{this.manifestLabel()}</h3>
-        <div>{this.manifestDescription()}</div>
+        <Typography variant="h2" className={classes.windowSideBarH2}>About this item</Typography>
+        <Typography variant="h3" className={classes.windowSideBarH3}>{this.manifestLabel()}</Typography>
+        <Typography variant="body2">{this.manifestDescription()}</Typography>
       </div>
     );
   }
 }
 
 WindowSideBarInfoPanel.propTypes = {
+  classes: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   manifest: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 };
 
 
 WindowSideBarInfoPanel.defaultProps = {
+  classes: {},
   manifest: {},
 };
+
+/**
+ * @private
+ */
+const styles = theme => ({
+  windowSideBarH2: theme.typography.h5,
+  windowSideBarH3: theme.typography.h6,
+});
+
+export default withStyles(styles)(WindowSideBarInfoPanel);