diff --git a/README.rst b/README.rst
index eaa73d0..ec84cac 100644
--- a/README.rst
+++ b/README.rst
@@ -1,3 +1,9 @@
+.. image:: https://raw.githubusercontent.com/collective/collective.texttospeech/issue_4/docs/texttospeech.png
+    :align: left
+    :alt: Text-to-Speech
+    :height: 100px
+    :width: 100px
+
 **************
 Text-to-Speech
 **************
diff --git a/docs/texttospeech.png b/docs/texttospeech.png
new file mode 100644
index 0000000..a49e409
Binary files /dev/null and b/docs/texttospeech.png differ
diff --git a/src/collective/texttospeech/browser/templates/texttospeech.pt b/src/collective/texttospeech/browser/templates/texttospeech.pt
index c6395c8..4d2e2a6 100644
--- a/src/collective/texttospeech/browser/templates/texttospeech.pt
+++ b/src/collective/texttospeech/browser/templates/texttospeech.pt
@@ -1,8 +1,8 @@
 <div i18n:domain="collective.texttospeech"
      id="viewlet-texttospeech"
-     data-label-stopped="Listen"
-     data-label-playing="Pause"
-     data-label-paused="Resume"
+     data-label-stopped="🔊 Listen"
+     data-label-playing="⏸ Pause"
+     data-label-paused="▶ Resume"
      tal:condition="view/enabled"
      tal:attributes="data-voice view/voice"
      i18n:attributes="data-label-stopped;
@@ -11,7 +11,7 @@
      <input id="texttospeech-button"
           class="stopped"
           type="button"
-          value="Listen"
+          value="🔊 Listen"
           title="Speech synthesis control"
           i18n:attributes="value; title" />
 </div>
diff --git a/src/collective/texttospeech/locales/collective.texttospeech.pot b/src/collective/texttospeech/locales/collective.texttospeech.pot
index ea2bc6b..93bc071 100644
--- a/src/collective/texttospeech/locales/collective.texttospeech.pot
+++ b/src/collective/texttospeech/locales/collective.texttospeech.pot
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
-"POT-Creation-Date: 2016-06-10 20:11+0000\n"
+"POT-Creation-Date: 2016-06-10 21:35+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI +ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -34,22 +34,10 @@ msgstr ""
 msgid "If selected, Text-to-Speech feature will be enabled sitewide."
 msgstr ""
 
-#: collective/texttospeech/browser/templates/texttospeech.pt:1
-msgid "Listen"
-msgstr ""
-
 #: collective/texttospeech/interfaces.py:26
 msgid "Only objects of these content types will display a Text-to-Speech button."
 msgstr ""
 
-#: collective/texttospeech/browser/templates/texttospeech.pt:1
-msgid "Pause"
-msgstr ""
-
-#: collective/texttospeech/browser/templates/texttospeech.pt:1
-msgid "Resume"
-msgstr ""
-
 #: collective/texttospeech/browser/templates/texttospeech.pt:11
 msgid "Speech synthesis control"
 msgstr ""
@@ -75,3 +63,15 @@ msgstr ""
 #: collective/texttospeech/profiles.zcml:23
 msgid "collective.texttospeech: uninstall"
 msgstr ""
+
+#: collective/texttospeech/browser/templates/texttospeech.pt:1
+msgid "⏸ Pause"
+msgstr ""
+
+#: collective/texttospeech/browser/templates/texttospeech.pt:1
+msgid "▶ Resume"
+msgstr ""
+
+#: collective/texttospeech/browser/templates/texttospeech.pt:1
+msgid "🔊 Listen"
+msgstr ""
diff --git a/src/collective/texttospeech/locales/es/LC_MESSAGES/collective.texttospeech.po b/src/collective/texttospeech/locales/es/LC_MESSAGES/collective.texttospeech.po
index 26722ee..ca1c97d 100644
--- a/src/collective/texttospeech/locales/es/LC_MESSAGES/collective.texttospeech.po
+++ b/src/collective/texttospeech/locales/es/LC_MESSAGES/collective.texttospeech.po
@@ -1,8 +1,8 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: \n"
-"POT-Creation-Date: 2016-06-10 20:11+0000\n"
-"PO-Revision-Date: 2016-06-10 17:16-0300\n"
+"POT-Creation-Date: 2016-06-10 21:35+0000\n"
+"PO-Revision-Date: 2016-06-10 18:35-0300\n"
 "Last-Translator: \n"
 "Language-Team: \n"
 "MIME-Version: 1.0\n"
@@ -37,22 +37,10 @@ msgstr "Aquí puede modificar las configuraciones de síntesis de habla."
 msgid "If selected, Text-to-Speech feature will be enabled sitewide."
 msgstr "Si está seleccionado, la funcionalidad de síntesis de habla estará habilitada en el sitio."
 
-#: collective/texttospeech/browser/templates/texttospeech.pt:1
-msgid "Listen"
-msgstr "Escuchar"
-
 #: collective/texttospeech/interfaces.py:26
 msgid "Only objects of these content types will display a Text-to-Speech button."
 msgstr "Sólo los objetos de estos tipos de contenido mostrarán el botón de síntesis de habla."
 
-#: collective/texttospeech/browser/templates/texttospeech.pt:1
-msgid "Pause"
-msgstr "Pausar"
-
-#: collective/texttospeech/browser/templates/texttospeech.pt:1
-msgid "Resume"
-msgstr "Continuar"
-
 #: collective/texttospeech/browser/templates/texttospeech.pt:11
 msgid "Speech synthesis control"
 msgstr "Control de la síntesis de habla"
@@ -78,3 +66,15 @@ msgstr "Voz utilizada para leer el texto."
 #: collective/texttospeech/profiles.zcml:23
 msgid "collective.texttospeech: uninstall"
 msgstr "collective.texttospeech: uninstall"
+
+#: collective/texttospeech/browser/templates/texttospeech.pt:1
+msgid "⏸ Pause"
+msgstr "⏸ Pausar"
+
+#: collective/texttospeech/browser/templates/texttospeech.pt:1
+msgid "▶ Resume"
+msgstr "▶ Continuar"
+
+#: collective/texttospeech/browser/templates/texttospeech.pt:1
+msgid "🔊 Listen"
+msgstr "🔊 Escuchar"
diff --git a/src/collective/texttospeech/locales/pt_BR/LC_MESSAGES/collective.texttospeech.po b/src/collective/texttospeech/locales/pt_BR/LC_MESSAGES/collective.texttospeech.po
index 7a8c352..2e4f0ba 100644
--- a/src/collective/texttospeech/locales/pt_BR/LC_MESSAGES/collective.texttospeech.po
+++ b/src/collective/texttospeech/locales/pt_BR/LC_MESSAGES/collective.texttospeech.po
@@ -1,8 +1,8 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: \n"
-"POT-Creation-Date: 2016-06-10 20:11+0000\n"
-"PO-Revision-Date: 2016-06-10 17:15-0300\n"
+"POT-Creation-Date: 2016-06-10 21:35+0000\n"
+"PO-Revision-Date: 2016-06-10 18:35-0300\n"
 "Last-Translator: \n"
 "Language-Team: \n"
 "MIME-Version: 1.0\n"
@@ -37,22 +37,10 @@ msgstr "Aqui pode modificar as configurações de síntese de voz."
 msgid "If selected, Text-to-Speech feature will be enabled sitewide."
 msgstr "Se estiver selecionado, a funcionalidade de síntese de voz estará habilitada no site."
 
-#: collective/texttospeech/browser/templates/texttospeech.pt:1
-msgid "Listen"
-msgstr "Ouvir"
-
 #: collective/texttospeech/interfaces.py:26
 msgid "Only objects of these content types will display a Text-to-Speech button."
 msgstr "Só objetos de esses tipos de conteúdo mostrarão o botão de síntese de voz."
 
-#: collective/texttospeech/browser/templates/texttospeech.pt:1
-msgid "Pause"
-msgstr "Pausar"
-
-#: collective/texttospeech/browser/templates/texttospeech.pt:1
-msgid "Resume"
-msgstr "Continuar"
-
 #: collective/texttospeech/browser/templates/texttospeech.pt:11
 msgid "Speech synthesis control"
 msgstr "Controle da síntese de voz"
@@ -78,3 +66,15 @@ msgstr "Voz utilizada para ler o texto."
 #: collective/texttospeech/profiles.zcml:23
 msgid "collective.texttospeech: uninstall"
 msgstr "collective.texttospeech: uninstall"
+
+#: collective/texttospeech/browser/templates/texttospeech.pt:1
+msgid "⏸ Pause"
+msgstr "⏸ Pausar"
+
+#: collective/texttospeech/browser/templates/texttospeech.pt:1
+msgid "▶ Resume"
+msgstr "▶ Continuar"
+
+#: collective/texttospeech/browser/templates/texttospeech.pt:1
+msgid "🔊 Listen"
+msgstr "🔊 Ouvir"
diff --git a/src/collective/texttospeech/static/file-audio-o.svg b/src/collective/texttospeech/static/file-audio-o.svg
new file mode 100644
index 0000000..4d8cddb
--- /dev/null
+++ b/src/collective/texttospeech/static/file-audio-o.svg
@@ -0,0 +1 @@
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1596 380q28 28 48 76t20 88v1152q0 40-28 68t-68 28h-1344q-40 0-68-28t-28-68v-1600q0-40 28-68t68-28h896q40 0 88 20t76 48zm-444-244v376h376q-10-29-22-41l-313-313q-12-12-41-22zm384 1528v-1024h-416q-40 0-68-28t-28-68v-416h-768v1536h1280zm-788-814q20 8 20 30v544q0 22-20 30-8 2-12 2-12 0-23-9l-166-167h-131q-14 0-23-9t-9-23v-192q0-14 9-23t23-9h131l166-167q16-15 35-7zm417 689q31 0 50-24 129-159 129-363t-129-363q-16-21-43-24t-47 14q-21 17-23.5 43.5t14.5 47.5q100 123 100 282t-100 282q-17 21-14.5 47.5t23.5 42.5q18 15 40 15zm-211-148q27 0 47-20 87-93 87-219t-87-219q-18-19-45-20t-46 17-20 44.5 18 46.5q52 57 52 131t-52 131q-19 20-18 46.5t20 44.5q20 17 44 17z"/></svg>
\ No newline at end of file
diff --git a/src/collective/texttospeech/static/main.css b/src/collective/texttospeech/static/main.css
index 6b7635d..80a67bc 100644
--- a/src/collective/texttospeech/static/main.css
+++ b/src/collective/texttospeech/static/main.css
@@ -1 +1,8 @@
-#viewlet-texttospeech{
    text-align: right;
}
\ No newline at end of file
+#viewlet-texttospeech
+{
+    text-align: right;
+}
+#texttospeech-button
+{
+    cursor: pointer;
+}
diff --git a/src/collective/texttospeech/static/main.js b/src/collective/texttospeech/static/main.js
index 6b2c6bf..2a89da1 100644
--- a/src/collective/texttospeech/static/main.js
+++ b/src/collective/texttospeech/static/main.js
@@ -1 +1,80 @@
-var MainView = (function() {
  function MainView() {
    this.$el = $('#viewlet-texttospeech');
    this.$button = $('#texttospeech-button', this.$el);
    this.voice = this.$el.attr('data-voice');
    this.label_stopped = this.$el.attr('data-label-stopped');
    this.label_playing = this.$el.attr('data-label-playing');
    this.label_paused = this.$el.attr('data-label-paused');
    this.playing = false;
    this.paused = true;
    this.$button.on('click', $.proxy(this.play_pause, this));
  }
  MainView.prototype.onstart = function() {
    this.playing = true;
    this.paused = false;
    this.$button.attr('value', this.label_playing);
    this.$button.attr('class', 'playing');
  };
  MainView.prototype.onend = function() {
    this.playing = false;
    this.paused = true;
    this.$button.attr('value', this.label_stopped);
    this.$button.attr('class', 'stopped');
  };
  MainView.prototype.play_pause = function(e) {
    e.preventDefault();
    if (this.playing) {
      if (this.paused) {
        this.paused = false;
        this.$button.attr('value', this.label_playing);
        this.$button.attr('class', 'playing');
        responsiveVoice.resume();
      } else {
        this.paused = true;
        this.$button.attr('value', this.label_paused);
        this.$button.attr('class', 'paused');
        responsiveVoice.pause();
      }
    } else {
      responsiveVoice.speak(
        $('#content').text(),
        this.voice, {
          onstart: $.proxy(this.onstart, this),
          onend: $.proxy(this.onend, this)
        }
      );
    }
  };
  return MainView;
})();


var ControlPanelView = (function() {
  function ControlPanelView() {
    this.template = "<select id=\"form-widgets-voice\" name=\"form.widgets.voice\" class=\"text-widget required textline-field\">\n</select>";
    this.actual_voice = $('#form-widgets-voice').val();
    this.render();
  }
  ControlPanelView.prototype.render = function() {
    $('#form-widgets-voice').replaceWith(this.template);
    var voicelist = responsiveVoice.getVoices();
    var vselect = $('#form-widgets-voice');
    var i, len, voice;
    for (i = 0, len = voicelist.length; i < len; i++) {
      voice = voicelist[i];
      if (voice.name === this.actual_voice) {
        vselect.append($('<option selected="selected" />').val(voice.name).text(voice.name));
      } else {
        vselect.append($('<option />').val(voice.name).text(voice.name));
      }
    }
  };
  return ControlPanelView;
})();


$(function() {
  if ($('#viewlet-texttospeech').length > 0) {
    new MainView();
  }
  if ($('body.template-texttospeech-settings').length > 0) {
    new ControlPanelView();
  }
});
\ No newline at end of file
+var MainView = (function() {
+  function MainView() {
+    this.$el = $('#viewlet-texttospeech');
+    this.$button = $('#texttospeech-button', this.$el);
+    this.voice = this.$el.attr('data-voice');
+    this.label_stopped = this.$el.attr('data-label-stopped');
+    this.label_playing = this.$el.attr('data-label-playing');
+    this.label_paused = this.$el.attr('data-label-paused');
+    this.playing = false;
+    this.paused = true;
+    this.$button.on('click', $.proxy(this.play_pause, this));
+  }
+  MainView.prototype.onstart = function() {
+    this.playing = true;
+    this.paused = false;
+    this.$button.attr('value', this.label_playing);
+  };
+  MainView.prototype.onend = function() {
+    this.playing = false;
+    this.paused = true;
+    this.$button.attr('value', this.label_stopped);
+  };
+  MainView.prototype.play_pause = function(e) {
+    e.preventDefault();
+    if (this.playing) {
+      if (this.paused) {
+        this.paused = false;
+        this.$button.attr('value', this.label_playing);
+        responsiveVoice.resume();
+      } else {
+        this.paused = true;
+        this.$button.attr('value', this.label_paused);
+        responsiveVoice.pause();
+      }
+    } else {
+      responsiveVoice.speak(
+        $('#content').text(),
+        this.voice, {
+          onstart: $.proxy(this.onstart, this),
+          onend: $.proxy(this.onend, this)
+        }
+      );
+    }
+  };
+  return MainView;
+})();
+
+
+var ControlPanelView = (function() {
+  function ControlPanelView() {
+    this.template = "<select id=\"form-widgets-voice\" name=\"form.widgets.voice\" class=\"text-widget required textline-field\">\n</select>";
+    this.actual_voice = $('#form-widgets-voice').val();
+    this.render();
+  }
+  ControlPanelView.prototype.render = function() {
+    $('#form-widgets-voice').replaceWith(this.template);
+    var voicelist = responsiveVoice.getVoices();
+    var vselect = $('#form-widgets-voice');
+    var i, len, voice;
+    for (i = 0, len = voicelist.length; i < len; i++) {
+      voice = voicelist[i];
+      if (voice.name === this.actual_voice) {
+        vselect.append($('<option selected="selected" />').val(voice.name).text(voice.name));
+      } else {
+        vselect.append($('<option />').val(voice.name).text(voice.name));
+      }
+    }
+  };
+  return ControlPanelView;
+})();
+
+
+$(function() {
+  if ($('#viewlet-texttospeech').length > 0) {
+    new MainView();
+  }
+  if ($('body.template-texttospeech-settings').length > 0) {
+    new ControlPanelView();
+  }
+});
diff --git a/src/collective/texttospeech/static/texttospeech-icon.png b/src/collective/texttospeech/static/texttospeech-icon.png
index 1756576..8f0c6a1 100644
Binary files a/src/collective/texttospeech/static/texttospeech-icon.png and b/src/collective/texttospeech/static/texttospeech-icon.png differ