diff --git a/js/components/ascribe_detail/media_container.js b/js/components/ascribe_detail/media_container.js
index 03d222ef..9b773ea1 100644
--- a/js/components/ascribe_detail/media_container.js
+++ b/js/components/ascribe_detail/media_container.js
@@ -14,13 +14,21 @@ import AclProxy from '../acl_proxy';
 
 let MediaContainer = React.createClass({
     propTypes: {
-        digitalWork: React.PropTypes.object.isRequired,
-        thumbnail: React.PropTypes.string
+        content: React.PropTypes.object
     },
 
-    getEmbed() {
-        if (['video', 'audio'].indexOf(mimetype) > -1) {
-            return (
+    render() {
+        let thumbnail = this.props.content.thumbnail;
+        let mimetype = this.props.content.digital_work.mime;
+        let embed = null;
+        let extraData = null;
+
+        if (this.props.content.digital_work.encoding_urls) {
+            extraData = this.props.content.digital_work.encoding_urls.map(e => { return { url: e.url, type: e.label }; });
+        }
+
+        if (['video', 'audio'].indexOf(mimetype) > -1){
+            embed = (
                 <CollapsibleButton
                     button={
                         <Button bsSize="xsmall" className="ascribe-margin-1px">
@@ -36,35 +44,22 @@ let MediaContainer = React.createClass({
                     }/>
             );
         }
-    },
-
-    render() {
-        if(!this.props.digitalWork) {
-            return null;
-        }
-
-        let extraData = null;
-
-        if (this.props.digitalWork.encoding_urls) {
-            extraData = this.props.digitalWork.encoding_urls.map(e => { return { url: e.url, type: e.label }; });
-        }
-
         return (
             <div>
                 <MediaPlayer
-                    mimetype={this.props.digitalWork.mime}
-                    preview={this.props.thumbnail}
-                    url={this.props.digitalWork.url}
+                    mimetype={mimetype}
+                    preview={thumbnail}
+                    url={this.props.content.digital_work.url}
                     extraData={extraData} />
                 <p className="text-center">
                     <AclProxy
                         aclObject={this.props.content.acl}
                         aclName="acl_download">
-                        <Button bsSize="xsmall" className="ascribe-margin-1px" href={this.props.digitalWork.url} target="_blank">
+                        <Button bsSize="xsmall" className="ascribe-margin-1px" href={this.props.content.digital_work.url} target="_blank">
                             Download <Glyphicon glyph="cloud-download"/>
                         </Button>
                     </AclProxy>
-                    {this.getEmbed()}
+                    {embed}
                 </p>
             </div>
         );
diff --git a/js/components/ascribe_detail/piece.js b/js/components/ascribe_detail/piece.js
index 7c89437f..0eae0579 100644
--- a/js/components/ascribe_detail/piece.js
+++ b/js/components/ascribe_detail/piece.js
@@ -6,8 +6,12 @@ import Router from 'react-router';
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 
+import CollapsibleParagraph from './../ascribe_collapsible/collapsible_paragraph';
+
 import DetailProperty from './detail_property';
 
+import FurtherDetails from './further_details';
+
 import UserActions from '../../actions/user_actions';
 import UserStore from '../../stores/user_store';
 
@@ -33,15 +37,13 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
 import { getLangText } from '../../utils/lang_utils';
 import { mergeOptions } from '../../utils/general_utils';
 
-
 /**
  * This is the component that implements display-specific functionality
  */
 let Piece = React.createClass({
     propTypes: {
         piece: React.PropTypes.object,
-        loadPiece: React.PropTypes.func,
-        children: React.PropTypes.object
+        loadPiece: React.PropTypes.func
     },
 
     mixins: [Router.Navigation],
@@ -126,8 +128,7 @@ let Piece = React.createClass({
             <Row>
                 <Col md={6}>
                     <MediaContainer
-                        digitalWork={this.props.piece.digitalWork}
-                        thumbnail={this.props.piece.thumbnail}/>
+                        content={this.props.piece}/>
                 </Col>
                 <Col md={6} className="ascribe-edition-details">
                     <div className="ascribe-detail-header">
@@ -158,8 +159,20 @@ let Piece = React.createClass({
                     </AclButtonList>
 
                     {this.getCreateEditionsDialog()}
-                    {this.props.children}
 
+                    <CollapsibleParagraph
+                        title="Further Details"
+                        show={this.props.piece.acl.acl_edit
+                            || Object.keys(this.props.piece.extra_data).length > 0
+                            || this.props.piece.other_data !== null}
+                        defaultExpanded={true}>
+                        <FurtherDetails
+                            editable={this.props.piece.acl.acl_edit}
+                            pieceId={this.props.piece.id}
+                            extraData={this.props.piece.extra_data}
+                            otherData={this.props.piece.other_data}
+                            handleSuccess={this.props.loadPiece}/>
+                    </CollapsibleParagraph>
                 </Col>
             </Row>
         );