diff --git a/.idea/dataSources.xml b/.idea/dataSources.xml
new file mode 100644
index 0000000000000000000000000000000000000000..ca4676a83301640c4ca9675db3ab7ba3734483b2
--- /dev/null
+++ b/.idea/dataSources.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DataSourceManagerImpl" format="xml" multifile-model="true">
+    <data-source source="LOCAL" name="dev" uuid="dd5ce02c-a064-4b65-9135-1124ad6950da">
+      <driver-ref>sqlite.xerial</driver-ref>
+      <synchronize>true</synchronize>
+      <jdbc-driver>org.sqlite.JDBC</jdbc-driver>
+      <jdbc-url>jdbc:sqlite:C:\Users\Robin\Desktop\Lexicon\tierlexikon-api-main\prisma\dev.db</jdbc-url>
+      <working-dir>$ProjectFileDir$</working-dir>
+    </data-source>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000000000000000000000000000000000000..35eb1ddfbbc029bcab630581847471d7f238ec53
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
index 9533a9e612780bcbef472b5cedce937df7dbea02..d4362a7d8d39c2071796f30b6ca5d7950c46e7ea 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -11,6 +11,6 @@ COPY . .
 
 RUN npx prisma generate
 
-CMD node index.js
+CMD node index_front.js
 
 EXPOSE 28785
diff --git a/index.html b/index.html
index 6a0d57a83fb45a419a84e3e9a3dc4a03355f4ecd..7137abdae138eba6f4ca591d633785a90f95031b 100644
--- a/index.html
+++ b/index.html
@@ -10,9 +10,8 @@
 <body style="background-color: #0a2d0f">
     <div class="headline">
     <h1>Das grosse Tierlexikon</h1>
-        <p>Semsterprojekt VS 2022</p>
+        <p>Semesterprojekt VS 2022</p>
     </div>
-    <form id="create" class="create">
         <div class="createleft">
             <div class="name">NAME</div>
             <div class="id">
@@ -25,6 +24,10 @@
                 <div class="size">
                     <textarea required type="text" rows="1" cols="50" id="size" input="text"></textarea>
                 </div>
+            <div class="feed">FUTTER</div>
+            <div class="weight">
+                <textarea required type="text" rows="1" cols="50" id="feed" input="text"></textarea>
+            </div>
             <div class="weight_min">GEWICHT MIN</div>
                 <div class="weight">
                     <textarea required type="text" rows="1" cols="50" id="weight_min" input="text"></textarea>
@@ -37,75 +40,23 @@
                 <div class="class">
                     <textarea required type="text" rows="1" cols="50" id="class" input="text"></textarea>
                 </div>
-            <div class="age">ALTER</div>
-                <div class="age">
-                    <textarea required type="text" rows="1" cols="50" id="age" input="text"></textarea>
-                </div>
             <div class="origin">HERKUNFT</div>
                 <div class="origin">
                     <textarea required type="text" rows="1" cols="50" id="origin" input="text"></textarea>
                 </div>
-
-
-        </div>
-
-        <div class="createright">
-            <div class="description">BESCHREIBUNG</div>
-            <div class="description">
-                <textarea required type="text" rows="10" cols="50" id="desc2" input="text"></textarea>
-            </div>
             <div class="erstellenknopf">
-                <button value="create" type="submit" id="erstellen">Tier Hinzufügen</button>
-            </div>
-            <div class="editknopf">
-                <button value="edit" type="submit" id="edit">Tier Editieren</button>
+                <button value="create" id="erstellen">Tier Hinzufügen</button>
             </div>
-        </div>
 
-    </form>
+        </div>
 
 
 
     <div class="read">
-        <div class="products">Lexikon Einträge</div>
+
         <div id="container"> <table id="table">
-            <caption>Tierarten</caption>
-            <tr>
-                <th scope="col">Tiere</th>
-                <th scope="col">Name</th>
-                <th scope="col">Größe</th>
-                <th scope="col">Gewicht</th>
-                <th scope="col">Klasse</th>
-                <th scope="col">Alter</th>
-                <th scope="col">Herkunft</th>
-            </tr>
-            <tr>
-                <th scope="row">Pinguin</th>
-                <td>Adéliepinguin</td>
-                <td>70 cm</td>
-                <td>4-5 kg</td>
-                <td>Vögel</td>
-                <td>5 Jahre</td>
-                <td>Antarktis</td>
-            </tr>
-            <tr>
-                <th scope="row">Wal</th>
-                <td>Belugawal</td>
-                <td>3-6 m</td>
-                <td>1500 kg</td>
-                <td>Säugetiere</td>
-                <td>50 Jahre</td>
-                <td>Alaska, Kanada</td>
-            </tr>
-            <tr>
-                <th scope="row">Hund</th>
-                <td>Dalmatiner</td>
-                <td>60 cm</td>
-                <td>30 kg</td>
-                <td>Säugetiere</td>
-                <td>10-13 Jahre</td>
-                <td>Kroatien</td>
-            </tr>
+
+
         </table>
          </div>
 
@@ -118,6 +69,6 @@
 
 
 
-    <script src="src/index.js"></script>
+    <script src="src/index_front.js"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
index e39f0504d96b529d3110aa76efc2dffc0e888a37..bb0d6b669e5a8b9c58f918d1118ea6527a8559d8 100644
--- a/index.js
+++ b/index.js
@@ -27,6 +27,7 @@ app.post('/api/v1/animals', async (req, res) => {
             weight_max: data.weight_max,
             feed: data.feed,
             size: data.size
+
         }
     });
 
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 9c2fc202ab7272793435ca092798018a8f6a0c6d..0000000000000000000000000000000000000000
--- a/src/index.js
+++ /dev/null
@@ -1,51 +0,0 @@
-const API_BASE = 'http://localhost:28785/api/v1/animals';
-
-function fill(animals){
-    document.getElementById("ID").value=element.name;
-    document.getElementById("name").value=element.class;
-    document.getElementById("origin").value=element.origin;
-    document.getElementById("weight_min").value=element.weight_min;
-    document.getElementById("weight_max").value=element.weight_max;
-    document.getElementById("feed").value=element.feed;
-    document.getElementById("size").value=element.size;
-
-}
-
-function getID(){
-    return  document.getElementById("id").value;
-}
-
-function getData(){
-    let data = JSON.stringify({
-        name: document.getElementById("name").value,
-        origin: document.getElementById("origin").value,
-        weight_min: document.getElementById("weight_min").value,
-        weight_max: document.getElementById("weight_max").value,
-        feed: document.getElementById("feed").value,
-        size: document.getElementById("size").value
-    })
-
-    return data;
-}
-
-async function getAllItems() {
-    fetch(API_BASE)
-        .then((response) => {
-            return response.json();
-        })
-        .then((text) => {
-            console.log(text);
-        })
-
-
-
-
-
-
-window.onload = () => {
-        getAllItems();
-}}
-
-
-
-
diff --git a/src/index_front.js b/src/index_front.js
new file mode 100644
index 0000000000000000000000000000000000000000..c2d323a55eb60e9fc161781283764f05b2178f8e
--- /dev/null
+++ b/src/index_front.js
@@ -0,0 +1,116 @@
+const API_BASE = 'http://localhost:28785/api/v1/animals';
+
+function fill(element){
+    document.getElementById("ID").value=element.name;
+    document.getElementById("name").value=element.class;
+    document.getElementById("origin").value=element.origin;
+    document.getElementById("weight_min").value=element.weight_min;
+    document.getElementById("weight_max").value=element.weight_max;
+    document.getElementById("feed").value=element.feed;
+    document.getElementById("size").value=element.size;
+
+}
+
+function getID(){
+    return  document.getElementById("id").value;
+}
+
+function  getData(){
+    let data = JSON.stringify({
+        name: document.getElementById("name").value,
+        class: document.getElementById("class").value,
+        origin: document.getElementById("origin").value,
+        weight_min: parseInt(document.getElementById("weight_min").value),
+        weight_max: parseInt(document.getElementById("weight_max").value),
+        feed: document.getElementById("feed").value,
+        size: parseFloat(document.getElementById("size").value)
+
+    })
+
+    return data;
+}
+
+
+async function addItem(item) {
+    const headers = new Headers();
+    headers.append("Content-Type", "application/json");
+    const body = item;
+    const init = {
+        method: "put",
+        headers,
+        body,
+    };
+    console.log(body);
+    fetch(API_BASE, init)
+        .then(function (response){
+            console.log(response)
+            getAllItems();
+            return response.json();
+
+            //return Promise.reject(response);
+        }).then(() =>{
+        }
+    ).catch((e) => {
+        console.warn("Something went wrong", e);
+    });
+}
+
+
+async function getAllItems() {
+    fetch(API_BASE)
+        .then((response) => {
+            return response.json();
+        })
+        .then((text) => {
+            console.log(text);
+            text=text.animals
+
+
+            function addHeaders(table, keys) {
+                const row = table.insertRow();
+                for (let i = 0; i < keys.length; i++) {
+                    const cell = row.insertCell();
+                    cell.appendChild(document.createTextNode(keys[i]));
+                }
+            }
+
+            const table = document.createElement("table");
+            for (let i = 0; i < text.length; i++) {
+                const child = text[i];
+                if (i == 0) {
+                    addHeaders(table, Object.keys(child));
+                }
+                const row = table.insertRow();
+                Object.keys(child).forEach(function (k) {
+                    const cell = row.insertCell();
+                    cell.appendChild(document.createTextNode(child[k]));
+
+                })
+            }
+            document.getElementById("container").appendChild(table);
+
+        })
+        .catch((e) => {
+            console.log(e);
+        });
+}
+
+
+
+window.onload = () => {
+    getAllItems();
+}
+
+
+document.getElementById("erstellen").addEventListener("click", async function (e) {
+    const data = getData()
+    await fetch(API_BASE, {
+        headers: {
+            "Accept": "application/json",
+            "Content-Type": "application/json"
+        },
+        method: "POST",
+        body: data
+    });
+
+})
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index 0fc1ecf2975f8adc565a55e9d3d33d8d6cb72806..1488d3f9789291dc77b6fc85ce410f93d69ff9a2 100644
--- a/src/style.css
+++ b/src/style.css
@@ -50,7 +50,22 @@ p{
 .products{
     color:white;
 }
-#table{
+.weight_min {
+    color:white;
+}
+
+.weight_max {
+    color:white;
+}
+.feed {
+    color:white;
+}
+
+.container {
+    color:white;
+}
+
+.table{
     color:white;
 }
 
@@ -140,6 +155,7 @@ button:hover {
     text-align: center;
     margin-top: 1%;
 }
+
 #erstellen {
     width: 200px;
     height: 50px;
@@ -157,14 +173,7 @@ button:hover {
     background: linear-gradient(to top right, #fde374, #fde374);
 
 }
-.editknopf {
-    font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
-    height: max-content;
-    width: 100%;
-    float: left;
-    text-align: center;
-    margin-top: 1%;
-}
+
 #edit {
     width: 200px;
     height: 50px;