diff --git a/static/scripts/toolshed/groups/group-detail-view.js b/static/scripts/toolshed/groups/group-detail-view.js
new file mode 100644
index 00000000000..d505399c833
--- /dev/null
+++ b/static/scripts/toolshed/groups/group-detail-view.js
@@ -0,0 +1,95 @@
+define("toolshed/groups/group-detail-view", ["exports", "libs/toastr", "toolshed/groups/group-model"], function(exports, _toastr, _groupModel) {
+    "use strict";
+
+    Object.defineProperty(exports, "__esModule", {
+        value: true
+    });
+
+    var mod_toastr = _interopRequireWildcard(_toastr);
+
+    var _groupModel2 = _interopRequireDefault(_groupModel);
+
+    function _interopRequireDefault(obj) {
+        return obj && obj.__esModule ? obj : {
+            default: obj
+        };
+    }
+
+    function _interopRequireWildcard(obj) {
+        if (obj && obj.__esModule) {
+            return obj;
+        } else {
+            var newObj = {};
+
+            if (obj != null) {
+                for (var key in obj) {
+                    if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
+                }
+            }
+
+            newObj.default = obj;
+            return newObj;
+        }
+    }
+
+    // toolshed group detail view
+    var GroupDetailView = Backbone.View.extend({
+        el: "#groups_element",
+        options: {},
+        app: null,
+
+        initialize: function initialize(options) {
+            this.options = _.extend(this.options, options);
+            this.app = window.globalTS.groups;
+
+            if (this.app.collection !== null) {
+                this.model = this.app.collection.get(this.options.group_id);
+                this.render();
+            } else {
+                this.fetchGroup();
+            }
+        },
+
+        fetchGroup: function fetchGroup(options) {
+            var that = this;
+            this.options = _.extend(this.options, options);
+            this.model = new _groupModel2.default.Group({
+                id: this.options.group_id
+            });
+            this.model.fetch({
+                success: function success(model) {
+                    console.log("received data: ");
+                    console.log(model);
+                    that.render();
+                },
+                error: function error(model, response) {
+                    if (typeof response.responseJSON !== "undefined") {
+                        mod_toastr.error(response.responseJSON.err_msg);
+                    } else {
+                        mod_toastr.error("An error occurred.");
+                    }
+                }
+            });
+        },
+
+        render: function render() {
+            var template = this.templateRow();
+            this.$el.html(template({
+                group: this.model
+            }));
+            $("#center [data-toggle]").tooltip();
+            $("#center").css("overflow", "auto");
+        },
+
+        templateRow: function templateRow() {
+            return _.template(["<div>", '<h3><%= _.escape(group.get("name")) %></h3>', '<p class="" style="color:gray;">', 'A group of <%= group.get("members").length %> members with <%= group.get("repositories").length %> repositories and a total of <%= group.get("total_downloads") %> combined repository clones.</p>', "<h3>Members</h3>", '<table class="grid table table-condensed">', "<thead>", "<th>Name</th>", "<th>Repositories</th>", "<th>Registered</th>", "</thead>", "<tbody>", '<% _.each(group.get("members"), function(member) { %>', "<tr>", "<td>", "<%= _.escape(member.username) %>", "</td>", "<td>", '<a data-toggle="tooltip" data-placement="top" title="Repositories of <%= _.escape(member.username) %>" href="/repository/browse_repositories_by_user?user_id=<%= member.id %>&use_panels=true" id="<%= member.id %>"><%= member.user_repos_count %></a>', "</td>", "<td>", "<%= member.time_created %>", "</td>", "</tr>", "<% }); %>", "</tbody>", "</table>", "<h3>Repositories</h3>", '<table class="grid table table-condensed">', "<thead>", "<th>Name</th>", "<th>Description</th>", "<th>Clones</th>", "<th>Owner</th>", "<th>Categories</th>", "<th>Created</th>", "<th>Updated</th>", "<th>Rating</th>", "<th>Verified</th>", "</thead>", "<tbody>", '<% _.each(group.get("repositories"), function(repo) { %>', "<tr>", "<td>", '<a data-toggle="tooltip" data-placement="top" title="Details of <%= _.escape(repo.name) %>" href="/view/<%= _.escape(repo.owner) %>/<%= _escape(repo.name) %>" id="<%= repo.id %>"><%= _.escape(repo.name) %></a>', "</td>", "<td>", "<%= _.escape(repo.description) %>", "</td>", "<td>", "<%= repo.times_downloaded %>", "</td>", "<td>", "<%= _.escape(repo.owner) %>", "</td>", "<td>", "<% _.each((repo.categories), function(cat) { %>", '<a data-toggle="tooltip" data-placement="top" title="Repositories in <%= cat.name %>" href="/repository/browse_repositories_in_category?id=<%= cat.id %>&use_panels=true"><%= cat.name %></a><br/>',
+                // '<%= repo.categories %>',
+                "<% }); %>", "</td>", '<td data-toggle="tooltip" data-placement="top" title="<%= repo.time_created_full %>">', "<%= repo.time_created %>", "</td>", '<td data-toggle="tooltip" data-placement="top" title="<%= repo.time_updated_full %>">', "<%= repo.time_updated %>", "</td>", "<td>", "<%= repo.ratings_mean %>", "</td>", "<td>", "<%= repo.approved %>", "</td>", "</tr>", "<% }); %>", "</tbody>", "</table>", "</div>"
+            ].join(""));
+        }
+    });
+    exports.default = {
+        GroupDetailView: GroupDetailView
+    };
+});
+//# sourceMappingURL=../../../maps/toolshed/groups/group-detail-view.js.map
diff --git a/static/scripts/toolshed/groups/group-list-view.js b/static/scripts/toolshed/groups/group-list-view.js
new file mode 100644
index 00000000000..944801817df
--- /dev/null
+++ b/static/scripts/toolshed/groups/group-list-view.js
@@ -0,0 +1,167 @@
+define("toolshed/groups/group-list-view", ["exports", "libs/toastr", "toolshed/groups/group-model", "toolshed/groups/group-listrow-view"], function(exports, _toastr, _groupModel, _groupListrowView) {
+    "use strict";
+
+    Object.defineProperty(exports, "__esModule", {
+        value: true
+    });
+
+    var mod_toastr = _interopRequireWildcard(_toastr);
+
+    var _groupModel2 = _interopRequireDefault(_groupModel);
+
+    var _groupListrowView2 = _interopRequireDefault(_groupListrowView);
+
+    function _interopRequireDefault(obj) {
+        return obj && obj.__esModule ? obj : {
+            default: obj
+        };
+    }
+
+    function _interopRequireWildcard(obj) {
+        if (obj && obj.__esModule) {
+            return obj;
+        } else {
+            var newObj = {};
+
+            if (obj != null) {
+                for (var key in obj) {
+                    if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
+                }
+            }
+
+            newObj.default = obj;
+            return newObj;
+        }
+    }
+
+    var GroupListView = Backbone.View.extend({
+        el: "#groups_element",
+        defaults: {},
+
+        /**
+         * Initialize and fetch the groups from server.
+         * Async render afterwards.
+         * @param  {object} options an object with options
+         */
+        initialize: function initialize(options) {
+            this.options = _.defaults(this.options || {}, this.defaults, options);
+            var that = this;
+            window.globalTS.groups.collection = new _groupModel2.default.Groups();
+            window.globalTS.groups.collection.fetch({
+                success: function success(model) {
+                    console.log("received data: ");
+                    console.log(model);
+                    that.render();
+                },
+                error: function error(model, response) {
+                    if (typeof response.responseJSON !== "undefined") {
+                        mod_toastr.error(response.responseJSON.err_msg);
+                    } else {
+                        mod_toastr.error("An error occurred.");
+                    }
+                }
+            });
+        },
+
+        fetch: function fetch() {},
+
+        /**
+         * Render the groups table from the object's own collection.
+         */
+        render: function render(options) {
+            this.options = _.extend(this.options, options);
+            $(".tooltip").hide();
+            var template = this.templateGroupsList();
+            this.$el.html(template({
+                length: window.globalTS.groups.collection.models.length
+            }));
+            this.renderRows(window.globalTS.groups.collection.models);
+            $("#center [data-toggle]").tooltip();
+            $("#center").css("overflow", "auto");
+        },
+
+        /**
+         * Render all given models as rows in the groups list
+         * @param  {array} groups_to_render array of group models to render
+         */
+        renderRows: function renderRows(groups_to_render) {
+            for (var i = 0; i < groups_to_render.length; i++) {
+                var group = groups_to_render[i];
+                this.renderOne({
+                    group: group
+                });
+            }
+        },
+
+        /**
+         * Create a view for the given model and add it to the groups view.
+         * @param {Group} model of the view that will be rendered
+         */
+        renderOne: function renderOne(options) {
+            var rowView = new _groupListrowView2.default.GroupListRowView(options);
+            this.$el.find("#group_list_body").append(rowView.el);
+        },
+
+        /**
+         * Table heading was clicked, update sorting preferences and re-render.
+         * @return {[type]} [description]
+         */
+        // sort_clicked : function(){
+        //     if (Galaxy.libraries.preferences.get('sort_order') === 'asc'){
+        //         Galaxy.libraries.preferences.set({'sort_order': 'desc'});
+        //     } else {
+        //         Galaxy.libraries.preferences.set({'sort_order': 'asc'});
+        //     }
+        //     this.render();
+        // },
+
+        /**
+         * Sort the underlying collection according to the parameters received.
+         * Currently supports only sorting by name.
+         */
+        // sortLibraries: function(){
+        //     if (Galaxy.libraries.preferences.get('sort_by') === 'name'){
+        //         if (Galaxy.libraries.preferences.get('sort_order') === 'asc'){
+        //             this.collection.sortByNameAsc();
+        //         } else if (Galaxy.libraries.preferences.get('sort_order') === 'desc'){
+        //             this.collection.sortByNameDesc();
+        //         }
+        //     }
+        // },
+
+        // MMMMMMMMMMMMMMMMMM
+        // === TEMPLATES ====
+        // MMMMMMMMMMMMMMMMMM
+
+        templateGroupsList: function templateGroupsList() {
+            var tmpl_array = [];
+
+            tmpl_array.push('<div id="groups">');
+            tmpl_array.push("</div>");
+            tmpl_array.push('<div class="groups_container table-responsive">');
+            tmpl_array.push("<% if(length === 0) { %>");
+            tmpl_array.push("<div>There are no groups yet.</div>");
+            tmpl_array.push("<% } else{ %>");
+            tmpl_array.push('<table class="grid table table-condensed">');
+            tmpl_array.push("   <thead>");
+            tmpl_array.push("     <th>Name</th>");
+            // tmpl_array.push('     <th style="width:22%;">description</th>');
+            tmpl_array.push("     <th>Members</th> ");
+            tmpl_array.push("     <th>Repositories</th>");
+            tmpl_array.push("   </thead>");
+            tmpl_array.push('   <tbody id="group_list_body">');
+            // group item views will attach here
+            tmpl_array.push("   </tbody>");
+            tmpl_array.push("</table>");
+            tmpl_array.push("<% }%>");
+            tmpl_array.push("</div>");
+
+            return _.template(tmpl_array.join(""));
+        }
+    });
+
+    exports.default = {
+        GroupListView: GroupListView
+    };
+});
+//# sourceMappingURL=../../../maps/toolshed/groups/group-list-view.js.map
diff --git a/static/scripts/toolshed/groups/group-listrow-view.js b/static/scripts/toolshed/groups/group-listrow-view.js
new file mode 100644
index 00000000000..b686a6e7592
--- /dev/null
+++ b/static/scripts/toolshed/groups/group-listrow-view.js
@@ -0,0 +1,36 @@
+define('toolshed/groups/group-listrow-view', ['exports'], function(exports) {
+    'use strict';
+
+    Object.defineProperty(exports, "__esModule", {
+        value: true
+    });
+    // toolshed group row view
+    var GroupListRowView = Backbone.View.extend({
+        events: {},
+
+        initialize: function initialize(options) {
+            this.render(options.group);
+        },
+
+        render: function render(group) {
+            var tmpl = this.templateRow();
+            this.setElement(tmpl({
+                group: group
+            }));
+            this.$el.show();
+            return this;
+        },
+
+        templateRow: function templateRow() {
+            return _.template(['<tr class="" data-id="<%- group.get("id") %>">', '<td><a href="groups#/<%= group.get("id") %>"><%= _.escape(group.get("name")) %></a></td>',
+                // '<td>description</td>',
+                '<td><%= group.get("total_members") %></td>', '<td><%= group.get("total_repos") %></td>', "</tr>"
+            ].join(""));
+        }
+    });
+
+    exports.default = {
+        GroupListRowView: GroupListRowView
+    };
+});
+//# sourceMappingURL=../../../maps/toolshed/groups/group-listrow-view.js.map
diff --git a/static/scripts/toolshed/groups/group-model.js b/static/scripts/toolshed/groups/group-model.js
new file mode 100644
index 00000000000..7fad1fe0c5f
--- /dev/null
+++ b/static/scripts/toolshed/groups/group-model.js
@@ -0,0 +1,25 @@
+define("toolshed/groups/group-model", ["exports"], function(exports) {
+    "use strict";
+
+    Object.defineProperty(exports, "__esModule", {
+        value: true
+    });
+    // ============================================================================
+    // TS GROUP RELATED MODELS
+
+    var Group = Backbone.Model.extend({
+        urlRoot: Galaxy.root + "api/groups"
+    });
+
+    var Groups = Backbone.Collection.extend({
+        url: Galaxy.root + "api/groups",
+
+        model: Group
+    });
+
+    exports.default = {
+        Group: Group,
+        Groups: Groups
+    };
+});
+//# sourceMappingURL=../../../maps/toolshed/groups/group-model.js.map
diff --git a/static/scripts/toolshed/toolshed.groups.js b/static/scripts/toolshed/toolshed.groups.js
new file mode 100644
index 00000000000..a2b1e7b47e3
--- /dev/null
+++ b/static/scripts/toolshed/toolshed.groups.js
@@ -0,0 +1,60 @@
+define("toolshed/toolshed.groups", ["exports", "toolshed/groups/group-list-view", "toolshed/groups/group-detail-view"], function(exports, _groupListView, _groupDetailView) {
+    "use strict";
+
+    Object.defineProperty(exports, "__esModule", {
+        value: true
+    });
+
+    var _groupListView2 = _interopRequireDefault(_groupListView);
+
+    var _groupDetailView2 = _interopRequireDefault(_groupDetailView);
+
+    function _interopRequireDefault(obj) {
+        return obj && obj.__esModule ? obj : {
+            default: obj
+        };
+    }
+
+    // ============================================================================
+    // ROUTER
+    // MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
+    // === MAIN TOOLSHED GROUP MODULE ====
+    // MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
+
+    var ToolshedRouter = Backbone.Router.extend({
+        routes: {
+            "": "groups",
+            ":group_id": "group_page"
+        }
+    });
+
+    var ToolshedGroups = Backbone.View.extend({
+        groupListView: null,
+        groupDetailView: null,
+        collection: null,
+
+        initialize: function initialize() {
+            window.globalTS.groups = this;
+
+            this.ts_router = new ToolshedRouter();
+            this.ts_router.on("route:groups", function() {
+                window.globalTS.groups.groupListView = new _groupListView2.default.GroupListView();
+            });
+
+            this.ts_router.on("route:group_page", function(group_id) {
+                window.globalTS.groups.groupDetailView = new _groupDetailView2.default.GroupDetailView({
+                    group_id: group_id
+                });
+            });
+
+            Backbone.history.start({
+                pushState: false
+            });
+        }
+    });
+
+    exports.default = {
+        ToolshedGroups: ToolshedGroups
+    };
+});
+//# sourceMappingURL=../../maps/toolshed/toolshed.groups.js.map