diff --git a/Client/Components/kunde.ts b/Client/Components/kunde.ts
index a193151..4e8c964 100644
--- a/Client/Components/kunde.ts
+++ b/Client/Components/kunde.ts
@@ -1,18 +1,135 @@
 import m from "mithril"
 import {Form, iForm} from "./widgets/form"
 import { Input, iInput} from "./widgets/inputs"
+import {Treenode, iTreenode, Treetable, iTreetable, TopbarButton, iTopbarButton} from "./widgets/Treetable_V2"
 
-export const kunde: m.Component = {
-    view: (vnode) => {
-        return m("div.w3-container.w3-twothird", 
-            m("h1", "Kundenstammblatt"),
-            m(Form, {showButtons: true, onsubmit: (null), oncancel: (null)} as iForm, [
-                m("label", "Kundenname (ganz neu)", m(Input, {name: "kundenname", value: "Musterfirma GmbH", type: "text"} as iInput)),
-                m("label", "Straße", m(Input, {name: "strasse", value: "Musterstraße 1", type: "text"} as iInput))  ,
-                m("label", "PLZ", m(Input, {name: "plz", value: "12345", type: "text"} as iInput)),
-                m("label", "Ort", m(Input, {name: "ort", value: "Musterstadt", type: "text"} as iInput)),
-                m("label", "Land", m(Input, {name: "land", value: "Deutschland", type: "text"} as iInput))
-            ])  
-        )
+export const kunde: m.ClosureComponent = (vnode) => {
+    let currentKunde: iKunde = {
+        id: -1,
+        name: "",
+        strasse: "",
+        plz: "",
+        ort: "",
+        land: ""
+    }
+    
+    return {
+        oninit: (vnode) => {
+            const routeParams = m.route.param()
+            if (routeParams) {
+                currentKunde = {
+                    id: routeParams.id ? parseInt(routeParams.id) : -1,
+                    name: routeParams.name || "",
+                    strasse: routeParams.strasse || "",
+                    plz: routeParams.plz || "",
+                    ort: routeParams.ort || "",
+                    land: routeParams.land || ""
+                }
+            }
+        },
+        view: (vnode) => {
+            return m("div.w3-container.w3-twothird", 
+                m("h1", "Kundenstammblatt"),
+                m(Form, {showButtons: true, onsubmit: (null), oncancel: (null)} as iForm, [
+                    m("label", "Kundenname", m(Input, {name: "kundenname", value: currentKunde.name, type: "text"} as iInput)),
+                    m("label", "Straße", m(Input, {name: "strasse", value: currentKunde.strasse, type: "text"} as iInput)),
+                    m("label", "PLZ", m(Input, {name: "plz", value: currentKunde.plz, type: "text"} as iInput)),
+                    m("label", "Ort", m(Input, {name: "ort", value: currentKunde.ort, type: "text"} as iInput)),
+                    m("label", "Land", m(Input, {name: "land", value: currentKunde.land, type: "text"} as iInput))
+                ])  
+            )
+        }
+    }
+}
+
+interface iKunde {
+    id: number
+    name: string
+    strasse: string
+    plz: string
+    ort: string
+    land: string
+}
+
+const kundenDaten: iKunde[] = [
+    {id: 1, name: "Musterfirma GmbH", strasse: "Musterstraße 1", plz: "12345", ort: "Musterstadt", land: "Deutschland"},
+    {id: 2, name: "Beispiel AG", strasse: "Beispielweg 2", plz: "54321", ort: "Beispielstadt", land: "Deutschland"},
+    {id: 3, name: "Test Unternehmen", strasse: "Testallee 3", plz: "67890", ort: "Testdorf", land: "Österreich"}
+]
+
+function createKundenTreenodes(): iTreenode[] {
+    return kundenDaten.map((kunde: iKunde) => {
+        return new Treenode(kunde, true, [])
+    })
+}
+
+export const kundenliste: m.ClosureComponent = (vnode) => {
+    let treenodes: iTreenode[] = createKundenTreenodes()
+    let selectedNode: iTreenode | null = null
+    
+    const handleRowMarked = (node: iTreenode) => {
+        selectedNode = node
+    }
+    
+    const editKunde = (kunde: iKunde, e: Event) => {
+        e.stopPropagation()
+        m.route.set("/kunde", {id: kunde.id, name: kunde.name, strasse: kunde.strasse, plz: kunde.plz, ort: kunde.ort, land: kunde.land})
+    }
+    
+    const showProjekte = (kunde: iKunde, e: Event) => {
+        e.stopPropagation()
+        m.route.set("/projektliste", {kundenId: kunde.id})
+    }
+    
+    const columnmapper: (node: iTreenode) => any[] = (node: iTreenode) => {
+        let kunde: iKunde = node.nodevalue
+        const isSelected = selectedNode === node
+        const cellStyle = isSelected ? {backgroundColor: 'lightgray'} : {}
+        
+        return [
+            m("div", {style: cellStyle}, m("strong", kunde.name)),
+            m("span", {style: cellStyle}, kunde.strasse),
+            m("span", {style: cellStyle}, kunde.plz),
+            m("span", {style: cellStyle}, kunde.ort),
+            m("span", {style: cellStyle}, kunde.land),
+            m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => editKunde(kunde, e)}, m("i.material-icons", "edit")),
+            m("button.w3-button.w3-small", {style: cellStyle, onclick: (e: Event) => showProjekte(kunde, e)}, m("i.material-icons", "library_books"))
+        ]
+    }
+    
+    const filterFunction = (node: iTreenode, searchvalue: string): boolean => {
+        let kunde: iKunde = node.nodevalue
+        let searchLower = searchvalue.toLowerCase()
+        return kunde.name.toLowerCase().includes(searchLower) ||
+               kunde.strasse.toLowerCase().includes(searchLower) ||
+               kunde.plz.includes(searchLower) ||
+               kunde.ort.toLowerCase().includes(searchLower) ||
+               kunde.land.toLowerCase().includes(searchLower)
+    }
+    
+    return {
+        view: (vnode) => {
+            return m("div.w3-container", {
+                style: {
+                    'max-width': '80%', 
+                    'margin-left': 'auto',
+                    'margin-right': 'auto',
+                    display: 'flex', 
+                    'flex-direction': 'column', 
+                    height: 'inherit', 
+                    'overflow-y': 'inherit'}},
+                m("h1", "Kundenliste"),
+                m("div", {style: {flex: '1', 'overflow-y': 'inherit'}},
+                    m(Treetable, 
+                        {
+                            treenodes: treenodes,
+                            columnmapper: columnmapper,
+                            filter: filterFunction,
+                            onRowMarked: handleRowMarked
+                        } as iTreetable
+                    )
+                )
+            )
+        }
     }
 }
\ No newline at end of file