diff --git a/README.md b/README.md
index d9c8c34..cecd057 100644
--- a/README.md
+++ b/README.md
@@ -1,28 +1,20 @@
-# Viossa.net
+# Viossa.net kotoba-tumam
 
 bråtula viossa.net måde! We're here to build an informational website about Viossa.
 
 ## The Stack
 **What will we be using to build this site?**
 
-### Core
+### Backend
+- [Node.js](https://nodejs.org/)
 - [TypeScript](https://www.typescriptlang.org/)
 - [pnpm](https://pnpm.io/)
 - [Turborepo](https://turborepo.com/)
 
 ### Frontend
-- [Vue 3](https://vuejs.org/)
-- [Vite](https://vite.dev/)
+- The ktb frontend is purely coded in HTML, CSS, and browser JS.
+- [AlpineJS](https://alpinejs.dev/)
 
-Additionally, we will be following [**atomic design principles**](https://bradfrost.com/blog/post/atomic-web-design/) to organize the components of the project.
-
-### Styling
-- [Bulma](https://bulma.io/)
-- [Tailwind CSS](https://tailwindcss.com/)
-- [Sass](https://sass-lang.com/)
-
-### Backend
-- [Node.js](https://nodejs.org/)
 
 ### Linting
 - [Prettier](https://prettier.io/)
@@ -46,15 +38,12 @@ Additionally, we will be following [**atomic design principles**](https://bradfr
 This project uses Turborepo for task management/caching. Install Turborepo globally on your machine to allow for executing turbo commands more easily: `pnpm i -g turbo` (this is needed to continue with the instructions below)
 
 ### Frontend (Viossa.net)
-1. Ensure you're in the root directory of the project (`ViossaDotNet`)
-1. Move into the app's directory: `cd apps/vdn-static`
-1. To run the site, use `turbo dev`. This will set up watchers to build all libraries used by the frontend, as well as hot-refreshing the site as changes are made to it.
-1. To view the website running locally, visit http://localhost:1224/ in your browser!
+1. The frontend no longer requires a compilation step. Yippee!
 
 ### Backend (Viossa DB)
 1. Ensure you're in the root directory of the project (`ViossaDotNet`)
 1. Move into the app's directory: `cd apps/vdb-backend`
-1. To run the site, use `turbo start`. This will build all of the app's dependencies and then start the application.
+1. To run the API, use `turbo start`. This will build all of the app's dependencies and then start the application.
    1. **NOTE:** Backend apps are not watched/hot-refreshed like frontend apps! If you make changes, you must kill the app and re-run it to apply changes.
 1. To view a sample response from the backend API, visit http://localhost:1225/sample in your browser!
 
diff --git a/apps/ktb-static/script.js b/apps/ktb-static/script.js
index 0beaf9a..ce3db82 100644
--- a/apps/ktb-static/script.js
+++ b/apps/ktb-static/script.js
@@ -1,4 +1,5 @@
-// script.js
+let HOST = 'http://localhost:1225'
+
 document.addEventListener("alpine:init", () => {
 	Alpine.store("dictionary", {
 		search_results: {
@@ -83,7 +84,7 @@ document.addEventListener("alpine:init", () => {
 
 		async fetch_all_lects() {
 			try {
-				const res = await axios.get("http://localhost:1225/lects");
+				const res = await axios.get(`${HOST}/lects`);
 				return res.data;
 			} catch (e) {
 				console.error(e);
@@ -92,7 +93,7 @@ document.addEventListener("alpine:init", () => {
 
 		async post_lect(lect_name) {
 			try {
-				const res = await axios.post("http://localhost:1225/lect", {
+				const res = await axios.post(`${HOST}/lect`, {
 					lect_name,
 				});
 				return res.data.lect;
@@ -103,7 +104,7 @@ document.addEventListener("alpine:init", () => {
 
 		async fetch_all_terms(search_term) {
 			try {
-				const res = await axios.get("http://localhost:1225/search", {
+				const res = await axios.get(`${HOST}/search`, {
 					params: { search_term: search_term },
 				});
 				this.search_results = res.data;
@@ -115,7 +116,7 @@ document.addEventListener("alpine:init", () => {
 		async fetch_one_lemma_detail(lemma_name) {
 			try {
 				const res = await axios.get(
-					"http://localhost:1225/lemma-detail",
+					`${HOST}/lemma-detail`,
 					{ params: { lemma_name } },
 				);
 				return res.data.lemma_detail;
@@ -127,7 +128,7 @@ document.addEventListener("alpine:init", () => {
 		async put_definition(definition_id, definition_text, lemma_name) {
 			try {
 				const res = await axios.put(
-					"http://localhost:1225/definition",
+					`${HOST}/definition`,
 					{ definition_id, definition_text, lemma_name },
 				);
 				return res.data.lemma_detail;
@@ -142,7 +143,7 @@ document.addEventListener("alpine:init", () => {
 			) {
 				try {
 					const res = await axios.delete(
-						`http://localhost:1225/definition/${definition_id}`,
+						`${HOST}/definition/${definition_id}`,
 					);
 				} catch (e) {
 					console.error(e);
@@ -152,7 +153,7 @@ document.addEventListener("alpine:init", () => {
 
 		async put_example(example_id, example_text, lemma_name) {
 			try {
-				const res = await axios.put("http://localhost:1225/example", {
+				const res = await axios.put(`${HOST}/example`, {
 					example_id,
 					example_text,
 					lemma_name,
@@ -169,7 +170,7 @@ document.addEventListener("alpine:init", () => {
 			) {
 				try {
 					const res = await axios.delete(
-						`http://localhost:1225/example/${example_id}`,
+						`${HOST}/example/${example_id}`,
 					);
 				} catch (e) {
 					console.error(e);
@@ -179,7 +180,7 @@ document.addEventListener("alpine:init", () => {
 
 		async put_word_form_text(word_form_id, word_form_text) {
 			try {
-				const res = await axios.put("http://localhost:1225/word-form", {
+				const res = await axios.put(`${HOST}/word-form`, {
 					word_form_id,
 					word_form_text,
 				});
@@ -198,7 +199,7 @@ document.addEventListener("alpine:init", () => {
 
 			try {
 				const res = await axios.post(
-					"http://localhost:1225/word-form",
+					`${HOST}/word-form`,
 					{ lemma_name, lect_name, word_form_text },
 				);
 				return res.data.lemma_detail;
@@ -207,13 +208,26 @@ document.addEventListener("alpine:init", () => {
 			}
 		},
 
+		async post_lemma(lect_name, word_form_text){
+			/* Accepts a new word form for a lemma and the corresponding lect, initializing with the provided form. */
+			try {
+				const res = await axios.post(
+					`${HOST}/lemma`,
+					{ lect_name, word_form_text },
+				);
+				return res.data.lemma_detail;
+			} catch (e) {
+				console.error(e);
+			}
+		},
+
 		async delete_word_form(word_form_id, word_form_text) {
 			if (
 				window.confirm(`Du keshite kofal ${word_form_text}.\nPravda?`)
 			) {
 				try {
 					const res = await axios.delete(
-						`http://localhost:1225/word-form/${word_form_id}`,
+						`${HOST}/word-form/${word_form_id}`,
 					);
 					return res.data.lemma_detail;
 				} catch (e) {
diff --git a/apps/ktb-static/search.html b/apps/ktb-static/search.html
index 7df2ffb..be53ed4 100644
--- a/apps/ktb-static/search.html
+++ b/apps/ktb-static/search.html
@@ -21,9 +21,48 @@
 				lects: [],
 				current_result_page: 0,
 				results_per_page: 30,
+				new_lemma_form_open: false,
 				md(text){
 					return $store.dictionary.md(text);
 				},
+				async put_word_form_text(word_form_id, word_form_text){
+					$store.dictionary.put_word_form_text(word_form_id, word_form_text).then(()=>{
+						this.load_detail();
+					});
+				},
+				async post_new_word_form(lemma_name, lect_name, word_form_text){
+					$store.dictionary.post_new_word_form(lemma_name, lect_name, word_form_text).then(()=>{
+						this.load_detail();
+					});
+				},
+				async delete_word_form(word_form_id, word_form_text){
+					$store.dictionary.delete_word_form(word_form_id, word_form_text).then(()=>{
+						this.load_detail();
+					});
+				},
+				async put_definition(definition_id, definition_text){
+					$store.dictionary.put_definition(definition_id, definition_text, this.lemma_detail?.lemma_name).then(()=>{
+						this.load_detail();
+					});
+				},
+				async delete_definition(definition_id, definition_text){
+					$store.dictionary.delete_definition(definition_id, definition_text).then(()=>{
+						this.load_detail();
+					});
+				},
+				async put_example(example_id, example_text){
+					$store.dictionary.put_example(example_id, example_text, this.lemma_detail?.lemma_name).then(()=>{
+						this.load_detail();
+					});
+				},
+				async post_lemma(lect_name, word_form_text){
+					$store.dictionary.post_lemma(lect_name, word_form_text).then(lemma=>console.info(JSON.stringify(lemma)));
+				},
+				async delete_example(example_id, example_text){
+					$store.dictionary.delete_example(example_id, example_text).then(()=>{
+						this.load_detail();
+					});
+				},
 			}"
 			x-init="$store.dictionary.fetch_all_lects().then((lects_response)=>{
 				if(!!lects_response.lects) {
@@ -32,7 +71,6 @@
 			});">
 			<aside class="sidebar">
 				<div class="preferences-pane">
-
 					<button
 						@click="showPrefs = !showPrefs"
 						class="prefs-toggle is-fullwidth">
@@ -83,39 +121,53 @@
 			</aside>
 
 			<main class="main-content">
-				<div class="search-bar">
-					<button
-						@click="$store.dictionary.fetch_all_terms(search_term)">
-						Zuha
-					</button>
-					<input
-						type="text"
-						x-model="search_term"
-						@keydown.enter="$store.dictionary.fetch_all_terms(search_term)"
-						placeholder="Tasta ko(tel) her..." />
-				</div>
-				<div class="flex-row" 
-					x-data="{
-						page_count: 1,
-						item_count: 0
-					}"
-					x-effect="current_result_page = Math.min(current_result_page, page_count-1); page_count = Math.ceil($store.dictionary.search_results.terms/results_per_page); item_count = $store.dictionary.search_results.terms;">
-					<button 
-						class="hollow primary" 
-						x-show="item_count > results_per_page && current_result_page > 0"
-						@click="current_result_page-=1"><strong>←</strong></button>
-					<div x-text="`${current_result_page + 1} / ${page_count}`"></div>
-					<button 
-						class="hollow primary" 
-						x-show="item_count > results_per_page && current_result_page+1 < page_count"
-						@click="current_result_page+=1"><strong>→</strong></button>
-					<select x-model="results_per_page">
-						<option value="15">15</option>
-						<option value="30">30</option>
-						<option value="60">60</option>
-						<option value="120">120</option>
-					</select>
+				<div class="top-bar sticky top">
+					<div class="search-bar">
+						<button
+							@click="$store.dictionary.fetch_all_terms(search_term)">
+							Zuha
+						</button>
+						<input
+							type="text"
+							x-model="search_term"
+							@keydown.enter="$store.dictionary.fetch_all_terms(search_term)"
+							placeholder="Tasta ko(tel) her..." />
+						<button
+							class="hollow primary"
+							@click="new_lemma_form_open = true">
+							+
+						</button>
+					</div>
+					<div
+						class="flex-row"
+						x-data="{
+							page_count: 1,
+							item_count: 0
+						}"
+						x-effect="current_result_page = Math.min(current_result_page, page_count-1); page_count = Math.ceil($store.dictionary.search_results.terms/results_per_page); item_count = $store.dictionary.search_results.terms;">
+						<button
+							class="hollow primary"
+							:disabled="!(item_count > results_per_page && current_result_page > 0)"
+							@click="current_result_page-=1">
+							<strong>←</strong>
+						</button>
+						<div
+							x-text="`${current_result_page + 1} / ${page_count}`"></div>
+						<button
+							class="hollow primary"
+							:disabled="!(item_count > results_per_page && current_result_page+1 < page_count)"
+							@click="current_result_page+=1">
+							<strong>→</strong>
+						</button>
+						<select x-model="results_per_page">
+							<option value="15">15</option>
+							<option value="30">30</option>
+							<option value="60">60</option>
+							<option value="120">120</option>
+						</select>
+					</div>
 				</div>
+
 				<div class="cards-container">
 					<template
 						x-for="item in $store.dictionary.filter_results(search_term).slice(current_result_page*results_per_page, Math.min((current_result_page+1)*results_per_page, $store.dictionary.search_results.terms))"
@@ -132,41 +184,7 @@
 								example_text: '',
 								definition_text: '',
 								lemma_detail: null,
-								async put_word_form_text(word_form_id, word_form_text){
-									$store.dictionary.put_word_form_text(word_form_id, word_form_text).then(()=>{
-										this.load_detail();
-									});
-								},
-								async post_new_word_form(lemma_name, lect_name, word_form_text){
-									$store.dictionary.post_new_word_form(lemma_name, lect_name, word_form_text).then(()=>{
-										this.load_detail();
-									});
-								},
-								async delete_word_form(word_form_id, word_form_text){
-									$store.dictionary.delete_word_form(word_form_id, word_form_text).then(()=>{
-										this.load_detail();
-									});
-								},
-								async put_definition(definition_id, definition_text){
-									$store.dictionary.put_definition(definition_id, definition_text, this.lemma_detail?.lemma_name).then(()=>{
-										this.load_detail();
-									});
-								},
-								async delete_definition(definition_id, definition_text){
-									$store.dictionary.delete_definition(definition_id, definition_text).then(()=>{
-										this.load_detail();
-									});
-								},
-								async put_example(example_id, example_text){
-									$store.dictionary.put_example(example_id, example_text, this.lemma_detail?.lemma_name).then(()=>{
-										this.load_detail();
-									});
-								},
-								async delete_example(example_id, example_text){
-									$store.dictionary.delete_example(example_id, example_text).then(()=>{
-										this.load_detail();
-									});
-								},
+								
 								async toggle_expand() {
 									if(!this.lemma_detail){
 										/* If there isn't a lemma detail loaded yet, get it then expand. */
@@ -209,80 +227,157 @@
 								<h4>Trofal</h4>
 								<table class="is-fullwidth">
 									<tbody>
-									<template
-										x-for="wf2 in (lemma_detail?.word_forms ?? [])">
-										<tr x-data="{
+										<template
+											x-for="wf2 in (lemma_detail?.word_forms ?? [])">
+											<tr
+												x-data="{
 											editing:false,
 											edited_text: wf2.word_form
 										}">
-											<td style="width: 8em;"
-												x-text="wf2 ? wf2.lect.name : '(empty)'"></td>
-											<td>
-												<span x-text="wf2 ? wf2.word_form : '(empty)'" 
-												@click="editing = true"
-												x-show="!editing"></span>
-			
-												<input 
-													type="text" 
-													class="is-fullwidth"
-													@click.outside="editing = false" 
-													x-show="editing" 
-													x-model="edited_text">
-											</td>
-											<td style="width: 5em;">
-												<div class="float-right">
-													<button class="tiny hollow primary" x-show="!editing" title="kawari" 
-														@click="editing = true" >~</button>
-													<button class="tiny hollow delete" x-show="!editing" title="keshite" 
-														@click="await delete_word_form(wf2.word_form_id, wf2.word_form)" >x</button>
-													<button class="tiny edit" x-show="editing" title="jame" 
-														@click="editing = false">/</button>
-													<button class="tiny" x-show="editing" title="antaa"
-														@click="await put_word_form_text(wf2.word_form_id, edited_text); editing = false" >></button>
-												</div>
-											</td>
-										</tr>
-									</template>
+												<td
+													style="width: 8em"
+													x-text="wf2 ? wf2.lect.name : '(empty)'"></td>
+												<td>
+													<span
+														x-text="wf2 ? wf2.word_form : '(empty)'"
+														@click="editing = true"
+														x-show="!editing"></span>
+
+													<input
+														type="text"
+														class="is-fullwidth"
+														@click.outside="editing = false"
+														x-show="editing"
+														x-model="edited_text" />
+												</td>
+												<td style="width: 5em">
+													<div class="float-right">
+														<button
+															class="tiny hollow primary"
+															x-show="!editing"
+															title="kawari"
+															@click="editing = true">
+															~
+														</button>
+														<button
+															class="tiny hollow delete"
+															x-show="!editing"
+															title="keshite"
+															@click="await delete_word_form(wf2.word_form_id, wf2.word_form)">
+															×
+														</button>
+														<button
+															class="tiny edit"
+															x-show="editing"
+															title="jame"
+															@click="editing = false">
+															/
+														</button>
+														<button
+															class="tiny"
+															x-show="editing"
+															title="antaa"
+															@click="await put_word_form_text(wf2.word_form_id, edited_text); editing = false">
+															>
+														</button>
+													</div>
+												</td>
+											</tr>
+										</template>
 									</tbody>
 
 									<!-- Add new wf -->
 									<tfoot>
-										<tr x-data="{
+										<tr
+											x-data="{
 											adding_word_form:false,
 											new_word_form_text:'',
 											selected_lect:'',
 											adding_lect:false, 
 											new_lect_name:''
 											}">
-										
-											<td colspan="3" x-show="!adding_word_form">
-												<button class="is-fullwidth hollow primary" 
-													@click="adding_word_form = !adding_word_form">+</button>
+											<td
+												colspan="3"
+												x-show="!adding_word_form">
+												<button
+													class="is-fullwidth hollow primary"
+													@click="adding_word_form = !adding_word_form">
+													+
+												</button>
 											</td>
-										
-											<td colspan="3" x-show="adding_word_form"  style="width: 12em;">
-												<div style="display: flex; flex-direction: row; gap: 2em; justify-content: space-between;">
+
+											<td
+												colspan="3"
+												x-show="adding_word_form"
+												style="width: 12em">
+												<div
+													style="
+														display: flex;
+														flex-direction: row;
+														gap: 2em;
+														justify-content: space-between;
+													">
 													<div>
-														<select name="vilgovor" x-model="selected_lect" x-show="!adding_lect">
-															<option value="" selected disabled hidden>Sentaku...</option>
-															<template x-for="lect in lects">
-																<option :value="lect.name" x-text="lect.name"></option>
+														<select
+															name="vilgovor"
+															x-model="selected_lect"
+															x-show="!adding_lect">
+															<option
+																value=""
+																selected
+																disabled
+																hidden>
+																Sentaku...
+															</option>
+															<template
+																x-for="lect in lects">
+																<option
+																	:value="lect.name"
+																	x-text="lect.name"></option>
 															</template>
 														</select>
-														<input type="text" x-show="adding_lect" x-model="new_lect_name">
-														<button class="float-right tiny primary" x-show="!adding_lect" @click="adding_lect = true" title="neo govor">+</button>
-														<button class="float-right tiny edit" x-show="adding_lect" title="jame" @click="adding_lect = false">/</button>
+														<input
+															type="text"
+															x-show="adding_lect"
+															x-model="new_lect_name" />
+														<button
+															class="float-right tiny primary"
+															x-show="!adding_lect"
+															@click="adding_lect = true"
+															title="neo govor">
+															+
+														</button>
+														<button
+															class="float-right tiny edit"
+															x-show="adding_lect"
+															title="jame"
+															@click="adding_lect = false">
+															/
+														</button>
 													</div>
 													<div>
-														<input type="text" x-model="new_word_form_text">
+														<input
+															type="text"
+															x-model="new_word_form_text" />
 													</div>
 													<div class="float-right">
-														<button class="tiny edit" x-show="adding_word_form" title="jame" @click="adding_word_form = false">/</button>
-														<button class="tiny" x-show="adding_word_form" title="antaa"
-															@click="await post_new_word_form(item.lemma_name, adding_lect ? new_lect_name : selected_lect, new_word_form_text); adding_word_form = false">></button>
+														<button
+															class="tiny edit"
+															x-show="adding_word_form"
+															title="jame"
+															@click="adding_word_form = false">
+															/
+														</button>
+														<button
+															class="tiny"
+															x-show="adding_word_form"
+															title="antaa"
+															:disabled="!(selected_lect || new_lect_name)"
+															@click="await post_new_word_form(item.lemma_name, adding_lect ? new_lect_name : selected_lect, new_word_form_text); adding_word_form = false">
+															>
+														</button>
 													</div>
 												</div>
-												
 											</td>
 										</tr>
 									</tfoot>
@@ -290,23 +385,51 @@
 
 								<h4>Imi</h4>
 								<ul>
-									<template x-for="def in (lemma_detail?.definitions ?? [])">
+									<template
+										x-for="def in (lemma_detail?.definitions ?? [])">
 										<li
-										x-data="{
+											x-data="{
 											editing: false,
 											edited_text: def.definition_text.toString()
-										}" @click.outside="editing = false">
-											<span x-show="!editing" x-html="md(def.definition_text)" @click="editing = true"></span>
-											<input type="text" x-show="editing" x-model="edited_text">
+										}"
+											@click.outside="editing = false">
+											<span
+												x-show="!editing"
+												x-html="md(def.definition_text)"
+												@click="editing = true"></span>
+											<input
+												type="text"
+												x-show="editing"
+												x-model="edited_text" />
 											<div class="float-right">
-												<button class="tiny hollow primary" title="kawari" x-show="!editing" 
-													@click="editing = true">~</button>
-												<button class="tiny edit" title="jame" x-show="editing" 
-													@click="editing = false">/</button>
-												<button class="tiny primary" title="antaa" x-show="editing" 
-													@click="await put_definition(def.definition_id, edited_text); editing = false">></button>
-												<button class="tiny hollow delete" x-show="!editing" title="keshite" 
-													@click="await delete_definition(def.definition_id, def.definition_text)" >x</button>
+												<button
+													class="tiny hollow primary"
+													title="kawari"
+													x-show="!editing"
+													@click="editing = true">
+													~
+												</button>
+												<button
+													class="tiny edit"
+													title="jame"
+													x-show="editing"
+													@click="editing = false">
+													/
+												</button>
+												<button
+													class="tiny primary"
+													title="antaa"
+													x-show="editing"
+													@click="await put_definition(def.definition_id, edited_text); editing = false">
+													>
+												</button>
+												<button
+													class="tiny hollow delete"
+													x-show="!editing"
+													title="keshite"
+													@click="await delete_definition(def.definition_id, def.definition_text)">
+													×
+												</button>
 											</div>
 										</li>
 									</template>
@@ -334,7 +457,7 @@
 										Popoczta
 									</button>
 								</div>
-								
+
 								<button
 									class="is-fullwidth hollow primary"
 									x-show="!adding_definition"
@@ -344,23 +467,52 @@
 
 								<h4>Tatoeba</h4>
 								<ul>
-									<template x-for="ex in (lemma_detail?.examples ?? [])">
-										<li x-data="{
+									<template
+										x-for="ex in (lemma_detail?.examples ?? [])">
+										<li
+											x-data="{
 											editing:false,
 											edited_text: ex.example_text.toString()
 										}"
-										@click.outside="editing = false">
-											<span x-show="!editing" x-html="md(ex.example_text)" @click="editing = true"></span>
-											<input type="text" x-show="editing" x-model="edited_text">
+											@click.outside="editing = false">
+											<span
+												x-show="!editing"
+												x-html="md(ex.example_text)"
+												@click="editing = true"></span>
+											<input
+												type="text"
+												x-show="editing"
+												x-model="edited_text" />
 											<div class="float-right">
-												<button class="tiny hollow primary" x-show="!editing" 
-													@click="editing = true" title="kawari">~</button>
-												<button class="tiny edit" x-show="editing" 
-													@click="editing = false" title="jame">/</button>
-												<button class="tiny" x-show="editing" type="button" 
-													@click="await put_example(ex.example_id, edited_text); editing = false" title="antaa">></button>
-												<button class="tiny hollow delete" x-show="!editing" title="keshite" 
-													@click="await delete_example(ex.example_id, ex.example_text)">x</button>
+												<button
+													class="tiny hollow primary"
+													x-show="!editing"
+													@click="editing = true"
+													title="kawari">
+													~
+												</button>
+												<button
+													class="tiny edit"
+													x-show="editing"
+													@click="editing = false"
+													title="jame">
+													/
+												</button>
+												<button
+													class="tiny"
+													x-show="editing"
+													type="button"
+													@click="await put_example(ex.example_id, edited_text); editing = false"
+													title="antaa">
+													>
+												</button>
+												<button
+													class="tiny hollow delete"
+													x-show="!editing"
+													title="keshite"
+													@click="await delete_example(ex.example_id, ex.example_text)">
+													×
+												</button>
 											</div>
 										</li>
 									</template>
@@ -397,6 +549,89 @@
 					</template>
 				</div>
 			</main>
+
+			<div
+				x-show="new_lemma_form_open"
+				class="modal"
+				x-data="{
+					adding_word_form:false,
+					adding_lect:false, 
+					new_word_form_text:'',
+					selected_lect:'',
+					new_lect_name:''
+				}"
+				@click.self="new_lemma_form_open = false;">
+				<div class="card">
+					<h3>Neo kotoba...</h3>
+					<div class="flex-row">
+						<div>
+							<label>
+								<div>Viljena govor</div>
+								<div>
+									<select
+										name="vilgovor"
+										x-model="selected_lect"
+										x-show="!adding_lect">
+										<option
+											value=""
+											selected
+											disabled
+											hidden>
+											Sentaku...
+										</option>
+										<template x-for="lect in lects">
+											<option
+												:value="lect.name"
+												x-text="lect.name"></option>
+										</template>
+									</select>
+									<input
+										type="text"
+										x-show="adding_lect"
+										x-model="new_lect_name" />
+									<button
+										class="float-right tiny primary"
+										x-show="!adding_lect"
+										@click="adding_lect = true"
+										title="neo govor">
+										+
+									</button>
+									<button
+										class="float-right tiny edit"
+										x-show="adding_lect"
+										title="jame"
+										@click="adding_lect = false">
+										/
+									</button>
+								</div>
+							</label>
+						</div>
+						<label>
+							<div>Kakufal</div>
+							<div>
+								<input
+									type="text"
+									x-model="new_word_form_text" />
+							</div>
+						</label>
+					</div>
+					<div style="margin-top: var(--space-sm)">
+						<button
+							class="edit"
+							@click="new_lemma_form_open = false">
+							/
+						</button>
+						<button
+							type="button"
+							@click="post_lemma(new_lect_name?new_lect_name:selected_lect, new_word_form_text)
+								.then(()=>{
+									new_lemma_form_open = false; 
+								})">
+							Popoczta
+						</button>
+					</div>
+				</div>
+			</div>
 		</div>
 	</body>
 </html>
diff --git a/apps/ktb-static/styles.css b/apps/ktb-static/styles.css
index 22a9122..7338029 100644
--- a/apps/ktb-static/styles.css
+++ b/apps/ktb-static/styles.css
@@ -102,6 +102,49 @@ tfoot {
   margin:  var(--space-xs);
 }
 
+.relative {
+  position: relative;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.sticky {
+  position: sticky;
+  top: 0;
+}
+
+.top {
+  z-index: 1;
+}
+
+.modal {
+  z-index: 2;
+  position: absolute;
+  background-color: #000000aa;
+  height: 100%;
+  width: 100%;
+}
+
+.modal .card {
+  max-width: 480px;
+  margin: auto;
+  
+  margin-top: 4rem;
+}
+
+.top-bar {
+  padding: var(--space-sm);
+  border: 1px solid var(--color-text-secondary);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-card-bg);
+}
+
 button.tiny {
   min-width: 2em;
   max-width: 2em;
@@ -111,8 +154,10 @@ button.tiny {
 }
 
 button:disabled{
-  background-color: #555;
+  background-color: #aaa;
   color: #fff;
+  border-color: #999;
+  cursor: not-allowed;
 }
 
 .flex-row {
@@ -130,7 +175,7 @@ button:disabled{
 }
 
 .edit:hover {
-  background-color: #bb0;
+  background-color: rgb(187, 159, 0);
 }
 
 .delete {
@@ -262,10 +307,15 @@ button:disabled{
 }
 
 /* Search Bar */
+
+.search-bar {
+  margin: var(--space-sm);
+}
+
 .search-bar input {
   display: inline-block;
-  width: 80%;
-  padding: var(--space-sm) var(--space-md);
+  width: 16rem;
+  padding: var(--space-xs) var(--space-md);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   font-size: 1rem;
diff --git a/apps/vdb-backend/src/index.ts b/apps/vdb-backend/src/index.ts
index 485cbfd..dbb0a8c 100644
--- a/apps/vdb-backend/src/index.ts
+++ b/apps/vdb-backend/src/index.ts
@@ -27,18 +27,14 @@ function initExpress() {
 	const app = express();
 	const PORT = 1225;
 
-	const lect_repository = appDataSource.getRepository(Lect);
-	const word_form_repository = appDataSource.getRepository(WordForm);
-	const lemma_repository = appDataSource.getRepository(Lemma);
-
 	app.use(cors(), express.json());
 
 	app.get("/sample", (_req, res) => {
 		res.status(200).send(SAMPLE);
 	});
 
-	app.get("/search", async (req, res) => {
-		const search_term = req.query.search_term?.toString();
+	app.get("/search", async (_req, res) => {
+		const search_term = _req.query.search_term?.toString();
 
 		let word_forms: WordForm[];
 		let lemmas: Lemma[];
@@ -64,8 +60,8 @@ function initExpress() {
 		res.status(200).send({ terms: lemmas.length, results: lemmas });
 	});
 
-	app.get("/lect", async (req, res) => {
-		const name = req.query.name?.toString();
+	app.get("/lect", async (_req, res) => {
+		const name = _req.query.name?.toString();
 
 		if (!name) {
 			return void res.sendStatus(400);
@@ -79,8 +75,8 @@ function initExpress() {
 		res.status(200).send({ lect });
 	});
 
-	app.post("/lect", (req, res) => {
-		const lect_name = req.query.lect_name?.toString();
+	app.post("/lect", (_req, res) => {
+		const lect_name = _req.query.lect_name?.toString();
 
 		if (!lect_name) {
 			return void res.sendStatus(400);
@@ -120,7 +116,74 @@ function initExpress() {
 		res.status(200).send({ lemma_detail });
 	});
 
-	/* Definitions */
+	app.post("/lemma", async (_req, res) => {
+		const lect_name = _req.body.lect_name ?? null;
+		const word_form_text = _req.body.word_form_text?.toString();
+
+		if(!word_form_text || /^\s*$/.test(word_form_text) || !lect_name){
+			console.error(`Error: ${JSON.stringify(_req.body)}`);
+			return void res.status(400).send();
+		}
+
+		let word_form = new WordForm();
+		let lemma = new Lemma();
+
+		let lect;
+		try{
+			lect = await Lect.findOne({where:{name:lect_name}});
+		} catch {
+			console.info(`Lect ${lect_name} not found.`);
+		}
+
+		if(!lect) {
+			lect = new Lect();
+			lect.name = lect_name;
+			await lect
+				.save()
+				.then((l)=>{console.info(`Created lect: ${JSON.stringify(l)}`)});
+		}
+
+		
+		lemma.lemma_name = word_form_text;
+
+		word_form.word_form = word_form_text;
+		word_form.lemma = lemma;
+		word_form.lect = lect;
+
+		lemma.word_forms = [word_form];
+
+		Lemma.save(lemma);
+		
+		let lemma_detail = await Lemma.findOne({
+			where: {
+				lemma_name: word_form.lemma.lemma_name
+			},
+			relations: {
+				word_forms: {
+					lect: true
+				},
+				examples: true,
+				definitions: true,
+				media: true,
+				parts_of_speech: true
+			}
+		});
+
+		res.status(200).send({lemma_detail});
+	});
+
+	app.get("/definition/:definition_id", async (_req, res) =>{
+		const definition_id:number = parseInt(_req.params.definition_id); 
+
+		if(!definition_id){
+			console.error(`Error: Could not find word form ${JSON.stringify({definition_id})}`);
+			return void res.status(400).send();
+		}
+
+		let definition = await Definition.findOne({where:{definition_id}}).then();
+
+		res.status(200).send({definition});
+	});
 
 	app.put("/definition", async (_req, res) => {
 		const definition_text = _req.body.definition_text?.toString();
@@ -171,7 +234,7 @@ function initExpress() {
 		const definition_id:number = parseInt(_req.params.definition_id); 
 
 		if(!definition_id){
-			console.error(`Error: Could not find word form ${JSON.stringify({definition_id:definition_id})}`);
+			console.error(`Error: Could not find word form ${JSON.stringify({definition_id})}`);
 			return void res.status(400).send();
 		}
 
@@ -182,6 +245,19 @@ function initExpress() {
 
 	/* examples */
 
+	app.get("/example/:example_id", async (_req, res) =>{
+		const example_id:number = parseInt(_req.params.example_id); 
+
+		if(!example_id){
+			console.error(`Error: Could not find word form ${JSON.stringify({example_id})}`);
+			return void res.status(400).send();
+		}
+
+		let example = await Example.findOne({where:{example_id}}).then();
+
+		res.status(200).send({definition: example});
+	});
+
 	app.put("/example", async (_req, res) => {
 		const example_text = _req.body.example_text?.toString();
 		const example_id = _req.body.example_id ?? null;