diff --git a/packages/lib-classifier/src/components/Classifier/components/FieldGuide/FieldGuideContainer.js b/packages/lib-classifier/src/components/Classifier/components/FieldGuide/FieldGuideContainer.js
index 2d3665861f7..9ce0061c773 100644
--- a/packages/lib-classifier/src/components/Classifier/components/FieldGuide/FieldGuideContainer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/FieldGuide/FieldGuideContainer.js
@@ -36,6 +36,7 @@ class FieldGuideContainer extends React.Component {
         <Modal
           active={showModal}
           closeFn={this.onClose.bind(this)}
+          pad='small'
           title={counterpart('FieldGuide.title')}
         >
           <FieldGuide />
diff --git a/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/FieldGuide.js b/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/FieldGuide.js
index 73e932f42d7..b14dd6d99d3 100644
--- a/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/FieldGuide.js
+++ b/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/FieldGuide.js
@@ -1,22 +1,15 @@
 import { Box } from 'grommet'
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
+import { ResponsiveContext } from 'grommet'
 import { inject, observer } from 'mobx-react'
 import FieldGuideItems from './components/FieldGuideItems'
 import FieldGuideItem from './components/FieldGuideItem'
 
-const StyledBox = styled(Box)`
-  max-height: 415px;
-  max-width: 490px;
-  overflow: auto;
-`
-
-
 function storeMapper(stores) {
-  const { active: fieldGuide, activeItem } = stores.classifierStore.fieldGuide
+  const { active: fieldGuide, activeItemIndex } = stores.classifierStore.fieldGuide
   return {
-    activeItem,
+    activeItemIndex,
     items: fieldGuide.items
   }
 }
@@ -25,24 +18,30 @@ function storeMapper(stores) {
 @observer
 class FieldGuide extends React.Component {
   render () {
-    const { activeItem, className, items } = this.props
+    const { activeItemIndex, className, items } = this.props
     return (
-      <StyledBox className={className}>
-        {items[activeItem] ?
-          <FieldGuideItem item={items[activeItem]} /> :
-          <FieldGuideItems items={items} />}
-      </StyledBox>
+      <ResponsiveContext.Consumer>
+        {size => {
+          const height = (size === 'small') ? '100%' : '415px'
+          const width = (size === 'small') ? '100%' : '490px'
+          return (
+            <Box className={className} height={height} overflow='auto' width={width}>
+              {items[activeItemIndex] ?
+                <FieldGuideItem item={items[activeItemIndex]} /> :
+                <FieldGuideItems items={items} />}
+            </Box>)}}
+      </ResponsiveContext.Consumer>
     )
   }
 }
 
 FieldGuide.wrappedComponent.defaultProps = {
-  activeItem: -1,
+  activeItemIndex: -1,
   className: '',
 }
 
 FieldGuide.wrappedComponent.propTypes = {
-  activeItem: PropTypes.number,
+  activeItemIndex: PropTypes.number,
   className: PropTypes.string,
   items: PropTypes.arrayOf(PropTypes.object).isRequired
 }
diff --git a/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItem/FieldGuideItem.js b/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItem/FieldGuideItem.js
index a6b36657acc..8fec272f055 100644
--- a/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItem/FieldGuideItem.js
+++ b/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItem/FieldGuideItem.js
@@ -2,15 +2,26 @@ import { Button, Box } from 'grommet'
 import { FormPrevious } from 'grommet-icons'
 import styled from 'styled-components'
 import React from 'react'
-import { Markdownz, Media } from '@zooniverse/react-components'
+import { Markdownz } from '@zooniverse/react-components'
+import zooTheme from '@zooniverse/grommet-theme'
 import PropTypes from 'prop-types'
 import { observable } from 'mobx'
 import { inject, observer, PropTypes as MobXPropTypes } from 'mobx-react'
+import FieldGuideItemIcon from '../FieldGuideItemIcon'
 import counterpart from 'counterpart'
 import en from './locales/en'
 
 counterpart.registerTranslations('en', en)
 
+const StyledButton = styled(Button)`
+  padding: 0;
+
+  &:hover > svg, &:focus > svg {
+    fill: ${zooTheme.global.colors['dark-5']};
+    stroke: ${zooTheme.global.colors['dark-5']};
+  }
+`
+
 const FieldGuideItemHeader = styled(Box)`
   > h3 {
     margin: 0;
@@ -18,10 +29,10 @@ const FieldGuideItemHeader = styled(Box)`
 `
 
 function storeMapper(stores) {
-  const { setActiveItem, attachedMedia: icons } = stores.classifierStore.fieldGuide
+  const { setActiveItemIndex, attachedMedia: icons } = stores.classifierStore.fieldGuide
   return {
     icons,
-    setActiveItem
+    setActiveItemIndex
   }
 }
 
@@ -29,16 +40,17 @@ function storeMapper(stores) {
 @observer
 class FieldGuideItem extends React.Component {
   render () {
-    const { className, icons, item, setActiveItem } = this.props
+    const { className, icons, item, setActiveItemIndex } = this.props
     const icon = icons.get(item.icon)
 
     return (
       <Box className={className}>
-        <FieldGuideItemHeader align='center' direction='row'>
-          <Button
+        <FieldGuideItemHeader align='center' direction='row' margin={{ bottom: 'small' }}>
+          <StyledButton
             a11yTitle={counterpart("FieldGuideItem.ariaTitle")}
-            icon={<FormPrevious />}
-            onClick={() => setActiveItem()}
+            icon={<FormPrevious color='light-5' />}
+            margin={{ right: 'small' }}
+            onClick={() => setActiveItemIndex()}
             plain
           />
           <Markdownz>
@@ -46,8 +58,7 @@ class FieldGuideItem extends React.Component {
           </Markdownz>
         </FieldGuideItemHeader>
         <Box direction='column'>
-          {icon && Object.keys(icon).length > 0 &&
-            <Media fit='contain' height={140} src={icon.src} />}
+          <FieldGuideItemIcon icon={icon} height='140' viewBox='0 0 200 100' />
           <Markdownz>
             {item.content}
           </Markdownz>
@@ -66,7 +77,7 @@ FieldGuideItem.wrappedComponent.propTypes = {
   className: PropTypes.string,
   icons: MobXPropTypes.observableMap,
   item: PropTypes.object.isRequired,
-  setActiveItem: PropTypes.func.isRequired
+  setActiveItemIndex: PropTypes.func.isRequired
 }
 
 export default FieldGuideItem
\ No newline at end of file
diff --git a/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItem/FieldGuideItem.spec.js b/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItem/FieldGuideItem.spec.js
index 5051b13ab8d..a32c3924685 100644
--- a/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItem/FieldGuideItem.spec.js
+++ b/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItem/FieldGuideItem.spec.js
@@ -22,21 +22,21 @@ describe('Component > FieldGuideItem', function () {
       <FieldGuideItem.wrappedComponent
         icons={attachedMedia}
         item={item}
-        setActiveItem={() => { }}
+        setActiveItemIndex={() => { }}
       />)
     expect(wrapper).to.be.ok
   })
 
-  it('should call setActiveItem when the previous button is clicked', function () {
-    const setActiveItemSpy = sinon.spy()
+  it('should call setActiveItemIndex when the previous button is clicked', function () {
+    const setActiveItemIndexSpy = sinon.spy()
     const wrapper = mount(
       <FieldGuideItem.wrappedComponent
         icons={attachedMedia}
         item={item}
-        setActiveItem={setActiveItemSpy}
+        setActiveItemIndex={setActiveItemIndexSpy}
       />)
     wrapper.find(Button).simulate('click')
-    expect(setActiveItemSpy).to.have.been.calledOnceWith()
+    expect(setActiveItemIndexSpy).to.have.been.calledOnceWith()
   })
 
   it('should render the item title as markdown', function () {
@@ -44,7 +44,7 @@ describe('Component > FieldGuideItem', function () {
       <FieldGuideItem.wrappedComponent
         icons={attachedMedia}
         item={item}
-        setActiveItem={() => {}}
+        setActiveItemIndex={() => {}}
       />)
 
     expect(wrapper.find(Markdownz).first().contains(`### ${item.title}`)).to.be.true
@@ -55,7 +55,7 @@ describe('Component > FieldGuideItem', function () {
       <FieldGuideItem.wrappedComponent
         icons={attachedMedia}
         item={item}
-        setActiveItem={() => { }}
+        setActiveItemIndex={() => { }}
       />)
 
     expect(wrapper.find(Markdownz).last().contains(item.content)).to.be.true
@@ -66,7 +66,7 @@ describe('Component > FieldGuideItem', function () {
       <FieldGuideItem.wrappedComponent
         icons={attachedMedia}
         item={item}
-        setActiveItem={() => { }}
+        setActiveItemIndex={() => { }}
       />)
 
     expect(wrapper.find(Media)).to.have.lengthOf(1)
@@ -78,7 +78,7 @@ describe('Component > FieldGuideItem', function () {
       <FieldGuideItem.wrappedComponent
         icons={observable.map()}
         item={item}
-        setActiveItem={() => { }}
+        setActiveItemIndex={() => { }}
       />)
 
     expect(wrapper.find(Media)).to.have.lengthOf(0)
diff --git a/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItemIcon/FieldGuideItemIcon.js b/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItemIcon/FieldGuideItemIcon.js
new file mode 100644
index 00000000000..0b96c95ca13
--- /dev/null
+++ b/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItemIcon/FieldGuideItemIcon.js
@@ -0,0 +1,36 @@
+import zooTheme from '@zooniverse/grommet-theme'
+import React from 'react'
+import { Media } from '@zooniverse/react-components'
+import PropTypes from 'prop-types'
+
+export default function FieldGuideItemIcon({ alt, className, height, icon, viewBox, width }) {
+  if (icon && Object.keys(icon).length > 0) {
+    return (
+      <Media alt={alt} className={className} fit='contain' height={height} src={icon.src} width={width} />
+    )
+  }
+
+  return (
+    <svg className={className} viewBox={viewBox}>
+      <rect fill={zooTheme.global.colors['accent-2']} height={height} width={width} />
+    </svg>
+  )
+}
+
+FieldGuideItemIcon.defaultProps = {
+  alt: '',
+  className: '',
+  height: '100%',
+  icon: {},
+  viewBox: '0 0 100 100',
+  width: '100%'
+}
+
+FieldGuideItemIcon.propTypes = {
+  alt: PropTypes.string,
+  className: PropTypes.string,
+  height: PropTypes.string,
+  icon: PropTypes.object,
+  viewBox: PropTypes.string,
+  width: PropTypes.string
+}
\ No newline at end of file
diff --git a/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItemIcon/FieldGuideItemIcon.spec.js b/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItemIcon/FieldGuideItemIcon.spec.js
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItemIcon/index.js b/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItemIcon/index.js
new file mode 100644
index 00000000000..d88ed25da1d
--- /dev/null
+++ b/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItemIcon/index.js
@@ -0,0 +1 @@
+export { default } from './FieldGuideItemIcon'
\ No newline at end of file
diff --git a/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItems/FieldGuideItemAnchor.js b/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItems/FieldGuideItemAnchor.js
index 535d1e7e5b1..c8635bec7aa 100644
--- a/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItems/FieldGuideItemAnchor.js
+++ b/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItems/FieldGuideItemAnchor.js
@@ -1,30 +1,15 @@
-import zooTheme from '@zooniverse/grommet-theme'
 import { Anchor, Box } from 'grommet'
-import styled from 'styled-components'
 import React from 'react'
 import { observable } from 'mobx'
-import { Markdownz, Media } from '@zooniverse/react-components'
+import { Markdownz } from '@zooniverse/react-components'
 import PropTypes from 'prop-types'
 import { inject, observer, PropTypes as MobXPropTypes } from 'mobx-react'
+import FieldGuideItemIcon from '../FieldGuideItemIcon'
 import counterpart from 'counterpart'
 import en from './locales/en'
 
 counterpart.registerTranslations('en', en)
 
-export function Icon({ className, icon }) {
-  if (icon && Object.keys(icon).length > 0) {
-    return (
-      <Media className={className} src={icon.src} />
-    )
-  }
-
-  return (
-    <svg className={className} viewBox='0 0 100 100'>
-      <rect fill={zooTheme.global.colors['accent-2']} height='100' width='100' />
-    </svg>
-  )
-}
-
 export function AnchorLabel({ className, icons, item }) {
   const icon = icons.get(item.icon)
   return (
@@ -34,7 +19,7 @@ export function AnchorLabel({ className, icons, item }) {
       direction='column'
       width='100px'
     >
-      <Icon icon={icon} />
+      <FieldGuideItemIcon alt={item.title} height='100' icon={icon} width='100' />
       <Markdownz>
         {item.title}
       </Markdownz>
@@ -60,23 +45,18 @@ class FieldGuideItemAnchor extends React.Component {
   }
 
   render () {
-    const { className, icons, row } = this.props
+    const { className, icons, item } = this.props
+    const label = <AnchorLabel icons={icons} item={item} />
 
     return (
-      row.map((item) => {
-        const label = <AnchorLabel icons={icons} item={item} />
-        return (
-          <Anchor
-            a11yTitle={counterpart('FieldGuideItemAnchor.ariaTitle', { title: item.title })}
-            className={className}
-            color='dark-5'
-            href=''
-            key={item.title}
-            label={label}
-            onClick={(event) => this.onClick(event, item)}
-          />
-        )
-      })
+      <Anchor
+        a11yTitle={counterpart('FieldGuideItemAnchor.ariaTitle', { title: item.title })}
+        className={className}
+        color='dark-5'
+        href=''
+        label={label}
+        onClick={(event) => this.onClick(event, item)}
+      />
     )
   }
 }
@@ -89,7 +69,7 @@ FieldGuideItemAnchor.wrappedComponent.defaultProps = {
 FieldGuideItemAnchor.wrappedComponent.propTypes = {
   className: PropTypes.string,
   icons: MobXPropTypes.observableMap,
-  row: PropTypes.arrayOf(PropTypes.object).isRequired,
+  item: PropTypes.object.isRequired,
   setActiveItemIndex: PropTypes.func.isRequired
 }
 
diff --git a/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItems/FieldGuideItems.js b/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItems/FieldGuideItems.js
index 06251cec0ac..e894db3a070 100644
--- a/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItems/FieldGuideItems.js
+++ b/packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/components/FieldGuideItems/FieldGuideItems.js
@@ -1,27 +1,21 @@
-import { Box, Grid } from 'grommet'
+import { Grid } from 'grommet'
 import React from 'react'
 import PropTypes from 'prop-types'
-import chunk from 'lodash/chunk'
 import FieldGuideItemAnchor from './FieldGuideItemAnchor'
 
 export default function FieldGuideItems({ className, items }) {
-  const gridRows = chunk(items, 4)
   return (
-    <Box basis='full' className={className} direction='row' wrap>
-      {gridRows.map((row, index) => {
-        return (
-          <Grid
-            columns={['100px', '100px', '100px', '100px']}
-            key={index}
-            margin={{ bottom: 'small' }}
-            gap='medium'
-            rows={['150px']}
-          >
-            <FieldGuideItemAnchor row={row} />
-          </Grid>
-        )
-      })}
-    </Box>
+    <Grid
+      className={className}
+      columns={{ count: 'fill', size: '100px' }}
+      margin={{ bottom: 'small' }}
+      gap='medium'
+      rows='150px'
+      width='100%'
+    >
+      {items.map((item) => {
+        return (<FieldGuideItemAnchor key={item.title} item={item} />)})}
+    </Grid>
   )
 }
 
diff --git a/packages/lib-classifier/src/store/FieldGuideStore.js b/packages/lib-classifier/src/store/FieldGuideStore.js
index 3228a1569b2..292cb9fd7a7 100644
--- a/packages/lib-classifier/src/store/FieldGuideStore.js
+++ b/packages/lib-classifier/src/store/FieldGuideStore.js
@@ -93,6 +93,7 @@ const FieldGuideStore = types
     }
 
     function setActiveItemIndex (item) {
+      console.log('calling')
       const fieldGuide = self.active
       if (fieldGuide) {
         const { items } = fieldGuide
diff --git a/packages/lib-react-components/src/Modal/Modal.js b/packages/lib-react-components/src/Modal/Modal.js
index 4e283aa44f6..cc7f33b291f 100644
--- a/packages/lib-react-components/src/Modal/Modal.js
+++ b/packages/lib-react-components/src/Modal/Modal.js
@@ -5,11 +5,11 @@ import WithLayer from './WithLayer'
 import ModalBody from './components/ModalBody'
 import ModalHeading from './components/ModalHeading'
 
-function Modal ({ children, className, closeFn, colorTheme, theme, title }) {
+function Modal ({ children, className, closeFn, colorTheme, pad, title }) {
   return (
     <React.Fragment>
       <ModalHeading className={className} closeFn={closeFn} title={title} />
-      <ModalBody className={className} colorTheme={colorTheme}>
+      <ModalBody className={className} colorTheme={colorTheme} pad={pad}>
         {children}
       </ModalBody>
     </React.Fragment>
diff --git a/packages/lib-react-components/src/Modal/README.md b/packages/lib-react-components/src/Modal/README.md
index ac8d7518fa7..9bf927e8298 100644
--- a/packages/lib-react-components/src/Modal/README.md
+++ b/packages/lib-react-components/src/Modal/README.md
@@ -7,7 +7,7 @@ A generic modal component. Accepts the following props:
 - `active` (boolean) - determines whether the modal is visible or not
 - `closeFn` (function) - function called when clicking outside the modal, or when the Esc button is pressed
 - `colorTheme` (string) - color theme to use with the modal. Defaults to `light`
-- `theme` (object) - Grommet theme to use. Defaults to `@zooniverse/grommet-theme`
+- `pad` (string or object) - determines Box padding of the modal body. Defaults to `medium`.
 - `title` (string) - string to use as the modal title
 
 ## Example
diff --git a/packages/lib-react-components/src/Modal/components/ModalBody/ModalBody.js b/packages/lib-react-components/src/Modal/components/ModalBody/ModalBody.js
index 0bdfc7d997b..eb0da50dd3c 100644
--- a/packages/lib-react-components/src/Modal/components/ModalBody/ModalBody.js
+++ b/packages/lib-react-components/src/Modal/components/ModalBody/ModalBody.js
@@ -5,14 +5,15 @@ import React from 'react'
 function ModalBody ({
   children,
   className,
-  colorTheme
+  colorTheme,
+  pad
 }) {
   const background = (colorTheme === 'light') ? 'white' : 'dark-5'
   return (
     <Box
       background={background}
       className={className}
-      pad='medium'
+      pad={pad}
     >
       {children}
     </Box>
@@ -22,12 +23,13 @@ function ModalBody ({
 ModalBody.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node.isRequired,
-  colorTheme: PropTypes.oneOf(['light', 'dark'])
+  colorTheme: PropTypes.oneOf(['light', 'dark']),
 }
 
 ModalBody.defaultProps = {
   className: '',
-  colorTheme: 'light'
+  colorTheme: 'light',
+  pad: 'medium'
 }
 
 export default ModalBody