diff --git a/client/src/Components/Search/Tabs/Future.js b/client/src/Components/Search/Tabs/Future.js
index 1cedbe9af..2a46f4995 100644
--- a/client/src/Components/Search/Tabs/Future.js
+++ b/client/src/Components/Search/Tabs/Future.js
@@ -4,19 +4,31 @@ import { Typography } from '@material-ui/core'
 import { withStyles } from '@material-ui/core/styles'
 import styles from '../styles'
 
+import Event from '../Event'
+
 class Future extends React.Component {
   render () {
     const classes = this.props.classes
+    const { FutureEvents } = this.props
+
+    const futureEvents = FutureEvents.map((event, index) => {
+      return (
+        <Event key={index} event={event} />
+      )
+    })
     return (
-      <Typography
-        className={classes.title}
-        variant='display1'
-        align='center'
-        color='textPrimary'
-        gutterBottom
-      >
-        Future competitions
-      </Typography>
+      <React.Fragment>
+        <Typography
+          className={classes.title}
+          variant='h4'
+          align='center'
+          color='textPrimary'
+          gutterBottom
+        >
+        Future events
+        </Typography>
+        {futureEvents}
+      </React.Fragment>
     )
   }
 }
diff --git a/client/src/Components/Search/Tabs/History.js b/client/src/Components/Search/Tabs/History.js
index b457947fb..0db046e5c 100644
--- a/client/src/Components/Search/Tabs/History.js
+++ b/client/src/Components/Search/Tabs/History.js
@@ -10,12 +10,12 @@ class History extends React.Component {
     return (
       <Typography
         className={classes.title}
-        variant='display1'
+        variant='h4'
         align='center'
         color='textPrimary'
         gutterBottom
       >
-        Your old competitions (maybe here, maybe not, who knows)
+        Your old events (maybe here, maybe not, who knows)
       </Typography>
     )
   }
diff --git a/client/src/Components/Search/Tabs/Incoming.js b/client/src/Components/Search/Tabs/Incoming.js
index fa3dfc3b7..3956aa6d7 100644
--- a/client/src/Components/Search/Tabs/Incoming.js
+++ b/client/src/Components/Search/Tabs/Incoming.js
@@ -4,19 +4,51 @@ import { Typography } from '@material-ui/core'
 import { withStyles } from '@material-ui/core/styles'
 import styles from '../styles'
 
+import Event from '../Event'
+
 class Incoming extends React.Component {
   render () {
     const classes = this.props.classes
+    const { IncomingEvents, OngoingEvents } = this.props
+
+    const incomingEvents = IncomingEvents.map((event, index) => {
+      return (
+        <Event key={index} event={event} />
+      )
+    })
+    const ongoingEvents = OngoingEvents.map((event, index) => {
+      return (
+        <Event key={index} event={event} />
+      )
+    })
     return (
-      <Typography
-        className={classes.title}
-        variant='display1'
-        align='center'
-        color='textPrimary'
-        gutterBottom
-      >
-        Ongoing and incoming competitions
-      </Typography>
+      <React.Fragment>
+        <Typography
+          className={classes.title}
+          variant='h4'
+          align='center'
+          color='textPrimary'
+          gutterBottom
+        >
+          Ongoing and incoming competitions
+        </Typography>
+        <Typography
+          variant='h5'
+          color='textPrimary'
+          gutterBottom
+        >
+          Ongoing events:
+        </Typography>
+        {ongoingEvents}
+        <Typography
+          variant='h5'
+          color='textPrimary'
+          gutterBottom
+        >
+          Incoming events:
+        </Typography>
+        {incomingEvents}
+      </React.Fragment>
     )
   }
 }
diff --git a/client/src/Components/Search/Tabs/Past.js b/client/src/Components/Search/Tabs/Past.js
index 4c953f7cb..60a6bc5aa 100644
--- a/client/src/Components/Search/Tabs/Past.js
+++ b/client/src/Components/Search/Tabs/Past.js
@@ -4,19 +4,31 @@ import { Typography } from '@material-ui/core'
 import { withStyles } from '@material-ui/core/styles'
 import styles from '../styles'
 
+import Event from '../Event'
+
 class Past extends React.Component {
   render () {
     const classes = this.props.classes
+    const { PastEvents } = this.props
+
+    const pastEvents = PastEvents.map((event, index) => {
+      return (
+        <Event key={index} event={event} />
+      )
+    })
     return (
-      <Typography
-        className={classes.title}
-        variant='display1'
-        align='center'
-        color='textPrimary'
-        gutterBottom
-      >
-        This will come later
-      </Typography>
+      <React.Fragment>
+        <Typography
+          className={classes.title}
+          variant='display1'
+          align='center'
+          color='textPrimary'
+          gutterBottom
+        >
+          A list of passed events
+        </Typography>
+        {pastEvents}
+      </React.Fragment>
     )
   }
 }
diff --git a/client/src/Components/Search/index.js b/client/src/Components/Search/index.js
index 26c090760..e432c8a8c 100644
--- a/client/src/Components/Search/index.js
+++ b/client/src/Components/Search/index.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import { Query } from 'react-apollo'
+import { DateTime } from 'luxon'
 
 import {
   Typography,
@@ -24,7 +25,6 @@ import {
   Incoming,
   Past
 } from './Tabs'
-import Event from './Event'
 
 function TabContainer (props) {
   return (
@@ -56,11 +56,14 @@ class Search extends React.Component {
         {({ loading, error, data }) => {
           if (loading) return 'Loading...'
           if (error) return `Error! ${error.message}`
-          const list = data.hosts_Events.map((event, index) => {
-            return (
-              <Event key={index} event={event} />
-            )
-          })
+          const now = ~~(DateTime.local().valueOf() / 1000)
+          const inTwoWeeks = ~~(DateTime.local().plus({ weeks: 2 }).valueOf() / 1000)
+
+          const IncomingEvents = data.hosts_Events.filter(event => event.startDatetime > now && event.startDatetime < inTwoWeeks)
+          const OngoingEvents = data.hosts_Events.filter(event => event.finishDatetime > now && event.startDatetime < now)
+          const FutureEvents = data.hosts_Events.filter(event => event.startDatetime > now)
+          const PastEvents = data.hosts_Events.filter(event => event.finishDatetime < now)
+
           return (
             <React.Fragment>
               <div className={classes.root}>
@@ -95,12 +98,11 @@ class Search extends React.Component {
                     />
                   </Tabs>
                 </AppBar>
-                {value === 0 && <TabContainer><Incoming /></TabContainer>}
-                {value === 1 && <TabContainer><Future /></TabContainer>}
+                {value === 0 && <TabContainer><Incoming IncomingEvents={IncomingEvents} OngoingEvents={OngoingEvents} /></TabContainer>}
+                {value === 1 && <TabContainer><Future FutureEvents={FutureEvents} /></TabContainer>}
                 {value === 2 && <TabContainer><History /></TabContainer>}
-                {value === 3 && <TabContainer><Past /></TabContainer>}
+                {value === 3 && <TabContainer><Past PastEvents={PastEvents} /></TabContainer>}
               </div>
-              { list }
             </React.Fragment>
           )
         }}