diff --git a/css/style.css b/css/style.css
index 01096b6..04b1227 100644
--- a/css/style.css
+++ b/css/style.css
@@ -346,12 +346,9 @@ form input {
   gap: 1em;
 }
 
-#textInput textarea {
+#textInput #textArea {
   width: 100%;
   height: 100%;
-  resize: none;
-  padding: 0;
-  margin: 0;
 }
 
 #textInput input {
diff --git a/index.html b/index.html
index cbc84bb..7d54c84 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
     <script src="./js/view.js"></script>
     <script src="./js/video.js"></script>
     <script src="./js/comments.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>
 
 
 </head>
@@ -56,7 +57,7 @@
         <div class="hidden" id="textInput">
             <div>XML soubor je pro zatím nutné vytvořit v tomto editoru. GUI editor není ještě vytvořen, ale je v plánu.
             </div>
-            <textarea name="xml" id="textArea" form="form"></textarea>
+            <div id="textArea"></div>
             <input type="submit" value="Přidat video" form="form">
         </div>
 
diff --git a/js/view.js b/js/view.js
index 2c7fa80..b57b9e1 100644
--- a/js/view.js
+++ b/js/view.js
@@ -24,7 +24,12 @@ class View {
     Connect.setRequestHeader("Content-Type", "text/xml");
     Connect.send(null);
     // Place the response in an XML document.
-    textArea.value = Connect.responseText;
+    var exampleText = document.createTextNode(Connect.responseText);
+    textArea.append(exampleText);
+
+    this.editor = ace.edit("textArea");
+    this.editor.setTheme("ace/theme/github");
+    this.editor.getSession().setMode("ace/mode/xml");
   }
 
   drawCommentTitles(comments) {
diff --git a/videos/example.xml b/videos/example.xml
index aac171b..4e40aae 100644
--- a/videos/example.xml
+++ b/videos/example.xml
@@ -14,4 +14,5 @@
         </text>
     </comment>
 -->
+
 </video>
\ No newline at end of file