diff --git a/client/build/components/HorizontalQuadSplit/index.js b/client/build/components/HorizontalQuadSplit/index.js
new file mode 100644
index 00000000..caa1a0a8
--- /dev/null
+++ b/client/build/components/HorizontalQuadSplit/index.js
@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } _setPrototypeOf(subClass.prototype, superClass && superClass.prototype); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); }
+
+var HorizontalTriSplit =
+/*#__PURE__*/
+function (_React$Component) {
+  function HorizontalTriSplit() {
+    _classCallCheck(this, HorizontalTriSplit);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(HorizontalTriSplit).apply(this, arguments));
+  }
+
+  _createClass(HorizontalTriSplit, [{
+    key: "render",
+    value: function render() {
+      return _react.default.createElement("div", {
+        className: 'horizontal-quad-split'
+      }, _react.default.createElement("div", {
+        className: 'left-side'
+      }, _react.default.createElement("div", {
+        className: 'column'
+      }, this.props.itemA), _react.default.createElement("div", {
+        className: 'column'
+      }, this.props.itemB)), _react.default.createElement("div", {
+        className: 'right-side'
+      }, _react.default.createElement("div", {
+        className: 'column'
+      }, this.props.itemC), _react.default.createElement("div", {
+        className: 'column'
+      }, this.props.itemD)));
+    }
+  }]);
+
+  _inherits(HorizontalTriSplit, _React$Component);
+
+  return HorizontalTriSplit;
+}(_react.default.Component);
+
+var _default = HorizontalTriSplit;
+exports.default = _default;
\ No newline at end of file
diff --git a/client/build/containers/ChannelClaimsDisplay/view.js b/client/build/containers/ChannelClaimsDisplay/view.js
index ad689f57..86b8f3fd 100644
--- a/client/build/containers/ChannelClaimsDisplay/view.js
+++ b/client/build/containers/ChannelClaimsDisplay/view.js
@@ -9,6 +9,14 @@ var _react = _interopRequireDefault(require("react"));
 
 var _AssetPreview = _interopRequireDefault(require("@components/AssetPreview"));
 
+var _HorizontalQuadSplit = _interopRequireDefault(require("@components/HorizontalQuadSplit"));
+
+var _Row = _interopRequireDefault(require("@components/Row"));
+
+var _ButtonSecondary = _interopRequireDefault(require("@components/ButtonSecondary"));
+
+var _createGroupedList = require("../../utils/createGroupedList.js");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -76,21 +84,42 @@ function (_React$Component) {
           currentPage = _this$props2$channel$.currentPage,
           totalPages = _this$props2$channel$.totalPages,
           defaultThumbnail = _this$props2.defaultThumbnail;
-      return _react.default.createElement("div", {
-        className: "row row--tall"
-      }, claims.length > 0 ? _react.default.createElement("div", null, claims.map(function (claim, index) {
-        return _react.default.createElement(_AssetPreview.default, {
-          defaultThumbnail: defaultThumbnail,
-          claimData: claim,
-          key: "".concat(claim.name, "-").concat(index)
-        });
-      }), _react.default.createElement("div", null, currentPage > 1 && _react.default.createElement("button", {
-        className: 'button--secondary',
-        onClick: this.showPreviousResultsPage
-      }, "Previous Page"), currentPage < totalPages && _react.default.createElement("button", {
-        className: 'button--secondary',
-        onClick: this.showNextResultsPage
-      }, "Next Page"))) : _react.default.createElement("p", null, "There are no claims in this channel"));
+      var groupedClaimsList = (0, _createGroupedList.createGroupedList)(claims, 4);
+
+      if (claims.length > 0) {
+        return _react.default.createElement("div", null, _react.default.createElement(_Row.default, null, groupedClaimsList.map(function (group, index) {
+          return _react.default.createElement(_HorizontalQuadSplit.default, {
+            itemA: group[0] ? _react.default.createElement(_AssetPreview.default, {
+              defaultThumbnail: defaultThumbnail,
+              claimData: group[0],
+              key: "".concat(group[0].name, "-").concat(index)
+            }) : null,
+            itemB: group[1] ? _react.default.createElement(_AssetPreview.default, {
+              defaultThumbnail: defaultThumbnail,
+              claimData: group[1],
+              key: "".concat(group[1].name, "-").concat(index)
+            }) : null,
+            itemC: group[2] ? _react.default.createElement(_AssetPreview.default, {
+              defaultThumbnail: defaultThumbnail,
+              claimData: group[2],
+              key: "".concat(group[2].name, "-").concat(index)
+            }) : null,
+            itemD: group[3] ? _react.default.createElement(_AssetPreview.default, {
+              defaultThumbnail: defaultThumbnail,
+              claimData: group[3],
+              key: "".concat(group[3].name, "-").concat(index)
+            }) : null
+          });
+        })), _react.default.createElement(_Row.default, null, currentPage > 1 && _react.default.createElement(_ButtonSecondary.default, {
+          value: 'Previous Page',
+          onClickHandler: this.showPreviousResultsPage
+        }), currentPage < totalPages && _react.default.createElement(_ButtonSecondary.default, {
+          value: 'Next Page',
+          onClickHandler: this.showNextResultsPage
+        })));
+      } else {
+        return _react.default.createElement("p", null, "There are no claims in this channel");
+      }
     }
   }]);
 
@@ -99,6 +128,5 @@ function (_React$Component) {
   return ChannelClaimsDisplay;
 }(_react.default.Component);
 
-;
 var _default = ChannelClaimsDisplay;
 exports.default = _default;
\ No newline at end of file
diff --git a/client/build/containers/PublishTitleInput/view.js b/client/build/containers/PublishTitleInput/view.js
index 2a38c92a..4cc99398 100644
--- a/client/build/containers/PublishTitleInput/view.js
+++ b/client/build/containers/PublishTitleInput/view.js
@@ -53,7 +53,7 @@ function (_React$Component) {
       return _react.default.createElement("input", {
         type: "text",
         id: "publish-title",
-        className: 'text--large input--full-width',
+        className: 'text--extra-large input--full-width',
         name: "title",
         placeholder: "Give your content a title...",
         onChange: this.handleInput,
diff --git a/client/build/containers/PublishUrlInput/view.js b/client/build/containers/PublishUrlInput/view.js
index 9ac47796..72eccdbe 100644
--- a/client/build/containers/PublishUrlInput/view.js
+++ b/client/build/containers/PublishUrlInput/view.js
@@ -143,4 +143,4 @@ function (_React$Component) {
 }(_react.default.Component);
 
 var _default = PublishUrlInput;
-exports.default = _default;
+exports.default = _default;
\ No newline at end of file
diff --git a/client/build/utils/createGroupedList.js b/client/build/utils/createGroupedList.js
new file mode 100644
index 00000000..f25bd1cb
--- /dev/null
+++ b/client/build/utils/createGroupedList.js
@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createGroupedList = void 0;
+
+var createGroupedList = function createGroupedList(list, size) {
+  var groupedList = [];
+
+  while (list.length > 0) {
+    groupedList.push(list.splice(0, size));
+  }
+
+  return groupedList;
+};
+
+exports.createGroupedList = createGroupedList;
\ No newline at end of file
diff --git a/client/scss/all.scss b/client/scss/all.scss
index ea10cd7b..61ca9565 100644
--- a/client/scss/all.scss
+++ b/client/scss/all.scss
@@ -21,6 +21,7 @@
 @import 'components/_click-to-copy';
 @import 'components/_column';
 @import 'components/_form-feedback';
+@import 'components/_horizontal-quad-split';
 @import 'components/_horizontal-split';
 @import 'components/_label';
 @import 'components/_nav-bar';
diff --git a/client/scss/components/_horizontal-quad-split.scss b/client/scss/components/_horizontal-quad-split.scss
new file mode 100644
index 00000000..4ace3e3b
--- /dev/null
+++ b/client/scss/components/_horizontal-quad-split.scss
@@ -0,0 +1,49 @@
+.horizontal-quad-split {
+  display       : flex;
+  flex-direction : row;
+  justify-content: space-between;
+  align-items    : flex-start;
+  .left-side, .right-side {
+    width          : 50%;
+    display        : flex;
+    flex-direction : row;
+    justify-content: space-between;
+    align-items    : flex-start;
+    .column {
+      width: 50%;
+    }
+  }
+};
+
+
+
+@media (max-width: $break-point-large ) {
+
+  .horizontal-quad-split {
+    flex-direction : column;
+    .left-side, .right-side {
+      width          : 100%;
+      padding-left: 0;
+      padding-right: 0;
+      padding-bottom: $secondary-padding;
+    }
+  };
+
+}
+
+@media (max-width: $break-point-medium ) {
+
+  .horizontal-quad-split {
+    flex-direction : column;
+    .left-side, .right-side {
+      flex-direction : column;
+      .column {
+        width : 100%;
+        padding-left: 0;
+        padding-right: 0;
+        padding-bottom: $secondary-padding;
+      }
+    }
+  };
+
+}
diff --git a/client/src/components/HorizontalQuadSplit/index.jsx b/client/src/components/HorizontalQuadSplit/index.jsx
new file mode 100644
index 00000000..16dcbbf2
--- /dev/null
+++ b/client/src/components/HorizontalQuadSplit/index.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+class HorizontalTriSplit extends React.Component {
+  render () {
+    return (
+      <div className={'horizontal-quad-split'}>
+        <div className={'left-side'}>
+          <div className={'column'}>
+            {this.props.itemA}
+          </div>
+          <div className={'column'}>
+            {this.props.itemB}
+          </div>
+        </div>
+        <div className={'right-side'}>
+          <div className={'column'}>
+            {this.props.itemC}
+          </div>
+          <div className={'column'}>
+            {this.props.itemD}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default HorizontalTriSplit;
diff --git a/client/src/containers/ChannelClaimsDisplay/view.jsx b/client/src/containers/ChannelClaimsDisplay/view.jsx
index 6d4e971b..38e5053a 100644
--- a/client/src/containers/ChannelClaimsDisplay/view.jsx
+++ b/client/src/containers/ChannelClaimsDisplay/view.jsx
@@ -1,5 +1,10 @@
 import React from 'react';
 import AssetPreview from '@components/AssetPreview';
+import HorizontalQuadSplit from '@components/HorizontalQuadSplit';
+import Row from '@components/Row';
+import ButtonSecondary from '@components/ButtonSecondary';
+
+import { createGroupedList } from '../../utils/createGroupedList.js';
 
 class ChannelClaimsDisplay extends React.Component {
   constructor (props) {
@@ -22,31 +27,73 @@ class ChannelClaimsDisplay extends React.Component {
     this.props.onUpdateChannelClaims(channelKey, name, longId, page);
   }
   render () {
-    const { channel: { claimsData: { claims, currentPage, totalPages } }, defaultThumbnail } = this.props;
-    return (
-      <div className='row row--tall'>
-        {(claims.length > 0) ? (
-          <div>
-            {claims.map((claim, index) => <AssetPreview
-              defaultThumbnail={defaultThumbnail}
-              claimData={claim}
-              key={`${claim.name}-${index}`}
+    const {channel: {claimsData: {claims, currentPage, totalPages}}, defaultThumbnail} = this.props;
+    const groupedClaimsList = createGroupedList(claims, 4);
+    if (claims.length > 0) {
+      return (
+        <div>
+          <Row>
+            {groupedClaimsList.map((group, index) => <HorizontalQuadSplit
+              itemA={
+                group[0] ? (
+                  <AssetPreview
+                    defaultThumbnail={defaultThumbnail}
+                    claimData={group[0]}
+                    key={`${group[0].name}-${index}`}
+                  />
+                ) : null
+              }
+              itemB={
+                group[1] ? (
+                  <AssetPreview
+                    defaultThumbnail={defaultThumbnail}
+                    claimData={group[1]}
+                    key={`${group[1].name}-${index}`}
+                  />
+                ) : null
+              }
+              itemC={
+                group[2] ? (
+                  <AssetPreview
+                    defaultThumbnail={defaultThumbnail}
+                    claimData={group[2]}
+                    key={`${group[2].name}-${index}`}
+                  />
+                ) : null
+              }
+              itemD={
+                group[3] ? (
+                  <AssetPreview
+                    defaultThumbnail={defaultThumbnail}
+                    claimData={group[3]}
+                    key={`${group[3].name}-${index}`}
+                  />
+                ) : null
+              }
             />)}
-            <div>
-              {(currentPage > 1) &&
-              <button className={'button--secondary'} onClick={this.showPreviousResultsPage}>Previous Page</button>
-              }
-              {(currentPage < totalPages) &&
-              <button className={'button--secondary'} onClick={this.showNextResultsPage}>Next Page</button>
-              }
-            </div>
-          </div>
-        ) : (
-          <p>There are no claims in this channel</p>
-        )}
-      </div>
-    );
+          </Row>
+          <Row>
+            {(currentPage > 1) &&
+              <ButtonSecondary
+                value={'Previous Page'}
+                onClickHandler={this.showPreviousResultsPage}
+              />
+            }
+            {(currentPage < totalPages) &&
+              <ButtonSecondary
+                value={'Next Page'}
+                onClickHandler={this.showNextResultsPage}
+              />
+            }
+          </Row>
+        </div>
+      );
+    } else {
+      return (
+        <p>There are no claims in this channel</p>
+      );
+    }
   }
-};
+}
 
 export default ChannelClaimsDisplay;
diff --git a/client/src/containers/PublishTitleInput/view.jsx b/client/src/containers/PublishTitleInput/view.jsx
index fe7ea36e..1963096f 100644
--- a/client/src/containers/PublishTitleInput/view.jsx
+++ b/client/src/containers/PublishTitleInput/view.jsx
@@ -15,7 +15,7 @@ class PublishTitleInput extends React.Component {
       <input
         type='text'
         id='publish-title'
-        className={'text--x-large input--full-width'}
+        className={'text--extra-large input--full-width'}
         name='title'
         placeholder='Give your content a title...'
         onChange={this.handleInput}
diff --git a/client/src/utils/createGroupedList.js b/client/src/utils/createGroupedList.js
new file mode 100644
index 00000000..5353d496
--- /dev/null
+++ b/client/src/utils/createGroupedList.js
@@ -0,0 +1,7 @@
+export const createGroupedList = (list, size) => {
+  let groupedList = [];
+  while (list.length > 0) {
+    groupedList.push(list.splice(0, size));
+  }
+  return groupedList;
+};
diff --git a/server/controllers/api/channel/claims/getChannelClaims.js b/server/controllers/api/channel/claims/getChannelClaims.js
index a36e559b..b89cedf2 100644
--- a/server/controllers/api/channel/claims/getChannelClaims.js
+++ b/server/controllers/api/channel/claims/getChannelClaims.js
@@ -1,5 +1,6 @@
-const db = require('../../../../models');
+const logger = require('winston');
 
+const db = require('../../../../models');
 const { returnPaginatedChannelClaims } = require('./channelPagination.js');
 
 const getChannelClaims = (channelName, channelClaimId, page) => {
@@ -15,6 +16,7 @@ const getChannelClaims = (channelName, channelClaimId, page) => {
           .getAllChannelClaims(longChannelClaimId);
       })
       .then(channelClaimsArray => {
+        logger.debug('channel claim array:', channelClaimsArray);
         // 3. format the data for the view, including pagination
         let paginatedChannelViewData = returnPaginatedChannelClaims(channelName, longChannelClaimId, channelClaimsArray, page);
         // 4. return all the channel information and contents