diff --git a/templates/index.tmpl b/templates/index.tmpl
index b5f2457..350ccba 100644
--- a/templates/index.tmpl
+++ b/templates/index.tmpl
@@ -1,15 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    
+    <meta charset="utf-8">
     <title>Foodoles written in Go</title>
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
     <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>
-    <style type="text/css">body { font-family: arial } h2 { margin: 2em 0em; }  .ui.container { padding-top: 5em; padding-bottom: 5em; } </style>
+    <script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
+    <style type="text/css">h2 { margin: 2em 0em; }  .ui.container { padding-top: 5em; padding-bottom: 5em; } </style>
     <script type="text/javascript">
         function vote(option){$.post( "/", {option}, ( data ) => {  $('.modal').modal('show');});}
         function reload(){document.location.reload(true);}    
+       
     </script>
 </head>
 <body>
@@ -18,7 +20,7 @@
        <h2 class="ui header">Pick Your Preferred Lunch's Food For Today</h2><br/>
        <div class="ui  ">
         {{ range .Foods.Foods }}
-            <a onclick="vote('{{ .Title }}')" class="ui label massive" data-tooltip="{{ .Title }}"  data-variation="basic" data-position="bottom left">
+            <a onclick="vote('{{ .Title }}')" class="ui label massive" data-tooltip="{{ .Title }}"  data-variation="basic" data-position="bottom center">
                 {{$cur := .Title}}
                     {{ .Icon }}
                     {{ range $.Votes.Votes }}
@@ -41,4 +43,7 @@
        </div>
    </div>
 </body>
+<script type="text/javascript">
+    twemoji.parse(document.body);
+</script>
 </html>
\ No newline at end of file
