diff --git a/Resources/views/Editor/index.html.twig b/Resources/views/Editor/index.html.twig
index 8a851bf..538e81a 100755
--- a/Resources/views/Editor/index.html.twig
+++ b/Resources/views/Editor/index.html.twig
@@ -1,6 +1,7 @@
 {% extends "ServerGroveTranslationEditorBundle::layout.html.twig" %}
 
 {% block sidebar %}
+
 <script>
     function showEntryListAll()
     {
@@ -13,6 +14,31 @@
                           .addClass('.table-striped');
     }
 
+    function showFilterEntries(val)
+    {
+        var $zebraStripedTable = $('.table-striped');
+
+        $zebraStripedTable.find('tbody tr').hide();
+        
+        // find alias
+        var $rows = $zebraStripedTable.find('tbody tr td.alias:contains('+ val +')');
+        $rows.parent('tr').show();
+        $rows.each(function() {
+            text = $(this).text().replace(val, '<span class="high">'+val+'</span>');
+            $(this).html(text);
+        });
+        //find values
+        var $rows = $zebraStripedTable.find('td .translation:contains('+ val +')');
+        $rows.closest('tr').show();
+        $rows.each(function() {
+            text = $(this).text().replace(val, '<span class="high">'+val+'</span>');
+            $(this).html(text);
+        });
+        // Update colors in remaining visible rows
+        $zebraStripedTable.removeClass('.table-striped')
+                          .addClass('.table-striped');
+    }
+
     function showEntryListMissing()
     {
         var $zebraStripedTable = $('.table-striped');
@@ -201,67 +227,81 @@
 }
 </style>
 
-<h5>Stats</h5>
-
+<div class="panel panel-info">
+    <div class="panel-heading">Stats</div>
 {% if defaultLocale %}
-<ul>
-    <li><a href="#" onclick="showEntryListAll()">Entries: {{ defaultLocale.getTranslations().count() }}</a></li>
-    <li><a href="#" onclick="showEntryListMissing()">Missing translations</a></li>
-</ul>
+    <div class="list-groput">
+        <a href="#" onclick="showEntryListAll()" class="list-group-item">Entries: <span class="badge">{{ defaultLocale.getTranslations().count() }}</span></a>
+        <a href="#" onclick="showEntryListMissing()" class="list-group-item">Missing translations</a>
+    </div>
 {% endif %}
+
 {% endblock %}
 
 {% block body %}
-<form id="newtranslation" style="display: none" method="POST" onsubmit="return saveEntryForm($('#newtranslation'))" action="{{path('sg_localeditor_add_translation')}}">
-    <label>Domain:</label>
-    <select id="domain" name="domain" style="width: 500px">
-    {% for bundle in bundleList %}
-        <option value="{{bundle.getName()}}">{{bundle.getName()}}</option>
-    {% endfor %}
-    </select>
-    <br/>
-
-    <label>File Name:</label>
-    <input type="text" id="fileName" name="fileName" style="width: 700px"/>
-    <br/>
-
-    <label>Alias:</label>
-    <input type="text" id="alias" name="alias" style="width: 700px"/>
-    <br/>
-
-    {% for locale in localeList %}
-    <label>{{ locale }}:</label>
-    <textarea name="translations[{{ locale.getId() }}]" style="width: 700px; height: 100px"></textarea>
-    <br/>
-    {% endfor %}
-
-    <input type="submit" value="Save" class="btn btn-primary">
-    <input class="btn" type="button" value="Cancel" onclick="$('.alert').hide();$('#newtranslation').hide()">
-</form>
-
-<form id="newlocale" style="display: none" method="POST" onsubmit="return saveLocaleForm($('#newlocale'))" action="{{path('sg_localeditor_add_locale')}}">
-    <label>Language:</label>
-    <input type="text" id="language" name="language" maxlength="2" size="2"/>
-    <br />
-
-    <label>Country (optional):</label>
-    <input type="text" id="country" name="country" maxlength="2" size="2"/>
-    <br/>
-
-    <input type="submit" value="Save" class="btn btn-primary">
-    <input class="btn" type="button" value="Cancel" onclick="$('.alert').hide();$('#newlocale').hide()">
-</form>
+<div class="panel panel-success panel-top-form" id="newtranslation" style="display: none" >
+    <div class="panel-heading">New Entry</div>
+    <div class="panel-body">
+        <form method="POST"  style="display:none" onsubmit="return saveEntryForm($('#newtranslation'))" action="{{path('sg_localeditor_add_translation')}}">
+            <div class="form-group input-group">
+                <label class="input-group-addon">Domain:</label>
+                <select id="domain" name="domain" class="form-control"/>
+                {% for bundle in bundleList %}
+                    <option value="{{bundle.getName()}}">{{bundle.getName()}}</option>
+                {% endfor %}
+                </select>
+            </div>
+            <div class="form-group input-group">
+                <label class="input-group-addon">File Name:</label>
+                <input type="text" id="fileName" name="fileName" class="form-control"/>
+            </div>
+            <div class="form-group input-group">    
+                <label class="input-group-addon">Alias:</label>
+                <input type="text" id="alias" name="alias" class="form-control"/>
+            </div>
 
+            {% for locale in localeList %}
+            <div class="form-group input-group">    
+                <label class="input-group-addon">{{ locale }}:</label>
+                <textarea name="translations[{{ locale.getId() }}]" style="" class="form-control"></textarea>
+            </div>
+            {% endfor %}
+            <div class="form-group">
+                <button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-ok"></i> &nbsp;Save</button>
+                <a class="btn btn-danger cancel-top-form"><i class="glyphicon glyphicon-remove"></i> &nbsp;Cancel</a>
+            </div>
+        </form>
+    </div>
+</div>
+
+<div class="panel panel-success panel-top-form" id="newlocale" style="display: none" >
+    <div class="panel-heading">New Locale</div>
+    <div class="panel-body">
+        <form method="POST" style="display:none" onsubmit="return saveLocaleForm($('#newlocale'))" action="{{path('sg_localeditor_add_locale')}}">
+            <div class="form-group input-group">
+                <label class="input-group-addon">Language:</label>
+                <input type="text" id="language" name="language" maxlength="2" size="2" class="form-control"/>
+            </div>
+            <div class="form-group input-group">
+                <label class="input-group-addon">Country (optional):</label>
+                <input type="text" id="country" name="country" maxlength="2" size="2" class="form-control"/>
+            </div>
+            <div class="form-group">
+                <button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-ok"></i> &nbsp;Save</button>
+                <a class="btn btn-danger cancel-top-form"><i class="glyphicon glyphicon-remove"></i> &nbsp;Cancel</a>
+            </div>
+        </form>
+    </div>
+</div>
 <p id="insert-ok" class="alert alert-success" style="display: none"></p>
 <p id="insert-error" class="alert alert-error" style="display: none">An error ocurred while adding the translation<span id="errmsg"></span></p>
 
-<table class="table table-striped">
+<table class="table table-striped table-hover">
     <thead>
         <tr>
             <th></th>
             <th>Domain</th>
             <th>Alias</th>
-
             {% for locale in localeList %}
             <th>{{locale}} {% if locale == defaultLocale %}<span class="label">Default</span>{%endif%}</th>
             {% endfor %}
@@ -274,19 +314,17 @@
         {% for entry in entryList %}
         <tr id="entry-{{loop.index}}" {{ entry.getTranslations().count() != localeListCount ? 'class="missing"' : 'class="ok"' }}>
             <td>
-                <input id="remove-{{loop.index}}" class=" btn btn-danger mysmall" type="button" value="Remove" onclick="confirm('Are you sure?') && removeEntry('{{loop.index}}', '{{ entry.getId() }}')">
+                <button id="remove-{{loop.index}}" class="close" aria-hidden="true" data-placement="bottom" data-toggle="tooltip" title="Remove" onclick="confirm('Are you sure?') && removeEntry('{{loop.index}}', '{{ entry.getId() }}')">&times;</button>
             </td>
-
-            <td>{{ entry.getDomain() }}</td>
-
-            <td>{{ entry.getAlias() }}</td>
+            <td class="domain">{{ entry.getDomain() }}</td>
+            <td class="alias">{{ entry.getAlias() }}</td>
 
             {% for locale in localeList %}
             <td>
                 <div id="current-{{loop.parent.loop.index}}-{{locale}}">
                     {% set translation = entry.getTranslation(locale) %}
 
-                    <div id="current-{{loop.parent.loop.index}}-{{locale}}-content" onclick="showTranslationEditForm('{{loop.parent.loop.index}}-{{locale}}')">
+                    <div class="translation" id="current-{{loop.parent.loop.index}}-{{locale}}-content" onclick="showTranslationEditForm('{{loop.parent.loop.index}}-{{locale}}')">
                         {% if translation %}{{ translation.getValue() }}{% endif %}
                     </div>
 
@@ -295,15 +333,16 @@
                     {% endif %}
 
                     {% if not translation or translation.getValue() is empty %}
-                        <span class="label label-important" onclick="showTranslationEditForm('{{loop.parent.loop.index}}-{{locale}}')">Missing</span>
+                        <span class="label label-danger" onclick="showTranslationEditForm('{{loop.parent.loop.index}}-{{locale}}')">Missing</span>
                     {% endif %}
                 </div>
 
                 <div id="editor-{{loop.parent.loop.index}}-{{locale}}" class="editor">
-                    <textarea>{% if translation %}{{ translation.getValue() }}{% endif %}</textarea>
-                    <br/>
-                    <input id="save-{{loop.parent.loop.index}}-{{locale}}"class="btn mysmall btn-primary" type="button" value="Save" onclick="saveTranslation('{{loop.parent.loop.index}}-{{locale}}', '{{entry.getId()}}', '{{locale.getId()}}')">
-                    <input class="btn mysmall" type="button" value="Cancel" onclick="hideTranslationEditForm('{{loop.parent.loop.index}}-{{locale}}')">
+                    <div class="form-group">
+                        <textarea class="form-control">{% if translation %}{{ translation.getValue() }}{% endif %}</textarea>
+                    </div>
+                    <input id="save-{{loop.parent.loop.index}}-{{locale}}"class="btn btn-sm btn-primary" type="button" value="Save" onclick="saveTranslation('{{loop.parent.loop.index}}-{{locale}}', '{{entry.getId()}}', '{{locale.getId()}}')">
+                    <input class="btn btn-sm btn-danger" type="button" value="Cancel" onclick="hideTranslationEditForm('{{loop.parent.loop.index}}-{{locale}}')">
                 </div>
             </td>
             {% endfor %}
diff --git a/Resources/views/layout.html.twig b/Resources/views/layout.html.twig
index 2ce0f82..b6ae12f 100755
--- a/Resources/views/layout.html.twig
+++ b/Resources/views/layout.html.twig
@@ -8,19 +8,17 @@
         <meta name="author" content="">
 
         <!-- Le styles -->
-        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
-
-        <style type="text/css">
-            body {
-                padding-top: 60px;
-            }
-        </style>
+        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
 
         <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
         <!--[if lt IE 9]>
         <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
         <![endif]-->
-
+        <style>
+            body { padding-top: 70px; }
+            .navbar {box-shadow: 0 0 5px #CBCBCB;}
+            .high {background: none repeat scroll 0 0 #FFED54};
+        </style>
         <!-- Le fav and touch icons -->
         <link rel="shortcut icon" href="../assets/ico/favicon.ico">
         <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-144-precomposed.png">
@@ -29,62 +27,69 @@
         <link rel="apple-touch-icon-precomposed" href="http://twitter.github.com/bootstrap/assets/assets/ico/apple-touch-icon-57-precomposed.png">
 
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-        <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
+        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
     </head>
 
     <body>
-        <div class="navbar navbar-fixed-top">
-            <div class="navbar-inner">
-                <div class="container-fluid">
-                    <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                    </a>
-                    <a class="brand" href="#">Symfony2 Translation Editor</a>
-
-                    <div class="nav-collapse">
-                        <ul class="nav">
-                            <li><a href="#" id="nav-new-locale">New Locale</a></li>
-                            <li><a href="#" id="nav-new-entry">New Entry</a></li>
-                            <li><a href="#" id="nav-reload">Reload List</a></li>
-                            <li><a href="https://github.com/servergrove/TranslationEditorBundle">About</a></li>
-                        </ul>
-                    </div>
-                </div>
+        <!-- Navigation top bar -->
+        <nav class="navbar navbar-default navbar-fixed-top col-sm-12" role="navigation">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
+                  <span class="icon-bar"></span>
+                  <span class="icon-bar"></span>
+                  <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="#">SF2 Translation Editor</a>
             </div>
-        </div>
-
-        <div class="container-fluid">
-            <div class="row-fluid">
-                <div class="span3">
-                    <div class="well">
-                        <h5>Available Locales</h5>
+            <div class="collapse navbar-collapse" id="nav-collapse">
+                <ul class="nav navbar-nav">
+                  <li><a href="#" id="nav-new-locale">New Locale</a></li>
+                  <li><a href="#" id="nav-new-entry">New Entry</a></li>
+                  <li><a href="#" id="nav-reload">Reload List</a></li>
+                </ul>
+                <form class="navbar-form navbar-left" role="search">
+                  <div class="form-group">
+                    <input type="text" class="form-control" placeholder="Filter Alias or Value" onkeyup="showFilterEntries(this.value)">
+                  </div>
+                </form>
+                <ul class="nav navbar-nav navbar-right">
+                  <li><a href="https://github.com/servergrove/TranslationEditorBundle">About</a></li>
+                </ul>
+            </div>
+        </nav>
 
-                        <ul id="locales" style="padding: 0; margin: 0; list-style: none">
-                            {% for locale in localeList %}
-                            <li id="locale-{{loop.index}}" style="padding: 2px 0" data-id="{{ locale.getId() }}" data-index="{{loop.index}}">
-                                <input id="remove-locale-{{loop.index}}" class="btn btn-danger mysmall" type="button" value="Remove" />
-                                {{locale}}
-                                {% if locale == defaultLocale %}<span class="label">Default</span>{%endif%}
-                            </li>
-                            {% endfor %}
-                        </ul>
+        <div class="container">
+            <div class="row">
+                <div class="col-sm-2">
+                    <div style="position:fixed">
+                    <div class="panel panel-info">
+                        <div class="panel-heading">Available Locales</div>
+                        <div class="">
+                            <ul id="locales" style="padding: 0; margin: 0; list-style: none" class="list-group">
+                                {% for locale in localeList %}
+                                <li id="locale-{{loop.index}}" data-id="{{ locale.getId() }}" data-index="{{loop.index}}" class="list-group-item">
+                                    <button id="remove-locale-{{loop.index}}" type="button" class="close" aria-hidden="true">&times;</button>
+                                    {{locale}}
+                                    {% if locale == defaultLocale %}<span class="label label-primary">Default</span>{%endif%}
+                                </li>
+                                {% endfor %}
+                            </ul>
+                        </div>
                     </div>
 
-                    {% block sidebar %}
-                    {% endblock %}
+                {% block sidebar %}
+                {% endblock %}
                 </div>
-
-                <div class="span9">
-                    {% block body %}
-                    {% endblock %}
+                <hr>
+                <footer class="center-content">
+                    <p>&copy; ServerGrove 2012</p>
+                </footer>
                 </div>
             </div>
-            <hr>
-            <footer>
-                <p>&copy; ServerGrove 2012</p>
-            </footer>
+            <div class="col-sm-10">
+                {% block body %}
+                {% endblock %}
+            </div>
         </div>
 
         <script>
@@ -93,22 +98,38 @@
                 var li = $(e.target).parent();
                 confirm('Are you sure?') && removeLocale(li.data('index'), li.data('id'));
             });
-            $('#nav-new-locale').click(function() {
+            function showLocaleForm() {
+
+            }
+            $('#nav-new-locale').on('click', function() {
                 $('.alert-message').hide();
                 $('#newtranslation').hide();
-                var form = $('#newlocale').show();
+                $('#newtranslation form').hide();
+
+                $('#newlocale').fadeIn(500);
+                var form = $('#newlocale form').slideDown(500);
                 $('#language', form).focus();
             });
-            $('#nav-new-entry').click(function() {
+            $('#nav-new-entry').on('click', function() {
                 $('.alert-message').hide();
                 $('#newlocale').hide();
-                var form = $('#newtranslation').show();
+                $('#newlocale form').hide();
+
+                $('#newtranslation').fadeIn(500);
+                var form = $('#newtranslation form').slideDown(500);
                 $('#domain', form).focus();
             });
-            $('#nav-reload').click(function() {
+            $('#nav-reload').on('click', function() {
                 this.innerHTML = 'Reloading...';
                 window.location.reload();
             });
+            $('.cancel-top-form').on('click', function(e) {
+                e.preventDefault();
+                $('.alert-message').hide();
+                var panel = $('.panel-top-form:visible');
+                panel.find('form').slideUp();
+                panel.fadeOut(500);
+            });
         });
         </script>
     </body>