diff --git a/README.rst b/README.rst
index 0242cd61..ca1d4d3b 100644
--- a/README.rst
+++ b/README.rst
@@ -29,6 +29,14 @@ The sources are in a GIT DVCS with its main branches at
 `github <http://github.com/conestack/cone.app>`_.
 
 
+Third Party Resources
+=====================
+
+- https://github.com/jquery/jquery
+- https://github.com/twbs/bootstrap
+- https://github.com/HatScripts/circle-flags
+
+
 Copyright
 =========
 
diff --git a/TODO.rst b/TODO.rst
index 4f6532df..6e7be8c8 100644
--- a/TODO.rst
+++ b/TODO.rst
@@ -1,7 +1,12 @@
 TODO
 ====
 
-- Dropdowns - do we need <div class="dropdown-item" /> wrappers? causes
-  rendering problems in all sorts of dropdowns.
-
-- Contextmenu - wrong html semantics. ul in ul.
+- Live search.
+- Table actions sorting.
+- SCSS splitting.
+- Reduce CSS class noise and add some custom rules to SCSS files.
+- Check if we can retrieve Bootstrap sources other than including in this repo
+  for development.
+- Translation widget.
+- Referencebrowser widget.
+- Treibstoff styles.
diff --git a/src/cone/app/browser/layout.py b/src/cone/app/browser/layout.py
index 9bf3aabc..673b5a44 100644
--- a/src/cone/app/browser/layout.py
+++ b/src/cone/app/browser/layout.py
@@ -8,6 +8,7 @@
 from cone.app.browser.utils import make_query
 from cone.app.browser.utils import make_url
 from cone.app.browser.utils import node_icon
+from cone.app.browser.utils import request_property
 from cone.app.interfaces import IApplicationNode
 from cone.app.interfaces import ILayout
 from cone.app.interfaces import INavigationLeaf
@@ -492,6 +493,7 @@ def make_query(self, lang=None):
         return make_query(**params)
 
 
+# XXX: complete list
 language_names = {
     'en': _('lang_en', default='English'),
     'de': _('lang_de', default='German'),
@@ -510,11 +512,23 @@ class Language(LanguageTile):
     def show(self):
         return bool(cfg.available_languages)
 
+    @request_property
+    def current_lang(self):
+        return negotiate_locale_name(self.request)
+
+    @property
+    def flag(self):
+        return make_url(
+            self.request,
+            node=self.model.root['resources'],
+            resource='/'.join(['cone', 'flags', f'{self.current_lang}.svg'])
+        )
+
     @property
     def languages(self):
         languages = list()
         localizer = get_localizer(self.request)
-        current = negotiate_locale_name(self.request)
+        current = self.current_lang
         for lang in cfg.available_languages:
             target = make_url(
                 self.request,
diff --git a/src/cone/app/browser/static/cone/flags/de.svg b/src/cone/app/browser/static/cone/flags/de.svg
new file mode 100644
index 00000000..efde3419
--- /dev/null
+++ b/src/cone/app/browser/static/cone/flags/de.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#a)"><path fill="#ffda44" d="m0 345 256.7-25.5L512 345v167H0z"/><path fill="#d80027" d="m0 167 255-23 257 23v178H0z"/><path fill="#333" d="M0 0h512v167H0z"/></g></svg>
\ No newline at end of file
diff --git a/src/cone/app/browser/static/cone/flags/en.svg b/src/cone/app/browser/static/cone/flags/en.svg
new file mode 100644
index 00000000..4dca1e78
--- /dev/null
+++ b/src/cone/app/browser/static/cone/flags/en.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#a)"><path fill="#eee" d="m0 0 8 22-8 23v23l32 54-32 54v32l32 48-32 48v32l32 54-32 54v68l22-8 23 8h23l54-32 54 32h32l48-32 48 32h32l54-32 54 32h68l-8-22 8-23v-23l-32-54 32-54v-32l-32-48 32-48v-32l-32-54 32-54V0l-22 8-23-8h-23l-54 32-54-32h-32l-48 32-48-32h-32l-54 32L68 0H0z"/><path fill="#0052b4" d="M336 0v108L444 0Zm176 68L404 176h108zM0 176h108L0 68ZM68 0l108 108V0Zm108 512V404L68 512ZM0 444l108-108H0Zm512-108H404l108 108Zm-68 176L336 404v108z"/><path fill="#d80027" d="M0 0v45l131 131h45L0 0zm208 0v208H0v96h208v208h96V304h208v-96H304V0h-96zm259 0L336 131v45L512 0h-45zM176 336 0 512h45l131-131v-45zm160 0 176 176v-45L381 336h-45z"/></g></svg>
\ No newline at end of file
diff --git a/src/cone/app/browser/static/cone/flags/fr.svg b/src/cone/app/browser/static/cone/flags/fr.svg
new file mode 100644
index 00000000..0fe5619a
--- /dev/null
+++ b/src/cone/app/browser/static/cone/flags/fr.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#a)"><path fill="#eee" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z"/><path fill="#0052b4" d="M0 0h167v512H0z"/><path fill="#d80027" d="M345 0h167v512H345z"/></g></svg>
\ No newline at end of file
diff --git a/src/cone/app/browser/static/cone/flags/it.svg b/src/cone/app/browser/static/cone/flags/it.svg
new file mode 100644
index 00000000..56b4fb30
--- /dev/null
+++ b/src/cone/app/browser/static/cone/flags/it.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"/></mask><g mask="url(#a)"><path fill="#eee" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z"/><path fill="#6da544" d="M0 0h167v512H0z"/><path fill="#d80027" d="M345 0h167v512H345z"/></g></svg>
\ No newline at end of file
diff --git a/src/cone/app/browser/templates/language.pt b/src/cone/app/browser/templates/language.pt
index 6449630f..d56d0462 100644
--- a/src/cone/app/browser/templates/language.pt
+++ b/src/cone/app/browser/templates/language.pt
@@ -12,8 +12,12 @@
                 justify-content-end-sm-center align-items-center"
          data-bs-toggle="dropdown">
       <a href="#"
-         class="nav-link d-inline-block px-0 px-md-3">
-        <span i18n:translate="language">Language</span>
+         class="nav-link d-inline-block px-0 px-md-2">
+        <img src="${context.flag}"
+             width="20"
+             height="20"
+             alt="language"
+             i18n:attributes="alt" />
         <span class="caret"></span>
       </a>
     </div>
diff --git a/src/cone/app/browser/templates/personaltools.pt b/src/cone/app/browser/templates/personaltools.pt
index 0df19af4..51054f6d 100644
--- a/src/cone/app/browser/templates/personaltools.pt
+++ b/src/cone/app/browser/templates/personaltools.pt
@@ -16,7 +16,7 @@
                   justify-content-end-sm-center align-items-center"
            data-bs-toggle="dropdown">
         <a href="#"
-           class="nav-link d-inline-block px-0 px-md-3">
+           class="nav-link d-inline-block px-0 px-md-2">
           <span tal:content="context.user">Admin</span>
           <span class="caret"></span>
         </a>