diff --git a/packages/ui/src/atoms/AlignmentBox.js b/packages/ui/src/atoms/AlignmentBox.js
index a14108e6947a23cae1bd6c6aa3ed66bb39347c8c..f9481d5104aca098d73cff247399172e91b205e9 100644
--- a/packages/ui/src/atoms/AlignmentBox.js
+++ b/packages/ui/src/atoms/AlignmentBox.js
@@ -6,6 +6,10 @@ const lightGrey = '#b3b3b3'
 const mainGrey = '#666'
 const whiteRGBA = 'rgba(255, 255, 255, 1)'
 
+const borderRule = position => props => `
+    border-${position}-width: ${props.noBorder[position] ? '0' : '1px'};
+  `
+
 const Root = styled.div.attrs({
   role: 'presentation',
 })`
@@ -16,12 +20,10 @@ const Root = styled.div.attrs({
 
   border-style: solid;
   border-color: ${mainGrey};
-  border-top-width: ${props => (props.noBorder.top ? 0 : 1)}px;
-  border-right-width: ${props => (props.noBorder.right ? 0 : 1)}px;
-  border-bottom-width: ${props => (props.noBorder.bottom ? 0 : 1)}px;
-  border-left-width: ${props => (props.noBorder.left ? 0 : 1)}px;
-
-  background-color: ${props => (props.active ? mainGrey : 'transparent')};
+  ${borderRule('top')} ${borderRule('right')} ${borderRule(
+      'bottom',
+    )} ${borderRule('left')} background-color: ${props =>
+      props.active ? mainGrey : 'transparent'};
 
   &:hover {
     background-color: ${lightGrey};
diff --git a/packages/ui/test/AlignmentBox.test.js b/packages/ui/test/AlignmentBox.test.js
index dacaab237f80741b8d7baa63d4fb133be06042ff..df262ea936788a78c31d1feeaee0c55492ac5e21 100644
--- a/packages/ui/test/AlignmentBox.test.js
+++ b/packages/ui/test/AlignmentBox.test.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import { shallow, mount } from 'enzyme'
 import renderer from 'react-test-renderer'
+import 'jest-styled-components'
 
 import AlignmentBox from '../src/atoms/AlignmentBox'
 
@@ -22,9 +23,6 @@ const requiredProps = {
   id: 'left',
 }
 
-const wrapper = shallow(<AlignmentBox {...requiredProps} />)
-const wrapperMounted = mount(<AlignmentBox {...requiredProps} />)
-
 describe('AlignmentBox', () => {
   test('is rendered correctly', () => {
     const tree = renderer.create(<AlignmentBox {...requiredProps} />).toJSON()
@@ -32,6 +30,8 @@ describe('AlignmentBox', () => {
   })
 
   test('gets the correct props', () => {
+    const wrapperMounted = mount(<AlignmentBox {...requiredProps} />)
+
     const noBorderDefaults = {
       top: false,
       bottom: false,
@@ -45,21 +45,21 @@ describe('AlignmentBox', () => {
   })
 
   test('with default props has borders and has not active indicator', () => {
-    expect(wrapper.is('.active')).toBe(false)
-    expect(wrapper.is('.noBorderTop')).toBe(false)
-    expect(wrapper.is('.noBorderRight')).toBe(false)
-    expect(wrapper.is('.noBorderBottom')).toBe(false)
-    expect(wrapper.is('.noBorderLeft')).toBe(false)
+    const tree = renderer.create(<AlignmentBox {...requiredProps} />).toJSON()
+    expect(tree).toHaveStyleRule('background-color', 'transparent')
+    expect(tree).toHaveStyleRule('border-top-width', '1px')
+    expect(tree).toHaveStyleRule('border-right-width', '1px')
+    expect(tree).toHaveStyleRule('border-bottom-width', '1px')
+    expect(tree).toHaveStyleRule('border-left-width', '1px')
   })
 
   test('with given props has the correct classes', () => {
-    const newWrapper = shallow(<AlignmentBox {...props} />)
-
-    expect(newWrapper.is('.active')).toBe(true)
-    expect(newWrapper.is('.noBorderTop')).toBe(true)
-    expect(newWrapper.is('.noBorderRight')).toBe(true)
-    expect(newWrapper.is('.noBorderBottom')).toBe(true)
-    expect(newWrapper.is('.noBorderLeft')).toBe(true)
+    const tree = renderer.create(<AlignmentBox {...props} />).toJSON()
+    expect(tree).toHaveStyleRule('background-color', '#666')
+    expect(tree).toHaveStyleRule('border-top-width', '0')
+    expect(tree).toHaveStyleRule('border-right-width', '0')
+    expect(tree).toHaveStyleRule('border-bottom-width', '0')
+    expect(tree).toHaveStyleRule('border-left-width', '0')
   })
 
   test('on click the corresponding method is triggered', () => {
diff --git a/packages/ui/test/__snapshots__/AlignmentBox.test.js.snap b/packages/ui/test/__snapshots__/AlignmentBox.test.js.snap
index f7f271185a7112f7f77d90bf23710733605c5de8..86696b1d2949eb4160f3299cb1e19caf5e417d60 100644
--- a/packages/ui/test/__snapshots__/AlignmentBox.test.js.snap
+++ b/packages/ui/test/__snapshots__/AlignmentBox.test.js.snap
@@ -1,8 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AlignmentBox is rendered correctly 1`] = `
+.c0 {
+  box-shadow: inset 0 0 0 2px rgba(255,255,255,1);
+  cursor: pointer;
+  height: 26px;
+  width: 17px;
+  border-style: solid;
+  border-color: #666;
+  border-top-width: 1px;
+  border-right-width: 1px;
+  border-bottom-width: 1px;
+  border-left-width: 1px;
+  background-color: transparent;
+}
+
+.c0:hover {
+  background-color: #b3b3b3;
+}
+
 <div
-  className="root"
+  className="c0"
   id="left"
   onClick={[Function]}
   role="presentation"
diff --git a/packages/ui/test/__snapshots__/AlignmentBoxWithLabel.test.js.snap b/packages/ui/test/__snapshots__/AlignmentBoxWithLabel.test.js.snap
index 8379b0f9e228cfe420cbb2c909cd8b17a10b0a1e..187ac4791129dbb87378ab0eeaf3e59b289735b0 100644
--- a/packages/ui/test/__snapshots__/AlignmentBoxWithLabel.test.js.snap
+++ b/packages/ui/test/__snapshots__/AlignmentBoxWithLabel.test.js.snap
@@ -10,7 +10,7 @@ exports[`AlignmentBoxWithLabel is rendered correctly 1`] = `
     Left
   </span>
   <div
-    className="root"
+    className="sc-bdVaJa iAeTlR"
     id="left"
     onClick={[Function]}
     role="presentation"
diff --git a/packages/ui/test/__snapshots__/AlignmentTool.test.js.snap b/packages/ui/test/__snapshots__/AlignmentTool.test.js.snap
index 09d63818e37fa99bc52a85e3f868ddae98a40c6f..a16d41103c49e2bdeb799c2d27494788783b0b86 100644
--- a/packages/ui/test/__snapshots__/AlignmentTool.test.js.snap
+++ b/packages/ui/test/__snapshots__/AlignmentTool.test.js.snap
@@ -13,7 +13,7 @@ exports[`AlignmentTool is rendered correctly 1`] = `
       Left
     </span>
     <div
-      className="root noBorderRight"
+      className="sc-bdVaJa ieYRgr"
       id="left"
       onClick={[Function]}
       role="presentation"
@@ -31,7 +31,7 @@ exports[`AlignmentTool is rendered correctly 1`] = `
       right
     </span>
     <div
-      className="root noBorderLeft"
+      className="sc-bdVaJa fCBdDA"
       id="right"
       onClick={[Function]}
       role="presentation"