diff --git a/front-ui/app/components/cart/cartIcon.js b/front-ui/app/components/cart/cartIcon.js
index c9d31fa..e61fc5f 100644
--- a/front-ui/app/components/cart/cartIcon.js
+++ b/front-ui/app/components/cart/cartIcon.js
@@ -2,6 +2,7 @@ var React = require('react');
 var CartStore = require('../../stores/cartStore.js');
 var CartActions = require('../../actions/cartActions.js');
 var NavigationActions = require('../../actions/navigationActions.js');
+var LoginStatus = require('../shared/loginStatus');
 
 
 
@@ -16,10 +17,13 @@ var CartIcon = React.createClass({
   	  var textNotificationStyle = (this.state.count > 0)  ? { display: 'inline-block'} : { display: 'none'} ;
 
       return (
-      	  <div className="shopping-cart-icon" onClick={this._onClick}>
-          	<i style={cartStyle} className="fa fa-shopping-cart"></i>
-          	<div style={textNotificationStyle} className="shopping-cart-notification-text">{this.state.count}</div>
-          </div>
+
+         <ul className="nav navbar-nav navbar-right">
+                            <li><LoginStatus /></li>
+                            <li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderLeft: 'solid lightgray 1px', paddingBottom: 22}}><a ><div className="mycart"><span>{this.state.count}</span></div></a></li>
+                            <li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', paddingBottom: 2}}><a href="#">0,00 KM</a></li>
+                            <li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderRight: 'solid lightgray 1px'}}><a style={{marginLeft: 20, marginBottom: 10, marginRight: 15}} className="mybutton" href="#">Završi narudžbu</a></li>                            
+          </ul>
         );
   },
 
diff --git a/front-ui/app/components/rootApp.js b/front-ui/app/components/rootApp.js
index bc94157..319d16f 100644
--- a/front-ui/app/components/rootApp.js
+++ b/front-ui/app/components/rootApp.js
@@ -42,38 +42,36 @@ var RootApp = React.createClass({
             return (<div>loading...</div>);
         }
 
-        return (
-<div className="container">
-    <div className='page-header'>
-        <h1 className="main-heading">
-
-        <Link to="app"><img src="https://res.cloudinary.com/lfvt7ps2n/image/upload/c_scale,w_132/v1426226452/ribica-ispunjava-zelje_nng0gn.png" /></Link>
-
-        </h1>
-        <div style=  {{float:'right'}}>
-            <div style={{display: 'inline-block'}}>
-                <Link to="korpa">Završi narudžbu</Link><CartIcon /> | &nbsp;
+        return ( 
+<div className="container-fluid">
+    <div>
+        <div className="col-lg-12 hidden-sm hidden-xs " style={{height: 80, background: 'none', marginBottom: '0px !important'}} id="mybody">
+            <div style={{padding: '15px 15px'}} className="col-lg-3 col-md-3 col-sm-3 col-xs-3">
+                <Link to="app"><img height={50} src="https://res.cloudinary.com/du5pdibul/image/upload/v1428813560/logo_h5f9yp.png" /></Link>
             </div>
-            <LoginStatus />
+            <div style={{padding: '15px 15px'}} className="col-lg-9 col-md-9 hidden-sm hidden-xs">
+                <nav style={{background: 'none', border: 'none', marginBottom: '0px !important'}} className="navbar mytopnav">
+                    <div className="container-fluid">
+                        <CartIcon />
+                    </div>
+                </nav>
+            </div>
+        </div>
+        <div style={{margin: '0 !important'}} className="clearfix" >
         </div>
     </div>
-    <div className='row'>
-        <div className='col-md-8' id='header'>
-            <MenuItemListComponent />
-            </div>
+    <div>
+        <MenuItemListComponent />
+    </div>
 
-        <div className="col-md-4">
-            <SearchBox />
-        </div>
-        </div>
-
-        <div className='row'>
+     <div className='row'>
             <RouteHandler />
-        </div>
-
     </div>
+</div>
+);
+
+
 
-            );
     }
 });
 
diff --git a/front-ui/app/components/shared/loginStatus.js b/front-ui/app/components/shared/loginStatus.js
index df7fa10..327a3ff 100644
--- a/front-ui/app/components/shared/loginStatus.js
+++ b/front-ui/app/components/shared/loginStatus.js
@@ -37,9 +37,9 @@ var LoginStatus = React.createClass({
       var content; 
 
       if(this.state.loggedIn){
-          content = (<div style={{display: 'inline-block'}}>Dobrodosli, {this.state.user.first_name} {this.state.user.last_name} | <a onClick={this.logout}>Odjavite se</a></div>)
+          content = (<div style={{display: 'inline-block', paddingTop: '18px', paddingRight: '30px'}}>{this.state.user.first_name} {this.state.user.last_name}  <a onClick={this.logout} style={{ paddingLeft: '30px' }}>Odjavite se</a></div>)
       } else {
-          content = (<div style={{display: 'inline-block'}}><Link to="registracija">Registracija</Link> | <Link to="login">Prijava</Link></div>)      
+          content = (<div style={{display: 'inline-block', paddingTop: '18px', paddingRight: '30px'}}><Link to="registracija" style={{ paddingRight: '30px' }}>Registracija</Link>  <Link to="login">Prijava</Link></div>)      
       }
 
       return content;
diff --git a/front-ui/app/css/main.css b/front-ui/app/css/main.css
index e0888ab..c5f8453 100644
--- a/front-ui/app/css/main.css
+++ b/front-ui/app/css/main.css
@@ -1,29 +1,445 @@
-body {
-    /*background-image: url(https://res.cloudinary.com/lfvt7ps2n/image/upload/v1424608718/http_diapers.q-assets.com_images_body_bg_towkjs.gif);*/
-    background-image : url(https://res.cloudinary.com/lfvt7ps2n/image/upload/v1427091632/http_www.windeln.de_resources_img_bg_s76hro.svg);
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 12px;
-    height:100%;
-}
-.container {
-    background-color: #fff;
-    border: 1px solid black;
+@import url(http://fonts.googleapis.com/css?family=Roboto:400,300italic,300,100italic,100,400italic,500,500italic,700italic,700,900,900italic);
+
+/* site  */
+
+body{
+    background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813560/bg_prp6pz.jpg") fixed 100% 100%  ;
+    background-size: cover  ;
+    background-position: center ;
+    background-repeat: no-repeat;
+    
 }
 
-.section-cat-list {
-    background-color: white;
-    padding: 10px;
-    font-size: 15px;
-    width: 200px;
-    z-index: 10000;
-    border: 1px solid silver;
+#left-nave {
+
+background: blue;
+position: absolute;
+top: 0px;
+left: 0px;
+height: 100%;
+width: 250px;
+
+}
+.beba{
+    background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/beba-bg_wip7kj.png");
+        background-size: cover;
 }
 
-.main-heading {
+html, body { height: 100%; width: 100%; margin: 0; }
+
+h1 h2 h3 h4 h5{
+    font-family: 'Roboto', sans-serif;
+}
+
+.col-centered{
+    float: none;
+    margin: 5% auto;
+}
+
+.mybutton{
+    background-color: #00a8a8;
+    padding: 6px 22px !important;
+    display: block;
+    border-radius: 3px;
+    margin-top: 8px;
+    border: solid #06c3c3 1px;
+}
+
+
+.mybutton:hover  {
+    background-color: #06c3c3 !important;
+    color: black !important;
+    padding: 6px 22px !important;
+    margin-top: 8px;
+    display: block;
+    border-radius: 3px;
+    border: solid #06c3c3 1px;
+}
+
+a{
+    font-family: 'Roboto', sans-serif;
+    font-weight: bold;
+}
+.mynav li{
     display: inline-block;
+}
+.mynav {
+margin-top: 6px;
+
+  text-align: center;
+}
+.mynav a{
+text-decoration: none;
+color: black;
+}
+.mynav a:hover{
+text-decoration: none;
+color: #06c3c3;
+}
+.mytopnav li a{
+text-decoration: none;
+color: black;
+}
+.mytopnav li a:hover{
+text-decoration: none;
+color: #06c3c3;
+background: none;
+}
+
+.mynav li .mybutton {
+    background-color: #00a8a8;
+    padding: 4px 10px !important;
+    margin-top: 6px;
+    display: block;
+    border-radius: 3px;
+    border: solid #06c3c3 1px;
+    color: black;
+}
+.mynav li .mybutton:hover  {
+    background-color: #06c3c3;
+       padding: 4px 10px !important;
+    margin-top: 6px;
+    display: block;
+    border-radius: 3px;
+    border: solid #06c3c3 1px;
+}
+
+.productbox{
+-moz-box-shadow: 1px 4px 25px #000000;
+-webkit-box-shadow: 1px 4px 25px #000000;
+box-shadow: 1px 4px 25px #000000;
+height: auto;
+background-color: rgba(255, 255, 255, 0.6);
+margin-top: 10px;
+margin-bottom: 35px;
+}
+.productbox img{
+height: auto;
+border-bottom: solid gray 1px;
+width: 100%;
+
+
+}
+.productbox div{
+padding: 4px 10px;
+
+
+}
+.productbox a{
+color: black;
+    text-decoration: none;
+
+
+}
+.productbox a:hover{
+color: black;
+    text-decoration: none;
+text-decoration: underline;
+
+}
+.productbox div span{
+color:#06c3c3;
+margin-left: 8px;
+
+
+}
+#beba{
+    padding-left: 45px;
+    padding-right: 45px;
+    margin-left: -23px;
+    margin-right: -23px;
+    
+}
+#beba:hover{
+background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/beba-bg_wip7kj.png");
+background-position:  center ;
+background-size: 100% 100%;
+color: white;
+    background-repeat: no-repeat;
+}
+#dijete:hover{
+background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/dijete-bg_gff80o.png");
+background-position:  center ;
+background-size: 100% 100%;
+color: white;
+    background-repeat: no-repeat;
+}
+#dijete:hover a{
+
+color: white;
+
+}
+#mama:hover{
+background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/mama-bg_rqbnuo.png");
+background-position:  center ;
+background-size: 100% 100%;
+color: white;
+    background-repeat: no-repeat;
+}
+#mama:hover a{
+
+color: white;
+
+}
+#madein:hover{
+background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/made-in-bih-bg_uusqpm.png");
+background-position:  center ;
+background-size: 100% 100%;
+color: white;
+    background-repeat: no-repeat;
+}
+#madein:hover a{
+
+color: white;
+
+}
+#marka:hover{
+background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/marka-bg_cy8hpe.png");
+background-position:  center ;
+background-size: 100% 100%;
+color: white;
+    background-repeat: no-repeat;
+}
+#marka:hover a{
+
+color: white;
+
+}
+#akcija:hover{
+background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/akcija-bg_xtawus.png");
+background-position:  center ;
+background-size: 100% 100%;
+color: white;
+    background-repeat: no-repeat;
+}
+#akcija:hover a{
+
+color: white;
 
 }
 
-.error-message {
-    color: red;
+.mydropdown li:hover .sub-menu {
+    visibility: visible;
+    display: block;
 }
+
+
+.mydropdown:hover .dropdown-menu {
+    display: block;
+    visibility: visible;
+}
+
+.navbar-default{
+color: black;
+background-color: white;
+border-color: lightgray;
+}
+.navbar-default .navbar-nav > li > a{
+    color:black;
+    
+}
+
+.navbar-default .navbar-nav > li{
+padding-left:  16px;
+padding-right:  16px;
+
+}
+
+
+
+.navbar-default .navbar-nav > li > a:focus{
+   background-color: rgba(255, 255, 255, 0.6) !important;
+  -moz-box-shadow:  0px 0px 2px #999;
+-webkit-box-shadow: 0px 0px 2px #999;
+box-shadow: 0px 0px 2px #999;
+
+border: none !important;
+border-radius: 2px;
+}
+
+.navbar-default .navbar-nav > .dropdown > a .caret{
+    border-top-color: #fff;
+    border-bottom-color: #fff;
+}
+.navbar-default .navbar-brand{
+    color:#fff;
+}
+.menu-large {
+  position: static !important;
+}
+.megamenu{
+  padding: 20px 0px;
+  width:94%;
+  margin-left: 3%;
+   border-top: none !important;
+    -moz-box-shadow:  0px 1px 2px #999;
+-webkit-box-shadow: 0px 1px 2px #999;
+box-shadow: 0px 1px 2px #999;
+}
+.megamenu> li > ul {
+  padding: 0;
+  margin: 0;
+}
+.megamenu> li > ul > li {
+  list-style: none;
+  padding-left: 10px;
+}
+.megamenu> li > ul > li > a {
+  display: block;
+  padding: 3px 20px;
+  clear: both;
+  font-weight: normal;
+  line-height: 1.428571429;
+  color: black;
+  white-space: normal;
+}
+.megamenu> li ul > li > a:hover,
+.megamenu> li ul > li > a:focus {
+  text-decoration: none;
+  color: #262626;
+  background-color: #f5f5f5;
+}
+.megamenu.disabled > a,
+.megamenu.disabled > a:hover,
+.megamenu.disabled > a:focus {
+  color: #999999;
+}
+.megamenu.disabled > a:hover,
+.megamenu.disabled > a:focus {
+  text-decoration: none;
+  background-color: transparent;
+  background-image: none;
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  cursor: not-allowed;
+}
+.megamenu.dropdown-header {
+  color: #428bca;
+  font-size: 18px;
+
+}
+.dropdown-header p {
+border-bottom: solid 1.5px lightgray !important;
+margin-bottom: 2px;
+text-transform: uppercase;
+color: black;
+font-family: 'Roboto', sans-serif;
+    font-weight: 500;
+    font-size: 16px;
+}
+.mycart{
+    position: absolute;
+background: url("https://res.cloudinary.com/du5pdibul/image/upload/v1428813559/cart-icon_p9u63r.png");
+background-position:  center center;
+background-size: cover;
+
+    background-repeat: no-repeat;
+    width: 42px;
+    height: 44px;
+    padding-bottom: 0px;
+    right:-14px;
+    bottom: -15px;
+        
+}
+.mycart span{
+position: absolute;
+left: 13.4px;
+top: 4px;
+color: black;
+}
+.mycart span:hover{
+
+color: white;
+}
+#myhome{
+    border-bottom: solid #06c3c3 1px;
+}
+ #myhome-hover:hover  {
+    border-bottom: solid #06c3c3 1px;
+    
+}
+
+
+
+.sidebar ul{
+    list-style: none;
+}
+.sidebar li{
+    margin-left:10px;
+    margin-bottom: 5px;
+    color:black;
+    padding: 10px;
+    border-bottom: solid 1px lightgray;
+    
+}
+.sidebar li a{
+text-decoration: none;
+    color:black;
+}
+.sidebar li a:hover{
+
+    color:#06c3c3;
+}
+
+@media (max-width: 768px) {
+  .megamenu{
+    margin-left: 0 ;
+    margin-right: 0 ;
+  }
+  .megamenu> li {
+    margin-bottom: 30px;
+  }
+  .megamenu> li:last-child {
+    margin-bottom: 0;
+  }
+  .megamenu.dropdown-header {
+    padding: 3px 15px !important;
+ 
+  }
+  .navbar-nav .open .dropdown-menu .dropdown-header{
+    color:#fff;
+  }
+}
+
+
+@media (max-width: 1000px) {
+    .navbar-header {
+        float: none;
+    }
+    .navbar-toggle {
+        display: block;
+        
+    }
+    .navbar-collapse {
+        
+        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+        border-top:none !important;
+    }
+    .navbar-collapse.collapse {
+        display: none!important;
+    }
+
+    .navbar-nav>li {
+        float: none;
+        
+    }
+    .navbar-nav>ul {
+        margin-bottom:  0px;
+        
+    }
+    .navbar-nav>li>a {
+        padding-top: 10px;
+        padding-bottom: 10px;
+        
+    }
+    .navbar-text {
+        float: none;
+        margin: 15px 0;
+    }
+    /* since 3.1.0 */
+    .navbar-collapse.collapse.in { 
+        display: block!important;
+    }
+    .collapsing {
+        overflow: hidden!important;
+    }
+}
\ No newline at end of file
diff --git a/front-ui/build/index.html b/front-ui/build/index.html
index 75d4bd8..18e595e 100644
--- a/front-ui/build/index.html
+++ b/front-ui/build/index.html
@@ -1,7 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>ribica.ba - sve za vas evlad</title>
+        <title>ribica.ba - ispunjava zelje</title>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
         <link rel='stylesheet' type='text/css' href='/ribica.css'>
         <meta charset="UTF-8">