diff --git a/ui/components/__test__/__snapshots__/discord-button.test.js.snap b/ui/components/__test__/__snapshots__/discord-button.test.js.snap
new file mode 100644
index 0000000..63a648e
--- /dev/null
+++ b/ui/components/__test__/__snapshots__/discord-button.test.js.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DiscordButton /> renders correctly 1`] = `
+<discord-button__Button>
+  <discord-button__ButtonIcon
+    src="/static/discord-logo.svg"
+  />
+   
+  Hello!
+</discord-button__Button>
+`;
diff --git a/ui/components/__test__/__snapshots__/discord-guild-pic.test.js.snap b/ui/components/__test__/__snapshots__/discord-guild-pic.test.js.snap
new file mode 100644
index 0000000..5ac5bd9
--- /dev/null
+++ b/ui/components/__test__/__snapshots__/discord-guild-pic.test.js.snap
@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DiscordGuildPic /> falls-back to a default when things go bad. 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: var(--fallback-color);
+}
+
+<DiscordGuildPic
+  icon="aaa"
+  id="0000"
+  name="Mock"
+>
+  <discord-guild-pic__Fallback
+    serverName="Mock"
+    style={
+      Object {
+        "--fallback-color": "hsl(77,50%,50%)",
+      }
+    }
+  >
+    <StyledComponent
+      forwardedComponent={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "attrs": Array [],
+          "componentStyle": ComponentStyle {
+            "componentId": "discord-guild-pic__Fallback-d55lwu-0",
+            "isStatic": true,
+            "lastClassName": "c0",
+            "rules": Array [
+              "display:flex;justify-content:center;align-items:center;background-color:var(--fallback-color);",
+            ],
+          },
+          "displayName": "discord-guild-pic__Fallback",
+          "foldedComponentIds": Array [],
+          "render": [Function],
+          "styledComponentId": "discord-guild-pic__Fallback-d55lwu-0",
+          "target": "div",
+          "toString": [Function],
+          "warnTooManyClasses": [Function],
+          "withComponent": [Function],
+        }
+      }
+      forwardedRef={null}
+      serverName="Mock"
+      style={
+        Object {
+          "--fallback-color": "hsl(77,50%,50%)",
+        }
+      }
+    >
+      <div
+        className="c0"
+        style={
+          Object {
+            "--fallback-color": "hsl(77,50%,50%)",
+          }
+        }
+      >
+        M
+      </div>
+    </StyledComponent>
+  </discord-guild-pic__Fallback>
+</DiscordGuildPic>
+`;
+
+exports[`<DiscordGuildPic /> renders a snapshot 1`] = `
+<DiscordGuildPic
+  icon="aaa"
+  id="0000"
+  name="Mock"
+>
+  <img
+    onError={[Function]}
+    onLoad={[Function]}
+    src="https://cdn.discordapp.com/icons/0000/aaa.png"
+  />
+</DiscordGuildPic>
+`;
diff --git a/ui/components/__test__/discord-button.test.js b/ui/components/__test__/discord-button.test.js
new file mode 100644
index 0000000..4694908
--- /dev/null
+++ b/ui/components/__test__/discord-button.test.js
@@ -0,0 +1,14 @@
+/* eslint-env jest */
+import * as React from 'react'
+// import renderer from 'react-test-renderer'
+import { shallow } from 'enzyme'
+import DiscordButton from '../discord-button'
+import 'jest-styled-components'
+
+describe('<DiscordButton />', () => {
+  it('renders correctly', () => {
+    const button = shallow(<DiscordButton>Hello!</DiscordButton>)
+    expect(button).toMatchSnapshot()
+    expect(button.text().trim()).toEqual('Hello!')
+  })
+})
diff --git a/ui/components/__test__/discord-guild-pic.test.js b/ui/components/__test__/discord-guild-pic.test.js
new file mode 100644
index 0000000..adaa5ac
--- /dev/null
+++ b/ui/components/__test__/discord-guild-pic.test.js
@@ -0,0 +1,33 @@
+/* eslint-env jest */
+import * as React from 'react'
+// import renderer from 'react-test-renderer'
+import { shallow, mount } from 'enzyme'
+import DiscordGuildPic from '../discord-guild-pic'
+import 'jest-styled-components'
+
+describe('<DiscordGuildPic />', () => {
+  const mockServer = {
+    id: '0000',
+    icon: 'aaa',
+    name: 'Mock'
+  }
+
+  it('renders a snapshot', () => {
+    const pic = mount(<DiscordGuildPic {...mockServer} />)
+    expect(pic).toMatchSnapshot()
+  })
+
+  it('renders a well-formatted guild pic correctly', () => {
+    const pic = shallow(<DiscordGuildPic {...mockServer} />)
+    const expectedSrc = `https://cdn.discordapp.com/icons/${mockServer.id}/${mockServer.icon}.png`
+    expect(pic.find('img').prop('src')).toEqual(expectedSrc)
+  })
+
+  it('falls-back to a default when things go bad.', () => {
+    const pic = mount(<DiscordGuildPic {...mockServer} />)
+    pic.find('img').simulate('error')
+    expect(pic).toMatchSnapshot()
+
+    expect(pic.text()).toEqual(mockServer.name[0])
+  })
+})
diff --git a/ui/components/role/__snapshots__/Role.test.js.snap b/ui/components/role/__snapshots__/Role.test.js.snap
deleted file mode 100644
index 8ca7588..0000000
--- a/ui/components/role/__snapshots__/Role.test.js.snap
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Role /> renders correctly 1`] = `
-<div
-  className="rolestyled-r4hjov-0 kfzQxT"
-  onClick={[Function]}
-  onTouchEnd={null}
-  onTouchStart={null}
-  style={
-    Object {
-      "--role-color-active": "hsl(0, 0%, 100%)",
-      "--role-color-base": "hsl(0, 0%, 100%)",
-      "--role-color-outline": "hsla(0, 0%, 100%, 0.7)",
-      "--role-color-outline-alt": "hsla(0, 0%, 100%, 0.4)",
-    }
-  }
-  title={null}
->
-  Test Role
-</div>
-`;
-
-exports[`<Role /> when disabled, does not trigger onToggle on click 1`] = `"<div disabled=\\"\\" style=\\"--role-color-outline:hsla(0, 0%, 100%, 0.7);--role-color-outline-alt:hsla(0, 0%, 100%, 0.4);--role-color-active:hsl(0, 0%, 100%);--role-color-base:hsl(0, 0%, 100%)\\" title=\\"This role has unsafe permissions.\\" class=\\"rolestyled-r4hjov-0 kfzQxT\\">Test Role</div>"`;
-
-exports[`<Role /> when disabled, handles touch hover events 1`] = `"<div disabled=\\"\\" style=\\"--role-color-outline:hsla(0, 0%, 100%, 0.7);--role-color-outline-alt:hsla(0, 0%, 100%, 0.4);--role-color-active:hsl(0, 0%, 100%);--role-color-base:hsl(0, 0%, 100%)\\" title=\\"This role has unsafe permissions.\\" class=\\"rolestyled-r4hjov-0 kfzQxT\\">unsafe role<div class=\\"tooltip-aykj5z-0 euOEXl\\">This role has unsafe permissions.</div></div>"`;
diff --git a/ui/components/role/__snapshots__/demo.test.js.snap b/ui/components/role/__snapshots__/demo.test.js.snap
deleted file mode 100644
index 52ce11c..0000000
--- a/ui/components/role/__snapshots__/demo.test.js.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<RoleDemo /> renders 1`] = `"<div style=\\"--role-color-outline:hsla(0, 0%, 100%, 0.7);--role-color-outline-alt:hsla(0, 0%, 100%, 0.4);--role-color-active:hsl(0, 0%, 100%);--role-color-base:hsl(0, 0%, 100%)\\" class=\\"rolestyled-r4hjov-0 kfzQxT\\">test demo role</div>"`;
diff --git a/ui/components/role/Role.test.js b/ui/components/role/__test__/Role.test.js
similarity index 87%
rename from ui/components/role/Role.test.js
rename to ui/components/role/__test__/Role.test.js
index 29c4d00..4e1def6 100644
--- a/ui/components/role/Role.test.js
+++ b/ui/components/role/__test__/Role.test.js
@@ -1,13 +1,14 @@
 /* eslint-env jest */
 
 import * as React from 'react'
-import renderer from 'react-test-renderer'
+// import renderer from 'react-test-renderer'
 import { shallow } from 'enzyme'
-import Role from './index'
+import Role from '../index'
+import 'jest-styled-components'
 
 describe('<Role />', () => {
   it('renders correctly', () => {
-    const role = renderer.create(<Role role={{ name: 'Test Role', color: '#ffffff' }} />)
+    const role = shallow(<Role role={{ name: 'Test Role', color: '#ffffff' }} />)
     expect(role).toMatchSnapshot()
   })
 
@@ -50,7 +51,7 @@ describe('<Role />', () => {
 
       role.simulate('touchstart')
       expect(role.state().hovering).toEqual(true)
-      expect(role.html()).toMatchSnapshot() // expecting tooltip
+      expect(role).toMatchSnapshot() // expecting tooltip
       expect(role.exists('tooltip')).toEqual(true)
 
       role.simulate('touchend')
@@ -67,7 +68,7 @@ describe('<Role />', () => {
           disabled
         />
       )
-      expect(role.html()).toMatchSnapshot()
+      expect(role).toMatchSnapshot()
       role.simulate('click')
 
       expect(role.html()).toBe(role.html())
diff --git a/ui/components/role/__test__/__snapshots__/Role.test.js.snap b/ui/components/role/__test__/__snapshots__/Role.test.js.snap
new file mode 100644
index 0000000..ffaaa12
--- /dev/null
+++ b/ui/components/role/__test__/__snapshots__/Role.test.js.snap
@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Role /> renders correctly 1`] = `
+<rolestyled
+  onClick={[Function]}
+  onTouchEnd={null}
+  onTouchStart={null}
+  style={
+    Object {
+      "--role-color-active": "hsl(0, 0%, 100%)",
+      "--role-color-base": "hsl(0, 0%, 100%)",
+      "--role-color-outline": "hsla(0, 0%, 100%, 0.7)",
+      "--role-color-outline-alt": "hsla(0, 0%, 100%, 0.4)",
+    }
+  }
+  title={null}
+>
+  Test Role
+</rolestyled>
+`;
+
+exports[`<Role /> when disabled, does not trigger onToggle on click 1`] = `
+<rolestyled
+  active={false}
+  disabled={true}
+  onClick={null}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    Object {
+      "--role-color-active": "hsl(0, 0%, 100%)",
+      "--role-color-base": "hsl(0, 0%, 100%)",
+      "--role-color-outline": "hsla(0, 0%, 100%, 0.7)",
+      "--role-color-outline-alt": "hsla(0, 0%, 100%, 0.4)",
+    }
+  }
+  title="This role has unsafe permissions."
+>
+  Test Role
+</rolestyled>
+`;
+
+exports[`<Role /> when disabled, handles touch hover events 1`] = `
+<rolestyled
+  disabled={true}
+  onClick={null}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  style={
+    Object {
+      "--role-color-active": "hsl(0, 0%, 100%)",
+      "--role-color-base": "hsl(0, 0%, 100%)",
+      "--role-color-outline": "hsla(0, 0%, 100%, 0.7)",
+      "--role-color-outline-alt": "hsla(0, 0%, 100%, 0.4)",
+    }
+  }
+  title="This role has unsafe permissions."
+>
+  unsafe role
+  <tooltip>
+    This role has unsafe permissions.
+  </tooltip>
+</rolestyled>
+`;
diff --git a/ui/components/role/__test__/__snapshots__/demo.test.js.snap b/ui/components/role/__test__/__snapshots__/demo.test.js.snap
new file mode 100644
index 0000000..e716e20
--- /dev/null
+++ b/ui/components/role/__test__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RoleDemo /> renders 1`] = `
+<Role
+  active={false}
+  onToggle={[Function]}
+  role={
+    Object {
+      "color": "#ffffff",
+      "name": "test demo role",
+    }
+  }
+/>
+`;
diff --git a/ui/components/role/demo.test.js b/ui/components/role/__test__/demo.test.js
similarity index 83%
rename from ui/components/role/demo.test.js
rename to ui/components/role/__test__/demo.test.js
index d49a8fb..31b4390 100644
--- a/ui/components/role/demo.test.js
+++ b/ui/components/role/__test__/demo.test.js
@@ -1,12 +1,13 @@
 /* eslint-env jest */
 import * as React from 'react'
 import { shallow } from 'enzyme'
-import RoleDemo from './demo'
+import RoleDemo from '../demo'
+import 'jest-styled-components'
 
 describe('<RoleDemo />', () => {
   it('renders', () => {
     const demo = shallow(<RoleDemo role={{ name: 'test demo role', color: '#ffffff' }} />)
-    expect(demo.html()).toMatchSnapshot()
+    expect(demo).toMatchSnapshot()
   })
 
   it('changes state when clicked', () => {
diff --git a/ui/components/role/index.js b/ui/components/role/index.js
index d5a312f..c3cd861 100644
--- a/ui/components/role/index.js
+++ b/ui/components/role/index.js
@@ -4,6 +4,8 @@ import { colors } from '../global-colors'
 import Color from 'color'
 import RoleStyled from './role.styled'
 import Tooltip from '../tooltip'
+import logger from '../../../logger'
+const log = logger(__filename)
 
 const fromColors = (colors) => Object.entries(colors).reduce(
   (acc, [v, val]) => ({ ...acc, [`--role-color-${v}`]: val })
@@ -43,15 +45,15 @@ export default class Role extends React.Component<RoleProps, RoleState> {
   }
 
   onMouseOver = () => {
-    console.log('caught hovering')
+    log.debug('caught hovering')
     if (this.props.disabled && this.state.hovering === false) {
-      console.log('set hovering')
+      log.debug('set hovering')
       this.setState({ hovering: true })
     }
   }
 
   onMouseOut = () => {
-    console.log('out hovering')
+    log.debug('out hovering')
     this.setState({ hovering: false })
   }