diff --git a/static/app.js b/static/app.js
index 27e3197..c500ecb 100644
--- a/static/app.js
+++ b/static/app.js
@@ -1,27 +1,37 @@
+const LOOSE_MESSAGE = "im sorry, but you lost"
+const WIN_MESSAGE = "congrats, you win"
 
 async function calcChanche() {
     const name = document.getElementById("name").value
     const chance = document.getElementById("Chance").value
     const mult = document.getElementById("Multiplicator").value
-    const url = "/random?chance="+chance+"&multiplicator="+mult+"&name="+name;
+    const url = "/random?chance=" + chance + "&multiplicator=" + mult + "&name=" + name;
     try {
-      const response = await fetch(url);  
-      const content = await response.text()
 
-      document.getElementById("won").innerText=content
-      getWinners()
+        const response = await fetch(url);
+        const content = await response.text()
+        console.log(content);
+
+        if (content == "true") {
+            document.getElementById("won").innerText = WIN_MESSAGE
+        }
+        else {
+            document.getElementById("won").innerText = LOOSE_MESSAGE
+        }
+
+        getWinners()
     } catch (error) {
-      console.error(error.message);
+        console.error(error.message);
     }
 }
 async function getWinners() {
     const url = "/winners"
     try {
-      const response = await fetch(url);  
-      const content = await response.text()
+        const response = await fetch(url);
+        const content = await response.text()
 
-      document.getElementById("winners").innerText=content
+        document.getElementById("winners").innerText = content
     } catch (error) {
-      console.error(error.message);
+        console.error(error.message);
     }
 }
\ No newline at end of file
diff --git a/static/index.html b/static/index.html
index 9b9e167..45a192d 100644
--- a/static/index.html
+++ b/static/index.html
@@ -6,29 +6,12 @@
     <script type = "text/javascript" src="app.js"></script>
 
 </head>
-<style>
-    body {
-        background-color: rgba(131, 143, 197, 0.986);
-    }
-    .labelcontainer {
-        display: flex;
-    }
-    label {
-        display: block;
-        color: rgb(28, 17, 85);
-        min-width: 20rem;
-        font-size: 1.5rem;
-    }
-    input {
-        width: 10rem;
-        }
-    
-</style>
+<link rel="stylesheet" href="style.css">
 <body>
-    <h1>Das ist die webseite von Gian</h1>
-    <p>This is a paragraph.</p>
+    <h1>Pokemon catcher</h1>
+    
 
-    <p id="won"></p>
+    
     <div class="labelcontainer">
         <label>Chance</label>
         <input type="number" id="Chance" name="Chance" min="10">
@@ -46,7 +29,9 @@
     <div>
         <input type="button" onclick="calcChanche()" value="Generate">
     </div>
+    <p id="won"></p>
     <div>
+        <label>winners</label>
         <p id="winners"></p>
     </div>
     
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..aa62587
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,19 @@
+body {
+    background-color: rgba(131, 143, 197, 0.986);
+}
+.labelcontainer {
+    display: flex;
+}
+label {
+    display: block;
+    color: rgb(28, 17, 85);
+    min-width: 20rem;
+    font-size: 1.5rem;
+}
+input {
+    width: 10rem;
+    }
+p {
+    color: rgb(28, 17, 85);
+    font-size: 1.5rem;
+}
\ No newline at end of file
