diff --git a/ui/css/marketplace.css b/ui/css/marketplace.css
new file mode 100644
index 00000000000..e64d6dfaeea
--- /dev/null
+++ b/ui/css/marketplace.css
@@ -0,0 +1,260 @@
+.buttons
+{
+	width: 88px;
+	height: 16px;
+	padding: 11px 0 8px;
+	float: left;
+	padding-right: 3px;
+	padding-top: 10px;
+	margin-right: 80px;
+	text-align: center;
+	/*+box-shadow:0px 1px 1px #FFFFFF;*/
+	-moz-box-shadow: 0px 1px 1px #FFFFFF;
+	-webkit-box-shadow: 0px 1px 1px #FFFFFF;
+	-o-box-shadow: 0px 1px 1px #FFFFFF;
+	box-shadow: 0px 1px 1px #FFFFFF;
+	border: 1px solid #78818F;
+	cursor: pointer;
+	font-size: 12px;
+	/*+border-radius:4px;*/
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	-khtml-border-radius: 4px;
+	border-radius: 4px;
+	border-radius: 4px 4px 4px 4px;
+}
+.button-application
+{
+	width: 819px;
+	height: 16px;
+	background-color: #808080;
+	color: #FFFFFF;
+	text-align: center;
+	margin-top: -37px;
+	margin-left: 203px;
+	padding: 11px 0 8px;
+	/*+box-shadow:0px 1px 1px #FFFFFF;*/
+	-moz-box-shadow: 0px 1px 1px #FFFFFF;
+	-webkit-box-shadow: 0px 1px 1px #FFFFFF;
+	-o-box-shadow: 0px 1px 1px #FFFFFF;
+	box-shadow: 0px 1px 1px #FFFFFF;
+	-moz-box-shadow: 0px 3px 3px #FFFFFF;
+	box-shadow: 0px 3px 3px #FFFFFF;
+	border: 1px solid #78818F;
+	cursor: pointer;
+	font-weight: bold;
+	font-size: 12px;
+	/*+border-radius:4px;*/
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	-khtml-border-radius: 4px;
+	border-radius: 4px;
+	border-radius: 4px 4px 4px 4px;
+}
+.button-category
+{
+	width: 200px;
+	text-align: center;
+	background-color: #808080;
+	color: #FFFFFF;
+	height: 16px;
+	background-color: #808080;
+	color: #FFFFFF;
+	padding: 11px 0 8px;
+	/*+box-shadow:0px 1px 1px #FFFFFF;*/
+	-moz-box-shadow: 0px 1px 1px #FFFFFF;
+	-webkit-box-shadow: 0px 1px 1px #FFFFFF;
+	-o-box-shadow: 0px 1px 1px #FFFFFF;
+	box-shadow: 0px 1px 1px #FFFFFF;
+	-moz-box-shadow: 0px 3px 3px #FFFFFF;
+	box-shadow: 0px 3px 3px #FFFFFF;
+	border: 1px solid #78818F;
+	cursor: pointer;
+	font-weight: bold;
+	font-size: 12px;
+	/*+border-radius:4px;*/
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	-khtml-border-radius: 4px;
+	border-radius: 4px;
+	border-radius: 4px 4px 4px 4px;
+}
+.list-panel
+{
+	width: 200px;
+	height: 160px;
+	background-color: #808080;
+	color: #0000FF;
+	text-align: center;
+	margin-top: 1px;
+	padding: 11px 0 8px;
+	/*+box-shadow:0px 1px 1px #FFFFFF;*/
+	-moz-box-shadow: 0px 1px 1px #FFFFFF;
+	-webkit-box-shadow: 0px 1px 1px #FFFFFF;
+	-o-box-shadow: 0px 1px 1px #FFFFFF;
+	box-shadow: 0px 1px 1px #FFFFFF;
+	-moz-box-shadow: 0px 3px 3px #FFFFFF;
+	box-shadow: 0px 3px 3px #FFFFFF;
+	border: 1px solid #78818F;
+	cursor: default;
+	font-weight: bold;
+	font-size: 12px;
+	/*+border-radius:4px;*/
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	-khtml-border-radius: 4px;
+	border-radius: 4px;
+	border-radius: 4px 4px 4px 4px;
+}
+.contribute-list-panel
+{
+	width: 200px;
+	height: 160px;
+	background-color: #FFFFFF;
+	color: #000000;
+	text-align: center;
+	margin-top: 1px;
+	padding: 11px 0 8px;
+	/*+box-shadow:0px 1px 1px #FFFFFF;*/
+	-moz-box-shadow: 0px 1px 1px #FFFFFF;
+	-webkit-box-shadow: 0px 1px 1px #FFFFFF;
+	-o-box-shadow: 0px 1px 1px #FFFFFF;
+	box-shadow: 0px 1px 1px #FFFFFF;
+	-moz-box-shadow: 0px 3px 3px #FFFFFF;
+	box-shadow: 0px 3px 3px #FFFFFF;
+	border: 1px solid #78818F;
+	cursor: default;
+	font-weight: bold;
+	font-size: 12px;
+	/*+border-radius:4px;*/
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	-khtml-border-radius: 4px;
+	border-radius: 4px;
+	border-radius: 4px 4px 4px 4px;
+}
+.main-panel
+{
+	width: 819px;
+	height: 670px;
+	background-color: #808080;
+	color: #0000FF;
+	float: right;
+	text-align: center;
+	margin-top: -180px;
+	padding: 11px 0 8px;
+	/*+box-shadow:0px 1px 1px #FFFFFF;*/
+	-moz-box-shadow: 0px 1px 1px #FFFFFF;
+	-webkit-box-shadow: 0px 1px 1px #FFFFFF;
+	-o-box-shadow: 0px 1px 1px #FFFFFF;
+	box-shadow: 0px 1px 1px #FFFFFF;
+	-moz-box-shadow: 0px 3px 3px #FFFFFF;
+	box-shadow: 0px 3px 3px #FFFFFF;
+	border: 1px solid #78818F;
+	cursor: default;
+	font-weight: bold;
+	font-size: 12px;
+	/*+border-radius:4px;*/
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	-khtml-border-radius: 4px;
+	border-radius: 4px;
+	border-radius: 4px 4px 4px 4px;
+}
+
+.app-content-detail-view {
+        width: 1020px;
+        height: 670px;
+        background-color: #F2F2F2	;
+        color: #0000FF;
+        float: left;
+        margin-top:1px;
+        text-align: center;
+        padding: 11px 0 8px;
+        /*+box-shadow:0px 1px 1px #FFFFFF;*/
+        -moz-box-shadow: 0px 1px 1px #FFFFFF;
+        -webkit-box-shadow: 0px 1px 1px #FFFFFF;
+        -o-box-shadow: 0px 1px 1px #FFFFFF;
+        box-shadow: 0px 1px 1px #FFFFFF;
+        -moz-box-shadow: 0px 3px 3px #FFFFFF;
+        box-shadow: 0px 3px 3px #FFFFFF;
+        border: 1px solid #78818F;
+        cursor: default;
+        font-weight: bold;
+        font-size: 12px;
+        /*+border-radius:4px;*/
+        -moz-border-radius: 4px;
+        -webkit-border-radius: 4px;
+        -khtml-border-radius: 4px;
+        border-radius: 4px;
+        border-radius: 4px 4px 4px 4px;
+
+
+
+}
+
+.footer-panel
+{
+	width: 819px;
+	height: 15px;
+	background-color: #808080;
+	color: #FFFFFF;
+	float: right;
+	margin-top: -35px;
+	text-align: left;
+	padding: 11px 0 8px;
+	/*+box-shadow:0px 1px 1px #FFFFFF;*/
+	-moz-box-shadow: 0px 1px 1px #FFFFFF;
+	-webkit-box-shadow: 0px 1px 1px #FFFFFF;
+	-o-box-shadow: 0px 1px 1px #FFFFFF;
+	box-shadow: 0px 1px 1px #FFFFFF;
+	-moz-box-shadow: 0px 3px 3px #FFFFFF;
+	box-shadow: 0px 3px 3px #FFFFFF;
+	border: 1px solid #78818F;
+	cursor: default;
+	font-weight: bold;
+	font-size: 12px;
+	/*+border-radius:4px;*/
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	-khtml-border-radius: 4px;
+	border-radius: 4px;
+	border-radius: 4px 4px 4px 4px;
+}
+.main-panel .login-panel
+{
+	width: 200px;
+	height: 150px;
+	margin-left: 50px;
+	margin-top: 20px;
+	margin-bottom: 20px;
+	float: left;
+	background-color: #FFFFFF;
+	color: #000000;
+	text-align: left;
+	padding: 11px 0 8px;
+	/*+box-shadow:0px 1px 1px #FFFFFF;*/
+	-moz-box-shadow: 0px 1px 1px #FFFFFF;
+	-webkit-box-shadow: 0px 1px 1px #FFFFFF;
+	-o-box-shadow: 0px 1px 1px #FFFFFF;
+	box-shadow: 0px 1px 1px #FFFFFF;
+	-moz-box-shadow: 0px 3px 3px #FFFFFF;
+	box-shadow: 0px 3px 3px #FFFFFF;
+	border: 1px solid #78818F;
+	cursor: default;
+	font-weight: bold;
+	font-size: 12px;
+	/*+border-radius:4px;*/
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	-khtml-border-radius: 4px;
+	border-radius: 4px;
+	border-radius: 4px 4px 4px 4px;
+}
+.main-panel .login-panel .thumbnail
+{
+	width: 152px;
+	height: 113px;
+	margin: auto;
+	background: no-repeat 0 0;
+}
diff --git a/ui/index.jsp b/ui/index.jsp
index a9b83e6fdd5..1de54abfa78 100644
--- a/ui/index.jsp
+++ b/ui/index.jsp
@@ -31,6 +31,7 @@ under the License.
     <title></title>
     <link type="text/css" rel="stylesheet" href="lib/reset.css"/>
     <link type="text/css" rel="stylesheet" href="css/cloudstack3.css" />
+    <link type="text/css" rel="stylesheet" href="css/marketplace.css" />
     <c:if test="${!empty cookie.lang && cookie.lang.value != 'en'}">
       <link type="text/css" rel="stylesheet" href="css/cloudstack3.${cookie.lang.value}.css" />
     </c:if>
@@ -1673,6 +1674,9 @@ under the License.
     <script type="text/javascript" src="scripts/system.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/domains.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/docs.js?t=<%=now%>"></script>
+    <script type="text/javascript" src="scripts/ui-custom/marketplace.js"></script>
+    <script type="text/javascript" src="marketplace/config.js" ></script>
+
   </body>
 </html>
 <jsp:include page="dictionary.jsp" />
diff --git a/ui/marketplace/apps/testApp1/config.js b/ui/marketplace/apps/testApp1/config.js
new file mode 100644
index 00000000000..fe90fbb65dc
--- /dev/null
+++ b/ui/marketplace/apps/testApp1/config.js
@@ -0,0 +1,10 @@
+(function(cloudStack) {
+  cloudStack.marketplace.apps.testApp1 = {
+    title: 'VM Creation',
+    vendor: 'Vendor 1',
+    desc: 'Desc',
+    supportDesc: 'Support desc',
+    supportContact: 'support@example.com'
+  };
+}(cloudStack));
+
diff --git a/ui/marketplace/apps/testApp2/config.js b/ui/marketplace/apps/testApp2/config.js
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/ui/marketplace/apps/testApp3/config.js b/ui/marketplace/apps/testApp3/config.js
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/ui/marketplace/apps/testApp4/config.js b/ui/marketplace/apps/testApp4/config.js
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/ui/marketplace/apps/testApp5/config.js b/ui/marketplace/apps/testApp5/config.js
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/ui/marketplace/apps/testApp6/config.js b/ui/marketplace/apps/testApp6/config.js
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/ui/marketplace/apps/testApp7/config.js b/ui/marketplace/apps/testApp7/config.js
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/ui/marketplace/apps/testApp8/config.js b/ui/marketplace/apps/testApp8/config.js
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/ui/marketplace/apps/testApp9/config.js b/ui/marketplace/apps/testApp9/config.js
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/ui/marketplace/config.js b/ui/marketplace/config.js
new file mode 100644
index 00000000000..a761ca7aabb
--- /dev/null
+++ b/ui/marketplace/config.js
@@ -0,0 +1,19 @@
+(function(cloudStack) {
+  // Dummy app data
+  cloudStack.marketplace = {
+    baseURL: 'file:///home/pranav/ui-cloudstack/cloud-ui-demo/public/marketplace',
+    apps: {
+      'testApp1': {},
+      'testApp2': {},
+      'testApp3': {},
+      'testApp4': {},
+      'testApp5': {},
+      'testApp6': {},
+      'testApp7': {},
+      'testApp8': {},
+      'testApp9': {}
+    }
+  };
+
+}(cloudStack));
+
diff --git a/ui/scripts/ui-custom/marketplace.js b/ui/scripts/ui-custom/marketplace.js
new file mode 100644
index 00000000000..bd046370e1f
--- /dev/null
+++ b/ui/scripts/ui-custom/marketplace.js
@@ -0,0 +1,150 @@
+(function($, cloudStack) {
+  var elems = {
+    // Side navigation bar
+    navigation: function() {
+      var $navigation = $('<div>').addClass('main-navigation');
+      var $categories=$('<div>').addClass('button-category').html('CATEGORIES');
+
+      $categories.appendTo($navigation);
+
+    //  $navigation.html('Navigation');
+      
+      return $navigation;
+    },
+
+    // Listing 'tile' container
+    listing: function() {
+      var $listing = $('<div>').addClass('listing');
+      var $categories=$('<div>').addClass('button-application').html('APPLICATIONS');
+      var apps = cloudStack.marketplace.apps;
+      
+      $categories.appendTo($listing);
+
+      //   $listing.html('Listing area');
+      var $listPanel = $('<div>').addClass('list-panel').html('Application Development').hide();
+        $listPanel.appendTo($listing);  
+      var $listPanel2 = $('<div>').addClass('list-panel').html('Operations Management').hide();
+      $listPanel2.appendTo($listing);
+      var $listPanel3 = $('<div>').addClass('list-panel').html('Business Applications').hide();
+      $listPanel3.appendTo($listing);
+      var $contributePanel = $('<div>').addClass('contribute-list-panel').html('WOULD YOU LIKE TO <b></b>CONTRIBUTE ?');
+       $contributePanel.appendTo($listing);
+      var $mainPanel = $('<div>').addClass('main-panel');
+      $mainPanel.appendTo($listing);
+      var $panelFooter = $('<div>').addClass('footer-panel').html('&nbsp CloudStack 2012');
+      $panelFooter.appendTo($listing);
+      
+      $.each(apps, function(key, value) {
+        var appID = key;
+        var app = value;
+        var $miniPanel = $('<div>').addClass('login-panel');
+        var $thumbnail = $('<div>').addClass('thumbnail');
+        var thumbnailURL = 'url(' + cloudStack.marketplace.baseURL + '/apps/' + appID + '/images/thumbnail.png)';
+        var configURL = cloudStack.marketplace.baseURL + '/apps/' + appID + '/config.js';
+
+        $miniPanel.addClass(appID);
+        $miniPanel.appendTo($mainPanel);
+        $thumbnail.css({
+          'background-image': thumbnailURL
+        });
+        $thumbnail.appendTo($miniPanel);
+
+        $thumbnail.click(function() {
+          require([configURL], function() {
+            // fade-out main panel
+            $listing.fadeOut(function() {
+              var appConfig = cloudStack.marketplace.apps[appID];
+              //debugger;
+              // show detail panel
+              var $detailView = $('<div>').addClass('app-content-detail-view');
+              $detailView.appendTo('.marketplace-container');
+              $detailView.show();
+              $detailView.append($('<div>').addClass('config-title').append(appConfig.title).append("<br></br>")); 
+              $detailView.append($('<div>').addClass('config-vendor').append(appConfig.vendor).append("<br></br>"));
+              $detailView.append($('<div>').addClass('config-desc').append(appConfig.desc).append("<br></br>"));
+              $detailView.append($('<div>').addClass('config-support-desc').append(appConfig.supportDesc).append("<br></br>"));
+              $detailView.append($('<div>').addClass('config-support-contact').append(appConfig.supportContact));
+                       
+            /*  $.each(appConfig,function(key,value) {
+                   $detailView.append(value).append("<br></br>");
+                   
+               });*/
+
+           });
+          });
+        });
+      });
+
+      return $listing;
+    },
+    
+    // Container for marketplace body
+    // -- holds the navigation and listing area
+    marketplace: function() {
+      var $marketplace = $('<div>').addClass('marketplace-container');
+      var $navigation = elems.navigation();
+      var $listing = elems.listing();
+
+      $marketplace.append($navigation, $listing);
+      
+      return $marketplace;
+    },
+    
+    sectionSwitcher: function() {
+      var $switcher = $('<div>').addClass('section-switcher');
+      var $applications = $('<div>').addClass('buttons').html('Applications');
+      var $templates = $('<div>').addClass('buttons').html('Templates');
+      var $isos = $('<div>').addClass('buttons').html('ISOs');
+ 
+      $applications.appendTo($switcher);
+       $templates.appendTo($switcher);
+       $isos.appendTo($switcher);
+
+      // Append buttons
+      // ...
+
+      return $switcher;
+    }
+  };
+  
+  // Replace header items with marketplace-specific ones
+  var updateHeader = function(args) {
+    var $header = args.$header.clone();
+    var $marketplaceSections = elems.sectionSwitcher();
+    var $buttons = $header.find('.button'); // Notifications and project switcher
+        
+    // Hide buttons, show marketplace switcher in place
+    $buttons
+      .hide()
+      .filter(':last')
+      .after($marketplaceSections);
+    
+    $header.addClass('marketplace'); // Logo CSS will show different logo if .marketplace is present
+
+    return $header;
+  };
+
+  cloudStack.uiCustom.marketplace = function(args) {
+    var $header = $('#header');
+    var $marketplaceHeader = updateHeader({
+      $header: $header
+    });
+    var $container = $('#browser');
+    var $navigation = $('#navigation');
+    var $marketplace = elems.marketplace();
+
+    // Update header
+    $header.replaceWith($marketplaceHeader);
+
+    // Replace CloudStack main UI
+    $marketplace.hide();
+    $navigation.fadeOut();
+    $container.fadeOut(function() {
+      $container.after($marketplace);
+      $marketplace.show();
+    });
+
+    // Dummy placeholder
+    return $('<div>');
+  };
+}(jQuery, cloudStack));