diff --git a/go.mod b/go.mod
index 3a274ee..4e586ab 100644
--- a/go.mod
+++ b/go.mod
@@ -7,7 +7,7 @@ replace github.com/OwO-Network/gdeeplx => github.com/gi-yt/gdeeplx v0.0.0-202308
 //replace codeberg.org/aryak/libmozhi => /home/arya/projects/mozhi/libmozhi
 
 require (
-	codeberg.org/aryak/libmozhi v0.0.0-20231129140947-7c9580a1ea2d
+	codeberg.org/aryak/libmozhi v0.0.0-20231129152229-c0d8dfbccd68
 	github.com/gofiber/fiber/v2 v2.51.0
 	github.com/gofiber/swagger v0.1.14
 	github.com/gofiber/template v1.8.0
diff --git a/go.sum b/go.sum
index d2e5c30..3baeef4 100644
--- a/go.sum
+++ b/go.sum
@@ -51,6 +51,8 @@ codeberg.org/aryak/libmozhi v0.0.0-20231129121457-7f83a4201d39 h1:XmDg0Fm0WL8xGD
 codeberg.org/aryak/libmozhi v0.0.0-20231129121457-7f83a4201d39/go.mod h1:Ohfzqv/+t2t350TFNlHNBIXc42lOdv+3MkBtozYxMUY=
 codeberg.org/aryak/libmozhi v0.0.0-20231129140947-7c9580a1ea2d h1:CxJsKo6EHksw6yBWX02uDnNntbszkybgPuN0PzGyBNA=
 codeberg.org/aryak/libmozhi v0.0.0-20231129140947-7c9580a1ea2d/go.mod h1:Ohfzqv/+t2t350TFNlHNBIXc42lOdv+3MkBtozYxMUY=
+codeberg.org/aryak/libmozhi v0.0.0-20231129152229-c0d8dfbccd68 h1:Pwsv6oLj51GhlcrlBIPc91jliNeJx6sPdPKYnzhZqMg=
+codeberg.org/aryak/libmozhi v0.0.0-20231129152229-c0d8dfbccd68/go.mod h1:Ohfzqv/+t2t350TFNlHNBIXc42lOdv+3MkBtozYxMUY=
 dmitri.shuralyov.com/gpu/mtl v0.0.0-20190408044501-666a987793e9/go.mod h1:H6x//7gZCb22OMCxBHrMx7a5I7Hp++hsVxbQ4BYO7hU=
 github.com/BurntSushi/toml v0.3.1/go.mod h1:xHWCNGjB5oqiDr8zfno3MHue2Ht5sIBksp03qcyfWMU=
 github.com/BurntSushi/xgb v0.0.0-20160522181843-27f122750802/go.mod h1:IVnqGOEym/WlBOVXweHU+Q+/VP0lqqI8lqeDx9IjBqo=
diff --git a/serve/serve.go b/serve/serve.go
index 510fd34..a20948d 100644
--- a/serve/serve.go
+++ b/serve/serve.go
@@ -2,6 +2,7 @@ package serve
 
 import (
 	"html/template"
+	"strings"
 	"log"
 	"net/http"
 	"os"
@@ -37,9 +38,8 @@ func Serve(port string) {
 	engine := html.NewFileSystem(views, ".html")
 
 	engine.AddFunc(
-		// Add unescape function. This is needed to render HTML from Markdown.
-		"unescape", func(s string) template.HTML {
-			return template.HTML(s)
+		"newlinetobr", func(s string) template.HTML {
+			return template.HTML(strings.ReplaceAll(strings.ReplaceAll(s, "\n", "<br>"), "\r", ""))
 		},
 	)
 
diff --git a/views/index.html b/views/index.html
index a0f799f..3650ca9 100644
--- a/views/index.html
+++ b/views/index.html
@@ -18,7 +18,7 @@
     <!-- This hidden input is so that the engine gets sent in the request even though its not declared here -->
     <input name="engine" value="{{.Engine}}" type="hidden" />
 
-    <div class="wrap languages center-area" >
+    <div class="wrap languages center-area">
       <div class="language">
         <select name="from" aria-label="Source language" id="sourceLanguage">
           {{range $key, $value := .SourceLanguages}} {{if $.From}}
@@ -46,7 +46,7 @@
 
       <div class="language">
         <select name="to" aria-label="Target language" id="targetLanguage">
-	      {{range $key, $value := .TargetLanguages}} {{if $.To}}
+          {{range $key, $value := .TargetLanguages}} {{if $.To}}
           <option value="{{ .Id }}" {{if eq $.To .Id}}selected{{end}}>
             {{ .Name }}
           </option>
@@ -54,20 +54,22 @@
           <option value="{{ .Id }}" {{if eq .Id $.defaultLangTarget}}selected{{end}}>
             {{ .Name }}
           </option>
-		  {{end}} {{end}}
+          {{end}} {{end}}
         </select>
       </div>
     </div>
 
-    <div class="center-area2 item-wrapper"> 
-	  Source Text:
+    <div class="center-area2 item-wrapper">
+      Source Text:
       <textarea autofocus class="item" id="input" name="text" dir="auto" placeholder="Enter Text Here">
 {{ .OriginalText }}</textarea>
       {{if .TtsFrom}}
+      <br>
       <audio controls>
         <source type="audio/mpeg" src="{{ .TtsFrom }}" />
       </audio>
       {{end}}
+      <br>
     </div>
 
     {{ if .TranslateAll }}
@@ -77,11 +79,16 @@
       <textarea class="translation item" dir="auto" placeholder="Translation" id="output" readonly>
 {{.OutputText}}</textarea>
       {{if .AutoDetect}}
-      Detected Language: {{.AutoDetect}}{{end}} {{if $.TtsTo}}
+      <br>Detected Language: {{.AutoDetect}}{{end}}
+      {{if .Translation.Transliteration}}
+      <br>Transliteration: {{newlinetobr .Translation.Transliteration}}{{end}}
+      {{if $.TtsTo}}
+      <br>
       <audio controls>
         <source type="audio/mpeg" src="{{ $.TtsTo }}" />
       </audio>
       {{end}}
+      <br>
     </div>
     {{end}}
     {{ else }} {{if .TranslationExists}}
@@ -89,28 +96,35 @@
       <textarea class="translation item" dir="auto" placeholder="Translation" id="output" readonly>
 {{.Translation.OutputText}}</textarea>
       {{if .Translation.AutoDetect}}
-      Detected Language: {{.Translation.AutoDetect}}{{end}} {{if .TtsTo}}
+      <br>Detected Language: {{.Translation.AutoDetect}}{{end}}
+      {{if .Translation.Transliteration}}
+      <br>Transliteration: {{newlinetobr .Translation.Transliteration}}{{end}}
+      {{if .TtsTo}}
+      <br>
       <audio controls>
         <source type="audio/mpeg" src="{{ .TtsTo }}" />
       </audio>
       {{end}}
+      <br>
       {{end}}
       {{end}}
       <div style="display:flex; justify-content:space-around; align-items:center;">
-       {{if .TranslationExists}} 
-       <button class="wrap" type="button" onclick="copyToClipboard()">
-         Copy the translation
-       </button>
-       {{end}}
-	     {{ if and .Engine .From .To .OriginalText }}<p><a class="button" style="color:#010000; text-decoration: none;" href="/?engine={{.Engine}}&from={{.From}}&to={{.To}}&text={{.OriginalText}}">Copy translation link</a></p>{{end}}
-       {{if .TranslationExists}}
-       <button class="wrap" type="submit">
-       {{else}}
-       <button class="wrap" style="margin-left:auto; position:relative; left:-10%;margin-top: 1%;" type="submit">
-       {{end}}
-         Translate!
-       </button>
-      </div> 
+        {{if .TranslationExists}}
+        <button class="wrap" type="button" onclick="copyToClipboard()">
+          Copy the translation
+        </button>
+        {{end}}
+        {{ if and .Engine .From .To .OriginalText }}<p><a class="button" style="color:#010000; text-decoration: none;"
+            href="/?engine={{.Engine}}&from={{.From}}&to={{.To}}&text={{.OriginalText}}">Copy translation link</a></p>
+        {{end}}
+        {{if .TranslationExists}}
+        <button class="wrap" type="submit">
+          {{else}}
+          <button class="wrap" style="margin-left:auto; position:relative; left:-10%;margin-top: 1%;" type="submit">
+            {{end}}
+            Translate!
+          </button>
+      </div>
   </form>
   <script>
     // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
@@ -135,4 +149,4 @@
     }
   </script>
 </main>
-{{ template "footer" .}}
+{{ template "footer" .}}
\ No newline at end of file