diff --git a/client/package.json b/client/package.json
index 1e2ca46e7..9c0f49843 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@advancedalgos/events-client",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Advanced Algos Event client-side web app",
   "author": "",
   "license": "",
diff --git a/client/src/Components/BannerTopBar/index.js b/client/src/Components/BannerTopBar/index.js
new file mode 100644
index 000000000..c006763f9
--- /dev/null
+++ b/client/src/Components/BannerTopBar/index.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+
+const BannerTopBar = ({
+  size,
+  backgroundUrl,
+  title,
+  text,
+}) => (
+  <div className={`bannerTopBar ${size}`} style={backgroundUrl ? { backgroundImage: `url(${backgroundUrl})` } : {}}>
+    <div className='caption'>
+      <Typography className='title' variant='h1' align='center'>{title}</Typography>
+      <Typography className='text' variant='h2' align='center'>{text}</Typography>
+    </div>
+  </div>
+);
+
+export default BannerTopBar;
diff --git a/client/src/Components/Event/Create/index.js b/client/src/Components/Event/Create/index.js
index 06e3e74ee..34fd76ac6 100644
--- a/client/src/Components/Event/Create/index.js
+++ b/client/src/Components/Event/Create/index.js
@@ -18,7 +18,7 @@ import {
 import { withStyles } from '@material-ui/core/styles';
 import styles from './styles';
 
-import TopBar from '../../TopBar';
+import BannerTopBar from '../../BannerTopBar';
 
 import {
   Basic,
@@ -72,7 +72,7 @@ class Create extends React.Component {
     const { classes } = this.props;
     return (
       <React.Fragment>
-        <TopBar />
+        <BannerTopBar />
         <Mutation mutation={hostedEventsCalls.EVENTS_CREATEEVENT}
           update={(store, { data }) => {
             this.props.history.push(`/events/edit/${data.events_CreateEvent.id}`);
diff --git a/client/src/Components/Event/Edit/index.js b/client/src/Components/Event/Edit/index.js
index 0ed096d23..0b08d92e0 100644
--- a/client/src/Components/Event/Edit/index.js
+++ b/client/src/Components/Event/Edit/index.js
@@ -6,7 +6,7 @@ import { withStyles } from '@material-ui/core/styles';
 
 import styles from './styles';
 
-import TopBar from '../../TopBar';
+import BannerTopBar from '../../BannerTopBar';
 
 import { showEventCalls } from '../../../GraphQL/Calls/index';
 
@@ -14,7 +14,7 @@ class Edit extends React.Component {
   render() {
     return (
       <React.Fragment>
-        <TopBar />
+        <BannerTopBar />
         <Typography
           variant='display1'
           align='center'
diff --git a/client/src/Components/Events/index.js b/client/src/Components/Events/index.js
index 6fedc7a7b..ed2e80431 100644
--- a/client/src/Components/Events/index.js
+++ b/client/src/Components/Events/index.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import TopBar from '../TopBar';
+import BannerTopBar from '../BannerTopBar';
 
 const Index = () => (
-  <TopBar size='big' title='Your events' text='Here will be the list of YOUR events' />
+  <BannerTopBar size='big' title='Your events' text='Here will be the list of YOUR events' />
 );
 
 export default Index;
diff --git a/client/src/Components/HostedEvents/index.js b/client/src/Components/HostedEvents/index.js
index d3a67dd94..b19f12447 100644
--- a/client/src/Components/HostedEvents/index.js
+++ b/client/src/Components/HostedEvents/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Query } from 'react-apollo';
 
-import TopBar from '../TopBar';
+import BannerTopBar from '../BannerTopBar';
 
 import { hostedEventsCalls } from '../../GraphQL/Calls/index';
 
@@ -9,7 +9,7 @@ import Event from './Event';
 
 const HostedEvent = () => (
   <React.Fragment>
-    <TopBar size='medium' title='Your hosted events' text='You are one of the pillars of this community, thank you' />
+    <BannerTopBar size='medium' title='Your hosted events' text='You are one of the pillars of this community, thank you' />
     <Query
       query={hostedEventsCalls.EVENTS_EVENTSBYHOST}
     >
diff --git a/client/src/Components/Search/index.js b/client/src/Components/Search/index.js
index 945248476..549ccb304 100644
--- a/client/src/Components/Search/index.js
+++ b/client/src/Components/Search/index.js
@@ -17,7 +17,7 @@ import {
 import { withStyles } from '@material-ui/core/styles';
 import styles from './styles';
 
-import TopBar from '../TopBar';
+import BannerTopBar from '../BannerTopBar';
 
 import { listEventsCalls } from '../../GraphQL/Calls/index';
 
@@ -53,7 +53,7 @@ class Search extends React.Component {
     const { value } = this.state;
     return (
       <React.Fragment>
-        <TopBar size='medium' title='Events' text='All the events are going to be listed here' />
+        <BannerTopBar size='medium' title='Events' text='All the events are going to be listed here' />
         <Query
           query={listEventsCalls.EVENTS_EVENTS}
         >
diff --git a/client/src/Components/TopBar/index.js b/client/src/Components/TopBar/index.js
deleted file mode 100644
index 82e6b319f..000000000
--- a/client/src/Components/TopBar/index.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-
-import { Typography } from '@material-ui/core';
-import { withStyles } from '@material-ui/core/styles';
-
-import styles from './styles';
-
-class TopBar extends React.Component {
-  render() {
-    const {
-      classes,
-      size,
-      title,
-      text,
-    } = this.props;
-    if (size === 'big') {
-      return (
-        <div className={classes.rootBig}>
-          <div className={classes.captions}>
-            <Typography className={classes.title} variant='headline' align='center'>{title}</Typography>
-            <Typography className={classes.text} variant='subheading' align='center'>{text}</Typography>
-          </div>
-        </div>
-      );
-    }
-    if (size === 'medium') {
-      return (
-        <div className={classes.rootMedium}>
-          <div className={classes.captions}>
-            <Typography className={classes.title} variant='headline' align='center'>{title}</Typography>
-            <Typography className={classes.text} variant='subheading' align='center'>{text}</Typography>
-          </div>
-        </div>
-      );
-    }
-    return (
-      <div className={classes.rootSmall} />
-    );
-  }
-}
-
-export default withStyles(styles)(TopBar);
diff --git a/client/src/Components/TopBar/styles.js b/client/src/Components/TopBar/styles.js
deleted file mode 100644
index ef12ddf5f..000000000
--- a/client/src/Components/TopBar/styles.js
+++ /dev/null
@@ -1,39 +0,0 @@
-const styles = () => ({
-  rootBig: {
-    backgroundImage: 'url(https://aacorporatesitedevelop.azurewebsites.net/img/photos/connect.jpg)',
-    width: '100%',
-    height: '100vh',
-  },
-  rootMedium: {
-    backgroundImage: 'url(https://aacorporatesitedevelop.azurewebsites.net/img/photos/connect.jpg)',
-    width: '100%',
-    height: '50vh',
-  },
-  rootSmall: {
-    backgroundImage: 'url(https://aacorporatesitedevelop.azurewebsites.net/img/photos/connect.jpg)',
-    width: '100%',
-    height: '220px',
-  },
-  captions: {
-    position: 'relative',
-    top: '50%',
-    transform: 'translateY(-50%)',
-  },
-  title: {
-    fontFamily: 'Saira',
-    color: 'white',
-    fontSize: '64px',
-    lineHeight: '78px',
-    fontWeight: 100,
-  },
-  text: {
-    fontFamily: 'Saira',
-    color: 'white',
-    fontSize: '20px',
-    lineHeight: '30px',
-    fontWeight: 600,
-    padding: '20px 0 0.5em 0',
-  },
-});
-
-export default styles;