diff --git a/symbolon/index.html b/symbolon/index.html
index 824296c..aa95d1b 100644
--- a/symbolon/index.html
+++ b/symbolon/index.html
@@ -2,160 +2,174 @@
 ---
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>Symbolon</title>
-    <style>
-      div#holder {
-        overflow: auto;
-        height: 320px;
-      }
+    <head>
+        <meta charset="utf-8">
+        <title>Symbolon</title>
+        <style>
+            div#holder {
+                overflow: auto;
+                height: 320px;
+            }
 
-      div.card {
-        float: left;
-        margin-right: 1em;
-      }
+            div.card {
+                float: left;
+                margin-right: 1em;
+            }
 
-      p {
-        text-align: center;
-        border-bottom: 1px solid black;
-      }
+            p {
+                text-align: center;
+                border-bottom: 1px solid black;
+            }
 
-      img {
-        border: 0 none;
-      }
-    </style>
-    <link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css" type="text/css">
-    <script src="js/jquery-2.1.1.min.js"></script>
-    <script src="js/fancybox/source/jquery.fancybox.pack.js"></script>
-  </head>
-  <body>
-    <select>
-      <option value="">Mind / All</option>
-      <option value="aries">Kos / Aries</option>
-      <option value="taurus">Bika / Taurus</option>
-      <option value="gemini">Ikrek / Gemini</option>
-      <option value="cancer">Rák / Cancer</option>
-      <option value="leo">Oroszlán / Leo</option>
-      <option value="virgo">Szűz / Virgo</option>
-      <option value="libra">Mérleg / Libra</option>
-      <option value="scorpio">Skorpió / Scorpio</option>
-      <option value="sagittarius">Nyilas / Sagittarius</option>
-      <option value="capricorn">Bak / Capricorn</option>
-      <option value="aquarius">Vízöntő / Aquarius</option>
-      <option value="pisces">Halak / Pisces</option>
-    </select>
+            img {
+                border: 0 none;
+            }
+        </style>
+        <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
 
-    <select>
-      <option value="">Mind / All</option>
-      <option value="aries">Kos / Aries</option>
-      <option value="taurus">Bika / Taurus</option>
-      <option value="gemini">Ikrek / Gemini</option>
-      <option value="cancer">Rák / Cancer</option>
-      <option value="leo">Oroszlán / Leo</option>
-      <option value="virgo">Szűz / Virgo</option>
-      <option value="libra">Mérleg / Libra</option>
-      <option value="scorpio">Skorpió / Scorpio</option>
-      <option value="sagittarius">Nyilas / Sagittarius</option>
-      <option value="capricorn">Bak / Capricorn</option>
-      <option value="aquarius">Vízöntő / Aquarius</option>
-      <option value="pisces">Halak / Pisces</option>
-    </select>
+        <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
+        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+    </head>
+    <body>
+        <div class="container">
+            <select>
+                <option value="">Mind / All</option>
+                <option value="aries">Kos / Aries</option>
+                <option value="taurus">Bika / Taurus</option>
+                <option value="gemini">Ikrek / Gemini</option>
+                <option value="cancer">Rák / Cancer</option>
+                <option value="leo">Oroszlán / Leo</option>
+                <option value="virgo">Szűz / Virgo</option>
+                <option value="libra">Mérleg / Libra</option>
+                <option value="scorpio">Skorpió / Scorpio</option>
+                <option value="sagittarius">Nyilas / Sagittarius</option>
+                <option value="capricorn">Bak / Capricorn</option>
+                <option value="aquarius">Vízöntő / Aquarius</option>
+                <option value="pisces">Halak / Pisces</option>
+            </select>
 
-    <button id="draw">Húzz egyet / Draw one</button>
+            <select>
+                <option value="">Mind / All</option>
+                <option value="aries">Kos / Aries</option>
+                <option value="taurus">Bika / Taurus</option>
+                <option value="gemini">Ikrek / Gemini</option>
+                <option value="cancer">Rák / Cancer</option>
+                <option value="leo">Oroszlán / Leo</option>
+                <option value="virgo">Szűz / Virgo</option>
+                <option value="libra">Mérleg / Libra</option>
+                <option value="scorpio">Skorpió / Scorpio</option>
+                <option value="sagittarius">Nyilas / Sagittarius</option>
+                <option value="capricorn">Bak / Capricorn</option>
+                <option value="aquarius">Vízöntő / Aquarius</option>
+                <option value="pisces">Halak / Pisces</option>
+            </select>
 
-    <hr>
+            <button type="button" class="btn" data-toggle="modal" data-target="#draw-one-modal" id="draw">Húzz egyet!</button>
 
-    <div id="holder">
+            <hr>
+
+            <div id="holder">
 {% assign list = site.data.symbolon | sort:'number'%}
 {% for s in list %}
 {%     assign image = '0' | append: s.number %}
+{% comment %}
+Using image|slice:-2,2 would be much easier here. However, it seems the
+slice filer is not working for some time now…
+{% endcomment %}
 {%     assign len = image | size %}
 {%     if len == 3 %}
 {%         assign image = '' | append: s.number %}
 {%     endif %}
-        <div class="card{% for sign in s.signs %} {{sign}}{% endfor %}">
-            <a id="card_{{image}}" class="fancybox" rel="group" href="images/{{image}}.jpg">
-                <img src="images/{{image}}.jpg" alt="{{s.name}}">
-            </a>
-            <p class="cim">{{s.number}}. {{s.name}}</p>
-        </div>
+                <div class="card{% for sign in s.signs %} {{sign}}{% endfor %}">
+                    <a id="card_{{image}}" rel="group" href="images/{{image}}.jpg">
+                        <img src="images/{{image}}.jpg" alt="{{s.name}}">
+                    </a>
+                    <p class="cim">{{s.number}}. {{s.name}}</p>
+                </div>
 {% endfor %}
-    </div>
+            </div>
+        </div>
 
-    <script>
-      $('select').change(function () {
-        var classes = new Array();
-        var single_card = false;
+        <div class="modal fade" id="draw-one-modal" tabindex="-1" role="dialog" aria-labelledby="draw-one-title">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                        <h4 class="modal-title" id="draw-one-title">Draw One</h4>
+                    </div>
 
-        $('select').each(function (i, e) {
-          sign = $(e).val();
+                    <div class="modal-body" id="draw-one-body">
+                        Body!
+                    </div>
 
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
 
-          if (sign != '') {
-            classes.push($(e).val());
-          }
-        });
+        <script>
+            $('select').change(function () {
+                var classes = new Array();
+                var single_card = false;
 
-        if (classes.length == 2 && (classes[0] == classes[1])) {
-          single_card = true;
-        }
+                $('select').each(function (i, e) {
+                    sign = $(e).val();
 
-        classes = classes.filter(function (e, i, arr) {
-          return arr.lastIndexOf(e) === i;
-        });
+                    if (sign != '') {
+                        classes.push($(e).val());
+                    }
+                });
 
-        selector = '';
+                if (classes.length == 2 && (classes[0] == classes[1])) {
+                    single_card = true;
+                }
 
-        $.map(classes, function (e) {
-          selector += '.' + e;
-        });
+                classes = classes.filter(function (e, i, arr) {
+                    return arr.lastIndexOf(e) === i;
+                });
 
-        if (single_card) {
-          selector = '.' + classes[0] + '[class="card ' + classes[0] + '"]';
-        }
+                selector = '';
 
-        console.log(selector);
+                $.map(classes, function (e) {
+                    selector += '.' + e;
+                });
 
-        $('div.card').show();
-        if (selector != '') {
-          $('div.card').not(selector).hide();
-        }
-      });
+                if (single_card) {
+                    selector = '.' + classes[0] + '[class="card ' + classes[0] + '"]';
+                }
 
-      function resize_holder() {
-        var winheight = $(window).height();
-        var holdertop = $('#holder').position().top;
-        $('#holder').height(winheight - holdertop - 10);
-      }
+                $('div.card').show();
 
-      $(document).ready(function () {
-        resize_holder();
+                if (selector != '') {
+                    $('div.card').not(selector).hide();
+                }
+            });
 
-        $('.fancybox').fancybox({
-          beforeShow: function() {
-            var alt = this.element.find('img').attr('alt');
-            this.inner.find('img').attr('alt', alt);
-            this.title = alt;
-          }
-        });
-      });
+            function resize_holder() {
+                var winheight = $(window).height();
+                var holdertop = $('#holder').position().top;
 
-      $(window).resize(function () {
-        resize_holder();
-      });
+                $('#holder').height(winheight - holdertop - 10);
+            }
 
-      $('#draw').click(function () {
-        count = $('div.card').length;
+            $(document).ready(function () {
+                resize_holder();
+            });
 
-        draw_num = Math.floor(Math.random() * count) + 1;
-        num_str  = (draw_num < 10) ? '0' + draw_num : draw_num;
-        draw_id  = '#card_' + num_str;
+            $(window).resize(function () {
+                resize_holder();
+            });
 
-        console.log(draw_id);
+            $('#draw-one-modal').on('show.bs.modal', function(e) {
+                count = $('div.card').length;
 
-        $(draw_id).click();
-      });
-    </script>
-  </body>
+                draw_num = Math.floor(Math.random() * count) + 1;
+                num_str  = (draw_num < 10) ? '0' + draw_num : draw_num;
+
+                $('#draw-one-body').html('');
+            });
+        </script>
+    </body>
 </html>
