diff --git a/src/app/webbrowser/Browser.qml b/src/app/webbrowser/Browser.qml
index e0ae817da..26fa7fc42 100644
--- a/src/app/webbrowser/Browser.qml
+++ b/src/app/webbrowser/Browser.qml
@@ -40,6 +40,11 @@ Common.BrowserView {
 
     currentWebview: tabsModel && tabsModel.currentTab ? tabsModel.currentTab.webview : null
 
+    TabChrome {
+        id: invisibleTabChrome
+        visible: false
+    }
+
     property bool incognito: false
 
     property var tabsModel: TabsModel {
@@ -88,7 +93,7 @@ Common.BrowserView {
         state.url = tab.url.toString()
         state.title = tab.title
         state.icon = tab.icon.toString()
-        state.preview = tab.preview.toString()
+        state.preview =  Qt.resolvedUrl(PreviewManager.previewPathFromUrl(tab.url))
         state.savedState = tab.webview ? tab.webview.currentState : tab.restoreState
         return state
     }
@@ -552,9 +557,13 @@ Common.BrowserView {
         anchors.fill: parent
         visible: bottomEdgeHandle.dragging || tabslist.animating || (state == "shown")
         onVisibleChanged: {
-            if (visible)
-            {
-                currentWebview.hideContextMenu()
+            if (visible) {
+
+                currentWebview.hideContextMenu();
+                chrome.state = "hidden";
+            }
+            else {
+                chrome.state = "shown";
             }
         }
 
@@ -682,8 +691,8 @@ Common.BrowserView {
         property bool hidden: false
 
         Behavior on y {
-            enabled: recentView.visible
             NumberAnimation {
+                from: -chrome.height + invisibleTabChrome.height
                 duration: UbuntuAnimation.FastDuration
             }
         }
@@ -840,7 +849,7 @@ Common.BrowserView {
         Connections {
             target: browser.currentWebview
             onLoadingChanged: {
-                if (browser.currentWebview.loading) {
+                if (browser.currentWebview.loading && !recentView.visible) {
                     chrome.state = "shown"
                 } else if (browser.currentWebview.isFullScreen) {
                     chrome.state = "hidden"
diff --git a/src/app/webbrowser/BrowserTab.qml b/src/app/webbrowser/BrowserTab.qml
index 2c3f20155..1aea6afea 100644
--- a/src/app/webbrowser/BrowserTab.qml
+++ b/src/app/webbrowser/BrowserTab.qml
@@ -44,25 +44,19 @@ FocusScope {
     readonly property real lastCurrent: internal.lastCurrent
     property bool incognito
     readonly property bool empty: !url.toString() && !initialUrl.toString() && !restoreState && !request
+    property bool loadingPreview: false
+    readonly property size previewSize: webview ? Qt.size(webview.width*Screen.devicePixelRatio,
+                                                webview.height*Screen.devicePixelRatio) : Qt.size(0,0)
+    readonly property size previewThumbnailSize: webview ? Qt.size(webview.width/1.5,
+                                                         webview.height/1.5) : Qt.size(0,0)
+    //store reference to preview to avoid clearing by garbage collector
+    property var previewCache
     visible: false
 
     // Used as a workaround for https://launchpad.net/bugs/1502675 :
     // invoke this on a tab shortly before it is set current.
     signal aboutToShow()
 
-    Connections {
-        target: PreviewManager
-        onPreviewSaved: {
-            if (pageUrl !== url) return
-            if (preview == previewUrl) {
-                // Ensure that the preview URL actually changes,
-                // for the image to be reloaded
-                preview = ""
-            }
-            preview = previewUrl
-        }
-    }
-
     FaviconFetcher {
         id: faviconFetcher
         shouldCache: !tab.incognito
@@ -190,40 +184,36 @@ FocusScope {
 
             internal.hiding = true
             webview.grabToImage(function(result) {
-                if (!internal.hiding) {
-                    return
-                }
-                internal.hiding = false
                 visible = false
+                preview = result.url
+                previewCache = result
+            },previewSize);
 
+            //save previews to disk for newtabpage and tab during grabbing
+            webview.grabToImage(function(result) {
+                internal.hiding = false
                 PreviewManager.saveToDisk(result, url)
-            })
+            },previewThumbnailSize);
         }
     }
 
-    // Take a capture of the current page shortly after it has finished
-    // loading to give rendering an opportunity to complete. There is
-    // unfortunately no signal to notify us when rendering has completed.
-    Timer {
-        id: delayedCapture
-        interval: 500
-        onTriggered: {
-            if (webview && current && visible && !internal.hiding) {
+    Connections {
+        target: recentView
+        onVisibleChanged: {
+            if(visible && current && !empty && !webview.incognito) {
+                preview = ""
+                loadingPreview = true
+                webview.grabToImage(function(result) {
+                    preview = result.url
+                    previewCache = result
+                },previewSize);
+
                 webview.grabToImage(function(result) {
                     PreviewManager.saveToDisk(result, url)
-                })
+                },previewThumbnailSize);
             }
         }
     }
-    Connections {
-        target: incognito ? null : webview
-//        onLoadEvent: {
-//            if ((event.type == Oxide.LoadEvent.TypeSucceeded) ||
-//                (event.type == Oxide.LoadEvent.TypeFailed)) {
-//                delayedCapture.restart()
-//            }
-//        }
-    }
 
     onAboutToShow: {
         if (!current) {
diff --git a/src/app/webbrowser/TabPreview.qml b/src/app/webbrowser/TabPreview.qml
index 9c9191fc0..c5b2e6af6 100644
--- a/src/app/webbrowser/TabPreview.qml
+++ b/src/app/webbrowser/TabPreview.qml
@@ -18,8 +18,9 @@
 
 import QtQuick 2.4
 import Ubuntu.Components 1.3
+import QtQuick.Controls 2.2 as QQC2
 
-Item {
+QQC2.SwipeDelegate {
     id: tabPreview
 
     property alias title: chrome.title
@@ -28,121 +29,107 @@ Item {
     property var tab
     readonly property url url: tab ? tab.url : ""
 
-    // The first preview in the tabs list is a special case.
-    // Since it’s the current tab, instead of displaying a
-    // capture, the webview below it is displayed.
-    property bool showContent: true
+    background: Rectangle {
+        color: "transparent"
+    }
+    padding: 0
+    swipe.enabled: true
+    swipe.behind: Rectangle {
+        width: tabPreview.width
+        height: tabPreview.height
+        color: "transparent"
+    }
+
+    swipe.onCompleted: closed()
+    onClicked: tabPreview.selected()
 
     signal selected()
     signal closed()
 
-    TabChrome {
-        id: chrome
-
-        anchors {
-            top: parent.top
-            left: parent.left
-            right: parent.right
-        }
-        tabWidth: units.gu(26)
-
-        onSelected: tabPreview.selected()
-        onClosed: tabPreview.closed()
-    }
-
-    Item {
-        anchors {
-            top: chrome.bottom
-            topMargin: units.dp(-1)
-            left: parent.left
-            right: parent.right
-        }
-        height: parent.height
-        clip: true
+    contentItem: Item {
 
-        Rectangle {
-            anchors.fill: parent
-            color: theme.palette.normal.foreground
-            visible: showContent
-        }
+        TabChrome {
+            id: chrome
 
-        Image {
-            visible: showContent && !previewContainer.visible
-            source: "assets/tab-artwork.png"
-            asynchronous: true
-            fillMode: Image.PreserveAspectFit
-            width: parent.width / 5
-            height: width
             anchors {
+                top: parent.top
+                left: parent.left
                 right: parent.right
-                rightMargin: -width / 5
-                bottom: parent.bottom
-                bottomMargin: -height / 10
             }
+            tabWidth: units.gu(26)
+
+            onSelected: tabPreview.selected()
+            onClosed: tabPreview.closed()
         }
 
-        Rectangle {
+        Item {
             anchors {
-                top: parent.top
+                top: chrome.bottom
+                topMargin: units.dp(-1)
                 left: parent.left
                 right: parent.right
             }
-            height: units.dp(1)
 
-            color: theme.palette.normal.base
-        }
 
-        Label {
-            visible: showContent && !previewContainer.visible
-            text: i18n.tr("Tap to view")
-            anchors {
-                centerIn: parent
-                verticalCenterOffset: units.gu(-2)
+
+            visible: !tab.loadingPreview
+            height: parent.height
+            clip: true
+
+            Rectangle {
+                anchors.fill: parent
+                color: theme.palette.normal.foreground
             }
-        }
 
-        Image {
-            id: previewContainer
-            visible: showContent && source.toString() && (status == Image.Ready)
-            anchors {
-                left: parent.left
-                top: parent.top
-                topMargin: -chrome.height
+            Image {
+                visible: !previewContainer.visible
+                source: "assets/tab-artwork.png"
+                asynchronous: true
+                fillMode: Image.PreserveAspectFit
+                width: parent.width / 5
+                height: width
+                anchors {
+                    right: parent.right
+                    rightMargin: -width / 5
+                    bottom: parent.bottom
+                    bottomMargin: -height / 10
+                }
             }
-            height: sourceSize.height
-            fillMode: Image.Pad
-            source: tabPreview.tab ? tabPreview.tab.preview : ""
-            asynchronous: true
-            cache: false
-            onStatusChanged: {
-                if (status == Image.Error) {
-                    // The cached preview doesn’t exist any longer
-                    tabPreview.tab.preview = ""
+
+            Rectangle {
+                anchors {
+                    top: parent.top
+                    left: parent.left
+                    right: parent.right
                 }
+                height: units.dp(1)
+
+                color: theme.palette.normal.base
             }
-        }
 
-        MouseArea {
-            objectName: "selectArea"
-            anchors.fill: parent
-            acceptedButtons: Qt.AllButtons
-
-            // 'clicked' events are emitted even if the cursor has been dragged
-            // (http://doc.qt.io/qt-5/qml-qtquick-mousearea.html#clicked-signal),
-            // but we don’t want a drag gesture to select the tab (when e.g. the
-            // user has reached the top/bottom of the tabs view and starts another
-            // gesture to drag further beyond the boundaries of the view).
-            property point pos
-            onPressed: {
-                if (mouse.button == Qt.LeftButton) {
-                    pos = Qt.point(mouse.x, mouse.y)
+            Label {
+                visible: !previewContainer.visible
+                text: i18n.tr("Tap to view")
+                anchors {
+                    top: parent.top
+                    topMargin: units.gu(12)
+                    horizontalCenter: parent.horizontalCenter
                 }
             }
-            onReleased: {
-                if (mouse.button == Qt.LeftButton) {
-                    var d = Math.sqrt(Math.pow(mouse.x - pos.x, 2) + Math.pow(mouse.y - pos.y, 2))
-                    if (d < units.gu(1)) {
-                        tabPreview.selected()
+
+            Image {
+                id: previewContainer
+                visible: source.toString() && (status == Image.Ready)
+                anchors.fill: parent
+                anchors.topMargin: units.dp(1)
+                verticalAlignment: Image.AlignTop
+                fillMode: Image.PreserveAspectFit
+                source: tabPreview.tab ? tabPreview.tab.preview : ""
+                asynchronous: true
+                cache: false
+                onStatusChanged: {
+                    if (status != Image.Loading) {
+                        tab.loadingPreview = false
                     }
                 }
             }
diff --git a/src/app/webbrowser/TabsList.qml b/src/app/webbrowser/TabsList.qml
index b33541e08..85dc6a2be 100644
--- a/src/app/webbrowser/TabsList.qml
+++ b/src/app/webbrowser/TabsList.qml
@@ -44,13 +44,19 @@ Item {
     }
 
     Rectangle {
-        anchors {
-            top: parent.top
-            left: parent.left
-            right: parent.right
-        }
-        height: invisibleTabChrome.height
-        color: theme.palette.normal.backgroundText
+        id: backrect
+        width: parent.width
+        height: dealayBackground.running ? invisibleTabChrome.height : parent.height
+        color: theme.palette.normal.base
+    }
+    onVisibleChanged: {
+        if (visible)
+            dealayBackground.start()
+    }
+
+    Timer {
+        id: dealayBackground
+        interval: 300
     }
 
     Flickable {
@@ -74,12 +80,7 @@ Item {
 
                 width: flickable.contentWidth
 
-                height: (index == (repeater.model.count - 1)) ? flickable.height : delegateHeight
-                Behavior on height {
-                    UbuntuNumberAnimation {
-                        duration: UbuntuAnimation.BriskDuration
-                    }
-                }
+                height: flickable.height
 
                 y: Math.max(flickable.contentY, index * delegateHeight)
                 Behavior on y {
@@ -108,8 +109,6 @@ Item {
                     icon: delegate.icon
                     incognito: tabslist.incognito
                     tab: model.tab
-                    showContent: ((index > 0) && (delegate.y > flickable.contentY)) ||
-                                 !(tab && tab.webview && tab.webview.visible)
 
                   /*  Binding {
                         // Change the height of the location bar controller
@@ -132,7 +131,7 @@ Item {
             property int index: 0
             target: flickable
             property: "contentY"
-            to: index * delegateHeight - chromeHeight + invisibleTabChrome.height
+            to: index * delegateHeight
             duration: UbuntuAnimation.FastDuration
             onStopped: {
                 // Delay switching the tab until after the animation has completed.