diff --git a/css/level-selector.css b/css/level-selector.css
new file mode 100644
index 0000000..571d988
--- /dev/null
+++ b/css/level-selector.css
@@ -0,0 +1,45 @@
+#levelSelector {
+    max-width: 24em;
+    margin-left:auto;
+    margin-right:auto;
+}
+
+.levelItem {
+    width: 3em;
+    height: 2em;
+    border: 1px solid gray;
+    text-align: center;
+    font-size: 1.5em;
+    font-weight: bold;
+    color: white;
+    margin-left: 0.5em;
+    margin-bottom: 0.4em;
+    float: left;
+    padding-top: 1em;
+    cursor: pointer;
+    background:rgba(0,0,0,0.5);
+}
+
+.locked {
+    padding-top: 0.3em;
+    padding-bottom: 0.8em;
+    color: yellow;
+}
+
+.clearfix{zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";}
+.clearfix:after{clear:both;}
+
+#infoGraphics {
+    width: 100%;
+    text-align: center;
+}
+
+
+#badges {
+    text-align: center;
+    vertical-align: top;
+    position: fixed;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+}
diff --git a/index.html b/index.html
index 45afe5d..47f036b 100644
--- a/index.html
+++ b/index.html
@@ -5,17 +5,35 @@
 <meta charset="utf-8">
 <title>PF2015</title>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script>
+<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
 
 <script type="text/javascript" src="js/pexeso-controller.js"></script>
 <link rel="stylesheet" href="css/pexeso.css" type="text/css" />
 
+<script type="text/javascript" src="js/level-selector-controller.js"></script>
+<link rel="stylesheet" href="css/level-selector.css" type="text/css" />
+
 <link rel="stylesheet" href="css/flippy.css" />
 <script type="text/javascript" src="js/flippy.js"></script>
 </head>
 
-<body ng-controller="PexesoController" data-ng-init="init()">
-<div id="mainContent">
+<body>
 
+   <div id="levelSelector" ng-controller="LevelSelectorController" ng-show="isLevelSelectorVisible">
+        <h2>How to play:</h2>
+        <div id="infoGraphics">
+            <!--<img src="img/info.png"/>-->
+        </div>
+        <h2>Select level:</h2>
+        <div ng-repeat="level in levelLock" class="levelItem {{level.state}}">
+            <div ng-show="level.state == 'unlocked'" ng-click="startLevel($index)">{{level.text}}</div>
+            <div ng-show="level.state == 'locked'"><i class="fa fa-lock"></i></div>
+        </div>
+        <div class="clearfix"></div>
+    </div>
+
+
+<div id="mainContent" ng-controller="PexesoController" ng-show="isLevelVisible">
 
     <flippy ng-repeat="card in board" 
     class="fancy"
diff --git a/js/level-selector-controller.js b/js/level-selector-controller.js
new file mode 100644
index 0000000..2df3054
--- /dev/null
+++ b/js/level-selector-controller.js
@@ -0,0 +1,30 @@
+angular.module('level-selector', [])
+.controller('LevelSelectorController', function($scope, $rootScope) {
+    
+    $scope.isLevelSelectorVisible = true;
+    
+    $scope.levelLock = [
+            {state:'unlocked', text:'1'},
+            {state:'locked', text:'2'},
+            {state:'locked', text:'3'},
+            {state:'locked', text:'4'},
+            {state:'locked', text:'5'},
+            {state:'locked', text:'6'},
+            {state:'locked', text:'7'},
+            {state:'locked', text:'8'},
+            {state:'locked', text:'9'},
+            {state:'locked', text:'10'},
+            {state:'locked', text:'11'},
+            {state:'locked', text:'12'},
+            {state:'locked', text:'PF'}
+        ];
+
+    $scope.startLevel = function(levelIndex) {
+        $scope.isLevelSelectorVisible = false;
+        var args = {
+            levelIndex: levelIndex
+        };
+        $rootScope.$emit('startLevel', args);
+    };
+    
+});
\ No newline at end of file
diff --git a/js/pexeso-controller.js b/js/pexeso-controller.js
index 1b7de12..646fc69 100644
--- a/js/pexeso-controller.js
+++ b/js/pexeso-controller.js
@@ -1,5 +1,8 @@
-angular.module('app', ['angular-flippy'])
-.controller('PexesoController', function($scope, $timeout) {
+angular.module('app', ['angular-flippy', 'level-selector'])
+.controller('PexesoController', function($scope, $timeout, $rootScope) {
+    
+    $scope.isLevelVisible = false;
+    
     $scope.languages = {
         'cs-CZ': {
             title: 'Čeština'
@@ -210,10 +213,14 @@ angular.module('app', ['angular-flippy'])
     
     
     /**
-     * Initialize game.
+     * Start Level
      */
-    $scope.init = function() {
+    $scope.initLevel = function(event, args) {
         $scope.generateBoard(4*4);
+        $scope.isLevelVisible = true;
     };
     
+    
+    $rootScope.$on('startLevel', $scope.initLevel);
+    
 });
\ No newline at end of file
