diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
index 078b283b..248b0f17 100644
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.js
@@ -120,6 +120,7 @@ const Button = ({
     primary={primary}
     onClick={disabled ? undefined : onClick}
     style={style}
+    disabled={disabled}
     isDisabled={disabled}
     fullWidth={fullWidth}
     size={size}
diff --git a/src/components/Button/Button.spec.js b/src/components/Button/Button.spec.js
index 660196e4..f280cbe4 100644
--- a/src/components/Button/Button.spec.js
+++ b/src/components/Button/Button.spec.js
@@ -98,13 +98,21 @@ describe('<Button />', () => {
     expect(button.innerHTML).toBe('click me');
   });
 
-  it('should not fire click when disabled', () => {
-    const onButtonClick = jest.fn();
-    const { getByRole } = render(<Button {...defaultProps} disabled />);
-    const button = getByRole('button');
-
-    fireEvent.click(button);
-
-    expect(onButtonClick).not.toHaveBeenCalled();
+  describe('prop: disabled', () => {
+    it('should render disabled', () => {
+      const { getByRole } = render(<Button {...defaultProps} disabled />);
+      const button = getByRole('button');
+
+      expect(button).toHaveAttribute('disabled');
+    });
+    it('should not fire click when disabled', () => {
+      const onButtonClick = jest.fn();
+      const { getByRole } = render(<Button {...defaultProps} disabled />);
+      const button = getByRole('button');
+
+      fireEvent.click(button);
+
+      expect(onButtonClick).not.toHaveBeenCalled();
+    });
   });
 });
diff --git a/src/components/Fieldset/Fieldset.js b/src/components/Fieldset/Fieldset.js
index 01fa3a36..c19e5988 100644
--- a/src/components/Fieldset/Fieldset.js
+++ b/src/components/Fieldset/Fieldset.js
@@ -36,7 +36,12 @@ const StyledLegend = styled.legend`
 `;
 
 const Fieldset = ({ label, disabled, variant, children, ...otherProps }) => (
-  <StyledFieldset isDisabled={disabled} variant={variant} {...otherProps}>
+  <StyledFieldset
+    aria-disabled={disabled}
+    isDisabled={disabled}
+    variant={variant}
+    {...otherProps}
+  >
     {label && <StyledLegend variant={variant}>{label}</StyledLegend>}
     {children}
   </StyledFieldset>
diff --git a/src/components/Fieldset/Fieldset.spec.js b/src/components/Fieldset/Fieldset.spec.js
index 66ad3536..eb4b4238 100644
--- a/src/components/Fieldset/Fieldset.spec.js
+++ b/src/components/Fieldset/Fieldset.spec.js
@@ -41,6 +41,8 @@ describe('<Fieldset />', () => {
       const { container } = renderWithTheme(<Fieldset disabled />);
       const fieldset = container.firstChild;
 
+      expect(fieldset).toHaveAttribute('aria-disabled', 'true');
+
       expect(fieldset).toHaveStyleRule('color', theme.textDisabled);
       expect(fieldset).toHaveStyleRule(
         'text-shadow',
diff --git a/src/components/Table/Table.js b/src/components/Table/Table.js
index 8229f174..db3733f9 100644
--- a/src/components/Table/Table.js
+++ b/src/components/Table/Table.js
@@ -17,24 +17,24 @@ const StyledCutout = styled(Cutout)`
   }
 `;
 
-const Table = ({ className, children, style, ...otherProps }) => (
-  <StyledCutout>
-    <StyledTable className={className} style={style} {...otherProps}>
-      {children}
-    </StyledTable>
-  </StyledCutout>
-);
+const Table = React.forwardRef(function Table(props, ref) {
+  const { children, ...otherProps } = props;
+
+  return (
+    <StyledCutout>
+      <StyledTable ref={ref} {...otherProps}>
+        {children}
+      </StyledTable>
+    </StyledCutout>
+  );
+});
 
 Table.defaultProps = {
-  children: null,
-  className: '',
-  style: {}
+  children: null
 };
 
 Table.propTypes = {
-  children: propTypes.node,
-  className: propTypes.string,
-  style: propTypes.shape([propTypes.string, propTypes.number])
+  children: propTypes.node
 };
 
 export default Table;
diff --git a/src/components/Table/Table.spec.js b/src/components/Table/Table.spec.js
new file mode 100644
index 00000000..32ca4e65
--- /dev/null
+++ b/src/components/Table/Table.spec.js
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../test/utils';
+
+import Table from './Table';
+
+describe('<Table />', () => {
+  it('renders Table', () => {
+    const { container } = renderWithTheme(<Table />);
+    const list = container.firstChild;
+
+    expect(list).toBeInTheDocument();
+  });
+  it('renders table element', () => {
+    const { getByRole } = renderWithTheme(<Table />);
+
+    expect(getByRole('table')).toBeInTheDocument();
+  });
+  it('renders children', () => {
+    const textContent = 'Hi there!';
+    const { getByText } = renderWithTheme(
+      <Table>
+        <span>{textContent}</span>
+      </Table>
+    );
+    expect(getByText(textContent)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/Table/Table.stories.js b/src/components/Table/Table.stories.js
index bc8c03ba..d9b28d9f 100644
--- a/src/components/Table/Table.stories.js
+++ b/src/components/Table/Table.stories.js
@@ -13,7 +13,7 @@ import WindowHeader from '../WindowHeader/WindowHeader';
 import WindowContent from '../WindowContent/WindowContent';
 
 const SimpleTable = () => (
-  <Window>
+  <Window style={{ width: 320 }}>
     <WindowHeader>Pokedex.exe</WindowHeader>
     <WindowContent>
       <Table>
@@ -21,7 +21,7 @@ const SimpleTable = () => (
           <TableRow head>
             <TableHeadCell>Type</TableHeadCell>
             <TableHeadCell>Name</TableHeadCell>
-            <TableHeadCell>Lvl.</TableHeadCell>
+            <TableHeadCell disabled>Level</TableHeadCell>
           </TableRow>
         </TableHead>
         <TableBody>
diff --git a/src/components/TableBody/TableBody.js b/src/components/TableBody/TableBody.js
index 47dd41c0..7441ac59 100644
--- a/src/components/TableBody/TableBody.js
+++ b/src/components/TableBody/TableBody.js
@@ -10,22 +10,22 @@ const StyledTableBody = styled.tbody`
   box-shadow: ${insetShadow};
 `;
 
-const TableBody = ({ className, children, style, ...otherProps }) => (
-  <StyledTableBody className={className} style={style} {...otherProps}>
-    {children}
-  </StyledTableBody>
-);
+const TableBody = React.forwardRef(function TableBody(props, ref) {
+  const { children, ...otherProps } = props;
+
+  return (
+    <StyledTableBody ref={ref} {...otherProps}>
+      {children}
+    </StyledTableBody>
+  );
+});
 
 TableBody.defaultProps = {
-  children: null,
-  className: '',
-  style: {}
+  children: null
 };
 
 TableBody.propTypes = {
-  children: propTypes.node,
-  className: propTypes.string,
-  style: propTypes.shape([propTypes.string, propTypes.number])
+  children: propTypes.node
 };
 
 export default TableBody;
diff --git a/src/components/TableBody/TableBody.spec.js b/src/components/TableBody/TableBody.spec.js
new file mode 100644
index 00000000..91ebc803
--- /dev/null
+++ b/src/components/TableBody/TableBody.spec.js
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../test/utils';
+
+import TableBody from './TableBody';
+
+describe('<TableBody />', () => {
+  it('renders TableBody', () => {
+    const { container } = renderWithTheme(<TableBody />);
+    const list = container.firstChild;
+
+    expect(list).toBeInTheDocument();
+  });
+  it('renders tbody element', () => {
+    const { container } = renderWithTheme(<TableBody />);
+
+    expect(container.querySelector('tbody')).toBeInTheDocument();
+  });
+  it('renders children', () => {
+    const textContent = 'Hi there!';
+    const { getByText } = renderWithTheme(
+      <TableBody>
+        <span>{textContent}</span>
+      </TableBody>
+    );
+    expect(getByText(textContent)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/TableDataCell/TableDataCell.js b/src/components/TableDataCell/TableDataCell.js
index bc8319fe..97a5e78f 100644
--- a/src/components/TableDataCell/TableDataCell.js
+++ b/src/components/TableDataCell/TableDataCell.js
@@ -7,22 +7,21 @@ import { padding } from '../common/system';
 const StyledTd = styled.td`
   padding: 0 ${padding.sm};
 `;
-const TableDataCell = ({ className, children, style, ...otherProps }) => (
-  <StyledTd className={className} style={style} {...otherProps}>
-    {children}
-  </StyledTd>
-);
+const TableDataCell = React.forwardRef(function TableDataCell(props, ref) {
+  const { children, ...otherProps } = props;
+  return (
+    <StyledTd ref={ref} {...otherProps}>
+      {children}
+    </StyledTd>
+  );
+});
 
 TableDataCell.defaultProps = {
-  children: null,
-  className: '',
-  style: {}
+  children: null
 };
 
 TableDataCell.propTypes = {
-  children: propTypes.node,
-  className: propTypes.string,
-  style: propTypes.shape([propTypes.string, propTypes.number])
+  children: propTypes.node
 };
 
 export default TableDataCell;
diff --git a/src/components/TableDataCell/TableDataCell.spec.js b/src/components/TableDataCell/TableDataCell.spec.js
new file mode 100644
index 00000000..8647b98f
--- /dev/null
+++ b/src/components/TableDataCell/TableDataCell.spec.js
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../test/utils';
+
+import TableDataCell from './TableDataCell';
+
+describe('<TableDataCell />', () => {
+  it('renders TableDataCell', () => {
+    const { container } = renderWithTheme(<TableDataCell />);
+    const list = container.firstChild;
+
+    expect(list).toBeInTheDocument();
+  });
+  it('renders td element', () => {
+    const { container } = renderWithTheme(<TableDataCell />);
+
+    expect(container.querySelector('td')).toBeInTheDocument();
+  });
+  it('renders children', () => {
+    const textContent = 'Hi there!';
+    const { getByText } = renderWithTheme(
+      <TableDataCell>
+        <span>{textContent}</span>
+      </TableDataCell>
+    );
+    expect(getByText(textContent)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/TableHead/TableHead.js b/src/components/TableHead/TableHead.js
index ef2e42ba..d1184ae2 100644
--- a/src/components/TableHead/TableHead.js
+++ b/src/components/TableHead/TableHead.js
@@ -5,22 +5,21 @@ import styled from 'styled-components';
 const StyledTableHead = styled.thead`
   display: table-header-group;
 `;
-const TableHead = ({ className, children, style, ...otherProps }) => (
-  <StyledTableHead className={className} style={style} {...otherProps}>
-    {children}
-  </StyledTableHead>
-);
+const TableHead = React.forwardRef(function TableHead(props, ref) {
+  const { children, ...otherProps } = props;
+  return (
+    <StyledTableHead ref={ref} {...otherProps}>
+      {children}
+    </StyledTableHead>
+  );
+});
 
 TableHead.defaultProps = {
-  children: null,
-  className: '',
-  style: {}
+  children: null
 };
 
 TableHead.propTypes = {
-  children: propTypes.node,
-  className: propTypes.string,
-  style: propTypes.shape([propTypes.string, propTypes.number])
+  children: propTypes.node
 };
 
 export default TableHead;
diff --git a/src/components/TableHead/TableHead.spec.js b/src/components/TableHead/TableHead.spec.js
new file mode 100644
index 00000000..dca51a03
--- /dev/null
+++ b/src/components/TableHead/TableHead.spec.js
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../test/utils';
+
+import TableHead from './TableHead';
+
+describe('<TableHead />', () => {
+  it('renders TableHead', () => {
+    const { container } = renderWithTheme(<TableHead />);
+    const list = container.firstChild;
+
+    expect(list).toBeInTheDocument();
+  });
+  it('renders thead element', () => {
+    const { container } = renderWithTheme(<TableHead />);
+
+    expect(container.querySelector('thead')).toBeInTheDocument();
+  });
+  it('renders children', () => {
+    const textContent = 'Hi there!';
+    const { getByText } = renderWithTheme(
+      <TableHead>
+        <span>{textContent}</span>
+      </TableHead>
+    );
+    expect(getByText(textContent)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/TableHeadCell/TableHeadCell.js b/src/components/TableHeadCell/TableHeadCell.js
index f779fb9d..8d854e29 100644
--- a/src/components/TableHeadCell/TableHeadCell.js
+++ b/src/components/TableHeadCell/TableHeadCell.js
@@ -1,58 +1,86 @@
 import React from 'react';
 import propTypes from 'prop-types';
 
-import styled from 'styled-components';
-import { createBorderStyles } from '../common';
+import styled, { css } from 'styled-components';
+import { createBorderStyles, createDisabledTextStyles } from '../common';
 import { padding } from '../common/system';
 
-// ⭕⭕⭕⭕ move text down on Click
-
 const StyledHeadCell = styled.th`
-  ${createBorderStyles()}
-  padding: 0 ${padding.sm};
-  display: table-cell;
-  vertical-align: inherit;
-  background: ${({ theme }) => theme.material};
-  &:active {
-    ${createBorderStyles({ invert: true })}
+position: relative;
+padding: 0 ${padding.sm};
+display: table-cell;
+vertical-align: inherit;
+background: ${({ theme }) => theme.material};
+cursor: default;
+user-select: none;
+  &:before {
+    box-sizing: border-box;
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    ${createBorderStyles()}
+
     border-left: none;
     border-top: none;
   }
-  border-left: none;
-  border-top: none;
-  cursor: default;
+  ${({ isDisabled }) =>
+    !isDisabled &&
+    css`
+      &:active {
+        &:before {
+          ${createBorderStyles({ invert: true, windowBorders: true })}
+          border-left: none;
+          border-top: none;
+          padding-top: 2px;
+        }
+
+        & > div {
+          position: relative;
+          top: 2px;
+        }
+      }
+    `}
+
+
+  color: ${({ theme }) => theme.text};
+  ${({ isDisabled }) => isDisabled && createDisabledTextStyles()}
+  &:hover {
+    color: ${({ theme }) => theme.text};
+    ${({ isDisabled }) => isDisabled && createDisabledTextStyles()}
+  }
+
 `;
 
-const TableHeadCell = ({
-  className,
-  children,
-  style,
-  onClick,
-  ...otherProps
-}) => (
-  <StyledHeadCell
-    className={className}
-    style={style}
-    onClick={onClick}
-    onTouchStart={() => ''}
-    {...otherProps}
-  >
-    {children}
-  </StyledHeadCell>
-);
+const TableHeadCell = React.forwardRef(function TableHeadCell(props, ref) {
+  const { disabled, children, onClick, ...otherProps } = props;
+
+  return (
+    <StyledHeadCell
+      ref={ref}
+      isDisabled={disabled}
+      aria-disabled={disabled}
+      onClick={disabled ? undefined : onClick}
+      onTouchStart={() => ''}
+      {...otherProps}
+    >
+      <div>{children}</div>
+    </StyledHeadCell>
+  );
+});
 
 TableHeadCell.defaultProps = {
   onClick: () => {},
   children: null,
-  className: '',
-  style: {}
+  disabled: false
 };
 
 TableHeadCell.propTypes = {
   onClick: propTypes.func,
   children: propTypes.node,
-  className: propTypes.string,
-  style: propTypes.shape([propTypes.string, propTypes.number])
+  disabled: propTypes.bool
 };
 
 export default TableHeadCell;
diff --git a/src/components/TableHeadCell/TableHeadCell.spec.js b/src/components/TableHeadCell/TableHeadCell.spec.js
new file mode 100644
index 00000000..a5502f0a
--- /dev/null
+++ b/src/components/TableHeadCell/TableHeadCell.spec.js
@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../test/utils';
+
+import TableHeadCell from './TableHeadCell';
+
+describe('<TableHeadCell />', () => {
+  it('renders TableHeadCell', () => {
+    const { container } = renderWithTheme(<TableHeadCell />);
+    const list = container.firstChild;
+
+    expect(list).toBeInTheDocument();
+  });
+  it('renders th element', () => {
+    const { container } = renderWithTheme(<TableHeadCell />);
+
+    expect(container.querySelector('th')).toBeInTheDocument();
+  });
+  it('renders children', () => {
+    const textContent = 'Hi there!';
+    const { getByText } = renderWithTheme(
+      <TableHeadCell>
+        <span>{textContent}</span>
+      </TableHeadCell>
+    );
+    expect(getByText(textContent)).toBeInTheDocument();
+  });
+
+  describe('prop: disabled', () => {
+    it('should disable th element', () => {
+      const handleChange = jest.fn();
+
+      const { container } = renderWithTheme(
+        <TableHeadCell disabled onChange={handleChange} />
+      );
+      const th = container.querySelector('th');
+      expect(th).toHaveAttribute('aria-disabled', 'true');
+
+      th.click();
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+    it('should be overridden by props', () => {
+      const { container, rerender } = renderWithTheme(
+        <TableHeadCell disabled />
+      );
+      rerender(<TableHeadCell disabled={false} />);
+      const th = container.querySelector('th');
+
+      expect(th).toHaveAttribute('aria-disabled', 'false');
+    });
+  });
+});
diff --git a/src/components/TableRow/TableRow.js b/src/components/TableRow/TableRow.js
index ef5c5d6d..86daf2c1 100644
--- a/src/components/TableRow/TableRow.js
+++ b/src/components/TableRow/TableRow.js
@@ -13,32 +13,27 @@ const StyledTr = styled.tr`
   outline: none;
 
   color: ${({ theme }) => theme.text};
-  ${({ theme, head }) =>
-    !head &&
-    `&:hover {
-      background: ${theme.hoverBackground};
-      color: ${theme.textInvert}
-    }`}
+  &:hover {
+    background: ${({ theme }) => theme.hoverBackground};
+    color: ${({ theme }) => theme.textInvert};
+  }
 `;
 
-const TableRow = ({ className, children, style, head, ...otherProps }) => (
-  <StyledTr head={head} className={className} style={style} {...otherProps}>
-    {children}
-  </StyledTr>
-);
+const TableRow = React.forwardRef(function TableRow(props, ref) {
+  const { children, ...otherProps } = props;
+  return (
+    <StyledTr ref={ref} {...otherProps}>
+      {children}
+    </StyledTr>
+  );
+});
 
 TableRow.defaultProps = {
-  head: false,
-  children: null,
-  className: '',
-  style: {}
+  children: null
 };
 
 TableRow.propTypes = {
-  children: propTypes.node,
-  className: propTypes.string,
-  style: propTypes.shape([propTypes.string, propTypes.number]),
-  head: propTypes.bool
+  children: propTypes.node
 };
 
 export default TableRow;
diff --git a/src/components/TableRow/TableRow.spec.js b/src/components/TableRow/TableRow.spec.js
new file mode 100644
index 00000000..7837e430
--- /dev/null
+++ b/src/components/TableRow/TableRow.spec.js
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../test/utils';
+
+import TableRow from './TableRow';
+
+describe('<TableRow />', () => {
+  it('renders TableRow', () => {
+    const { container } = renderWithTheme(<TableRow />);
+    const list = container.firstChild;
+
+    expect(list).toBeInTheDocument();
+  });
+  it('renders tr element', () => {
+    const { container } = renderWithTheme(<TableRow />);
+
+    expect(container.querySelector('tr')).toBeInTheDocument();
+  });
+  it('renders children', () => {
+    const textContent = 'Hi there!';
+    const { getByText } = renderWithTheme(
+      <TableRow>
+        <span>{textContent}</span>
+      </TableRow>
+    );
+    expect(getByText(textContent)).toBeInTheDocument();
+  });
+});