diff --git a/src/components/pages/EventDetail.js b/src/components/pages/EventDetail.js
index e0e1b2128b0cf71545e61b744a4b051783f219bf..b4c82dc4bac04b04c1306aefee64452724e1efea 100644
--- a/src/components/pages/EventDetail.js
+++ b/src/components/pages/EventDetail.js
@@ -1,36 +1,103 @@
 import React, { Component } from 'react';
-import { Container } from 'semantic-ui-react';
+import { Container, Item, Dropdown, Button, Label, Comment, Form, Header } from 'semantic-ui-react';
 import { connect } from 'react-redux';
-import { getEventById } from '../../actions/statistics';
+import moment from 'moment';
+import { getEventById, getTrainees, visitorChange, getNotesByEvent, submitVisitors } from '../../actions/statistics';
 
 class EventDetail extends Component {
   componentWillMount() {
     this.props.getEventById(this.props.match.params.id);
+    this.props.getTrainees();
+    this.props.getNotesByEvent(this.props.match.params.id);
   }
 
   renderEvent() {
-    const { name, date } = this.props.selectedEvent;
+    const { id, name, date, visitors } = this.props.selectedEvent;
+    const usernames = this.props.trainees.map((item) => {
+      return ({
+        key: item.id,
+        text: item.full_name,
+        value: item.id,
+      });
+    });
+
     return (
-      <div>
-        <p>Alkalom neve: {name}</p>
-        <p>DĂĄtum: {date}</p>
-      </div>
+      <Item>
+        <Item.Header as='h2'>{name}</Item.Header>
+        <Item.Header as='h3'>DĂĄtum: {moment(date).format('LL')}</Item.Header>
+        <Label>Jelen voltak:</Label>
+        <Dropdown
+          multiple
+          selection
+          placeholder='Újoncok hozzáadása'
+          style={{
+            minWidth: '150px',
+            maxWidth: '200px',
+          }}
+          onChange={(_, v) => this.props.visitorChange(v.value)}
+          defaultValue={visitors}
+          options={usernames}
+        />
+      <Button onCLick={this.props.submitVisitors({id, visitors})}>
+          Megerősítés
+        </Button>
+      </Item>
+      );
+    }
+
+  renderComments() {
+    const notes = this.props.eventNotes;
+    return notes.map(note => (
+      <Comment>
+        <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>
+      )
     );
   }
 
   render() {
     return (
       <Container>
-        {this.props.selectedEvent ?
-          this.renderEvent()
-          :
-          ''
+        <Container textAlign='center'>
+          { this.props.selectedEvent && this.props.trainees ?
+            this.renderEvent()
+            :
+            ''
         }
+        </Container>
+        <Container
+          style={{
+            padding: '80px'
+          }}
+        >
+          <Comment.Group>
+            <Header dividing>
+              MegjegyzĂŠsek
+            </Header>
+            {this.props.eventNotes ?
+              this.renderComments()
+              :
+              ''
+            }
+            <Form reply>
+              <Form.TextArea />
+              <Button content='MegjegyzĂŠs hozzĂĄadĂĄsa' labelPosition='left' icon='edit' primary />
+            </Form>
+          </Comment.Group>
+        </Container>
       </Container>
     );
   }
 }
 
-const mapStateToProps = ({ user, events: { selectedEvent } }) => ({ user, selectedEvent });
+const mapStateToProps = ({ notes: { eventNotes }, events: { selectedEvent }, trainees: { trainees } }) => ({ eventNotes, selectedEvent, trainees });
 
-export default connect(mapStateToProps, { getEventById })(EventDetail);
+export default connect(mapStateToProps, { getEventById, getTrainees, visitorChange, getNotesByEvent, submitVisitors })(EventDetail);
diff --git a/src/components/pages/Events.js b/src/components/pages/Events.js
index 3accb86fa85814121552687fc5c6d2b6c1544837..54c5c726b21b7cbabe3976e96c70ec1be1b3a5fb 100644
--- a/src/components/pages/Events.js
+++ b/src/components/pages/Events.js
@@ -20,7 +20,7 @@ class Events extends Component {
           </Link>
         </Table.Cell>
         <Table.Cell>{moment(event.date).format('LL')}</Table.Cell>
-        <Table.Cell>111</Table.Cell>
+        <Table.Cell>{event.visitor_number}</Table.Cell>
       </Table.Row>
     );
     });