diff --git a/front-ui/app/components/itemMultiMediaDescriptions.js b/front-ui/app/components/itemMultiMediaDescriptions.js
new file mode 100644
index 0000000..4b5db3b
--- /dev/null
+++ b/front-ui/app/components/itemMultiMediaDescriptions.js
@@ -0,0 +1,20 @@
+var React = require('react');
+
+var ItemMultimediaDescriptions = React.createClass({
+
+
+    render: function() {
+        var self = this;      
+
+        return (    
+               
+        );
+    },
+
+    getInitialState: function () {
+			return { descriptions: this.props.descriptions }; 
+	}
+});
+
+
+module.exports = ItemMultimediaDescriptions;  
diff --git a/front-ui/app/components/itemWithDetailsPage.js b/front-ui/app/components/itemWithDetailsPage.js
new file mode 100644
index 0000000..223634b
--- /dev/null
+++ b/front-ui/app/components/itemWithDetailsPage.js
@@ -0,0 +1,25 @@
+var React = require('react'),
+    ItemMultiMediaDescriptions = require('./itemMultiMediaDescriptions');
+
+var ItemWithDetailsPage = React.createClass({
+
+    render: function() {
+
+        return (
+            <div className="item-with-details row-fluid center">
+            <div className="span3">
+                <ItemMultiMediaDescriptions descriptions={this.props.item.get('multi_media_descriptions')} />
+            </div>
+            <div className="span4">
+               quantitative descriptions
+            </div>
+            </div>
+            
+        ) ;       
+
+    }
+
+});
+
+
+module.exports = ItemWithDetailsPage; 
diff --git a/front-ui/app/components/singleItem.js b/front-ui/app/components/singleItem.js
index 69359cc..62a336b 100644
--- a/front-ui/app/components/singleItem.js
+++ b/front-ui/app/components/singleItem.js
@@ -1,5 +1,5 @@
-var React = require('react'),
-    Router = require('../router');
+var React = require('react');
+
 
 
 var SingleItem = React.createClass({
diff --git a/front-ui/app/views/itemDetailsView.js b/front-ui/app/views/itemDetailsView.js
index 29e48c5..6d14703 100644
--- a/front-ui/app/views/itemDetailsView.js
+++ b/front-ui/app/views/itemDetailsView.js
@@ -1,6 +1,7 @@
 var Backbone = require('backbone'),
     React = require('react'),
-    ItemWithDetails = require('../models/itemWithDetails');
+    ItemWithDetails = require('../models/itemWithDetails'),
+    ItemWithDetailsPage = require('../components/itemWithDetailsPage');
 
 var ItemDetailsView = Backbone.View.extend({
     el: '#content',
@@ -10,21 +11,19 @@ var ItemDetailsView = Backbone.View.extend({
     },
 
     render: function() {
+        var self = this;
         this.$el.html(this.template);
         var item = new ItemWithDetails({id: this.itemId });
         console.log(item);
 
-        item.fetch({success: function() {
-
-            /*var resultItems = items.map(function (a) { return a.attributes });
-            React.render(new ItemList({            
-                items: items,
-                itemClick: self.itemClick
-            }), self.$('.item-details-container').get(0)); */
-        console.log("great success!");
-            
-        return this; }
+        item.fetch({success: function() {            
+            React.render(new ItemWithDetailsPage({            
+                item: item
+            }), 
+            self.$('.item-details-container').get(0));            
+         }
         });
+        return this;
     }
 });
 
diff --git a/front-ui/build/index.html b/front-ui/build/index.html
index 9aa49cc..1e843e7 100644
--- a/front-ui/build/index.html
+++ b/front-ui/build/index.html
@@ -14,16 +14,14 @@
     <div class='col-md-12' id='header'></div>
 </div>
 <div class='row'>
-
     <div class='col-md-2' style='border: 1px solid red;'>
-    
         this comes herer
     </div>
     <div class='col-md-10' style='border: 1px solid blue;'>
     
-<div id='content'>
+	<div id='content'>
+	</div>
 </div>
-    </div>
 </div>
 
 </div>
diff --git a/front-ui/package.json b/front-ui/package.json
index 1d44b33..a2fa5b8 100644
--- a/front-ui/package.json
+++ b/front-ui/package.json
@@ -9,15 +9,16 @@
   "author": "",
   "license": "BSD-2-Clause",
   "devDependencies": {
-    "grunt-cli": "~0.1.13",
-    "grunt": "~0.4.5",
-    "grunt-contrib-watch": "~0.6.1",
-    "grunt-contrib-concat": "~0.5.0",
-    "grunt-browserify": "~3.2.1",
-    "grunt-contrib-connect": "~0.9.0",
     "browserify": "~8.1.0",
-    "reactify": "~0.17.1",
-    "grunt-contrib-uglify": "~0.7.0"
+    "grunt": "~0.4.5",
+    "grunt-browserify": "~3.2.1",
+    "grunt-cli": "~0.1.13",
+    "grunt-contrib-concat": "~0.5.0",
+    "grunt-contrib-connect": "~0.9.0",
+    "grunt-contrib-uglify": "~0.7.0",
+    "grunt-contrib-watch": "~0.6.1",
+    "merry-go-round": "^0.1.1",
+    "reactify": "~0.17.1"
   },
   "dependencies": {
     "react": "~0.12.2",