diff --git a/plugins/CorePluginsAdmin/CorePluginsAdmin.php b/plugins/CorePluginsAdmin/CorePluginsAdmin.php
index ceb3772bc1a..93e76393011 100644
--- a/plugins/CorePluginsAdmin/CorePluginsAdmin.php
+++ b/plugins/CorePluginsAdmin/CorePluginsAdmin.php
@@ -26,9 +26,15 @@ public function getListHooksRegistered()
         return array(
             'AdminMenu.add' => 'addMenu',
             'AssetManager.getJsFiles' => 'getJsFiles',
+            'AssetManager.getStylesheetFiles' => 'getStylesheetFiles',
         );
     }
 
+    public function getStylesheetFiles($stylesheets)
+    {
+        $stylesheets[] = "plugins/CorePluginsAdmin/stylesheets/marketplace.less";
+    }
+
     function addMenu()
     {
         Piwik_AddAdminSubMenu('CorePluginsAdmin_MenuPlatform', null, "", Piwik::isUserIsSuperUser(), $order = 15);
diff --git a/plugins/CorePluginsAdmin/stylesheets/marketplace.less b/plugins/CorePluginsAdmin/stylesheets/marketplace.less
new file mode 100644
index 00000000000..93475b70e49
--- /dev/null
+++ b/plugins/CorePluginsAdmin/stylesheets/marketplace.less
@@ -0,0 +1,114 @@
+.pluginslist {
+  margin-top: 20px;
+  max-width: 980px;
+  clear: right;
+
+  .plugin {
+    width: 280px;
+    float: left;
+    border: 1px solid #dadada;
+    padding: 15px;
+    background-color: #F6F5F3;
+    margin-right: 14px;
+    margin-bottom: 15px;
+    position: relative;
+
+    &:hover {
+      background-color: #EFEEEC;
+    }
+
+    li {
+      display: inline-block;
+      padding-right: 50px;
+      font-size: 90%;
+
+      &.even {
+        padding-right: 0px;
+      }
+    }
+    ul {
+      list-style: none;
+      margin-left: 0;
+      line-height: 140%;
+    }
+    .header {
+      margin-top: 0px;
+      margin-bottom: 15px;
+    }
+    .description {
+      padding-bottom: 10px;
+    }
+    .install {
+      float: right;
+    }
+    .more {
+      font-weight: bold;
+      text-decoration: none;
+      color: #255792;
+    }
+    .content {
+      margin-bottom: 46px;
+    }
+    .footer {
+      height: 58px;
+      position: absolute;
+      bottom: 6px;
+      left: 0px;
+      right: 0px;
+    }
+    .metadataSeparator {
+      background-color: lightgray;
+      color: #333;
+      border: 0px;
+      height: 1px;
+      width: 100%;
+    }
+    .metadata {
+      margin-top: 10px;
+      margin-left: 15px;
+      margin-right: 15px;
+    }
+  }
+
+  &.themes .plugin {
+    .header {
+      display: inline;
+    }
+    .content {
+      margin-bottom: 57px;
+    }
+    .preview {
+      width: 250px;
+      height: 250px;
+    }
+    .footer {
+      height: 55px;
+      position: absolute;
+      bottom: 7px;
+      left: 0px;
+      right: 0px;
+    }
+  }
+}
+
+.pluginslistActionBar {
+  min-width: 650px;
+  max-width: 980px;
+
+  form {
+    display: inline;
+  }
+
+  .infoBox {
+    font-size: 14px;
+    margin: 0px 0px 10px 10px;
+    padding: 15px;
+    color: #301901;
+    display: inline-block;
+    background-color: #ffffe0;
+    border: 1px solid #e6db55;
+    border-radius: 3px;
+    width: 250px;
+    float: right;
+  }
+}
\ No newline at end of file
diff --git a/plugins/CorePluginsAdmin/templates/browsePlugins.twig b/plugins/CorePluginsAdmin/templates/browsePlugins.twig
index 5537478eee5..8f89d5f4de2 100644
--- a/plugins/CorePluginsAdmin/templates/browsePlugins.twig
+++ b/plugins/CorePluginsAdmin/templates/browsePlugins.twig
@@ -1,43 +1,8 @@
 {% extends 'admin.twig' %}
 
 {% block content %}
-    <style type="text/css">
-        .plugin {
-            width: 280px; float: left; border: 1px solid #dadada; padding: 15px; background-color: #F6F5F3;
-            margin-right: 14px; margin-bottom: 15px;
-        }
-        .plugin:hover {
-            background-color: #EFEEEC;
-        }
-        .plugin li { display: inline-block;padding-right: 50px;font-size: 90%; }
-        .plugin ul { list-style: none;margin-left: 0; line-height: 140%; }
-        .plugin .header { margin-top: 0px; margin-bottom: 15px; }
-        .plugin .description { padding-bottom: 10px; }
-        .plugin .install { float: right; }
-        .plugin .more { font-weight: bold; text-decoration: none; color: #255792; }
-        .pluginslist { margin-top: 20px;max-width:980px;clear: right; }
-        .infoBox {
-            font-size: 14px;
-            margin: 0px 0px 10px 10px;
-            padding: 15px;
-            color: #301901;
-            display: inline-block;
-            background-color: #ffffe0;
-            border: 1px solid #e6db55;
-            border-radius: 3px;
-            width: 250px;
-            float: right;
-        }
-        .plugin .metadataSeparator {
-            background-color: lightgray;
-            color: #333;
-            border: 0px;
-            height: 1px;
-            width: 100%;
-        }
-    </style>
 
-    <div style="min-width: 650px;max-width:980px;">
+    <div class="pluginslistActionBar">
 
         <h2>Extend Piwik by installing a new plugin</h2>
 
@@ -52,25 +17,26 @@
             |
             <a href="{{ linkTo({'sort': 'alpha', 'query': ''}) }}">alpha</a>
             |
-            <form action="{{ linkTo({'sort': ''}) }}" method="POST" style="display:inline">
+            <form action="{{ linkTo({'sort': ''}) }}" method="POST">
                 <input value="{{ query }}" placeholder="Search" type="text" name="query"/>
                 <button type="submit">Search</button>
             </form>
         </div>
     </div>
 
-    <div class="pluginslist" style="">
+    <div class="pluginslist">
 
         {% if plugins|length %}
             {% for plugin in plugins %}
 
-                <div class="plugin" style="position:relative;">
+                <div class="plugin">
 
-                    <div style="margin-bottom: 47px;">
+                    <div class="content">
                         {% if plugin.isInstalled %}
                             <span class="install">Installed</span>
                         {% else %}
-                            <a href="{{ linkTo({'action': 'installPlugin', 'pluginName': plugin.name, 'nonce': nonce}) }}" class="install">Install</a>
+                            <a href="{{ linkTo({'action': 'installPlugin', 'pluginName': plugin.name, 'nonce': nonce}) }}"
+                               class="install">Install</a>
                         {% endif %}
 
                         <h3 class="header"><a href="javascript:return;" class="more">{{ plugin.name }}</a></h3>
@@ -79,11 +45,11 @@
                         </p>
                     </div>
 
-                    <div style="height:58px;position: absolute;bottom: 7px;left: 0px;right: 0px;">
+                    <div class="footer">
                         <hr class="metadataSeparator">
-                        <ul style="margin-left: 15px;margin-right: 15px;margin-top: 10px;">
+                        <ul class="metadata">
                             <li>Version: <strong>{{ plugin.latestVersion }}</strong></li>
-                            <li style="padding-right: 0px;">Updated: <strong>{{ plugin.lastUpdated }}</strong></li>
+                            <li class="even">Updated: <strong>{{ plugin.lastUpdated }}</strong></li>
                             <li>Downloads: <strong>{{ plugin.numDownloads }}</strong></li>
                         </ul>
                     </div>
diff --git a/plugins/CorePluginsAdmin/templates/browseThemes.twig b/plugins/CorePluginsAdmin/templates/browseThemes.twig
index 7946fb9c814..645ce9cd9c8 100644
--- a/plugins/CorePluginsAdmin/templates/browseThemes.twig
+++ b/plugins/CorePluginsAdmin/templates/browseThemes.twig
@@ -1,43 +1,8 @@
 {% extends 'admin.twig' %}
 
 {% block content %}
-    <style type="text/css">
-        .plugin li { display: inline-block;padding-right: 50px;font-size: 90%; }
-        .plugin ul { list-style: none;margin-left: 0; line-height: 140%; }
-        .plugin .description { padding-bottom: 10px; }
-        .plugin .install { float: right; }
-        .plugin .more { font-weight: bold; text-decoration: none; color: #1D3256 }
-        .plugin .metadata { margin-top: 10px; }
-        .plugin h3 { display: inline; }
-        .plugin { width: 280px; float: left; border: 1px solid #dadada; padding: 15px; background-color: #F6F5F3;
-            margin-right: 14px; margin-bottom: 15px; position: relative;
-        }
-        .plugin:hover {
-            background-color: #EFEEEC;
-        }
-        .themeslist { margin-top: 20px;max-width:980px;clear:right; }
-        .infoBox {
-            font-size: 14px;
-            margin: 0px 0px 10px 10px;
-            padding: 15px;
-            color: #301901;
-            display: inline-block;
-            background-color: #ffffe0;
-            border: 1px solid #e6db55;
-            border-radius: 3px;
-            width: 250px;
-            float: right;
-        }
-        .plugin .metadataSeparator {
-            background-color: lightgray;
-            color: #333;
-            border: 0px;
-            height: 1px;
-            width: 100%;
-        }
-    </style>
 
-    <div style="min-width: 650px;max-width:980px;">
+    <div class="pluginslistActionBar">
 
         <h2>Enjoy another look & feel by installing a new theme</h2>
 
@@ -52,36 +17,37 @@
             |
             <a href="{{ linkTo({'sort': 'alpha', 'query': ''}) }}">alpha</a>
             |
-            <form action="{{ linkTo({'sort': ''}) }}" method="POST" style="display:inline">
+            <form action="{{ linkTo({'sort': ''}) }}" method="POST">
                 <input value="{{ query }}" placeholder="Search" type="text" name="query"/>
                 <button type="submit">Search</button>
             </form>
         </div>
     </div>
 
-    <div class="themeslist" style="">
+    <div class="pluginslist themes">
 
         {% if plugins|length %}
             {% for plugin in plugins %}
 
                 <div class="plugin">
-                    <div style="margin-bottom: 57px;">
+                    <div class="content">
                         {% if plugin.isInstalled %}
                             <span class="install">Installed</span>
                         {% else %}
-                            <a href="{{ linkTo({'action': 'installPlugin', 'pluginName': plugin.name, 'nonce': nonce}) }}" class="install">Install</a>
+                            <a href="{{ linkTo({'action': 'installPlugin', 'pluginName': plugin.name, 'nonce': nonce}) }}"
+                               class="install">Install</a>
                         {% endif %}
 
                         <h3 class="header"><a href="javascript:return;" class="more">{{ plugin.name }}</a></h3>
                         <p class="description">{{ plugin.description }}</p>
-                        <a href="javascript:return;" class="more"><img src="{{ plugin.screenshots|first }}?w=250&h=250" height="250" width="250"/></a>
+                        <a href="javascript:return;" class="more"><img class="preview" src="{{ plugin.screenshots|first }}?w=250&h=250"/></a>
                     </div>
 
-                    <div style="height:55px;position: absolute;bottom: 7px;left: 0px;right: 0px;">
+                    <div class="footer">
                         <hr class="metadataSeparator">
-                        <ul style="margin-left: 15px;margin-right: 15px;" class="metadata">
+                        <ul class="metadata">
                             <li>Version: <strong>{{ plugin.latestVersion }}</strong></li>
-                            <li style="padding-right: 0px;">Updated: <strong>{{ plugin.lastUpdated }}</strong></li>
+                            <li class="even">Updated: <strong>{{ plugin.lastUpdated }}</strong></li>
                             <li>Downloads: <strong>{{ plugin.numDownloads }}</strong></li>
                         </ul>
                     </div>