diff --git a/README.md b/README.md
index b492c6a..476866a 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,17 @@
 
-# [Flow](https://github.com/sharinpix/demo-apex/tree/flow)
+# Making image mashup/collage of all images in album
 
-[<img src="https://raw.githubusercontent.com/afawcett/githubsfdeploy/master/deploy.png">](https://githubsfdeploy.herokuapp.com?owner=sharinpix&repo=demo-apex&ref=flow)
+Below is an example of a resulting collage.
 
-# Work Order token
+<img src="https://raw.githubusercontent.com/Akhilesh05/img/master/collage.jpg">
 
-[<img src="https://raw.githubusercontent.com/afawcett/githubsfdeploy/master/deploy.png">](https://githubsfdeploy.herokuapp.com?owner=sharinpix&repo=demo-apex&ref=work_order_token)
+For this demo, you need to open the Visualforce page named `SharinPixCollageDemo`.
+Once on this page, you will have the following values to fill.
+* columns - The amount of columns you want your collage to have.
+* rows - The amount of rows you want your collage to have.
+* width - The width of individual images in the collage.
+* height - The height of individual images in the collage.
+* crop type - The crop type, [as explained here](https://github.com/SharinPix/demo-apex/tree/image_crop_resize).
+* background - The background color.
+
+[<img src="https://raw.githubusercontent.com/afawcett/githubsfdeploy/master/deploy.png">](https://githubsfdeploy.herokuapp.com?owner=sharinpix&repo=demo-apex&ref=image_collage_mashup)
\ No newline at end of file
diff --git a/src/classes/SharinPixCollageDemo.cls b/src/classes/SharinPixCollageDemo.cls
new file mode 100644
index 0000000..d8e4827
--- /dev/null
+++ b/src/classes/SharinPixCollageDemo.cls
@@ -0,0 +1,90 @@
+public with sharing class SharinPixCollageDemo {
+    public String parameters {get; private set;}
+    public String albumId {get; private set;}
+
+    public SharinPixCollageDemo() {
+        albumId = 'SharinPixCollageDemo';
+        parameters = JSON.serialize(new Map<String, Object> {
+            'abilities' => new Map<String, Object> {
+                albumId => new Map<String, Object> {
+                    'Access' => new Map<String, Object> {
+                        'see' => true,
+                        'image_list' => true,
+                        'image_upload' => true
+                    }
+                }
+            },
+            'Id' => albumId
+        });
+    }
+
+    /**
+     * This method generates a collage from all the images of an album.
+     * 
+     * @param albumId The album ID of the album that will be used to generate the collage
+     * @param columns The number of columns that a collage will contain
+     * @param rows The number of rows that a collage will contain
+     * @param width The width of each image in the collage
+     * @param height The height of each image in the collage
+     * @param cropType The crop type that will be used for this collage
+     * @param background The background color that will be used for the collage
+     * @return Returns the list of collage URLs generated
+     */
+    @RemoteAction
+    public static List<String> generateCollage(String albumId, Integer columns, Integer rows, Integer width, Integer height, String cropType, String background) {
+        SharinPix.Utils sharinPixUtils = new SharinPix.Utils();
+        List<Object> images = sharinPixUtils.getAlbumImages(albumId);
+        List<String> imagePublicIds = new List<String>();
+        for (Object imageObj: images) {
+            Map<String, Object> image = (Map<String, Object>) imageObj;
+            imagePublicIds.add((String) image.get('public_id'));
+        }
+        List<Map<String, Object>> imageParams = new List<Map<String, Object>>();
+        for (Integer i = 0; i < imagePublicIds.size(); i++) {
+            String currentId = imagePublicIds.get(i);
+            Integer pic = (i / columns) / rows;
+            Integer row = Math.mod((i / columns), rows);
+            Integer column = Math.mod(i, columns);
+            if (row == 0 && column == 0) {
+                imageParams.add(new Map<String, Object> {
+                    'id' => currentId,
+                    'transformation' => new List<Map<String, Object>> {
+                        new Map<String, Object> {
+                            'width' => width,
+                            'height' => height,
+                            'crop' => cropType,
+                            'background' => background
+                        }
+                    }
+                });
+            } else {
+                List<Map<String, Object>> transformation = (List<Map<String, Object>>) imageParams.get(pic).get('transformation');
+                transformation.add(new Map<String, Object> {
+                    'overlay' => currentId,
+                    'width' => width,
+                    'height' => height,
+                    'crop' => cropType,
+                    'x' => column * width,
+                    'y' => row * height,
+                    'background' => background,
+                    'gravity' => 'north_west'
+                });
+            }
+        }
+        List<String> imageUrls = new List<String>();
+        for (Map<String, Object> imageParam: imageParams) {
+            Map<String, Object> sharinpix = new Map<String, Object> {
+                'download' => false,
+                'auto' => false,
+                'full_size' => false
+            };
+            imageUrls.add((String) sharinPixUtils.getImageExternalUrl(new Map<String, Object> {
+                'image_id' => (String) imageParam.get('id'),
+                'sharinpix' => sharinpix,
+                'transformations' => (List<Object>) imageParam.get('transformation')
+            }).get('resource_url'));
+        }
+        return imageUrls;
+    }
+
+}
\ No newline at end of file
diff --git a/src/classes/SharinPixCollageDemo.cls-meta.xml b/src/classes/SharinPixCollageDemo.cls-meta.xml
new file mode 100644
index 0000000..94f6f06
--- /dev/null
+++ b/src/classes/SharinPixCollageDemo.cls-meta.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ApexClass xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>40.0</apiVersion>
+    <status>Active</status>
+</ApexClass>
diff --git a/src/package.xml b/src/package.xml
index a9c5799..4ae68bd 100644
--- a/src/package.xml
+++ b/src/package.xml
@@ -1,4 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Package xmlns="http://soap.sforce.com/2006/04/metadata">
-    <version>36.0</version>
+	<types>
+		<members>SharinPixCollageDemo</members>
+		<name>ApexPage</name>
+	</types>
+	<types>
+		<members>SharinPixCollageDemo</members>
+		<name>ApexClass</name>
+	</types>
+	<version>40.0</version>
 </Package>
diff --git a/src/pages/SharinPixCollageDemo.page b/src/pages/SharinPixCollageDemo.page
new file mode 100644
index 0000000..c72fbcf
--- /dev/null
+++ b/src/pages/SharinPixCollageDemo.page
@@ -0,0 +1,117 @@
+<apex:page controller="SharinPixCollageDemo">
+    <apex:slds />
+    <style>
+        #image_start {
+            padding: 5px 20px;
+            visibility: hidden;
+        }
+        .padded {
+            padding: 10px 20px !important;
+        }
+        .image-padded {
+            display: inline-block;
+            padding-bottom: 20px;
+            padding-right: 20px;
+        }
+        #collage-h1 {
+            display: none;
+        }
+        .h1 {
+            display: block;
+            font-size: 2em !important;
+        }
+    </style>
+    <script>
+        var buttonClicked = function() {
+            window.location.hash = '';
+            var columns = document.getElementById('columns').value;
+            var rows = document.getElementById('rows').value;
+            var width = document.getElementById('width').value;
+            var height = document.getElementById('height').value;
+            var crop = document.getElementById('crop').value;
+            var background = document.getElementById('background').value;
+            Visualforce.remoting.Manager.invokeAction(
+                '{! $RemoteAction.SharinPixCollageDemo.generateCollage }',
+                '{! albumId }', columns, rows, width, height, crop, background,
+                function(res, event) {
+                    if (event.status) {
+                        document.getElementById('collage-h1').style.display = 'block';
+                        document.getElementById('generated_images').innerHTML = '';
+                        for (var i = 0; i < res.length; i++) {
+                            document.getElementById('generated_images').innerHTML += '<div class="image-padded"><img id="img' + i + '" src="' + res[i] + '" alt="collage" /></div>';
+                            document.getElementById('img'+i).addEventListener('load', function() {
+                                window.location.hash = 'image_start';
+                                document.getElementById('image_start').style.visibility = 'visible'
+                            });
+                        }
+                    }
+                }
+            );
+        }
+    </script>
+    <div class="padded">
+        <apex:canvasApp developerName="Albums" height="500px" width="100%" parameters="{! parameters }" />
+    </div>
+    <div class="padded">
+        <div class="slds-grid slds-wrap slds-grid_pull-padded">
+            <div class="slds-p-horizontal_small slds-medium-size_1-of-2 slds-small-size_1-of-1">
+                <div class="slds-form slds-form_horizontal">
+                    <div class="slds-form-element">
+                        <label class="slds-form-element__label" for="columns">Columns in one collage</label>
+                        <div class="slds-form-element__control">
+                            <input type="number" id="columns" class="slds-input" />
+                        </div>
+                    </div>
+                    <div class="slds-form-element">
+                        <label class="slds-form-element__label" for="rows">Rows in one collage</label>
+                        <div class="slds-form-element__control">
+                            <input type="number" id="rows" class="slds-input" />
+                        </div>
+                    </div>
+                    <div class="slds-form-element">
+                        <label class="slds-form-element__label" for="width">Width of each image</label>
+                        <div class="slds-form-element__control">
+                            <input type="number" id="width" class="slds-input" />
+                        </div>
+                    </div>
+                    <div class="slds-form-element">
+                        <label class="slds-form-element__label" for="height">Height of each image</label>
+                        <div class="slds-form-element__control">
+                            <input type="number" id="height" class="slds-input" />
+                        </div>
+                    </div>
+                    <div class="slds-form-element">
+                        <label class="slds-form-element__label" for="crop">Crop type</label>
+                        <div class="slds-form-element__control">
+                            <div class="slds-select_container">
+                                <select class="slds-select" id="crop">
+                                    <option>fill</option>
+                                    <option>scale</option>
+                                    <option>pad</option>
+                                    <option>fit</option>
+                                    <option>crop</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="slds-form-element">
+                        <label class="slds-form-element__label" for="background">Background color</label>
+                        <div class="slds-form-element__control">
+                            <input type="color" id="background" class="slds-input" value="#ffffff" />
+                        </div>
+                    </div>
+                    <div class="slds-form-element">
+                        <button id="generate_button" onclick="buttonClicked()" class="slds-button slds-button_brand">Generate Collage</button>
+                    </div>
+                </div>
+            </div>
+            <div class="slds-p-horizontal_small slds-medium-size_2-of-2 slds-small-size_1-of-1"></div>
+        </div>
+    </div>
+    <div id="image_start">
+        <a href="#">Back to top</a>
+    </div>
+    <h1 id="collage-h1" class="padded h1">Collage generated</h1>
+    <div id="generated_images" class="padded">
+    </div>
+</apex:page>
\ No newline at end of file
diff --git a/src/pages/SharinPixCollageDemo.page-meta.xml b/src/pages/SharinPixCollageDemo.page-meta.xml
new file mode 100644
index 0000000..67e10e0
--- /dev/null
+++ b/src/pages/SharinPixCollageDemo.page-meta.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ApexPage xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>40.0</apiVersion>
+    <availableInTouch>false</availableInTouch>
+    <confirmationTokenRequired>false</confirmationTokenRequired>
+    <label>SharinPixCollageDemo</label>
+</ApexPage>