Index: fluid-engage-core/components/catalogue/html/view.html
===================================================================
--- fluid-engage-core/components/catalogue/html/view.html	(revision 9111)
+++ fluid-engage-core/components/catalogue/html/view.html	(working copy)
@@ -35,14 +35,13 @@
         <div class="flc-catalogue-container fl-catalogue">
             <div class="fl-navbar fl-table">
 			    <div class="fl-table-row">
-			        <h1 class="flc-exhibition-title fl-table-cell">Exhibitions</h1>
-			    </div>
-			    <div class="fl-table-row">
-			        <h3 class="fl-table-cell">Catalogue</h3>
+			        <h1 class="flc-catalogue-title fl-table-cell">Exhibitions</h1>
 			    </div>
 			</div>
+            <a href="#" class="flc-catalogue-linkToAll">View All</a>
 			<div class="flc-catalogueList">
-				<ol class="flc-nagivationList-listGroup fl-list-menu fl-list-thumbnails fl-thumbnails-expanded">
+			    <h2 class="flc-catalogue-theme">Theme</h2>
+				<ul class="catalogueThemeList flc-nagivationList-listGroup fl-list-menu fl-list-thumbnails fl-thumbnails-expanded">
 				    <li class="flc-navigationList-items">
 				        <a class="flc-navigationList-link" href="">
 				            <img src="../images/a.jpg" alt="Section Image" class="flc-navigationList-image fl-icon" />
@@ -50,7 +49,8 @@
 				            <span class="flc-navigationList-descriptionText fl-link-summary">Introduction</span>
 				        </a>
 				    </li>
-				</ol>
+				</ul>
+                <a href="#" class="flc-catalogue-linkToAllInTheme">All in Theme</a>
 			</div>
         </div>
         <script type="text/javascript">
Index: fluid-engage-core/components/catalogue/js/Catalogue.js
===================================================================
--- fluid-engage-core/components/catalogue/js/Catalogue.js	(revision 9111)
+++ fluid-engage-core/components/catalogue/js/Catalogue.js	(working copy)
@@ -16,30 +16,39 @@
 
 (function ($) {
     
-    var buildCutpoints = function (selectors) {
-        return [
-            {id: "exhibitionTitle", selector: selectors.exhibitionTitle}
-        ];
-    };
-    
-    var buildComponentTree = function (that) {
-        return {
-            children: [{
-                ID: "exhibitionTitle",
-                value: that.model.strings.title
-            }]
-        };
-    };
-    
     var renderCatalogue = function (that) {
-        fluid.selfRender(that.container, 
-            buildComponentTree(that), 
-            {cutpoints: buildCutpoints(that.options.selectors), model: that.model, debug: true});
-    };
-    
-    var initSubcomponents = function (that) {
-        that.catalogueList = fluid.initSubcomponent(that, "navigationList", [that.locate("catalogueList"),
-            {links: that.model.lists[0].listOptions.links}]);
+        var utils = fluid.engage.renderUtils;
+        
+        var tree = {children: [
+            utils.uiBound("exhibitionTitle", that.model.title),
+            {
+                ID: "viewAll",
+                target: that.model.artifactsURL,
+                linkText: {
+                    messageKey: "viewAll",
+                    args: that.model.numberOFArtifacts
+                }
+            }
+        ]};
+        
+        tree.children.concat(fluid.transform(that.model.themeData, function (theme) {
+            return utils.uiContainer("catalogueList:", [
+                utils.uiBound("catalogueTheme", theme.title),
+                {ID: "catalogueThemeList",
+                    decorators: [
+                        {
+                            type: "fluid",
+                            func: "fluid.navigationList",
+                            options: {links: theme.artifacts} 
+                        }
+                    ]
+                },
+                {ID: "viewAllInTheme", target: theme.artifactsURL, linkText: {messageKey: "viewAllInTheme", args: theme.numberOFArtifacts}}
+            ]);
+        }));
+        
+        var render = utils.createRendererFunction(that.container, that.options.selectors, {repeatingSelectors: ["catalogueList"], rendererOptions: {messageSource: {type: data, messages: that.options.messageBundle}}});
+        render(tree);
     };
     
     var setup = function (that) {
@@ -44,7 +53,6 @@
     
     var setup = function (that) {
         renderCatalogue(that);
-        initSubcomponents(that);
     };
     
     fluid.catalogue = function (container, options) {
@@ -56,12 +64,42 @@
     
     fluid.defaults("fluid.catalogue", {
         selectors: {
-            exhibitionTitle: ".flc-exhibition-title",
-            viewAll: ".flc-catalogue-viewAll",
-            catalogueList: ".flc-catalogueList"
+            exhibitionTitle: ".flc-catalogue-title",
+            viewAll: ".flc-catalogue-linkToAll",
+            catalogueList: ".flc-catalogueList",
+            catalogueTheme: ".flc-catalogueTheme",
+            catalogueThemeList: ".flc-catalogueThemeList",
+            viewAllInTheme: ".flc-catalogue-linkToAllInTheme"
         },
+        
         navigationList: {
             type: "fluid.navigationList"
+        },
+        
+        messageBundle: {
+            viewAll: "View all objects ({0})",
+            viewAllInTheme: "View all in {0} ({1})"
+        },
+        
+        model: {
+            title: "",
+            artifactsURL: "",
+            numberOfArtifacts: "",
+            themeData: [
+                {
+                    title: "",
+                    artifactsURL: "",
+                    numberOfArtifacts: "",
+                    artifacts: [
+                        {
+                            target: "",
+                            image: "",
+                            title: "",
+                            description: null
+                        }
+                    ]
+                }
+            ]
         }
     });
 }(jQuery));
\ No newline at end of file
