diff --git a/public/css/pages.css b/public/css/pages.css
index 2e1455e..2ef51dd 100644
--- a/public/css/pages.css
+++ b/public/css/pages.css
@@ -53,3 +53,7 @@
     color: var(--c-link);
     text-decoration: underline;
 }
+
+.markdown blockquote {
+    color: red
+}
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 17f33be..80039dc 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -37,5 +37,9 @@ const { title } = Astro.props;
         <slot />
 
         <script src="/js/alpine-3.14.0.min.js" defer></script>
+        <script>
+            import { highlightOnDom } from "./thpHighlighter";
+            document.addEventListener("DOMContentLoaded", highlightOnDom);
+        </script>
     </body>
 </html>
diff --git a/src/layouts/thpHighlighter.ts b/src/layouts/thpHighlighter.ts
index d03e725..7f11461 100644
--- a/src/layouts/thpHighlighter.ts
+++ b/src/layouts/thpHighlighter.ts
@@ -7,7 +7,7 @@ export function highlightOnDom() {
 
         // Create a visual indicador
         const indicator = document.createElement("span");
-        indicator.className = "absolute top-2 right-2 inline-block text-sm select-none opacity-75";
+        indicator.className = `absolute top-1 right-0 inline-block text-sm select-none opacity-75 ${language === "php" ? "bg-[#4f5b93]" : ""} px-2 rounded-full`;
         indicator.innerText = language;
         pre_el.appendChild(indicator);
     }
diff --git a/src/pages/api/std/Array.mdx b/src/pages/api/std/Array.mdx
index 090079c..abd6637 100644
--- a/src/pages/api/std/Array.mdx
+++ b/src/pages/api/std/Array.mdx
@@ -2,6 +2,8 @@
 layout: ../../../layouts/ApiLayout.astro
 ---
 import TwoColumn from "../../../components/TwoColumn.astro"
+import Code from "../../../components/Code.astro"
+import Warning from "../../../components/docs/Warning.astro"
 
 # Array
 
@@ -16,39 +18,38 @@ THP arrays are 0-indexed.
 
 ## Signature
 
-```thp
+<Code thpcode={`
 type Array[T] = Map[Int, T]
-```
+`} />
 
 Where `T` is the datatype that the Array stores. For example:
 
-```thp
+<Code thpcode={`
 Array[Int]              // An array of integers
 Array[Float]            // An array of floats
 Array[Array[String]]    // A 2-dimensional array of strings
-```
+`} />
 
 ## PHP array internals
 
+<Warning>
 TL;DR: **Never** assign to an array using an invalid index. If you do
-the program will not crash, but it will not behaved as expected
+the program will not crash, instead it will not behaved as expected
 [(this is a common problem in PHP)](https://eev.ee/blog/2012/04/09/php-a-fractal-of-bad-design/).
 THP tries its best to solve such behavior.
-
----
+</Warning>
 
 
 Since THP compiles down to PHP, it's important to understand how PHP
 represents arrays internally.
-
 PHP doesn't have arrays. Instead, PHP has ordered maps and syntax sugar
 to make them look like arrays.
 
 When declaring an array like:
 
-```thp
+<Code thpcode={`
 var arr = ["a", "b", "c"]
-```
+`} />
 
 in reality what goes into memory is a map with numbers as keys:
 
@@ -75,7 +76,7 @@ Invalid indexes are:
 PHP maps preserve insertion order. This means that when iterating over
 a PHP map, values are processed in FIFO.
 
-```thp
+<Code thpcode={`
 var numbers = ["a", "b", "c"]
 numbers[-10] = "?"    // Assign to a negative index
 
@@ -127,7 +128,7 @@ numbers.push("/")   // This will be at position 8
 //    -4: "???",
 //     8: "/",
 // }
-```
+`} />
 
 This is one of many fundamental flaws with PHP. The only way to solve it
 would be to check every insertion at runtime, and this would have a
@@ -146,31 +147,31 @@ abstraction, as if all indexes were valid.
 To create an empty array use square brackets.
 If you create an empty array, you need to specify the datatype.
 
-```thp
+<Code thpcode={`
 Array[Int] empty = []
-```
+`} />
 
 
 ### Creation
 
 To create an array use square brackets notation:
 
-```thp
+<Code thpcode={`
 val numbers = [0, 1, 2, 3, 4, 5]
-```
+`} />
 
 When the array is not empty, you don't need to specify a datatype.
 
 When the Array is declared over many lines, the last
 item should have a trailing comma:
 
-```thp
+<Code thpcode={`
 val colors = [
     "red",
     "blue",
     "green",  // trailing comma
 ]
-```
+`} />
 
 If it doesn't, the code formatter will automatically
 insert one for you.
@@ -182,23 +183,23 @@ Use square brackets notation to insert into an array or modify it:
 To modify an array it must be mutable, that is, assigned to a `var`
 instead of a `val`.
 
-```thp
-// This array cannot be modified, as it's declared with `val`
+<Code thpcode={`
+// This array cannot be modified, as it's declared with \`val\`
 val immutable = [1, 2, 3]
 // This is a compile time error
 immutable[0] = 322
 
-// This array can be modified, as it's declared with `var`
+// This array can be modified, as it's declared with \`var\`
 var mutable = [1, 2, 3]
 // Ok
 mutable[0] = 322
-```
+`} />
 
 To append an element to an array, use the method `push()`:
 
-```thp
+<Code thpcode={`
 mutable.push(4)
-```
+`} />
 
 Do not insert into an invalid index. See [PHP array internals](#php-array-internals) to learn why.
 
@@ -207,14 +208,14 @@ Do not insert into an invalid index. See [PHP array internals](#php-array-intern
 
 Use a `for` loop to iterate over the elements of an array:
 
-```thp
+<Code thpcode={`
 val colors = ["red", "green", "blue"]
 
 for #(_index, c) in colors
 {
     print("{c} ")
 }
-```
+`} />
 
 ```sh
 red green blue
@@ -226,9 +227,9 @@ red green blue
 
 To access a value of the array use square brackets notation:
 
-```thp
+<Code thpcode={`
 print(colors[0])
-```
+`} />
 
 Since the index might not exist, this will return a 
 [nullable type](/learn/error-handling/null/) that you have to handle.
@@ -319,4 +320,3 @@ In the parameters, <code class="token keyword">self</code> is the array to opera
 </table>
 
 
-
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 45732a9..e7638fd 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,12 +2,12 @@
 import BaseLayout from "../layouts/BaseLayout.astro";
 import Navbar from "../components/Navbar.astro";
 import HeroSection from "../components/HeroSection.astro";
-import { thp_highlighter } from "../lexer/highlighter";
+import { native_highlighter } from "../lexer/highlighter";
 import { leftTrimDedent } from "../components/utils";
 
 const thpcode = `union Animal {
-	Dog(String),
-	Cat(String, Int),
+    Dog(String),
+    Cat(String, Int),
 }
 
 val cat_name = Post::get("cat_name") ?? "Michifu"
@@ -18,11 +18,11 @@ try change_fur_color(cat) else die("Not a cat")
 match random_animal()
 case Dog(name)
 { 
-	print("{name} has 1 live ")
+    print("{name} has 1 live ")
 }
 case Cat(name, lives)
 {
-	print("{name} has {lives}")
+    print("{name} has {lives}")
 }`;
 ---
 
@@ -118,7 +118,7 @@ case Cat(name, lives)
                     </svg>
                     <div class="h-1"></div>
                     <div id="editor" class="font-mono language-thp">
-                        <pre set:html={thp_highlighter(leftTrimDedent(thpcode).join("\n"))}></pre>
+                        <pre set:html={native_highlighter(leftTrimDedent(thpcode).join("\n"))}></pre>
                     </div>
                 </div>
             </div>