diff --git a/build/extension/bodymovin.zxp b/build/extension/bodymovin.zxp
index 041feed..4c8b851 100644
--- a/build/extension/bodymovin.zxp
+++ b/build/extension/bodymovin.zxp
Binary files differ
diff --git a/extension/css/snapshot.css b/extension/css/snapshot.css
index b2d8351..f9790c0 100644
--- a/extension/css/snapshot.css
+++ b/extension/css/snapshot.css
@@ -15,12 +15,101 @@
     width: 100%;
 }
 
+#snapshot .header{
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+#snapshot .header .buttons{
+    margin-top: 10px;
+}
+
 #snapshot h1{
-    color: #EAD3A8;
+    color: #D23641;
+    margin: 0;
 }
 
 
 #snapshot .animContainer{
     width: 100%;
-    height: 400px;
+    background-color: #6E6568;
+}
+
+#snapshot .controls{
+    height: 40px;
+    width: 100%;
+    background-color: #EAD3A8;
+    border-top: 1px solid #484043;
+    position: relative;
+}
+
+#snapshot .controls .snapshotButton{
+    float: left;
+    margin-top: 5px;
+    margin-left: 4px;
+}
+
+#snapshot .controls .slider{
+    width: 100%;
+    height: 2px;
+    background-color: #D23641;
+    cursor: pointer;
+}
+
+#snapshot .controls .thumb{
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: #D23641;
+    border: 1px solid #FFFFFF;
+    position: absolute;
+    left: -5px;
+    top: -5px;
+    cursor: pointer;
+    pointer-events: none;
+}
+
+#snapshot .controls .frames{
+    float: right;
+    padding: 10px;
+    color: #D23641;
+    font-size: 12px;
+    line-height: 20px;
+}
+
+#snapshot .controls .frames .current{
+    background-color: #484043;
+    display: inline-block;
+    vertical-align: top;
+    min-width: 20px;
+    height: 20px;
+    padding: 0px 2px;
+    text-align: right;
+}
+
+#snapshot .controls .frames .total{
+    display: inline-block;
+    vertical-align: top;
+}
+
+#snapshot .rendersSelection {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,.8);
+}
+
+#snapshot .rendersSelection .listContainer{
+    text-align: center;
+}
+
+#snapshot .rendersSelection .topSpace{
+    height: 10%;
+}
+
+#snapshot  .rendersSelection .listContainer .generalButton{
+    display: block;
+    margin: auto;
 }
\ No newline at end of file
diff --git a/extension/index.html b/extension/index.html
index 8bcffe2..feae247 100644
--- a/extension/index.html
+++ b/extension/index.html
@@ -48,14 +48,33 @@
             </div>
         </div>
         <div id='snapshot'>
-            <h1>Select animation</h1>
-            <div class='buttons'>
-                <button class='generalButton rightFloat current'>Current renders</button>
-                <div class='buttonSeparator rightFloat'></div>
-                <button class='generalButton rightFloat browse'>Browse</button>
-                <button class='generalButton return'>Back</button>
+            <div class='header'>
+                <h1>Select animation</h1>
+                <div class='buttons'>
+                    <button class='generalButton rightFloat current'>Current renders</button>
+                    <div class='buttonSeparator rightFloat'></div>
+                    <button class='generalButton rightFloat browse'>Browse</button>
+                    <button class='generalButton return'>Back</button>
+                </div>
             </div>
             <div class="animContainer"></div>
+            <div class="controls">
+                <div class="slider"></div>
+                <div class="thumb"></div>
+                <button class="snapshotButton generalButton highlightButton">Take Snapshot</button>
+                <div class="frames">
+                    <div class="current" contenteditable="true"></div>
+                    <div class="total" >/<span class='value'></span></div>
+                </div>
+            </div>
+            <div class="rendersSelection">
+                <div class="topSpace"></div>
+                <div class="listContainer">
+                
+                </div>
+                <div>
+                </div>
+            </div>
         </div>
         <div id='info'>
             <div class='buttons'>
diff --git a/extension/js/controllers/CompRenderController.js b/extension/js/controllers/CompRenderController.js
index 822f63f..121efd0 100644
--- a/extension/js/controllers/CompRenderController.js
+++ b/extension/js/controllers/CompRenderController.js
@@ -90,6 +90,7 @@
         }
         if (messageData.isFinished) {
             elem.addClass('rendered');
+            compData.renderData = messageData.data.substr(7);
         }
     }
     
@@ -134,9 +135,14 @@
         view.hide();
     }
     
+    function getCompositions() {
+        return compositions;
+    }
+    
     ob.init = init;
     ob.show = show;
     ob.hide = hide;
+    ob.getCompositions = getCompositions;
     
     return ob;
 }());
\ No newline at end of file
diff --git a/extension/js/controllers/snapshotController.js b/extension/js/controllers/snapshotController.js
index a5d461b..748dbe6 100644
--- a/extension/js/controllers/snapshotController.js
+++ b/extension/js/controllers/snapshotController.js
@@ -1,15 +1,24 @@
 /*jslint vars: true, plusplus: true, devel: true, nomen: true, regexp: true, indent: 4, maxerr: 50 */
-/*global $, alertData, successData, bodymovin, mainController */
+/*global $, alertData, successData, bodymovin, mainController, compRenderController, messageController */
 var snapshotController = (function () {
     'use strict';
-    var ob = {}, view, csInterface, anim, animContainer, showing = false;
+    var ob = {}, view, csInterface, anim, header, controls, current, animContainer, slider, thumb, snapshotButton, $window, showing = false;
+    var totalFrames, currentFrame, sliderWidth, rendersSelection, listContainer;
     
     function showSelection() {
         mainController.showView('selection');
     }
     
-    function displayCurrentRenders() {
-        
+    function showControls() {
+        controls.find('.snapshotButton').show();
+        controls.find('.frames .total').show();
+        current.show();
+    }
+    
+    function hideControls() {
+        controls.find('.snapshotButton').hide();
+        controls.find('.frames .total').hide();
+        current.hide();
     }
     
     function browseFiles() {
@@ -17,29 +26,134 @@
         csInterface.evalScript(eScript);
     }
     
-    function handleFilePath(ev) {
-        var jsonData = JSON.parse(ev.data.substr(7));
-        //var result = window.cep.fs.readFile(path);
+    function updateControls(origin) {
+        if (origin !== 'input') {
+            controls.find('.frames .current').html(currentFrame);
+        }
+        if (anim) {
+            anim.goToAndStop(currentFrame + 1, true);
+        }
+        var x = (currentFrame / totalFrames) * sliderWidth;
+        thumb.css('left', x - 5 + 'px');
+    }
+    
+    function loadAnimation(data) {
+        var jsonData = JSON.parse(data);
+        totalFrames = jsonData.animation.totalFrames;
+        controls.find('.frames .total .value').html(totalFrames);
+        currentFrame = 1;
         if (anim) {
             anim.destroy();
         }
+        updateControls();
         var params = {
                 animType: 'svg',
-                wrapper: animContainer,
+                wrapper: animContainer[0],
                 loop: false,
                 autoplay: false,
                 prerender: true,
                 animationData: jsonData
             };
         anim = bodymovin.loadAnimation(params);
+        showControls();
+    }
+    
+    function addSelectionListener(elem, data) {
+        elem.on('click', function () {
+            rendersSelection.hide();
+            loadAnimation(data.renderData);
+        });
+    }
+    
+    function displayCurrentRenders() {
+        var compositions = compRenderController.getCompositions();
+        if (!compositions || compositions.length === 0) {
+            messageController.showMessage({type: 'alert', message: 'You have no recent renders.\n Try browsing your files'});
+        } else if (compositions.length === 1) {
+            loadAnimation(compositions[0].renderData);
+        } else {
+            rendersSelection.show();
+            listContainer.empty();
+            var i, len = compositions.length;
+            var li;
+            for (i = 0; i < len; i += 1) {
+                li = $('<button class="generalButton">');
+                li.html(compositions[i].name);
+                listContainer.append(li);
+                addSelectionListener(li, compositions[i]);
+            }
+        }
+    }
+    
+    function handleFilePath(ev) {
+        loadAnimation(ev.data.substr(7));
     }
     
     function handleWindowResize() {
         if (!showing) {
             return;
         }
-        console.log($(window).height());
-        console.log($(window).width());
+        animContainer.css('height', $window.height() - 2 - header.outerHeight() - controls.outerHeight() + 'px');
+        sliderWidth = slider.width();
+        
+    }
+    
+    function frameChangeHandler() {
+        var num = parseInt(current.html(), 10);
+        if (isNaN(num)) {
+            return;
+        }
+        if (num < 0) {
+            num = 0;
+        } else if (num >= totalFrames) {
+            num = totalFrames - 1;
+        }
+        currentFrame = num;
+        updateControls('input');
+    }
+    
+    function updateSliderValue(pageX) {
+        var x = pageX - slider.offset().left;
+        var perc = x / sliderWidth;
+        if (perc < 0) {
+            perc = 0;
+        } else if (perc > 1) {
+            perc = 1;
+        }
+        currentFrame = Math.round(perc * totalFrames);
+        updateControls();
+    }
+    
+    function sliderMove(ev) {
+        updateSliderValue(ev.pageX);
+    }
+        
+    function sliderUp(ev) {
+        $window.off('mousemove', sliderMove);
+        $window.off('mouseup', sliderUp);
+    }
+        
+    function sliderDown(ev) {
+        $window.on('mouseup', sliderUp);
+        $window.on('mousemove', sliderMove);
+        updateSliderValue(ev.pageX);
+    }
+    
+    function addSliderListeners() {
+        
+        slider = controls.find('.slider');
+        thumb = controls.find('.thumb');
+        slider.on('mousedown', sliderDown);
+    }
+    
+    function saveSnapshot() {
+        var svgData = animContainer[0].innerHTML;
+        var result = window.cep.fs.showSaveDialogEx('Select location', '', ['*.svg'], 'snapshot.svg');
+        var targetFilePath = result.data;
+        var writeResult = window.cep.fs.writeFile(targetFilePath, svgData);
+        if (0 !== writeResult.err) {
+            console.log('faillled');
+        }
     }
     
     function init(csIntfc) {
@@ -49,15 +163,27 @@
         view.find('.buttons .current').on('click', displayCurrentRenders);
         view.find('.buttons .browse').on('click', browseFiles);
         view.find('.return').on('click', showSelection);
-        animContainer = view.find('.animContainer')[0];
+        animContainer = view.find('.animContainer');
+        controls = view.find('.controls');
+        controls.find('.snapshotButton').on('click', saveSnapshot);
+        current = controls.find('.frames .current');
+        current.on('input', frameChangeHandler);
+        header = view.find('.header');
+        rendersSelection = view.find('.rendersSelection');
+        listContainer = rendersSelection.find('.listContainer');
+        rendersSelection.hide();
+        $window = $(window);
         csInterface.addEventListener('bm:file:path', handleFilePath);
         $(window).on('resize', handleWindowResize);
+        addSliderListeners();
+        hideControls();
     }
     
     function show() {
         if (!showing) {
             showing = true;
             view.show();
+            handleWindowResize();
         }
     }
     
@@ -65,6 +191,8 @@
         if (showing) {
             showing = false;
             view.hide();
+            slider.off('mouseup', sliderUp);
+            slider.off('mousemove', sliderMove);
         }
     }
     
diff --git a/extension/jsx/renderManager.jsx b/extension/jsx/renderManager.jsx
index ba0813d..67ef0ef 100644
--- a/extension/jsx/renderManager.jsx
+++ b/extension/jsx/renderManager.jsx
@@ -3,7 +3,7 @@
 var bm_renderManager = (function () {
     'use strict';
     
-    var ob = {}, pendingLayers = [], pendingComps = [], destinationPath, currentCompID, totalLayers, currentLayer;
+    var ob = {}, pendingLayers = [], pendingComps = [], destinationPath, currentCompID, currentComp, totalLayers, currentLayer;
     
     function verifyTrackLayer(layerData, comp, pos) {
         var nextLayerInfo = comp.layers[pos + 2];
@@ -107,7 +107,7 @@
         } catch (err) {
             bm_eventDispatcher.sendEvent('bm:alert', {message: 'Could not write file.<br /> Make sure you have enabled scripts to write files. <br /> Edit > Preferences > General > Allow Scripts to Write Files and Access Network '});
         }
-        bm_eventDispatcher.sendEvent('bm:render:update', {type: 'update', message: 'Render finished ', compId: currentCompID, progress: 1, isFinished: true});
+        bm_eventDispatcher.sendEvent('bm:render:update', {type: 'update', message: 'Render finished ', compId: currentCompID, progress: 1, isFinished: true, data: '__PFX__' + string});
         bm_compsManager.renderComplete();
     }