diff --git a/src/App.tsx b/src/App.tsx
index be918b2..8129ddd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,12 +2,41 @@ import React from 'react';
 import './App.scss';
 import Mock from "./mock/Mock";
 import TableEntry from "./models/TableEntry";
+import {SinusBot} from "@support-pp/sinusbot-ts";
+import SinusBotService from "./services/SinusBotService";
 
 export default class App extends React.Component {
 
-  private tableContent: TableEntry[] = Mock.tableContent;
+  //private tableContent: TableEntry[] = Mock.tableContent;
+
+  state = {
+    error: null,
+    isLoaded: false,
+    users: [],
+  }
+
+  componentDidMount() {
+    fetch('https://sinusbot.humenius.me/api/v1/bot/i/51314e26-13a1-4779-b2ac-e36d493687d4/event/tunakill_rank_all_user')
+      .then(res => res.json())
+      .then((data) => SinusBotService.consumeTunakillResponse(data))
+      .then(
+        (result) => {
+          this.setState({
+            isLoaded: true,
+            users: result
+          });
+        },
+        (error) => {
+          this.setState({
+            isLoaded: true,
+            error: error
+          });
+        }
+      );
+  }
 
   render() {
+    const { error, isLoaded, users } = this.state;
     return (
       <div className="App">
         <p className="title">Humenius' TeamSpeak 3-Ranking</p>
@@ -21,8 +50,8 @@ export default class App extends React.Component {
           </thead>
           <tbody>
             {
-              this.tableContent.map((tableEntry, i) => {
-                let className = "";
+              users.map((tableEntry: TableEntry, i) => {
+                let className;
                 switch (i+1) {
                   case 1: className = "first-place"; break;
                   case 2: className = "second-place"; break;
@@ -32,7 +61,7 @@ export default class App extends React.Component {
 
                 return (
                   <tr key={i} className={className}>
-                    <td>{tableEntry.placement}</td>
+                    <td>{i+1}</td>
                     <td>{tableEntry.name}</td>
                     <td>{tableEntry.onlineTime}</td>
                   </tr>
diff --git a/src/models/TableEntry.ts b/src/models/TableEntry.ts
index 8d09e3c..ab5ca1d 100644
--- a/src/models/TableEntry.ts
+++ b/src/models/TableEntry.ts
@@ -1,5 +1,4 @@
 interface TableEntry {
-    placement: number;
     name: string;
     onlineTime: string;
 }
diff --git a/src/models/TunaKillUser.ts b/src/models/TunaKillUser.ts
new file mode 100644
index 0000000..d416293
--- /dev/null
+++ b/src/models/TunaKillUser.ts
@@ -0,0 +1,7 @@
+interface TunaKillUser {
+  name: string;
+  time: number;
+  uid: string;
+}
+
+export default TunaKillUser;
diff --git a/src/services/SinusBotService.ts b/src/services/SinusBotService.ts
new file mode 100644
index 0000000..ffb5266
--- /dev/null
+++ b/src/services/SinusBotService.ts
@@ -0,0 +1,40 @@
+import TableEntry from "../models/TableEntry";
+import TunaKillUser from "../models/TunaKillUser";
+
+class SinusBotService {
+  public static consumeTunakillResponse(data: any): TableEntry[] | undefined {
+    if (!(data !== null || data[0] !== null || data[0].data !== null)) {
+      return undefined;
+    }
+
+    const response = data[0].data;
+    if (!(response.length > 0)) {
+      return undefined;
+    }
+
+    return response
+      .map((user: TunaKillUser) => {
+        if (user.name === "Server Query Admin") { return null; }
+        return {
+          name: user.name,
+          rawTime: user.time,
+          onlineTime: new Date(user.time * 1000)
+                      .toISOString()
+                      .substr(11, 8)
+        };
+      })
+      .sort((a: any, b: any) => {
+        if (a.rawTime < b.rawTime) {
+          return -1;
+        }
+
+        if (a.rawTime > b.rawTime) {
+          return 1;
+        }
+
+        return 0;
+      });
+  }
+}
+
+export default SinusBotService;