diff --git a/src/components/pages/EventDetail.js b/src/components/pages/EventDetail.js
index c99a482ed7837fdf877f8a6d416dbade391d7fcc..b6b7c666a384d151af8f0dfc8599bd9a4fe4256c 100644
--- a/src/components/pages/EventDetail.js
+++ b/src/components/pages/EventDetail.js
@@ -75,17 +75,19 @@ class EventDetail extends Component {
     return notes.map((note) => {
       if (!note.profile) {
         return (
-          <Comment key={Math.random()}>
-            <Comment.Content>
-              <Comment.Author>{note.created_by_name}</Comment.Author>
-              <Comment.Metadata>
-                {moment(note.created_at).format('LL')}
-              </Comment.Metadata>
-              <Comment.Text>
-                {note.note}
-              </Comment.Text>
-            </Comment.Content>
-          </Comment>);
+          <Segment>
+            <Comment key={Math.random()}>
+              <Comment.Content>
+                <Comment.Author>{note.created_by_name}</Comment.Author>
+                <Comment.Metadata>
+                  {moment(note.created_at).format('LL')}
+                </Comment.Metadata>
+                <Comment.Text>
+                  {note.note}
+                </Comment.Text>
+              </Comment.Content>
+            </Comment>
+          </Segment>);
       }
       return '';
     });
diff --git a/src/components/pages/LeaderBoard.js b/src/components/pages/LeaderBoard.js
new file mode 100644
index 0000000000000000000000000000000000000000..18fef5ca2a5c20d4620ceee21857148b44364e37
--- /dev/null
+++ b/src/components/pages/LeaderBoard.js
@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+import { Container, Table, Icon } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import { getTrainees } from '../../actions/statistics';
+
+class LeaderBoard extends Component {
+  UNSAFE_componentWillMount() {
+    this.props.getTrainees();
+  }
+
+  // Every event rendered
+  renderTraineeBits() {
+    return this.props.trainees.sort( (a,b) => {
+      return (Number(b.homework_bits) + b.events_visited)
+        - (Number(a.homework_bits) + a.events_visited)
+    }).map((trainee) => { 
+      return (
+        <Table.Row>
+          <Table.Cell textAlign='center'>
+            {trainee.full_name}
+          </Table.Cell>
+          <Table.Cell textAlign='center'>
+            {trainee.events_visited}
+          </Table.Cell>
+          <Table.Cell textAlign='center'>
+            {Number(trainee.homework_bits)}
+          </Table.Cell>
+          <Table.Cell textAlign='center'>
+            {Number(trainee.homework_bits) + trainee.events_visited}
+          </Table.Cell>
+        </Table.Row>
+      )
+    })
+  }
+
+  render() {
+    return (
+      <Container textAlign='center' style={{overflowX: 'scroll'}}>
+        <Table color='blue' unstackable celled selectable compact>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell textAlign='center'>
+                Képződők
+              </Table.HeaderCell>
+              <Table.HeaderCell textAlign='center'>
+                JelenlĂŠt
+              </Table.HeaderCell>
+              <Table.HeaderCell textAlign='center'>
+                Bitek
+              </Table.HeaderCell>
+              <Table.HeaderCell textAlign='center'>
+                Szumma
+              </Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+
+            {this.props.trainees ? 
+              this.renderTraineeBits() 
+            : 
+              'Nincsenek képződők'
+            }
+          </Table.Body>
+        </Table>
+      </Container>
+    );
+  }
+}
+
+const mapStateToProps = ({ trainees: { trainees }, user }) => ({ trainees, user });
+
+export default connect(mapStateToProps, { getTrainees })(LeaderBoard);
diff --git a/src/components/pages/Trainees.js b/src/components/pages/Presence.js
similarity index 97%
rename from src/components/pages/Trainees.js
rename to src/components/pages/Presence.js
index b5084583d7060e817a72450bcd06ad5490a88edd..224cc5f74e1903988526dcebf77ab5d46fdaf458 100644
--- a/src/components/pages/Trainees.js
+++ b/src/components/pages/Presence.js
@@ -3,7 +3,7 @@ import { Container, Table, Icon } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import { getTrainees, getStaffEvents } from '../../actions/statistics';
 
-class Trainees extends Component {
+class Presence extends Component {
   UNSAFE_componentWillMount() {
     this.props.getTrainees();
     this.props.getStaffEvents();
@@ -79,4 +79,4 @@ class Trainees extends Component {
 
 const mapStateToProps = ({ trainees: { trainees }, events: { events }, user }) => ({ trainees, events, user });
 
-export default connect(mapStateToProps, { getTrainees, getStaffEvents })(Trainees);
+export default connect(mapStateToProps, { getTrainees, getStaffEvents })(Presence);
diff --git a/src/components/pages/Statistics.js b/src/components/pages/Statistics.js
index 8e59dc55fa15592892f7272962f361ccd6ae5347..89ec14807e2d9870b65e5b0872f7a3ecec4888f4 100644
--- a/src/components/pages/Statistics.js
+++ b/src/components/pages/Statistics.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import { Container, Menu } from 'semantic-ui-react';
 import Events from './Events'
-import Trainees from './Trainees'
+import Presence from './Presence'
+import LeaderBoard from './LeaderBoard'
 
 export default class Statistics extends Component {
   state = { activeItem: 'events' }
@@ -28,15 +29,23 @@ export default class Statistics extends Component {
               Alkalmak
             </Menu.Item>
             <Menu.Item
-              name='trainees'
-              active={activeItem === 'trainees'}
+              name='presence'
+              active={activeItem === 'presence'}
               onClick={this.handleItemClick}
             >
-              Képződők
+              JelenlĂŠt
+            </Menu.Item>
+            <Menu.Item
+              name='leaderboard'
+              active={activeItem === 'leaderboard'}
+              onClick={this.handleItemClick}
+            >
+              Ranglista
             </Menu.Item>
           </Menu>
           { activeItem === 'events' ? <Events /> : '' }
-          { activeItem === 'trainees' ? <Trainees /> : '' }
+          { activeItem === 'presence' ? <Presence /> : '' }
+          { activeItem === 'leaderboard' ? <LeaderBoard /> : '' }
         </Container>
       </div>
     );