diff --git a/client/app/partials/flox-item.js b/client/app/partials/flox-item.js
index 23978cb..9f3c229 100644
--- a/client/app/partials/flox-item.js
+++ b/client/app/partials/flox-item.js
@@ -7,9 +7,11 @@ class FloxItem extends React.Component {
 
     return (
 
-      <div className={'item ' + this.props.loadClass + (this.props.isActive ? ' active' : '')} onClick={this.changeActiveKey.bind(this)}>
+      <div className={'item ' + this.props.loadClass + (this.props.isActive ? ' active' : '')} onClick={this.props.isActive ? null : this.changeActiveKey.bind(this)}>
         <div className="item-hidden-content">
-          <span className="item-title" title={title}>{title}</span>
+          <span className="item-title">{title}</span>
+          <i className="icon-close-small" onClick={this.closeHiddenContent.bind(this)}></i>
+          <a href={"https://www.youtube.com/results?search_query=" + title + " Trailer"} target="_blank" className="trailer-btn">Watch Trailer</a>
         </div>
         <div className="item-image">
           {this.props.image ? <img src={this.props.image} /> : <i className="icon-no-image"></i>}
@@ -34,6 +36,10 @@ class FloxItem extends React.Component {
   changeActiveKey() {
     this.props.changeActiveKey(this.props.id);
   }
+
+  closeHiddenContent() {
+    this.props.changeActiveKey(null);
+  }
 }
 
 export default FloxItem;
\ No newline at end of file
diff --git a/client/assets/sass/_item.scss b/client/assets/sass/_item.scss
index f952487..b4774a9 100644
--- a/client/assets/sass/_item.scss
+++ b/client/assets/sass/_item.scss
@@ -12,6 +12,11 @@
 
   &:nth-child(5n) {
     margin: 50px 0 0 0;
+
+    .item-hidden-content {
+      left: auto;
+      right: -20px;
+    }
   }
 }
 
@@ -68,6 +73,7 @@
 
   .active & {
     z-index: 200;
+    cursor: default;
   }
 
   &:hover {
@@ -80,6 +86,7 @@
   background: #0b0b0b;
   width: 444px;
   height: 360px;
+  padding: 20px;
   display: none;
   position: absolute;
   top: -20px;
@@ -144,4 +151,43 @@
   .light-theme & {
     color: $dark;
   }
+
+  .item-hidden-content & {
+    font-size: 20px;
+    margin: 0 0 0 210px;
+    overflow: visible;
+    white-space: normal;
+  }
+}
+
+.trailer-btn {
+  background: $main;
+  color: #fff;
+  text-transform: uppercase;
+  font-size: 15px;
+  padding: 10px 0;
+  text-align: center;
+  width: 185px;
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+
+  &:hover {
+    background: darken($main, 5%);
+  }
+
+  &:active {
+    background: darken($main, 10%);
+  }
+}
+
+.icon-close-small {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  cursor: pointer;
+
+  &:active {
+    opacity: .8;
+  }
 }
\ No newline at end of file
diff --git a/client/assets/sass/_sprite.scss b/client/assets/sass/_sprite.scss
index e859f90..7a5bafc 100644
--- a/client/assets/sass/_sprite.scss
+++ b/client/assets/sass/_sprite.scss
@@ -11,13 +11,19 @@ Icon classes can be used entirely standalone. They are named after their origina
 */
 .icon-add {
   background-image: url(../img/sprite.png);
-  background-position: -64px -18px;
+  background-position: -128px -18px;
   width: 32px;
   height: 32px;
 }
+.icon-close-small {
+  background-image: url(../img/sprite.png);
+  background-position: -129px -64px;
+  width: 16px;
+  height: 16px;
+}
 .icon-close {
   background-image: url(../img/sprite.png);
-  background-position: -96px -18px;
+  background-position: -64px -18px;
   width: 32px;
   height: 32px;
 }
@@ -35,31 +41,31 @@ Icon classes can be used entirely standalone. They are named after their origina
 }
 .icon-search {
   background-image: url(../img/sprite.png);
-  background-position: -128px -18px;
+  background-position: -64px -64px;
   width: 32px;
   height: 32px;
 }
 .icon-star-active {
   background-image: url(../img/sprite.png);
-  background-position: -160px -18px;
+  background-position: 0px -64px;
   width: 32px;
   height: 32px;
 }
 .icon-star {
   background-image: url(../img/sprite.png);
-  background-position: 0px -64px;
+  background-position: -32px -64px;
   width: 32px;
   height: 32px;
 }
 .icon-time-active {
   background-image: url(../img/sprite.png);
-  background-position: -32px -64px;
+  background-position: -160px -18px;
   width: 32px;
   height: 32px;
 }
 .icon-time {
   background-image: url(../img/sprite.png);
-  background-position: -64px -64px;
+  background-position: -96px -18px;
   width: 32px;
   height: 32px;
 }
diff --git a/client/assets/sprites/close-small.png b/client/assets/sprites/close-small.png
new file mode 100644
index 0000000..d8631fc
Binary files /dev/null and b/client/assets/sprites/close-small.png differ
diff --git a/public/assets/css/app.css b/public/assets/css/app.css
index 4dfc902..d983077 100644
--- a/public/assets/css/app.css
+++ b/public/assets/css/app.css
@@ -435,13 +435,19 @@ Icon classes can be used entirely standalone. They are named after their origina
 */
 .icon-add {
   background-image: url(../img/sprite.png);
-  background-position: -64px -18px;
+  background-position: -128px -18px;
   width: 32px;
   height: 32px; }
 
+.icon-close-small {
+  background-image: url(../img/sprite.png);
+  background-position: -129px -64px;
+  width: 16px;
+  height: 16px; }
+
 .icon-close {
   background-image: url(../img/sprite.png);
-  background-position: -96px -18px;
+  background-position: -64px -18px;
   width: 32px;
   height: 32px; }
 
@@ -459,31 +465,31 @@ Icon classes can be used entirely standalone. They are named after their origina
 
 .icon-search {
   background-image: url(../img/sprite.png);
-  background-position: -128px -18px;
+  background-position: -64px -64px;
   width: 32px;
   height: 32px; }
 
 .icon-star-active, .icon-star.active {
   background-image: url(../img/sprite.png);
-  background-position: -160px -18px;
+  background-position: 0px -64px;
   width: 32px;
   height: 32px; }
 
 .icon-star {
   background-image: url(../img/sprite.png);
-  background-position: 0px -64px;
+  background-position: -32px -64px;
   width: 32px;
   height: 32px; }
 
 .icon-time-active, .icon-time.active {
   background-image: url(../img/sprite.png);
-  background-position: -32px -64px;
+  background-position: -160px -18px;
   width: 32px;
   height: 32px; }
 
 .icon-time {
   background-image: url(../img/sprite.png);
-  background-position: -64px -64px;
+  background-position: -96px -18px;
   width: 32px;
   height: 32px; }
 
@@ -645,6 +651,9 @@ Icon classes can be used entirely standalone. They are named after their origina
   position: relative; }
   .item:nth-child(5n) {
     margin: 50px 0 0 0; }
+    .item:nth-child(5n) .item-hidden-content {
+      left: auto;
+      right: -20px; }
 
 .rating {
   float: right;
@@ -705,12 +714,14 @@ Icon classes can be used entirely standalone. They are named after their origina
     top: -5px;
     opacity: 0; }
   .active .item-image {
-    z-index: 200; }
+    z-index: 200;
+    cursor: default; }
 
 .item-hidden-content {
   background: #0b0b0b;
   width: 444px;
   height: 360px;
+  padding: 20px;
   display: none;
   position: absolute;
   top: -20px;
@@ -762,6 +773,35 @@ Icon classes can be used entirely standalone. They are named after their origina
   max-width: 100%; }
   .light-theme .item-title {
     color: #1b1b1b; }
+  .item-hidden-content .item-title {
+    font-size: 20px;
+    margin: 0 0 0 210px;
+    overflow: visible;
+    white-space: normal; }
+
+.trailer-btn {
+  background: #ba59d2;
+  color: #fff;
+  text-transform: uppercase;
+  font-size: 15px;
+  padding: 10px 0;
+  text-align: center;
+  width: 185px;
+  position: absolute;
+  bottom: 15px;
+  left: 20px; }
+  .trailer-btn:hover {
+    background: #b245cd; }
+  .trailer-btn:active {
+    background: #a735c3; }
+
+.icon-close-small {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  cursor: pointer; }
+  .icon-close-small:active {
+    opacity: .8; }
 
 .modal-wrap {
   background: rgba(14, 14, 14, 0.98);
diff --git a/public/assets/img/sprite.png b/public/assets/img/sprite.png
index e31b709..534165b 100644
Binary files a/public/assets/img/sprite.png and b/public/assets/img/sprite.png differ
diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index 46517bd..990ec91 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -441,14 +441,20 @@ var FloxItem = function (_React$Component) {
 
       return _react2.default.createElement(
         'div',
-        { className: 'item ' + this.props.loadClass + (this.props.isActive ? ' active' : ''), onClick: this.changeActiveKey.bind(this) },
+        { className: 'item ' + this.props.loadClass + (this.props.isActive ? ' active' : ''), onClick: this.props.isActive ? null : this.changeActiveKey.bind(this) },
         _react2.default.createElement(
           'div',
           { className: 'item-hidden-content' },
           _react2.default.createElement(
             'span',
-            { className: 'item-title', title: title },
+            { className: 'item-title' },
             title
+          ),
+          _react2.default.createElement('i', { className: 'icon-close-small', onClick: this.closeHiddenContent.bind(this) }),
+          _react2.default.createElement(
+            'a',
+            { href: "https://www.youtube.com/results?search_query=" + title + " Trailer", target: '_blank', className: 'trailer-btn' },
+            'Watch Trailer'
           )
         ),
         _react2.default.createElement(
@@ -485,6 +491,11 @@ var FloxItem = function (_React$Component) {
     value: function changeActiveKey() {
       this.props.changeActiveKey(this.props.id);
     }
+  }, {
+    key: 'closeHiddenContent',
+    value: function closeHiddenContent() {
+      this.props.changeActiveKey(null);
+    }
   }]);
 
   return FloxItem;