diff --git a/application/modules/default/views/scripts/home/index-opendesktop-test.phtml b/application/modules/default/views/scripts/home/index-opendesktop-test.phtml
index 4783f869b..91292dc74 100755
--- a/application/modules/default/views/scripts/home/index-opendesktop-test.phtml
+++ b/application/modules/default/views/scripts/home/index-opendesktop-test.phtml
@@ -1,142 +1,139 @@
 <?php
 /**
  *  ocs-webserver
  *
  *  Copyright 2016 by pling GmbH.
  *
  *    This file is part of ocs-webserver.
  *
  *    This program is free software: you can redistribute it and/or modify
  *    it under the terms of the GNU Affero General Public License as
  *    published by the Free Software Foundation, either version 3 of the
  *    License, or (at your option) any later version.
  *
  *    This program is distributed in the hope that it will be useful,
  *    but WITHOUT ANY WARRANTY; without even the implied warranty of
  *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  *    GNU Affero General Public License for more details.
  *
  *    You should have received a copy of the GNU Affero General Public License
  *    along with this program.  If not, see <http://www.gnu.org/licenses/>.
  **/
 $this->headTitle($_SERVER['HTTP_HOST'], 'SET');
 $this->doctype(Zend_View_Helper_Doctype::XHTML1_RDFA);
 $this->headMeta()->appendProperty('og:url', 'www.opendesktop.org');
 $this->headMeta()->appendProperty('og:type', 'website');
 $this->headMeta()->appendProperty('og:title', 'opendesktop.org');
 $this->headMeta()->appendProperty('og:site_name','www.opendesktop.org');
 $this->headMeta()->appendProperty('og:description','A community where developers and artists share applications, themes and other content');
 $this->headMeta()->appendProperty('og:image','https://www.opendesktop.org/images/system/opendesktop-logo.png');
 
 $modelInfo = new Default_Model_Info();
 $this->comments = $modelInfo->getLatestComments(10);
 //$this->users = $modelInfo->getNewActiveMembers(18);
 //$this->supporters = $modelInfo->getNewActiveSupporters(9);
 //$this->plingproducts = $modelInfo->getNewActivePlingProduct(9);
 $this->productsThemesGTK = $modelInfo->getLastProductsForHostStores(5,"366,363,273,267,138,125,131,153,154,414,133");
 $this->productsThemesPlasma = $modelInfo->getLastProductsForHostStores(5,"365,119,123,266,114,118,349,417,101,100,111,422,423,446,417");
 $this->productsWindowmanager = $modelInfo->getLastProductsForHostStores(5,"117,267,139,143,142,140,141,144");
 $this->productsIconsCursors= $modelInfo->getLastProductsForHostStores(5,"386,107");
 $this->productsScreenshots= $modelInfo->getLastProductsForHostStores(5,"225,445");
 $this->productsApps = $modelInfo->getLastProductsForHostStores(5,233);
 $this->productsAddons = $modelInfo->getLastProductsForHostStores(5,"152");
 $this->productsWallpapersOriginal = $modelInfo->getLastProductsForHostStores(5,"295,158",null,true);
 $this->productsWallpapers = $modelInfo->getLastProductsForHostStores(5,"295,158",null,false);
 $this->countSupporters = $modelInfo->getCountActiveSupporters();
 
 $featuredProducts = $modelInfo->getFeaturedProductsForHostStores(100);
 if ($featuredProducts->getTotalItemCount()) {
     $request = Zend_Controller_Front::getInstance()->getRequest();
     $offset = (int)$request->getParam('page');
     $irandom = rand(1,$featuredProducts->getTotalItemCount());
     $featuredProducts->setItemCountPerPage(1);
     $featuredProducts->setCurrentPageNumber($irandom);
     $this->featureProducts = $featuredProducts;
 }
 
 $helperBuildMemberUrl = new Default_View_Helper_BuildMemberUrl();
 $helperImage = new Default_View_Helper_Image();
 $helpPrintDate = new Default_View_Helper_PrintDate();
 
-
-
-
-
 $item;
 foreach ($this->featureProducts as $i) {
    $item = $i;
    break;
 }
 $feature = array(
     'project_id' => $item['project_id'],
     'member_id' =>  $item['member_id'],
     'username' =>  $item['username'],
     'profile_image_url' =>  $item['profile_image_url'],
     'featured' =>  $item['featured'],
     'description' =>  $item['description'],
     'image_small' =>  $item['image_small'],
     'laplace_score' =>  $item['laplace_score'],
     'count_likes' =>  $item['count_likes'],
     'count_dislikes' =>  $item['count_dislikes'],
     'changed_at' =>  $item['changed_at'],
     'created_at' =>  $item['created_at'],
     'count_comments' =>  $item['count_comments']
 );
 $response = array(
     "productsThemesGTK" => Zend_Json::encode($this->productsThemesGTK),
     "productsThemesPlasma" => Zend_Json::encode($this->productsThemesPlasma),
     "productsWindowmanager" => Zend_Json::encode($this->productsWindowmanager),
     "productsIconsCursors" => Zend_Json::encode($this->productsIconsCursors),
     "productsScreenshots" => Zend_Json::encode($this->productsScreenshots),
     "productsApps" => Zend_Json::encode($this->productsApps),
     "productsAddons" => Zend_Json::encode($this->productsAddons),
     "productsWallpapersOriginal" => Zend_Json::encode($this->productsWallpapersOriginal),
     "productsWallpapers" => Zend_Json::encode($this->productsWallpapers),
     "featureProducts" => Zend_Json::encode($feature)
 );
 
 
 ?>
 <link type="text/css" rel="stylesheet" href="/theme/react/assets/css/homepage.css"/>
 
 <main id="explore-content" class="startpage-store">
 
     <div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 sidebar-left">
       <?php  echo $this->render('explore/partials/filter.phtml'); ?>
     </div>
 
     <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12  content">
       <div id="main-content"></div>
       <script type="text/javascript">
-        var data =<?php echo Zend_Json::encode($response)?>;
+        var data = <?php echo Zend_Json::encode($response)?>;
+        var featuredProduct = <?php echo Zend_Json::encode($feature)?>;
       </script>
       <script src="/theme/react/opendesktop-home.js" type="text/javascript"></script>
     </div>
 
     <div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 sidebar-right">
       <aside  id="explore-sidebar" >
         <?php
             echo $this->render('/home/partials/common_rightsidebar.phtml');
         ?>
         <div>
             <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
             <!-- Responsive New Displayblock -->
             <ins class="adsbygoogle"
                  style="display:block"
                  data-ad-client="ca-pub-1150932386931372"
                  data-ad-slot="1024407251"
                  data-ad-format="auto"></ins>
             <script>
             (adsbygoogle = window.adsbygoogle || []).push({});
             </script>
         </div>
       </aside>
     </div>
 
   <div class="tooltip_templates" style="display:none">
       <span id="tooltip_content">
           <i class="fa fa-spinner"></i>
       </span>
   </div>
 
 </main>
diff --git a/httpdocs/theme/react/app-opendesktop-home/app.js b/httpdocs/theme/react/app-opendesktop-home/app.js
index 8337add3b..c0edb587f 100644
--- a/httpdocs/theme/react/app-opendesktop-home/app.js
+++ b/httpdocs/theme/react/app-opendesktop-home/app.js
@@ -1,255 +1,256 @@
 class App extends React.Component {
   constructor(props){
   	super(props);
   	this.state = {
       loading:true
     };
     this.initHomePage = this.initHomePage.bind(this);
     this.updateDimensions = this.updateDimensions.bind(this);
     this.convertDataObject = this.convertDataObject.bind(this);
   }
 
 
   componentWillMount() {
     this.updateDimensions();
   }
 
   componentWillUnmount(){
     window.removeEventListener("resize", this.updateDimensions);
     window.removeEventListener("orientationchange",this.updateDimensions);
   }
 
   componentDidMount() {
+    console.log(window.featuredProduct);
     this.initHomePage();
   }
 
   initHomePage(){
     window.addEventListener("resize", this.updateDimensions);
     window.addEventListener("orientationchange",this.updateDimensions);
 
     let env = "live";
     if (location.hostname.endsWith('cc')) {
       env = "test";
     } else if (location.hostname.endsWith('localhost')) {
       env = "test";
     }
     this.setState({env:env},function(){
       this.convertDataObject();
     });
   }
 
   updateDimensions(){
     const width = window.innerWidth;
     let device;
     if (width >= 910){
       device = "large";
     } else if (width < 910 && width >= 610){
       device = "mid";
     } else if (width < 610){
       device = "tablet";
     }
     this.setState({device:device});
   }
 
   convertDataObject() {
     let productGroupsArray = [];
     for (var i in window.data) {
       if (i !== "comments"){
         const productGroup = {
           title:i,
           products:JSON.parse(window.data[i])
         }
         productGroupsArray.push(productGroup);
       }
     }
     this.setState({productGroupsArray:productGroupsArray,loading:false});
   }
 
   render(){
     let productCarouselsContainer;
     if (this.state.loading === false){
       productCarouselsContainer = this.state.productGroupsArray.map((pgc,index) => (
         <div key={index} className="section">
           <div className="container">
             <ProductCarousel
               products={pgc.products}
               device={this.state.device}
               title={pgc.title}
               link={'/'}
               env={this.state.env}
             />
           </div>
         </div>
       ));
     }
 
     return (
       <main id="opendesktop-homepage">
         <div id="featured-product">
           <div className="container"></div>
         </div>
         {productCarouselsContainer}
       </main>
     )
   }
 }
 
 
 class ProductCarousel extends React.Component {
   constructor(props){
   	super(props);
     let showRightArrow = false;
     if (this.props.products.length > 5){
       showRightArrow = true;
     }
   	this.state = {
       showRightArrow:showRightArrow,
       showLeftArrow:false
     };
     this.updateDimensions = this.updateDimensions.bind(this);
     this.animateProductCarousel = this.animateProductCarousel.bind(this);
   }
 
   componentWillMount() {
     window.addEventListener("resize", this.updateDimensions);
   }
 
   componentDidMount() {
     this.updateDimensions();
   }
 
   updateDimensions(){
     const containerWidth = $('#main-content').width();
     console.log(containerWidth);
     const containerNumber = Math.ceil(this.props.products / 5);
     console.log(containerNumber);
     const sliderWidth = containerWidth * containerNumber;
     console.log(sliderWidth);
     const itemWidth = containerWidth / 5;
     console.log(itemWidth);
     this.setState({
       sliderPosition:0,
       containerWidth:containerWidth,
       sliderWidth:sliderWidth,
       itemWidth:itemWidth
     });
   }
 
   animateProductCarousel(dir){
 
     let newSliderPosition = this.state.sliderPosition;
     if (dir === 'left'){
       newSliderPosition = this.state.sliderPosition - this.state.containerWidth;
     } else {
       newSliderPosition = this.state.sliderPosition + this.state.containerWidth;
     }
 
     this.setState({sliderPosition:newSliderPosition},function(){
 
       let showLeftArrow = true,
           showRightArrow = true;
       const endPoint = this.state.sliderWidth - this.state.containerWidth;
       if (this.state.sliderPosition <= 0){
         showLeftArrow = false;
       }
       if (this.state.sliderPosition >= endPoint){
         showRightArrow = false;
       }
 
       this.setState({
         showLeftArrow:showLeftArrow,
         showRightArrow:showRightArrow
       });
 
     });
 
   }
 
   render(){
 
     let carouselItemsDisplay;
     if (this.props.products && this.props.products.length > 0){
       carouselItemsDisplay = this.props.products.map((product,index) => (
         <ProductCarouselItem
           key={index}
           product={product}
           itemWidth={this.state.itemWidth}
           env={this.props.env}
         />
       ));
     }
 
     let rightArrowDisplay, leftArrowDisplay;
     if (this.state.showLeftArrow){
       leftArrowDisplay = (
         <div className="product-carousel-left">
           <a onClick={() => this.animateProductCarousel('left')} className="carousel-arrow arrow-left">
             <span className="glyphicon glyphicon-chevron-left"></span>
           </a>
         </div>
       );
     }
     if (this.state.showRightArrow){
       rightArrowDisplay = (
         <div className="product-carousel-right">
           <a onClick={() => this.animateProductCarousel('right')} className="carousel-arrow arrow-right">
             <span className="glyphicon glyphicon-chevron-right"></span>
           </a>
         </div>
       );
     }
 
     return (
       <div className="product-carousel">
         <div className="product-carousel-header">
           <h2><a href={this.props.link}>{this.props.title.split(/(?=[A-Z])/)} <span className="glyphicon glyphicon-chevron-right"></span></a></h2>
         </div>
         <div className="product-carousel-wrapper">
           {leftArrowDisplay}
           <div className="product-carousel-container">
             <div className="product-carousel-slider" style={{"width":this.state.sliderWidth,"left":"-"+this.state.sliderPosition + "px"}}>
               {carouselItemsDisplay}
             </div>
           </div>
           {rightArrowDisplay}
         </div>
       </div>
     )
   }
 }
 
 class ProductCarouselItem extends React.Component {
   constructor(props){
   	super(props);
   	this.state = {};
   }
 
   render(){
     let imageBaseUrl;
     if (this.props.env === 'live') {
       imageBaseUrl = 'cn.opendesktop.org';
     } else {
       imageBaseUrl = 'cn.pling.it';
     }
     return (
       <div className="product-carousel-item" style={{"width":this.props.itemWidth}}>
         <a href={"/p/"+this.props.product.project_id }>
           <figure>
             <img className="very-rounded-corners" src={'https://' + imageBaseUrl + '/cache/200x171/img/' + this.props.product.image_small} />
           </figure>
           <div className="product-info">
             <span className="product-info-title">{this.props.product.title}</span>
             <span className="product-info-user">{this.props.product.username}</span>
           </div>
         </a>
       </div>
     )
   }
 }
 
 
 
 ReactDOM.render(
     <App />,
     document.getElementById('main-content')
 );
diff --git a/httpdocs/theme/react/assets/css/homepage.css b/httpdocs/theme/react/assets/css/homepage.css
index 59c55a560..8c4b7f905 100644
--- a/httpdocs/theme/react/assets/css/homepage.css
+++ b/httpdocs/theme/react/assets/css/homepage.css
@@ -1 +1 @@
-.startpage-store{background-color:#f1f1f1}.startpage-store .sidebar-left{border:0}.startpage-store .content{padding:30px 15px 30px 0;min-width:400px !important;border-left:1px solid #ccc;background-color:white}.startpage-store .sidebar-right{padding:20px 0;min-width:auto !important}#opendesktop-homepage .container{width:100% !important;max-width:100% !important;padding:0}#featured-product{width:100%}#featured-product .container{width:100%}.product-carousel{padding-bottom:10px;border-bottom:1px solid #ccc}.product-carousel .product-carousel-header{height:auto;overflow:auto}.product-carousel .product-carousel-header h2{font-size:25px !important;float:left;display:block;width:auto;padding-right:20px;position:relative;width:auto !important;margin-bottom:20px}.product-carousel .product-carousel-header h2 a{color:#007aa6}.product-carousel .product-carousel-header h2 i,.product-carousel .product-carousel-header h2 span.glyphicon{display:inline-block;position:absolute;right:0;top:8px;font-size:16px}.product-carousel .product-carousel-wrapper{width:100%;height:120px;position:relative}.product-carousel .product-carousel-wrapper .product-carousel-left{position:absolute;top:0;left:0;height:100%}.product-carousel .product-carousel-wrapper .product-carousel-right{right:0;position:absolute;top:0;width:10px;height:100%}.product-carousel .product-carousel-wrapper .carousel-arrow{position:absolute;top:50%;width:50px;height:50px;margin-top:-35px;border-radius:100%;border:1px solid #ccc;background-color:white;z-index:10;margin-left:-25px;cursor:pointer;opacity:0;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out}.product-carousel .product-carousel-wrapper .carousel-arrow i,.product-carousel .product-carousel-wrapper .carousel-arrow span.glyphicon{position:absolute;top:50%;left:50%;margin-left:-7px;margin-top:-7px}.product-carousel .product-carousel-wrapper .carousel-arrow:active{background-color:#e6e6e6}.product-carousel .product-carousel-wrapper:hover .carousel-arrow{opacity:1}.product-carousel .product-carousel-container{width:100%;overflow:hidden;position:relative;height:120px}.product-carousel .product-carousel-container .product-carousel-slider{position:absolute;top:0;left:0;height:120px;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out}.product-carousel .product-carousel-container .product-carousel-item{float:left;height:120px}.product-carousel .product-carousel-container .product-carousel-item figure{margin:0;width:100%;float:left;margin-bottom:10px}.product-carousel .product-carousel-container .product-carousel-item figure img{height:48px;width:48px;float:left}.product-carousel .product-carousel-container .product-carousel-item .product-info span{display:block;float:left;width:100%;height:22px;line-height:22px}.product-carousel .product-carousel-container .product-carousel-item .product-info span.product-info-title{color:#007aa6;text-overflow:ellipsis;word-break:break-word;display:block;overflow:hidden;white-space:nowrap;padding-right:20px;font-size:16px}.product-carousel .product-carousel-container .product-carousel-item .product-info span.product-info-user{color:#666;font-size:15px}
\ No newline at end of file
+.startpage-store{background-color:#f1f1f1}.startpage-store .sidebar-left{border:0}.startpage-store .content{padding:15px 30px 0 30px;min-width:400px !important;border-left:1px solid #ccc;background-color:white}.startpage-store .sidebar-right{padding:20px 0;min-width:auto !important}#opendesktop-homepage .container{width:100% !important;max-width:100% !important;padding:0}#featured-product{width:100%}#featured-product .container{width:100%}.product-carousel{padding-bottom:10px;border-bottom:1px solid #ccc}.product-carousel .product-carousel-header{height:auto;overflow:auto}.product-carousel .product-carousel-header h2{font-size:25px !important;float:left;display:block;width:auto;padding-right:20px;position:relative;width:auto !important;margin-bottom:20px}.product-carousel .product-carousel-header h2 a{color:#007aa6}.product-carousel .product-carousel-header h2 i,.product-carousel .product-carousel-header h2 span.glyphicon{display:inline-block;position:absolute;right:0;top:8px;font-size:16px}.product-carousel .product-carousel-wrapper{width:100%;height:120px;position:relative}.product-carousel .product-carousel-wrapper .product-carousel-left{position:absolute;top:0;left:0;height:100%}.product-carousel .product-carousel-wrapper .product-carousel-right{right:0;position:absolute;top:0;width:10px;height:100%}.product-carousel .product-carousel-wrapper .carousel-arrow{position:absolute;top:50%;width:50px;height:50px;margin-top:-35px;border-radius:100%;border:1px solid #ccc;background-color:white;z-index:10;margin-left:-25px;cursor:pointer;opacity:0;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out}.product-carousel .product-carousel-wrapper .carousel-arrow i,.product-carousel .product-carousel-wrapper .carousel-arrow span.glyphicon{position:absolute;top:50%;left:50%;margin-left:-7px;margin-top:-7px}.product-carousel .product-carousel-wrapper .carousel-arrow:active{background-color:#e6e6e6}.product-carousel .product-carousel-wrapper:hover .carousel-arrow{opacity:1}.product-carousel .product-carousel-container{width:100%;overflow:hidden;position:relative;height:120px}.product-carousel .product-carousel-container .product-carousel-slider{position:absolute;top:0;left:0;height:120px;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out}.product-carousel .product-carousel-container .product-carousel-item{float:left;height:120px}.product-carousel .product-carousel-container .product-carousel-item figure{margin:0;width:100%;float:left;margin-bottom:10px}.product-carousel .product-carousel-container .product-carousel-item figure img{height:48px;width:48px;float:left}.product-carousel .product-carousel-container .product-carousel-item .product-info span{display:block;float:left;width:100%;height:22px;line-height:22px}.product-carousel .product-carousel-container .product-carousel-item .product-info span.product-info-title{color:#007aa6;text-overflow:ellipsis;word-break:break-word;display:block;overflow:hidden;white-space:nowrap;padding-right:20px;font-size:16px}.product-carousel .product-carousel-container .product-carousel-item .product-info span.product-info-user{color:#666;font-size:15px}
\ No newline at end of file
diff --git a/httpdocs/theme/react/assets/css/homepage.css.map b/httpdocs/theme/react/assets/css/homepage.css.map
index 9c4f263d1..2b43ceca3 100644
--- a/httpdocs/theme/react/assets/css/homepage.css.map
+++ b/httpdocs/theme/react/assets/css/homepage.css.map
@@ -1 +1 @@
-{"version":3,"sources":["homepage.less","/Users/davidnelband/Sites/git/ocs-webserver/httpdocs/theme/react/assets/less/elements.less"],"names":[],"mappings":"AAEA,iBACE,yBADF,gBAGE,eACE,SAJJ,gBAOE,UACE,wBAAA,CACA,eAAA,YACA,0BAAA,CACA,uBAXJ,gBAcE,gBACE,cAAA,CACA,cAAA,YAIJ,qBACE,YACI,UAAA,YACA,cAAA,YACA,UAIN,kBACE,WADF,iBAEE,YACE,WAIJ,kBACE,mBAAA,CACA,6BAFF,iBAIE,0BACE,WAAA,CACA,cANJ,iBAIE,yBAIE,IACE,cAAA,YACA,UAAA,CACA,aAAA,CACA,UAAA,CACA,kBAAA,CACA,iBAAA,CACA,UAAA,YACA,mBAhBN,iBAIE,yBAIE,GAUE,GACE,cAnBR,iBAIE,yBAIE,GAcE,GAtBN,iBAIE,yBAIE,GAeE,KAAI,WACF,oBAAA,CACA,iBAAA,CACA,OAAA,CACA,OAAA,CACA,eA5BR,iBAiCE,2BACE,UAAA,CACA,YAAA,CACA,kBApCJ,iBAiCE,0BAKE,wBACE,iBAAA,CACA,KAAA,CACA,MAAA,CACA,YA1CN,iBAiCE,0BAYE,yBACE,OAAA,CACA,iBAAA,CACA,KAAA,CACA,UAAA,CACA,YAlDN,iBAiCE,0BAoBE,iBACE,iBAAA,CACA,OAAA,CACA,UAAA,CACA,WAAA,CACA,gBAAA,CACA,kBAAA,CACA,qBAAA,CACA,sBAAA,CACA,UAAA,CACA,iBAAA,CACA,cAAA,CACA,SAAA,CCCF,mCAAA,CACA,gCAAA,CACA,8BAAA,CACA,4BDrEJ,iBAiCE,0BAoBE,gBAeE,GApEN,iBAiCE,0BAoBE,gBAgBE,KAAI,WACF,iBAAA,CACA,OAAA,CACA,QAAA,CACA,gBAAA,CACA,gBAGF,iBA5CJ,0BAoBE,gBAwBG,QACC,yBAIJ,iBAjDF,0BAiDG,MACC,iBACE,UApFR,iBAyFE,6BACE,UAAA,CACA,eAAA,CACA,iBAAA,CACA,aA7FJ,iBAyFE,4BAME,0BACE,iBAAA,CACA,KAAA,CACA,MAAA,CACA,YAAA,CCjCF,mCAAA,CACA,gCAAA,CACA,8BAAA,CACA,4BDrEJ,iBAyFE,4BAcE,wBACE,UAAA,CACA,aAzGN,iBAyFE,4BAcE,uBAIE,QACE,QAAA,CACA,UAAA,CACA,UAAA,CACA,mBA/GR,iBAyFE,4BAcE,uBAIE,OAME,KACE,WAAA,CACA,UAAA,CACA,WApHV,iBAyFE,4BAcE,uBAiBE,cACE,MACE,aAAA,CACA,UAAA,CACA,UAAA,CACA,WAAA,CACA,iBAEA,iBAvCR,4BAcE,uBAiBE,cACE,KAOG,oBACC,aAAA,CACA,sBAAA,CACA,qBAAA,CACA,aAAA,CACA,eAAA,CACA,kBAAA,CACA,kBAAA,CACA,eAGF,iBAlDR,4BAcE,uBAiBE,cACE,KAkBG,mBACC,UAAA,CACA"}
\ No newline at end of file
+{"version":3,"sources":["homepage.less","/Users/davidnelband/Sites/git/ocs-webserver/httpdocs/theme/react/assets/less/elements.less"],"names":[],"mappings":"AAEA,iBACE,yBADF,gBAGE,eACE,SAJJ,gBAOE,UACE,wBAAA,CACI,eAAA,YACA,0BAAA,CACA,uBAXR,gBAcE,gBACE,cAAA,CACA,cAAA,YAIJ,qBACE,YACI,UAAA,YACA,cAAA,YACA,UAIN,kBACE,WADF,iBAEE,YACE,WAIJ,kBACE,mBAAA,CACA,6BAFF,iBAIE,0BACE,WAAA,CACA,cANJ,iBAIE,yBAIE,IACE,cAAA,YACA,UAAA,CACA,aAAA,CACA,UAAA,CACA,kBAAA,CACA,iBAAA,CACA,UAAA,YACA,mBAhBN,iBAIE,yBAIE,GAUE,GACE,cAnBR,iBAIE,yBAIE,GAcE,GAtBN,iBAIE,yBAIE,GAeE,KAAI,WACF,oBAAA,CACA,iBAAA,CACA,OAAA,CACA,OAAA,CACA,eA5BR,iBAiCE,2BACE,UAAA,CACA,YAAA,CACA,kBApCJ,iBAiCE,0BAKE,wBACE,iBAAA,CACA,KAAA,CACA,MAAA,CACA,YA1CN,iBAiCE,0BAYE,yBACE,OAAA,CACA,iBAAA,CACA,KAAA,CACA,UAAA,CACA,YAlDN,iBAiCE,0BAoBE,iBACE,iBAAA,CACA,OAAA,CACA,UAAA,CACA,WAAA,CACA,gBAAA,CACA,kBAAA,CACA,qBAAA,CACA,sBAAA,CACA,UAAA,CACA,iBAAA,CACA,cAAA,CACA,SAAA,CCCF,mCAAA,CACA,gCAAA,CACA,8BAAA,CACA,4BDrEJ,iBAiCE,0BAoBE,gBAeE,GApEN,iBAiCE,0BAoBE,gBAgBE,KAAI,WACF,iBAAA,CACA,OAAA,CACA,QAAA,CACA,gBAAA,CACA,gBAGF,iBA5CJ,0BAoBE,gBAwBG,QACC,yBAIJ,iBAjDF,0BAiDG,MACC,iBACE,UApFR,iBAyFE,6BACE,UAAA,CACA,eAAA,CACA,iBAAA,CACA,aA7FJ,iBAyFE,4BAME,0BACE,iBAAA,CACA,KAAA,CACA,MAAA,CACA,YAAA,CCjCF,mCAAA,CACA,gCAAA,CACA,8BAAA,CACA,4BDrEJ,iBAyFE,4BAcE,wBACE,UAAA,CACA,aAzGN,iBAyFE,4BAcE,uBAIE,QACE,QAAA,CACA,UAAA,CACA,UAAA,CACA,mBA/GR,iBAyFE,4BAcE,uBAIE,OAME,KACE,WAAA,CACA,UAAA,CACA,WApHV,iBAyFE,4BAcE,uBAiBE,cACE,MACE,aAAA,CACA,UAAA,CACA,UAAA,CACA,WAAA,CACA,iBAEA,iBAvCR,4BAcE,uBAiBE,cACE,KAOG,oBACC,aAAA,CACA,sBAAA,CACA,qBAAA,CACA,aAAA,CACA,eAAA,CACA,kBAAA,CACA,kBAAA,CACA,eAGF,iBAlDR,4BAcE,uBAiBE,cACE,KAkBG,mBACC,UAAA,CACA"}
\ No newline at end of file
diff --git a/httpdocs/theme/react/assets/less/homepage.less b/httpdocs/theme/react/assets/less/homepage.less
index 3248cb821..693b37f54 100644
--- a/httpdocs/theme/react/assets/less/homepage.less
+++ b/httpdocs/theme/react/assets/less/homepage.less
@@ -1,187 +1,187 @@
 out: ../css/homepage.css, sourcemap: true, compress: true
 @import "elements.less";
 
 .startpage-store {
   background-color: #f1f1f1;
 
   .sidebar-left {
     border: 0;
   }
 
   .content {
-    padding: 30px 15px 30px 0;
-    min-width: 400px!important;
+    padding: 15px 30px 0 30px;
+    min-width: 400px !important;
     border-left: 1px solid #ccc;
     background-color: white;
   }
 
   .sidebar-right {
     padding: 20px 0;
     min-width: auto !important;
   }
 }
 
 #opendesktop-homepage {
   .container {
       width: 100% !important;
       max-width: 100% !important;
       padding: 0;
   }
 }
 
 #featured-product {
   width: 100%;
   .container {
     width: 100%;
   }
 }
 
 .product-carousel {
   padding-bottom: 10px;
   border-bottom: 1px solid #ccc;
 
   .product-carousel-header {
     height: auto;
     overflow: auto;
 
     h2 {
       font-size: 25px !important;
       float: left;
       display: block;
       width: auto;
       padding-right: 20px;
       position: relative;
       width: auto !important;
       margin-bottom: 20px;
 
       a {
         color: #007aa6;
       }
 
       i,
       span.glyphicon{
         display: inline-block;
         position: absolute;
         right: 0;
         top: 8px;
         font-size: 16px;
       }
     }
   }
 
   .product-carousel-wrapper {
     width: 100%;
     height: 120px;
     position: relative;
 
     .product-carousel-left {
       position: absolute;
       top: 0;
       left: 0;
       height: 100%;
     }
 
     .product-carousel-right {
       right:0;
       position: absolute;
       top: 0;
       width: 10px;
       height: 100%;
     }
 
     .carousel-arrow {
       position: absolute;
       top: 50%;
       width: 50px;
       height: 50px;
       margin-top: -35px;
       border-radius: 100%;
       border:1px solid #ccc;
       background-color: white;
       z-index: 10;
       margin-left: -25px;
       cursor: pointer;
       opacity: 0;
       .transition();
 
       i ,
       span.glyphicon {
         position: absolute;
         top: 50%;
         left: 50%;
         margin-left: -7px;
         margin-top: -7px;
       }
 
       &:active {
         background-color: darken(white,10%);
       }
     }
 
     &:hover {
       .carousel-arrow {
         opacity: 1;
       }
     }
   }
 
   .product-carousel-container {
     width: 100%;
     overflow: hidden;
     position: relative;
     height: 120px;
 
     .product-carousel-slider {
       position: absolute;
       top: 0;
       left: 0;
       height: 120px;
       .transition();
     }
 
     .product-carousel-item {
       float: left;
       height: 120px;
 
       figure {
         margin: 0;
         width: 100%;
         float: left;
         margin-bottom: 10px;
 
         img {
           height: 48px;
           width: 48px;
           float: left;
         }
       }
 
       .product-info {
         span {
           display: block;
           float: left;
           width: 100%;
           height: 22px;
           line-height: 22px;
 
           &.product-info-title {
             color: #007aa6;
             text-overflow: ellipsis;
             word-break: break-word;
             display: block;
             overflow: hidden;
             white-space: nowrap;
             padding-right: 20px;
             font-size: 16px;
           }
 
           &.product-info-user {
             color: #666;
             font-size: 15px;
           }
         }
       }
     }
   }
 
 }
diff --git a/httpdocs/theme/react/opendesktop-home.js b/httpdocs/theme/react/opendesktop-home.js
index 45e26165a..c6ff5ddb9 100644
--- a/httpdocs/theme/react/opendesktop-home.js
+++ b/httpdocs/theme/react/opendesktop-home.js
@@ -1,284 +1,285 @@
 class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       loading: true
     };
     this.initHomePage = this.initHomePage.bind(this);
     this.updateDimensions = this.updateDimensions.bind(this);
     this.convertDataObject = this.convertDataObject.bind(this);
   }
 
   componentWillMount() {
     this.updateDimensions();
   }
 
   componentWillUnmount() {
     window.removeEventListener("resize", this.updateDimensions);
     window.removeEventListener("orientationchange", this.updateDimensions);
   }
 
   componentDidMount() {
+    console.log(window.featuredProduct);
     this.initHomePage();
   }
 
   initHomePage() {
     window.addEventListener("resize", this.updateDimensions);
     window.addEventListener("orientationchange", this.updateDimensions);
 
     let env = "live";
     if (location.hostname.endsWith('cc')) {
       env = "test";
     } else if (location.hostname.endsWith('localhost')) {
       env = "test";
     }
     this.setState({ env: env }, function () {
       this.convertDataObject();
     });
   }
 
   updateDimensions() {
     const width = window.innerWidth;
     let device;
     if (width >= 910) {
       device = "large";
     } else if (width < 910 && width >= 610) {
       device = "mid";
     } else if (width < 610) {
       device = "tablet";
     }
     this.setState({ device: device });
   }
 
   convertDataObject() {
     let productGroupsArray = [];
     for (var i in window.data) {
       if (i !== "comments") {
         const productGroup = {
           title: i,
           products: JSON.parse(window.data[i])
         };
         productGroupsArray.push(productGroup);
       }
     }
     this.setState({ productGroupsArray: productGroupsArray, loading: false });
   }
 
   render() {
     let productCarouselsContainer;
     if (this.state.loading === false) {
       productCarouselsContainer = this.state.productGroupsArray.map((pgc, index) => React.createElement(
         "div",
         { key: index, className: "section" },
         React.createElement(
           "div",
           { className: "container" },
           React.createElement(ProductCarousel, {
             products: pgc.products,
             device: this.state.device,
             title: pgc.title,
             link: '/',
             env: this.state.env
           })
         )
       ));
     }
 
     return React.createElement(
       "main",
       { id: "opendesktop-homepage" },
       React.createElement(
         "div",
         { id: "featured-product" },
         React.createElement("div", { className: "container" })
       ),
       productCarouselsContainer
     );
   }
 }
 
 class ProductCarousel extends React.Component {
   constructor(props) {
     super(props);
     let showRightArrow = false;
     if (this.props.products.length > 5) {
       showRightArrow = true;
     }
     this.state = {
       showRightArrow: showRightArrow,
       showLeftArrow: false
     };
     this.updateDimensions = this.updateDimensions.bind(this);
     this.animateProductCarousel = this.animateProductCarousel.bind(this);
   }
 
   componentWillMount() {
     window.addEventListener("resize", this.updateDimensions);
   }
 
   componentDidMount() {
     this.updateDimensions();
   }
 
   updateDimensions() {
     const containerWidth = $('#main-content').width();
     console.log(containerWidth);
     const containerNumber = Math.ceil(this.props.products / 5);
     console.log(containerNumber);
     const sliderWidth = containerWidth * containerNumber;
     console.log(sliderWidth);
     const itemWidth = containerWidth / 5;
     console.log(itemWidth);
     this.setState({
       sliderPosition: 0,
       containerWidth: containerWidth,
       sliderWidth: sliderWidth,
       itemWidth: itemWidth
     });
   }
 
   animateProductCarousel(dir) {
 
     let newSliderPosition = this.state.sliderPosition;
     if (dir === 'left') {
       newSliderPosition = this.state.sliderPosition - this.state.containerWidth;
     } else {
       newSliderPosition = this.state.sliderPosition + this.state.containerWidth;
     }
 
     this.setState({ sliderPosition: newSliderPosition }, function () {
 
       let showLeftArrow = true,
           showRightArrow = true;
       const endPoint = this.state.sliderWidth - this.state.containerWidth;
       if (this.state.sliderPosition <= 0) {
         showLeftArrow = false;
       }
       if (this.state.sliderPosition >= endPoint) {
         showRightArrow = false;
       }
 
       this.setState({
         showLeftArrow: showLeftArrow,
         showRightArrow: showRightArrow
       });
     });
   }
 
   render() {
 
     let carouselItemsDisplay;
     if (this.props.products && this.props.products.length > 0) {
       carouselItemsDisplay = this.props.products.map((product, index) => React.createElement(ProductCarouselItem, {
         key: index,
         product: product,
         itemWidth: this.state.itemWidth,
         env: this.props.env
       }));
     }
 
     let rightArrowDisplay, leftArrowDisplay;
     if (this.state.showLeftArrow) {
       leftArrowDisplay = React.createElement(
         "div",
         { className: "product-carousel-left" },
         React.createElement(
           "a",
           { onClick: () => this.animateProductCarousel('left'), className: "carousel-arrow arrow-left" },
           React.createElement("span", { className: "glyphicon glyphicon-chevron-left" })
         )
       );
     }
     if (this.state.showRightArrow) {
       rightArrowDisplay = React.createElement(
         "div",
         { className: "product-carousel-right" },
         React.createElement(
           "a",
           { onClick: () => this.animateProductCarousel('right'), className: "carousel-arrow arrow-right" },
           React.createElement("span", { className: "glyphicon glyphicon-chevron-right" })
         )
       );
     }
 
     return React.createElement(
       "div",
       { className: "product-carousel" },
       React.createElement(
         "div",
         { className: "product-carousel-header" },
         React.createElement(
           "h2",
           null,
           React.createElement(
             "a",
             { href: this.props.link },
             this.props.title.split(/(?=[A-Z])/),
             " ",
             React.createElement("span", { className: "glyphicon glyphicon-chevron-right" })
           )
         )
       ),
       React.createElement(
         "div",
         { className: "product-carousel-wrapper" },
         leftArrowDisplay,
         React.createElement(
           "div",
           { className: "product-carousel-container" },
           React.createElement(
             "div",
             { className: "product-carousel-slider", style: { "width": this.state.sliderWidth, "left": "-" + this.state.sliderPosition + "px" } },
             carouselItemsDisplay
           )
         ),
         rightArrowDisplay
       )
     );
   }
 }
 
 class ProductCarouselItem extends React.Component {
   constructor(props) {
     super(props);
     this.state = {};
   }
 
   render() {
     let imageBaseUrl;
     if (this.props.env === 'live') {
       imageBaseUrl = 'cn.opendesktop.org';
     } else {
       imageBaseUrl = 'cn.pling.it';
     }
     return React.createElement(
       "div",
       { className: "product-carousel-item", style: { "width": this.props.itemWidth } },
       React.createElement(
         "a",
         { href: "/p/" + this.props.product.project_id },
         React.createElement(
           "figure",
           null,
           React.createElement("img", { className: "very-rounded-corners", src: 'https://' + imageBaseUrl + '/cache/200x171/img/' + this.props.product.image_small })
         ),
         React.createElement(
           "div",
           { className: "product-info" },
           React.createElement(
             "span",
             { className: "product-info-title" },
             this.props.product.title
           ),
           React.createElement(
             "span",
             { className: "product-info-user" },
             this.props.product.username
           )
         )
       )
     );
   }
 }
 
 ReactDOM.render(React.createElement(App, null), document.getElementById('main-content'));