diff --git a/back-office/app/models/brand.rb b/back-office/app/models/brand.rb
new file mode 100644
index 0000000..c7ebc71
--- /dev/null
+++ b/back-office/app/models/brand.rb
@@ -0,0 +1,3 @@
+class Brand < ActiveRecord::Base
+    has_many :items
+end
diff --git a/back-office/app/models/item.rb b/back-office/app/models/item.rb
index 016389e..a59816b 100644
--- a/back-office/app/models/item.rb
+++ b/back-office/app/models/item.rb
@@ -3,6 +3,7 @@ class Item < ActiveRecord::Base
   has_many :multi_media_descriptions
   belongs_to :sub_category
   belongs_to :supplier
+  belongs_to :brand
   has_and_belongs_to_many :item_groups,                                                       :join_table => 'item_item_groups'
 
   validates_presence_of :name, :description, :list_price, :current_input_price, :tags, :unit_id, :code, :sub_category_id, :weight, :supplier_id
diff --git a/front-api/controllers/item.rb b/front-api/controllers/item.rb
index d491405..4cdfc54 100644
--- a/front-api/controllers/item.rb
+++ b/front-api/controllers/item.rb
@@ -4,7 +4,8 @@ def prepare_items_for_mass_display(items)
      :include => [      
       :unit ,
       :multi_media_descriptions ,
-      :sub_category
+      :sub_category,
+      :brand
   ])
 end
 
@@ -94,4 +95,4 @@ get '/item/item_group/:item_group_id/offset/:offset/limit/:limit' do |item_group
 
   items = ItemGroup.find(item_group_id).all_items(offset, limit)
   prepare_items_for_mass_display(items)
-end
\ No newline at end of file
+end
diff --git a/front-api/db/migrate/20150328132019_create_brands.rb b/front-api/db/migrate/20150328132019_create_brands.rb
new file mode 100644
index 0000000..200961b
--- /dev/null
+++ b/front-api/db/migrate/20150328132019_create_brands.rb
@@ -0,0 +1,9 @@
+class CreateBrands < ActiveRecord::Migration
+  def change 
+      create_table :brands do |t|
+          t.string :name
+      end
+
+      add_column :items, :brand_id, :integer
+  end
+end
diff --git a/front-api/db/schema.rb b/front-api/db/schema.rb
index 59ad6a6..f4a1995 100644
--- a/front-api/db/schema.rb
+++ b/front-api/db/schema.rb
@@ -11,11 +11,15 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 20150324044314) do
+ActiveRecord::Schema.define(version: 20150328132019) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
 
+  create_table "brands", force: :cascade do |t|
+    t.string "name"
+  end
+
   create_table "carts", force: :cascade do |t|
     t.integer  "user_id"
     t.boolean  "ordered",                 default: false
@@ -125,6 +129,7 @@ ActiveRecord::Schema.define(version: 20150324044314) do
     t.decimal  "weight",                                 precision: 5, scale: 3
     t.integer  "supplier_id"
     t.integer  "delivery_time_estimation_id"
+    t.integer  "brand_id"
   end
 
   create_table "link_banners", force: :cascade do |t|
diff --git a/front-api/models/brand.rb b/front-api/models/brand.rb
new file mode 100644
index 0000000..c7ebc71
--- /dev/null
+++ b/front-api/models/brand.rb
@@ -0,0 +1,3 @@
+class Brand < ActiveRecord::Base
+    has_many :items
+end
diff --git a/front-api/models/item.rb b/front-api/models/item.rb
index 25a6904..dbba0c2 100644
--- a/front-api/models/item.rb
+++ b/front-api/models/item.rb
@@ -1,5 +1,6 @@
 class Item < ActiveRecord::Base
   belongs_to :unit
+  belongs_to :brand
   has_many :multi_media_descriptions
   belongs_to :sub_category
 
diff --git a/front-ui/app/actions/menuItemActions.js b/front-ui/app/actions/menuItemActions.js
new file mode 100644
index 0000000..d07768a
--- /dev/null
+++ b/front-ui/app/actions/menuItemActions.js
@@ -0,0 +1,24 @@
+var AppDispatcher = require('../dispatcher/appDispatcher');
+var MenuItemConstants = require('../constants/menuItemConstants');
+
+// Define action methods
+var MenuItemActions = {
+  loadMenuItems: function() {
+    AppDispatcher.handleAction({
+      actionType: MenuItemConstants.LOAD_MENU_ITEMS,
+    })
+  },
+  setMenuItemHover: function(menuItem) {
+    AppDispatcher.handleAction({
+      actionType: MenuItemConstants.SET_MENU_ITEM_HOVER,
+      menuItem: menuItem
+    });
+  },
+  unsetMenuItemHover: function() {
+    AppDispatcher.handleAction({
+      actionType: MenuItemConstants.UNSET_MENU_ITEM_HOVER
+    });
+  }
+};
+
+module.exports = MenuItemActions;
diff --git a/front-ui/app/actions/navigationActions.js b/front-ui/app/actions/navigationActions.js
index 17a7d4a..be3c001 100644
--- a/front-ui/app/actions/navigationActions.js
+++ b/front-ui/app/actions/navigationActions.js
@@ -91,6 +91,19 @@ var NavigationActions = {
       actionType: NavigationConstants.CHANGE_URL,
       url: '/pretraga?q=' + q
     });
+  },
+  goToMenuItem: function(menuItem) {
+    var url = '';
+    if (menuItem.get) {
+        url = menuItem.get('url');
+    } else {
+        url = menuItem.url;
+    }
+
+    AppDispatcher.handleAction({
+      actionType: NavigationConstants.CHANGE_URL,
+      url: url
+    });
   }
 };
 
diff --git a/front-ui/app/components/account/login.js b/front-ui/app/components/account/login.js
index d3335a4..fd72fa8 100644
--- a/front-ui/app/components/account/login.js
+++ b/front-ui/app/components/account/login.js
@@ -52,8 +52,11 @@ var Login = React.createClass({
     renderErrorMessage: function(message){
         return (<div className='error-message'>{message}</div>)
     },
-    doLogin: function(e) {
-        
+    onLoginClick: function(e) {
+        this.doLogin();
+        e.preventDefault();
+    },
+    doLogin: function() {
         if(this.validate()) {
             var loginInfo = new LoginModel({
                 email: this.state.email,
@@ -61,10 +64,8 @@ var Login = React.createClass({
             });
 
             UserActions.userLogin(loginInfo);
-         
-        }
 
-        e.preventDefault();
+        }
     },
     renderLoginFailure: function() {
 
@@ -75,6 +76,12 @@ var Login = React.createClass({
 
         return (<div></div>)
     },
+    onKeyPress: function(e) {
+     var enterKeyCode = 13;
+        if(e.which == enterKeyCode) {
+            this.doLogin();
+        }
+    },
     render : function() {
         return (<div>
                 <div className="col-md-6">
@@ -86,18 +93,18 @@ var Login = React.createClass({
 
                 <div className="form-group">
                 <label for="email">Email adresa</label>
-                <input type="email" onChange={this.handleChange('email')} className="form-control" id="email" placeholder="Unesite email"></input>
+                <input type="email" onKeyPress={this.onKeyPress} onChange={this.handleChange('email')} className="form-control" id="email" placeholder="Unesite email"></input>
 
                 {this.getValidationMessages('email').map(this.renderErrorMessage)}
                 </div>
                 <div className="form-group">
                 <label for="password">Šifra</label>
-                <input type="password" onChange={this.handleChange('password')} className="form-control" id="password" placeholder="Šifra"></input>
+                <input type="password" onKeyPress={this.onKeyPress} onChange={this.handleChange('password')} className="form-control" id="password" placeholder="Šifra"></input>
 
                 {this.getValidationMessages('password').map(this.renderErrorMessage)}
                 </div>
                 <div className="form-group">
-                <button type="button" onClick={this.doLogin} className="btn btn-success">Prijava</button>
+                <button type="button" onClick={this.onLoginClick} className="btn btn-success">Prijava</button>
                 </div>
                 </form>
                 </div>
diff --git a/front-ui/app/components/account/register.js b/front-ui/app/components/account/register.js
index adc364e..8b809db 100644
--- a/front-ui/app/components/account/register.js
+++ b/front-ui/app/components/account/register.js
@@ -32,6 +32,12 @@ var Register = React.createClass({
       myBabyOnTheWay: (e.currentTarget.value === "1" ? true: false)
     });
   },
+  onKeyPress: function(e) {
+      var enterKeyCode = 13;
+      if(e.which == enterKeyCode) {
+          this.doRegister();
+      }
+  },
   renderMonthSelector: function() {
     var months = ['Januar', 'Februar', 'Mart', 'April', 'Maj', 'Juni',
     'Juli','August','Septembar', 'Oktobar','Novembar','Decembar'];
@@ -194,7 +200,11 @@ var Register = React.createClass({
           loginState : UserStore.getLoginState()
       });
   },
-  register: function(e) {
+  onRegisterClick: function(e) {
+    this.doRegister();
+    e.preventDefault();
+  },
+  doRegister: function() {
     if(this.validate()) {
       var children = [];
       if (this.state.myBabyDetailsVisible) {
@@ -231,8 +241,6 @@ var Register = React.createClass({
 
       UserActions.registerUser(user);
     }
-
-    e.preventDefault();
   },
   successContinue: function(e) {
     NavigationActions.goToHome();
@@ -284,7 +292,7 @@ var Register = React.createClass({
         <div className="form-group">
             <label for="firstName" className="col-md-4 control-label">Ime</label>
             <div className="col-md-4">
-              <input type="text" onChange={this.handleChange('firstName')} className="form-control" id="firstName" placeholder="Ime"/>
+              <input type="text" onKeyPress={this.onKeyPress} onChange={this.handleChange('firstName')} className="form-control" id="firstName" placeholder="Ime"/>
               {this.getValidationMessages('firstName').map(this.renderErrorMessage)}
             </div>
         </div>
@@ -292,28 +300,28 @@ var Register = React.createClass({
         <div className="form-group">
             <label for="lastName" className="col-md-4 control-label">Prezime</label>
             <div className="col-md-4">
-              <input type="text" onChange={this.handleChange('lastName')} className="form-control" id="lastName" placeholder="Prezime"/>
+              <input type="text" onKeyPress={this.onKeyPress} onChange={this.handleChange('lastName')} className="form-control" id="lastName" placeholder="Prezime"/>
               {this.getValidationMessages('lastName').map(this.renderErrorMessage)}
             </div>
         </div>
         <div className="form-group">
             <label for="email" className="col-md-4 control-label">Email</label>
             <div className="col-md-4">
-              <input type="text" onChange={this.handleChange('email')} className="form-control" id="email" placeholder="Email Adresa"/>
+              <input type="text" onKeyPress={this.onKeyPress} onChange={this.handleChange('email')} className="form-control" id="email" placeholder="Email Adresa"/>
               {this.getValidationMessages('email').map(this.renderErrorMessage)}
             </div>
         </div>
         <div className="form-group">
             <label for="password" className="col-md-4 control-label">Šifra</label>
             <div className="col-md-4">
-              <input type="password"  onChange={this.handleChange('password')} className="form-control" id="password" placeholder="Šifra"/>
+              <input type="password" onKeyPress={this.onKeyPress} onChange={this.handleChange('password')} className="form-control" id="password" placeholder="Šifra"/>
               {this.getValidationMessages('password').map(this.renderErrorMessage)}
             </div>
         </div>
         <div className="form-group">
             <label for="password_confirmation" className="col-md-4 control-label">Potvrda šifre</label>
             <div className="col-md-4">
-              <input type="password" onChange={this.handleChange('passwordConfirmation')} className="form-control" id="password_confirmation" placeholder="Podvrda šifre"/>
+              <input type="password"  onKeyPress={this.onKeyPress} onChange={this.handleChange('passwordConfirmation')} className="form-control" id="password_confirmation" placeholder="Podvrda šifre"/>
 
 
               {this.getValidationMessages('passwordConfirmation').map(this.renderErrorMessage)}
@@ -335,7 +343,7 @@ var Register = React.createClass({
 
             </div>
             <div className="col-md-4">
-            <button onClick={this.register} type="button" className="btn btn-success btn-lg">
+            <button onClick={this.onRegisterClick} type="button" className="btn btn-success btn-lg">
             Registruj me
             </button>
             </div>
diff --git a/front-ui/app/components/items/itemWithDetailsPage.js b/front-ui/app/components/items/itemWithDetailsPage.js
index 3361fc5..63ef7f1 100644
--- a/front-ui/app/components/items/itemWithDetailsPage.js
+++ b/front-ui/app/components/items/itemWithDetailsPage.js
@@ -29,6 +29,7 @@ var ItemWithDetailsPage = React.createClass({
           <div className="col-md-7">
             <h3> {this.state.item.get('name')}</h3>
             <div>
+             <div className='h4'> {this.state.item.get('brand').name}</div>
              <div className='h4'> {this.state.item.get('list_price')} KM</div>
              <div className='h5'>{this.state.item.get('pricePerUnit')}</div>
              <div> {this.state.item.get('description')}</div>
diff --git a/front-ui/app/components/items/singleItem.js b/front-ui/app/components/items/singleItem.js
index 4a56217..0aeb1bb 100644
--- a/front-ui/app/components/items/singleItem.js
+++ b/front-ui/app/components/items/singleItem.js
@@ -25,6 +25,7 @@ var SingleItem = React.createClass({
         <div className="single_item"  onClick={itemClick}>
           <img src={firstImage.url} className="item_list_image" />
           <h1> { this.props.item.get('name') }</h1>
+          <div>{ this.props.item.get('brand')? this.props.item.get('brand').name : '' } </div>
           <div> { this.props.item.get('list_price') } KM </div>
         </div>  
         );
diff --git a/front-ui/app/components/rootApp.js b/front-ui/app/components/rootApp.js
index f3d8ae2..a75328b 100644
--- a/front-ui/app/components/rootApp.js
+++ b/front-ui/app/components/rootApp.js
@@ -1,5 +1,5 @@
 var React = require('react'),
-    SectionsListComponent = require('./shared/sectionsListComponent'),
+    MenuItemListComponent = require('./shared/menuItemListComponent'),
     Router = require('react-router'),
     Link = Router.Link,
     RouteHandler = Router.RouteHandler,
@@ -57,7 +57,7 @@ var RootApp = React.createClass({
     </div>
     <div className='row'>
         <div className='col-md-8' id='header'>
-            <SectionsListComponent />
+            <MenuItemListComponent />
             </div>
 
         <div className="col-md-4">
diff --git a/front-ui/app/components/shared/menuItemListComponent.js b/front-ui/app/components/shared/menuItemListComponent.js
new file mode 100644
index 0000000..43d421b
--- /dev/null
+++ b/front-ui/app/components/shared/menuItemListComponent.js
@@ -0,0 +1,93 @@
+var React = require('react'),
+    MenuItemCollection = require('../../models/menuItemCollection'),
+    MenuItem = require('../../models/menuItem'),
+    Backbone = require('backbone'),
+    NavigationStore = require('../../stores/navigationStore'),
+    MenuItemStore = require('../../stores/menuItemStore'),
+    MenuItemActions = require('../../actions/menuItemActions'),
+    NavigationActions = require('../../actions/navigationActions');
+
+Backbone.$ = $;
+
+var MenuItemListComponent = React.createClass({
+
+    _onChange: function () {
+      if (this.isMounted()) {
+        this.setState(MenuItemStore.getState());
+      }
+    },
+  
+    getInitialState: function() {
+      return MenuItemStore.getState();
+    },
+
+    componentDidMount: function() {
+      MenuItemStore.addChangeListener(this._onChange);
+      MenuItemActions.loadMenuItems();
+    },
+    onMouseOver: function(menuItem) {
+      MenuItemActions.setMenuItemHover(menuItem);
+    },
+    onMouseOut: function() {
+      MenuItemActions.unsetMenuItemHover();
+    },
+    onMouseLeave: function() {
+      MenuItemActions.unsetMenuItemHover();
+    },
+    onMenuItemClick: function(menuItem) {
+      MenuItemActions.unsetMenuItemHover();
+      NavigationActions.goToMenuItem(menuItem);
+      event.preventDefault();
+    },
+    //onCategoryClick: function(category, section) {
+      //MenuItemActions.unsetSectionHover();
+      //NavigationActions.goToCategory(new Category(category), section);    
+      //event.preventDefault();
+    //},
+    //onSubcategoryClick: function(subcategory) {
+      //// implement in navigation actions
+      //// and call 
+      //// when ready
+      //return false;
+    //},
+    render: function() {
+      var self = this;
+      var style = {
+        position: 'relative'
+      };
+      var abStyle = {
+        position: 'absolute'
+      };
+      return (
+          <div>
+          <ul className='nav nav-pills'>
+          {this.state.menuItems.map(function(menuItem) {
+
+                                                       return (
+                                                         <li key={menuItem.get('id')} onMouseLeave={self.onMouseOut} onMouseOver={self.onMouseOver.bind(self, menuItem)} role='presentation' style={style}>
+                                                         <a href="#"  onClick={self.onMenuItemClick.bind(self, menuItem)} >
+                                                         { menuItem.get('title') }
+
+                                                         </a>
+                                                         <div style={abStyle} className={menuItem.get('id') !== self.state.hoveredMenuItem ? "hide section-cat-list": "section-cat-list"}  >
+
+                                                         <ul  >
+                                                         {menuItem.get('menu_sub_items').map(function(menuSubItem) {
+                                                                                                             return (
+                                                                                                               <li key={menuSubItem.id}>
+                                                                                                               <a onClick={self.onMenuItemClick.bind(self, menuSubItem)}>{menuSubItem.title}</a>
+                                                                                                               </li>
+                                                                                                               )
+                                                                                                           })}
+                                                       </ul>
+                                                         </div>
+                                                         </li>
+                                                         )
+                                                     })}
+      </ul>
+        </div>
+        );
+    }
+});
+
+module.exports = MenuItemListComponent;
diff --git a/front-ui/app/constants/menuItemConstants.js b/front-ui/app/constants/menuItemConstants.js
new file mode 100644
index 0000000..72ac8bc
--- /dev/null
+++ b/front-ui/app/constants/menuItemConstants.js
@@ -0,0 +1,8 @@
+var keyMirror = require('react/lib/keyMirror');
+
+// Define action constants
+module.exports = keyMirror({
+  LOAD_MENU_ITEMS: null,
+  SET_MENU_ITEM_HOVER: null,
+  UNSET_MENU_ITEM_HOVER: null
+});
diff --git a/front-ui/app/models/item.js b/front-ui/app/models/item.js
index 7534dfe..861df83 100644
--- a/front-ui/app/models/item.js
+++ b/front-ui/app/models/item.js
@@ -2,8 +2,10 @@ var Backbone = require('backbone');
 var Globals = require('../globals');
 
 var Item = Backbone.Model.extend({
-	 urlRoot : Globals.ApiUrl + '/item',
-
+    urlRoot : Globals.ApiUrl + '/item',
+    defaults : {
+        brand: {}
+    }
 
 	
 
diff --git a/front-ui/app/models/itemWithDetails.js b/front-ui/app/models/itemWithDetails.js
index 8840940..56648fa 100644
--- a/front-ui/app/models/itemWithDetails.js
+++ b/front-ui/app/models/itemWithDetails.js
@@ -15,6 +15,9 @@ var ItemWithDetails = Backbone.Model.extend({
             var descriptionSuffix = this.get('unit').description_suffix;
             return (+pricePerUnit).toString() + " KM " + descriptionSuffix;
         }
+    },
+    defaults : {
+        brand: {}
     }
 
 });
diff --git a/front-ui/app/models/menuItemCollection.js b/front-ui/app/models/menuItemCollection.js
index 674eb36..bd66009 100644
--- a/front-ui/app/models/menuItemCollection.js
+++ b/front-ui/app/models/menuItemCollection.js
@@ -4,7 +4,7 @@ var Backbone = require('backbone'),
 
 var MenuItemCollection = Backbone.Collection.extend({
     model: MenuItem,
-    url: Globals.ApiUrl + '/menu_item'
+    url: Globals.ApiUrl + '/menuitem'
 });
 
 module.exports = MenuItemCollection;
diff --git a/front-ui/app/stores/menuItemStore.js b/front-ui/app/stores/menuItemStore.js
new file mode 100644
index 0000000..252bc00
--- /dev/null
+++ b/front-ui/app/stores/menuItemStore.js
@@ -0,0 +1,86 @@
+var AppDispatcher = require('../dispatcher/appDispatcher');
+var EventEmitter = require('events').EventEmitter;
+var MenuItemCollection = require('../models/menuItemCollection');
+var MenuItem = require('../models/menuItem');
+var MenuItemConstants = require('../constants/menuItemConstants');
+var _ = require('underscore');
+
+var menuItemState = {
+  menuItems : [],
+  hoveredMenuItem : ''
+};
+
+
+var loadMenuItems = function() { 
+  var menuItems = new MenuItemCollection();
+  menuItems.fetch({success: function() {
+    menuItemState.menuItems = menuItems.models;
+    // change will be called automatically when
+    // action is run but we need to emit it again
+    // when the data arive 
+    // it's a bit "unfluxy" but convenient.
+    // "true philosophy" would be to run another "data arrived" action
+    MenuItemStore.emitChange(); 
+  }});
+};
+
+var setHovered  = function(id) {
+  menuItemState.hoveredMenuItem = id;
+}
+
+
+// Extend MenuItemStore with EventEmitter to add eventing capabilities
+var MenuItemStore = _.extend({}, EventEmitter.prototype, {
+
+  // Return Single Item With Details 
+  getState: function() {
+    return menuItemState;
+  },
+    // Emit Change event
+    emitChange: function() {
+      console.log("Emmiting MenuItemStore change!");
+      this.emit('change');
+    },
+
+    // Add change listener
+    addChangeListener: function(callback) {
+      this.on('change', callback);
+    },
+
+    // Remove change listener
+    removeChangeListener: function(callback) {
+      this.removeListener('change', callback);
+    }
+});
+
+
+// Register callback with AppDispatcher
+AppDispatcher.register(function(payload) {
+  var action = payload.action;
+  var text;
+
+  switch(action.actionType) {
+
+    // Respond to SELECT_ITEM action
+    case MenuItemConstants.LOAD_MENU_ITEMS:
+      loadMenuItems();
+      break;
+
+    case MenuItemConstants.SET_MENU_ITEM_HOVER:
+      setHovered(action.menuItem.get('id'));
+      break;
+
+    case MenuItemConstants.UNSET_MENU_ITEM_HOVER:
+      setHovered('');
+      break;
+    default:
+      return true;
+  }
+
+  // If action was responded to, emit change event
+  MenuItemStore.emitChange();
+  return true;
+
+});
+
+module.exports = MenuItemStore;