diff --git a/js/template-engine.js b/js/template-engine.js
new file mode 100644
index 0000000..97834c2
--- /dev/null
+++ b/js/template-engine.js
@@ -0,0 +1,124 @@
+function extractSchemaDetails(str) {
+    // Regular expression with named capture groups for name and optional placeholder
+    const regex = /{{(?<name>[^:}]+)(?::(?<placeholder>[^:}]+))?}}/g
+    const results = []
+    let match
+
+    while ((match = regex.exec(str)) !== null) {
+
+        // check if the match is already in the results array
+        if (results.some((result) => result.name === match.groups.name)) {
+            continue
+        }
+
+        results.push({
+            name: match.groups.name,
+            placeholder: match.groups.placeholder || null, // If placeholder is undefined, null
+            input: null
+        })
+    }
+
+    return results
+}
+
+function replaceDivTextExceptSpan(div, newTextBefore) {
+
+    // Iterate over child nodes of the div
+    for (const node of div.childNodes) {
+        // Check if the node is a text node
+        if (node.nodeType === Node.TEXT_NODE) {
+            // Check the position of the text node to determine if it's before or after the span
+            if (node.nextSibling && node.nextSibling.tagName === 'SPAN') {
+                // Text node before the span
+                node.nodeValue = newTextBefore;
+            }
+        }
+    }
+}
+
+
+const main = () => {
+    // select every code block with class language-template
+    document.querySelectorAll('code.language-template').forEach((codeElement) => {
+        // get the code inside the block
+        const codeInnerText = codeElement.innerText
+        const id = Math.random().toString(36).substring(7)
+
+        const templateContainer = document.createElement('div')
+        templateContainer.id = id;
+        templateContainer.className = "template-container"
+
+        const title = document.createElement('div')
+        title.className = "template-title"
+        title.innerText = "Template"
+        templateContainer.appendChild(title)
+
+        const templateVars = extractSchemaDetails(codeInnerText)
+
+        const renderInputs = () => {
+            let newCode = codeInnerText
+
+            templateVars.forEach((variable) => {
+                const escapedPlaceholder = variable.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                const regexPattern = `{{${escapedPlaceholder}(?::[^}]+)?}}`; // Matches {{name}} or {{name:anything}}
+                const regex = new RegExp(regexPattern, 'g');
+
+                if (variable.input !== null && variable.input !== "") {
+                    newCode = newCode.replace(regex, variable.input)
+                }
+            })
+
+            replaceDivTextExceptSpan(codeElement, newCode)
+            console.log(newCode)
+        }
+
+        // create input elements
+        templateVars.forEach((variable) => {
+            const inputDiv = document.createElement('div')
+            inputDiv.className = "template-input-div"
+
+            const label = document.createElement('label')
+            label.for = `${id}-${variable.name}`
+            label.innerText = variable.name
+
+            const input = document.createElement('input')
+            input.id = `${id}-${variable.name}`
+            input.placeholder = variable.placeholder || variable.name
+            input.value = null
+            input.className = "template-input"
+
+            input.addEventListener('input', e => {
+                variable.input = e.target.value
+                renderInputs()
+            })
+
+            inputDiv.appendChild(label)
+            inputDiv.appendChild(input)
+            templateContainer.appendChild(inputDiv)
+            console.log(variable.name, variable.placeholder)
+        })
+
+        const copyButton = document.createElement('button')
+        copyButton.className = "template-copy-button"
+        copyButton.innerText = "Copy"
+        copyButton.addEventListener('click', () => {
+            navigator.clipboard.writeText(codeElement.innerText.trim())
+        })
+        templateContainer.appendChild(copyButton)
+
+        // get parent element
+        const outerDiv = codeElement.parentElement.parentElement.parentElement
+        const codeBlock = codeElement.parentElement.parentElement
+
+
+        // insert the template container before the code block
+        outerDiv.insertBefore(templateContainer, codeElement.parentElement.parentElement)
+
+
+        templateContainer.appendChild(codeBlock)
+    })
+}
+
+window.boot.register("page-ready", () => {
+    main()
+})
\ No newline at end of file
diff --git a/styles/boxes.css b/styles/boxes.css
new file mode 100644
index 0000000..0bca540
--- /dev/null
+++ b/styles/boxes.css
@@ -0,0 +1,47 @@
+.box-grau {
+  background-color: #697f85!important;
+  padding: 1rem!important;
+  border-radius: .6rem;
+  color: #fff!important;
+  margin: 1rem 0!important;
+  text-align: center!important
+}
+.box-blau {
+  background-color: #137da9!important;
+  padding: 1rem!important;
+  border-radius: .6rem;
+  color: #fff!important;
+  margin: 1rem 0!important;
+  text-align: center!important
+}
+.box-gruen {
+  background-color: #a4ba2e!important;
+  padding: 1rem!important;
+  border-radius: .6rem;
+  color: #fff!important;
+  margin: 1rem 0!important;
+  text-align: center!important
+}
+.is-info {
+  background-color: #49bbeb!important;
+  border-color: #137da9!important
+}
+.is-success {
+  background-color: #a4ba2e!important;
+  border-color: #6b7b1d!important
+}
+.is-warning {
+  background-color: #ffb74d!important;
+  border-color: #b33f00!important
+}
+.is-danger {
+  background-color: #e57373!important;
+  border-color: #b71c1c!important
+}
+.box > p,
+.is-danger > p,
+.is-info > p,
+.is-success > p,
+.is-warning > p {
+  color: #fff!important
+}
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
index 656d9eb..2bf7d8b 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -1,3 +1,5 @@
 :root {
-    color: red;
+  --override_blue: rgb(74,187,235);
+  --override_green: rgb(164, 186, 46);
+  --override_gray: rgb(105, 127, 133);
 }
\ No newline at end of file
diff --git a/styles/tables.css b/styles/tables.css
new file mode 100644
index 0000000..df5957c
--- /dev/null
+++ b/styles/tables.css
@@ -0,0 +1,56 @@
+table {
+  display: block;
+  border-collapse: collapse;
+  color: #697f85!important;
+  margin-left: 0!important;
+  margin-right: 0!important;
+  overflow-x: auto
+}
+tr {
+  border: none
+}
+th {
+  border: solid .5px #697f85!important;
+  border-bottom: solid 2px #697f85!important
+}
+td {
+  border: solid .5px #697f85!important
+}
+
+#bg-white {
+  color: #575756!important;
+  background-color: #fff!important
+}
+#stuve-gruen-text {
+  color: #6b7b1d!important
+}
+#stuve-grau-text {
+  color: #697f85!important
+}
+#stuve-blau-text {
+  color: #4abbeb!important
+}
+#stuve-gruen {
+  color: #fff!important;
+  background-color: #a4ba2e!important
+}
+#stuve-grau {
+  color: #fff!important;
+  background-color: #697f85!important
+}
+#stuve-blau {
+  color: #fff!important;
+  background-color: #4abbeb!important
+}
+#danger {
+  color: #fff!important;
+  background-color: red!important
+}
+#warning {
+  color: #fff!important;
+  background-color: orange!important
+}
+#success {
+  color: #fff!important;
+  background-color: green!important
+}
\ No newline at end of file
diff --git a/styles/template-engine.css b/styles/template-engine.css
new file mode 100644
index 0000000..058d764
--- /dev/null
+++ b/styles/template-engine.css
@@ -0,0 +1,41 @@
+.template-container {
+  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
+  border-radius: 4px;
+  background-color: #fff;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px
+}
+.template-title {
+  font-size: 16px;
+  font-weight: 500
+}
+.template-input-div {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px
+}
+.template-input {
+  border: 1px solid #999;
+  border-radius: 4px;
+  padding: 10px;
+  margin-bottom: 4px;
+  width: 100%
+}
+.template-copy-button:hover {
+  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)
+}
+.template-copy-button:active {
+  background-color: #388e3c
+}
+.template-copy-button {
+  background-color: var(--override_green);
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 10px;
+  cursor: pointer;
+  transition: background-color .3s
+}
\ No newline at end of file
diff --git a/styles/theme_override.css b/styles/theme_override.css
new file mode 100644
index 0000000..220134f
--- /dev/null
+++ b/styles/theme_override.css
@@ -0,0 +1,106 @@
+@import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap');
+
+a {
+  color: #137da9!important
+}
+.is-active,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600!important;
+  color: #6b7b1d!important
+}
+h1::after,
+h2::after,
+h3::after,
+h4::after,
+h5::after,
+h6::after {
+  background: linear-gradient(90deg,#6b7b1d,rgba(255,255,255,0))!important
+}
+.v-list-item--active {
+  color: #fff!important
+}
+html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap main.v-main div.v-main__wrap div.container.grey.pa-0.container--fluid.lighten-4 div.row.no-gutters.align-content-center div.page-col-content.is-page-header.offset-lg-3.offset-xl-2.col.pl-4 div.headline.grey--text.text--darken-3 {
+  color: #697f85!important
+}
+html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap main.v-main div.v-main__wrap div.container.grey.pa-0.container--fluid.lighten-4 div.row.no-gutters.align-content-center div.page-col-content.is-page-header.offset-lg-3.offset-xl-2.col.pl-4 div.caption.grey--text.text--darken-1 {
+  color: #697f85!important
+}
+html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap main.v-main div.v-main__wrap header.v-sheet.theme--light.v-toolbar.v-toolbar--dense.v-toolbar--flat.grey.lighten-3 div.v-toolbar__content ul.v-breadcrumbs.breadcrumbs-nav.pl-0.theme--light button.v-icon.notranslate.v-icon--link.mdi.mdi-home.theme--light {
+  color: #137da9!important
+}
+html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap main.v-main div.v-main__wrap div.container.grey.pa-0.container--fluid.lighten-4 div.row.no-gutters.align-content-center div.page-col-content.is-page-header.offset-lg-3.offset-xl-2.col.pl-4 div.headline.grey--text.text--darken-3 {
+  font-weight: 600!important;
+  color: #137da9!important;
+  text-transform: uppercase;
+  letter-spacing: .05rem!important
+}
+div.page-col-content:first-child > div:nth-child(2) {
+  font-weight: 600!important;
+  color: #137da9!important;
+  letter-spacing: .05rem!important
+}
+
+.v-application{
+      font-family: 'Overpass', sans-serif !important;
+}
+
+p {
+  color:  #575756 !important;
+}
+
+/* dragons be here */
+.v-application .primary {
+  background-color: var(--override_green) !important;
+  border-color: var(--override_green) !important;
+}
+
+.comments-header {
+  background-color: var(--override_green) !important;
+}
+.__bar-is-vertical {
+  background: rgba(255, 255, 255, 0) !important;
+}
+.nav-header {
+  background-color: var(--override_gray) !important;
+}
+html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black {
+    background-color: var(--override_gray) !important;
+}
+html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black div.v-toolbar__content {
+    background-color: var(--override_gray)!important;
+}
+html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black div.v-toolbar__content div.layout.row {
+    background-color: var(--override_gray)!important;
+}
+.header {
+    background-color: var(--override_gray)!important;
+}
+.nav-header-inner {
+    background-color: var(--override_gray)!important;
+}
+html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black div.v-toolbar__content div.layout.row div.flex.md4 header.nav-header-inner.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.black {
+    background-color: var(--override_gray)!important;
+}
+html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black div.v-toolbar__content div.layout.row div.flex.xs7.md4 header.nav-header-inner.pr-4.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.black {
+    background-color: var(--override_gray)!important;
+}
+html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black div.v-toolbar__content div.layout.row div.flex.xs5.md4 header.nav-header-inner.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.black.pl-3 {
+    background-color: var(--override_gray)!important;
+}
+html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black div.v-toolbar__content div.layout.row div.flex.xs7.md4 header.nav-header-inner.pr-4.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.black div.v-toolbar__content button.v-btn.v-btn--flat.v-btn--icon.v-btn--round.v-btn--tile.theme--dark.v-size--default span.v-btn__content i.v-icon.notranslate.mdi.mdi-file-document-edit-outline.theme--dark.grey--text {
+    color: white !important;
+}
+.v-application .grey--text {
+    color: white !important;
+}
+html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black div.v-toolbar__content div.layout.row div.flex.md4 header.nav-header-inner.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.black div.v-toolbar__content div.v-input.v-input--hide-details.theme--dark.v-text-field.v-text-field--single-line.v-text-field--solo.v-text-field--solo-flat.v-text-field--is-booted.v-text-field--enclosed.v-text-field--rounded div.v-input__control div.v-input__slot {
+    background: var(--override_blue) !important;
+}
+.v-application .black {
+    background-color: var(--override_gray) !important;
+}
\ No newline at end of file