diff --git a/uberpage/src/components/App/App.jsx b/uberpage/src/components/App/App.jsx
index 535b8af..071e5d4 100644
--- a/uberpage/src/components/App/App.jsx
+++ b/uberpage/src/components/App/App.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import './App.css';
-import UberTile from '../UberTile/UberTile.jsx';
-import data from '../../data';
+import UberPage from "../UberPage/UberPage";
+import data from "../../data";
 
 function App() {
   const defaultItem = {
@@ -11,48 +11,12 @@ function App() {
     background_logo: 'UberPage.svg',
     background_logo_size: '75%',
   };
-  if (data.settings.default_item === undefined || data.settings.default_item) { data.items.push(defaultItem); }
-
-  function calculateNumberOfColumns() {
-    if (data.items.length <= 3 || window.innerWidth < 400) {
-      return 1;
-    }
-    if (data.items.length <= 8 || window.innerWidth < 800) {
-      return 2;
-    }
-    return 3;
+  if (data.settings.default_item === undefined || data.settings.default_item) {
+    data.items.push(defaultItem);
   }
-
-  const numberOfColumns = calculateNumberOfColumns();
-  const numberOfRows = Math.ceil(data.items.length / numberOfColumns);
-  const itemHeight = 100 / numberOfRows;
-  let itemWidth = 100 / numberOfColumns;
-  const gridStyle = { gridTemplateColumns: 'auto '.repeat(numberOfColumns) };
-  const emptySlots = (numberOfColumns * numberOfRows) - data.items.length;
-
   return (
-    <div className="App" style={gridStyle}>
-      {
-        data.items.map((item, index) => {
-          const gridColumnStart = (index % numberOfColumns) + 1;
-          const gridRow = Math.floor((index / numberOfColumns) + 1);
-          const isLastItem = index + 1 === data.items.length;
-          const gridColumnEnd = isLastItem ? gridColumnStart + (emptySlots + 1) : gridColumnStart + 1;
-          itemWidth = isLastItem ? itemWidth * (emptySlots + 1) : itemWidth;
-          return (
-            <UberTile
-              key={index}
-              item={item}
-              settings={data.settings}
-              height={itemHeight}
-              width={itemWidth}
-              gridColumnStart={gridColumnStart}
-              gridColumnEnd={gridColumnEnd}
-              gridRow={gridRow}
-            />
-          );
-        })
-      }
+    <div className="App">
+      <UberPage items={data.items} settings={data.settings}/>
     </div>
   );
 }
diff --git a/uberpage/src/components/App/App.test.jsx b/uberpage/src/components/App/App.test.jsx
index 6bc3fee..5b59eea 100644
--- a/uberpage/src/components/App/App.test.jsx
+++ b/uberpage/src/components/App/App.test.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App.jsx';
-import * as data from '../../data';
 
 describe('App Component', () => {
   it('renders without crashing', () => {
@@ -9,104 +8,4 @@ describe('App Component', () => {
     ReactDOM.render(<App />, div);
     ReactDOM.unmountComponentAtNode(div);
   });
-
-  it('renders at least default tile if data contains no items', () => {
-    data.default = {
-      items: [],
-      settings: {
-        default_link_target: '_blank'
-      }
-    };
-
-    const div = document.createElement('div');
-    ReactDOM.render(<App />, div);
-    const uberTiles = ReactDOM.findDOMNode(div).getElementsByClassName('UberTile');
-
-    expect(uberTiles.length).toBe(1);
-    expect(uberTiles[0].attributes[1].value).toBe('width: 100vw; min-width: 100vw; max-width: 100vw; height: 100vh; min-height: 100vh; max-height: 100vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;');
-    ReactDOM.unmountComponentAtNode(div);
-  });
-
-  it('renders 4 tiles in 2 columns if data contains 3 items', () => {
-    data.default = {
-      items: [{title: 'item1'}, {title: 'item2'}, {title: 'item3'}],
-      settings: {
-        default_link_target: '_blank'
-      }
-    };
-
-    const div = document.createElement('div');
-    ReactDOM.render(<App />, div);
-    const uberTiles = ReactDOM.findDOMNode(div).getElementsByClassName('UberTile');
-    expect(uberTiles.length).toBe(4);
-    expect(uberTiles[0].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 50vh; min-height: 50vh; max-height: 50vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;');
-    expect(uberTiles[1].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 50vh; min-height: 50vh; max-height: 50vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2;');
-    expect(uberTiles[2].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 50vh; min-height: 50vh; max-height: 50vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3;');
-    expect(uberTiles[3].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 50vh; min-height: 50vh; max-height: 50vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3;');
-    ReactDOM.unmountComponentAtNode(div);
-  });
-
-  it('renders 3 tiles in 1 column if data contains 2 items', () => {
-    data.default = {
-      items: [{title: 'item1'}, {title: 'item2'}],
-      settings: {
-        default_link_target: '_blank'
-      }
-    };
-
-    const div = document.createElement('div');
-    ReactDOM.render(<App />, div);
-    const uberTiles = ReactDOM.findDOMNode(div).getElementsByClassName('UberTile');
-    expect(uberTiles.length).toBe(3);
-    expect(uberTiles[0].attributes[1].value).toBe('width: 100vw; min-width: 100vw; max-width: 100vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;');
-    expect(uberTiles[1].attributes[1].value).toBe('width: 100vw; min-width: 100vw; max-width: 100vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3;');
-    expect(uberTiles[2].attributes[1].value).toBe('width: 100vw; min-width: 100vw; max-width: 100vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4;');
-    ReactDOM.unmountComponentAtNode(div);
-  });
-
-  it('renders 9 tiles in 3 column if data contains 8 items', () => {
-    data.default = {
-      items: [{title: 'item1'}, {title: 'item2'}, {title: 'item3'}, {title: 'item4'}, {title: 'item5'}, {title: 'item6'}, {title: 'item7'}, {title: 'item8'}],
-      settings: {
-        default_link_target: '_blank'
-      }
-    };
-
-    const div = document.createElement('div');
-    ReactDOM.render(<App />, div);
-    const uberTiles = ReactDOM.findDOMNode(div).getElementsByClassName('UberTile');
-    expect(uberTiles.length).toBe(9);
-    expect(uberTiles[0].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;');
-    expect(uberTiles[1].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2;');
-    expect(uberTiles[2].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2;');
-    expect(uberTiles[3].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3;');
-    expect(uberTiles[4].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3;');
-    expect(uberTiles[5].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3;');
-    expect(uberTiles[6].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4;');
-    expect(uberTiles[7].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4;');
-    expect(uberTiles[8].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4;');
-    ReactDOM.unmountComponentAtNode(div);
-  });
-
-  it('renders 7 tiles in 2 column if data contains 6 items', () => {
-    data.default = {
-      items: [{title: 'item1'}, {title: 'item2'}, {title: 'item3'}, {title: 'item4'}, {title: 'item5'}, {title: 'item6'}],
-      settings: {
-        default_link_target: '_blank'
-      }
-    };
-
-    const div = document.createElement('div');
-    ReactDOM.render(<App />, div);
-    const uberTiles = ReactDOM.findDOMNode(div).getElementsByClassName('UberTile');
-    expect(uberTiles.length).toBe(7);
-    expect(uberTiles[0].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 25vh; min-height: 25vh; max-height: 25vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;');
-    expect(uberTiles[1].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 25vh; min-height: 25vh; max-height: 25vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2;');
-    expect(uberTiles[2].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 25vh; min-height: 25vh; max-height: 25vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3;');
-    expect(uberTiles[3].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 25vh; min-height: 25vh; max-height: 25vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3;');
-    expect(uberTiles[4].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 25vh; min-height: 25vh; max-height: 25vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4;');
-    expect(uberTiles[5].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 25vh; min-height: 25vh; max-height: 25vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4;');
-    expect(uberTiles[6].attributes[1].value).toBe('width: 100vw; min-width: 100vw; max-width: 100vw; height: 25vh; min-height: 25vh; max-height: 25vh; grid-column-start: 1; grid-column-end: 3; grid-row-start: 4; grid-row-end: 5;');
-    ReactDOM.unmountComponentAtNode(div);
-  });
 });
diff --git a/uberpage/src/components/UberPage/UberPage.css b/uberpage/src/components/UberPage/UberPage.css
new file mode 100644
index 0000000..df8884d
--- /dev/null
+++ b/uberpage/src/components/UberPage/UberPage.css
@@ -0,0 +1,7 @@
+.UberPage {
+  text-align: center;
+  min-height: 100vh;
+  background-color: #282c34;
+  overflow: hidden;
+  display: grid;
+}
diff --git a/uberpage/src/components/UberPage/UberPage.jsx b/uberpage/src/components/UberPage/UberPage.jsx
new file mode 100644
index 0000000..4e4f89d
--- /dev/null
+++ b/uberpage/src/components/UberPage/UberPage.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import './UberPage.css';
+import UberTile from '../UberTile/UberTile.jsx';
+
+class UberPage extends React.Component {
+  state = {
+    pageWidth: window.innerWidth
+  };
+  render() {
+    const items = this.props.items;
+    const settings = this.props.settings;
+    function calculateNumberOfColumns() {
+      if (items.length <= 3 || window.innerWidth < 450) {
+        return 1;
+      }
+      if (items.length <= 8 || window.innerWidth < 800) {
+        return 2;
+      }
+      return 3;
+    }
+    window.onresize = () => this.setState({pageWidth: window.innerWidth});
+
+    const numberOfColumns = calculateNumberOfColumns();
+    const numberOfRows = Math.ceil(items.length / numberOfColumns);
+    const itemHeight = 100 / numberOfRows;
+    let itemWidth = 100 / numberOfColumns;
+    const gridStyle = {gridTemplateColumns: 'auto '.repeat(numberOfColumns)};
+    const emptySlots = (numberOfColumns * numberOfRows) - items.length;
+
+    return (
+      <div className="UberPage" style={gridStyle}>
+        {
+          items.map((item, index) => {
+            const gridColumnStart = (index % numberOfColumns) + 1;
+            const gridRow = Math.floor((index / numberOfColumns) + 1);
+            const isLastItem = index + 1 === items.length;
+            const gridColumnEnd = isLastItem ? gridColumnStart + (emptySlots + 1) : gridColumnStart + 1;
+            itemWidth = isLastItem ? itemWidth * (emptySlots + 1) : itemWidth;
+            return (
+              <UberTile
+                key={index}
+                item={item}
+                settings={settings}
+                height={itemHeight}
+                width={itemWidth}
+                gridColumnStart={gridColumnStart}
+                gridColumnEnd={gridColumnEnd}
+                gridRow={gridRow}
+              />
+            );
+          })
+        }
+      </div>
+    );
+  }
+}
+
+export default UberPage;
diff --git a/uberpage/src/components/UberPage/UberPage.test.jsx b/uberpage/src/components/UberPage/UberPage.test.jsx
new file mode 100644
index 0000000..533c5c4
--- /dev/null
+++ b/uberpage/src/components/UberPage/UberPage.test.jsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import UberPage from './UberPage.jsx';
+import * as data from '../../data';
+
+describe('UberPage Component', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<UberPage items={[]} settings={{}}/>, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+
+  it('renders no tiles if data contains no items', () => {
+    data.default = {
+      items: [],
+      settings: {
+        default_link_target: '_blank'
+      }
+    };
+
+    const div = document.createElement('div');
+    ReactDOM.render(<UberPage items={data.default.items} settings={data.default.settings}/>, div);
+    const uberTiles = ReactDOM.findDOMNode(div).getElementsByClassName('UberTile');
+
+    expect(uberTiles.length).toBe(0);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+
+  it('renders 1 tile if data contains 1 item', () => {
+    data.default = {
+      items: [{title: 'item1'}],
+      settings: {
+        default_link_target: '_blank'
+      }
+    };
+
+    const div = document.createElement('div');
+    ReactDOM.render(<UberPage items={data.default.items} settings={data.default.settings}/>, div);
+    const uberTiles = ReactDOM.findDOMNode(div).getElementsByClassName('UberTile');
+
+    expect(uberTiles.length).toBe(1);
+    expect(uberTiles[0].attributes[1].value).toBe('width: 100vw; min-width: 100vw; max-width: 100vw; height: 100vh; min-height: 100vh; max-height: 100vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;');
+    ReactDOM.unmountComponentAtNode(div);
+  });
+
+  it('renders 4 tiles in 2 columns if data contains 4 items', () => {
+    data.default = {
+      items: [{title: 'item1'}, {title: 'item2'}, {title: 'item3'}, {title: 'item4'}],
+      settings: {
+        default_link_target: '_blank'
+      }
+    };
+
+    const div = document.createElement('div');
+    ReactDOM.render(<UberPage items={data.default.items} settings={data.default.settings}/>, div);
+    const uberTiles = ReactDOM.findDOMNode(div).getElementsByClassName('UberTile');
+    expect(uberTiles.length).toBe(4);
+    expect(uberTiles[0].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 50vh; min-height: 50vh; max-height: 50vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;');
+    expect(uberTiles[1].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 50vh; min-height: 50vh; max-height: 50vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2;');
+    expect(uberTiles[2].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 50vh; min-height: 50vh; max-height: 50vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3;');
+    expect(uberTiles[3].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 50vh; min-height: 50vh; max-height: 50vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3;');
+    ReactDOM.unmountComponentAtNode(div);
+  });
+
+  it('renders 3 tiles in 1 column if data contains 3 items', () => {
+    data.default = {
+      items: [{title: 'item1'}, {title: 'item2'}, {title: 'item3'}],
+      settings: {
+        default_link_target: '_blank'
+      }
+    };
+
+    const div = document.createElement('div');
+    ReactDOM.render(<UberPage items={data.default.items} settings={data.default.settings}/>, div);
+    const uberTiles = ReactDOM.findDOMNode(div).getElementsByClassName('UberTile');
+    expect(uberTiles.length).toBe(3);
+    expect(uberTiles[0].attributes[1].value).toBe('width: 100vw; min-width: 100vw; max-width: 100vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;');
+    expect(uberTiles[1].attributes[1].value).toBe('width: 100vw; min-width: 100vw; max-width: 100vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3;');
+    expect(uberTiles[2].attributes[1].value).toBe('width: 100vw; min-width: 100vw; max-width: 100vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4;');
+    ReactDOM.unmountComponentAtNode(div);
+  });
+
+  it('renders 9 tiles in 3 column if data contains 9 items', () => {
+    data.default = {
+      items: [{title: 'item1'}, {title: 'item2'}, {title: 'item3'}, {title: 'item4'}, {title: 'item5'}, {title: 'item6'}, {title: 'item7'}, {title: 'item8'}, {title: 'item9'}],
+      settings: {
+        default_link_target: '_blank'
+      }
+    };
+
+    const div = document.createElement('div');
+    ReactDOM.render(<UberPage items={data.default.items} settings={data.default.settings}/>, div);
+    const uberTiles = ReactDOM.findDOMNode(div).getElementsByClassName('UberTile');
+    expect(uberTiles.length).toBe(9);
+    expect(uberTiles[0].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;');
+    expect(uberTiles[1].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2;');
+    expect(uberTiles[2].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2;');
+    expect(uberTiles[3].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3;');
+    expect(uberTiles[4].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3;');
+    expect(uberTiles[5].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3;');
+    expect(uberTiles[6].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4;');
+    expect(uberTiles[7].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4;');
+    expect(uberTiles[8].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4;');
+    ReactDOM.unmountComponentAtNode(div);
+  });
+
+  it('renders 7 tiles in 2 column if data contains 7 items', () => {
+    data.default = {
+      items: [{title: 'item1'}, {title: 'item2'}, {title: 'item3'}, {title: 'item4'}, {title: 'item5'}, {title: 'item6'}, {title: 'item7'}],
+      settings: {
+        default_link_target: '_blank'
+      }
+    };
+
+    const div = document.createElement('div');
+    ReactDOM.render(<UberPage items={data.default.items} settings={data.default.settings}/>, div);
+    const uberTiles = ReactDOM.findDOMNode(div).getElementsByClassName('UberTile');
+    expect(uberTiles.length).toBe(7);
+    expect(uberTiles[0].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 25vh; min-height: 25vh; max-height: 25vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;');
+    expect(uberTiles[1].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 25vh; min-height: 25vh; max-height: 25vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2;');
+    expect(uberTiles[2].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 25vh; min-height: 25vh; max-height: 25vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3;');
+    expect(uberTiles[3].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 25vh; min-height: 25vh; max-height: 25vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3;');
+    expect(uberTiles[4].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 25vh; min-height: 25vh; max-height: 25vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4;');
+    expect(uberTiles[5].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 25vh; min-height: 25vh; max-height: 25vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4;');
+    expect(uberTiles[6].attributes[1].value).toBe('width: 100vw; min-width: 100vw; max-width: 100vw; height: 25vh; min-height: 25vh; max-height: 25vh; grid-column-start: 1; grid-column-end: 3; grid-row-start: 4; grid-row-end: 5;');
+    ReactDOM.unmountComponentAtNode(div);
+  });
+});