diff --git a/less/__vms-list.less b/less/__vms-list.less
index 16e6bbcb..956b4df4 100644
--- a/less/__vms-list.less
+++ b/less/__vms-list.less
@@ -42,7 +42,8 @@
 }
 
 .__vms-list {
-  .vms-list-header {
+  .vms-list-header,
+  .list-header {
     .make-row(0);
     background: @state-info-bg;
     .select {
@@ -139,7 +140,7 @@
     text-transform: uppercase;
     &.stopped { background-color: @gray-light; color: #fff; }
     &.failed { background-color: @brand-danger; color: #fff; }
-    &.running { background-color: @brand-success; color: #fff; }
-    &.destroyed { background-color: @gray-dark; color: #fff; }
+    &.running, &.ready { background-color: @brand-success; color: #fff; }
+    &.destroyed, &.unknown { background-color: @gray-dark; color: #fff; }
   }
 }
diff --git a/less/app.less b/less/app.less
index 117bbe94..03395b88 100644
--- a/less/app.less
+++ b/less/app.less
@@ -39,6 +39,7 @@
 
 @import "vm.less";
 @import "vms.less";
+@import "volumes.less";
 
 @import "image.less";
 @import "settings.less";
diff --git a/less/vm.less b/less/vm.less
index 66a12fb8..fe86f879 100644
--- a/less/vm.less
+++ b/less/vm.less
@@ -49,7 +49,7 @@ section.fwrules {
   .dropdown-menu .delete { color: red; }
 
   .resource-status {
-    .running { background: @brand-success; }
+    .running, .ready { background: @brand-success; }
     .failed { background: @brand-danger; }
     .stopped { background: @gray-light; }
   }
@@ -123,7 +123,8 @@ section.fwrules {
     .server-uuid,
     .owner-uuid,
     .billing-id,
-    .image-uuid {
+    .image-uuid,
+    .volume-uuid {
       .uuid;
       .pull-right;
     }
diff --git a/less/volumes.less b/less/volumes.less
new file mode 100644
index 00000000..eb5598de
--- /dev/null
+++ b/less/volumes.less
@@ -0,0 +1,27 @@
+
+@import "vm";
+@import "networks";
+@import "__vms-list";
+
+.volumes-list {
+  .__vms-list;
+  td.status {width: 90px;}
+  a.delete {color: @state-danger-text; text-decoration: none; font-weight: bold; visibility: hidden; float: right;}
+  tr:hover .actions a, .actions:hover a {visibility: visible;}
+}
+
+#page-volume {
+  #page-vm;
+}
+.networks-list {
+  #page-networks > .networks-list;
+}
+
+#page-volume-form {
+  .help-block {
+    margin-bottom: 0;
+  }
+  .control-label.required {
+    font-weight: 600;
+  }
+}
diff --git a/lib/adminui.js b/lib/adminui.js
index 1492d673..6bfaf560 100644
--- a/lib/adminui.js
+++ b/lib/adminui.js
@@ -38,6 +38,13 @@ function resume(req, res, next) {
     next();
 }
 
+function checkVolApiConfig(req, res, next) {
+    if (req.sdc[req.dc].hasOwnProperty('volapi')) {
+        return next();
+    }
+    next(new restify.ServiceUnavailableError('Cannot connect to VOLAPI service. Please verify configuration.'));
+}
+
 function setUfds(req, res, next) {
     var trySetUfds = function () {
         if (req.ufdsMaster.connected) {
@@ -176,8 +183,6 @@ ADMINUI.prototype.createServer = function () {
         });
     });
 
-
-
     server.use(sdcClients.handler);
 
     server.use((function attachOtherClients(req, res, next) {
@@ -283,6 +288,32 @@ ADMINUI.prototype.createServer = function () {
         auth.requireRole('operators'),
         vms.del);
 
+    var volumes = require('./volumes');
+    server.get('/api/volumes',
+        auth.requireAuth,
+        auth.requireRole('operators'),
+        checkVolApiConfig,
+        volumes.list);
+
+    server.get('/api/volumes/:uuid',
+        auth.requireAuth,
+        auth.requireRole('operators'),
+        checkVolApiConfig,
+        volumes.get);
+
+    server.post('/api/volumes',
+        auth.requireAuth,
+        auth.requireRole('operators'),
+        checkVolApiConfig,
+        resume,
+        bodyParser,
+        volumes.create);
+
+    server.del('/api/volumes/:uuid',
+        auth.requireAuth,
+        auth.requireRole('operators'),
+        checkVolApiConfig,
+        volumes.del);
 
     var jobs = require('./jobs');
     server.get('/api/jobs', auth.requireAuth, jobs.listJobs);
@@ -323,8 +354,6 @@ ADMINUI.prototype.createServer = function () {
         images.aclAction);
 
 
-
-
     var packages = require('./packages');
     server.get('/api/packages', auth.requireAuth, packages.list);
     server.get('/api/packages/:uuid', auth.requireAuth, packages.get);
@@ -909,7 +938,7 @@ ADMINUI.prototype.createServer = function () {
         }
         var method = req.method;
         var body =
-            !(method === 'POST' && route.name === 'authenticate') &&
+            !(method === 'POST' && route && route.name === 'authenticate') &&
             !(method === 'GET' && Math.floor(res.statusCode/100) === 2);
         auditLogger({
             log: req.log.child({ component: 'audit', route: route && route.name }, true),
diff --git a/lib/auth.js b/lib/auth.js
index 762e1cd2..804abba3 100644
--- a/lib/auth.js
+++ b/lib/auth.js
@@ -18,7 +18,8 @@ var LOCKED_TIME = 4 * 60 * 60;
 var userLockTimes = {};
 var userLoginAttempts = {};
 
-var MANTA_ENALBED = require('../etc/config.json')['manta'] || false;
+var config = require('../etc/config.json');
+var MANTA_ENABLED = config.manta || false;
 var Auth = module.exports = {};
 
 Auth.optionalAuth = function optionalAuth(req, res, next) {
@@ -189,10 +190,12 @@ Auth.authenticate = function authenticate(req, res, next) {
                 return next(new restify.ConflictError('User does not have permission to use Operations Portal.'));
             }
 
+            var isVolapiEnabled = !!(config.datacenters[req.dc] && config.datacenters[req.dc].volapi);
             req.sessions.create({
                 roles: user.groups(),
                 user: user.uuid,
-                manta: MANTA_ENALBED
+                manta: MANTA_ENABLED,
+                volapiEnabled: isVolapiEnabled
             }, function (err2, token) {
                 if (err2) {
                     req.log.info(err2, 'error creating session');
@@ -203,7 +206,8 @@ Auth.authenticate = function authenticate(req, res, next) {
                     user: user,
                     token: token,
                     adminUuid: req.adminUuid,
-                    manta: MANTA_ENALBED,
+                    manta: MANTA_ENABLED,
+                    volapiEnabled: isVolapiEnabled,
                     dc: req.dc,
                     roles: user.groups()
                 });
diff --git a/lib/sdc-clients.js b/lib/sdc-clients.js
index a0a893e7..377de3ba 100644
--- a/lib/sdc-clients.js
+++ b/lib/sdc-clients.js
@@ -76,6 +76,10 @@ module.exports.createClients = function (config) {
             clients[dc].imgapi = new IMGAPI(cfg.imgapi);
             clients[dc].papi = new SDC.PAPI(cfg.papi);
 
+            if (cfg.volapi) {
+                clients[dc].volapi = restify.createJsonClient(cfg.volapi);
+            }
+
             cfg.moray.no_count = true;
 
             clients[dc].moray = createMorayClient({
diff --git a/lib/volumes.js b/lib/volumes.js
new file mode 100644
index 00000000..39b82f05
--- /dev/null
+++ b/lib/volumes.js
@@ -0,0 +1,98 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/*
+ * Copyright (c) 2016, Joyent, Inc.
+ */
+
+var sprintf = require('util').format;
+
+var getVolumeParams = function (params) {
+    var query = params.query || [];
+
+    if (params.type && params.type.length) {
+        query.push(sprintf('(type=*%s*)', params.type));
+        delete params.type;
+    }
+
+    if (params.state && params.state.length) {
+        query.push(sprintf('(state=%s)', params.state));
+        delete params.state;
+    }
+
+    if (params.tag && params.tag.length) {
+        query.push(sprintf('(tag=%s)', params.tag));
+        delete params.tag;
+    }
+
+    if (query.length) {
+        params.filter = '(&' + query.join('') + ')';
+    }
+
+    return params;
+};
+
+function list(req, res, next) {
+    var params = getVolumeParams(req.params);
+    var opts = {
+        path: '/volumes',
+        query: params
+    };
+    req.sdc[req.dc].volapi.get(opts, function (err, _req, _res, volumes) {
+        if (err) {
+            req.log.error(err, 'Error retrieving volumes');
+            return next(err);
+        }
+        if (params.uuid && params.uuid.length === 36) {
+            volumes = volumes.filter(function (volume) {
+               return volume.uuid === params.uuid;
+            });
+        }
+        res.send(volumes);
+        return next();
+    });
+}
+
+function get(req, res, next) {
+   req.sdc[req.dc].volapi.get('/volumes/' + req.params.uuid, function (err, _req, _res, volume) {
+        if (err) {
+            req.log.error(err, 'Error retrieving volume');
+            return next(err);
+        }
+        res.send(volume);
+        return next();
+    });
+}
+
+function create(req, res, next) {
+    req.log.info(req.body, 'VOLAPI Create Request');
+    req.sdc[req.dc].volapi.post('/volumes', req.body, function (err, _req, _res, volume) {
+        if (err) {
+            req.log.error(err, 'Error creating volume');
+            return next(err);
+        }
+        res.send(volume);
+        return next();
+    });
+}
+
+function del(req, res, next) {
+    req.sdc[req.dc].volapi.del('/volumes/' + req.params.uuid, function (err, _req, _res, volume) {
+        if (err) {
+            req.log.error(err, 'Error deleting volume');
+            return next(err);
+        }
+        res.send(volume);
+        return next();
+    });
+}
+
+module.exports =  {
+        list: list,
+        get: get,
+        create: create,
+        del: del
+};
diff --git a/www/js/components/error-alert.jsx b/www/js/components/error-alert.jsx
index 6cc37976..f3a8aa55 100644
--- a/www/js/components/error-alert.jsx
+++ b/www/js/components/error-alert.jsx
@@ -5,30 +5,32 @@
  */
 
 /*
- * Copyright (c) 2014, Joyent, Inc.
+ * Copyright (c) 2016, Joyent, Inc.
  */
 
-"use strict";
+'use strict';
 var React = require('react');
 var ErrorAlert =  React.createClass({
-    propTypes: {
-        error: React.PropTypes.object
-    },
-    render: function() {
+    render: function () {
         var error = this.props.error;
-
-        if (!error || !error.code) {
-            return <div className="error-alert alert alert-danger" style={ {display: 'none'} }></div>;
+        if (!error) {
+            return <div className="error-alert alert alert-danger" style={{display: 'none'}}></div>;
         }
 
+        var errorMessage = error.message || (error.errors ? null : error);
+
         return (<div className="error-alert alert alert-danger">
             {
-                error.message ? <div><strong>{error.message}</strong></div>: ''
+                errorMessage ? <div><strong>{errorMessage}</strong></div> : ''
             }
             {
-                error.errors && error.errors.length ? <ul>{error.errors.map(function(err) {
-                    return <li><strong>{err.field}</strong> - {err.message}</li>;
-                }) }</ul> : ''
+                error.errors && error.errors.length ? <ul>
+                    {
+                        error.errors.map(function (err) {
+                            return <li><strong>{err.field}</strong> - {err.message}</li>;
+                        })
+                    }
+                </ul> : ''
             }
         </div>);
     }
diff --git a/www/js/components/filter-form.jsx b/www/js/components/filter-form.jsx
index a5f4ce28..671a6dca 100644
--- a/www/js/components/filter-form.jsx
+++ b/www/js/components/filter-form.jsx
@@ -8,13 +8,27 @@ var utils = require('../lib/utils');
 var NicTags = require('../models/nictags');
 var FabricVlans = require('../models/fabrics-vlans');
 var INPUT_TYPES = {};
+var DEFAULT_WIDTH = {
+    uuid: 4,
+    owner_uuid: 4,
+    alias: 3,
+    name: 3,
+    package_name: 3,
+    state: 3,
+    tag: 3,
+    type: 3,
+    volume_state: 3,
+    ip: 2,
+    nic_tag: 2,
+    vlan_id: 2
+};
 
 INPUT_TYPES.uuid = React.createClass({
     onChange: function (e) {
         this.props.onChange('uuid', e.target.value);
     },
     render: function () {
-        return (<div className="form-group col-md-4">
+        return (<div className={'form-group col-md-' + this.props.width}>
             <label className="control-label">UUID</label>
             <input ref="input" value={this.props.value} onChange={this.onChange} className="form-control" type="text" name="uuid" placeholder="UUID" />
         </div>);
@@ -26,7 +40,7 @@ INPUT_TYPES.alias = React.createClass({
         this.props.onChange('alias', e.target.value);
     },
     render: function () {
-        return (<div className="form-group col-md-3">
+        return (<div className={'form-group col-md-' + this.props.width}>
             <label className="control-label">Alias</label>
             <input ref="input" value={this.props.value} onChange={this.onChange} className="form-control" type="text" name="alias" placeholder="vm alias" />
         </div>);
@@ -42,7 +56,7 @@ INPUT_TYPES.package_name = React.createClass({
         this.typeahead.remove();
     },
     render: function () {
-        return (<div className="form-group col-md-4">
+        return (<div className={'form-group col-md-' + this.props.width}>
             <label className="control-label">Package</label>
                 <TypeaheadPackage className="form-control" onChange={this.onSelect} value={this.props.value} />
         </div>);
@@ -54,20 +68,43 @@ INPUT_TYPES.name = React.createClass({
         this.props.onChange('name', e.target.value);
     },
     render: function () {
-        return (<div className="form-group col-md-3">
+        return (<div className={'form-group col-md-' + this.props.width}>
             <label className="control-label">Name</label>
             <input ref="input" value={this.props.value} onChange={this.onChange} className="form-control" type="text" name="name" placeholder="Name" />
         </div>);
     }
 });
 
+INPUT_TYPES.tag = React.createClass({
+    onChange: function (e) {
+        this.props.onChange('tag', e.target.value);
+    },
+    render: function () {
+        return (<div className={'form-group col-md-' + this.props.width}>
+            <label className="control-label">Tag</label>
+            <input ref="input" value={this.props.value} onChange={this.onChange} className="form-control" type="text" name="tag" placeholder="<key>: <value> or just <key>" />
+        </div>);
+    }
+});
+
+INPUT_TYPES.type = React.createClass({
+    onChange: function (e) {
+        this.props.onChange('type', e.target.value);
+    },
+    render: function () {
+        return (<div className={'form-group col-md-' + this.props.width}>
+            <label className="control-label">Type</label>
+            <input ref="input" value={this.props.value} onChange={this.onChange} className="form-control" type="text" name="type" placeholder="Type" />
+        </div>);
+    }
+});
 
 INPUT_TYPES.ip = React.createClass({
     onChange: function (e) {
         this.props.onChange('ip', e.target.value);
     },
     render: function () {
-        return (<div className="form-group col-md-2">
+        return (<div className={'form-group col-md-' + this.props.width}>
             <label className="control-label">IP Address</label>
                 <input ref="input" value={this.props.value} onChange={this.onChange} className="form-control" type="text" name="ip" placeholder="IP Address" />
         </div>);
@@ -106,7 +143,7 @@ INPUT_TYPES.state = React.createClass({
         this.props.onChange('state', e.target.value);
     },
     render: function () {
-        return (<div className="form-group col-md-3">
+        return (<div className={'form-group col-md-' + this.props.width}>
             <label className="control-label">State</label>
                 <select onChange={this.onChange} value={this.props.value} name="state" className="form-control">
                     <option value="">any</option>
@@ -121,6 +158,22 @@ INPUT_TYPES.state = React.createClass({
     }
 });
 
+INPUT_TYPES.volume_state = React.createClass({
+    onChange: function (e) {
+        this.props.onChange('state', e.target.value);
+    },
+    render: function () {
+        return (<div className={'form-group col-md-' + this.props.width}>
+            <label className="control-label">State</label>
+            <select onChange={this.onChange} value={this.props.value} name="state" className="form-control">
+                <option value="">any</option>
+                <option value="ready">ready</option>
+                <option value="failed">failed</option>
+            </select>
+        </div>);
+    }
+});
+
 INPUT_TYPES.nic_tag = React.createClass({
     getInitialState: function () {
         return {
@@ -138,7 +191,7 @@ INPUT_TYPES.nic_tag = React.createClass({
         });
     },
     render: function () {
-        return (<div className="form-group col-md-2">
+        return (<div className={'form-group col-md-' + this.props.width}>
             <label className="control-label">NIC TAG</label>
                 <select onChange={this.onChange} name="nic_tag" className="form-control">
                     <option value="">any</option>
@@ -176,7 +229,7 @@ INPUT_TYPES.vlan_id = React.createClass({
         });
     },
     render: function () {
-        return (<div className="form-group col-md-2">
+        return (<div className={'form-group col-md-' + this.props.width}>
             <label className="control-label">VLAN</label>
             <select onChange={this.onChange} name="vlan" className="form-control" value={this.props.value}>
                 <option value="">any</option>
@@ -197,7 +250,8 @@ var FilterForm = React.createClass({
         return {
             values: this.props.initialParams || {},
             types: this.props.types || Object.keys(INPUT_TYPES),
-            buttonTitle: this.props.buttonTitle || 'Search'
+            buttonTitle: this.props.buttonTitle || 'Search',
+            typeWidth: this.props.typeWidth || {}
         };
     },
     _onChange: function (prop, value) {
@@ -215,10 +269,13 @@ var FilterForm = React.createClass({
             if (InputType) {
                 var value = this.state.values[type] || '';
                 var data = type === 'vlan_id' ? {owner_uuid : self.state.values.owner_uuid} : null;
+                var width = this.state.typeWidth[type] || DEFAULT_WIDTH[type];
                 if (type === 'package_name') {
                     value = this.state.values['billing_id'] || '';
+                } else if (type === 'volume_state') {
+                    value = this.state.values['state'] || '';
                 }
-                return <InputType data={data} ref={type} key={type} onChange={self._onChange} value={value} />;
+                return <InputType data={data} ref={type} onChange={self._onChange} value={value} width={width} />;
             }
             return;
         }, this);
diff --git a/www/js/components/ip.jsx b/www/js/components/ip.jsx
index 84db6837..b23be1ef 100644
--- a/www/js/components/ip.jsx
+++ b/www/js/components/ip.jsx
@@ -33,7 +33,7 @@ var Ip = React.createClass({
                 isLoaded: true,
                 error: error || ''
             });
-        }
+        };
         if (ipParts.length === 4 && ipParts[3].length) {
             this.setState({
                 isLoaded: false
diff --git a/www/js/components/localnav.jsx b/www/js/components/localnav.jsx
index 8a03e57e..de57b239 100644
--- a/www/js/components/localnav.jsx
+++ b/www/js/components/localnav.jsx
@@ -20,7 +20,7 @@ var SecondaryNav = React.createClass({
         handleMenuSelect: React.PropTypes.func.isRequired,
         active: React.PropTypes.string
     },
-    _clickedMenuItem: function(e) {
+    _clickedMenuItem: function (e) {
         if (e.metaKey || e.ctrlKey) {
             return;
         }
@@ -37,12 +37,12 @@ var SecondaryNav = React.createClass({
             return;
         }
     },
-    _classesFor: function(v) {
+    _classesFor: function (v) {
         return cx({
             active: (this.props.active === v)
         });
     },
-    mantaNav: function() {
+    mantaNav: function () {
         if (adminui.state.get('manta')) {
             return [
                 <li className="nav-header">Storage (Manta)</li>,
@@ -50,17 +50,22 @@ var SecondaryNav = React.createClass({
             ];
         }
     },
-    render: function() {
+    render: function () {
         return (<div id="localnav">
             <ul className="nav">
                 <li className="nav-header">Compute</li>
                 <li className={this._classesFor('dashboard')} onClick={this._clickedMenuItem} data-component="dashboard"><a href="/dashboard"><i className="fa fa-home"></i> Dashboard</a></li>
                 <li className={this._classesFor('vms')} onClick={this._clickedMenuItem} data-component="vms"><a href="/vms"><i className="fa fa-cubes"></i> Virtual Machines</a></li>
+
+                {adminui.state.get('volapiEnabled') &&
+                    <li className={this._classesFor('volumes')} onClick={this._clickedMenuItem} data-component="volumes"><a href="/volumes"><i className="fa fa-th-large"></i> Volumes</a></li>
+                }
+
                 <li className={this._classesFor('servers')} onClick={this._clickedMenuItem} data-view="servers"><a href="/servers"><i className="fa fa-list"></i> Servers</a></li>
                 <li className={this._classesFor('images')} onClick={this._clickedMenuItem} data-component="images"><a href="/images"><i className="fa fa-photo"></i> Images</a></li>
                 <li className={this._classesFor('packages')} onClick={this._clickedMenuItem} data-view="packages"><a href="/packages"><i className="fa fa-codepen"></i> Packages</a></li>
 
-                { this.mantaNav() }
+                {this.mantaNav()}
 
                 <li className="nav-header">Infrastructure</li>
                 <li className={this._classesFor('networking')} onClick={this._clickedMenuItem} data-view="networking"><a href="/networks">Networking</a></li>
diff --git a/www/js/components/multi-nic-config.jsx b/www/js/components/multi-nic-config.jsx
index 666a9788..cac78704 100644
--- a/www/js/components/multi-nic-config.jsx
+++ b/www/js/components/multi-nic-config.jsx
@@ -83,7 +83,7 @@ var MultipleNicConfigComponent = React.createClass({
                 selectedIps[currentNic.ip] = true;
             }
             result[uuid] = currentNic;
-        }, this) 
+        }, this);
         this.setState({nics: result, selectedIps: selectedIps}, function () {
             if (this.props.onChange) {
                 this.props.onChange();
@@ -120,7 +120,7 @@ var MultipleNicConfigComponent = React.createClass({
             var nic = this.state.nics[uuid];
             var filter = function (network) {
                 return network.uuid === nic.network_uuid;
-            }
+            };
             if (networks.some(filter) || networkPools.some(filter)) {
                 nics[uuid] = nic;
             }
diff --git a/www/js/components/pages/user/index.jsx b/www/js/components/pages/user/index.jsx
index 003f9063..47767583 100644
--- a/www/js/components/pages/user/index.jsx
+++ b/www/js/components/pages/user/index.jsx
@@ -94,7 +94,6 @@ var PageUser = React.createClass({
             });
             this.fetchUser();
         }
-        console.log('componentWillReceiveProps', props);
     },
 
     componentDidMount: function () {
diff --git a/www/js/components/pages/vm/index.jsx b/www/js/components/pages/vm/index.jsx
index b62c9516..b3765ac9 100644
--- a/www/js/components/pages/vm/index.jsx
+++ b/www/js/components/pages/vm/index.jsx
@@ -185,8 +185,7 @@ var VMPage = React.createClass({
                                         <span className="value vm-alias">{vm.alias || vm.uuid}</span>
                                     </span>
 
-                                    <span className="vm-uuid selectable">{vm.uuid}</span>
-                                </td>
+                                    <span className="vm-uuid selectable">{vm.uuid}</span></td>
                             </tr>
 
                             <tr>
diff --git a/www/js/components/pages/volumes/index.jsx b/www/js/components/pages/volumes/index.jsx
new file mode 100644
index 00000000..af160b2c
--- /dev/null
+++ b/www/js/components/pages/volumes/index.jsx
@@ -0,0 +1,89 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/*
+ * Copyright (c) 2016, Joyent, Inc.
+ */
+
+var React = require('react');
+var app = require('../../../adminui');
+var api = require('../../../request');
+var utils = require('../../../lib/utils');
+
+var VolumesList = require('./list');
+var FilterForm = require('./../../filter-form');
+
+var Volumes = require('../../../models/volumes');
+var Volume = require('../../../models/volume');
+
+var VolumesPage = React.createClass({
+    statics: {
+        sidebar: 'volumes',
+        url: function () {
+            var url = 'volumes';
+            return location.pathname === '/volumes' ? (url + location.search || '') : url;
+        }
+    },
+    getInitialState: function () {
+        return {
+            filterTypes: ['uuid', 'name', 'owner_uuid'],
+            typeWidth: {uuid: 3},
+            form: true
+        };
+    },
+    componentWillMount: function () {
+        this.collection = new Volumes();
+        this.query(this.props.params);
+        app.vent.trigger('settitle', 'volumes');
+    },
+    showForm: function () {
+        app.vent.trigger('showcomponent', 'volume-form');
+    },
+    render: function () {
+        var state = this.state;
+        return (
+            <div className="page" id="page-vms">
+                <div className="page-header">
+                    <h1>Volumes
+                        {app.user.role('operators') ?
+                            <div className="actions">
+                                <button onClick={this.showForm} className="create-button btn btn-info">
+                                    <i className="fa fa-plus"></i> Provision Volume
+                                </button>
+                            </div> : null
+                        }
+                    </h1>
+                </div>
+
+                <div className="row">
+                    <div className="col-md-12">
+                        <section className="filter-form">
+                            <FilterForm initialParams={this.props.params} handleSearch={this.query}
+                                        buttonTitle='Search Volumes' types={state.filterTypes} typeWidth={state.typeWidth}/>
+                        </section>
+                    </div>
+                </div>
+
+                <div className="row">
+                    <div className="col-md-12">
+                        <div className="list-region">
+                            <VolumesList volumes={this.collection} showActions={true} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    },
+
+    query: function (params) {
+        this.collection.params = utils.getVmSearchParams(params);
+        this.collection.fetch({
+            reset: true
+        });
+    }
+});
+
+module.exports = VolumesPage;
diff --git a/www/js/components/pages/volumes/list.jsx b/www/js/components/pages/volumes/list.jsx
new file mode 100644
index 00000000..76220fb4
--- /dev/null
+++ b/www/js/components/pages/volumes/list.jsx
@@ -0,0 +1,233 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/*
+ * Copyright (c) 2016, Joyent, Inc.
+ */
+
+var React = require('react');
+var _ = require('underscore');
+var adminui = require('../../../adminui');
+var utils = require('../../../lib/utils');
+var UserLink = require('../../user-link');
+var User = require('../../../models/user');
+var BB = require('../../bb');
+var PaginationView = require('../../../views/pagination');
+var JSONExport = require('../../json-export');
+var Volumes = require('../../../models/volumes');
+var Promise = require('promise');
+
+var NOT_AVAILABLE = 'N/A';
+var NOT_EXPORTED_OWNER_FIELDS = [
+    'controls',
+    'memberof',
+    'dn',
+    'pwdchangedtime',
+    'pwdendtime',
+    'registered_developer',
+    'approved_for_provisioning',
+    'memberof',
+    'objectclass'
+];
+var usersCache = {};
+
+var fetchOwner = function (owner_uuid) {
+    return new Promise(function (resolve) {
+        if (usersCache[owner_uuid]) {
+            resolve(usersCache[owner_uuid]);
+            return;
+        }
+
+        var user = new User({uuid: owner_uuid});
+        user.fetch().done(function () {
+            usersCache[owner_uuid] = user;
+            resolve(user);
+        }).fail(function () {
+            resolve({});
+        });
+    });
+};
+
+var VolumesList = React.createClass({
+    getInitialState: function () {
+        var state = {
+            volumes: this.props.volumes || new Volumes()
+        };
+        state.loading = !state.volumes.fetched;
+        return state;
+    },
+    componentDidMount: function () {
+        var volumes = this.state.volumes;
+        volumes.on('reset', this.onSync, this);
+        volumes.on('add', this.onSync, this);
+        volumes.on('remove', this.onSync, this);
+        volumes.on('error', function (model, xhr) {
+            var errorDetails = '';
+            if (xhr.statusText === 'timeout') {
+                errorDetails = 'Connection timed out - please try again.';
+            } else {
+                try {
+                    errorDetails = JSON.parse(xhr.responseText).message;
+                } catch (ex) {
+                    errorDetails = ex;
+                }
+            }
+            adminui.vent.trigger('notification', {
+                level: 'error',
+                message: 'Failed to fetch volumes: ' + errorDetails
+            });
+            this.setState({loading: false});
+        }, this);
+    },
+    onSync: function () {
+        var self = this;
+        var volumes = this.state.volumes;
+        var owners = _.uniq(_.pluck(volumes.toJSON(), 'owner_uuid'));
+        Promise.all(owners.map(fetchOwner)).done(function (owners) {
+            self.setState({volumes: volumes, owners: owners, loading: false});
+        });
+    },
+    showVolume: function (volume) {
+        adminui.vent.trigger('showcomponent', 'volume', {volume: volume});
+    },
+    navigateToOwnerDetailsPage: function (user) {
+        adminui.vent.trigger('showcomponent', 'user', {user: user});
+    },
+    deleteVolume: function (model, event) {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        var volume = model.toJSON();
+        var confirm = window.confirm(
+            _.str.sprintf('Are you sure you want to delete the volume "%s" ?', volume.name)
+        );
+        if (confirm) {
+            var self = this;
+            model.set({'deleting': true});
+            this.setState({volumes: self.state.volumes});
+            model.destroy({contentType: 'application/json', data: JSON.stringify(volume), wait: true}).done(function () {
+                var notifyMsg = _.str.sprintf('Volume <strong>%s</strong> has been deleted successfully.', volume.name);
+                adminui.vent.trigger('notification', {
+                    level: 'success',
+                    message: notifyMsg
+                });
+            }).fail(function (error) {
+                model.set({'deleting': false});
+                self.setState({volumes: self.state.volumes});
+                adminui.vent.trigger('notification', {
+                    level: 'error',
+                    message: error.responseData.message
+                });
+            });
+        }
+    },
+    renderVolume: function (model) {
+        var volume = model.toJSON();
+        var state = volume.state || null;
+
+        var actions = volume.deleting ?
+            (<td className="status">
+                <div className="loading"><i className="fa fa-spinner fa-spin"></i> Deleting</div>
+            </td>) :
+            (<td className="actions">
+                <a onClick={this.deleteVolume.bind(this, model)} className="delete"><i className="fa fa-trash-o"></i> Delete</a>
+            </td>);
+
+        return (
+            <tr key={volume.uuid}>
+                {state ?
+                    <td className="status">
+                            <span className={'state ' + state}>{state}</span>
+                    </td> : null
+                }    
+                <td className="name">
+                    <a onClick={this.showVolume.bind(this, model)}>{volume.name || volume.uuid}</a>
+                    <span className="uuid">{volume.uuid}</span>
+                </td>
+                <td className="size">
+                    {volume.reserved_size / 1024} GB
+                </td>
+                <td className="type">
+                    {volume.type}
+                </td>
+                <td className="owned-by">
+                    <div className="owner">
+                        <UserLink icon company user={usersCache[volume.owner_uuid]} userUuid={volume.owner_uuid}
+                                  handleClick={this.navigateToOwnerDetailsPage} />
+                    </div>
+                </td>
+                {this.props.showActions && adminui.user.role('operators') && actions}
+            </tr>
+        );
+    },
+    handleExport: function () {
+        var state = this.state;
+        var volumes = state.volumes.toJSON();
+        var owners = state.owners;
+        var volumesGroupedByOwner = _.groupBy(volumes, function (volume) {
+            return volume.owner_uuid;
+        });
+        var exported = owners.map(function (owner) {
+            owner = owner.toJSON();
+            if (owner.cn !== NOT_AVAILABLE) {
+                NOT_EXPORTED_OWNER_FIELDS.forEach(function (key) {
+                    delete owner[key];
+                });
+                owner.created_at = new Date(Number(owner.created_at));
+                owner.updated_at = new Date(Number(owner.updated_at));
+            }
+            owner.volumes = volumesGroupedByOwner[owner.uuid];
+            return owner;
+        });
+        this.setState({exported: exported});
+    },
+    handleCloseExport: function () {
+        this.setState({exported: false});
+    },
+    render: function () {
+        var volumes = this.state.volumes;
+        if (this.state.loading) {
+            return (
+                <div className="volumes-list">
+                    <div className="zero-state">Retrieving Volumes</div>
+                </div>
+            );
+        }
+
+        if (!volumes.length) {
+            return (
+                <div className="volumes-list">
+                    <div className="zero-state">No Volumes were found matching specified criteria</div>
+                </div>
+            );
+        }
+
+        return (
+            <div className="volumes-list">
+                <div className="volumes-list-header list-header">
+                    <div className="title">
+                        Showing <span className="current-count">{volumes.length}</span> of <span className="record-count">{volumes.objectCount}</span> Volumes<br/>
+                    </div>
+                    <div className="actions">
+                        <a onClick={this.handleExport} className="export">Export (<span className="record-count">{volumes.length}</span>) <i className="fa fa-share-square"></i></a>
+                    </div>
+                </div>
+                <table className="table">
+                    <tbody>{volumes.map(this.renderVolume, this)}</tbody>
+                </table>
+                <BB view={new PaginationView({collection: volumes})} />
+                {
+                    this.state.exported ? <div className="export-container">
+                        <JSONExport description="Volumes grouped by owner" data={this.state.exported} onRequestHide={this.handleCloseExport} />
+                    </div> : null
+                }
+            </div>
+        );
+    }
+});
+
+module.exports = VolumesList;
diff --git a/www/js/components/pages/volumes/networks.jsx b/www/js/components/pages/volumes/networks.jsx
new file mode 100644
index 00000000..5704776c
--- /dev/null
+++ b/www/js/components/pages/volumes/networks.jsx
@@ -0,0 +1,75 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/*
+ * Copyright (c) 2016, Joyent, Inc.
+ */
+
+var React = require('react');
+var NetworksList = require('../networking/networks-list');
+var Networks = require('../../../models/networks');
+
+var VolumeNetworksList = React.createClass({
+    propTypes: {
+        networks: React.PropTypes.array.isRequired
+    },
+    getInitialState: function () {
+        return {
+            loading: true,
+            networkFilters: this.props.owner ? {provisionable_by: this.props.owner} : {}
+        };
+    },
+    componentDidMount: function () {
+        var networks = new Networks();
+        var self = this;
+        var req = networks.fetch({params: this.state.networkFilters});
+        req.fail(function (xhr) {
+            self.setState({
+                loading: false,
+                error: xhr.responseText
+            });
+        });
+
+        req.done(function () {
+            networks.reset(networks.fullCollection.filter(function (network) {
+                return self.props.networks.indexOf(network.get('uuid')) !== -1;
+            }));
+            self.setState({
+                error: null,
+                loading: false,
+                networks: networks
+            });
+        });
+    },
+    render: function () {
+        if (this.state.loading) {
+            return <div className="volume-networks">
+                <div className="loading">
+                    <i className="fa fa-circle-o-notch fa-spin" /> Fetching Networks
+                </div>
+            </div>;
+        }
+
+        if (this.state.error) {
+            return <div className="volume-networks">
+                <div className="loading error">
+                    <h1><i className="fa fa-warning" /> Failed to retrieve networks.</h1>
+                    <p><code>{this.state.error}</code></p>
+                </div>
+            </div>;
+        }
+
+        return <div className="volume-networks">
+            <h3>Networks</h3>
+            <NetworksList
+                collection={this.state.networks}
+                showActions={false} />
+        </div>;
+    }
+});
+
+module.exports = VolumeNetworksList;
+
diff --git a/www/js/components/pages/volumes/volume-form.jsx b/www/js/components/pages/volumes/volume-form.jsx
new file mode 100644
index 00000000..b2d9cbb1
--- /dev/null
+++ b/www/js/components/pages/volumes/volume-form.jsx
@@ -0,0 +1,285 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/*
+ * Copyright (c) 2016, Joyent, Inc.
+ */
+
+var React = require('react');
+var Chosen = require('react-chosen');
+var _ = require('underscore');
+var PropTypes = React.PropTypes;
+
+var app = require('../../../adminui');
+var api = require('../../../request');
+var UserInput = require('../../../views/typeahead-user');
+var ServerTypeahead = require('../../server-typeahead');
+var Networks = require('../../../models/networks');
+var ErrorAlert = require('../../error-alert');
+var Packages = require('../../../models/packages');
+
+var defaultHandler = function () {
+    return app.vent.trigger('showcomponent', 'volumes');
+};
+
+var VolumeForm = React.createClass({
+    propTypes: {
+        handleSave: PropTypes.func,
+        handleCancel: PropTypes.func
+    },
+    statics: {
+        sidebar: 'volumes'
+    },
+    getDefaultProps: function () {
+        return {
+            handleCancel: defaultHandler,
+            handleSave: defaultHandler,
+            cancelButton: 'Back to Volumes',
+            creating: false
+        };
+    },
+    getInitialState: function () {
+        return {
+            userNetworks: {},
+            networks: [],
+            packages: [],
+            type: 'tritonnfs',
+            sizeMeasure: 'MB'
+        };
+    },
+    componentDidMount: function () {
+        var self = this;
+        var packages = new Packages();
+        packages.fetch({
+            params: {
+                name: 'sdc_volume_nfs*',
+                active: true
+            }
+        }).done(function () {
+            self.setState({packages: packages});
+        }).fail(function (xhr) {
+            self.setState({error: xhr.responseText});
+        });
+        this.networks = new Networks();
+        this.userInput = new UserInput({
+            accountsOnly: true,
+            el: React.findDOMNode(self.refs.owner)
+        });
+
+        this.userInput.render();
+        this.userInput.on('selected', self.onSelectUser, self);
+    },
+    onSelectUser: function () {
+        var userId = this.userInput.selectedUser && this.userInput.selectedUser.id;
+        userId = userId && userId.length === 36 ? userId : null;
+        var ownerUuid = this.state.owner_uuid;
+        this.setState({
+            loading: true,
+            owner_uuid: userId,
+            networks: []
+        });
+
+        if (userId && userId !== ownerUuid) {
+            var self = this;
+            if (this.state.userNetworks[userId]) {
+                return self.setState({
+                    error: null,
+                    loading: false,
+                    networks: self.state.userNetworks[userId]
+                });
+            }
+            var req = this.networks.fetch({params: {
+                provisionable_by: userId,
+                fabric: true
+            }});
+            req.fail(function (xhr) {
+                self.setState({
+                    loading: false,
+                    error: xhr.responseText
+                });
+            });
+
+            req.done(function () {
+                self.state.userNetworks[userId] = self.networks;
+                self.setState({
+                    error: null,
+                    loading: false,
+                    userNetworks: self.state.userNetworks
+                });
+            });
+        }
+    },
+    onSelectNetwork: function (e, data) {
+        if (data.selected) {
+            this.state.networks.push(data.selected);
+        } else if (data.deselected) {
+            this.state.networks = _.without(this.state.networks, data.deselected)
+        }
+        this.setState({networks: this.state.networks});
+    },
+    renderNetworkSelect: function () {
+        var networks = this.networks.fullCollection.toJSON();
+        return (
+            <Chosen onChange={this.onSelectNetwork}
+                    className="form-control"
+                    name="network_uuid"
+                    data-placeholder="Select a Network"
+                    value={this.state.networks}
+                    multiple>
+                <option value=""></option>
+                {
+                    networks.map(function (network) {
+                        return (<option key={network.uuid} value={network.uuid}>{network.name} - {network.subnet}</option>);
+                    })
+                }
+            </Chosen>
+        );
+    },
+    onSelectPackage: function (e, data) {
+        this.setState({size: data.selected});
+    },
+    renderPackageSelect: function () {
+        var packages = this.state.packages.toJSON();
+        return (
+            <Chosen onChange={this.onSelectPackage}
+                  data-placeholder="Select a Package"
+                  className="form-control"
+                  value={this.state.size}
+                  name="package">
+              <option value=""></option>
+              {
+                  packages.map(function (pkg) {
+                      return (<option key={pkg.uuid} value={pkg.quota}>{pkg.name} {pkg.version}</option>);
+                  })
+              }
+            </Chosen>
+        );
+    },
+    render: function () {
+        var state = this.state;
+        return (
+            <div className="page" id="page-volume-form">
+                <div className="page-header">
+                    <h1>Provision Volume</h1>
+                </div>
+                <div className="row">
+                    <form className="form-horizontal volume-form">
+                        {state.error && <ErrorAlert error={state.error} />}
+
+                        <div className="form-group">
+                            <label className="control-label col-sm-3 required">Owner</label>
+                            <div className="col-sm-6">
+                                <input type="text" className="form-control" name="owner_uuid" ref="owner" />
+                            </div>
+                        </div>
+
+                        <div className="form-group">
+                            <label className="control-label col-sm-3 required">Name</label>
+                            <div className="controls col-sm-6">
+                                <input placeholder="name of volume" type="text" onChange={this._handleChangeName} value={state.name} className="form-control" name="name" />
+                            </div>
+                        </div>
+
+                        <div className="form-group">
+                            <label className="control-label col-sm-3">Package</label>
+                            <div className="col-sm-6">
+                                {state.packages.length ? this.renderPackageSelect() : null}
+                            </div>
+                        </div>
+
+                        <div className="form-group">
+                            <label className="control-label col-sm-3 required">Type</label>
+                            <div className="controls col-sm-6">
+                                <input disabled="disabled" type="text" value={state.type} className="form-control" name="type" />
+                            </div>
+                        </div>
+
+                        <div className="form-group">
+                            <label className="control-label col-sm-3">Server</label>
+                            <div className="col-sm-6">
+                                <ServerTypeahead className="form-control" onChange={this._handleChangeServer} />
+                                <span className="help-block">Server to provision volume to (optional)</span>
+                            </div>
+                        </div>
+
+                        {state.owner_uuid ?
+                            <div className="form-group form-group-network row">
+                                <label className="control-label col-sm-3 required">Networks</label>
+
+                                <div className="controls col-sm-6">
+                                    {state.loading ?
+                                        <div className="loading">
+                                            <i className="fa fa-spinner fa-spin"></i> Retrieving Networks
+                                        </div> : this.renderNetworkSelect()
+                                    }
+                                </div>
+                            </div> : null
+                        }
+
+                        <div className="form-group">
+                            <div className="col-sm-offset-3 col-sm-6">
+                                {state.creating ? <div className="loading"><i className="fa fa-spinner fa-spin"></i> Creating volume</div> :
+                                    <div>
+                                        <button disabled={!(state.name && state.owner_uuid && state.networks.length)}  className="btn btn-primary" onClick={this._handleSave} type="submit">Save Volume</button>
+                                        <button className="btn btn-link" onClick={this._handleCancel} type="button">{this.props.cancelButton}</button>
+                                    </div>
+                                }
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        );
+    },
+    _handleCancel: function () {
+        this.props.handleCancel();
+    },
+    _handleSave: function (e) {
+        e.preventDefault();
+        var state = this.state;
+        var data = {
+            name: state.name,
+            type: state.type,
+            owner_uuid: state.owner_uuid,
+            networks: state.networks
+        };
+        if (state.size) {
+            data.size = state.size + state.sizeMeasure;
+        }
+        if (state.server) {
+            data.server_uuid = state.server;
+        }
+
+        this.setState({error: null, creating: true});
+        api.post('/api/volumes').send(data).end(function (res) {
+            if (res.error) {
+                this.setState({error: res.body, creating: false});
+                return;
+            }
+            if (res.ok) {
+                app.vent.trigger('notification', {
+                    level: 'success',
+                    message: _.str.sprintf('Volume <strong>%s</strong> has been created successfully', state.name)
+                });
+                this.props.handleSave(state);
+            }
+        }.bind(this));
+    },
+    _handleChangeName: function (e) {
+        this.setState({name: e.target.value});
+    },
+    _handleChangeServer: function (server) {
+        this.setState({server: server});
+    },
+    _handleChangeSize: function (e) {
+        this.setState({size: e.target.value});
+    },
+    _handleChangeSizeMeasure: function (e) {
+        this.setState({sizeMeasure: e.target.value});
+    }
+});
+
+module.exports = VolumeForm;
diff --git a/www/js/components/pages/volumes/volume.jsx b/www/js/components/pages/volumes/volume.jsx
new file mode 100644
index 00000000..3f687712
--- /dev/null
+++ b/www/js/components/pages/volumes/volume.jsx
@@ -0,0 +1,208 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/*
+ * Copyright (c) 2016, Joyent, Inc.
+ */
+
+'use strict';
+
+var React = require('react');
+var moment = require('moment');
+var adminui = require('../../../adminui');
+var VolumeModel = require('../../../models/volume');
+var Metadata =  require('./../vm/metadata');
+var VolumeNetworks = require('./networks');
+var UserTile = require('../../user-tile');
+
+var VolumePage = React.createClass({
+    statics: {
+        sidebar: 'volumes',
+        url: function (props) {
+            var data = props.uuid || props.volume;
+
+            if (data && typeof data === 'object') {
+                data = data.get('uuid');
+            }
+
+            return _.str.sprintf('/volumes/%s', data);
+        }
+    },
+    getInitialState: function () {
+        var volume = this.props.volume;
+        var isVolumeObject = volume && typeof volume === 'object';
+        return {
+            volume: isVolumeObject ? volume : new VolumeModel({uuid: this.props.uuid || volume}),
+            loading: !isVolumeObject
+        };
+    },
+    componentDidMount: function () {
+        if (this.state.loading) {
+            this.fetchVolume();
+        }
+    },
+    fetchVolume: function () {
+        var req = this.state.volume.fetch();
+        req.fail(function (xhr) {
+            this.setState({
+                loading: false,
+                error: xhr.responseText,
+                volume: this.state.volume
+            });
+        }.bind(this));
+
+        req.done(function () {
+            this.setState({
+                error: null,
+                loading: false,
+                volume: this.state.volume
+            });
+        }.bind(this));
+    },
+    navigateToVmPage: function (e) {
+        var vmUuid = e && e.target && e.target.getAttribute('data-vm-uuid');
+        if (e.metaKey || e.ctrlKey || !vmUuid) {
+            return;
+        }
+        e.preventDefault();
+        adminui.router.showVm(vmUuid);
+    },
+    render: function () {
+        if (this.state.loading) {
+            return <div id="page-user">
+                <div className="loading">
+                    <i className="fa fa-circle-o-notch fa-spin" /> Fetching Volume
+                </div>
+            </div>;
+        }
+
+        if (this.state.error) {
+            return <div id="page-user">
+                <div className="loading error">
+                    <h1><i className="fa fa-warning" /> Volume can not be retrieved</h1>
+                    <p><code>{this.state.error}</code></p>
+                </div>
+            </div>;
+        }
+
+        if (!this.state.volume) {
+            return <div id="page-volume">
+                <div className="page-header">
+                    <h2>Volume Not Found</h2>
+                </div>
+                <p>The Volume with ID <code>{this.props.uuid}</code> can not be found.</p>
+            </div>;
+        }
+
+        var volume = this.state.volume.toJSON();
+        var state = volume.state || null;
+
+        return <div id="page-volume">
+            <div className="page-header">
+                {state && <div className="resource-status"><span className={'volume-state ' + state}>{state}</span></div>}
+                <h1>
+                    <span className="volume-alias">{volume.name || volume.uuid}</span>&nbsp;
+                    <small className="uuid volume-uuid selectable">{volume.uuid}</small>
+                </h1>
+            </div>
+            <section className="volume-details">
+                <div className="row">
+                    <div className="col-md-9">
+                        <table className="overview">
+                            <tr>
+                                <th>Name</th>
+                                <td>
+                                    <span className="alias">
+                                        <span className="value volume-alias">{volume.name || volume.uuid}</span>
+                                    </span>
+                                    <span className="volume-uuid selectable">{volume.uuid}</span>
+                                </td>
+                            </tr>
+
+                            {volume.reserved_size ?
+                                <tr>
+                                    <th>Size</th>
+                                    <td className="size">{volume.reserved_size / 1024} GB</td>
+                                </tr>
+                                : null
+                            }
+
+                            <tr>
+                                <th>Type</th>
+                                <td>
+                                    <span className="volume-type">{volume.type}</span>
+                                </td>
+                            </tr>
+
+                            {volume.filesystem_path ?
+                                <tr>
+                                    <th>FS Path</th>
+                                    <td className="nfs-path">{volume.filesystem_path}</td>
+                                </tr>
+                                : null
+                            }
+
+                            <tr>
+                                <th>Created</th>
+                                <td>
+                                    <span className="created">
+                                             {volume.create_timestamp && moment(volume.create_timestamp).utc().format('D MMMM, YYYY HH:mm:ss z')}
+                                    </span>
+                                </td>
+                            </tr>
+
+                            {volume.vm_uuid ?
+                                <tr>
+                                    <th>Virtual Machine</th>
+                                    <td className="vm">
+                                        <a data-vm-uuid={volume.vm_uuid} onClick={this.navigateToVmPage}>{volume.vm_uuid}</a>
+                                    </td>
+                                </tr>
+                                : null
+                            }
+                        </table>
+                    </div>
+                    <div className="col-md-3">
+                        <div className="user-tile-icon">
+                            <i className="fa fa-user"></i>
+                        </div>
+                        <div className="user-tile-container">
+                            <UserTile uuid={volume.owner_uuid} onUserDetails={
+                                function (user) { adminui.vent.trigger('showcomponent', 'user', {uuid: user.uuid }); }
+                                } />
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {volume.networks && volume.networks.length ?
+                <section>
+                    <div className="row">
+                        <div className="col-md-12">
+                            <div className="network-region">
+                                <VolumeNetworks networks={volume.networks} owner={volume.owner_uuid} />
+                            </div>
+                        </div>
+                    </div>
+                </section> : null
+            }
+
+            {volume.tags && Object.keys(volume.tags).length ?
+                <section>
+                    <div className="row">
+                        <div className="col-md-6">
+                            <h3>Tags</h3>
+                            <div className="tags-container"><Metadata metadata={volume.tags} /></div>
+                        </div>
+                    </div>
+                </section> : null
+            }
+
+        </div>;
+    }
+});
+
+module.exports = VolumePage;
diff --git a/www/js/components/user-link.jsx b/www/js/components/user-link.jsx
index 351b76ee..e37ee3f1 100644
--- a/www/js/components/user-link.jsx
+++ b/www/js/components/user-link.jsx
@@ -18,21 +18,23 @@ var UserLink =  React.createClass({
         'userUuid': React.PropTypes.string.isRequired,
         'handleClick': React.PropTypes.func
     },
-    getInitialState: function() {
+    getInitialState: function () {
         return {
-            user: {},
-            loaded: false
+            user: this.props.user || {},
+            loaded: !!this.props.user
         };
     },
-    componentDidMount: function() {
-        var user = this.user = new User({uuid: this.props.userUuid});
-        var self = this;
-        var req = this.user.fetch();
-        req.done(function() {
-            self.setState({user: user, loaded: true});
-        });
+    componentDidMount: function () {
+        var user = this.user = this.props.user || new User({uuid: this.props.userUuid});
+        if (!this.props.user) {
+            var self = this;
+            var req = this.user.fetch();
+            req.done(function () {
+                self.setState({user: user, loaded: true});
+            });
+        }
     },
-    handleClick: function(e) {
+    handleClick: function (e) {
         if (e.metaKey || e.ctrlKey) {
             return;
         }
@@ -41,21 +43,22 @@ var UserLink =  React.createClass({
             this.props.handleClick(this.user);
         }
     },
-    render: function() {
+    render: function () {
         var userIcon = this.props.icon ? <i className="fa fa-user fa-fw"></i> : null;
 
         if (this.state.loaded) {
             var user = this.state.user.toJSON();
+            user.cn = user.cn || user.givenname + ' ' + user.sn;
+
             var company = this.props.company && user.company && user.company.length ?
                 <div className="user-link-company">
                     { this.props.icon ? <span className="fa fa-building fa-fw"></span> : null}
                     <div className="owner-company">{user.company}</div>
                 </div> : null;
 
-
             return <div className="user-link-component">
                 { userIcon }
-                <a onClick={this.handleClick} href={"/users/" + this.props.userUuid}>{user.cn}</a>
+                <a onClick={this.handleClick} href={"/users/" + user.uuid}>{user.cn}</a>
                 { company }
             </div>;
         } else {
diff --git a/www/js/models/network.js b/www/js/models/network.js
index 9e7e9574..554b4c42 100644
--- a/www/js/models/network.js
+++ b/www/js/models/network.js
@@ -8,7 +8,6 @@
  * Copyright (c) 2015, Joyent, Inc.
  */
 
-var Backbone = require('backbone');
 var Model = require('./model');
 var api = require('../request');
 
@@ -18,5 +17,5 @@ module.exports = Model.extend({
 
     update: function(attrs, cb) {
         api.put(this.url()).send(attrs).end(cb);
-    },
+    }
 });
diff --git a/www/js/models/packages.js b/www/js/models/packages.js
index 66df7489..9aba4f22 100644
--- a/www/js/models/packages.js
+++ b/www/js/models/packages.js
@@ -5,18 +5,17 @@
  */
 
 /*
- * Copyright (c) 2014, Joyent, Inc.
+ * Copyright (c) 2016, Joyent, Inc.
  */
 
-var Backbone = require('backbone');
 var Package = require('./package');
 var Collection = require('./collection');
 
 var Packages = Collection.extend({
     model: Package,
     url: '/api/packages',
-    fetchActive: function() {
-        return this.fetch({params:{active: true}});
+    fetchActive: function () {
+        return this.fetch({params: {active: true}});
     }
 });
 
diff --git a/www/js/models/user.js b/www/js/models/user.js
index 633b7357..94c56789 100644
--- a/www/js/models/user.js
+++ b/www/js/models/user.js
@@ -5,10 +5,10 @@
  */
 
 /*
- * Copyright (c) 2014, Joyent, Inc.
+ * Copyright (c) 2016, Joyent, Inc.
  */
 
-"use strict";
+'use strict';
 /**
  * models/user
  */
@@ -19,7 +19,7 @@ var api = require('../request');
 
 
 var User = module.exports = Model.extend({
-    url: function() {
+    url: function () {
         if (this.get('uuid') && this.get('account')) {
             return _.str.sprintf('/api/users/%s/%s', this.get('account'), this.get('uuid'));
         }
@@ -30,54 +30,53 @@ var User = module.exports = Model.extend({
     },
     urlRoot: '/api/users',
     idAttribute: 'uuid',
-    parse: function(resp) {
+    parse: function (resp) {
         var data = Model.prototype.parse.apply(this, arguments);
         data.groups = this.parseGroups(data.memberof);
         return data;
     },
 
-    parseGroups: function(memberof) {
-        return _.map(memberof, function(dn) {
+    parseGroups: function (memberof) {
+        return _.map(memberof, function (dn) {
             var p = dn.match(/^cn=(\w+)/);
             return p[1];
         });
     },
 
-    authenticated: function() {
+    authenticated: function () {
         return window.localStorage.getItem('api-token') !== null;
     },
 
-    getToken: function() {
+    getToken: function () {
         return window.localStorage.getItem('api-token');
     },
 
-    getAdminUuid: function() {
+    getAdminUuid: function () {
         return window.localStorage.getItem('admin-uuid');
     },
 
-    role: function(r) {
+    role: function (r) {
         return this.getRoles().indexOf(r) >= 0;
     },
 
-    getRoles: function() {
+    getRoles: function () {
         var roles = window.localStorage.getItem('user-roles');
         return JSON.parse(roles);
     },
 
-    getManta: function() {
-        var m = window.localStorage.getItem('manta');
-        if (m === "true") {
-            return true;
-        } else {
-            return false;
-        }
+    getManta: function () {
+        return window.localStorage.getItem('manta') === 'true';
     },
 
-    getDatacenter: function() {
+    isVolapiEnabled: function () {
+        return window.localStorage.getItem('volapi-enabled') === 'true';
+    },
+
+    getDatacenter: function () {
         return window.localStorage.getItem('dc');
     },
 
-    authenticate: function(user, pass) {
+    authenticate: function (user, pass) {
         var self = this;
 
         if (user.length === 0 || pass.length === 0) {
@@ -90,12 +89,11 @@ var User = module.exports = Model.extend({
             password: pass
         };
 
-        var req = api.post("/api/auth");
+        var req = api.post('/api/auth');
         req.timeout(10000);
         req.send(authData);
-        req.end(function(err, res) {
+        req.end(function (err, res) {
             if (err) {
-                console.log('auth error', err);
                 if (err.timeout) {
                     self.trigger('error', 'Server Error (request timeout)');
                 }
@@ -109,7 +107,7 @@ var User = module.exports = Model.extend({
                 window.localStorage.setItem('dc', data.dc);
                 window.localStorage.setItem('admin-uuid', data.adminUuid);
                 window.localStorage.setItem('manta', data.manta);
-
+                window.localStorage.setItem('volapi-enabled', data.volapiEnabled);
                 window.localStorage.setItem('user-roles', JSON.stringify(data.roles));
                 window.localStorage.setItem('user-uuid', data.user.uuid);
                 window.localStorage.setItem('user-login', data.user.login);
@@ -117,6 +115,7 @@ var User = module.exports = Model.extend({
                 self.trigger('authenticated', {
                     user: self,
                     adminUuid: data.adminUuid,
+                    volapiEnabled: data.volapiEnabled,
                     manta: data.manta,
                     dc: data.dc
                 });
@@ -126,9 +125,9 @@ var User = module.exports = Model.extend({
         });
     },
 
-    signout: function() {
+    signout: function () {
         var self = this;
-        api.del('/api/auth').end(function(res) {
+        api.del('/api/auth').end(function (res) {
             if (res.ok) {
                 window.localStorage.removeItem('api-token');
                 window.localStorage.removeItem('user-roles');
@@ -173,7 +172,7 @@ var User = module.exports = Model.extend({
     }
 });
 
-User.currentUser = function() {
+User.currentUser = function () {
     var roles = [];
     try {
         roles = JSON.parse(window.localStorage.getItem('user-roles'));
diff --git a/www/js/models/volume.js b/www/js/models/volume.js
new file mode 100644
index 00000000..9b3c3336
--- /dev/null
+++ b/www/js/models/volume.js
@@ -0,0 +1,8 @@
+'use strict';
+
+var Model = require('./model');
+
+module.exports = Model.extend({
+    urlRoot: '/api/volumes',
+    idAttribute: 'uuid'
+});
diff --git a/www/js/models/volumes.js b/www/js/models/volumes.js
new file mode 100644
index 00000000..fee33802
--- /dev/null
+++ b/www/js/models/volumes.js
@@ -0,0 +1,9 @@
+'use strict';
+
+var Volume = require('./volume');
+var PageableCollection = require('./pageableCollection');
+
+module.exports = PageableCollection.extend({
+    model: Volume,
+    url: '/api/volumes'
+});
diff --git a/www/js/router.js b/www/js/router.js
index f4dc51f4..1b04f00f 100644
--- a/www/js/router.js
+++ b/www/js/router.js
@@ -29,12 +29,15 @@ var Components = {
     'alarms': require('./components/pages/alarms'),
     'vm': require('./components/pages/vm'),
     'vms': require('./components/pages/vms'),
+    'volumes': require('./components/pages/volumes'),
+    'volume': require('./components/pages/volumes/volume'),
+    'volume-form': require('./components/pages/volumes/volume-form'),
     'settings': require('./components/pages/settings'),
     'user': require('./components/pages/user'),
     'images': require('./components/pages/images'),
     'manta/agents': require('./components/pages/manta/agents'),
     'dashboard': require('./components/pages/dashboard'),
-    'vlan-form': require('./components/pages/networking/fabric-vlan-form.jsx')
+    'vlan-form': require('./components/pages/networking/fabric-vlan-form')
 };
 
 Object.keys(Components).forEach(function (k) {
@@ -85,6 +88,8 @@ module.exports = Backbone.Marionette.AppRouter.extend({
         'vms': 'showVms',
         'vms/:uuid(/)': 'showVm',
         'vms2/:uuid(/)': 'showVm2',
+        'volumes': 'showVolumes',
+        'volumes/:uuid(/)': 'showVolume',
         'users/:uuid(/)': 'showUser',
         'users/:uuid/:tab(/)': 'showUser',
         'users/:account/:uuid/:tab(/)': 'showUser',
@@ -132,6 +137,7 @@ module.exports = Backbone.Marionette.AppRouter.extend({
 
         this.state.set({
             manta: this.user.getManta(),
+            volapiEnabled: this.user.isVolapiEnabled(),
             datacenter: this.user.getDatacenter()
         });
     },
@@ -145,7 +151,7 @@ module.exports = Backbone.Marionette.AppRouter.extend({
                 $.ajax({
                     type: 'GET',
                     timeout: 15000,
-                    url: '/api/auth',
+                    url: '/api/auth'
                 }).fail(function (xhr, t, m) {
                     reject();
                     self.showSignin();
@@ -390,6 +396,21 @@ module.exports = Backbone.Marionette.AppRouter.extend({
         }.bind(this));
     },
 
+    showVolumes: function (args) {
+        if (typeof args === 'string') {
+            args = this.parseURI(args);
+        }
+        this.authenticated().then(function () {
+            this.presentComponent('volumes', args ? {params: args} : {});
+        }.bind(this));
+    },
+
+    showVolume: function (uuid) {
+        this.authenticated().then(function () {
+            this.presentComponent('volume', uuid ? {uuid: uuid} : {});
+        }.bind(this));
+    },
+
 
     showNetworking: function (tab, querystring) {
         this.authenticated().then(function () {