diff --git a/app/src/main/kotlin/views/BaseView.kt b/app/src/main/kotlin/views/BaseView.kt
index 63f473a..7bdb077 100644
--- a/app/src/main/kotlin/views/BaseView.kt
+++ b/app/src/main/kotlin/views/BaseView.kt
@@ -3,8 +3,7 @@ package be.simplenotes.app.views
 import be.simplenotes.app.utils.StaticFileResolver
 import be.simplenotes.domain.security.JwtPayload
 import kotlinx.html.*
-import kotlinx.html.div
-import org.intellij.lang.annotations.Language
+import kotlinx.html.ThScope.col
 
 class BaseView(staticFileResolver: StaticFileResolver) : View(staticFileResolver) {
     fun renderHome(jwtPayload: JwtPayload?) = renderPage(
@@ -21,93 +20,87 @@ class BaseView(staticFileResolver: StaticFileResolver) : View(staticFileResolver
 
         div("container mx-auto flex flex-wrap justify-center content-center") {
 
-            unsafe {
-                @Language("html")
-                val html =
-                    """
-                    <div aria-label="demo" class="md:order-1 order-2 flipped p-4 my-10 w-full md:w-1/2">
-                        <div class="flex justify-between mb-4">
-                          <h1 class="text-2xl underline">Notes</h1>
-                            <span>
-                            <span class="btn btn-teal pointer-events-none">Trash (3)</span>
-                            <span class="ml-2 btn btn-green pointer-events-none">New</span>
-                            </span>
-                        </div>
-                        <form class="md:space-x-2" id="search">
-                        <input aria-label="demo-search" name="search" disabled="" value="tag:&quot;demo&quot;">
-                        <span id="buttons">
-                        <button type="button" disabled="" class="btn btn-green pointer-events-none">search</button>
-                        <span class="btn btn-red pointer-events-none">clear</span>
-                        </span>
-                        </form>
-                        <div class="overflow-x-auto">
-                          <table id="notes">
-                            <thead>
-                              <tr>
-                                <th scope="col" class="w-1/2">Title</th>
-                                <th scope="col" class="w-1/4">Updated</th>
-                                <th scope="col" class="w-1/4">Tags</th>
-                              </tr>
-                            </thead>
-                            <tbody>
-                              <tr>
-                                <td><span class="text-blue-200 font-semibold underline">Formula 1</span></td>
-                                <td class="text-center">moments ago</td>
-                                <td>
-                                  <ul class="inline flex flex-wrap justify-center">
-                                    <li class="mx-2 my-1"><span class="tag disabled">#demo</span ></li>
-                                  </ul>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td><span class="text-blue-200 font-semibold underline">Syntax highlighting</span></td>
-                                <td class="text-center">2 hours ago</td>
-                                <td>
-                                  <ul class="inline flex flex-wrap justify-center">
-                                    <li class="mx-2 my-1"><span class="tag disabled">#features</span></li>
-                                    <li class="mx-2 my-1"><span class="tag disabled">#demo</span></li>
-                                  </ul>
-                                </td>
-                              </tr>
-                              <tr>
-                                <td><span class="text-blue-200 font-semibold underline">report</span></td>
-                                <td class="text-center">5 days ago</td>
-                                <td>
-                                  <ul class="inline flex flex-wrap justify-center">
-                                    <li class="mx-2 my-1"><span class="tag disabled">#study</span></li>
-                                    <li class="mx-2 my-1"><span class="tag disabled">#demo</span></li>
-                                  </ul>
-                                </td>
-                              </tr>
-                            </tbody>
-                          </table>
-                        </div>
-                    </div>
-                    """.trimIndent()
-
-                +html
+            div("md:order-1 order-2 flipped p-4 my-10 w-full md:w-1/2") {
+                attributes["aria-label"] = "demo"
+                div("flex justify-between mb-4") {
+                    h1("text-2xl underline") { +"Notes" }
+                    span {
+                        span("btn btn-teal pointer-events-none") { +"Trash (3)" }
+                        span("ml-2 btn btn-green pointer-events-none") { +"New" }
+                    }
+                }
+                form(classes = "md:space-x-2") {
+                    id = "search"
+                    input {
+                        attributes["aria-label"] = "demo-search"
+                        attributes["name"] = "search"
+                        attributes["disabled"] = ""
+                        attributes["value"] = "tag:\"demo\""
+                    }
+                    span {
+                        id = "buttons"
+                        button(type = ButtonType.button, classes = "btn btn-green pointer-events-none") {
+                            attributes["disabled"] = ""
+                            +"search"
+                        }
+                        span("btn btn-red pointer-events-none") { +"clear" }
+                    }
+                }
+                div("overflow-x-auto") {
+                    demoTable()
+                }
             }
-
             welcome()
         }
     }
 
+    @Suppress("NOTHING_TO_INLINE")
+    private inline fun DIV.demoTable() {
+        table {
+            id = "notes"
+            thead {
+                tr {
+                    th(scope = col, classes = "w-1/2") { +"Title" }
+                    th(scope = col, classes = "w-1/4") { +"Updated" }
+                    th(scope = col, classes = "w-1/4") { +"Tags" }
+                }
+            }
+            tbody {
+                listOf(
+                    Triple("Formula 1", "moments ago", arrayOf("#demo")),
+                    Triple("Syntax highlighting", "2 hours ago", arrayOf("#features", "#demo")),
+                    Triple("report", "5 days ago", arrayOf("#study", "#demo")),
+                ).forEach { (title, ago, tags) ->
+                    tr {
+                        td { span("text-blue-200 font-semibold underline") { +title } }
+                        td("text-center") { +ago }
+                        td {
+                            ul("inline flex flex-wrap justify-center") {
+                                tags.forEach { tag ->
+                                    li("mx-2 my-1") { span("tag disabled") { +tag } }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
     @Suppress("NOTHING_TO_INLINE")
     private inline fun DIV.welcome() {
         div("w-full my-auto md:w-1/2 md:order-2 order-1 text-center") {
             div("m-4 rounded-lg p-6") {
-                p("text-teal-400") {
-                    h2("text-3xl text-teal-400 underline") { +"Features:" }
-                    ul("list-disc text-lg list-inside") {
-                        li { +"Markdown support" }
-                        li { +"Full text search" }
-                        li { +"Structured search" }
-                        li { +"Code highlighting" }
-                        li { +"Fast and lightweight" }
-                        li { +"No tracking" }
-                        li { +"Works without javascript" }
-                        li { +"Data export" }
-                    }
+                h2("text-3xl text-teal-400 underline") { +"Features:" }
+                ul("list-disc text-lg list-inside") {
+                    li { +"Markdown support" }
+                    li { +"Full text search" }
+                    li { +"Structured search" }
+                    li { +"Code highlighting" }
+                    li { +"Fast and lightweight" }
+                    li { +"No tracking" }
+                    li { +"Works without javascript" }
+                    li { +"Data export" }
                 }
             }
         }