diff --git a/package.json b/package.json
index a45df1d..d21e0a8 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
     "lit-html": "^0.9.0",
     "pwa-helpers": "PolymerLabs/pwa-helpers",
     "redux-thunk": "^2.2.0",
-    "reselect": "^3.0.1"
+    "reselect": "^3.0.1",
+    "virtual-list": "github:PolymerLabs/virtual-list#master"
   },
   "devDependencies": {
     "polyserve": "^0.25.2"
diff --git a/src/components/hn-item.js b/src/components/hn-item.js
index d1405fb..e1f629c 100644
--- a/src/components/hn-item.js
+++ b/src/components/hn-item.js
@@ -9,7 +9,8 @@
  */
 
 import { LitElement, html } from '../../node_modules/@polymer/lit-element/lit-element.js';
-import { repeat } from '../../node_modules/lit-html/lib/repeat.js';
+import { verticalList } from '../../node_modules/virtual-list/lit-html/lit-list.js';
+import Layout from '../../node_modules/virtual-list/layouts/layout-1d.js';
 import { unsafeHTML } from '../../node_modules/lit-html/lib/unsafe-html.js';
 import { connect } from '../../node_modules/pwa-helpers/connect-mixin.js';
 import { fetchItem, fetchItemIfNeeded } from '../actions/items.js';
@@ -29,6 +30,12 @@ store.addReducers({
 
 store.dispatch(loadFavorites());
 
+const layout = new Layout({
+  itemSize: {
+    y: 2000
+  }
+});
+
 export class HnItemElement extends connect(store)(LitElement) {
   render({ favorites, item }) {
     const comments = item.comments || [];
@@ -40,21 +47,21 @@ export class HnItemElement extends connect(store)(LitElement) {
         border-bottom: 1px solid #e5e5e5;
       }
     </style>
-    <hn-loading-button
-        loading="${item.isFetching}"
-        on-click="${() => store.dispatch(fetchItem(item))}">
-    </hn-loading-button>
     <div hidden="${item.failure}">
       <hn-summary
           item="${item}"
           isFavorite="${favorites && item && favorites[item.id]}">
       </hn-summary>
       <div hidden="${!item.content}">${unsafeHTML(item.content)}</div>
-      ${repeat(comments, (comment) => html`
+      ${verticalList(comments, (comment) => html`
         <hn-comment id="${comment.id}" comment="${comment}" itemId="${item.id}"></hn-comment>
-      `)}
+      `, layout)}
     </div>
     ${item.failure ? html`<p>Item not found</p>` : ''}
+    <hn-loading-button
+        loading="${item.isFetching}"
+        on-click="${() => store.dispatch(fetchItem(item))}">
+    </hn-loading-button>
     `;
   }
 
diff --git a/src/components/hn-list.js b/src/components/hn-list.js
index 4ecf862..2189b49 100644
--- a/src/components/hn-list.js
+++ b/src/components/hn-list.js
@@ -9,7 +9,7 @@
  */
 
 import { LitElement, html } from '../../node_modules/@polymer/lit-element/lit-element.js';
-import { repeat } from '../../node_modules/lit-html/lib/repeat.js';
+import { verticalList } from '../../node_modules/virtual-list/lit-html/lit-list.js';
 import { connect } from '../../node_modules/pwa-helpers/connect-mixin.js';
 import { fetchList, fetchListIfNeeded } from '../actions/lists.js';
 import { loadFavorites } from '../actions/favorites.js';
@@ -41,6 +41,14 @@ export class HnListElement extends connect(store)(LitElement) {
         margin: 0 8px 8px 0;
       }
     </style>
+    <div>
+    ${verticalList(items, (item) => html`
+      <hn-summary
+          item="${item}"
+          isFavorite="${favorites && item && favorites[item.id]}">
+      </hn-summary>
+    `)}
+    </div>
     ${
       list.id !== 'favorites' ?
       html`
@@ -51,12 +59,6 @@ export class HnListElement extends connect(store)(LitElement) {
       ` :
       null
     }
-    ${repeat(items, (item) => html`
-      <hn-summary
-          item="${item}"
-          isFavorite="${favorites && item && favorites[item.id]}">
-      </hn-summary>
-    `)}
     ${
       list.id !== 'favorites' && items.length ?
       html`