diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index eb5ef944..22305b3a 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -682,21 +682,12 @@ class Nav extends React.PureComponent {
     };
 
     return (
-      <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
-        {this.renderLeftLayout(navDropdownState)}
-        {this.renderUserMenu(navDropdownState)}
-        {/*
-        <div className="nav__announce">
-          This is a preview version of the editor, that has not yet been officially released.
-          It is in development, you can report bugs <a
-            href="https://github.com/processing/p5.js-web-editor/issues"
-            target="_blank"
-            rel="noopener noreferrer"
-          >here</a>.
-          Please use with caution.
-        </div>
-      */}
-      </nav>
+      <header>
+        <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
+          {this.renderLeftLayout(navDropdownState)}
+          {this.renderUserMenu(navDropdownState)}
+        </nav>
+      </header>
     );
   }
 }
diff --git a/client/components/__test__/__snapshots__/Nav.test.jsx.snap b/client/components/__test__/__snapshots__/Nav.test.jsx.snap
index c1ae3128..592fc282 100644
--- a/client/components/__test__/__snapshots__/Nav.test.jsx.snap
+++ b/client/components/__test__/__snapshots__/Nav.test.jsx.snap
@@ -1,344 +1,346 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Nav renders correctly 1`] = `
-<nav
-  className="nav"
-  title="main-navigation"
->
-  <ul
-    className="nav__items-left"
+<header>
+  <nav
+    className="nav"
+    title="main-navigation"
   >
-    <li
-      className="nav__item-logo"
+    <ul
+      className="nav__items-left"
     >
-      <test-file-stub
-        aria-label="p5.js Logo"
-        className="svg__logo"
-        focusable="false"
-        role="img"
-      />
-    </li>
-    <li
-      className="nav__item"
-    >
-      <button
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOver={[Function]}
+      <li
+        className="nav__item-logo"
       >
-        <span
-          className="nav__item-header"
-        >
-          File
-        </span>
         <test-file-stub
-          aria-hidden="true"
-          className="nav__item-header-triangle"
+          aria-label="p5.js Logo"
+          className="svg__logo"
           focusable="false"
+          role="img"
         />
-      </button>
-      <ul
-        className="nav__dropdown"
+      </li>
+      <li
+        className="nav__item"
       >
-        <li
-          className="nav__dropdown-item"
+        <button
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseOver={[Function]}
         >
-          <button
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
+          <span
+            className="nav__item-header"
           >
-            New
-          </button>
-        </li>
-        <li
-          className="nav__dropdown-item"
+            File
+          </span>
+          <test-file-stub
+            aria-hidden="true"
+            className="nav__item-header-triangle"
+            focusable="false"
+          />
+        </button>
+        <ul
+          className="nav__dropdown"
         >
-          <button
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
+          <li
+            className="nav__dropdown-item"
           >
-            Duplicate
-          </button>
-        </li>
-        <li
-          className="nav__dropdown-item"
-        >
-          <button
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-          >
-            Share
-          </button>
-        </li>
-        <li
-          className="nav__dropdown-item"
-        >
-          <button
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-          >
-            Download
-          </button>
-        </li>
-        <li
-          className="nav__dropdown-item"
-        >
-          <a
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            style={Object {}}
-          >
-            Open
-          </a>
-        </li>
-      </ul>
-    </li>
-    <li
-      className="nav__item"
-    >
-      <button
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOver={[Function]}
-      >
-        <span
-          className="nav__item-header"
-        >
-          Edit
-        </span>
-        <test-file-stub
-          aria-hidden="true"
-          className="nav__item-header-triangle"
-          focusable="false"
-        />
-      </button>
-      <ul
-        className="nav__dropdown"
-      >
-        <li
-          className="nav__dropdown-item"
-        >
-          <button
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-          >
-            Tidy Code
-            <span
-              className="nav__keyboard-shortcut"
+            <button
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
             >
-              ⇧
-              +Tab
-            </span>
-          </button>
-        </li>
-        <li
-          className="nav__dropdown-item"
-        >
-          <button
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
+              New
+            </button>
+          </li>
+          <li
+            className="nav__dropdown-item"
           >
-            Find
-            <span
-              className="nav__keyboard-shortcut"
+            <button
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
             >
-              ⌃
-              +F
-            </span>
-          </button>
-        </li>
-        <li
-          className="nav__dropdown-item"
-        >
-          <button
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
+              Duplicate
+            </button>
+          </li>
+          <li
+            className="nav__dropdown-item"
           >
-            Find Next
-            <span
-              className="nav__keyboard-shortcut"
+            <button
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
             >
-              ⌃
-              +G
-            </span>
-          </button>
-        </li>
-        <li
-          className="nav__dropdown-item"
-        >
-          <button
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
+              Share
+            </button>
+          </li>
+          <li
+            className="nav__dropdown-item"
           >
-            Find Previous
-            <span
-              className="nav__keyboard-shortcut"
+            <button
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
             >
-              ⇧
-              +
-              ⌃
-              +G
-            </span>
-          </button>
-        </li>
-      </ul>
-    </li>
-    <li
-      className="nav__item"
-    >
-      <button
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOver={[Function]}
+              Download
+            </button>
+          </li>
+          <li
+            className="nav__dropdown-item"
+          >
+            <a
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              style={Object {}}
+            >
+              Open
+            </a>
+          </li>
+        </ul>
+      </li>
+      <li
+        className="nav__item"
       >
-        <span
-          className="nav__item-header"
+        <button
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseOver={[Function]}
         >
-          Sketch
-        </span>
-        <test-file-stub
-          aria-hidden="true"
-          className="nav__item-header-triangle"
-          focusable="false"
-        />
-      </button>
-      <ul
-        className="nav__dropdown"
-      >
-        <li
-          className="nav__dropdown-item"
-        >
-          <button
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
+          <span
+            className="nav__item-header"
           >
-            Add File
-          </button>
-        </li>
-        <li
-          className="nav__dropdown-item"
+            Edit
+          </span>
+          <test-file-stub
+            aria-hidden="true"
+            className="nav__item-header-triangle"
+            focusable="false"
+          />
+        </button>
+        <ul
+          className="nav__dropdown"
         >
-          <button
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
+          <li
+            className="nav__dropdown-item"
           >
-            Add Folder
-          </button>
-        </li>
-        <li
-          className="nav__dropdown-item"
-        >
-          <button
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-          >
-            Run
-            <span
-              className="nav__keyboard-shortcut"
+            <button
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
             >
-              ⌃
-              +Enter
-            </span>
-          </button>
-        </li>
-        <li
-          className="nav__dropdown-item"
-        >
-          <button
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
+              Tidy Code
+              <span
+                className="nav__keyboard-shortcut"
+              >
+                ⇧
+                +Tab
+              </span>
+            </button>
+          </li>
+          <li
+            className="nav__dropdown-item"
           >
-            Stop
-            <span
-              className="nav__keyboard-shortcut"
+            <button
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
             >
-              ⇧
-              +
-              ⌃
-              +Enter
-            </span>
-          </button>
-        </li>
-      </ul>
-    </li>
-    <li
-      className="nav__item"
-    >
-      <button
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onMouseOver={[Function]}
+              Find
+              <span
+                className="nav__keyboard-shortcut"
+              >
+                ⌃
+                +F
+              </span>
+            </button>
+          </li>
+          <li
+            className="nav__dropdown-item"
+          >
+            <button
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+            >
+              Find Next
+              <span
+                className="nav__keyboard-shortcut"
+              >
+                ⌃
+                +G
+              </span>
+            </button>
+          </li>
+          <li
+            className="nav__dropdown-item"
+          >
+            <button
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+            >
+              Find Previous
+              <span
+                className="nav__keyboard-shortcut"
+              >
+                ⇧
+                +
+                ⌃
+                +G
+              </span>
+            </button>
+          </li>
+        </ul>
+      </li>
+      <li
+        className="nav__item"
       >
-        <span
-          className="nav__item-header"
+        <button
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseOver={[Function]}
         >
-          Help
-        </span>
-        <test-file-stub
-          aria-hidden="true"
-          className="nav__item-header-triangle"
-          focusable="false"
-        />
-      </button>
-      <ul
-        className="nav__dropdown"
+          <span
+            className="nav__item-header"
+          >
+            Sketch
+          </span>
+          <test-file-stub
+            aria-hidden="true"
+            className="nav__item-header-triangle"
+            focusable="false"
+          />
+        </button>
+        <ul
+          className="nav__dropdown"
+        >
+          <li
+            className="nav__dropdown-item"
+          >
+            <button
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+            >
+              Add File
+            </button>
+          </li>
+          <li
+            className="nav__dropdown-item"
+          >
+            <button
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+            >
+              Add Folder
+            </button>
+          </li>
+          <li
+            className="nav__dropdown-item"
+          >
+            <button
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+            >
+              Run
+              <span
+                className="nav__keyboard-shortcut"
+              >
+                ⌃
+                +Enter
+              </span>
+            </button>
+          </li>
+          <li
+            className="nav__dropdown-item"
+          >
+            <button
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+            >
+              Stop
+              <span
+                className="nav__keyboard-shortcut"
+              >
+                ⇧
+                +
+                ⌃
+                +Enter
+              </span>
+            </button>
+          </li>
+        </ul>
+      </li>
+      <li
+        className="nav__item"
       >
-        <li
-          className="nav__dropdown-item"
+        <button
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onMouseOver={[Function]}
         >
-          <button
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
+          <span
+            className="nav__item-header"
           >
-            Keyboard Shortcuts
-          </button>
-        </li>
-        <li
-          className="nav__dropdown-item"
+            Help
+          </span>
+          <test-file-stub
+            aria-hidden="true"
+            className="nav__item-header-triangle"
+            focusable="false"
+          />
+        </button>
+        <ul
+          className="nav__dropdown"
         >
-          <a
-            href="https://p5js.org/reference/"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
+          <li
+            className="nav__dropdown-item"
           >
-            Reference
-          </a>
-        </li>
-        <li
-          className="nav__dropdown-item"
-        >
-          <a
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            style={Object {}}
+            <button
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+            >
+              Keyboard Shortcuts
+            </button>
+          </li>
+          <li
+            className="nav__dropdown-item"
           >
-            About
-          </a>
-        </li>
-      </ul>
-    </li>
-  </ul>
-</nav>
+            <a
+              href="https://p5js.org/reference/"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Reference
+            </a>
+          </li>
+          <li
+            className="nav__dropdown-item"
+          >
+            <a
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              style={Object {}}
+            >
+              About
+            </a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </nav>
+</header>
 `;
diff --git a/client/modules/IDE/components/AssetList.jsx b/client/modules/IDE/components/AssetList.jsx
index f2fef386..4c2e0371 100644
--- a/client/modules/IDE/components/AssetList.jsx
+++ b/client/modules/IDE/components/AssetList.jsx
@@ -175,7 +175,7 @@ class AssetList extends React.Component {
   render() {
     const { assetList } = this.props;
     return (
-      <div className="asset-table-container">
+      <article className="asset-table-container">
         <Helmet>
           <title>{this.getAssetsTitle()}</title>
         </Helmet>
@@ -195,7 +195,7 @@ class AssetList extends React.Component {
               {assetList.map(asset => <AssetListRow asset={asset} key={asset.key} />)}
             </tbody>
           </table>}
-      </div>
+      </article>
     );
   }
 }
diff --git a/client/modules/IDE/components/CollectionList/CollectionList.jsx b/client/modules/IDE/components/CollectionList/CollectionList.jsx
index 9fd70479..251f3e3c 100644
--- a/client/modules/IDE/components/CollectionList/CollectionList.jsx
+++ b/client/modules/IDE/components/CollectionList/CollectionList.jsx
@@ -129,7 +129,7 @@ class CollectionList extends React.Component {
     const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
 
     return (
-      <div className="sketches-table-container">
+      <article className="sketches-table-container">
         <Helmet>
           <title>{this.getTitle()}</title>
         </Helmet>
@@ -176,7 +176,7 @@ class CollectionList extends React.Component {
             </Overlay>
           )
         }
-      </div>
+      </article>
     );
   }
 }
diff --git a/client/modules/IDE/components/Console.jsx b/client/modules/IDE/components/Console.jsx
index 604bf9f0..37711d27 100644
--- a/client/modules/IDE/components/Console.jsx
+++ b/client/modules/IDE/components/Console.jsx
@@ -86,8 +86,8 @@ class Console extends React.Component {
     });
 
     return (
-      <div className={consoleClass} role="main">
-        <div className="preview-console__header">
+      <section className={consoleClass} >
+        <header className="preview-console__header">
           <h2 className="preview-console__header-title">Console</h2>
           <div className="preview-console__header-buttons">
             <button className="preview-console__clear" onClick={this.props.clearConsole} aria-label="Clear console">
@@ -104,7 +104,7 @@ class Console extends React.Component {
               <UpArrowIcon focusable="false" aria-hidden="true" />
             </button>
           </div>
-        </div>
+        </header>
         <div ref={(element) => { this.consoleMessages = element; }} className="preview-console__messages">
           {this.props.consoleEvents.map((consoleEvent) => {
             const { method, times } = consoleEvent;
@@ -127,7 +127,7 @@ class Console extends React.Component {
             );
           })}
         </div>
-      </div>
+      </section>
     );
   }
 }
diff --git a/client/modules/IDE/components/Editor.jsx b/client/modules/IDE/components/Editor.jsx
index 9f2ac9e9..e07dd001 100644
--- a/client/modules/IDE/components/Editor.jsx
+++ b/client/modules/IDE/components/Editor.jsx
@@ -314,10 +314,7 @@ class Editor extends React.Component {
     });
 
     return (
-      <section
-        role="main"
-        className={editorSectionClass}
-      >
+      <section className={editorSectionClass} >
         <header className="editor__header">
           <button
             aria-label="Open Sketch files navigation"
@@ -348,8 +345,8 @@ class Editor extends React.Component {
             />
           </div>
         </header>
-        <div ref={(element) => { this.codemirrorContainer = element; }} className={editorHolderClass} >
-        </div>
+        <article ref={(element) => { this.codemirrorContainer = element; }} className={editorHolderClass} >
+        </article>
         <EditorAccessibility
           lintMessages={this.props.lintMessages}
         />
diff --git a/client/modules/IDE/components/Sidebar.jsx b/client/modules/IDE/components/Sidebar.jsx
index 141728af..97c8c0ec 100644
--- a/client/modules/IDE/components/Sidebar.jsx
+++ b/client/modules/IDE/components/Sidebar.jsx
@@ -68,8 +68,8 @@ class Sidebar extends React.Component {
     const rootFile = this.props.files.filter(file => file.name === 'root')[0];
 
     return (
-      <nav className={sidebarClass} title="file-navigation" >
-        <div className="sidebar__header" onContextMenu={this.toggleProjectOptions}>
+      <section className={sidebarClass}>
+        <header className="sidebar__header" onContextMenu={this.toggleProjectOptions}>
           <h3 className="sidebar__title">
             <span>Sketch Files</span>
           </h3>
@@ -130,12 +130,12 @@ class Sidebar extends React.Component {
               }
             </ul>
           </div>
-        </div>
+        </header>
         <ConnectedFileNode
           id={rootFile.id}
           canEdit={canEditProject}
         />
-      </nav>
+      </section>
     );
   }
 }
diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index c10855bd..bbece87a 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -414,7 +414,7 @@ class SketchList extends React.Component {
   render() {
     const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
     return (
-      <div className="sketches-table-container">
+      <article className="sketches-table-container">
         <Helmet>
           <title>{this.getSketchesTitle()}</title>
         </Helmet>
@@ -457,7 +457,7 @@ class SketchList extends React.Component {
               />
             </Overlay>
         }
-      </div>
+      </article>
     );
   }
 }
diff --git a/client/modules/IDE/pages/FullView.jsx b/client/modules/IDE/pages/FullView.jsx
index 6a18566f..cbdc89d6 100644
--- a/client/modules/IDE/pages/FullView.jsx
+++ b/client/modules/IDE/pages/FullView.jsx
@@ -25,7 +25,7 @@ class FullView extends React.Component {
           owner={{ username: this.props.project.owner ? `${this.props.project.owner.username}` : '' }}
           project={{ name: this.props.project.name, id: this.props.params.project_id }}
         />
-        <div className="preview-frame-holder">
+        <main className="preview-frame-holder">
           <PreviewFrame
             htmlFile={this.props.htmlFile}
             jsFiles={this.props.jsFiles}
@@ -48,7 +48,7 @@ class FullView extends React.Component {
             expandConsole={this.ident}
             clearConsole={this.ident}
           />
-        </div>
+        </main>
       </div>
     );
   }
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index eba7b76c..14ac255c 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -239,7 +239,7 @@ class IDEView extends React.Component {
             />
           </Overlay>
         }
-        <div className="editor-preview-container">
+        <main className="editor-preview-container">
           <SplitPane
             split="vertical"
             size={this.state.sidebarSize}
@@ -327,7 +327,7 @@ class IDEView extends React.Component {
                   theme={this.props.preferences.theme}
                 />
               </SplitPane>
-              <div className="preview-frame-holder">
+              <section className="preview-frame-holder">
                 <header className="preview-frame__header">
                   <h2 className="preview-frame__title">Preview</h2>
                 </header>
@@ -370,10 +370,10 @@ class IDEView extends React.Component {
                     cmController={this.cmController}
                   />
                 </div>
-              </div>
+              </section>
             </SplitPane>
           </SplitPane>
-        </div>
+        </main>
         { this.props.ide.modalIsVisible &&
           <NewFileModal />
         }
diff --git a/client/modules/User/components/Collection.jsx b/client/modules/User/components/Collection.jsx
index 05f6b757..a5a043c5 100644
--- a/client/modules/User/components/Collection.jsx
+++ b/client/modules/User/components/Collection.jsx
@@ -227,7 +227,7 @@ class Collection extends React.Component {
     // };
 
     return (
-      <div className={`collection-metadata ${this.isOwner() ? 'collection-metadata--is-owner' : ''}`}>
+      <header className={`collection-metadata ${this.isOwner() ? 'collection-metadata--is-owner' : ''}`}>
         <div className="collection-metadata__columns">
           <div className="collection-metadata__column--left">
             <h2 className="collection-metadata__name">
@@ -270,7 +270,7 @@ class Collection extends React.Component {
             }
           </div>
         </div>
-      </div>
+      </header>
     );
   }
 
@@ -344,54 +344,56 @@ class Collection extends React.Component {
     const title = this.hasCollection() ? this.getCollectionName() : null;
 
     return (
-      <section className="collection-container" data-has-items={this.hasCollectionItems() ? 'true' : 'false'}>
-        <Helmet>
-          <title>{this.getTitle()}</title>
-        </Helmet>
-        {this._renderLoader()}
-        {this.hasCollection() && this._renderCollectionMetadata()}
-        <div className="collection-content">
-          <div className="collection-table-wrapper">
-            {this._renderEmptyTable()}
-            {this.hasCollectionItems() &&
-              <table className="sketches-table" summary="table containing all collections">
-                <thead>
-                  <tr>
-                    {this._renderFieldHeader('name', 'Name')}
-                    {this._renderFieldHeader('createdAt', 'Date Added')}
-                    {this._renderFieldHeader('user', 'Owner')}
-                    <th scope="col"></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {this.props.collection.items.map(item =>
-                    (<CollectionItemRow
-                      key={item.id}
-                      item={item}
-                      user={this.props.user}
-                      username={this.getUsername()}
-                      collection={this.props.collection}
-                    />))}
-                </tbody>
-              </table>
-            }
-            {
-              this.state.isAddingSketches && (
-                <Overlay
-                  title="Add sketch"
-                  actions={<SketchSearchbar />}
-                  closeOverlay={this.hideAddSketches}
-                  isFixedHeight
-                >
-                  <div className="collection-add-sketch">
-                    <AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />
-                  </div>
-                </Overlay>
-              )
-            }
-          </div>
-        </div>
-      </section>
+      <main className="collection-container" data-has-items={this.hasCollectionItems() ? 'true' : 'false'}>
+        <article className="collection">
+          <Helmet>
+            <title>{this.getTitle()}</title>
+          </Helmet>
+          {this._renderLoader()}
+          {this.hasCollection() && this._renderCollectionMetadata()}
+          <article className="collection-content">
+            <div className="collection-table-wrapper">
+              {this._renderEmptyTable()}
+              {this.hasCollectionItems() &&
+                <table className="sketches-table" summary="table containing all collections">
+                  <thead>
+                    <tr>
+                      {this._renderFieldHeader('name', 'Name')}
+                      {this._renderFieldHeader('createdAt', 'Date Added')}
+                      {this._renderFieldHeader('user', 'Owner')}
+                      <th scope="col"></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {this.props.collection.items.map(item =>
+                      (<CollectionItemRow
+                        key={item.id}
+                        item={item}
+                        user={this.props.user}
+                        username={this.getUsername()}
+                        collection={this.props.collection}
+                      />))}
+                  </tbody>
+                </table>
+              }
+              {
+                this.state.isAddingSketches && (
+                  <Overlay
+                    title="Add sketch"
+                    actions={<SketchSearchbar />}
+                    closeOverlay={this.hideAddSketches}
+                    isFixedHeight
+                  >
+                    <div className="collection-add-sketch">
+                      <AddToCollectionSketchList username={this.props.username} collection={this.props.collection} />
+                    </div>
+                  </Overlay>
+                )
+              }
+            </div>
+          </article>
+        </article>
+      </main>
     );
   }
 }
diff --git a/client/modules/User/pages/AccountView.jsx b/client/modules/User/pages/AccountView.jsx
index 54157061..924e8a82 100644
--- a/client/modules/User/pages/AccountView.jsx
+++ b/client/modules/User/pages/AccountView.jsx
@@ -46,7 +46,7 @@ class AccountView extends React.Component {
 
         <Nav layout="dashboard" />
 
-        <section className="account-settings">
+        <main className="account-settings">
           <header className="account-settings__header">
             <h1 className="account-settings__title">Account Settings</h1>
           </header>
@@ -67,7 +67,7 @@ class AccountView extends React.Component {
             </Tabs>
           }
           { !accessTokensUIEnabled && <SocialLoginPanel {...this.props} /> }
-        </section>
+        </main>
       </div>
     );
   }
diff --git a/client/modules/User/pages/DashboardView.jsx b/client/modules/User/pages/DashboardView.jsx
index 2b1373cf..229fe923 100644
--- a/client/modules/User/pages/DashboardView.jsx
+++ b/client/modules/User/pages/DashboardView.jsx
@@ -117,7 +117,7 @@ class DashboardView extends React.Component {
       <div className="dashboard">
         <Nav layout="dashboard" />
 
-        <section className="dashboard-header">
+        <main className="dashboard-header">
           <div className="dashboard-header__header">
             <h2 className="dashboard-header__header__title">{this.ownerName()}</h2>
             <div className="dashboard-header__nav">
@@ -133,7 +133,7 @@ class DashboardView extends React.Component {
           <div className="dashboard-content">
             {this.renderContent(currentTab, username)}
           </div>
-        </section>
+        </main>
         {this.isCollectionCreate() &&
           <Overlay
             title="Create collection"
diff --git a/client/modules/User/pages/LoginView.jsx b/client/modules/User/pages/LoginView.jsx
index d2e37f01..ef82507f 100644
--- a/client/modules/User/pages/LoginView.jsx
+++ b/client/modules/User/pages/LoginView.jsx
@@ -33,7 +33,7 @@ class LoginView extends React.Component {
     return (
       <div className="login">
         <Nav layout="dashboard" />
-        <div className="form-container">
+        <main className="form-container">
           <Helmet>
             <title>p5.js Web Editor | Login</title>
           </Helmet>
@@ -52,7 +52,7 @@ class LoginView extends React.Component {
               <Link className="form__reset-password-button" to="/reset-password">Reset your password</Link>
             </p>
           </div>
-        </div>
+        </main>
       </div>
     );
   }
diff --git a/client/modules/User/pages/SignupView.jsx b/client/modules/User/pages/SignupView.jsx
index eb18f0dc..8272b353 100644
--- a/client/modules/User/pages/SignupView.jsx
+++ b/client/modules/User/pages/SignupView.jsx
@@ -26,7 +26,7 @@ class SignupView extends React.Component {
     return (
       <div className="signup">
         <Nav layout="dashboard" />
-        <div className="form-container">
+        <main className="form-container">
           <Helmet>
             <title>p5.js Web Editor | Signup</title>
           </Helmet>
@@ -38,7 +38,7 @@ class SignupView extends React.Component {
               <Link className="form__login-button" to="/login">Log In</Link>
             </p>
           </div>
-        </div>
+        </main>
       </div>
     );
   }
diff --git a/client/styles/components/_collection.scss b/client/styles/components/_collection.scss
index 347e573b..0b577dc2 100644
--- a/client/styles/components/_collection.scss
+++ b/client/styles/components/_collection.scss
@@ -7,6 +7,12 @@
   flex-direction:column;
 }
 
+.collection {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
 .collection-metadata {
   max-width: #{1012 / $base-font-size}rem;
   width: 100%;