diff --git a/README.md b/README.md
new file mode 100644
index 0000000..585bf9c
--- /dev/null
+++ b/README.md
@@ -0,0 +1,4 @@
+Symfony Standard Edition
+========================
+
+test pull request
diff --git a/app/Resources/views/base.html.twig b/app/Resources/views/base.html.twig
index 5448960..505108f 100644
--- a/app/Resources/views/base.html.twig
+++ b/app/Resources/views/base.html.twig
@@ -15,7 +15,7 @@
     <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
     <!-- Custom CSS -->
     <link href="/bootstrap/css/shop-homepage.css" rel="stylesheet">
-
+    <link href="/bootstrap/css/paginator.css" rel="stylesheet" type="text/css"/>
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>
diff --git a/app/Resources/views/category/detail.html.twig b/app/Resources/views/category/detail.html.twig
index 13b9283..9607d80 100644
--- a/app/Resources/views/category/detail.html.twig
+++ b/app/Resources/views/category/detail.html.twig
@@ -4,5 +4,9 @@
     <div class="row">
         {% include 'components/list.html.twig' %}
     </div>
+        
+    <div class="row">
+        {% include 'components/paginator.html.twig' with {'actualPageLink': 'category_detail'} %}
+    </div>
 {% endblock %}
 
diff --git a/app/Resources/views/components/paginator.html.twig b/app/Resources/views/components/paginator.html.twig
new file mode 100644
index 0000000..420fd55
--- /dev/null
+++ b/app/Resources/views/components/paginator.html.twig
@@ -0,0 +1,58 @@
+{% if attribute(paginator,'getPageCount') > 1 %}
+    <nav>
+        {% if category is defined %}
+              <ul class="pagination">
+                    {% if not attribute(paginator,'isFirst') %}
+                        <li>
+                                <a href="{{ path(actualPageLink, {"page": attribute(paginator,'getPage')-1, "slug": category.slug} )}}">
+                                        <span aria-hidden="true">Zpět</span>
+                                </a>
+                        </li>
+                    {% endif %}
+                    {% for i in showPage %}                   
+                            {% if i == 'gap' %}
+                                    <span class="gap">...</span>
+                            {% else %}	
+                                <li class="{% if i == attribute(paginator,'getPage') %}active{% endif %}">
+                                        <a href="{{ path(actualPageLink, {"page": i, "slug": category.slug} )}}">{{ i }}</a>
+                                </li>
+                            {% endif %}
+                    {% endfor %}
+                    {% if not attribute(paginator,'isLast') %}
+                        <li>
+                                <a href="{{ path(actualPageLink, {"page": attribute(paginator,'getPage')+1, "slug": category.slug} )}}">
+                                        <span>Další</span>
+                                </a>
+                        </li>
+                    {% endif %}
+            </ul>   
+        {% else %}
+              <ul class="pagination">
+                    {% if not attribute(paginator,'isFirst') %}
+                        <li>
+                                <a href="{{ path(actualPageLink, {"page": attribute(paginator,'getPage')-1} )}}">
+                                        <span aria-hidden="true">Zpět</span>
+                                </a>
+                        </li>
+                    {% endif %}
+                    {% for i in showPage %}                   
+                            {% if i == 'gap' %}
+                                    <span class="gap">...</span>
+                            {% else %}	
+                                <li class="{% if i == attribute(paginator,'getPage') %}active{% endif %}">
+                                        <a href="{{ path(actualPageLink, {"page": i} )}}">{{ i }}</a>
+                                </li>
+                            {% endif %}
+                    {% endfor %}
+                    {% if not attribute(paginator,'isLast') %}
+                        <li>
+                                <a href="{{ path(actualPageLink, {"page": attribute(paginator,'getPage')+1} )}}">
+                                        <span>Další</span>
+                                </a>
+                        </li>
+                    {% endif %}
+            </ul>            
+        {% endif%}
+
+    </nav>
+{% endif %}
\ No newline at end of file
diff --git a/app/Resources/views/homepage/homepage.html.twig b/app/Resources/views/homepage/homepage.html.twig
index 13b9283..cf09ee5 100644
--- a/app/Resources/views/homepage/homepage.html.twig
+++ b/app/Resources/views/homepage/homepage.html.twig
@@ -4,5 +4,8 @@
     <div class="row">
         {% include 'components/list.html.twig' %}
     </div>
+    <div class="row">
+        {% include 'components/paginator.html.twig' with {'actualPageLink': 'homepage'} %}
+    </div>        
 {% endblock %}
 
diff --git a/src/AppBundle/Controller/CategoryController.php b/src/AppBundle/Controller/CategoryController.php
index 6e6a457..70a03c1 100644
--- a/src/AppBundle/Controller/CategoryController.php
+++ b/src/AppBundle/Controller/CategoryController.php
@@ -8,7 +8,7 @@
 use Symfony\Bundle\FrameworkBundle\Controller\Controller;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
-
+use AppBundle\Utils\PaginatorHelper;
 /**
  * @author Jan Klat <jenik@klatys.cz>
  */
@@ -23,16 +23,24 @@ class CategoryController extends Controller
 	 */
 	public function categoryDetail(Request $request)
 	{
+                $page = $request->query->get('page');
 		$category = $this->getDoctrine()->getRepository(Category::class)->findOneBy([
 			"slug" => $request->attributes->get("slug"),
 		]);
-
+        
 		if (!$category) {
 			throw new NotFoundHttpException("Kategorie neexistuje");
-		}
+		}               
 
+		$paginator = new PaginatorHelper;
+                $products = $this->getDoctrine()->getRepository(Product::class)->countByCategory($category);
+		$paginator->setItemCount($products);
+		$itemsPerPage = 2;
+		$paginator->setItemsPerPage($itemsPerPage);
+		$paginator->setPage($page);                
+dump($products);
 		return [
-			"products" => $this->getDoctrine()->getRepository(Product::class)->findByCategory($category),
+			"products" => $this->getDoctrine()->getRepository(Product::class)->findByCategoryAndLimit($category, $paginator->getLength(), $paginator->getOffset()),
 			"categories" => $this->getDoctrine()->getRepository(Category::class)->findBy(
 				[
 					"parentCategory" => $category,
@@ -42,7 +50,17 @@ public function categoryDetail(Request $request)
 				]
 			),
 			"category" => $category,
+			"paginator" => $paginator,
+			"showPage" => $paginator->getPageOffer()                    
 		];
-	}
+	}       
+        
+/*	public function renderShow($id, $page, $more = null, $order = null) {
+
+
+		return [
+            
+		];                	
+	}  */      
 
 }
diff --git a/src/AppBundle/Controller/HomepageController.php b/src/AppBundle/Controller/HomepageController.php
index 1abe442..3d1cdf0 100644
--- a/src/AppBundle/Controller/HomepageController.php
+++ b/src/AppBundle/Controller/HomepageController.php
@@ -5,7 +5,8 @@
 use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
 use Symfony\Bundle\FrameworkBundle\Controller\Controller;
 use Symfony\Component\Routing\Annotation\Route;
-
+use Symfony\Component\HttpFoundation\Request;
+use AppBundle\Utils\PaginatorHelper;
 /**
  * @author Jan Klat <jenik@klatys.cz>
  */
@@ -14,16 +15,27 @@ class HomepageController extends Controller
 	/**
 	 * @Route("/", name="homepage")
 	 * @Template("homepage/homepage.html.twig")
+	 * @param Request $request
 	 */
-	public function homepageAction()
+	public function homepageAction(Request $request)
 	{
+                $page = $request->query->get('page');
+
+		$paginator = new PaginatorHelper;
+                $products = $this->getDoctrine()->getRepository(Product::class)->countAll();
+		$paginator->setItemCount($products);
+		$itemsPerPage = 2;
+		$paginator->setItemsPerPage($itemsPerPage);
+		$paginator->setPage($page);   
+
 		return [
 			"products" => $this->getDoctrine()->getRepository(Product::class)->findBy(
 				[],
 				[
 					"rank" => "desc"
 				],
-				21
+				$paginator->getLength(),
+                                $paginator->getOffset()
 			),
 			"categories" => $this->getDoctrine()->getRepository(Category::class)->findBy(
 				[
@@ -33,7 +45,9 @@ public function homepageAction()
 					"rank" => "desc",
 				]
 			),
-		];
+			"paginator" => $paginator,
+			"showPage" => $paginator->getPageOffer()                    
+		];            
 	}
 
 }
diff --git a/src/AppBundle/Repository/ProductRepository.php b/src/AppBundle/Repository/ProductRepository.php
index ac70f55..1519217 100644
--- a/src/AppBundle/Repository/ProductRepository.php
+++ b/src/AppBundle/Repository/ProductRepository.php
@@ -5,6 +5,7 @@
 use AppBundle\Entity\Category;
 use AppBundle\Entity\Product;
 use Doctrine\ORM\EntityRepository;
+use Doctrine\ORM\Tools\Pagination\Paginator;
 
 class ProductRepository extends EntityRepository
 {
@@ -26,5 +27,44 @@ public function findByCategory(Category $category)
 			->setParameter("rgt", $category->getRight())
 			->getResult();
 	}
+        
+        /**
+	 * @param Category $category
+	 * @return Product[]
+	 */
+	public function findByCategoryAndLimit(Category $category, $length, $offset)
+	{
+		return $query =  $this->_em->createQuery('SELECT p
+			FROM AppBundle\Entity\Product p
+			JOIN AppBundle\Entity\ProductCategory pc WITH p = pc.product
+			JOIN AppBundle\Entity\Category c WITH pc.category = c
+			WHERE c.left >= :lft and c.right <= :rgt
+			GROUP BY p
+		')
+			->setParameter("lft", $category->getLeft())
+			->setParameter("rgt", $category->getRight())
+                        ->setFirstResult($offset)
+                        ->setMaxResults($length)
+			->getResult();
+                return $paginator = new Paginator($query, $fetchJoinCollection = true);
+	}
+        
+        public function countAll() {
+            $query = $this->_em->createQuery('SELECT COUNT(p.id) FROM AppBundle\Entity\Product p');
+            return $count = $query->getSingleScalarResult();
+        }
+        
+        public function countByCategory(Category $category) {
+            $query = $this->_em->createQuery('SELECT COUNT(p.id)
+			FROM AppBundle\Entity\Product p
+			LEFT JOIN AppBundle\Entity\ProductCategory pc WITH p = pc.product
+			LEFT JOIN AppBundle\Entity\Category c WITH pc.category = c
+			WHERE c.left >= :lft and c.right <= :rgt
 
+		')
+			->setParameter("lft", $category->getLeft())
+			->setParameter("rgt", $category->getRight());  
+            dump($query->getScalarResult());
+            return $count = $query->getSingleScalarResult();
+        }
 }
diff --git a/src/AppBundle/Utils/PaginatorHelper.php b/src/AppBundle/Utils/PaginatorHelper.php
new file mode 100644
index 0000000..8044622
--- /dev/null
+++ b/src/AppBundle/Utils/PaginatorHelper.php
@@ -0,0 +1,256 @@
+<?php
+
+/**
+ * Upravena trida paginator z nette
+ * This file is part of the Nette Framework (https://nette.org)
+ * Copyright (c) 2004 David Grudl (https://davidgrudl.com)
+ */
+
+namespace AppBundle\Utils;
+
+
+/**
+ * Paginating math.
+ *
+ * @property   int $page
+ * @property-read int $firstPage
+ * @property-read int|NULL $lastPage
+ * @property   int $base
+ * @property-read bool $first
+ * @property-read bool $last
+ * @property-read int|NULL $pageCount
+ * @property   int $itemsPerPage
+ * @property   int|NULL $itemCount
+ * @property-read int $offset
+ * @property-read int|NULL $countdownOffset
+ * @property-read int|NULL $length
+ */
+class PaginatorHelper
+{
+        //use Nette\SmartObject;
+
+	/** @var int */
+	private $base = 1;
+
+	/** @var int */
+	private $itemsPerPage = 1;
+
+	/** @var int */
+	private $page;
+
+	/** @var int|NULL */
+	private $itemCount;
+
+
+	/**
+	 * Sets current page number.
+	 * @param  int
+	 * @return self
+	 */
+	public function setPage($page)
+	{
+		$this->page = (int) $page;
+		return $this;
+	}
+
+
+	/**
+	 * Returns current page number.
+	 * @return int
+	 */
+	public function getPage()
+	{
+		return $this->base + $this->getPageIndex();
+	}
+
+
+	/**
+	 * Returns first page number.
+	 * @return int
+	 */
+	public function getFirstPage()
+	{
+		return $this->base;
+	}
+
+
+	/**
+	 * Returns last page number.
+	 * @return int|NULL
+	 */
+	public function getLastPage()
+	{
+		return $this->itemCount === NULL ? NULL : $this->base + max(0, $this->getPageCount() - 1);
+	}
+
+
+	/**
+	 * Sets first page (base) number.
+	 * @param  int
+	 * @return self
+	 */
+	public function setBase($base)
+	{
+		$this->base = (int) $base;
+		return $this;
+	}
+
+
+	/**
+	 * Returns first page (base) number.
+	 * @return int
+	 */
+	public function getBase()
+	{
+		return $this->base;
+	}
+
+
+	/**
+	 * Returns zero-based page number.
+	 * @return int
+	 */
+	protected function getPageIndex()
+	{
+		$index = max(0, $this->page - $this->base);
+		return $this->itemCount === NULL ? $index : min($index, max(0, $this->getPageCount() - 1));
+	}
+
+
+	/**
+	 * Is the current page the first one?
+	 * @return bool
+	 */
+	public function isFirst()
+	{
+		return $this->getPageIndex() === 0;
+	}
+
+
+	/**
+	 * Is the current page the last one?
+	 * @return bool
+	 */
+	public function isLast()
+	{
+		return $this->itemCount === NULL ? FALSE : $this->getPageIndex() >= $this->getPageCount() - 1;
+	}
+
+
+	/**
+	 * Returns the total number of pages.
+	 * @return int|NULL
+	 */
+	public function getPageCount()
+	{
+		return $this->itemCount === NULL ? NULL : (int) ceil($this->itemCount / $this->itemsPerPage);
+	}
+
+
+	/**
+	 * Sets the number of items to display on a single page.
+	 * @param  int
+	 * @return self
+	 */
+	public function setItemsPerPage($itemsPerPage)
+	{
+		$this->itemsPerPage = max(1, (int) $itemsPerPage);
+		return $this;
+	}
+
+
+	/**
+	 * Returns the number of items to display on a single page.
+	 * @return int
+	 */
+	public function getItemsPerPage()
+	{
+		return $this->itemsPerPage;
+	}
+
+
+	/**
+	 * Sets the total number of items.
+	 * @param  int (or NULL as infinity)
+	 * @return self
+	 */
+	public function setItemCount($itemCount)
+	{
+		$this->itemCount = ($itemCount === FALSE || $itemCount === NULL) ? NULL : max(0, (int) $itemCount);
+		return $this;
+	}
+
+
+	/**
+	 * Returns the total number of items.
+	 * @return int|NULL
+	 */
+	public function getItemCount()
+	{
+		return $this->itemCount;
+	}
+
+
+	/**
+	 * Returns the absolute index of the first item on current page.
+	 * @return int
+	 */
+	public function getOffset()
+	{
+		return $this->getPageIndex() * $this->itemsPerPage;
+	}
+
+
+	/**
+	 * Returns the absolute index of the first item on current page in countdown paging.
+	 * @return int|NULL
+	 */
+	public function getCountdownOffset()
+	{
+		return $this->itemCount === NULL
+			? NULL
+			: max(0, $this->itemCount - ($this->getPageIndex() + 1) * $this->itemsPerPage);
+	}
+
+
+	/**
+	 * Returns the number of items on current page.
+	 * @return int|NULL
+	 */
+	public function getLength()
+	{
+		return $this->itemCount === NULL
+			? $this->itemsPerPage
+			: min($this->itemsPerPage, $this->itemCount - $this->getPageIndex() * $this->itemsPerPage);
+	}
+        
+	public function getPageOffer() {
+		$minRange = $this->getPage() - 2;
+		$maxRange = $this->getPage() + 1;
+		$showPage = array();
+		$showPage[] = $this->getFirstPage();
+		foreach (range($minRange, $maxRange) as $page) {
+			if ($page < 1 || $page == $this->getFirstPage()) {
+				continue;
+			}
+			if ($page == $this->getLastPage()) {
+				break;
+			}
+			$showPage[] = $page;
+		}
+		//nasleduje doplneni mezery pred poslednim a po prvnim
+		$showPage[] = $this->getLastPage();
+		if ($showPage[1] != 2) { // druha hodnota musi byt 2 jinak gap
+			$insert = array('gap');
+			array_splice($showPage, 1, 0, $insert);
+		}
+		end($showPage);
+		$lastKey = key($showPage);
+		if ($showPage[$lastKey - 1] + 1 != $showPage[$lastKey]) { // predposledni musi byt o jedna mensi nez posledni jinak gap
+			$insert = array('gap');
+			array_splice($showPage, $lastKey, 0, $insert);
+		}
+		return $showPage;
+	}          
+
+}
\ No newline at end of file
diff --git a/web/bootstrap/css/paginator.css b/web/bootstrap/css/paginator.css
new file mode 100644
index 0000000..f0f9d6d
--- /dev/null
+++ b/web/bootstrap/css/paginator.css
@@ -0,0 +1,21 @@
+/*
+To change this license header, choose License Headers in Project Properties.
+To change this template file, choose Tools | Templates
+and open the template in the editor.
+*/
+/* 
+    Created on : 15.10.2016, 22:48:57
+    Author     : ales
+*/
+
+.pagination .gap,.pagination .gap:hover{
+    position:relative;
+    float:left;
+    padding:6px 12px;
+    margin-left:-1px;
+    line-height:1.42857143;
+    color:#337ab7;
+    text-decoration:none;
+    background-color:#fff;
+    border:1px solid #ddd
+}
\ No newline at end of file
diff --git a/web/config.php b/web/config.php
index 1368c8a..a031a3a 100644
--- a/web/config.php
+++ b/web/config.php
@@ -38,9 +38,216 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
         <meta name="robots" content="noindex,nofollow" />
         <title>Symfony Configuration Checker</title>
-        <link rel="stylesheet" href="bundles/framework/css/structure.css" media="all" />
-        <link rel="stylesheet" href="bundles/framework/css/body.css" media="all" />
-        <style type="text/css">
+        <style>
+            /* styles copied from symfony framework bundle */
+            html {
+                background: #eee;
+            }
+            body {
+                font: 11px Verdana, Arial, sans-serif;
+                color: #333;
+            }
+            .sf-reset, .sf-reset .block, .sf-reset #message {
+                margin: auto;
+            }
+            img {
+                border: 0;
+            }
+            .clear {
+                clear: both;
+                height: 0;
+                font-size: 0;
+                line-height: 0;
+            }
+            .clear-fix:after {
+                content: "\0020";
+                display: block;
+                height: 0;
+                clear: both;
+                visibility: hidden;
+            }
+            .clear-fix {
+                display: inline-block;
+            }
+            * html .clear-fix {
+                height: 1%;
+            }
+            .clear-fix {
+                display: block;
+            }
+            .header {
+                padding: 30px 30px 20px 30px;
+            }
+            .header-logo {
+                float: left;
+            }
+            .search {
+                float: right;
+                padding-top: 20px;
+            }
+            .search label {
+                line-height: 28px;
+                vertical-align: middle;
+            }
+            .search input {
+                width: 195px;
+                font-size: 12px;
+                border: 1px solid #dadada;
+                background: #fff url(data:image/gif;base64,R0lGODlhAQAFAKIAAPX19e/v7/39/fr6+urq6gAAAAAAAAAAACH5BAAAAAAALAAAAAABAAUAAAMESAEjCQA7) repeat-x left top;
+                padding: 5px 6px;
+                color: #565656;
+            }
+            .search input[type="search"] {
+                -webkit-appearance: textfield;
+            }
+            #content {
+                width: 970px;
+                margin: 0 auto;
+            }
+            #content pre {
+                white-space: normal;
+                font-family: Arial, Helvetica, sans-serif;
+            }
+
+            /*
+            Copyright (c) 2010, Yahoo! Inc. All rights reserved.
+            Code licensed under the BSD License:
+            http://developer.yahoo.com/yui/license.html
+            version: 3.1.2
+            build: 56
+            */
+            .sf-reset div,.sf-reset dl,.sf-reset dt,.sf-reset dd,.sf-reset ul,.sf-reset ol,.sf-reset li,.sf-reset h1,.sf-reset h2,.sf-reset h3,.sf-reset h4,.sf-reset h5,.sf-reset h6,.sf-reset pre,.sf-reset code,.sf-reset form,.sf-reset fieldset,.sf-reset legend,.sf-reset input,.sf-reset textarea,.sf-reset p,.sf-reset blockquote,.sf-reset th,.sf-reset td{margin:0;padding:0;}.sf-reset table{border-collapse:collapse;border-spacing:0;}.sf-reset fieldset,.sf-reset img{border:0;}.sf-reset address,.sf-reset caption,.sf-reset cite,.sf-reset code,.sf-reset dfn,.sf-reset em,.sf-reset strong,.sf-reset th,.sf-reset var{font-style:normal;font-weight:normal;}.sf-reset li{list-style:none;}.sf-reset caption,.sf-reset th{text-align:left;}.sf-reset h1,.sf-reset h2,.sf-reset h3,.sf-reset h4,.sf-reset h5,.sf-reset h6{font-size:100%;font-weight:normal;}.sf-reset q:before,.sf-reset q:after{content:'';}.sf-reset abbr,.sf-reset acronym{border:0;font-variant:normal;}.sf-reset sup{vertical-align:text-top;}.sf-reset sub{vertical-align:text-bottom;}.sf-reset input,.sf-reset textarea,.sf-reset select{font-family:inherit;font-size:inherit;font-weight:inherit;}.sf-reset input,.sf-reset textarea,.sf-reset select{font-size:100%;}.sf-reset legend{color:#000;}
+            .sf-reset abbr {
+                border-bottom: 1px dotted #000;
+                cursor: help;
+            }
+            .sf-reset p {
+                font-size: 14px;
+                line-height: 20px;
+                padding-bottom: 20px;
+            }
+            .sf-reset strong {
+                color: #313131;
+                font-weight: bold;
+            }
+            .sf-reset a {
+                color: #6c6159;
+            }
+            .sf-reset a img {
+                border: none;
+            }
+            .sf-reset a:hover {
+                text-decoration: underline;
+            }
+            .sf-reset em {
+                font-style: italic;
+            }
+            .sf-reset h2,
+            .sf-reset h3 {
+                font-weight: bold;
+            }
+            .sf-reset h1 {
+                font-family: Georgia, "Times New Roman", Times, serif;
+                font-size: 20px;
+                color: #313131;
+                word-wrap: break-word;
+            }
+            .sf-reset li {
+                padding-bottom: 10px;
+            }
+            .sf-reset .block {
+                -moz-border-radius: 16px;
+                -webkit-border-radius: 16px;
+                border-radius: 16px;
+                margin-bottom: 20px;
+                background-color: #FFFFFF;
+                border: 1px solid #dfdfdf;
+                padding: 40px 50px;
+                word-break: break-all;
+            }
+            .sf-reset h2 {
+                font-size: 16px;
+                font-family: Arial, Helvetica, sans-serif;
+            }
+            .sf-reset li a {
+                background: none;
+                color: #868686;
+                text-decoration: none;
+            }
+            .sf-reset li a:hover {
+                background: none;
+                color: #313131;
+                text-decoration: underline;
+            }
+            .sf-reset ol {
+                padding: 10px 0;
+            }
+            .sf-reset ol li {
+                list-style: decimal;
+                margin-left: 20px;
+                padding: 2px;
+                padding-bottom: 20px;
+            }
+            .sf-reset ol ol li {
+                list-style-position: inside;
+                margin-left: 0;
+                white-space: nowrap;
+                font-size: 12px;
+                padding-bottom: 0;
+            }
+            .sf-reset li .selected {
+                background-color: #ffd;
+            }
+            .sf-button {
+                display: -moz-inline-box;
+                display: inline-block;
+                text-align: center;
+                vertical-align: middle;
+                border: 0;
+                background: transparent none;
+                text-transform: uppercase;
+                cursor: pointer;
+                font: bold 11px Arial, Helvetica, sans-serif;
+            }
+            .sf-button span {
+                text-decoration: none;
+                display: block;
+                height: 28px;
+                float: left;
+            }
+            .sf-button .border-l {
+                text-decoration: none;
+                display: block;
+                height: 28px;
+                float: left;
+                padding: 0 0 0 7px;
+                background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAcCAYAAACtQ6WLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQtJREFUeNpiPHnyJAMakARiByDWYEGT8ADiYGVlZStubm5xlv///4MEQYoKZGRkQkRERLRYWVl5wYJQyXBZWdkwCQkJUxAHKgaWlAHSLqKiosb//v1DsYMFKGCvoqJiDmQzwXTAJYECulxcXNLoumCSoszMzDzoumDGghQwYZUECWIzkrAkSIIGOmlkLI10AiX//P379x8jIyMTNmPf/v79+ysLCwsvuiQoNi5//fr1Kch4dAyS3P/gwYMTQBP+wxwHw0xA4gkQ73v9+vUZdJ2w1Lf82bNn4iCHCQoKasHsZw4ODgbRIL8c+/Lly5M3b978Y2dn5wC6npkFLXnsAOKLjx49AmUHLYAAAwBoQubG016R5wAAAABJRU5ErkJggg==) no-repeat top left;
+            }
+            .sf-button .border-r {
+                padding: 0 7px 0 0;
+                background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAcCAYAAACtQ6WLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAR1JREFUeNpiPHnyZCMDA8MNID5gZmb2nAEJMH7//v3N169fX969e/cYkL8WqGAHXPLv37//QYzfv39/fvPmzbUnT56sAXInmJub/2H5/x8sx8DCwsIrISFhDmQyPX78+CmQXs70798/BmQsKipqBNTgdvz4cWkmkE5kDATMioqKZkCFdiwg1eiAi4tLGqhQF24nMmBmZuYEigth1QkEbEBxTlySYPvJkwSJ00AnjYylgU6gxB8g/oFVEphkvgLF32KNMmCCewYUv4qhEyj47+HDhyeBzIMYOoEp8CxQw56wsLAncJ1//vz5/P79+2svX74EJc2V4BT58+fPd8CE/QKYHMGJOiIiAp6oWW7evDkNSF8DZYfIyEiU7AAQYACJ2vxVdJW4eQAAAABJRU5ErkJggg==) right top no-repeat;
+            }
+            .sf-button .btn-bg {
+                padding: 0 14px;
+                color: #636363;
+                line-height: 28px;
+                background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAYAAACgXdXMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAClJREFUeNpiPnny5EKGf//+/Wf6//8/A4QAcrGzKCZwGc9sa2urBBBgAIbDUoYVp9lmAAAAAElFTkSuQmCC) repeat-x top left;
+            }
+            .sf-button:hover .border-l,
+            .sf-button-selected .border-l {
+                background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAcCAYAAACtQ6WLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAR9JREFUeNpi/P//PwMyOHfunDqQSgNiexZkibNnzxYBqZa3HOs5v7PcYQBLnjlzhg1IbfzIdsTjA/t+ht9Mr8GKwZL//v3r+sB+0OMN+zqIEf8gFMvJkyd1gXTOa9YNDP//otrPAtSV/Jp9HfPff78Z0AEL0LUeXxivMfxD0wXTqfjj/2ugkf+wSrL9/YtpJEyS4S8WI5Ek/+GR/POPFjr//cenE6/kP9q4Fo/kr39/mdj+M/zFkGQCSj5i+ccPjLJ/GBgkuYOHQR1sNDpmAkb2LBmWwL///zKCIxwZM0VHR18G6p4uxeLLAA4tJMwEshiou1iMxXaHLGswA+t/YbhORuQUv2DBAnCifvxzI+enP3dQJUFg/vz5sOzgBBBgAPxX9j0YnH4JAAAAAElFTkSuQmCC) no-repeat top left;
+            }
+            .sf-button:hover .border-r,
+            .sf-button-selected .border-r {
+                background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAcCAYAAACtQ6WLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAT5JREFUeNpiPHv27BkGBoaDQDzLyMjoJgMSYHrM3WX8hn1d0f///88DFRYhSzIuv2X5H8Rg/SfKIPDTkYH/l80OINffxMTkF9O/f/8ZQPgnwyuGl+wrGd6x7vf49+9fO9jYf3+Bkkj4NesmBqAV+SdPntQC6vzHgIz//gOawbqOGchOxtAJwp8Zr4F0e7D8/fuPAR38/P8eZIo0yz8skv8YvoIk+YE6/zNgAyD7sRqLkPzzjxY6/+HS+R+fTkZ8djLh08lCUCcuSWawJGbwMTGwg7zyBatX2Bj5QZKPsBrLzaICktzN8g/NWEYGZgYZjoC/wMiei5FMpFh8QPSU6Ojoy3Cd7EwiDBJsDgxiLNY7gLrKQGIsHAxSDHxAO2TZ/b8D+TVxcXF9MCtYtLiKLgDpfUDVsxITE1GyA0CAAQA2E/N8VuHyAAAAAABJRU5ErkJggg==) right top no-repeat;
+            }
+            .sf-button:hover .btn-bg,
+            .sf-button-selected .btn-bg {
+                color: #FFFFFF;
+                text-shadow:0 1px 1px #6b9311;
+                background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAIAAAAvP0KbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEFJREFUeNpiPnv2LNMdvlymf///M/37B8R/QfQ/MP33L4j+B6Qh7L9//sHpf2h8MA1V+w/KRjYLaDaLCU8vQIABAFO3TxZriO4yAAAAAElFTkSuQmCC) repeat-x top left;
+            }
+
             /* styles copied from bundles/sensiodistribution/webconfigurator/css/install.css */
             body {
                 font-size: 14px;
@@ -126,7 +333,7 @@
         <div id="content">
             <div class="header clear-fix">
                 <div class="header-logo">
-                    <img src="bundles/framework/images/logo_symfony.png" alt="Symfony" />
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALYAAAA+CAMAAACxzRGDAAAAUVBMVEX////Ly8yko6WLioxkYmVXVVkwLjLl5eWxsLJKSEzy8vJxcHLY2Ni+vb89Oz9XVVh+fH+Yl5n///+xsbLY2Nlxb3KkpKWXlph+fX+LiYy+vr/IZP61AAAAAXRSTlMAQObYZgAABRBJREFUeNrVmtuWoyAQRS1FEEQSzQU7//+hYxUiXsKQZLJWM+chsUloN+WhCuguYoKyYqzmvGasKqH4HyRKxndipcgcumH8qViTM7TkUclcwaHmf5XM0eWq4km1KjdqXfMXJHVe1J3hL8lk5fCGv6wmT+o0d87U+XNrk0Y9nfv+7LM6ZJH5ZBL6LAbSxQ3Q5FDr22Skr8PQSy4n7isnsQxSX4r6pobhjCHHeDNOKrO3yGmCvZOjV9jmt8ulTdXFKdbKLNh+kOMvBzuVRa4Y7MUsdEUSWQe7xxCfZmcwjHU83LqzFvSbJQOXQvptbPnEFoyZtUUGwTeKuLuTHyT1kaP0P6cR01OKvv448gtl61dqZfmJezQmU/t+1R2fJLtBwXV6uWGwB9SZPrn0fKO2WAvQN1PUhHjTom3xgXYTkvlSKHs19OhslETq6X3HrXbjt8XbGj9b4Gi+lUAnL6XxQj8Pyk9N4Bt1xUrsLVN/3isYMug8rODMdbgOvoHs8uAb2fcANIAzkKCLYy+AXRpSU8sr1r4P67xhLgPp7vM32zlqt7Bhq2fI1Hwp+VgANxok59SsGV3oqdUL0YVDMRY7Yg8QLbVUU4NZNoOq5hJHuxEM28Sh/IyUZ8D3reR+yc58EGvOy2U0HQL6G9V+kWyEWHmzaMx6t4o9RhOm/riUiYrzqij4Ptqkn7AaCXqc+F47m04ahfde7YIz8RHEBN6BdVwdIGRVdNbKqYu1Hc0x0wBY4wqC8+XUgBGnj81SZsQB+0yAS1x/BlI/6ebHHk0lauQLuPDpu6EwAVJ7T0rl2uXa23jcqNyOZekhqYHRz3JOANrF4wCCmEs1f9D1lUe0n4NAATed80Y5e0Q7CO2TezM/BR6wKdgQzKbCF4uOQC3Bk0fKAzbFlyRWg3gksA/gmm7eOjrpaKX7fHlEW2xLbE6GZsPiCiShVzN7RG2xTz2G+OJtEqzdJ7APxy3MrSsV0VukXbKMp9lhs5BN6dr3CN+sySUaoxGwfRUM3I/gdPYONgVU+PLX4vUWm32AvUySarbONvcpV2RQEPKKjEBHFk01kQDGRblnn8ZuE9g+JUl8OWAPbkFK2K6JxhJVvF47FzYYnAN22ttwxKYCoH36rheEB7KG/HF/YUaa2G5JF+55tpyrl7B1WHM39HuP2N2EXPl1UBu8vbj4OjvD+NoTE4ssF+ScARgaJY1N7+u8bY/Y9BSM5PKwJbvMVab32YP5FB5TtcYVrGoASolVLTzI7kVsYVxRtAb5n2JXq1vCdtd47XtYItynrN0835PasLg0y13aOPbmPI+on2Lr9e5tjSHvgkAvclUjL3Fsdaw03IzgTR62yYClk7QMah4IQ0qSsoYYbOix6zJR1ZGDNMOY3Bb6W5S6jiyovep3t7bUPyoq7OkjYumrfESp8zSBc/OLosVf+nTnnKjsqR16++WDwpI8FxJWRFTlI6NKnqYJaL96TqjAbo9Toi5QiWBDcmfdFV+T8dkvFe5bItgstbM2X6QG2mVun+cazfRwOS0eiaeRRJKgLfc3BQAqfnhJyz8lfR6580SF/FXVu83Nz1xrrnFqqXL6Qxl47DNSm4RFflvN5sABDD8peouqLLKQXVdGbnqf+qIpOxON4ZyYdJEJ6sy4zS2c5eRPTT4Jyp46qDE5/ptAWqJOQ9e6yE82FXBbZCk1/tXVoshVoopE3CB0zmraI3nbqCJ/gW3ZMgtbC5nh/QHlOoOZBxQCRgAAAABJRU5ErkJggg==" alt="Symfony" />
                 </div>
 
                 <div class="search">
@@ -134,7 +341,7 @@
                     <div class="form-row">
 
                       <label for="search-id">
-                          <img src="bundles/framework/images/grey_magnifier.png" alt="Search on Symfony website" />
+                                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAABUElEQVQoz2NgAIJ29iBdD0d7X2cPb+tY2f9MDMjgP2O2hKu7vS8CBlisZUNSMJ3fxRMkXO61wm2ue6I3iB1q8Z8ZriDZFCS03fm/wX+1/xp/TBo8QPxeqf+MUAW+QIFKj/+q/wX/c/3n/i/6Qd/bx943z/Q/K1SBI1D9fKv/AhCn/Wf5L5EHdFGKw39OqAIXoPpOMziX4T9/DFBBnuN/HqhAEtCKCNf/XDA/rZRyAmrpsvrPDVUw3wrkqCiLaewg6TohX1d7X0ffs5r/OaAKfinmgt3t4ulr4+Xg4ANip3j+l/zPArNT4LNOD0pAgWCSOUIBy3+h/+pXbBa5tni0eMx23+/mB1YSYnENroT5Pw/QSOX/mkCo+l/jgo0v2KJA643s8PgAmsMBDCbu/5xALHPB2husxN9uCzsDOgAq5kAoaZVnYMCh5Ky1r88Eh/+iABM8jUk7ClYIAAAAAElFTkSuQmCC" alt="Search on Symfony website" />
                       </label>
 
                       <input name="q" id="search-id" type="search" placeholder="Search on Symfony website" />