diff --git a/public/models/Games.js b/public/models/Games.js
new file mode 100644
index 0000000..afbe6a9
--- /dev/null
+++ b/public/models/Games.js
@@ -0,0 +1,60 @@
+let games = {//Games MODEL
+  
+  "winCon":"winCondition",
+  "played":"boolean",
+  "playerA":
+  {
+    "_id":"id",
+    "champ":"champName",
+    "champSkin":"champskin",
+    "rank":"playerRank",
+    "winner":"boolean",
+    "summoners":
+    {
+      "s1":"spellName", 
+      "s2":"spellName"
+    },
+    "runes":{},//Runes
+    "score":"",
+    "creepScore":""
+  },
+  "playerB":
+  {
+      "_id": "id",
+      "champ": "champName",
+      "champSkin": "champskin",
+      "rank": "playerRank",
+      "winner": "boolean",
+      "summoners": 
+      {
+        "s1": "spellName",
+        "s2": "spellName"
+      },
+      "runes": {}, //Runes
+      "score": "",
+      "creepScore":""
+  }
+}
+
+const mongoose = require('mongoose');
+const Schema = mongoose.Schema;
+
+let Game = 
+new Schema(
+    {
+        winCon: {type: String, required: false, max: 100},
+        played: {type:Boolean, required: true,},
+        playerA: {type:Object, required:true},
+        playerA: {type:Object, required:true},
+        playerB: {type:Object, required:true}
+    }
+);
+
+
+
+
+const G= module.exports = mongoose.model('user', Game);
+module.exports.get = (callback, limit)=>
+{
+   G.find(callback).limit(limit); 
+}
\ No newline at end of file
diff --git a/public/models/Leagues.js b/public/models/Leagues.js
new file mode 100644
index 0000000..6548eb7
--- /dev/null
+++ b/public/models/Leagues.js
@@ -0,0 +1,47 @@
+let leaguesModel = {//Leagues[0]
+    "name":"Legendary",
+    "players":
+    [
+      {
+        "name":"String",
+        "points":10,
+        "playedMatches":10
+      },
+      {
+        "name":"String",
+        "points":10,
+        "playedMatches":10
+      }
+    ],
+    "games":
+    [
+      {
+        "_id":"String"
+      },
+      {
+        "_id": "String"
+      }
+    ]
+  }
+  
+  
+  const mongoose = require('mongoose');
+const Schema = mongoose.Schema;
+
+let League = 
+new Schema(
+    {
+        name: {type: String, required: false, max: 100},
+        players: {type:Array, required: true,},
+        games: {type:Array, required:true}
+    }
+);
+
+
+
+
+const L = module.exports = mongoose.model('user', League);
+module.exports.get = (callback, limit)=>
+{
+   L.find(callback).limit(limit); 
+}
\ No newline at end of file
diff --git a/src/Components/Controls.js b/src/Components/Controls.jsx
similarity index 100%
rename from src/Components/Controls.js
rename to src/Components/Controls.jsx
diff --git a/src/Components/LeagueTable.css b/src/Components/LeagueTable.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/Components/LeagueTable.jsx b/src/Components/LeagueTable.jsx
new file mode 100644
index 0000000..9854bbc
--- /dev/null
+++ b/src/Components/LeagueTable.jsx
@@ -0,0 +1,74 @@
+import './LeagueTable.css'
+
+import React from 'react'
+
+
+
+class LeagueTable extends React.Component
+{
+    constructor()
+    {
+        super()
+        // this.league = this.props.league;
+        this.league = {//Leagues[0]
+            "name":"Legendary League",
+            "players":
+            [
+              {
+                "name":"hc12",
+                "points":10,
+                "playedMatches":10
+              },
+              {
+                "name":"DashPT5",
+                "points":10,
+                "playedMatches":10
+              }
+            ],
+            "games":
+            [
+              {
+                "_id":"String"
+              },
+              {
+                "_id": "String"
+              }
+            ]
+          }
+    }
+    tableHeaders()
+    {
+       return(
+        <tr>
+            <th>Player</th>
+            <th>Points</th>
+            <th>Played Matches</th>
+        </tr>
+       )
+    }
+    rows()
+    {
+       return this.league.players.map(({ name, points, playedMatches }) => {
+            return <tr key={name} >
+            <td>{name}</td>
+            <td>{points}</td>
+            <td>{playedMatches}</td>
+          </tr>
+          })
+    }
+    render()
+    {
+        return (
+            <div className='tableContainer' >
+                <h3>{this.league.name}</h3>
+                <table>
+                    {this.tableHeaders()}
+                    <tbody>
+                        {this.rows()}
+                    </tbody>
+                </table>
+            </div>
+        )
+    }
+}
+export default LeagueTable
\ No newline at end of file
diff --git a/src/Components/Login.js b/src/Components/Login.jsx
similarity index 89%
rename from src/Components/Login.js
rename to src/Components/Login.jsx
index 2825cdc..f5e6074 100644
--- a/src/Components/Login.js
+++ b/src/Components/Login.jsx
@@ -1,13 +1,12 @@
 import React from 'react';
 import './Login.css';
-
+//TODO: Show password toggle.
 
 class Login extends React.Component
 {
     constructor()
     {
         super();
-        this.isPWValid = false;
         this.receive();
     }
     validateConstraints(event) 
@@ -43,12 +42,6 @@ class Login extends React.Component
     {
         document.getElementsByClassName('emailInput')[0].setCustomValidity('Email does not match normal parameters.');
     }
-    handleKeyDown(event)
-    {
-        if (event.keyCode === 13 ) {
-            event.preventDefault();
-        }
-    }
     receive()
     {
         window.ipcRender.receive('login', data=>
@@ -64,7 +57,7 @@ class Login extends React.Component
             <div className='container'>
                 <form id='form' className='loginForm'>
                     <label><span>Email</span></label>
-                    <input required className='emailInput'  type="email" placeholder=" " onKeyDown={this.handleKeyDown} onInvalid={this.emailValidity}></input>
+                    <input required className='emailInput'  type="email" placeholder=" " onInvalid={this.emailValidity}></input>
                     <label><span>Password</span></label>
                     <input required className='password' type="password" onKeyDown={this.handleKeyDown} autoComplete="current-password" ></input>
                     <button className='bt Login'  onClick={this.validateConstraints}>Login</button>                      
diff --git a/src/Components/RegisterForm.js b/src/Components/RegisterForm.jsx
similarity index 100%
rename from src/Components/RegisterForm.js
rename to src/Components/RegisterForm.jsx
diff --git a/src/Pages/Games.js b/src/Pages/Games.jsx
similarity index 100%
rename from src/Pages/Games.js
rename to src/Pages/Games.jsx
diff --git a/src/Pages/Home.js b/src/Pages/Home.jsx
similarity index 100%
rename from src/Pages/Home.js
rename to src/Pages/Home.jsx
diff --git a/src/Pages/Leagues.js b/src/Pages/Leagues.jsx
similarity index 51%
rename from src/Pages/Leagues.js
rename to src/Pages/Leagues.jsx
index 679c089..10be61a 100644
--- a/src/Pages/Leagues.js
+++ b/src/Pages/Leagues.jsx
@@ -1,14 +1,18 @@
 
 import React from 'react';
+import Table from '../Components/LeagueTable'
+function getLeague()
+{
 
+}
 function Leagues() {
 return (
-    <div style={{color:'red'}}>
+    <div>
         <br></br>
         <br></br>
         <br></br>
         <br></br>
-        FODA-Se
+        <Table league={getLeague}/>
     </div>
 )
 }
diff --git a/src/Pages/Listener.js b/src/Pages/Listener.jsx
similarity index 100%
rename from src/Pages/Listener.js
rename to src/Pages/Listener.jsx