diff --git a/trenity/client/src/components/Emoji/index.js b/trenity/client/src/components/Emoji/index.js
new file mode 100644
index 0000000..f2ee5b2
--- /dev/null
+++ b/trenity/client/src/components/Emoji/index.js
@@ -0,0 +1,72 @@
+import React from "react";
+import { withStyles } from "@material-ui/core";
+import { TransitionGroup, CSSTransition } from "react-transition-group";
+
+import { textToEmoji } from "../../helper";
+
+const styles = {
+  root: {
+    position: "absolute",
+    right: "15%",
+    zIndex: "2",
+    transition: "all 0.3s ease"
+  },
+  enter: {
+    opacity: "1 !important",
+    bottom: "calc(40% - 25px)"
+  },
+  enterActive: {
+    opacity: "1 !important",
+    bottom: "calc(70% - 25px)"
+  },
+  enterDone: {
+    bottom: "calc(150% - 25px)",
+    opacity: "0"
+  },
+  exit: {
+    bottom: "calc(150% - 25px)",
+    opacity: "0"
+  },
+  exitActive: {
+    bottom: "calc(150% - 25px)",
+    opacity: "0"
+  },
+  hack: {
+    position: "absolute",
+    opacity: "0"
+  }
+};
+
+const Emoji = ({ classes, emoji }) => {
+  const emojiAnimation = {
+    enter: ["enter", classes.root, classes.enter].join(" "),
+    enterActive: ["enter-active", classes.root, classes.enterActive].join(" "),
+    enterDone: ["enter-done", classes.root, classes.enterDone].join(" "),
+    exit: ["exit", classes.root, classes.exit].join(" "),
+    exitActive: ["exit-active", classes.root, classes.exitActive].join(" "),
+    exitDone: ["exit-done", classes.exitActive].join(" ")
+  };
+  return (
+    <TransitionGroup component={null}>
+      <CSSTransition
+        classNames={{
+          appear: emojiAnimation.enter,
+          appearActive: emojiAnimation.enterActive,
+          appearDone: emojiAnimation.enterDone,
+          enter: emojiAnimation.enter,
+          enterActive: emojiAnimation.enterActive,
+          enterDone: emojiAnimation.enterDone,
+          exit: emojiAnimation.exit,
+          exitActive: emojiAnimation.exitActive,
+          exitDone: emojiAnimation.exitDone
+        }}
+        key={emoji}
+        timeout={2000}
+      >
+        <span className={classes.hack}>{textToEmoji(emoji.split("-")[0])}</span>
+      </CSSTransition>
+    </TransitionGroup>
+  );
+};
+
+export default withStyles(styles)(Emoji);
diff --git a/trenity/client/src/components/Event/index.js b/trenity/client/src/components/Event/index.js
new file mode 100644
index 0000000..7d8f256
--- /dev/null
+++ b/trenity/client/src/components/Event/index.js
@@ -0,0 +1,30 @@
+import React from "react";
+import moment from "moment";
+import { withStyles } from "@material-ui/core/styles";
+import { eventsToEmoji } from "../../helper";
+
+const styles = {
+  root: {
+    textAlign: "center"
+  },
+  emoji: {
+    fontSize: "1.5em",
+    margin: "0 0 5px 0"
+  },
+  time: {
+    margin: 0
+  }
+};
+
+const Event = ({ classes, eventObj }) => (
+  <div className={classes.root}>
+    <div className={classes.emoji}>
+      {eventsToEmoji(eventObj.event.toUpperCase())}
+    </div>
+    <div className={classes.time}>
+      {moment.utc(eventObj.timeStamp).format("m")}'
+    </div>
+  </div>
+);
+
+export default withStyles(styles)(Event);
diff --git a/trenity/client/src/components/EventsTimeline/index.js b/trenity/client/src/components/EventsTimeline/index.js
index 78e53a5..e96c657 100644
--- a/trenity/client/src/components/EventsTimeline/index.js
+++ b/trenity/client/src/components/EventsTimeline/index.js
@@ -1,29 +1,8 @@
 import React, { Component } from "react";
-import moment from "moment";
 import { isEmpty } from "ramda";
-import { withStyles } from "@material-ui/core/styles";
 import Swiper from "react-id-swiper";
 
-import { eventsToEmoji } from "../../helper";
-
-const styles = {
-  root: {
-    display: "flex",
-    alignItems: "center",
-    overflowX: "scroll",
-    whiteSpace: "nowrap"
-  },
-  eachEventContainer: {
-    textAlign: "center"
-  },
-  eventEmoji: {
-    fontSize: "1.5em",
-    margin: "0 0 5px 0"
-  },
-  eventTime: {
-    margin: 0
-  }
-};
+import Event from "../../components/Event";
 
 const PARAMS = {
   slidesPerView: 4,
@@ -36,7 +15,6 @@ const PARAMS = {
 class EventsTimeline extends Component {
   constructor(props) {
     super(props);
-    this.state = {};
     this.eventsAnimation = null;
   }
 
@@ -68,7 +46,6 @@ class EventsTimeline extends Component {
   };
 
   render() {
-    const { classes, events } = this.props;
     return (
       <Swiper
         shouldSwiperUpdate
@@ -77,14 +54,9 @@ class EventsTimeline extends Component {
           if (node) this.swiper = node.swiper;
         }}
       >
-        {events.map(e => (
-          <div key={e._id} className={classes.eachEventContainer}>
-            <div className={classes.eventEmoji}>
-              {eventsToEmoji(e.event.toUpperCase())}
-            </div>
-            <div className={classes.eventTime}>
-              {moment.utc(e.timeStamp).format("m")}'
-            </div>
+        {this.props.events.map(eventObj => (
+          <div key={eventObj._id}>
+            <Event eventObj={eventObj} />
           </div>
         ))}
       </Swiper>
@@ -92,4 +64,4 @@ class EventsTimeline extends Component {
   }
 }
 
-export default withStyles(styles)(EventsTimeline);
+export default EventsTimeline;
diff --git a/trenity/client/src/components/Headings/index.js b/trenity/client/src/components/Headings/index.js
index 750541c..e8fc026 100644
--- a/trenity/client/src/components/Headings/index.js
+++ b/trenity/client/src/components/Headings/index.js
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React from "react";
 import { withStyles } from "@material-ui/core/styles";
 
 const styles = {
@@ -9,12 +9,8 @@ const styles = {
   }
 };
 
-class Headings extends Component {
-  render() {
-    const { classes, text } = this.props;
-
-    return <div className={classes.root}>{text}</div>;
-  }
-}
+const Headings = ({ classes, text }) => (
+  <div className={classes.root}>{text}</div>
+);
 
 export default withStyles(styles)(Headings);
diff --git a/trenity/client/src/components/MatchNavBar/index.js b/trenity/client/src/components/MatchNavBar/index.js
deleted file mode 100644
index c7fcbe5..0000000
--- a/trenity/client/src/components/MatchNavBar/index.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from "react";
-import Grid from "@material-ui/core/Grid";
-import { withStyles } from "@material-ui/core/styles";
-
-const styles = {
-  root: {
-    height: "calc(100vh*0.10)",
-    display: "flex",
-    alignItems: "center",
-    width: "calc(100vw*0.8)",
-    maxWidth: "1000px",
-    margin: "0 auto"
-  },
-  textRight: {
-    textAlign: "right"
-  },
-  textCenter: {
-    textAlign: "center"
-  },
-  scoreAndTimeContainer: {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  score: {
-    fontSize: "2em"
-  },
-  timeInsideMatch: {
-    fontSize: "0.8em"
-  }
-};
-
-const MatchNavBar = ({ classes, teamOne, score, teamTwo, timeInsideMatch }) => (
-  <Grid container className={classes.root}>
-    <Grid item xs={4} className={classes.textRight}>
-      {teamOne}
-    </Grid>
-    <Grid item xs={4} className={classes.textCenter}>
-      <div className={classes.scoreAndTimeContainer}>
-        <span className={classes.score}> 0 - 0</span>
-        <span className={classes.timeInsideMatch}>
-          {timeInsideMatch.format("HH:mm:ss")}
-        </span>
-      </div>
-    </Grid>
-    <Grid item xs={4}>
-      {teamTwo}
-    </Grid>
-  </Grid>
-);
-
-export default withStyles(styles)(MatchNavBar);
diff --git a/trenity/client/src/components/MatchTile/index.js b/trenity/client/src/components/MatchTile/index.js
index 5cfab0a..f7af442 100644
--- a/trenity/client/src/components/MatchTile/index.js
+++ b/trenity/client/src/components/MatchTile/index.js
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React from "react";
 import { withStyles } from "@material-ui/core/styles";
 
 const styles = {
@@ -13,19 +13,13 @@ const styles = {
   }
 };
 
-class MatchTile extends Component {
-  render() {
-    const { classes, image, index, handleClick } = this.props;
-
-    return (
-      <div
-        className={classes.root}
-        onClick={() => (handleClick ? handleClick(index) : null)}
-      >
-        <img src={image} className={classes.image} alt="" />
-      </div>
-    );
-  }
-}
+const MatchTile = ({ classes, image, index, handleClick }) => (
+  <div
+    className={classes.root}
+    onClick={() => (handleClick ? handleClick(index) : null)}
+  >
+    <img src={image} className={classes.image} alt="" />
+  </div>
+);
 
 export default withStyles(styles)(MatchTile);
diff --git a/trenity/client/src/components/Navbar/index.js b/trenity/client/src/components/Navbar/index.js
index 700749a..fb312e1 100644
--- a/trenity/client/src/components/Navbar/index.js
+++ b/trenity/client/src/components/Navbar/index.js
@@ -1,35 +1,21 @@
-import React, { Component } from "react";
-
-// import Typography from "@material-ui/core/Typography";
-// import ReactSwipe from "react-swipe";
-// import Grid from "@material-ui/core/Grid";
+import React from "react";
 import { withStyles } from "@material-ui/core/styles";
 
 const styles = {
   root: {
     width: "calc(100vw*0.8)",
-    maxWidth: "1000px",
     height: "calc(100vh*0.10)",
-    maxHeight: "60px",
+    maxWidth: "1000px",
+    maxHeight: "70px",
     margin: "0 auto",
     color: "white",
     display: "flex",
     alignItems: "center"
-  },
-  brand: {
-    fontSize: "1.5em"
   }
 };
 
-class Navbar extends Component {
-  render() {
-    const { classes, text } = this.props;
-    return (
-      <div className={classes.root}>
-        <div className={classes.brand}>{text}</div>
-      </div>
-    );
-  }
-}
+const Navbar = ({ classes, children }) => (
+  <div className={classes.root}>{children}</div>
+);
 
 export default withStyles(styles)(Navbar);
diff --git a/trenity/client/src/components/ScoreCard/index.js b/trenity/client/src/components/ScoreCard/index.js
new file mode 100644
index 0000000..d837d85
--- /dev/null
+++ b/trenity/client/src/components/ScoreCard/index.js
@@ -0,0 +1,51 @@
+import React from "react";
+import { withStyles } from "@material-ui/core/styles";
+
+const styles = {
+  root: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    height: "100%"
+  },
+  elements: {
+    flex: "1 0 33.33%"
+  },
+  textRight: {
+    textAlign: "right"
+  },
+  textCenter: {
+    textAlign: "center"
+  },
+  scoreAndTimeContainer: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  score: {
+    fontSize: "2em"
+  },
+  timeInsideMatch: {
+    fontSize: "0.8em"
+  }
+};
+
+const ScoreCard = ({ classes, teamOne, score, teamTwo, timeInsideMatch }) => (
+  <div className={classes.root}>
+    <div className={[classes.elements, classes.textRight].join(" ")}>
+      {teamOne}
+    </div>
+    <div
+      className={[classes.elements, classes.scoreAndTimeContainer].join(" ")}
+    >
+      <span className={classes.score}> 0 - 0</span>
+      <span className={classes.timeInsideMatch}>
+        {timeInsideMatch.format("HH:mm:ss")}
+      </span>
+    </div>
+    <div className={classes.elements}>{teamTwo}</div>
+  </div>
+);
+
+export default withStyles(styles)(ScoreCard);
diff --git a/trenity/client/src/components/SentimentBar/index.js b/trenity/client/src/components/SentimentBar/index.js
new file mode 100644
index 0000000..f13f77b
--- /dev/null
+++ b/trenity/client/src/components/SentimentBar/index.js
@@ -0,0 +1,52 @@
+import React from "react";
+import { withStyles } from "@material-ui/core/styles";
+import { positiveSentimentToEmoji } from "../../helper";
+
+const styles = {
+  root: {
+    display: "flex",
+    alignItems: "center",
+    position: "relative",
+    width: "100%"
+  },
+  positive: {
+    background: "#00FFB6",
+    borderRadius: "5px",
+    flexGrow: "0",
+    flexShrink: "0",
+    flexBasis: "50%",
+    height: "10px"
+  },
+  emoji: {
+    transition: "left 0.5s linear",
+    position: "absolute",
+    zIndex: 1,
+    left: 0,
+    fontSize: "1.5em"
+  },
+  negative: {
+    height: "10px",
+    background: "#F15959",
+    borderRadius: "5px",
+    flexGrow: "0",
+    flexShrink: "0",
+    flexBasis: "50%"
+  }
+};
+
+const SentimentBar = ({ classes, positive, negative }) => (
+  <div className={classes.root}>
+    <div className={classes.positive} style={{ flexBasis: `${positive}%` }} />
+    <span
+      role="img"
+      aria-label="emoji"
+      className={classes.emoji}
+      style={{ left: `${positive - 10}%` }}
+    >
+      {positiveSentimentToEmoji(positive)}
+    </span>
+    <div className={classes.negative} style={{ flexBasis: `${negative}%` }} />
+  </div>
+);
+
+export default withStyles(styles)(SentimentBar);
diff --git a/trenity/client/src/components/TopicCard/SentimentBar.js b/trenity/client/src/components/TopicCard/SentimentBar.js
deleted file mode 100644
index 25de23b..0000000
--- a/trenity/client/src/components/TopicCard/SentimentBar.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { PureComponent } from "react";
-import { withStyles } from "@material-ui/core/styles";
-import { positiveSentimentToEmoji } from "../../helper";
-
-const styles = {
-  root: {
-    flex: "0 1 80%",
-    height: "30%",
-    display: "flex",
-    alignItems: "center",
-    position: "relative"
-  },
-  positive: {
-    background: "#00FFB6",
-    borderRadius: "5px",
-    flexGrow: "0",
-    flexShrink: "0",
-    flexBasis: "50%",
-    height: "10px"
-  },
-  emoji: {
-    transition: "left 0.5s linear",
-    position: "absolute",
-    zIndex: 1,
-    left: 0,
-    fontSize: "1.5em"
-  },
-  negetive: {
-    height: "10px",
-    background: "#F15959",
-    borderRadius: "5px",
-    flexGrow: "0",
-    flexShrink: "0",
-    flexBasis: "50%"
-  }
-};
-
-class SentimentBar extends PureComponent {
-  render() {
-    const { classes, positive, negetive } = this.props;
-
-    return (
-      <div className={classes.root}>
-        <div
-          className={classes.positive}
-          style={{ flexBasis: `${positive}%` }}
-        />
-        <span
-          role="img"
-          aria-label="emoji"
-          className={classes.emoji}
-          style={{ left: `${positive - 10}%` }}
-        >
-          {positiveSentimentToEmoji(positive)}
-        </span>
-        <div
-          className={classes.negetive}
-          style={{ flexBasis: `${negetive}%` }}
-        />
-      </div>
-    );
-  }
-}
-
-export default withStyles(styles)(SentimentBar);
diff --git a/trenity/client/src/components/TopicCard/emoji.js b/trenity/client/src/components/TopicCard/emoji.js
deleted file mode 100644
index ef391aa..0000000
--- a/trenity/client/src/components/TopicCard/emoji.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, { Component } from "react";
-import { withStyles } from "@material-ui/core";
-import { TransitionGroup, CSSTransition } from "react-transition-group";
-
-import { textToEmoji } from "../../helper";
-
-const styles = {
-  emoji: {
-    position: "absolute",
-    right: "15%",
-    zIndex: "2",
-    transition: "all 0.3s ease"
-  },
-  emojiEnter: {
-    opacity: "1",
-    bottom: "calc(40% - 25px)"
-  },
-  emojiEnterActive: {
-    opacity: "1",
-    bottom: "calc(70% - 25px)"
-  },
-  emojiEnterDone: {
-    bottom: "calc(150% - 25px)",
-    opacity: "0"
-  },
-  emojiExit: {
-    bottom: "calc(150% - 25px)",
-    opacity: "0"
-  },
-  emojiExitActive: {
-    bottom: "calc(150% - 25px)",
-    opacity: "0"
-  },
-  hack: {
-    position: "absolute"
-  }
-};
-
-class Emoji extends Component {
-  state = {};
-  render() {
-    const { classes, emoji } = this.props;
-
-    const emojiAnimation = {
-      enter: ["enter", classes.emoji, classes.emojiEnter].join(" "),
-      enterActive: [
-        "enter-active",
-        classes.emoji,
-        classes.emojiEnterActive
-      ].join(" "),
-      enterDone: ["enter-done", classes.emoji, classes.emojiEnterDone].join(
-        " "
-      ),
-      exit: ["exit", classes.emoji, classes.emojiExit].join(" "),
-      exitActive: ["exit-active", classes.emoji, classes.emojiExitActive].join(
-        " "
-      ),
-      exitDone: ["exit-done", classes.emojiExitActive].join(" ")
-    };
-
-    return (
-      <TransitionGroup component={null}>
-        <CSSTransition
-          classNames={{
-            appear: emojiAnimation.enter,
-            appearActive: emojiAnimation.enterActive,
-            appearDone: emojiAnimation.enterDone,
-            enter: emojiAnimation.enter,
-            enterActive: emojiAnimation.enterActive,
-            enterDone: emojiAnimation.enterDone,
-            exit: emojiAnimation.exit,
-            exitActive: emojiAnimation.exitActive,
-            exitDone: emojiAnimation.exitDone
-          }}
-          key={emoji}
-          timeout={2000}
-        >
-          <span className={classes.hack}>
-            {textToEmoji(emoji.split("-")[0])}
-          </span>
-        </CSSTransition>
-      </TransitionGroup>
-    );
-  }
-}
-
-export default withStyles(styles)(Emoji);
diff --git a/trenity/client/src/components/TopicCard/index.js b/trenity/client/src/components/TopicCard/index.js
index 5af0086..afafee4 100644
--- a/trenity/client/src/components/TopicCard/index.js
+++ b/trenity/client/src/components/TopicCard/index.js
@@ -1,9 +1,6 @@
-import React, { PureComponent } from "react";
+import React from "react";
 import { withStyles } from "@material-ui/core/styles";
 
-import Emoji from "./emoji";
-import SentimentBar from "./SentimentBar";
-
 const styles = {
   root: {
     position: "relative",
@@ -17,6 +14,17 @@ const styles = {
     justifyContent: "center",
     alignItems: "center"
   },
+  rootOnVideo: {
+    position: "relative",
+    height: "100%",
+    width: "100%",
+    backgroundImage: "linear-gradient(-180deg, #537895 0%, #09203F 100%)",
+    borderRadius: "5px",
+    boxShadow: "0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center"
+  },
   selected: {
     background:
       "linear-gradient(0deg, rgba(75,78,94,1) 0%, rgba(75,78,94,1) 40%, rgba(112,114,133,1) 100%)"
@@ -24,82 +32,67 @@ const styles = {
   centerText: {
     textAlign: "center"
   },
-  circle: {
-    position: "absolute",
-    width: "6em",
-    height: "6em",
-    background:
-      "-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(82,113,255,1)), color-stop(1%, rgba(82,113,254,1)), color-stop(100%, rgba(87,117,251,1)))",
-    borderRadius: "100%"
+
+  imageContainer: {
+    height: "auto",
+    width: "70%"
+  },
+  imageContainerOnVideo: {
+    width: "30%",
+    height: "auto",
+    flex: "1 0 70%",
+    display: "flex",
+    alignItems: "center"
   },
   image: {
-    width: "70%",
+    width: "100%",
     borderRadius: "100%",
     height: "auto",
     zIndex: "1"
   },
-  onVideoEntity: {
-    flex: "0 1 100%",
+  sentimentBar: {
+    width: "80%",
+    flex: "1 0 30%",
     display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    height: "70%"
-  },
-  onVideoImage: {
-    width: "30%",
-    height: "auto",
-    borderRadius: "100%",
-    zIndex: 1
+    alignItems: "center"
   }
 };
 
-class TopicCard extends PureComponent {
-  handleTopicCardClick = () => {
-    this.props.onEntityClick(this.props.entityKey);
-  };
-
-  render() {
-    const {
-      classes,
-      variant,
-      entityKey,
-      entityImage,
-      emoji,
-      sentiment,
-      selected
-    } = this.props;
-
-    const selectedStyles =
-      selected === entityKey
+const TopicCard = ({
+  classes,
+  variant,
+  entityKey,
+  entityImage,
+  selected,
+  onEntityClick,
+  emojiComponent,
+  sentimentBarComponent
+}) => {
+  const rootStyles =
+    variant === "onVideo"
+      ? classes.rootOnVideo
+      : selected === entityKey
         ? [classes.selected, classes.root].join(" ")
         : classes.root;
 
-    if (variant === "onVideo") {
-      return (
-        <div className={selectedStyles} onClick={this.handleTopicCardClick}>
-          <div className={classes.onVideoEntity}>
-            <img
-              src={entityImage}
-              className={classes.onVideoImage}
-              alt={entityKey}
-            />
-          </div>
-          {emoji && <Emoji emoji={emoji} />}
-          <SentimentBar
-            positive={sentiment.positive}
-            negetive={sentiment.negative}
-          />
-        </div>
-      );
-    }
-    return (
-      <div className={selectedStyles} onClick={this.handleTopicCardClick}>
-        {/* <div className={classes.circle} /> */}
+  const imageContainerStyles =
+    variant === "onVideo"
+      ? classes.imageContainerOnVideo
+      : classes.imageContainer;
+
+  return (
+    <div className={rootStyles} onClick={() => onEntityClick(entityKey)}>
+      {/* <div className={classes.circle} /> */}
+      <div className={imageContainerStyles}>
         <img src={entityImage} className={classes.image} alt={entityKey} />
-        {emoji && <Emoji emoji={emoji} />}
       </div>
-    );
-  }
-}
+      {emojiComponent}
+
+      {variant === "onVideo" && (
+        <div className={classes.sentimentBar}> {sentimentBarComponent} </div>
+      )}
+    </div>
+  );
+};
 
 export default withStyles(styles)(TopicCard);
diff --git a/trenity/client/src/components/TrendingEntities/index.js b/trenity/client/src/components/TrendingEntities/index.js
index c446d93..1fe85a0 100644
--- a/trenity/client/src/components/TrendingEntities/index.js
+++ b/trenity/client/src/components/TrendingEntities/index.js
@@ -1,11 +1,13 @@
 import React, { PureComponent } from "react";
-import { toPairs, sort } from "ramda";
 
 //Material Styles
 import { withStyles } from "@material-ui/core/styles";
+import { entitiesDictToSortedEntitiesArray } from "../../helper";
 
 //UI ELements
 import TopicCard from "../../components/TopicCard";
+import Emoji from "../../components/Emoji";
+import SentimentBar from "../../components/SentimentBar";
 
 const styles = {
   trendingContainer: {
@@ -36,55 +38,13 @@ const styles = {
 };
 
 class TrendingEntities extends PureComponent {
-  entitiesDictToSortedEntitiesArray = entitiesDict => {
-    const sortedEntitiesArray = sort(
-      (a, b) => b[1].difference - a[1].difference,
-      toPairs(entitiesDict)
-    ).map(i => {
-      const entity = i[0];
-      const sentiment = i[1].sentiment;
-
-      const refinedSentiment = {};
-
-      if (sentiment) {
-        if ("positive" in sentiment && "negative" in sentiment) {
-          refinedSentiment["positive"] = Math.round(sentiment.positive * 100);
-          refinedSentiment["negative"] = Math.round(sentiment.negative * 100);
-        } else {
-          if ("positive" in sentiment) {
-            refinedSentiment["positive"] = Math.round(sentiment.positive * 100);
-            refinedSentiment["negative"] = 0;
-          }
-
-          if ("negative" in sentiment) {
-            refinedSentiment["negative"] = Math.round(sentiment.negative * 100);
-            refinedSentiment["positive"] = 0;
-          }
-        }
-      } else {
-        refinedSentiment["positive"] = 50;
-        refinedSentiment["negative"] = 50;
-      }
-
-      const entityData = this.props.allEntities.find(
-        data => entity === data.entityName
-      );
-
-      return {
-        entity,
-        image: entityData.entityImageURL,
-        sentiment: refinedSentiment
-      };
-    });
-    return sortedEntitiesArray;
-  };
-
   render() {
     const {
       variant,
       classes,
       selected,
       trending,
+      allEntities,
       emojis,
       onSpecificEntityClick
     } = this.props;
@@ -103,7 +63,7 @@ class TrendingEntities extends PureComponent {
 
     return (
       <div className={rootStyles}>
-        {this.entitiesDictToSortedEntitiesArray(trending.entities)
+        {entitiesDictToSortedEntitiesArray(trending.entities, allEntities)
           .slice(0, 6)
           .map(e => (
             <div key={e.entity} className={entityStyles}>
@@ -111,9 +71,16 @@ class TrendingEntities extends PureComponent {
                 variant={variant === "onVideo" ? "onVideo" : "tile"}
                 entityKey={e.entity}
                 entityImage={e.image}
-                emoji={emojis[e.entity]}
-                sentiment={e.sentiment}
                 selected={selected}
+                emojiComponent={
+                  emojis[e.entity] && <Emoji emoji={emojis[e.entity]} />
+                }
+                sentimentBarComponent={
+                  <SentimentBar
+                    positive={e.sentiment.positive}
+                    negative={e.sentiment.negative}
+                  />
+                }
                 onEntityClick={onSpecificEntityClick}
               />
             </div>
diff --git a/trenity/client/src/components/TwitterUser/index.js b/trenity/client/src/components/TwitterUser/index.js
index 24c0363..d45c60f 100644
--- a/trenity/client/src/components/TwitterUser/index.js
+++ b/trenity/client/src/components/TwitterUser/index.js
@@ -2,7 +2,7 @@ import React, { Component } from "react";
 
 import { withStyles } from "@material-ui/core/styles";
 
-import { textToEmoji, checkImageExists } from "../../helper";
+import { textToEmoji, checkImageExists, SAMPLE_DATA } from "../../helper";
 
 const styles = {
   userContainer: {
@@ -52,8 +52,14 @@ class TwitterUser extends Component {
 
   render() {
     const { classes, index, viewing, tweet, onUserClick } = this.props;
+
     const viewingStyles =
       index === viewing ? classes.userSelected : classes.userFaded;
+
+    const imageSrc = this.state.imageExists
+      ? tweet.image
+      : SAMPLE_DATA.dummyTweetImage;
+
     return (
       <div
         className={classes.userContainer}
@@ -61,19 +67,11 @@ class TwitterUser extends Component {
       >
         <span className={viewingStyles}>
           <div className={classes.emoji}>{textToEmoji(tweet.emotion)}</div>
-          {this.state.imageExists ? (
-            <img
-              src={tweet.image}
-              className={classes.userImage}
-              alt="twitter-user-profile"
-            />
-          ) : (
-            <img
-              src="http://www.razzlesnightclub.com/sites/default/files/default_images/default_testimonial.png"
-              className={classes.userImage}
-              alt="twitter-user-profile"
-            />
-          )}
+          <img
+            src={imageSrc}
+            className={classes.userImage}
+            alt="twitter-user-profile"
+          />
         </span>
       </div>
     );
diff --git a/trenity/client/src/helper.js b/trenity/client/src/helper.js
index f6e9c15..e60a319 100644
--- a/trenity/client/src/helper.js
+++ b/trenity/client/src/helper.js
@@ -1,5 +1,6 @@
 import React from "react";
 import axios from "axios";
+import { toPairs, sort } from "ramda";
 
 export const textToEmoji = emotion => {
   switch (emotion) {
@@ -112,57 +113,6 @@ export const eventsToEmoji = event => {
   }
 };
 
-const FRA = {
-  Nabil_Fekir:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/401458_sq-300_jpg?allowDefaultPicture=true",
-  Ousmane_Dembele:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/398680_sq-300_jpg?allowDefaultPicture=true",
-  Benjamin_Pavard:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/411471_sq-300_jpg?allowDefaultPicture=true",
-  Benjamin_Mendy:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/335995_sq-300_jpg?allowDefaultPicture=true",
-  Olivier_Giroud:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/358015_sq-300_jpg?allowDefaultPicture=true",
-  Djibril_Sidibe:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/398682_sq-300_jpg?allowDefaultPicture=true",
-  Blaise_Matuidi:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/358014_sq-300_jpg?allowDefaultPicture=true",
-  Paul_Pogba:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/367388_sq-300_jpg?allowDefaultPicture=true",
-  Ngolo_Kante:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/398681_sq-300_jpg?allowDefaultPicture=true",
-  Antoine_Griezmann:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/336435_sq-300_jpg?allowDefaultPicture=true",
-  Presnel_Kimpembe:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/401459_sq-300_jpg?allowDefaultPicture=true",
-  Steven_Nzonzi:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/319327_sq-300_jpg?allowDefaultPicture=true",
-  Lucas_Hernandez:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/411470_sq-300_jpg?allowDefaultPicture=true",
-  Steve_Mandanda:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/254133_sq-300_jpg?allowDefaultPicture=true",
-  Adil_Rami:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/299876_sq-300_jpg?allowDefaultPicture=true",
-  Hugo_Lloris:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/297105_sq-300_jpg?allowDefaultPicture=true",
-  Corentin_Tolisso:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/404566_sq-300_jpg?allowDefaultPicture=true",
-  Deschamps_Didier:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/48455_sq-300_jpg?allowDefaultPicture=true",
-  Florian_Thauvin:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/368965_sq-300_jpg?allowDefaultPicture=true",
-  Thomas_Lemar:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/402049_sq-300_jpg?allowDefaultPicture=true",
-  Samuel_Umtiti:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/368846_sq-300_jpg?allowDefaultPicture=true",
-  Raphael_Varane:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/359440_sq-300_jpg?allowDefaultPicture=true",
-  Alphonse_Areola:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/368840_sq-300_jpg?allowDefaultPicture=true",
-  Kylian_Mbappe:
-    "https://api.fifa.com/api/v1/picture/players/2018fwc/389867_sq-300_jpg?allowDefaultPicture=true"
-};
-
 const tweets = [
   {
     emotion: "joy",
@@ -231,16 +181,59 @@ const tweets = [
   }
 ];
 
-const getArrayOfEntities = entityObj =>
-  Object.keys(entityObj).map(entity => {
-    return { entity, image: entityObj[entity] };
-  });
+//Technical Debt
+export const SAMPLE_DATA = {
+  tweets,
+  dummyTweetImage:
+    "http://www.razzlesnightclub.com/sites/default/files/default_images/default_testimonial.png"
+};
+
+//Technical Debt
+export const entitiesDictToSortedEntitiesArray = (
+  entitiesDict,
+  allEntities
+) => {
+  const sortedEntitiesArray = sort(
+    (a, b) => b[1].difference - a[1].difference,
+    toPairs(entitiesDict)
+  ).map(i => {
+    const entity = i[0];
+    const sentiment = i[1].sentiment;
 
-export const sampleData = {
-  trendingEntities: getArrayOfEntities(FRA),
-  tweets
+    const refinedSentiment = {};
+
+    if (sentiment) {
+      if ("positive" in sentiment && "negative" in sentiment) {
+        refinedSentiment["positive"] = Math.round(sentiment.positive * 100);
+        refinedSentiment["negative"] = Math.round(sentiment.negative * 100);
+      } else {
+        if ("positive" in sentiment) {
+          refinedSentiment["positive"] = Math.round(sentiment.positive * 100);
+          refinedSentiment["negative"] = 0;
+        }
+
+        if ("negative" in sentiment) {
+          refinedSentiment["negative"] = Math.round(sentiment.negative * 100);
+          refinedSentiment["positive"] = 0;
+        }
+      }
+    } else {
+      refinedSentiment["positive"] = 50;
+      refinedSentiment["negative"] = 50;
+    }
+
+    const entityData = allEntities.find(data => entity === data.entityName);
+
+    return {
+      entity,
+      image: entityData.entityImageURL,
+      sentiment: refinedSentiment
+    };
+  });
+  return sortedEntitiesArray;
 };
 
+//Technical Debt
 export const checkImageExists = async imageUrl => {
   return await axios
     .get(imageUrl)
diff --git a/trenity/client/src/scenes/Home/index.js b/trenity/client/src/scenes/Home/index.js
index f181dad..9f28192 100644
--- a/trenity/client/src/scenes/Home/index.js
+++ b/trenity/client/src/scenes/Home/index.js
@@ -28,6 +28,9 @@ const styles = {
     justifyContent: "center",
     fontSize: "0.8em",
     alignItems: "center"
+  },
+  brand: {
+    fontSize: "1.5em"
   }
 };
 
@@ -61,7 +64,9 @@ class Home extends Component {
     return (
       <Grid container className={classes.root}>
         <Grid item xs={12}>
-          <Navbar text="Trenity" />
+          <Navbar>
+            <div className={classes.brand}>Trenity</div>
+          </Navbar>
         </Grid>
         <Grid item xs={12}>
           <Grid container>
diff --git a/trenity/client/src/scenes/Match/SecondScreenExperience.js b/trenity/client/src/scenes/Match/SecondScreenExperience.js
index 8ec1363..f5e0f54 100644
--- a/trenity/client/src/scenes/Match/SecondScreenExperience.js
+++ b/trenity/client/src/scenes/Match/SecondScreenExperience.js
@@ -51,7 +51,7 @@ class SecondScreenExperience extends Component {
 
     return (
       <div className={classes.root}>
-        {!isFullScreen && <div className={classes.navbar}>{navbar}</div>}
+        {!isFullScreen && navbar}
         {children}
         {!isFullScreen && (
           <React.Fragment>
diff --git a/trenity/client/src/scenes/Match/index.js b/trenity/client/src/scenes/Match/index.js
index 50d34ff..39a6fbe 100644
--- a/trenity/client/src/scenes/Match/index.js
+++ b/trenity/client/src/scenes/Match/index.js
@@ -18,6 +18,8 @@ import ReactionFeed from "../../components/ReactionFeed";
 
 //Assets
 import "../../assets/css/swiper.min.css";
+import Navbar from "../../components/Navbar/index";
+import ScoreCard from "../../components/ScoreCard";
 // import video from "../../assets/video/sample_video.mp4";
 
 class Match extends Component {
@@ -328,11 +330,13 @@ class Match extends Component {
   render() {
     if (this.state.startSimulation) {
       const navbar = (
-        <MatchNavBar
-          teamOne={this.match.teamOneId}
-          teamTwo={this.match.teamTwoId}
-          timeInsideMatch={this.state.timeInsideMatch}
-        />
+        <Navbar>
+          <ScoreCard
+            teamOne={this.match.teamOneId}
+            teamTwo={this.match.teamTwoId}
+            timeInsideMatch={this.state.timeInsideMatch}
+          />
+        </Navbar>
       );
 
       const events = <EventsTimeline events={this.state.events} />;
diff --git a/trenity/server/entityList.js b/trenity/server/entityList.js
index e8cee63..8cf5979 100644
--- a/trenity/server/entityList.js
+++ b/trenity/server/entityList.js
@@ -255,17 +255,17 @@ const MATCHES_LIST = [
     teamOneId: "CRO",
     teamTwoId: "FRA",
     startTime: moment.utc("2018-07-15 15:18:30")
-  },
-  {
-    key: "BELFRA_SEMI",
-    matchName: "Belgium vs France",
-    matchTileImage:
-      "https://i.ytimg.com/vi/D_hu6xpwn4Q/hqdefault.jpg?sqp=-oaymwEZCPYBEIoBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLCqRPhweDAYucAxelwQqhrTO1qJbQ",
-    isLive: false,
-    teamOneId: "BEL",
-    teamTwoId: "FRA",
-    startTime: moment.utc("2018-07-10 18:00:00")
   }
+  // {
+  //   key: "BELFRA_SEMI",
+  //   matchName: "Belgium vs France",
+  //   matchTileImage:
+  //     "https://i.ytimg.com/vi/D_hu6xpwn4Q/hqdefault.jpg?sqp=-oaymwEZCPYBEIoBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLCqRPhweDAYucAxelwQqhrTO1qJbQ",
+  //   isLive: false,
+  //   teamOneId: "BEL",
+  //   teamTwoId: "FRA",
+  //   startTime: moment.utc("2018-07-10 18:00:00")
+  // }
 ];
 
 module.exports = {