diff --git a/upload/styles/cb_2014/layout/blocks/editor_pick/index_featured_video.html b/upload/styles/cb_2014/layout/blocks/editor_pick/index_featured_video.html
index a63202a1..30233581 100644
--- a/upload/styles/cb_2014/layout/blocks/editor_pick/index_featured_video.html
+++ b/upload/styles/cb_2014/layout/blocks/editor_pick/index_featured_video.html
@@ -1,11 +1,9 @@
-
-<div onclick="get_ep_video('{$video.videoid}')" class="clearfix">
-	<div class="cb_img_thum">
-	<img src="{getThumb vdetails=$video}" width="140" height="70" border="0" {ANCHOR place="video_thumb" data=$video} />
-	<span class="glyphicon glyphicon-play"></span>
+<div onclick="get_ep_video('{$video.videoid}')" class="featured_vid_con clearfix">
+	<div class="video_thumb">
+	<img src="{getThumb vdetails=$video}" width="135" height="75" border="0" {ANCHOR place="video_thumb" data=$video} />
 	</div> <!--VIDEO_THUMB END-->
 
-<!--<div class="details_block">
+<div class="details_block">
 	<div class="title" style="font-family:Tahoma, Geneva, sans-serif; font-weight:normal;">
 	<a href="#" style="color:#000; text-decoration:none; font-weight:bold; font-size:12px;">{$video.title|truncate:20}</a>
     </div>
@@ -15,8 +13,6 @@
 	<div style="padding-top: 20px; font-size:11px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-weight:normal;">
     {$video.duration|SetTime}
 	</div>
-</div>-->
+</div>
 
-</div> 
-
-<!--DETAILS_BLOCK END-->
+</div> <!--DETAILS_BLOCK END-->
diff --git a/upload/styles/cb_2014/layout/blocks/videos/video-home-sliders.html b/upload/styles/cb_2014/layout/blocks/videos/video-home-sliders.html
new file mode 100644
index 00000000..82f53eca
--- /dev/null
+++ b/upload/styles/cb_2014/layout/blocks/videos/video-home-sliders.html
@@ -0,0 +1,194 @@
+{if $slider !=''}
+
+<div id="slide1">
+{foreach from=$videos_06_da item=video_06_da}
+<div class="col-md-2 text-center nopadding">
+<div class="col-md-11 text-center nopadding">
+	<a href="{videoLink vdetails=$video_06_da}" title="{$video_06_da.title}">
+    <img class="cb_img_thum" src="{getThumb vdetails=$video_06_da}" width="135" height="75"  {ANCHOR place="video_thumb" data=$video_06_da} />
+    <div class="cbHomeVidTitle cbHomeVidTitle_slid-title">{$video_06_da.title|truncate:10}</div>
+    </a>
+    <div class="cbHomeVidDuration cbHomeVidDuration_slide">
+    {$video_06_da.duration|number_format}
+    </div>
+</div>
+</div>
+{/foreach}
+</div>
+<div class="nxt-pre">
+		<a href="#" class="circle" id="slide_prev1">
+		<span class="glyphicon glyphicon-chevron-left"></span>
+		</a>
+		<a href="#" class="circle" id="slide_next1">
+		<span class="glyphicon glyphicon-chevron-right"></span>
+		</a>
+		</div>
+{/if}
+
+{if $slider2!=''}
+<script>
+        jssor_slider1_starter = function (containerId) {
+            var options = {
+                $AutoPlay: true,
+                //[Optional] Whether to auto play, default value is false
+                
+                $AutoPlaySteps: 3,
+                //[Optional] Steps for each navigation
+                
+                $AutoPlayInterval: 4000,
+                //[Optional] Interval (in milliseconds)
+                
+                $PauseOnHover: 0,
+                // [Optional] Whether to pause when mouse over,
+                // 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device
+                
+                $ArrowKeyNavigation: true,
+                //[Optional] Allows keyboard (arrow key) navigationdefault value is false
+                
+                $SlideDuration: 300,
+                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
+                
+                $MinDragOffsetToSlide: 20,
+                //[Optional] Minimum drag offset to trigger slide , default value is 20
+                
+                $SlideWidth: 235,
+                //[Optional] Width of every slide in pixels, default value is width of 'slides' container
+                //$SlideHeight: 150,
+                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
+                
+                $SlideSpacing: 8,
+                //[Optional] Space between each slide in pixels, default value is 0
+                
+                $DisplayPieces: 4,
+                //[Optional] Number of pieces to display
+                //(the slideshow would be disabled if the value is set to greater than 1)
+                // the default value is 1
+                
+                $ParkingPosition: 0,
+                //[Optional] The offset position to park slide
+                //(this options applys only when slideshow disabled), default value is 0.
+                
+                $UISearchMode: 1,
+                // [Optional] The way (0 parellel, 1 recursive, default value is 1)
+                // to search UI components
+                // (slides container, loading screen, navigator container,
+                // direction navigator container, thumbnail navigator container etc).
+                
+                $PlayOrientation: 1,
+                // [Optional] Orientation to play slide
+                // (for auto play, navigation), 1 horizental, 2 vertical, default value is 1
+                
+                $DragOrientation: 1,
+                // [Optional] Orientation to drag slide,
+                // 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1
+                // (Note that the $DragOrientation should be the same as $PlayOrientation
+                // when $DisplayPieces is greater than 1, or parking position is not 0)
+                
+                $NavigatorOptions: {
+                //[Optional] Options to specify and enable navigator or not
+                $Class: $JssorNavigator$,
+                //[Required] Class to create navigator instance
+                $ChanceToShow: 2,
+                //[Required] 0 Never, 1 Mouse Over, 2 Always
+                $AutoCenter: 0,
+                // [Optional] Auto center navigator in parent container,
+                // 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
+                
+                $Steps: 1,
+                //[Optional] Steps to go for each navigation request, default value is 1
+                
+                $Lanes: 1,
+                //[Optional] Specify lanes to arrange items, default value is 1
+                
+                $SpacingX: 0,
+                //[Optional] Horizontal space between each item in pixel, default value is 0
+                
+                $SpacingY: 0,
+                //[Optional] Vertical space between each item in pixel, default value is 0
+                
+                $Orientation: 1
+                //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
+                },
+                
+                $DirectionNavigatorOptions: {
+                    $Class: $JssorDirectionNavigator$,
+                    //[Requried] Class to create direction navigator instance
+                    $ChanceToShow: 1,
+                    //[Required] 0 Never, 1 Mouse Over, 2 Always
+                    $AutoCenter: 2,
+                    // [Optional] Auto center navigator in parent container,
+                    // 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
+                    $Steps: 3
+                    //[Optional] Steps to go for each navigation request, default value is 1
+                }
+            };
+            
+            var jssor_slider1 = new $JssorSlider$(containerId, options);
+            
+            //responsive code begin
+            //you can remove responsive code if you don't want the slider scales while window resizes
+            function ScaleSlider() {
+                var bodyWidth = document.body.clientWidth;
+                if (bodyWidth)
+                    jssor_slider1.$SetScaleWidth(Math.min(bodyWidth, 725));
+                else
+                    window.setTimeout(ScaleSlider, 30);
+            }
+            
+            ScaleSlider();
+            $JssorUtils$.$AddEvent(window, "load", ScaleSlider);
+            
+            if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
+                $JssorUtils$.$OnWindowResize(window, ScaleSlider);
+            }
+            //responsive code end
+        };
+        </script>
+  <div id="slider1_container" >
+        
+        <!-- Loading Screen -->
+        <div u="loading" >
+        	<div style="filter: alpha(opacity=70); opacity:0.7; display: block; background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;">
+            </div>
+            <div style="display: block; background: url(../img/loading.gif) no-repeat center center; top: 0px; left: 0px;width: 100%; height:100%;">
+            </div>
+		</div>
+        
+        <!-- Slides Container -->
+        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 725px; height: 120px; overflow: hidden;">
+        {foreach from=$videos_06_da item=video_06_da}
+        	<div class="col-md-12 text-center nopadding">
+            	<a href="{videoLink vdetails=$video_06_da}" title="{$video_06_da.title}">
+                <img src="{getThumb vdetails=$video_06_da}" width="240" height="120" style="border:1px solid #CCC;" {ANCHOR place="video_thumb" data=$video_06_da} />
+                <div class="cbHomeVidTitle">{$video_06_da.title|truncate:10}</div>
+                </a>
+                <div class="cbHomeVidDuration">
+                {$video_06_da.duration|number_format}
+                </div>
+			</div>
+		{/foreach}
+		</div>
+        
+        <!-- navigator container -->
+        <div u="navigator" class="jssorn03" style="position: absolute; bottom: -25px; left: 50%;">
+        <!-- navigator item prototype -->
+        <div u="prototype" style="position: absolute; width: 21px; height: 21px; text-align:center; line-height:21px; color:#000; font-size:12px;">
+        <NumberTemplate></NumberTemplate>
+        </div>
+        </div>
+        <!-- Navigator Skin End -->       
+        
+        <!-- Arrow Left -->
+        <span u="arrowleft" class="jssord03l" style="width: 55px; height: 55px; top: 123px; left: 8px;"></span>
+        <!-- Arrow Right -->
+        <span u="arrowright" class="jssord03r" style="width: 55px; height: 55px; top: 123px; right: 8px"></span>        
+        
+        <!-- Direction Navigator Skin End -->
+        <a style="display: none" href="http://www.jssor.com">jQuery Image Slider</a>
+        <!-- Trigger -->
+		
+		<script>
+		jssor_slider1_starter('slider1_container');
+        </script>
+        </div>
+{/if}
\ No newline at end of file
diff --git a/upload/styles/cb_2014/layout/index.html b/upload/styles/cb_2014/layout/index.html
index 56e06f6b..494a1641 100755
--- a/upload/styles/cb_2014/layout/index.html
+++ b/upload/styles/cb_2014/layout/index.html
@@ -4,9 +4,9 @@
         <!-- ******************************************* //-->
 		<!-- ******** GLOBAL ANNOUNCEMENT START ******** //-->
         <!-- ******************************************* //-->
-        <div class="alert alert-info">
-      	<strong>Welome </strong>  to new interface
-    	</div>
+        <h1 class="alert alert-info" style="margin-top: 5px; font-size:16px;">
+        Welome to new interface
+        </h1>
         <!-- ******************************************* //-->
 		<!-- ********* GLOBAL ANNOUNCEMENT END ********* //-->
         <!-- ******************************************* //-->
@@ -17,9 +17,9 @@
         <!-- ******************************************* //-->
 		<div class="row">
 			
-		<div class="col-md-9 nopadding-right">
+		<div class="col-md-8 nopadding-right">
 			<!-- Editor Pick Video Main Container START //-->
-			<div id="ep_video_container" class="min-height-355 clearfix">
+			<div id="ep_video_container">
 				{if is_installed('editorspick')}
 				{section name=e_list loop=$editor_picks max=1}
 				{include file="$style_dir/blocks/editor_pick/video_block.html" video=$editor_picks[e_list]}
@@ -29,62 +29,36 @@
 				{/if}
 			</div>
 			<!-- Editor Pick Video Main Container END //-->
-			<div class="clearfix"></div>
-			<div  class="col-md-12 hidden-sm hidden-xs nopadding-left">
-				<a href="#" class="pull-left" id="slide_prev">
-					<span class="glyphicon glyphicon-chevron-left"></span>
-					</a>
-				<div id="slide" class="pull-left" >
-				{section name=e_list loop=$editor_picks}
-            		
-            	{include file="$style_dir/blocks/editor_pick/index_featured_video.html" video=$editor_picks[e_list]}
-						
-				{/section}
-
-				</div>
-				<a href="#" class="pull-left " id="slide_next" >
-					<span class="glyphicon glyphicon-chevron-right"></span>
-				</a>
-        	</div>
         </div>
 
 		<!-- Editor Pick Videos Slider Container START //-->
-        <div class="col-md-3 nopadding-left">
-        	<div class="bs-callout-info highlight thumbnail min-height-120 no-border-radius fill">
-        		<!--<a href="#" class="pull-left" id="slide_prev1">
-					<span class="glyphicon glyphicon-chevron-left"></span>
-					</a>
-        		<div id="slide1" class="pull-left" >
-				{*section name=e_list loop=$editor_picks*}
-            		
-            	{*include file="$style_dir/blocks/editor_pick/index_featured_video.html" video=$editor_picks[e_list]*}
-						
-				{*/section*}
-
-				</div>
-				<a href="#" class="pull-left " id="slide_next1" >
-					<span class="glyphicon glyphicon-chevron-right"></span>
-				</a>-->
-	  			<h3>Video Name.............</h3>
-	  			<div class="small min-height-40">Video Description.....................</div>
-	    		<input type="submit" class="no-border-radius btn btn-primary btn-block" value="{lang code='View Video'}" name="view_video">
-			</div>
-			<div>
-				<img src="{$theme}/assets/images/add320x250.png"  style="height: 235px;">
-			</div>
-			
+        <div class="col-md-4 hidden-sm hidden-xs nopadding-left">
+        <div id="slide">
+				{section name=e_list loop=$editor_picks}
+            	{include file="$style_dir/blocks/editor_pick/index_featured_video.html" video=$editor_picks[e_list]}
+				{/section}
+        
+        </div>
+        <div class="next_pre_hold">
+		<a href="#" class="col-md-6 btn btn-primary" id="slide_prev">
+		<span class="glyphicon glyphicon-chevron-up"></span>
+		</a>
+		<a href="#" class="col-md-6 btn btn-primary" id="slide_next">
+		<span class="glyphicon glyphicon-chevron-down"></span>
+		</a>
 		</div>
-		<!-- Editor Pick Videos Slider Container END //-->
+		</div>
+        <!-- Editor Pick Videos Slider Container END //-->
 
         <script type="text/javascript">
             $(function() {						
                 $('#slide').ulslide({
-                    width: 141,
-                    height: 75,
+                    width: 375,
+                    height: 90,
 					effect: {
-						type: 'carousel', // slide or fade or carousel
-                        axis: 'x',        // x, y
-						showCount: 6
+						type: 'carousel', // slide or fade
+                        axis: 'y',        // x, y
+						showCount: 4
 					},
                     nextButton: '#slide_next',
                     prevButton: '#slide_prev',
@@ -93,12 +67,12 @@
 					easing: 'easeOutBounce'
                 });
                 $('#slide1').ulslide({
-                    width: 200,
-                    height: 75,
+                    width: 150,
+                    height: 80,
 					effect: {
-						type: 'fade', // slide or fade or carousel
+						type: 'carousel', // slide or fade
                         axis: 'x',        // x, y
-						showCount: 6
+						showCount: 5
 					},
                     nextButton: '#slide_next1',
                     prevButton: '#slide_prev1',
@@ -113,111 +87,284 @@
 		<!-- ************ EDITORS BLOCK END ************ //-->
         <!-- ******************************************* //-->
 
-        <div class="clearfix min-height-25"></div>
+
         <!-- ******************************************* //-->
 		<!-- *********** LATEST VIDEOS START *********** //-->
         <!-- ******************************************* //-->
 		<div class="row">
-			<div class="col-md-12">
-				<div class="">
-				<h3 class="theme_color">{lang code="Latest Videos"}</h3>
-				<hr>
-				<div class="col-md-12 nopadding">
+		<div class="col-md-12">
 
-					{foreach from=$videos_10_da item=video}
-						<div class="item_video col-md-2 well no-border-radius no-margin">
-				    		<div class="cb_item_container clearfix">
-						        <div class="cb_item_thumb video_thumb" >
-							        <a href="{videoLink($video)}" title="{$video.title|title}">
-							        	<img class="" src="{getThumb vdetails=$video}" border="1" height="100" width="100"/>
-							        </a>
-						    	</div>
-						        <div class="item_text"  style="height: 45px;">
-						           <a href="{videoLink($video)}">{$video.description|truncate:30}</a>
-						        </div>
-				        		<span class="pull-left"><h5><small>{lang code="Views"} {$video.views}</small></h5></span>
-				        		<span class="pull-right"><h5><small><small>4k <span class="glyphicon glyphicon-thumbs-up"></span></small></small></h5></span>
-				   			</div>
-						</div>
-					{/foreach}
+		<div class="col-md-8 nopadding padding-right-10">
+			<h2 class="myHeading">{lang code="Featured Videos"}</h2>
+			<div class="col-md-12 nopadding">
 
-			    	<div class="clearfix"></div>	            
+			<div class="col-md-12 text-center nopadding">
+				<div class="col-md-8 text-center nopadding" style=" margin-bottom:10px;">
+				{foreach from=$videos_01 item=video_01}
+				<div class="col-md-12 text-center nopadding">
+				<a href="{videoLink vdetails=$video_01}" title="{$video_01.title}">
+				<img class="cb_img_thum" src="{getThumb vdetails=$video_01}" width="500" height="285" border="0" {ANCHOR place="video_thumb" data=$video_01} />
+				</a>
+				<div class="cbHomeVidTitle cbHomeVidTitle_Big">{$video_01.title|truncate:30}</div>
 				</div>
+
+	            <div class="cbHomeVidDuration">
+	            {$video_01.duration|number_format}
+	            </div>
+	            <div class="cbHomeVidDuration_left">
+	            By: {$video_01.username}
+	            </div>
+
+				{/foreach}
+				</div>
+
+				<div class="col-md-4 hidden-sm hidden-xs text-center nopadding-right" style="padding-left:8px;">
+				{foreach from=$videos_02 item=video_02}
+				<div class="col-md-12 text-center nopadding">
+				<a href="{videoLink vdetails=$video_02}" title="{$video_02.title}">
+				<img class="cb_img_thum" src="{getThumb vdetails=$video_02}" width="240" height="130" {ANCHOR place="video_thumb" data=$video_03} />
+				<div class="cbHomeVidTitle" style="margin-bottom:8px;">{$video_02.title|truncate:10}</div>
+				</a>
+
+	            <div class="cbHomeVidDuration">
+	            {$video_02.duration|number_format}
+	            </div>
+                
+				</div>
+				<div class="clearfix"  style="height: 18px;"></div>
+				{/foreach}
+				</div>
+                
+            </div>
+		
+        		<div class="clearfix"></div>
+        
+        		<div class="col-md-12 text-center nopadding">
+				{foreach from=$videos_03 item=video_03}
+				<div class="col-md-4 hidden-sm hidden-xs text-center nopadding-left"  style="margin-bottom:15px; padding-right:4px;">
+				<a href="{videoLink vdetails=$video_03}" title="{$video_02.title}">
+				<img src="{getThumb vdetails=$video_03}" width="242" height="120" style="border:1px solid #CCC;" {ANCHOR place="video_thumb" data=$video_03} />
+				<div class="cbHomeVidTitle cbHomeVidTitle_small">{$video_03.title|truncate:10}</div>
+				</a>
+
+	            <div class="cbHomeVidDuration cbHomeVidDuration_more">
+	            {$video_03.duration|number_format}
+	            </div>
+                
+				</div>
+				{/foreach}
+				</div>
+                
+			</div>
+
 		<!-- ******************************************* //-->
         <!-- ************ LATEST VIDEOS END ************ //-->
 		<!-- ******************************************* //-->
-		 		<div class="clearfix"></div><BR />
-<!-- *********** PHOTOS START ************ //-->
-		<div class="row nopadding">
-        			<div class="col-md-9 nopadding ">
-        				<h3 class="theme_color">{lang code="Latest Photos"}</h3>
-						<hr>
-        				<!-- *********** FIRST PHOTOS START ************ //-->
-						<div class="col-md-12 fill-background" style="display:block; height:320px; padding:5px;">
-							<div class="col-md-8" style="display:block; height:320px; border:1px solid #CCC; padding:10px;">
-							{foreach from=$result_photos1_01 item=result_photo1_01}
-				            	<a href="{$cbphoto->photo_links($result_photo1_01,'view_item')}">
-				            	{get_photo details=$result_photo1_01 output='html' width="545" height="300" class="cb_img_thum"}
-				            	</a>
-				            {/foreach}
-				            </div>
-				            
-				            <div class="col-md-4 nopadding" style="display:block; height:80px;">
-							{foreach from=$result_photos1_08 item=result_photo1_08}
-								<div class="col-md-6" style="display:block; height:80px; border:1px solid #CCC; padding:7px;">
-				            	<a href="{$cbphoto->photo_links($result_photo1_08,'view_item')}">
-				            	{get_photo details=$result_photo1_08 output='html' width="125" height="65" class='photoThumbBox moveL cb_img_thum'}
-				            	</a>
-				            {if $photos@iteration > 1}{break}{/if}
-				       	    </div>
-				            {/foreach}
-							</div>
-						</div>
-			        <!-- *********** FIRST PHOTOS END ************ //-->
-			        <!-- *********** SECOND PHOTOS START ************ //-->
-    				<div class="col-md-12" style="display:block; height:320px; padding:5px;">
+
+        <div class="clearfix"></div><BR />
+
+		<!-- ******************************************* //-->
+        <!-- *************** VIDEOS START ************** //-->
+        <!-- ******************************************* //-->
+        <div class="row nopadding">
+ 		<hr>
+        <div class="col-md-12" style="display:block; height:160px; padding:5px;">
+			<div class="bs-example bs-example-tabs">
+			    <ul class="nav nav-tabs" id="myTab">
+			      <li class="active"><a data-toggle="tab" href="#recent_video">Recent videos</a></li>
+			      <li class=""><a data-toggle="tab" href="#being_viewed">Being viewed</a></li>
+			    </ul>
+			    <div class="tab-content" id="myTabContent">
+			      <div id="recent_video" class="tab-pane fade active in" style="padding-top: 25px;">
+        				{include file="$style_dir/blocks/videos/video-home-sliders.html" video_06_da=$videos_06_da slider='slider'}
+			      </div>
+			      <div id="being_viewed" class="tab-pane fade">
+			        {foreach from=$videos_06_da item=video_06_da}
+        				{include file="$style_dir/blocks/videos/video-home-sliders.html" video_06_da=$video_06_da slider2='slider2'}
+					{/foreach}
+			      </div>
+			    </div>
+	  		</div>
+		</div>
+        </div>
+		<!-- ******************************************* //-->
+        <!-- *************** VIDEOS END ************** //-->
+        <!-- ******************************************* //-->
+
+        <div class="clearfix"></div><BR />
+
+		<!-- ******************************************* //-->
+        <!-- *********** FIRST PHOTOS START ************ //-->
+        <!-- ******************************************* //-->
+        <div class="row nopadding">
+		<h2 class="myHeading">Photos</h2>
         
-				        <div class="col-md-4 nopadding" style="display:block; height:80px;">
-						{foreach from=$result_photos2_08 item=result_photo2_08}
-							<div class="col-md-6" style="display:block; height:80px; border:1px solid #CCC; padding:7px;">
-				        	<a href="{$cbphoto->photo_links($result_photo2_08,'view_item')}">
-				        	{get_photo details=$result_photo2_08 output='html' width="125" height="65" class='photoThumbBox moveL cb_img_thum'}
-				        	</a>
-				        {if $photos@iteration > 1}{break}{/if}
-				   	    </div>
-				        {/foreach}
-						</div>
-						
-						<div class="col-md-8" style="display:block; height:320px; border:1px solid #CCC; padding:10px;">
-						{foreach from=$result_photos2_01 item=result_photo2_01}
-				        	<a href="{$cbphoto->photo_links($result_photo2_01,'view_item')}">
-				        	{get_photo details=$result_photo2_01 output='html' width="545" height="300" class="cb_img_thum"}
-				        	</a>
-				        {/foreach}
-				        </div>
-					</div>
+		<div class="col-md-12" style="display:block; height:320px; padding:5px;">
+			<div class="col-md-8" style="display:block; height:320px; border:1px solid #CCC; padding:10px;">
+			{foreach from=$result_photos1_01 item=result_photo1_01}
+            	<a href="{$cbphoto->photo_links($result_photo1_01,'view_item')}">
+            	{get_photo details=$result_photo1_01 output='html' width="460" height="300"}
+            	</a>
+            {/foreach}
+            </div>
+            
+            <div class="col-md-4 nopadding" style="display:block; height:80px;">
+			{foreach from=$result_photos1_08 item=result_photo1_08}
+				<div class="col-md-6" style="display:block; height:80px; border:1px solid #CCC; padding:7px;">
+            	<a href="{$cbphoto->photo_links($result_photo1_08,'view_item')}">
+            	{get_photo details=$result_photo1_08 output='html' width="105" class='photoThumbBox moveL'}
+            	</a>
+            {if $photos@iteration > 1}{break}{/if}
+       	    </div>
+            {/foreach}
+			</div>
+		
+        </div>
+		</div>
+		<!-- ******************************************* //-->
+        <!-- *********** FIRST PHOTOS END ************ //-->
+        <!-- ******************************************* //-->
+
+
+
+		<!-- ******************************************* //-->
+        <!-- *********** SECOND PHOTOS START ************ //-->
+        <!-- ******************************************* //-->
+        <div class="row nopadding">
+		<div class="col-md-12" style="display:block; height:320px; padding:5px;">
+            
+            <div class="col-md-4 nopadding" style="display:block; height:80px;">
+			{foreach from=$result_photos2_08 item=result_photo2_08}
+				<div class="col-md-6" style="display:block; height:80px; border:1px solid #CCC; padding:7px;">
+            	<a href="{$cbphoto->photo_links($result_photo2_08,'view_item')}">
+            	{get_photo details=$result_photo2_08 output='html' width="105" class='photoThumbBox moveL'}
+            	</a>
+            {if $photos@iteration > 1}{break}{/if}
+       	    </div>
+            {/foreach}
+			</div>
+
+			<div class="col-md-8" style="display:block; height:320px; border:1px solid #CCC; padding:10px;">
+			{foreach from=$result_photos2_01 item=result_photo2_01}
+            	<a href="{$cbphoto->photo_links($result_photo2_01,'view_item')}">
+            	{get_photo details=$result_photo2_01 output='html' width="460" height="300"}
+            	</a>
+            {/foreach}
+            </div>
+			</div>
+            
+		</div>
+		</div>
+		<!-- ******************************************* //-->
         <!-- *********** SECOND PHOTOS END ************ //-->
         <!-- ******************************************* //-->
-			        <!-- ************* USER BLOCK START ************ //-->
-			        <!-- ******************************************* //-->
-    				</div>
-					<div class="col-md-3">
-						<h3 class="theme_color">{lang code="Being Viewed Photos"}</h3>
-						<hr>
-					
-						{foreach from=$photos_viewd item=photo_viewd}
-				        	<a href="{$cbphoto->photo_links($photo_viewd,'view_item')}">
-				        	{include file="$style_dir/blocks/photo.html" photo=$photo_viewd display_type='side_photos_viewed'}
-				        	</a>
-				        {/foreach}
-					</div>
-						<!-- ******************************************* //-->
-				        <!-- ************* USER BLOCK END ************ //-->
-				        <!-- ******************************************* //-->
-		</div>
-<!-- ***********  PHOTOS END ************ //-->
+
+
+
+		<!-- ******************************************* //-->
+        <!-- ******** ADVERTISEMENT BLOCK START ******** //-->
+        <!-- ******************************************* //-->
+		<!--<div class="col-md-4" style="background-color:#F2F2F2; padding-top:10px; padding-bottom:10px; margin-bottom:10px;">
+		<h2 class="myHeadingBLK" style="margin-top:0;">Advertisement</h2>
+			<div class="col-md-12 text-center nopadding" style="font-size:18px; border:1px solid #CCC; background:#FFF; display:block; height: 250px; width: 300px; line-height: 200px; text-align:center; left:7%;">
+			Ad Box 300 x 250
+			</div>
+		</div>-->
+		<!-- ******************************************* //-->
+        <!-- ******** ADVERTISEMENT BLOCK END ******** //-->
+        <!-- ******************************************* //-->
+
+
+		<!-- ******************************************* //-->
+        <!-- ************* USER BLOCK START ************ //-->
+        <!-- ******************************************* //-->
+		<div class="col-md-4" style="background-color:#F2F2F2; padding-top:10px; padding-bottom:10px; margin-bottom:10px;">
+		<h2 class="myHeadingBLK" >{lang code="Featured Users"}</h2>
+		{section name=result_users loop=$result_users}
+        	
+		<div class="col-md-12 nopadding clearfix user-view-home" style="font-size:12px; margin-top:3px;">
+			<div class="col-md-3 nopadding">
+			<img src="{$userquery->getuserthumb($result_users[result_users],'small')}" width="65" height="65" class="img-circle" />
+			</div>
+			<div class="col-md-9 nopadding" style="font-size:12px; margin-top:3px;">
+			<div class="min-height-35">
+				<h4 class="nopadding "><a href="{$userquery->profile_link($result_users[result_users])}">{$result_users[result_users].username}</a></h4>
+			</div>
+			<div class=" nopadding col-md-7 min-height-20">
+				<div class="pull-left small">{$result_users[result_users].profile_hits|number_format} {lang code='views'}</div>
+				<div class="pull-right small">{$result_users[result_users].total_videos|number_format}{lang code='Videos'}</div>
+			</div>
+				<div class="col-md-12 nopadding progress no-border-radius">
+      				<div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-success">
+        			<span class="sr-only">40% Complete (success)</span>
+  					</div>
+    			</div>
+			</div>
+			<div style="position:absolute; top: 25%; right:5px;">
+			<a href="{$userquery->profile_link($result_users[result_users])}">
+			<img src="{$baseurl}/styles/cb_2014/images/user_next_icon.png" width="25" height="25" />
+			</a>
 			</div>
 		</div>
+		{/section}
+		</div>
+		<!-- ******************************************* //-->
+        <!-- ************* USER BLOCK END ************ //-->
+        <!-- ******************************************* //-->
+
+
+		<!-- ******************************************* //-->
+        <!-- ********** FACEBOOK BLOCK START *********** //-->
+        <!-- ******************************************* //-->
+		<div class="col-md-4" style="background-color:#F2F2F2; padding-top:10px; padding-bottom:10px; margin-bottom:10px;">
+		<h2 class="myHeadingBLK" style="margin-top:0;">Facebook Like Box</h2>
+			<div class="col-md-12" style="font-size:18px; border:1px solid #CCC; background:#FFF; display:block; height: 200px; width: 350px; line-height: 200px; text-align:center;">
+			Facebook Like Box
+			</div>
+		</div>
+		<!-- ******************************************* //-->
+        <!-- ********** FACEBOOK BLOCK END *********** //-->
+        <!-- ******************************************* //-->
+
+
+		<!-- ******************************************* //-->
+        <!-- ********** COMMENTS BLOCK START *********** //-->
+        <!-- ******************************************* //-->
+		<div class="col-md-4" style="background-color:#F2F2F2; padding-top:10px; padding-bottom:10px; margin-bottom:10px; margin-top:10px;">
+		<h2 class="myHeadingBLK" style="margin-top:0;">Most Commented</h2>
+		
+        <div class="col-md-12 nopadding">
+			{foreach from=$result_comments item=comment}
+			<div class="col-md-2 nopadding-right" style=" margin-top: 10px;">
+			{if ($comment.userid!=0)}
+			<img src="images/avatars/{$comment.userid}-small.jpg" width="35" height="35" class="img-rounded" />
+            {else}
+            <img src="images/avatars/no_avatar-small.png" width="35" height="35" class="img-rounded" />
+			{/if}
+			</div>
+			
+            <!-- Displaying User Comment Box //-->
+        	<div class="col-md-10 nopadding" style="z-index:2;">
+	            <p class="mycommentboxarrow"></p>
+	            <div style="min-height:100px; margin-top:10px; padding:5px; color: #000; background:#FFF; border: 1px solid #CCC; border-radius:5px; font-size:14px; word-wrap: break-word;">
+	            {$comment.comment|truncate:150}
+	            <div style="position:absolute; bottom:5px; font-size:11px; color:#666;">
+	            Updated: {$comment.date_added|niceTime}
+	            </div>
+	            <div class="cbHomeCommCount">
+	            {$result_comments[result_comments].total_comments|number_format}
+	            </div>
+				</div>
+            </div>
+			{/foreach}
+		</div>
+
+		</div>
+		<!-- ******************************************* //-->
+        <!-- *********** COMMENTS BLOCK END ************ //-->
+        <!-- ******************************************* //-->
+
+		</div>
+		</div>
 	</div>
-</div>
 </div>
\ No newline at end of file
diff --git a/upload/styles/cb_2014/theme/css/channel.css b/upload/styles/cb_2014/theme/css/channel.css
index 6f1fc21c..4f092677 100644
--- a/upload/styles/cb_2014/theme/css/channel.css
+++ b/upload/styles/cb_2014/theme/css/channel.css
@@ -1090,7 +1090,7 @@ footer ul li a{
     padding: 0px 15px 0px 15px !important;
 }
 /*Home Page*/
-#slide_prev{
+#slide_prev2{
     left: 0;
     position: absolute;
     top: 27px;
@@ -1098,7 +1098,7 @@ footer ul li a{
     background-color: rgba(0, 0, 0, 0.6);
 
 }
-#slide_next{
+#slide_next2{
    background-color: rgba(0, 0, 0, 0.6);
     position: relative;
     right: 15px;
@@ -1106,19 +1106,25 @@ footer ul li a{
     z-index: 9;  
 }
 #slide_prev1{
-    left: 0;
-    position: absolute;
-    top: 27px;
-    z-index: 9;
     background-color: rgba(0, 0, 0, 0.6);
+    font-size: 9px;
+    left: 15px;
+    padding: 5px;
+    position: absolute;
+    top: 100px;
+    z-index: 9;
+    color: #FFFFFF;
 
 }
 #slide_next1{
    background-color: rgba(0, 0, 0, 0.6);
-    position: relative;
-    right: 15px;
-    top: 25px;
-    z-index: 9;  
+    color: #FFFFFF;
+    font-size: 9px;
+    padding: 5px;
+    position: absolute;
+    right: 63px;
+    top: 100px;
+    z-index: 9;
 }
 .cb_img_thum{
     cursor: pointer;
@@ -1182,4 +1188,136 @@ padding-left: 2px;
 .fill-background div{
 background-color: #f8f8f8;
 }
+/*// New One for Home Page///*/
+.cbHomeVidTitle {
+    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
+    color: #FFFFFF;
+    font-size: 11px;
+    margin-left: 1.5px;
+    margin-top: -23px;
+    padding: 3px 5px;
+    position: relative;
+    text-align: left;
+    width: 98.8%;
+    z-index: 100;
+}
 
+.cbHomeVidTitle_Big{
+    font-size: 15px;
+    margin-left: 2px;
+    margin-top: -52px;
+    min-height: 50px;
+    padding: 5px 10px;
+    width: 99.2%;
+}
+.cbHomeVidTitle_small{
+    margin-top: -22px;
+    width: 97.5%;
+}
+.cbHomeVidTitle_slid-title{
+    font-size: 7px;
+    margin-top: -20px;  
+    padding: 2px 5px; 
+}
+.cbHomeVidDuration {
+    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+    color: #FFFFFF;
+    font-size: 10px;
+    height: 18px;
+    position: absolute;
+    right: 8px;
+    text-align: center;
+    top: 5px;
+    width: 8%;
+}
+.cbHomeVidDuration_slide{
+    font-size: 7px;
+    height: 18%;
+    right: 2px;
+    top: 2px;
+    width: 15%;
+}
+.cbHomeVidDuration_left{
+    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+    color: #FFFFFF;
+    font-size: 10px;
+    height: 18px;
+    left: 5px;
+    padding: 1px 5px;
+    position: absolute;
+    text-align: center;
+    top: 5px;
+}
+.cbHomeVidDuration_more{
+right: 15px;
+}
+h2.myHeading {
+     border-bottom: 1px solid #DDDDDD;
+    color: #0099CC;
+    
+    font-size: 20px;
+    line-height: 30px;
+    margin-bottom: 20px;
+    margin-top: 10px;
+    padding-bottom: 10px;
+}
+h2.myHeadingBLK {
+    border-bottom: 1px solid #DDDDDD;
+    color: #5A595A;
+    font-size: 20px;
+    line-height: 30px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+}
+.next_pre_hold{
+    height: 5px;
+    position: absolute;
+    top: 320px;
+    width: 95.6%;
+}
+.next_pre_hold .btn{
+ box-shadow: 0 0px 0px rgba(0, 0, 0, 0) ;
+ border-radius:0px;
+ background-color: #428bca;
+ border-color: #357ebd;
+}
+.padding-right-10{
+    padding-right: 10px !important;
+}
+.user-view-home{
+   border-bottom: 1px solid #DDDDDD;
+    padding-bottom: 15px !important;
+    padding-top: 15px !important;
+}
+.user-view-home h4 a {
+    color: #444444;
+}
+.user-view-home .progress{
+    height: 5px;
+    background-color: #d3d3d3;
+}
+.min-height-45{
+    min-height: 45px;
+}
+.min-height-10{
+min-height: 10px;
+}
+.min-height-20{
+min-height: 20px;
+}
+.min-height-35{
+min-height: 35px;
+}
+.circle{
+    border-radius: 50%;
+}
+.nxt-pre .circle{
+
+}
+#slide1 .col-md-12{
+margin-right: 10px;
+}
\ No newline at end of file