diff --git a/src/components/Table.js b/src/components/Table.js
new file mode 100644
index 0000000..545706d
--- /dev/null
+++ b/src/components/Table.js
@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+import colorGetter from './colorGetter';
+import { Layout, Box } from './Layout';
+
+export const Table = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 16px;
+`;
+export const Row = styled(Layout)`
+  font-size: 0.9rem;
+  ${props => props.active &&
+    `background-color: ${colorGetter(props, 'primaryColorLightest')};`}
+
+  &:nth-child(odd) {
+    background-color: ${props => colorGetter(props, 'greyLightest')};
+    ${props => props.active &&
+      `background-color: ${colorGetter(props, 'primaryColorLightest')};`}
+  }
+`;
+export const Head = styled(Layout)`
+  border-bottom: 1px solid ${props => colorGetter(props, 'greyLight')};
+  font-size: 0.9rem;
+  color: ${props => colorGetter(props, 'primaryColor')};
+`;
+export const Cell = styled(Box)`
+  padding: 16px 8px;
+  ${props => props.active && 'text-decoration: underline;'}
+  ${props => props.active && 'cursor: pointer;'}
+`;
diff --git a/src/index.js b/src/index.js
index bccaa4b..a993d3d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -25,3 +25,4 @@ export { default as Heading } from './components/Heading';
 export { Layout, Box } from './components/Layout';
 export { default as media } from './components/media';
 export { default as withRipple } from './components/withRipple';
+export { Table, Head, Row, Cell } from './components/Table';