diff --git a/front-api/controllers/item.rb b/front-api/controllers/item.rb
index d4a27dc..bdf7b2e 100644
--- a/front-api/controllers/item.rb
+++ b/front-api/controllers/item.rb
@@ -21,7 +21,6 @@ end
 # gets single item for detailed display (like comments etc. ) # TODO: change when comments are added
 get '/item/:id' do |id_s| 
   item = Item.find(id_s.to_i)
-
   prepare_items_for_mass_display(item)
 end
 
diff --git a/front-ui/app/controllers/itemDetailsController.js b/front-ui/app/controllers/itemDetailsController.js
index b6d4e49..97f8009 100644
--- a/front-ui/app/controllers/itemDetailsController.js
+++ b/front-ui/app/controllers/itemDetailsController.js
@@ -1,9 +1,12 @@
 var StartPageSectionsView = require('../views/startPageSectionsView'),
-    StartPageItemsView = require('../views/startPageItemsView');
+    ItemDetailsView = require('../views/itemDetailsView');
 
-function ItemDetailsController(id,slug) {
-    alert("clicked on an item" + id + " with a slug " + slug);
-    
+function ItemDetailsController(id) {
+	var sectionsView = new StartPageSectionsView();
+    sectionsView.render();     
+
+    var itemDetailsView = new ItemDetailsView(id);
+    itemDetailsView.render(); 
 }
 
 module.exports = ItemDetailsController;
diff --git a/front-ui/app/css/items.css b/front-ui/app/css/items.css
index 1c75170..d1ab9f5 100644
--- a/front-ui/app/css/items.css
+++ b/front-ui/app/css/items.css
@@ -3,6 +3,7 @@
    text-align: center;
    vertical-align: center;
    display: inline-block;
+   cursor: pointer;
 
 }
 
diff --git a/front-ui/app/models/itemWithDetails.js b/front-ui/app/models/itemWithDetails.js
new file mode 100644
index 0000000..0883cf7
--- /dev/null
+++ b/front-ui/app/models/itemWithDetails.js
@@ -0,0 +1,9 @@
+var Backbone = require('backbone');
+var Globals = require('../globals');
+
+var ItemWithDetails = Backbone.Model.extend({
+	 urlRoot : Globals.ApiUrl + '/item'
+});
+
+module.exports = ItemWithDetails;
+
diff --git a/front-ui/app/views/itemDetailsView.js b/front-ui/app/views/itemDetailsView.js
new file mode 100644
index 0000000..29e48c5
--- /dev/null
+++ b/front-ui/app/views/itemDetailsView.js
@@ -0,0 +1,31 @@
+var Backbone = require('backbone'),
+    React = require('react'),
+    ItemWithDetails = require('../models/itemWithDetails');
+
+var ItemDetailsView = Backbone.View.extend({
+    el: '#content',
+    template: '<div class="item-details-container"></div>',
+    initialize: function(id) {
+        this.itemId = id;
+    },
+
+    render: function() {
+        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; }
+        });
+    }
+});
+
+module.exports = ItemDetailsView;
diff --git a/front-ui/app/views/startPageItemsView.js b/front-ui/app/views/startPageItemsView.js
index 6377305..5c96f25 100644
--- a/front-ui/app/views/startPageItemsView.js
+++ b/front-ui/app/views/startPageItemsView.js
@@ -12,7 +12,7 @@ var StartPageItemsView = Backbone.View.extend({
         //alert('StartPageItemsView init');
     },
     render: function() {
-        this.$el.append(this.template);
+        this.$el.html(this.template);
         var items = new ItemCollection();
         items.setClassificationType(0);
         items.setLimit(30);
@@ -32,9 +32,10 @@ var StartPageItemsView = Backbone.View.extend({
     },
     itemClick: function(item) {
 
+        // not sure if there is a better way to access the app object
+        // TODO: if found replace it ! 
         RIBICA.App.router.navigate(item.getFrontEndUrl(), {'trigger': true});
 
-
     }
 
 });
diff --git a/front-ui/app/views/startPageSectionsView.js b/front-ui/app/views/startPageSectionsView.js
index b592f68..6698155 100644
--- a/front-ui/app/views/startPageSectionsView.js
+++ b/front-ui/app/views/startPageSectionsView.js
@@ -5,7 +5,7 @@ var Backbone = require('backbone'),
     Section = require('../models/section');
 
 var StartPageSectionsView = Backbone.View.extend({
-    el: '#content',
+    el: '#header',
     template: '<div class="section-list-container"></div>',
     initialize: function() {
         //alert('StartPageSectionsView init');
diff --git a/front-ui/build/index.html b/front-ui/build/index.html
index 95334d6..1a40fec 100644
--- a/front-ui/build/index.html
+++ b/front-ui/build/index.html
@@ -5,7 +5,7 @@
  <meta name="fragment" content="!">
 </head>
 <body>
-
+<div id='header'></div>
 <div id='content'>
 </div>
 <script src='ribica.js' type='text/javascript'></script>