diff --git a/data/interfaces/default/css/jquery.scrollbar.css b/data/interfaces/default/css/jquery.scrollbar.css
new file mode 100644
index 00000000..e0a7df51
--- /dev/null
+++ b/data/interfaces/default/css/jquery.scrollbar.css
@@ -0,0 +1,904 @@
+/*************** SCROLLBAR BASE CSS ***************/
+.scroll-wrapper {
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: relative;
+}
+.scroll-wrapper > .scroll-content {
+  border: none !important;
+  box-sizing: content-box !important;
+  height: auto;
+  left: 0;
+  margin: 0;
+  max-height: none;
+  max-width: none !important;
+  overflow: scroll !important;
+  padding: 0;
+  position: relative !important;
+  top: 0;
+  width: auto !important;
+}
+.scroll-wrapper > .scroll-content::-webkit-scrollbar {
+  height: 0;
+  width: 0;
+}
+.scroll-wrapper.scroll--rtl {
+  direction: rtl;
+}
+
+.scroll-element {
+  box-sizing: content-box;
+  display: none;
+}
+.scroll-element div {
+  box-sizing: content-box;
+}
+.scroll-element .scroll-bar,
+.scroll-element .scroll-arrow {
+  cursor: default;
+}
+.scroll-element.scroll-x.scroll-scrollx_visible, .scroll-element.scroll-y.scroll-scrolly_visible {
+  display: block;
+}
+
+.scroll-textarea {
+  border: 1px solid #cccccc;
+  border-top-color: #999999;
+}
+.scroll-textarea > .scroll-content {
+  overflow: hidden !important;
+}
+.scroll-textarea > .scroll-content > textarea {
+  border: none !important;
+  box-sizing: border-box;
+  height: 100% !important;
+  margin: 0;
+  max-height: none !important;
+  max-width: none !important;
+  overflow: scroll !important;
+  outline: none;
+  padding: 2px;
+  position: relative !important;
+  top: 0;
+  width: 100% !important;
+}
+.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
+  height: 0;
+  width: 0;
+}
+
+/*************** SIMPLE INNER SCROLLBAR ***************/
+.scrollbar-inner > .scroll-element,
+.scrollbar-inner > .scroll-element div {
+  border: none;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  z-index: 10;
+}
+
+.scrollbar-inner > .scroll-element div {
+  display: block;
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 100%;
+}
+
+.scrollbar-inner > .scroll-element.scroll-x {
+  bottom: 2px;
+  height: 8px;
+  left: 0;
+  width: 100%;
+}
+
+.scrollbar-inner > .scroll-element.scroll-y {
+  height: 100%;
+  right: 2px;
+  top: 0;
+  width: 8px;
+}
+
+.scrollbar-inner > .scroll-element .scroll-element_outer {
+  overflow: hidden;
+}
+
+.scrollbar-inner > .scroll-element .scroll-element_outer,
+.scrollbar-inner > .scroll-element .scroll-element_track,
+.scrollbar-inner > .scroll-element .scroll-bar {
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  border-radius: 8px;
+}
+
+.scrollbar-inner > .scroll-element .scroll-element_track,
+.scrollbar-inner > .scroll-element .scroll-bar {
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
+  filter: alpha(opacity=40);
+  opacity: 0.4;
+}
+
+.scrollbar-inner > .scroll-element .scroll-element_track {
+  background-color: #e0e0e0;
+}
+
+.scrollbar-inner > .scroll-element .scroll-bar {
+  background-color: #c2c2c2;
+}
+
+.scrollbar-inner > .scroll-element:hover .scroll-bar {
+  background-color: #919191;
+}
+
+.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar {
+  background-color: #919191;
+}
+
+/* update scrollbar offset if both scrolls are visible */
+.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {
+  left: -12px;
+}
+
+.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {
+  top: -12px;
+}
+
+.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
+  left: -12px;
+}
+
+.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
+  top: -12px;
+}
+
+/*************** SIMPLE OUTER SCROLLBAR ***************/
+.scrollbar-outer > .scroll-element,
+.scrollbar-outer > .scroll-element div {
+  border: none;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  z-index: 10;
+}
+
+.scrollbar-outer > .scroll-element {
+  background-color: #ffffff;
+}
+
+.scrollbar-outer > .scroll-element div {
+  display: block;
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 100%;
+}
+
+.scrollbar-outer > .scroll-element.scroll-x {
+  bottom: 0;
+  height: 12px;
+  left: 0;
+  width: 100%;
+}
+
+.scrollbar-outer > .scroll-element.scroll-y {
+  height: 100%;
+  right: 0;
+  top: 0;
+  width: 12px;
+}
+
+.scrollbar-outer > .scroll-element.scroll-x .scroll-element_outer {
+  height: 8px;
+  top: 2px;
+}
+
+.scrollbar-outer > .scroll-element.scroll-y .scroll-element_outer {
+  left: 2px;
+  width: 8px;
+}
+
+.scrollbar-outer > .scroll-element .scroll-element_outer {
+  overflow: hidden;
+}
+
+.scrollbar-outer > .scroll-element .scroll-element_track {
+  background-color: #eeeeee;
+}
+
+.scrollbar-outer > .scroll-element .scroll-element_outer,
+.scrollbar-outer > .scroll-element .scroll-element_track,
+.scrollbar-outer > .scroll-element .scroll-bar {
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  border-radius: 8px;
+}
+
+.scrollbar-outer > .scroll-element .scroll-bar {
+  background-color: #d9d9d9;
+}
+
+.scrollbar-outer > .scroll-element .scroll-bar:hover {
+  background-color: #c2c2c2;
+}
+
+.scrollbar-outer > .scroll-element.scroll-draggable .scroll-bar {
+  background-color: #919191;
+}
+
+/* scrollbar height/width & offset from container borders */
+.scrollbar-outer > .scroll-content.scroll-scrolly_visible {
+  left: -12px;
+  margin-left: 12px;
+}
+
+.scrollbar-outer > .scroll-content.scroll-scrollx_visible {
+  top: -12px;
+  margin-top: 12px;
+}
+
+.scrollbar-outer > .scroll-element.scroll-x .scroll-bar {
+  min-width: 10px;
+}
+
+.scrollbar-outer > .scroll-element.scroll-y .scroll-bar {
+  min-height: 10px;
+}
+
+/* update scrollbar offset if both scrolls are visible */
+.scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {
+  left: -14px;
+}
+
+.scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {
+  top: -14px;
+}
+
+.scrollbar-outer > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
+  left: -14px;
+}
+
+.scrollbar-outer > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
+  top: -14px;
+}
+
+/*************** SCROLLBAR MAC OS X ***************/
+.scrollbar-macosx > .scroll-element,
+.scrollbar-macosx > .scroll-element div {
+  background: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  z-index: 10;
+}
+
+.scrollbar-macosx > .scroll-element div {
+  display: block;
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 100%;
+}
+
+.scrollbar-macosx > .scroll-element .scroll-element_track {
+  display: none;
+}
+
+.scrollbar-macosx > .scroll-element .scroll-bar {
+  background-color: #6C6E71;
+  display: block;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  filter: alpha(opacity=0);
+  opacity: 0;
+  -webkit-border-radius: 7px;
+  -moz-border-radius: 7px;
+  border-radius: 7px;
+  -webkit-transition: opacity 0.2s linear;
+  -moz-transition: opacity 0.2s linear;
+  -o-transition: opacity 0.2s linear;
+  -ms-transition: opacity 0.2s linear;
+  transition: opacity 0.2s linear;
+}
+
+.scrollbar-macosx:hover > .scroll-element .scroll-bar,
+.scrollbar-macosx > .scroll-element.scroll-draggable .scroll-bar {
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+  filter: alpha(opacity=70);
+  opacity: 0.7;
+}
+
+.scrollbar-macosx > .scroll-element.scroll-x {
+  bottom: 0px;
+  height: 0px;
+  left: 0;
+  min-width: 100%;
+  overflow: visible;
+  width: 100%;
+}
+
+.scrollbar-macosx > .scroll-element.scroll-y {
+  height: 100%;
+  min-height: 100%;
+  right: 0px;
+  top: 0;
+  width: 0px;
+}
+
+/* scrollbar height/width & offset from container borders */
+.scrollbar-macosx > .scroll-element.scroll-x .scroll-bar {
+  height: 7px;
+  min-width: 10px;
+  top: -9px;
+}
+
+.scrollbar-macosx > .scroll-element.scroll-y .scroll-bar {
+  left: -9px;
+  min-height: 10px;
+  width: 7px;
+}
+
+.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_outer {
+  left: 2px;
+}
+
+.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_size {
+  left: -4px;
+}
+
+.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_outer {
+  top: 2px;
+}
+
+.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_size {
+  top: -4px;
+}
+
+/* update scrollbar offset if both scrolls are visible */
+.scrollbar-macosx > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
+  left: -11px;
+}
+
+.scrollbar-macosx > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
+  top: -11px;
+}
+
+/*************** SCROLLBAR LIGHT ***************/
+.scrollbar-light > .scroll-element,
+.scrollbar-light > .scroll-element div {
+  border: none;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  z-index: 10;
+}
+
+.scrollbar-light > .scroll-element {
+  background-color: #ffffff;
+}
+
+.scrollbar-light > .scroll-element div {
+  display: block;
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 100%;
+}
+
+.scrollbar-light > .scroll-element .scroll-element_outer {
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+}
+
+.scrollbar-light > .scroll-element .scroll-element_size {
+  background: #dbdbdb;
+  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOGU4ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+");
+  background: -moz-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
+  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #dbdbdb), color-stop(100%, #e8e8e8));
+  background: -webkit-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
+  background: -o-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
+  background: -ms-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
+  background: linear-gradient(to right, #dbdbdb 0%, #e8e8e8 100%);
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+}
+
+.scrollbar-light > .scroll-element.scroll-x {
+  bottom: 0;
+  height: 17px;
+  left: 0;
+  min-width: 100%;
+  width: 100%;
+}
+
+.scrollbar-light > .scroll-element.scroll-y {
+  height: 100%;
+  min-height: 100%;
+  right: 0;
+  top: 0;
+  width: 17px;
+}
+
+.scrollbar-light > .scroll-element .scroll-bar {
+  background: #fefefe;
+  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmVmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+");
+  background: -moz-linear-gradient(left, #fefefe 0%, #f5f5f5 100%);
+  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #fefefe), color-stop(100%, #f5f5f5));
+  background: -webkit-linear-gradient(left, #fefefe 0%, #f5f5f5 100%);
+  background: -o-linear-gradient(left, #fefefe 0%, #f5f5f5 100%);
+  background: -ms-linear-gradient(left, #fefefe 0%, #f5f5f5 100%);
+  background: linear-gradient(to right, #fefefe 0%, #f5f5f5 100%);
+  border: 1px solid #dbdbdb;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+}
+
+/* scrollbar height/width & offset from container borders */
+.scrollbar-light > .scroll-content.scroll-scrolly_visible {
+  left: -17px;
+  margin-left: 17px;
+}
+
+.scrollbar-light > .scroll-content.scroll-scrollx_visible {
+  top: -17px;
+  margin-top: 17px;
+}
+
+.scrollbar-light > .scroll-element.scroll-x .scroll-bar {
+  height: 10px;
+  min-width: 10px;
+  top: 0px;
+}
+
+.scrollbar-light > .scroll-element.scroll-y .scroll-bar {
+  left: 0px;
+  min-height: 10px;
+  width: 10px;
+}
+
+.scrollbar-light > .scroll-element.scroll-x .scroll-element_outer {
+  height: 12px;
+  left: 2px;
+  top: 2px;
+}
+
+.scrollbar-light > .scroll-element.scroll-x .scroll-element_size {
+  left: -4px;
+}
+
+.scrollbar-light > .scroll-element.scroll-y .scroll-element_outer {
+  left: 2px;
+  top: 2px;
+  width: 12px;
+}
+
+.scrollbar-light > .scroll-element.scroll-y .scroll-element_size {
+  top: -4px;
+}
+
+/* update scrollbar offset if both scrolls are visible */
+.scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
+  left: -19px;
+}
+
+.scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
+  top: -19px;
+}
+
+.scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {
+  left: -19px;
+}
+
+.scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {
+  top: -19px;
+}
+
+/*************** SCROLLBAR RAIL ***************/
+.scrollbar-rail > .scroll-element,
+.scrollbar-rail > .scroll-element div {
+  border: none;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  z-index: 10;
+}
+
+.scrollbar-rail > .scroll-element {
+  background-color: #ffffff;
+}
+
+.scrollbar-rail > .scroll-element div {
+  display: block;
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 100%;
+}
+
+.scrollbar-rail > .scroll-element .scroll-element_size {
+  background-color: #999;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-element_size {
+  background-color: #666;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.scrollbar-rail > .scroll-element.scroll-x {
+  bottom: 0;
+  height: 12px;
+  left: 0;
+  min-width: 100%;
+  padding: 3px 0 2px;
+  width: 100%;
+}
+
+.scrollbar-rail > .scroll-element.scroll-y {
+  height: 100%;
+  min-height: 100%;
+  padding: 0 2px 0 3px;
+  right: 0;
+  top: 0;
+  width: 12px;
+}
+
+.scrollbar-rail > .scroll-element .scroll-bar {
+  background-color: #d0b9a0;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+.scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-bar {
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
+}
+
+/* scrollbar height/width & offset from container borders */
+.scrollbar-rail > .scroll-content.scroll-scrolly_visible {
+  left: -17px;
+  margin-left: 17px;
+}
+
+.scrollbar-rail > .scroll-content.scroll-scrollx_visible {
+  margin-top: 17px;
+  top: -17px;
+}
+
+.scrollbar-rail > .scroll-element.scroll-x .scroll-bar {
+  height: 10px;
+  min-width: 10px;
+  top: 1px;
+}
+
+.scrollbar-rail > .scroll-element.scroll-y .scroll-bar {
+  left: 1px;
+  min-height: 10px;
+  width: 10px;
+}
+
+.scrollbar-rail > .scroll-element.scroll-x .scroll-element_outer {
+  height: 15px;
+  left: 5px;
+}
+
+.scrollbar-rail > .scroll-element.scroll-x .scroll-element_size {
+  height: 2px;
+  left: -10px;
+  top: 5px;
+}
+
+.scrollbar-rail > .scroll-element.scroll-y .scroll-element_outer {
+  top: 5px;
+  width: 15px;
+}
+
+.scrollbar-rail > .scroll-element.scroll-y .scroll-element_size {
+  left: 5px;
+  top: -10px;
+  width: 2px;
+}
+
+/* update scrollbar offset if both scrolls are visible */
+.scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
+  left: -25px;
+}
+
+.scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
+  top: -25px;
+}
+
+.scrollbar-rail > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {
+  left: -25px;
+}
+
+.scrollbar-rail > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {
+  top: -25px;
+}
+
+/*************** SCROLLBAR DYNAMIC ***************/
+.scrollbar-dynamic > .scroll-element,
+.scrollbar-dynamic > .scroll-element div {
+  background: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  z-index: 10;
+}
+
+.scrollbar-dynamic > .scroll-element div {
+  display: block;
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 100%;
+}
+
+.scrollbar-dynamic > .scroll-element.scroll-x {
+  bottom: 2px;
+  height: 7px;
+  left: 0;
+  min-width: 100%;
+  width: 100%;
+}
+
+.scrollbar-dynamic > .scroll-element.scroll-y {
+  height: 100%;
+  min-height: 100%;
+  right: 2px;
+  top: 0;
+  width: 7px;
+}
+
+.scrollbar-dynamic > .scroll-element .scroll-element_outer {
+  opacity: 0.3;
+  -webkit-border-radius: 12px;
+  -moz-border-radius: 12px;
+  border-radius: 12px;
+}
+
+.scrollbar-dynamic > .scroll-element .scroll-element_size {
+  background-color: #cccccc;
+  opacity: 0;
+  -webkit-border-radius: 12px;
+  -moz-border-radius: 12px;
+  border-radius: 12px;
+  -webkit-transition: opacity 0.2s;
+  -moz-transition: opacity 0.2s;
+  -o-transition: opacity 0.2s;
+  -ms-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+
+.scrollbar-dynamic > .scroll-element .scroll-bar {
+  background-color: #6c6e71;
+  -webkit-border-radius: 7px;
+  -moz-border-radius: 7px;
+  border-radius: 7px;
+}
+
+/* scrollbar height/width & offset from container borders */
+.scrollbar-dynamic > .scroll-element.scroll-x .scroll-bar {
+  bottom: 0;
+  height: 7px;
+  min-width: 24px;
+  top: auto;
+}
+
+.scrollbar-dynamic > .scroll-element.scroll-y .scroll-bar {
+  left: auto;
+  min-height: 24px;
+  right: 0;
+  width: 7px;
+}
+
+.scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_outer {
+  bottom: 0;
+  top: auto;
+  left: 2px;
+  -webkit-transition: height 0.2s;
+  -moz-transition: height 0.2s;
+  -o-transition: height 0.2s;
+  -ms-transition: height 0.2s;
+  transition: height 0.2s;
+}
+
+.scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_outer {
+  left: auto;
+  right: 0;
+  top: 2px;
+  -webkit-transition: width 0.2s;
+  -moz-transition: width 0.2s;
+  -o-transition: width 0.2s;
+  -ms-transition: width 0.2s;
+  transition: width 0.2s;
+}
+
+.scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_size {
+  left: -4px;
+}
+
+.scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_size {
+  top: -4px;
+}
+
+/* update scrollbar offset if both scrolls are visible */
+.scrollbar-dynamic > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
+  left: -11px;
+}
+
+.scrollbar-dynamic > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
+  top: -11px;
+}
+
+/* hover & drag */
+.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer,
+.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer {
+  overflow: hidden;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+  filter: alpha(opacity=70);
+  opacity: 0.7;
+}
+
+.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-element_size,
+.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-element_size {
+  opacity: 1;
+}
+
+.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-bar,
+.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-bar {
+  height: 100%;
+  width: 100%;
+  -webkit-border-radius: 12px;
+  -moz-border-radius: 12px;
+  border-radius: 12px;
+}
+
+.scrollbar-dynamic > .scroll-element.scroll-x:hover .scroll-element_outer,
+.scrollbar-dynamic > .scroll-element.scroll-x.scroll-draggable .scroll-element_outer {
+  height: 20px;
+  min-height: 7px;
+}
+
+.scrollbar-dynamic > .scroll-element.scroll-y:hover .scroll-element_outer,
+.scrollbar-dynamic > .scroll-element.scroll-y.scroll-draggable .scroll-element_outer {
+  min-width: 7px;
+  width: 20px;
+}
+
+/*************** SCROLLBAR GOOGLE CHROME ***************/
+.scrollbar-chrome > .scroll-element,
+.scrollbar-chrome > .scroll-element div {
+  border: none;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  z-index: 10;
+}
+
+.scrollbar-chrome > .scroll-element {
+  background-color: #ffffff;
+}
+
+.scrollbar-chrome > .scroll-element div {
+  display: block;
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 100%;
+}
+
+.scrollbar-chrome > .scroll-element .scroll-element_track {
+  background: #f1f1f1;
+  border: 1px solid #dbdbdb;
+}
+
+.scrollbar-chrome > .scroll-element.scroll-x {
+  bottom: 0;
+  height: 16px;
+  left: 0;
+  min-width: 100%;
+  width: 100%;
+}
+
+.scrollbar-chrome > .scroll-element.scroll-y {
+  height: 100%;
+  min-height: 100%;
+  right: 0;
+  top: 0;
+  width: 16px;
+}
+
+.scrollbar-chrome > .scroll-element .scroll-bar {
+  background-color: #d9d9d9;
+  border: 1px solid #bdbdbd;
+  cursor: default;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+}
+
+.scrollbar-chrome > .scroll-element .scroll-bar:hover {
+  background-color: #c2c2c2;
+  border-color: #a9a9a9;
+}
+
+.scrollbar-chrome > .scroll-element.scroll-draggable .scroll-bar {
+  background-color: #919191;
+  border-color: #7e7e7e;
+}
+
+/* scrollbar height/width & offset from container borders */
+.scrollbar-chrome > .scroll-content.scroll-scrolly_visible {
+  left: -16px;
+  margin-left: 16px;
+}
+
+.scrollbar-chrome > .scroll-content.scroll-scrollx_visible {
+  top: -16px;
+  margin-top: 16px;
+}
+
+.scrollbar-chrome > .scroll-element.scroll-x .scroll-bar {
+  height: 8px;
+  min-width: 10px;
+  top: 3px;
+}
+
+.scrollbar-chrome > .scroll-element.scroll-y .scroll-bar {
+  left: 3px;
+  min-height: 10px;
+  width: 8px;
+}
+
+.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_outer {
+  border-left: 1px solid #dbdbdb;
+}
+
+.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_track {
+  height: 14px;
+  left: -3px;
+}
+
+.scrollbar-chrome > .scroll-element.scroll-x .scroll-element_size {
+  height: 14px;
+  left: -4px;
+}
+
+.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_outer {
+  border-top: 1px solid #dbdbdb;
+}
+
+.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_track {
+  top: -3px;
+  width: 14px;
+}
+
+.scrollbar-chrome > .scroll-element.scroll-y .scroll-element_size {
+  top: -4px;
+  width: 14px;
+}
+
+/* update scrollbar offset if both scrolls are visible */
+.scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
+  left: -19px;
+}
+
+.scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
+  top: -19px;
+}
+
+.scrollbar-chrome > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {
+  left: -19px;
+}
+
+.scrollbar-chrome > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {
+  top: -19px;
+}
diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css
index 4fe763c5..a0857413 100644
--- a/data/interfaces/default/css/plexpy.css
+++ b/data/interfaces/default/css/plexpy.css
@@ -628,313 +628,230 @@ a .users-poster-face:hover {
 #dashboard-no-activity {
     margin-bottom: 20px;
 }
-.dashboard-instance {
+.dashboard-activity-instance {
     float: left;
     position: relative;
-    height: 260px;
-    width: 350px;
+    height: 290px;
+    min-width: 350px;
+    max-width: 500px;
     margin-right: 20px;
     margin-bottom: 20px;
 }
-.dashboard-instance.hover .dashboard-activity-poster {
-    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 2px #e9a049;
-    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 2px #e9a049;
-    box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 2px #e9a049;
-}
-.dashboard-instance.hover .dashboard-activity-poster-info-bar,
-.dashboard-instance.hover .dashboard-activity-terminate-bar,
-.dashboard-instance.hover .dashboard-activity-terminate-session {
-    opacity: 1;
-}
-.dashboard-instance.hover .dashboard-activity-progress-bar { 
-	height: 14px; 
-	transform-origin: top;
-    transition: all .2s ease;
-	border-radius: 0px 0px 3px 3px;
-}
-.dashboard-instance.hover .bar { 
-	height: 14px; 
-    max-width: 100%;
-	transform-origin: top;
-    transition: all .2s ease;
-	border-radius: 0px 0px 3px 3px;
-    color: rgba(255, 255, 255, 1);
-    background-image: -webkit-linear-gradient(left,rgba(0,0,0,0.25),0%,rgba(0,0,0,0),50px);
-    background-image: -moz-linear-gradient(left,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50px);
-    background-image: linear-gradient(to left,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50px);
-}
-.dashboard-instance.hover .bufferbar { 
-	height: 14px; 
-    max-width: 100%;
-	transform-origin: top;
-    transition: all .2s ease;
-	border-radius: 0px 0px 3px 3px;
-    color: rgba(255, 255, 255, 1);
-    background-image: -webkit-linear-gradient(left,rgba(0,0,0,0.25),0%,rgba(0,0,0,0),50px);
-    background-image: -moz-linear-gradient(left,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50px);
-    background-image: linear-gradient(to left,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50px);
-}
-.dashboard-instance.hover .dashboard-activity-metadata-wrapper { 
-	margin-top: 11px;
-	transform-origin: top;
-    transition: all .2s ease;
-}
-.dashboard-activity-poster {
-    height: 200px;
+.dashboard-activity-container {
+    height: 240px;
     width: 100%;
     position: relative;
-    overflow: hidden;
+    margin-bottom: 5px;
+    padding: 0px;
+    -webkit-transition: all .2s ease-in-out;
+    transition: all .2s ease-in-out;
 }
-.dashboard-activity-poster-face {
+.dashboard-activity-background {
+    background-color: #282828;
     background-position: center;
     background-size: cover;
-    height: 100%;
+    height: 235px;
     width: 100%;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-    box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-    z-index: -3;
-}
-.dashboard-activity-cover-face-bg {
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-    box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-    -webkit-filter: blur(5px);
-    -moz-filter: blur(5px);
-    filter: blur(5px);
-    opacity: 0.75;
-    z-index: -3;
-}
-.dashboard-activity-cover-face {
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-    height: 100%;
-    width: 200px;
-    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-    box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-    position: absolute;
-    top: 0;
-    left: calc(50% - 100px);
-    z-index: -3;
-}
-.dashboard-activity-clip-face-bg {
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-    box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-    -webkit-filter: blur(5px);
-    -moz-filter: blur(5px);
-    filter: blur(5px);
-    opacity: 0.75;
-    z-index: -3;
-}
-.dashboard-activity-clip-face {
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-    height: 100%;
-    width: 130px;
-    position: relative;
-    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-    box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
-    position: absolute;
-    top: 0;
-    left: calc(50% - 65px);
-    z-index: -3;
-}
-.dashboard-activity-info-details-overlay {
-    text-align: left;
-    background-image: -webkit-gradient(linear,left 0,left 100%,from(rgba(0,0,0,.75)),to(rgba(0,0,0,0)));
-    background-image: -webkit-linear-gradient(top,rgba(0,0,0,.75),0,rgba(0,0,0,0),100%);
-    background-image: -moz-linear-gradient(top,rgba(0,0,0,.75) 0,rgba(0,0,0,0) 100%);
-    background-image: linear-gradient(to bottom,rgba(0,0,0,.75) 0,rgba(0,0,0,0) 100%);
-    background-repeat: repeat-x;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    display: none;
+    opacity: 0.40;
+    -webkit-filter: blur(3px);
+    -moz-filter: blur(3px);
+    filter: blur(3px);
+    -webkit-transition: background 1s linear;
+    transition: background 1s linear;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
     z-index: -1;
 }
-.dashboard-activity-terminate-bar {
-    position:absolute;
+.dashboard-activity-background-overlay {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+    height: 235px;
     width: 100%;
-    height: 100%;
-    background-image: -webkit-gradient(linear,left 60%,left 0%,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.4)));
-    background-image: -webkit-linear-gradient(bottom,rgba(0,0,0,0),40%,rgba(0,0,0,0.4),100%);
-    background-image: -moz-linear-gradient(bottom,rgba(0,0,0,0) 40%,rgba(0,0,0,0.4) 100%);
-    background-image: linear-gradient(to top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.4) 100%);
-    opacity: 0;
-    -webkit-transition: all .2s;
-    transition: all .2s;
-    z-index: -2;
-}
-.dashboard-activity-terminate-session {
-    width: 50px;
-    height: 50px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    font-size: 30px;
-    color: #eee;
-    text-align: center;
-    padding-top: 5px;
-    opacity: 0;
-    -webkit-transition: all .2s;
-    transition: all .2s;
-    z-index: 1;
-}
-.dashboard-activity-terminate-session:hover {
-    color: #e9a049;
-}
-.dashboard-activity-button-info {
-    width: 50px;
-    height: 50px;
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    z-index: 1;
-}
-.btn-activity-info,
-.btn-activity-info:focus {
-    color: #999;
-    background-color: rgba(0,0,0,0.5);
-}
-.btn-activity-info:hover {
-    color: #fff;
-}
-.dashboard-activity-info-details-content {
-    height: 200px;
-    width: 100%;
-    line-height: 25px;
-    text-overflow: ellipsis;
+    padding: 5px;
     overflow: hidden;
-    white-space: nowrap;
-    color: #aaa;
-    padding: 10px;
+    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1);
+    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    box-shadow: 0 0 4px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1);
 }
-.dashboard-activity-info-details-content strong {
-    color: #fff;
-    font-weight: normal;
-}
-.dashboard-activity-info-details-transcode-state {
-    line-height: 22px;
-}
-.dashboard-activity-info-platform {
-    width: 100%;
-    height: 50px;
-    margin-bottom: 5px;
-}
-.dashboard-activity-info-platform-box {
-    float: left;
+.dashboard-activity-poster {
     background-position: center;
     background-size: cover;
+    height: 225px;
+    width: 150px;
+    margin-right: 5px;
+    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1);
+    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    box-shadow: 0 0 4px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1);
+    -webkit-flex-shrink: 0;
+    flex-shrink: 0;
+    -webkit-transition: background 1s linear;
+    transition: background 1s linear;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    z-index: 1;
+}
+.dashboard-activity-cover {
+    background-position: center;
+    background-size: cover;
+    height: 150px;
+    width: 150px;
+    margin-top: 37.5px;
+    margin-right: 5px;
+    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1);
+    -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1);
+    box-shadow: 0 0 4px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1);
+    -webkit-flex-shrink: 0;
+    flex-shrink: 0;
+    -webkit-transition: background 1s linear;
+    transition: background 1s linear;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    z-index: 1;
+}
+.dashboard-activity-info-icon {
     width: 50px;
     height: 50px;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
-    margin-right: 10px;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    overflow: hidden;
+    z-index: 2;
 }
-.dashboard-activity-poster-info-bar {
-    position:absolute;
-    width: 100%;
-    height: 100%;
-    background-image: -webkit-gradient(linear,left 30%,left 100%,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.75)));
-    background-image: -webkit-linear-gradient(top,rgba(0,0,0,0),30%,rgba(0,0,0,0.75),100%);
-    background-image: -moz-linear-gradient(top,rgba(0,0,0,0) 30%,rgba(0,0,0,0.75) 100%);
-    background-image: linear-gradient(to bottom,rgba(0,0,0,0) 30%,rgba(0,0,0,0.75) 100%);
-    opacity: 0;
+.dashboard-activity-info-platform {
+    background-position: center;
+    background-size: cover;
+    width: 50px;
+    height: 50px;
+    opacity: 1;
     -webkit-transition: all .2s;
     transition: all .2s;
-    z-index: -2;
 }
-.dashboard-activity-poster-info-text {
+.dashboard-activity-terminate-session {
+    width: 100%;
+    height: 100%;
+    padding-top: 3px;
+    font-size: 30px;
+    color: #eee;
+    text-align: center;
+    opacity: 0;
     position: absolute;
-    bottom: 0;
+    top: 0;
     left: 0;
-    float: left;
-    text-align: left;
-    padding: 5px 8px;
-    font-size: 12px;
-    color: #eee;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    width: 150px;
+    -webkit-transition: all .2s;
+    transition: all .2s;
 }
-.dashboard-activity-poster-info-ip-address {
-    position: absolute;
-    bottom: 5px;
+.dashboard-activity-info-icon:hover .dashboard-activity-info-platform {
+    opacity: 0;
+}
+.dashboard-activity-info-icon:hover .dashboard-activity-terminate-session {
+    background-color: rgba(0, 0, 0, 0.25);
+    opacity: 1;
+    cursor: pointer;
+}
+.dashboard-activity-terminate-session .btn-terminate-session:hover {
+    color: #e9a049;
+}
+.dashboard-activity-info-scroller {
+    height: 225px;
+    width: 335px;
+    -webkit-flex-grow: 0;
+    flex-grow: 1;
+    z-index: 1;
+}
+.dashboard-activity-info-scroller.scrollbar-macosx > .scroll-element.scroll-y {
     left: 10px;
-    text-align: left;
-    font-size: 12px;
-    color: #eee;
 }
-.dashboard-activity-poster-info-time {
+.dashboard-activity-info-scroller.scrollbar-macosx > .scroll-element .scroll-bar {
+    background-color: #999;
+}
+.dashboard-activity-info {
+    width: 100%;
+    font-size: 12px;
+    padding: 5px 5px 5px 15px;
+    position: relative;
+}
+.dashboard-activity-info-list {
+    margin-bottom: 20px;
+    padding-right: 0;
+}
+.dashboard-activity-info-list:last-of-type {
+    margin-bottom: 0;
+}
+.dashboard-activity-info-item {
+    width: 100%;
+    margin-bottom: 5px;
+}
+.dashboard-activity-info-item:last-of-type {
+    margin-bottom: 0;
+}
+.dashboard-activity-info-item .sub-heading {
+    height: 100%;
+    width: 60px;
+    color: #aaa;
+    font-size: 10px;
+    text-align: right;
+    text-transform: uppercase;
+    line-height: 14px;
+    vertical-align: bottom;
+    float: left;
+}
+.dashboard-activity-info-item .sub-value {
+    margin-left: 70px;
+    text-align: left;
+    line-height: 14px;
+    vertical-align: bottom;
+}
+.dashboard-activity-info-time {
     position: absolute;
-    bottom: 5px;
+    top: 200px;
     right: 10px;
     text-align: right;
-    font-size: 12px;
-    color: #eee;
+    font-size: 10px;
+    z-index: 2;
 }
 .dashboard-activity-progress {
     width: 100%;
     height: 5px;
-    margin-bottom: 5px;
+	border-radius: 0px 0px 3px 3px;
+    -webkit-transition: all .2s ease-in-out;
+    transition: all .2s ease-in-out;
+	transform-origin: top;
+    position: absolute;
+    top: 235px;
 }
 .dashboard-activity-progress-bar {
-    overflow: hidden;
-    height: 5px;
     background-color: #111;
+    height: 100%;
     width: 100%;
-    z-index: -1;
-    -webkit-transition: all 0s;
-    transition: all 0s;
+    overflow: hidden;
 }
-.dashboard-activity-progress .bufferbar {
+.dashboard-activity-progress .buffer-bar {
     padding-right: 3px;
     font-size: x-small;
     text-align: right;
+    line-height: 14px;
     color: rgba(255, 255, 255, 0);
     background-color: #444;
     position: absolute;
-    height: 6px;
+    height: 100%;
     max-width: 100%;
     overflow: hidden;
 }
-.dashboard-activity-progress .bar {
+.dashboard-activity-progress .progress-bar {
     padding-right: 3px;
     font-size: x-small;
     text-align: right;
+    line-height: 14px;
     color: rgba(255, 255, 255, 0);
     background-color: #faa732;
     background-image: -moz-linear-gradient(top, #fbb450, #f89406);
@@ -945,16 +862,40 @@ a .users-poster-face:hover {
     background-repeat: repeat-x;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
     position: absolute;
-    height: 6px;
+    height: 100%;
     max-width: 100%;
     overflow: hidden;
 }
+.dashboard-activity-container:hover {
+    height: 249px;
+}
+.dashboard-activity-container:hover .dashboard-activity-progress {
+	height: 14px; 
+}
+.dashboard-activity-container:hover .progress-bar { 
+    color: rgba(255, 255, 255, 1);
+    background-image: -webkit-linear-gradient(left,rgba(0,0,0,0.25),0%,rgba(0,0,0,0),50px);
+    background-image: -moz-linear-gradient(left,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50px);
+    background-image: linear-gradient(to left,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50px);
+}
+.dashboard-activity-container:hover .buffer-bar { 
+    color: rgba(255, 255, 255, 1);
+    background-image: -webkit-linear-gradient(left,rgba(0,0,0,0.25),0%,rgba(0,0,0,0),50px);
+    background-image: -moz-linear-gradient(left,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50px);
+    background-image: linear-gradient(to left,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50px);
+}
+a:hover .dashboard-activity-poster,
+a:hover .dashboard-activity-cover {
+    -webkit-box-shadow: inset 0 0 0 2px #e9a049;
+    -moz-box-shadow: inset 0 0 0 2px #e9a049;
+    box-shadow: inset 0 0 0 2px #e9a049;
+}
 .dashboard-activity-metadata-wrapper {
     position: relative;
     width: 100%;
     height: 50px;
     font-size: 13px;
-    padding: 0 3px;
+    padding: 0px 3px 0 3px;
 }
 .dashboard-activity-metadata-title {
     text-overflow: ellipsis;
@@ -964,7 +905,7 @@ a .users-poster-face:hover {
     font-weight: bold;
     line-height: 25px;
     color: #fff;
-    max-width: 300px;
+    max-width: 100%;
 }
 .dashboard-activity-metadata-subtitle {
     text-overflow: ellipsis;
@@ -974,7 +915,7 @@ a .users-poster-face:hover {
     font-weight: bold;
     line-height: 25px;
     color: #999;
-    max-width: 172px;
+    max-width: 75%;
     float: left;
 }
 .dashboard-activity-metadata-user {
@@ -986,7 +927,7 @@ a .users-poster-face:hover {
     line-height: 25px;
     color: #999;
     text-align: right;
-    max-width: 122px;
+    max-width: 25%;
     float: right;
 }
 .dashboard-activity-metadata-user-thumb {
@@ -1021,12 +962,6 @@ a .dashboard-activity-metadata-user-thumb:hover {
 .dashboard-activity-metadata-title a:hover {
     color: #e9a049;
 }
-.dashboard-activity-metadata-progress-wrapper {
-    margin-bottom: 20px;
-    font-size: 12px;
-    font-weight: bold;
-    color: #e9a049;
-}
 #dashboard-no-recently-added {
     margin-bottom: 20px;
 }
@@ -2429,8 +2364,8 @@ a .home-platforms-list-cover-face:hover
     padding: 15px 15px 15px 15px;
     color: #999;
     -webkit-transition: all 0.3s ease;
-      -o-transition: all 0.3s ease;
-      transition: all 0.3s ease;
+    -o-transition: all 0.3s ease;
+    transition: all 0.3s ease;
 }
 .nav-settings > li > a:hover,
 .nav-settings > li > a:focus {
diff --git a/data/interfaces/default/current_activity_instance.html b/data/interfaces/default/current_activity_instance.html
index a7f4e184..5285011e 100644
--- a/data/interfaces/default/current_activity_instance.html
+++ b/data/interfaces/default/current_activity_instance.html
@@ -65,52 +65,44 @@ DOCUMENTATION :: END
     from plexpy import helpers
     import plexpy
 %>
-<div class="dashboard-instance" id="instance-${data['session_key']}" data-key="${data['session_key']}" data-id="${data['session_id']}">
-    <div class="dashboard-hover-container">
-        % if (data['media_type'] == 'movie' or data['media_type'] == 'episode' or data['media_type'] == 'track') and data['rating_key']:
-        <a href="info?rating_key=${data['rating_key']}">
-        % else:
-        <a href="#">
-        % endif
-            <div class="dashboard-activity-poster" id="poster-${data['session_key']}">
-                % if not data['art'].startswith('interfaces') or not data['thumb'].startswith('interfaces'):
-                    % if (data['media_type'] == 'movie' and not plexpy.CONFIG.PMS_USE_BIF) or (plexpy.CONFIG.PMS_USE_BIF and not data['view_offset']):
-                    <div id="bif-${data['session_key']}" class="dashboard-activity-poster-face" style="background-image: url(pms_image_proxy?img=${data['art']}&width=500&height=280&fallback=art&refresh=true);"></div>
-                    % elif (data['media_type'] == 'episode' and not plexpy.CONFIG.PMS_USE_BIF) or (plexpy.CONFIG.PMS_USE_BIF and not data['view_offset']):
-                    <div id="bif-${data['session_key']}" class="dashboard-activity-poster-face" style="background-image: url(pms_image_proxy?img=${data['art']}&width=500&height=280&fallback=art&refresh=true);"></div>
-                    % elif plexpy.CONFIG.PMS_USE_BIF and data['indexes'] == '1':
-                    <div id="bif-${data['session_key']}" class="dashboard-activity-poster-face" data-thumb="${data['bif_thumb']}" style="background-image: url(pms_image_proxy?img=${data['bif_thumb']}&width=500&height=280&fallback=art); display: none;"></div>
-                    % else:
-                        % if data['media_type'] == 'track':
-                        <div class="dashboard-activity-cover-face-bg" style="background-image: url(pms_image_proxy?img=${data['thumb']}&width=300&height=300&fallback=cover&refresh=true);"></div>
-                        <div class="dashboard-activity-cover-face" style="background-image: url(pms_image_proxy?img=${data['thumb']}&width=300&height=300&fallback=cover&refresh=true);"></div>
-                        % elif data['media_type'] == 'clip':
-                            % if data['art'].startswith('http'):
-                            <div class="dashboard-activity-poster-face" style="background-image: url(${data['art']});"></div>
-                            % elif data['thumb'].startswith('http'):
-                            <div class="dashboard-activity-poster-face" style="background-image: url(${data['thumb']});"></div>
-                            % else:
-                                % if data['art']:
-                                <!--Hacky solution to escape the image url until I come up with something better-->
-                                <div class="dashboard-activity-poster-face" style="background-image: url(pms_image_proxy?img=${quote(data['art'])}&width=500&height=280&fallback=art&refresh=true&clip=true);"></div>
-                                % else:
-                                <!--Hacky solution to escape the image url until I come up with something better-->
-                                <div class="dashboard-activity-poster-face" style="background-image: url(pms_image_proxy?img=${quote(data['thumb'])}&width=500&height=280&fallback=art&refresh=true&clip=true);"></div>
-                                % endif
-                            % endif
-                        % elif data['media_type'] == 'photo':
-                        <div id="bif-${data['session_key']}" class="dashboard-activity-poster-face" style="background-image: url(pms_image_proxy?img=${data['thumb']}&width=500&height=500&fallback=cover&refresh=true);"></div>
-                        % else:
-                        <div class="dashboard-activity-cover-face" style="background-image: url(pms_image_proxy?img=${data['thumb']}&width=300&height=300&fallback=cover&refresh=true);"></div>
-                        % endif
-                    % endif
+<div class="dashboard-activity-instance" id="instance-${data['session_key']}" data-key="${data['session_key']}" data-id="${data['session_id']}"
+     data-rating_key="${data['rating_key']}" data-parent_rating_key="${data['parent_rating_key']}" data-grandparent_rating_key="${data['grandparent_rating_key']}">
+    <div class="dashboard-activity-container">
+        <div class="dashboard-activity-background-overlay">
+            % if data['media_type'] != 'clip':
+            <div id="background-${data['session_key']}" class="dashboard-activity-background" style="background-image: url(pms_image_proxy?img=${data['art']}&width=500&height=280&fallback=art&refresh=true);"></div>
+            % else:
+                % if data['art'].startswith('http'):
+                <div id="background-${data['session_key']}" class="dashboard-activity-background" style="background-image: url(${data['art']});"></div>
                 % else:
-                <div class="dashboard-activity-poster-face" style="background-image: url(${data['art']});"></div>
+                <!--Hacky solution to escape the image url until I come up with something better-->
+                <div id="background-${data['session_key']}" class="dashboard-activity-background" style="background-image: url(pms_image_proxy?img=${quote(data['art'])}&width=500&height=280&fallback=art&refresh=true&clip=true);"></div>
                 % endif
-                <div class="dashboard-activity-button-info">
-                    <button type="button" class="btn btn-activity-info btn-lg" data-target="#stream-${data['session_key']}" data-key="${data['session_key']}">
-                        <i class="fa fa-info-circle"></i>
-                    </button>
+            % endif
+            % if data['media_type'] == 'movie':
+            <a id="poster-url-${data['session_key']}" href="info?rating_key=${data['rating_key']}" title="${data['title']}" class="hidden-xs">
+                <div id="poster-${data['session_key']}" class="dashboard-activity-poster" style="background-image: url(pms_image_proxy?img=${data['thumb']}&width=300&height=450&fallback=poster&refresh=true);"></div>
+            </a>
+            % elif data['media_type'] == 'episode':
+            <a id="poster-url-${data['session_key']}" href="info?rating_key=${data['grandparent_rating_key']}" title="${data['grandparent_title']}" class="hidden-xs">
+                <div id="poster-${data['session_key']}" class="dashboard-activity-poster" style="background-image: url(pms_image_proxy?img=${data['grandparent_thumb']}&width=300&height=450&fallback=poste&refresh=truer);"></div>
+            </a>
+            % elif data['media_type'] == 'track':
+            <a id="poster-url-${data['session_key']}" href="info?rating_key=${data['parent_rating_key']}" title="${data['parent_title']}" class="hidden-xs">
+                <div id="poster-${data['session_key']}" class="dashboard-activity-cover" style="background-image: url(pms_image_proxy?img=${data['parent_thumb']}&width=300&height=300&fallback=cover&refresh=true);"></div>
+            </a>
+            % elif data['media_type'] == 'photo':
+            <div id="poster-${data['session_key']}" class="dashboard-activity-poster" style="background-image: url(pms_image_proxy?img=${data['parent_thumb']}&width=300&height=450&fallback=poster&refresh=true);"></div>
+            % elif data['media_type'] == 'clip':
+            <div id="poster-${data['session_key']}" class="dashboard-activity-poster" style="background-image: url(pms_image_proxy?img=${data['thumb']}&width=300&height=450&fallback=poster&refresh=true);"></div>
+            % else:
+            <div id="poster-${data['session_key']}" class="dashboard-activity-poster" style="background-image: url(images/art.png);"></div>
+            % endif
+            <div class="dashboard-activity-info-icon">
+                <div id="platform-${data['session_key']}" class="dashboard-activity-info-platform" title="${data['platform']}">
+                    <script>
+                            $("#platform-${data['session_key']}").css("background-image", "url(" + getPlatformImagePath('${data['platform']}') + ")");
+                    </script>
                 </div>
                 % if _session['user_group'] == 'admin' and plexpy.CONFIG.PMS_PLEXPASS:
                 <div class="dashboard-activity-terminate-session" id="terminate-button-${data['session_key']}" data-key="${data['session_key']}" data-id="${data['session_id']}">
@@ -119,153 +111,199 @@ DOCUMENTATION :: END
                     </span>
                 </div>
                 % endif
-                <div id="stream-${data['session_key']}" class="dashboard-activity-info-details-overlay">
-                    <div class="dashboard-activity-info-details-content">
-                        <div id="platform-${data['session_key']}" title="${data['platform']}">
-                            <script>
-                                $("#platform-${data['session_key']}").html("<div class='dashboard-activity-info-platform-box' style='background-image: url(" + getPlatformImagePath('${data['platform']}') + ");'>");
-                            </script>
-                        </div>
-                        <div class="dashboard-activity-info-platform">
-                            <strong>${data['player']}</strong><br />
-                            <span id="overlay-play-state-${data['session_key']}">
-                                % if data['state'] == 'playing':
-                                State &nbsp;<strong>Playing</strong>
-                                % elif data['state'] == 'paused':
-                                State &nbsp;<strong>Paused</strong>
-                                % elif data['state'] == 'buffering':
-                                State &nbsp;<strong>Buffering</strong>
-                                % endif
-                            </span>
-                        </div>
-                        <div class="dashboard-activity-info-details-transcode-state" id="transcode-state-${data['session_key']}">
-                            % if data['video_decision'] == 'transcode' or data['audio_decision'] == 'transcode':
-                                Stream &nbsp;<strong>Transcode
-                                % if data['transcode_hardware'] == '1':
-                                (HW)
-                                % endif
-                                % if data['transcode_throttled'] == '1':
-                                (Throttled)
+            </div>
+            <div class="dashboard-activity-info-scroller scrollbar-macosx">
+                <div class="dashboard-activity-info">
+                    <ul class="list-unstyled dashboard-activity-info-list">
+                        <li class="dashboard-activity-info-item">
+                            <div class="sub-heading">Platform</div>
+                            <div class="sub-value">${data['platform']}</div>
+                        </li>
+                        <li class="dashboard-activity-info-item">
+                            <div class="sub-heading">Player</div>
+                            <div class="sub-value">${data['player']}</div>
+                        </li>
+                        <li class="dashboard-activity-info-item">
+                            <div class="sub-heading">Quality</div>
+                            <div class="sub-value" id="stream_quality-${data['session_key']}">
+                                % if data['media_type'] != 'photo':
+                                <%
+                                    br = helpers.cast_to_int(data['stream_bitrate']) or "Unknown"
+                                    br_units = "kbps"
+                                    if br != "Unknown" and br > 1000:
+                                        br = round(br / 1000.0, 1)
+                                        br_units = "Mbps"
+                                %>
+                                ${data['quality_profile']} (${br} ${br_units})
                                 % else:
-                                (Speed: ${data['transcode_speed']})
+                                ${data['quality_profile']}
                                 % endif
-                                </strong>
-                            % elif data['video_decision'] == 'copy' or data['audio_decision'] == 'copy':
-                            Stream &nbsp;<strong>Direct Stream</strong>
-                            % else:
-                            Stream &nbsp;<strong>Direct Play</strong>
-                            % endif
-                            <br />
-                            % if data['media_type'] in ('movie', 'episode', 'clip'):
-                                % if data['video_decision'] == 'transcode':
-                                Video &nbsp;<strong>Transcode (${data['video_codec'].upper()} ${plexpy.common.VIDEO_RESOLUTION_OVERRIDES.get(data['video_resolution'], data['video_resolution'])} &rarr; ${data['stream_video_codec'].upper()} ${plexpy.common.VIDEO_RESOLUTION_OVERRIDES.get(data['stream_video_resolution'], data['stream_video_resolution'])})</strong>
-                                % elif data['video_decision'] == 'copy':
-                                Video &nbsp;<strong>Direct Stream (${data['stream_video_codec'].upper()} ${plexpy.common.VIDEO_RESOLUTION_OVERRIDES.get(data['stream_video_resolution'], data['stream_video_resolution'])})</strong>
+                            </div>
+                        </li>
+                        % if data['optimized_version'] == '1':
+                        <li class="dashboard-activity-info-item">
+                            <div class="sub-heading">Optimized</div>
+                            <div class="sub-value" id="optimized_version-${data['session_key']}">
+                                ${data['optimized_version_profile']}
+                            </div>
+                        </li>
+                        % endif
+                    </ul>
+                    <ul class="list-unstyled dashboard-activity-info-list">
+                        <li class="dashboard-activity-info-item">
+                            <div class="sub-heading">Stream</div>
+                            <div class="sub-value" id="transcode_decision-${data['session_key']}">
+                                % if data['transcode_decision'] == 'transcode':
+                                Transcode
+                                    % if data['transcode_throttled'] == '1':
+                                    (Throttled)
+                                    % else:
+                                    (Speed: ${data['transcode_speed']})
+                                    % endif
+                                % elif data['transcode_decision'] == 'copy':
+                                Direct Stream
                                 % else:
-                                Video &nbsp;<strong>Direct Play (${data['video_codec'].upper()} ${plexpy.common.VIDEO_RESOLUTION_OVERRIDES.get(data['video_resolution'], data['video_resolution'])})</strong>
+                                Direct Play
                                 % endif
-                            <br />
-                            % elif data['media_type'] == 'photo':
-                            Video &nbsp;<strong>Direct Play (${data['width']}x${data['height']})</strong>
-                            <br />
-                            % else:
-                            Video &nbsp;<strong>None</strong>
-                            <br />
-                            % endif
-                            % if data['media_type'] in ('movie', 'episode', 'clip', 'track') and data['audio_codec']:
+                            </div>
+                        </li>
+                        <li class="dashboard-activity-info-item">
+                            <div class="sub-heading">Container</div>
+                            <div class="sub-value" id="transcode_container-${data['session_key']}">
+                                % if data['container'] != data['stream_container']:
+                                Transcode (${data['container'].upper()} &rarr; ${data['stream_container'].upper()})
+                                % else:
+                                Direct Play (${data['container'].upper()})
+                                % endif
+                            </div>
+                        </li>
+                        % if data['media_type'] in ('movie', 'episode', 'clip', 'photo'):
+                        <li class="dashboard-activity-info-item">
+                            <div class="sub-heading">Video</div>
+                            <div class="sub-value" id="video_decision-${data['session_key']}">
+                                % if data['media_type'] in ('movie', 'episode', 'clip'):
+                                    % if data['video_decision'] == 'transcode':
+                                    <%
+                                        hw_d = ' (HW)' if data['transcode_hw_requested'] == '1' and data['transcode_hw_decode'] and data['transcode_hw_full_pipeline'] == '0' else ''
+                                        hw_e = ' (HW)' if data['transcode_hw_requested'] == '1' and data['transcode_hw_encode'] and data['transcode_hw_full_pipeline'] == '1' else ''
+                                    %>
+                                    Transcode (${data['video_codec'].upper()}${hw_d} ${plexpy.common.VIDEO_RESOLUTION_OVERRIDES.get(data['video_resolution'], data['video_resolution'])} &rarr; ${data['stream_video_codec'].upper()}${hw_e} ${plexpy.common.VIDEO_RESOLUTION_OVERRIDES.get(data['stream_video_resolution'], data['stream_video_resolution'])})
+                                    % elif data['video_decision'] == 'copy':
+                                    Direct Stream (${data['stream_video_codec'].upper()} ${plexpy.common.VIDEO_RESOLUTION_OVERRIDES.get(data['stream_video_resolution'], data['stream_video_resolution'])})
+                                    % else:
+                                    Direct Play (${data['video_codec'].upper()} ${plexpy.common.VIDEO_RESOLUTION_OVERRIDES.get(data['video_resolution'], data['video_resolution'])})
+                                    % endif
+                                % elif data['media_type'] == 'photo':
+                                Direct Play (${data['width']}x${data['height']})
+                                % endif
+                            </div>
+                        </li>
+                        % endif
+                        % if data['media_type'] in ('movie', 'episode', 'clip', 'track'):
+                        <li class="dashboard-activity-info-item">
+                            <div class="sub-heading">Audio</div>
+                            <div class="sub-value" id="audio_decision-${data['session_key']}">
                                 % if data['audio_decision'] == 'transcode':
-                                Audio &nbsp;<strong>Transcode (${plexpy.common.AUDIO_CODEC_OVERRIDES.get(data['audio_codec'], data['audio_codec'].upper())} ${data['audio_channel_layout']} &rarr; ${plexpy.common.AUDIO_CODEC_OVERRIDES.get(data['stream_audio_codec'], data['stream_audio_codec'].upper())} ${data['stream_audio_channel_layout']})</strong>
+                                Transcode (${plexpy.common.AUDIO_CODEC_OVERRIDES.get(data['audio_codec'], data['audio_codec'].upper())} ${data['audio_channel_layout']} &rarr; ${plexpy.common.AUDIO_CODEC_OVERRIDES.get(data['stream_audio_codec'], data['stream_audio_codec'].upper())} ${data['stream_audio_channel_layout']})
                                 % elif data['audio_decision'] == 'copy':
-                                Audio &nbsp;<strong>Direct Stream (${plexpy.common.AUDIO_CODEC_OVERRIDES.get(data['stream_audio_codec'], data['stream_audio_codec'].upper())} ${data['stream_audio_channel_layout']})</strong>
+                                Direct Stream (${plexpy.common.AUDIO_CODEC_OVERRIDES.get(data['stream_audio_codec'], data['stream_audio_codec'].upper())} ${data['stream_audio_channel_layout']})
                                 % else:
-                                Audio &nbsp;<strong>Direct Play (${plexpy.common.AUDIO_CODEC_OVERRIDES.get(data['audio_codec'], data['audio_codec'].upper())} ${data['audio_channel_layout']})</strong>
+                                Direct Play (${plexpy.common.AUDIO_CODEC_OVERRIDES.get(data['audio_codec'], data['audio_codec'].upper())} ${data['audio_channel_layout']})
                                 % endif
-                            <br />
-                            % else:
-                            Audio &nbsp;<strong>None</strong>
-                            <br />
-                            % endif
-                            % if data['media_type'] in ('movie', 'episode', 'clip') and data['subtitles'] == '1':
-                                % if data['subtitle_decision'] == 'transcode':
-                                Subtitle &nbsp;<strong>Transcode (${data['subtitle_codec'].upper()} &rarr; ${data['stream_subtitle_codec'].upper()})</strong>
-                                % elif data['subtitle_decision'] == 'copy':
-                                Subtitle &nbsp;<strong>Direct Stream (${data['subtitle_codec'].upper()})</strong>
-                                % elif data['subtitle_decision'] == 'burn':
-                                Subtitle &nbsp;<strong>Burn (${data['subtitle_codec'].upper()})</strong>
+                            </div>
+                        </li>
+                        % endif
+                        % if data['media_type'] in ('movie', 'episode', 'clip'):
+                        <li class="dashboard-activity-info-item">
+                            <div class="sub-heading">Subtitle</div>
+                            <div class="sub-value" id="subtitle_decision-${data['session_key']}">
+                                % if data['subtitles'] == '1':
+                                    % if data['subtitle_decision'] == 'transcode':
+                                    Transcode (${data['subtitle_codec'].upper()} &rarr; ${data['stream_subtitle_codec'].upper()})
+                                    % elif data['subtitle_decision'] == 'copy':
+                                    Direct Stream (${data['subtitle_codec'].upper()})
+                                    % elif data['subtitle_decision'] == 'burn':
+                                    Burn (${data['subtitle_codec'].upper()})
+                                    % else:
+                                    Direct Play (${data['subtitle_codec'].upper()})
+                                    % endif
                                 % else:
-                                Subtitle &nbsp;<strong>Direct Play (${data['subtitle_codec'].upper()})</strong>
+                                None
                                 % endif
-                            % else:
-                                Subtitle &nbsp;<strong>None</strong>
-                            % endif
-                        </div>
-                    </div>
-                </div>
-                <div class="dashboard-activity-terminate-bar">
-                </div>
-                <div class="dashboard-activity-poster-info-bar">
-                    <div class="dashboard-activity-poster-info-ip-address">
-                        Quality: 
-                        <%
-                            br = helpers.cast_to_float(data['stream_bitrate']) or "Unknown"
-                            br_units = "kbps"
-                            if br != "Unknown" and br > 1000:
-                                br = round(br / 1000, 1)
-                                br_units = "Mbps"
-                        %>
-                        <span id="stream-quality-${data['session_key']}">${data['quality_profile']}</span> (<span id="stream-quality-bitrate-${data['session_key']}">${br}</span> <span id="stream-quality-bitrate-units-${data['session_key']}">${br_units}</span>)
-                        <br />
-                        % if data['ip_address']:
-                        ${data['location'].upper()}: ${data['ip_address']} 
-                        % if data['media_type'] != 'photo' and 'location' in data:
-                        <%
-                            bw = helpers.cast_to_float(data['bandwidth']) or "Unknown"
-                            bw_units = "kbps"
-                            if bw != "Unknown" and bw > 1000:
-                                bw = round(bw / 1000, 1)
-                                bw_units = "Mbps"
-                        %>
-                        (<span id="stream-bandwidth-${data['session_key']}">${bw}</span> <span id="stream-bandwidth-units-${data['session_key']}">${bw_units}</span>)
+                            </div>
+                        </li>
                         % endif
-                        % else:
-                        IP: N/A
-                        % endif
-                    </div>
-                    % if data['media_type'] != 'photo':
-                    <div class="dashboard-activity-poster-info-time">
-                        ETA:
-                        <span id="stream-eta-${data['session_key']}">
-                            <script>
-                                $("#stream-eta-${data['session_key']}").html(moment().add(parseInt("${data['duration']}") - parseInt("${data['view_offset']}"), 'milliseconds').format(time_format));
-                            </script>
-                        </span><br /><span class="progress_time" id="stream-view-offset-${data['session_key']}">
-                            <script>
-                                $("#stream-view-offset-${data['session_key']}").html(millisecondsToMinutes(parseInt("${data['view_offset']}"), false));
-                            </script>
-                        </span>/<span class="progress_time" id="stream-duration-${data['session_key']}">
-                            <script>
-                                $("#stream-duration-${data['session_key']}").html(millisecondsToMinutes(parseInt("${data['duration']}"), false));
-                            </script>
-                        </span>
-                    </div>
-                    % endif
+                    </ul>
+                    <ul class="list-unstyled dashboard-activity-info-list">
+                        <li class="dashboard-activity-info-item">
+                            <div class="sub-heading">Location</div>
+                            <div class="sub-value">
+                                % if data['ip_address']:
+                                ${'LAN' if data['local'] == '1' else 'WAN'}: ${data['ip_address']} 
+                                <a href="#" class="external_ip-modal" data-toggle="modal" data-target="#ip-info-modal" data-ip="${data['ip_address']}">
+                                    <span id="external_ip-${data['session_key']}" class="external-ip-tooltip" data-toggle="tooltip" title="Lookup IP" style="display: none;"><i class="fa fa-map-marker"></i></span>
+                                </a>
+                                <script>
+                                    isPrivateIP("${data['ip_address']}").then(function () {
+                                        $("#external_ip-${data['session_key']}").hide();
+                                    }, function () {
+                                        $("#external_ip-${data['session_key']}").show();
+                                    });
+                                </script>
+                                % else:
+                                N/A
+                                % endif
+                            </div>
+                        </li>
+                        <li class="dashboard-activity-info-item">
+                            <div class="sub-heading">Bandwidth</div>
+                            <div class="sub-value">
+                                % if data['media_type'] != 'photo' and 'location' in data:
+                                <%
+                                    bw = helpers.cast_to_int(data['bandwidth']) or "Unknown"
+                                    bw_units = "kbps"
+                                    if bw != "Unknown" and bw > 1000:
+                                        bw = round(bw / 1000.0, 1)
+                                        bw_units = "Mbps"
+                                %>
+                                <span id="streaming-brain-${data['session_key']}" data-toggle="tooltip" title="Streaming Brain Estimate">
+                                    <span id="stream-bandwidth-${data['session_key']}">${bw} ${bw_units}</span>
+                                </span>
+                                % endif
+                            </div>
+                        </li>
+                    </ul>
                 </div>
             </div>
-            % if (data['media_type'] == 'movie' or data['media_type'] == 'episode' or data['media_type'] == 'track') and data['rating_key']:
-        </a>
-        % else:
-        </a>
-        % endif
+            % if data['media_type'] != 'photo':
+            <div class="dashboard-activity-info-time">
+                ETA:
+                <span id="stream-eta-${data['session_key']}">
+                    <script>
+                    $("#stream-eta-${data['session_key']}").html(moment().add(parseInt("${data['duration']}") - parseInt("${data['view_offset']}"), 'milliseconds').format(time_format));
+                    </script>
+                </span><br /><span class="progress_time" id="stream-view-offset-${data['session_key']}">
+                    <script>
+                    $("#stream-view-offset-${data['session_key']}").html(millisecondsToMinutes(parseInt("${data['view_offset']}"), false));
+                    </script>
+                </span> / <span class="progress_time" id="stream-duration-${data['session_key']}">
+                    <script>
+                    $("#stream-duration-${data['session_key']}").html(millisecondsToMinutes(parseInt("${data['duration']}"), false));
+                    </script>
+                </span>
+            </div>
+            % endif
+        </div>
         <div class="dashboard-activity-progress">
             <div class="dashboard-activity-progress-bar">
-                <div id="bufferbar-${data['session_key']}" class="bufferbar" style="width: ${data['transcode_progress']}%" data-toggle="tooltip" title="Transcoder Progress ${data['transcode_progress']}%">${data['transcode_progress']}%</div>
-                <div id="bar-${data['session_key']}" class="bar" style="width: ${data['progress_percent']}%" data-toggle="tooltip" title="Stream Progress ${data['progress_percent']}%">${data['progress_percent']}%</div>
+                <div id="buffer-bar-${data['session_key']}" class="buffer-bar" style="width: ${data['transcode_progress']}%" data-toggle="tooltip" title="Transcoder Progress ${data['transcode_progress']}%">${data['transcode_progress']}%</div>
+                <div id="progress-bar-${data['session_key']}" class="progress-bar" style="width: ${data['progress_percent']}%" data-toggle="tooltip" title="Stream Progress ${data['progress_percent']}%">${data['progress_percent']}%</div>
             </div>
         </div>
     </div>
     <div class="dashboard-activity-metadata-wrapper">
         % if data['user_id']:
-        <a href="user?user_id=${data['user_id']}">
+        <a href="user?user_id=${data['user_id']}" title="${data['friendly_name']}">
             <div class="dashboard-activity-metadata-user-thumb" style="background-image: url(${data['user_thumb']});"></div>
         </a>
         % else:
@@ -282,39 +320,39 @@ DOCUMENTATION :: END
                 % endif
             </span>
             % if data['rating_key']:
-            % if data['media_type'] == 'episode':
-            <a href="info?rating_key=${data['grandparent_rating_key']}" title="${data['grandparent_title']}">${data['grandparent_title']}</a>
-                 - <a href="info?rating_key=${data['rating_key']}" title="${data['title']}">${data['title']}</a>
-            % elif data['media_type'] == 'movie':
-            <a href="info?rating_key=${data['rating_key']}" title="${data['title']}">${data['title']}</a>
-            % elif data['media_type'] == 'clip':
-            <span title="${data['title']}">${data['title']}</span>
-            % elif data['media_type'] == 'track':
-            <a href="info?rating_key=${data['grandparent_rating_key']}" title="${data['grandparent_title']}">${data['grandparent_title']}</a>
-                 - <a href="info?rating_key=${data['rating_key']}" title="${data['title']}">${data['title']}</a>
-            % elif data['media_type'] == 'photo':
-            <span title="${data['parent_title']}">${data['parent_title']}</span>
-            % else:
-            <span title="${data['title']}">${data['title']}</span>
-            % endif
+                % if data['media_type'] == 'episode':
+                <a href="info?rating_key=${data['grandparent_rating_key']}" title="${data['grandparent_title']}">${data['grandparent_title']}</a>
+                - <a href="info?rating_key=${data['rating_key']}" title="${data['title']}">${data['title']}</a>
+                % elif data['media_type'] == 'movie':
+                <a href="info?rating_key=${data['rating_key']}" title="${data['title']}">${data['title']}</a>
+                % elif data['media_type'] == 'clip':
+                <span title="${data['title']}">${data['title']}</span>
+                % elif data['media_type'] == 'track':
+                <a id="metadata-grandparent_title-${data['session_key']}" href="info?rating_key=${data['grandparent_rating_key']}" title="${data['grandparent_title']}">${data['grandparent_title']}</a>
+                - <a id="metadata-title-${data['session_key']}" href="info?rating_key=${data['rating_key']}" title="${data['title']}">${data['title']}</a>
+                % elif data['media_type'] == 'photo':
+                <span title="${data['parent_title']}">${data['parent_title']}</span>
+                % else:
+                <span title="${data['title']}">${data['title']}</span>
+                % endif
             % else:
             ${data['title']}
             % endif
         </div>
         <div class="dashboard-activity-metadata-subtitle">
             % if data['rating_key']:
-            % if data['media_type'] == 'episode':
-            <a href="info?rating_key=${data['parent_rating_key']}" title="Season ${data['parent_media_index']}" class="text-muted">S${data['parent_media_index']}</a>
-                &middot; <a href="info?rating_key=${data['rating_key']}" title="Episode ${data['media_index']}" class="text-muted">E${data['media_index']}</a>
-            % elif data['media_type'] == 'movie':
-            <span title="${data['year']}" class="text-muted">${data['year']}</span>
-            % elif data['media_type'] == 'track':
-            <a href="info?rating_key=${data['parent_rating_key']}" title="${data['parent_title']}" class="text-muted">${data['parent_title']}</a>
-            % elif data['media_type'] == 'photo':
-            <span title="${data['title']}" class="text-muted">${data['title']}</span>
-            % else:
-            <span title="${data['year']}" class="text-muted">${data['year']}</span>
-            % endif
+                % if data['media_type'] == 'episode':
+                <a href="info?rating_key=${data['parent_rating_key']}" title="Season ${data['parent_media_index']}" class="sub-heading">S${data['parent_media_index']}</a>
+                &middot; <a href="info?rating_key=${data['rating_key']}" title="Episode ${data['media_index']}" class="sub-heading">E${data['media_index']}</a>
+                % elif data['media_type'] == 'movie':
+                <span title="${data['year']}" class="sub-heading">${data['year']}</span>
+                % elif data['media_type'] == 'track':
+                <a id="metadata-parent_title-${data['session_key']}" href="info?rating_key=${data['parent_rating_key']}" title="${data['parent_title']}" class="sub-heading">${data['parent_title']}</a>
+                % elif data['media_type'] == 'photo':
+                <span title="${data['title']}" class="sub-heading">${data['title']}</span>
+                % else:
+                <span title="${data['year']}" class="sub-heading">${data['year']}</span>
+                % endif
             % endif
         </div>
         <div class="dashboard-activity-metadata-user">
diff --git a/data/interfaces/default/index.html b/data/interfaces/default/index.html
index 827130b0..ca477672 100644
--- a/data/interfaces/default/index.html
+++ b/data/interfaces/default/index.html
@@ -1,6 +1,7 @@
 <%inherit file="base.html"/>
 
 <%def name="headIncludes()">
+<link href="${http_root}css/jquery.scrollbar.css" rel="stylesheet">
 </%def>
 
 <%def name="body()">
@@ -178,10 +179,14 @@
 </div>
 % endif
 
+<div class="modal fade" id="ip-info-modal" tabindex="-1" role="dialog" aria-labelledby="ip-info-modal">
+</div>
+
 </%def>
 
 <%def name="javascriptIncludes()">
 <script src="${http_root}js/moment-with-locale.js"></script>
+<script src="${http_root}js/jquery.scrollbar.min.js"></script>
 <script>
     var date_format = 'YYYY-MM-DD';
     var time_format = 'hh:mm a';
@@ -241,59 +246,82 @@
 
                     sessions.forEach(function (s) {
                         var key = s.session_key;
+                        var session_id = s.session_id;
                         var instance = $('#instance-' + key);
 
-                        // create a new instance if it doesn't exist
+                        // Create a new instance if it doesn't exist
                         if (!(instance.length)) {
                             getActivityInstance(s);
                             return;
                         }
 
-                        // update play state
+                        // Update play state icon
                         switch (s.state) {
                             case 'playing':
-                                var overlay_state = 'State &nbsp;<strong>Playing</strong>';
                                 var state_icon = '<i class="fa fa-fw fa-play"></i>&nbsp;';
                                 break;
                             case 'paused':
-                                var overlay_state = 'State &nbsp;<strong>Paused</strong>';
                                 var state_icon = '<i class="fa fa-fw fa-pause"></i>&nbsp;';
                                 break;
                             case 'buffering':
-                                var overlay_state = 'State &nbsp;<strong>Buffering</strong>';
                                 var state_icon = '<i class="fa fa-fw fa-spinner"></i>&nbsp;';
                                 break;
                             default:
-                                var overlay_state = 'State &nbsp;<strong>Unknown</strong>';
                                 var state_icon = '<i class="fa fa-fw fa-question-circle"></i>&nbsp;';
                         }
-                        $('#overlay-play-state-' + key).html(overlay_state);
                         $('#play-state-' + key).html(state_icon);
 
-                        % if config['pms_use_bif']:
-                        // if using bif indexes, update the bif thumbnail
-                        if (s.indexes && s.state == 'playing') {
-                            var bif_poster = $('#bif-' + key);
-                            if (s.bif_thumb != bif_poster.data('thumb')) {
-                                bif_poster.animate({ opacity: 0 }, { duration: 1000, queue: false });
-                                bif_poster.after($('<div id="bif-' + key + '"class="dashboard-activity-poster-face" data-thumb="' + s.bif_thumb +'" style="background-image: url(pms_image_proxy?img='
-                                    + s.bif_thumb + '&width=500&height=280&fallback=art);"></div>').fadeIn(1000, function () { bif_poster.remove() }));
-                                blurArtwork(key);
+                        // Switching tracks can be under the same session key, so need to update the info.
+                        if (s.media_type === 'track') {
+                            // Update if artist changed
+                            if (s.grandparent_rating_key != instance.data('grandparent_rating_key')) {
+                                $('#background-' + key).css('background-image', 'url(pms_image_proxy?img=' + s.art + '&width=500&height=280&fallback=art&refresh=true)');
+                                $('#metadata-grandparent_title-' + key)
+                                    .attr('href', 'info?rating_key=' + s.grandparent_rating_key)
+                                    .attr('title', s.grandparent_title)
+                                    .text(s.grandparent_title);
+                            }
+                            // Update cover if album changed
+                            if (s.parent_rating_key != instance.data('parent_rating_key')) {
+                                $('#poster-' + key).css('background-image', 'url(pms_image_proxy?img=' + s.parent_thumb + '&width=300&height=300&fallback=poster&refresh=true)');
+                                $('#poster-url-' + key)
+                                    .attr('href', 'info?rating_key=' + s.parent_rating_key)
+                                    .attr('title', s.parent_title);
+                                $('#metadata-parent_title-' + key)
+                                    .attr('href', 'info?rating_key=' + s.parent_rating_key)
+                                    .attr('title', s.parent_title)
+                                    .text(s.parent_title);
+                            }
+                            // Update cover if track changed
+                            if (s.parent_rating_key != instance.data('parent_rating_key')) {
+                                $('#metadata-title-' + key)
+                                    .attr('href', 'info?rating_key=' + s.rating_key)
+                                    .attr('title', s.title)
+                                    .text(s.title);
                             }
                         }
-                        % endif
 
-                        // if transcoding, update the transcode state
-                        var ts = '';
-                        if (s.video_decision == 'transcode' || s.audio_decision == 'transcode') {
+                        // Update the transcode state
+                        var transcode_decision = '';
+                        if (s.transcode_decision === 'transcode') {
                             var throttled = (s.throttled == '1') ? ' (Throttled)' : ' (Speed: ' + s.transcode_speed + ')';
-                            var hw = (s.transcode_hardware == '1') ? ' (HW)' : '';
-                            ts += 'Stream &nbsp;<strong>Transcode' + hw + throttled + '</strong><br>';
-                        } else if (s.video_decision == 'copy' || s.audio_decision == 'copy') {
-                            ts += 'Stream &nbsp;<strong>Direct Stream</strong><br>';
+                            transcode_decision = 'Transcode' + throttled;
+                        } else if (s.transcode_decision === 'copy') {
+                            transcode_decision = 'Direct Stream';
                         } else {
-                            ts += 'Stream &nbsp;<strong>Direct Play</strong><br>';
+                            transcode_decision = 'Direct Play';
                         }
+                        $('#transcode_decision-' + key).html(transcode_decision);
+
+                        var transcode_container = '';
+                        if (s.container != s.stream_container) {
+                            transcode_container = 'Transcode (' + s.container.toUpperCase() + ' &rarr; ' + s.stream_container.toUpperCase() + ')';
+                        } else {
+                            transcode_container = 'Direct Play (' + s.container.toUpperCase() + ')';
+                        }
+                        $('#transcode_container-' + key).html(transcode_container);
+
+                        var video_decision = '';
                         if (['movie', 'episode', 'clip'].indexOf(s.media_type) > -1 && s.video_decision != '') {
                             switch (s.video_resolution.toLowerCase()) {
                                 case 'sd':
@@ -315,79 +343,81 @@
                                 default:
                                     var sv_res = s.stream_video_resolution + 'p'
                             }
-                            if (s.video_decision == 'transcode') {
-                                ts += 'Video &nbsp;<strong>Transcode (' + s.video_codec.toUpperCase() + ' ' + v_res + ' &rarr; ' + s.stream_video_codec.toUpperCase() + ' ' + sv_res + ')</strong><br>';
-                            } else if (s.video_decision == 'copy') {
-                                ts += 'Video &nbsp;<strong>Direct Stream (' + s.stream_video_codec.toUpperCase() + ' ' + sv_res + ')</strong><br>';
+                            if (s.video_decision === 'transcode') {
+                                var hw_d = (s.transcode_hw_requested === '1' && s.transcode_hw_decode && s.transcode_hw_full_pipeline === '0') ? ' (HW)' : '';
+                                var hw_e = (s.transcode_hw_requested === '1' && s.transcode_hw_encode && s.transcode_hw_full_pipeline === '1') ? ' (HW)' : '';
+                                video_decision = 'Transcode (' + s.video_codec.toUpperCase() + hw_d + ' ' + v_res + ' &rarr; ' + s.stream_video_codec.toUpperCase() + hw_e + ' ' + sv_res + ')';
+                            } else if (s.video_decision === 'copy') {
+                                video_decision = 'Direct Stream (' + s.stream_video_codec.toUpperCase() + ' ' + sv_res + ')';
                             } else {
-                                ts += 'Video &nbsp;<strong>Direct Play (' + s.video_codec.toUpperCase() + ' ' + v_res + ')</strong><br>';
+                                video_decision = 'Direct Play (' + s.video_codec.toUpperCase() + ' ' + v_res + ')';
                             }
-                        } else if (s.media_type == 'photo') {
-                            ts += 'Video &nbsp;<strong>Direct Play (' + s.width + 'x' + s.height + ')</strong><br>';
-                        } else {
-                            ts += 'Video &nbsp;<strong>None</strong><br>';
+                        } else if (s.media_type === 'photo') {
+                            video_decision = 'Direct Play (' + s.width + 'x' + s.height + ')';
                         }
-                        if (['movie', 'episode', 'clip', 'track'].indexOf(s.media_type) > -1 && s.audio_codec) {
-                            var a_codec = (s.audio_codec == 'truehd') ? 'TrueHD' : s.audio_codec.toUpperCase();
-                            var sa_codec = (s.stream_audio_codec == 'truehd') ? 'TrueHD' : s.stream_audio_codec.toUpperCase();
-                            if (s.audio_decision == 'transcode') {
-                                ts += 'Audio &nbsp;<strong>Transcode (' + a_codec + ' ' + s.audio_channel_layout + ' &rarr; ' + sa_codec + ' ' + s.stream_audio_channel_layout + ')</strong><br>';
-                            } else if (s.audio_decision == 'copy') {
-                                ts += 'Audio &nbsp;<strong>Direct Stream (' + sa_codec + ' ' + s.stream_audio_channel_layout + ')</strong><br>';
-                            } else {
-                                ts += 'Audio &nbsp;<strong>Direct Play (' + a_codec + ' ' + s.audio_channel_layout + ')</strong><br>';
-                            }
-                        }
-                        else {
-                            ts += 'Audio &nbsp;<strong>None</strong><br>';
-                        }
-                        if (['movie', 'episode', 'clip'].indexOf(s.media_type) > -1 && s.subtitles == '1') {
-                            if (s.subtitle_decision == 'transcode') {
-                                ts += 'Subtitle &nbsp;<strong>Transcode (' + s.subtitle_codec.toUpperCase() + ' &rarr; ' + s.stream_subtitle_codec.toUpperCase() + ')</strong>';
-                            } else if (s.subtitle_decision == 'copy') {
-                                ts += 'Subtitle &nbsp;<strong>Direct Stream (' + s.subtitle_codec.toUpperCase() + ')</strong>';
-                            } else if (s.subtitle_decision == 'burn') {
-                                ts += 'Subtitle &nbsp;<strong>Burn (' + s.subtitle_codec.toUpperCase() + ')</strong>';
-                            } else {
-                                ts += 'Subtitle &nbsp;<strong>Direct Play (' + s.subtitle_codec.toUpperCase() + ')</strong>';
-                            }
-                        } else {
-                            ts += 'Subtitle &nbsp;<strong>None</strong>';
-                        }
-                        $('#transcode-state-' + key).html(ts);
+                        $('#video_decision-' + key).html(video_decision);
 
-                        // update the stream quality profile and bandwidth
-                        var br = parseInt(s.stream_bitrate) || 'Unknown';
-                        var br_units = 'kbps'
-                        if (br != "Unknown" && br > 1000) {
-                            br = (br / 1000).toFixed(1);
-                            br_units = 'Mbps';
+                        var audio_decision = '';
+                        if (['movie', 'episode', 'clip', 'track'].indexOf(s.media_type) > -1 && s.audio_codec) {
+                            var a_codec = (s.audio_codec === 'truehd') ? 'TrueHD' : s.audio_codec.toUpperCase();
+                            var sa_codec = (s.stream_audio_codec === 'truehd') ? 'TrueHD' : s.stream_audio_codec.toUpperCase();
+                            if (s.audio_decision === 'transcode') {
+                                audio_decision = 'Transcode (' + a_codec + ' ' + s.audio_channel_layout + ' &rarr; ' + sa_codec + ' ' + s.stream_audio_channel_layout + ')';
+                            } else if (s.audio_decision === 'copy') {
+                                audio_decision = 'Direct Stream (' + sa_codec + ' ' + s.stream_audio_channel_layout + ')';
+                            } else {
+                                audio_decision = 'Direct Play (' + a_codec + ' ' + s.audio_channel_layout + ')';
+                            }
                         }
-                        $('#stream-quality-' + key).html(s.quality_profile);
-                        $('#stream-quality-bitrate-' + key).html(br);
-                        $('#stream-quality-bitrate-units-' + key).html(br_units);
+                        $('#audio_decision-' + key).html(audio_decision);
+
+                        var subtitle_decision = 'None';
+                        if (['movie', 'episode', 'clip'].indexOf(s.media_type) > -1 && s.subtitles == '1') {
+                            if (s.subtitle_decision === 'transcode') {
+                                subtitle_decision = 'Transcode (' + s.subtitle_codec.toUpperCase() + ' &rarr; ' + s.stream_subtitle_codec.toUpperCase() + ')';
+                            } else if (s.subtitle_decision === 'copy') {
+                                subtitle_decision = 'Direct Stream (' + s.subtitle_codec.toUpperCase() + ')';
+                            } else if (s.subtitle_decision === 'burn') {
+                                subtitle_decision = 'Burn (' + s.subtitle_codec.toUpperCase() + ')';
+                            } else {
+                                subtitle_decision = 'Direct Play (' + s.subtitle_codec.toUpperCase() + ')';
+                            }
+                        }
+                        $('#subtitle_decision-' + key).html(subtitle_decision);
+
+                        // Update the stream quality profile and bandwidth
+                        if (s.media_type != 'photo') {
+                            var br = parseInt(s.stream_bitrate) || 'Unknown';
+                            var br_units = 'kbps'
+                            if (br != "Unknown" && br > 1000) {
+                                br = (br / 1000).toFixed(1);
+                                br_units = 'Mbps';
+                            }
+                            $('#stream_quality-' + key).html(s.quality_profile + ' (' + br + ' ' + br_units + ')');
+                        } else {
+                            $('#stream_quality-' + key).html(s.quality_profile);
+                        }
+                        $('#optimized_version-' + key).html(s.optimized_version_profile);
+
                         var bw = parseInt(s.bandwidth) || 'Unknown';
                         var bw_units = 'kbps'
                         if (bw != "Unknown" && bw > 1000) {
                             bw = (bw / 1000).toFixed(1);
                             bw_units = 'Mbps';
                         }
-                        $('#stream-bandwidth-' + key).html(bw);
-                        $('#stream-bandwidth-units-' + key).html(bw_units);
+                        $('#stream-bandwidth-' + key).html(bw + ' ' + bw_units);
 
-                        // update the stream progress times
+                        // Update the stream progress times
                         $('#stream-eta-' + key).html(moment().add(parseInt(s.duration) - parseInt(s.view_offset), 'milliseconds').format(time_format));
                         $('#stream-view-offset-' + key).html(millisecondsToMinutes(s.view_offset, false));
 
-                        // update the progress bars
-                        // percent - 3 because of 3px padding-right
-                        $('#bufferbar-' + key).width(parseInt(s.transcode_progress) - 3 + '%').html(s.transcode_progress + '%')
+                        // Update the progress bars, percent - 3 because of 3px padding-right
+                        $('#buffer-bar-' + key).width(parseInt(s.transcode_progress) - 3 + '%').html(s.transcode_progress + '%')
                             .attr('data-original-title', 'Transcoder Progress ' + s.transcode_progress + '%');
-                        $('#bar-' + key).width(parseInt(s.progress_percent) - 3 + '%').html(s.progress_percent + '%')
+                        $('#progress-bar-' + key).width(parseInt(s.progress_percent) - 3 + '%').html(s.progress_percent + '%')
                             .attr('data-original-title', 'Stream Progress ' + s.progress_percent + '%');
 
-
-                        // add temporary class so we know which instances are still active
+                        // Add temporary class so we know which instances are still active
                         instance.addClass('updated-temp');
                     });
 
@@ -397,6 +427,7 @@
                         if ($(instance).hasClass('updated-temp')) {
                             $(instance).removeClass('updated-temp');
                         } else {
+                            $(instance).find('[data-toggle=tooltip]').tooltip('destroy');
                             $(instance).remove();
                         }
                     });
@@ -417,10 +448,9 @@
             data: session,
             complete: function(xhr, status) {
                 $('#currentActivity').append(xhr.responseText);
-                $('#instance-' + session.session_key).find('.dashboard-activity-poster-face').hide().fadeIn(1000);
-                $('#terminate-button-' + session.session_key + ' span').tooltip({ container: 'body', placement: 'right', delay: 50 });
-                $('#bufferbar-' + session.session_key).tooltip({ container: 'body', placement: 'right', delay: 50 });
-                $('#bar-' + session.session_key).tooltip({ container: 'body', placement: 'right', delay: 50 });
+                $('#instance-' + session.session_key + ' .dashboard-activity-info-scroller').scrollbar();
+                $('#instance-' + session.session_key + ' [data-toggle=tooltip]').tooltip({ container: 'body', placement: 'right', delay: 50 })
+                $('#terminate-button-' + session.session_key + ' span').tooltip('destroy').tooltip({ container: 'body', placement: 'left', delay: 50 });
             }
         });
     }
@@ -431,31 +461,12 @@
         getCurrentActivity();
     }, 2000);
 
-    function blurArtwork(session_key) {
-        var filterVal = $('#stream-' + session_key).is(':visible') ? 'blur(5px)' : '';
-        $($('#poster-' + session_key).find('.dashboard-activity-poster-face, .dashboard-activity-cover-face'))
-        .css('filter', filterVal).css('webkitFilter', filterVal).css('mozFilter', filterVal).css('oFilter', filterVal).css('msFilter', filterVal);
-    }
-
-    // Show/Hide activity info
-    $('#currentActivity').on('click', '.btn-activity-info', function (e) {
-        e.preventDefault();
-        $($(this).attr('data-target')).toggle();
-        var key = $(this).data('key');
-        blurArtwork(key);
-        $('#terminate-button-' + key).toggle();
-    });
-
-    // Add hover class to dashboard-instance
-    $('#currentActivity').on('mouseover', '.dashboard-hover-container', function () {
-        $(this).closest('.dashboard-instance').addClass('hover');
-        var key = $(this).closest('.dashboard-instance').data('key');
-    });
-    $('#currentActivity').on('mouseleave', '.dashboard-hover-container', function () {
-        var key = $(this).closest('.dashboard-instance').data('key');
-        if (!($('#stream-' + key).is(':visible'))) {
-            $(this).closest('.dashboard-instance').removeClass('hover');
-        }
+    $('#currentActivity').on('click', '.external_ip-modal', function () {
+        $.get('get_ip_address_details', {
+            ip_address: $(this).data('ip')
+        }).then(function (jqXHR) {
+            $("#ip-info-modal").html(jqXHR);
+        });
     });
 
     % if _session['user_group'] == 'admin':
diff --git a/data/interfaces/default/js/jquery.scrollbar.min.js b/data/interfaces/default/js/jquery.scrollbar.min.js
new file mode 100644
index 00000000..5a86f9ad
--- /dev/null
+++ b/data/interfaces/default/js/jquery.scrollbar.min.js
@@ -0,0 +1,16 @@
+/**
+ * jQuery CSS Customizable Scrollbar
+ *
+ * Copyright 2015, Yuriy Khabarov
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * If you found bug, please contact me via email <13real008@gmail.com>
+ *
+ * Compressed by http://jscompress.com/
+ *
+ * @author Yuriy Khabarov aka Gromo
+ * @version 0.2.11
+ * @url https://github.com/gromo/jquery.scrollbar/
+ *
+ */
+!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],b):b("undefined"!=typeof exports?require("jquery"):a.jQuery)}(this,function(a){"use strict";function h(b){if(c.webkit&&!b)return{height:0,width:0};if(!c.data.outer){var d={border:"none","box-sizing":"content-box",height:"200px",margin:"0",padding:"0",width:"200px"};c.data.inner=a("<div>").css(a.extend({},d)),c.data.outer=a("<div>").css(a.extend({left:"-1000px",overflow:"scroll",position:"absolute",top:"-1000px"},d)).append(c.data.inner).appendTo("body")}return c.data.outer.scrollLeft(1e3).scrollTop(1e3),{height:Math.ceil(c.data.outer.offset().top-c.data.inner.offset().top||0),width:Math.ceil(c.data.outer.offset().left-c.data.inner.offset().left||0)}}function i(){var a=h(!0);return!(a.height||a.width)}function j(a){var b=a.originalEvent;return(!b.axis||b.axis!==b.HORIZONTAL_AXIS)&&!b.wheelDeltaX}var b=!1,c={data:{index:0,name:"scrollbar"},firefox:/firefox/i.test(navigator.userAgent),macosx:/mac/i.test(navigator.platform),msedge:/edge\/\d+/i.test(navigator.userAgent),msie:/(msie|trident)/i.test(navigator.userAgent),mobile:/android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent),overlay:null,scroll:null,scrolls:[],webkit:/webkit/i.test(navigator.userAgent)&&!/edge\/\d+/i.test(navigator.userAgent)};c.scrolls.add=function(a){this.remove(a).push(a)},c.scrolls.remove=function(b){for(;a.inArray(b,this)>=0;)this.splice(a.inArray(b,this),1);return this};var d={autoScrollSize:!0,autoUpdate:!0,debug:!1,disableBodyScroll:!1,duration:200,ignoreMobile:!1,ignoreOverlay:!1,isRtl:!1,scrollStep:30,showArrows:!1,stepScrolling:!0,scrollx:null,scrolly:null,onDestroy:null,onFallback:null,onInit:null,onScroll:null,onUpdate:null},e=function(b){c.scroll||(c.overlay=i(),c.scroll=h(),g(),a(window).resize(function(){var a=!1;if(c.scroll&&(c.scroll.height||c.scroll.width)){var b=h();b.height===c.scroll.height&&b.width===c.scroll.width||(c.scroll=b,a=!0)}g(a)})),this.container=b,this.namespace=".scrollbar_"+c.data.index++,this.options=a.extend({},d,window.jQueryScrollbarOptions||{}),this.scrollTo=null,this.scrollx={},this.scrolly={},b.data(c.data.name,this),c.scrolls.add(this)};e.prototype={destroy:function(){if(this.wrapper){this.container.removeData(c.data.name),c.scrolls.remove(this);var b=this.container.scrollLeft(),d=this.container.scrollTop();this.container.insertBefore(this.wrapper).css({height:"",margin:"","max-height":""}).removeClass("scroll-content scroll-scrollx_visible scroll-scrolly_visible").off(this.namespace).scrollLeft(b).scrollTop(d),this.scrollx.scroll.removeClass("scroll-scrollx_visible").find("div").addBack().off(this.namespace),this.scrolly.scroll.removeClass("scroll-scrolly_visible").find("div").addBack().off(this.namespace),this.wrapper.remove(),a(document).add("body").off(this.namespace),a.isFunction(this.options.onDestroy)&&this.options.onDestroy.apply(this,[this.container])}},init:function(b){var d=this,e=this.container,f=this.containerWrapper||e,g=this.namespace,h=a.extend(this.options,b||{}),i={x:this.scrollx,y:this.scrolly},k=this.wrapper,l={},m={scrollLeft:e.scrollLeft(),scrollTop:e.scrollTop()};if(c.mobile&&h.ignoreMobile||c.overlay&&h.ignoreOverlay||c.macosx&&!c.webkit)return a.isFunction(h.onFallback)&&h.onFallback.apply(this,[e]),!1;if(k)l={height:"auto","margin-bottom":c.scroll.height*-1+"px","max-height":""},l[h.isRtl?"margin-left":"margin-right"]=c.scroll.width*-1+"px",f.css(l);else{if(this.wrapper=k=a("<div>").addClass("scroll-wrapper").addClass(e.attr("class")).css("position","absolute"===e.css("position")?"absolute":"relative").insertBefore(e).append(e),h.isRtl&&k.addClass("scroll--rtl"),e.is("textarea")&&(this.containerWrapper=f=a("<div>").insertBefore(e).append(e),k.addClass("scroll-textarea")),l={height:"auto","margin-bottom":c.scroll.height*-1+"px","max-height":""},l[h.isRtl?"margin-left":"margin-right"]=c.scroll.width*-1+"px",f.addClass("scroll-content").css(l),e.on("scroll"+g,function(b){var f=e.scrollLeft(),g=e.scrollTop();if(h.isRtl)switch(!0){case c.firefox:f=Math.abs(f);case c.msedge||c.msie:f=e[0].scrollWidth-e[0].clientWidth-f}a.isFunction(h.onScroll)&&h.onScroll.call(d,{maxScroll:i.y.maxScrollOffset,scroll:g,size:i.y.size,visible:i.y.visible},{maxScroll:i.x.maxScrollOffset,scroll:f,size:i.x.size,visible:i.x.visible}),i.x.isVisible&&i.x.scroll.bar.css("left",f*i.x.kx+"px"),i.y.isVisible&&i.y.scroll.bar.css("top",g*i.y.kx+"px")}),k.on("scroll"+g,function(){k.scrollTop(0).scrollLeft(0)}),h.disableBodyScroll){var n=function(a){j(a)?i.y.isVisible&&i.y.mousewheel(a):i.x.isVisible&&i.x.mousewheel(a)};k.on("MozMousePixelScroll"+g,n),k.on("mousewheel"+g,n),c.mobile&&k.on("touchstart"+g,function(b){var c=b.originalEvent.touches&&b.originalEvent.touches[0]||b,d={pageX:c.pageX,pageY:c.pageY},f={left:e.scrollLeft(),top:e.scrollTop()};a(document).on("touchmove"+g,function(a){var b=a.originalEvent.targetTouches&&a.originalEvent.targetTouches[0]||a;e.scrollLeft(f.left+d.pageX-b.pageX),e.scrollTop(f.top+d.pageY-b.pageY),a.preventDefault()}),a(document).on("touchend"+g,function(){a(document).off(g)})})}a.isFunction(h.onInit)&&h.onInit.apply(this,[e])}a.each(i,function(b,f){var k=null,l=1,m="x"===b?"scrollLeft":"scrollTop",n=h.scrollStep,o=function(){var a=e[m]();e[m](a+n),1==l&&a+n>=p&&(a=e[m]()),l==-1&&a+n<=p&&(a=e[m]()),e[m]()==a&&k&&k()},p=0;f.scroll||(f.scroll=d._getScroll(h["scroll"+b]).addClass("scroll-"+b),h.showArrows&&f.scroll.addClass("scroll-element_arrows_visible"),f.mousewheel=function(a){if(!f.isVisible||"x"===b&&j(a))return!0;if("y"===b&&!j(a))return i.x.mousewheel(a),!0;var c=a.originalEvent.wheelDelta*-1||a.originalEvent.detail,g=f.size-f.visible-f.offset;return c||("x"===b&&a.originalEvent.deltaX?c=40*a.originalEvent.deltaX:"y"===b&&a.originalEvent.deltaY&&(c=40*a.originalEvent.deltaY)),(c>0&&p<g||c<0&&p>0)&&(p+=c,p<0&&(p=0),p>g&&(p=g),d.scrollTo=d.scrollTo||{},d.scrollTo[m]=p,setTimeout(function(){d.scrollTo&&(e.stop().animate(d.scrollTo,240,"linear",function(){p=e[m]()}),d.scrollTo=null)},1)),a.preventDefault(),!1},f.scroll.on("MozMousePixelScroll"+g,f.mousewheel).on("mousewheel"+g,f.mousewheel).on("mouseenter"+g,function(){p=e[m]()}),f.scroll.find(".scroll-arrow, .scroll-element_track").on("mousedown"+g,function(g){if(1!=g.which)return!0;l=1;var i={eventOffset:g["x"===b?"pageX":"pageY"],maxScrollValue:f.size-f.visible-f.offset,scrollbarOffset:f.scroll.bar.offset()["x"===b?"left":"top"],scrollbarSize:f.scroll.bar["x"===b?"outerWidth":"outerHeight"]()},j=0,q=0;if(a(this).hasClass("scroll-arrow")){if(l=a(this).hasClass("scroll-arrow_more")?1:-1,n=h.scrollStep*l,p=l>0?i.maxScrollValue:0,h.isRtl)switch(!0){case c.firefox:p=l>0?0:i.maxScrollValue*-1;break;case c.msie||c.msedge:}}else l=i.eventOffset>i.scrollbarOffset+i.scrollbarSize?1:i.eventOffset<i.scrollbarOffset?-1:0,"x"===b&&h.isRtl&&(c.msie||c.msedge)&&(l*=-1),n=Math.round(.75*f.visible)*l,p=i.eventOffset-i.scrollbarOffset-(h.stepScrolling?1==l?i.scrollbarSize:0:Math.round(i.scrollbarSize/2)),p=e[m]()+p/f.kx;return d.scrollTo=d.scrollTo||{},d.scrollTo[m]=h.stepScrolling?e[m]()+n:p,h.stepScrolling&&(k=function(){p=e[m](),clearInterval(q),clearTimeout(j),j=0,q=0},j=setTimeout(function(){q=setInterval(o,40)},h.duration+100)),setTimeout(function(){d.scrollTo&&(e.animate(d.scrollTo,h.duration),d.scrollTo=null)},1),d._handleMouseDown(k,g)}),f.scroll.bar.on("mousedown"+g,function(i){if(1!=i.which)return!0;var j=i["x"===b?"pageX":"pageY"],k=e[m]();return f.scroll.addClass("scroll-draggable"),a(document).on("mousemove"+g,function(a){var d=parseInt((a["x"===b?"pageX":"pageY"]-j)/f.kx,10);"x"===b&&h.isRtl&&(c.msie||c.msedge)&&(d*=-1),e[m](k+d)}),d._handleMouseDown(function(){f.scroll.removeClass("scroll-draggable"),p=e[m]()},i)}))}),a.each(i,function(a,b){var c="scroll-scroll"+a+"_visible",d="x"==a?i.y:i.x;b.scroll.removeClass(c),d.scroll.removeClass(c),f.removeClass(c)}),a.each(i,function(b,c){a.extend(c,"x"==b?{offset:parseInt(e.css("left"),10)||0,size:e.prop("scrollWidth"),visible:k.width()}:{offset:parseInt(e.css("top"),10)||0,size:e.prop("scrollHeight"),visible:k.height()})}),this._updateScroll("x",this.scrollx),this._updateScroll("y",this.scrolly),a.isFunction(h.onUpdate)&&h.onUpdate.apply(this,[e]),a.each(i,function(a,b){var c="x"===a?"left":"top",d="x"===a?"outerWidth":"outerHeight",f="x"===a?"width":"height",g=parseInt(e.css(c),10)||0,i=b.size,j=b.visible+g,k=b.scroll.size[d]()+(parseInt(b.scroll.size.css(c),10)||0);h.autoScrollSize&&(b.scrollbarSize=parseInt(k*j/i,10),b.scroll.bar.css(f,b.scrollbarSize+"px")),b.scrollbarSize=b.scroll.bar[d](),b.kx=(k-b.scrollbarSize)/(i-j)||1,b.maxScrollOffset=i-j}),e.scrollLeft(m.scrollLeft).scrollTop(m.scrollTop).trigger("scroll")},_getScroll:function(b){var c={advanced:['<div class="scroll-element">','<div class="scroll-element_corner"></div>','<div class="scroll-arrow scroll-arrow_less"></div>','<div class="scroll-arrow scroll-arrow_more"></div>','<div class="scroll-element_outer">','<div class="scroll-element_size"></div>','<div class="scroll-element_inner-wrapper">','<div class="scroll-element_inner scroll-element_track">','<div class="scroll-element_inner-bottom"></div>',"</div>","</div>",'<div class="scroll-bar">','<div class="scroll-bar_body">','<div class="scroll-bar_body-inner"></div>',"</div>",'<div class="scroll-bar_bottom"></div>','<div class="scroll-bar_center"></div>',"</div>","</div>","</div>"].join(""),simple:['<div class="scroll-element">','<div class="scroll-element_outer">','<div class="scroll-element_size"></div>','<div class="scroll-element_track"></div>','<div class="scroll-bar"></div>',"</div>","</div>"].join("")};return c[b]&&(b=c[b]),b||(b=c.simple),b="string"==typeof b?a(b).appendTo(this.wrapper):a(b),a.extend(b,{bar:b.find(".scroll-bar"),size:b.find(".scroll-element_size"),track:b.find(".scroll-element_track")}),b},_handleMouseDown:function(b,c){var d=this.namespace;return a(document).on("blur"+d,function(){a(document).add("body").off(d),b&&b()}),a(document).on("dragstart"+d,function(a){return a.preventDefault(),!1}),a(document).on("mouseup"+d,function(){a(document).add("body").off(d),b&&b()}),a("body").on("selectstart"+d,function(a){return a.preventDefault(),!1}),c&&c.preventDefault(),!1},_updateScroll:function(b,d){var e=this.container,f=this.containerWrapper||e,g="scroll-scroll"+b+"_visible",h="x"===b?this.scrolly:this.scrollx,i=parseInt(this.container.css("x"===b?"left":"top"),10)||0,j=this.wrapper,k=d.size,l=d.visible+i;d.isVisible=k-l>1,d.isVisible?(d.scroll.addClass(g),h.scroll.addClass(g),f.addClass(g)):(d.scroll.removeClass(g),h.scroll.removeClass(g),f.removeClass(g)),"y"===b&&(e.is("textarea")||k<l?f.css({height:l+c.scroll.height+"px","max-height":"none"}):f.css({"max-height":l+c.scroll.height+"px"})),d.size==e.prop("scrollWidth")&&h.size==e.prop("scrollHeight")&&d.visible==j.width()&&h.visible==j.height()&&d.offset==(parseInt(e.css("left"),10)||0)&&h.offset==(parseInt(e.css("top"),10)||0)||(a.extend(this.scrollx,{offset:parseInt(e.css("left"),10)||0,size:e.prop("scrollWidth"),visible:j.width()}),a.extend(this.scrolly,{offset:parseInt(e.css("top"),10)||0,size:this.container.prop("scrollHeight"),visible:j.height()}),this._updateScroll("x"===b?"y":"x",h))}};var f=e;a.fn.scrollbar=function(b,d){return"string"!=typeof b&&(d=b,b="init"),"undefined"==typeof d&&(d=[]),a.isArray(d)||(d=[d]),this.not("body, .scroll-wrapper").each(function(){var e=a(this),g=e.data(c.data.name);(g||"init"===b)&&(g||(g=new f(e)),g[b]&&g[b].apply(g,d))}),this},a.fn.scrollbar.options=d;var g=function(){var a=0,d=0;return function(e){var f,h,i,j,k,l,m;for(f=0;f<c.scrolls.length;f++)j=c.scrolls[f],h=j.container,i=j.options,k=j.wrapper,l=j.scrollx,m=j.scrolly,(e||i.autoUpdate&&k&&k.is(":visible")&&(h.prop("scrollWidth")!=l.size||h.prop("scrollHeight")!=m.size||k.width()!=l.visible||k.height()!=m.visible))&&(j.init(),i.debug&&(window.console&&console.log({scrollHeight:h.prop("scrollHeight")+":"+j.scrolly.size,scrollWidth:h.prop("scrollWidth")+":"+j.scrollx.size,visibleHeight:k.height()+":"+j.scrolly.visible,visibleWidth:k.width()+":"+j.scrollx.visible},!0),d++));b&&d>10?(window.console&&console.log("Scroll updates exceed 10"),g=function(){}):(clearTimeout(a),a=setTimeout(g,300))}}();window.angular&&!function(a){a.module("jQueryScrollbar",[]).provider("jQueryScrollbar",function(){var b=d;return{setOptions:function(c){a.extend(b,c)},$get:function(){return{options:a.copy(b)}}}}).directive("jqueryScrollbar",["jQueryScrollbar","$parse",function(a,b){return{restrict:"AC",link:function(c,d,e){var f=b(e.jqueryScrollbar),g=f(c);d.scrollbar(g||a.options).on("$destroy",function(){d.scrollbar("destroy")})}}}])}(window.angular)});
\ No newline at end of file
diff --git a/plexpy/common.py b/plexpy/common.py
index 8722956f..9963b3c4 100644
--- a/plexpy/common.py
+++ b/plexpy/common.py
@@ -84,11 +84,11 @@ VIDEO_QUALITY_PROFILES = {20000: '20 Mbps 1080p',
                           3000: '3 Mbps 720p',
                           2000: '2 Mbps 720p',
                           1500: '1.5 Mbps 480p',
-                          720: '720 kbps',
-                          320: '320 kbps',
-                          208: '208 kbps',
-                          96: '96 kbps',
-                          64: '64 kbps'
+                          720: '0.7 Mbps 328p',
+                          320: '0.3 Mbps 240p',
+                          208: '0.2 Mbps 160p',
+                          96: '0.096 Mbps',
+                          64: '0.064 Mbps'
                           }
 
 AUDIO_QUALITY_PROFILES = {512: '512 kbps',
diff --git a/plexpy/datafactory.py b/plexpy/datafactory.py
index d5b783c9..2fffe047 100644
--- a/plexpy/datafactory.py
+++ b/plexpy/datafactory.py
@@ -185,7 +185,9 @@ class DataFactory(object):
 
         watched_percent = {'movie': plexpy.CONFIG.MOVIE_WATCHED_PERCENT,
                            'episode': plexpy.CONFIG.TV_WATCHED_PERCENT,
-                           'track': plexpy.CONFIG.MUSIC_WATCHED_PERCENT
+                           'track': plexpy.CONFIG.MUSIC_WATCHED_PERCENT,
+                           'photo': 0,
+                           'clip': plexpy.CONFIG.MOVIE_WATCHED_PERCENT
                            }
 
         rows = []
diff --git a/plexpy/notification_handler.py b/plexpy/notification_handler.py
index dff65b91..9ca6ecc1 100644
--- a/plexpy/notification_handler.py
+++ b/plexpy/notification_handler.py
@@ -700,7 +700,12 @@ def build_media_notify_params(notify_action=None, session=None, timeline=None, m
                         'transcode_video_height': session.get('transcode_height',''),
                         'transcode_audio_codec': session.get('transcode_audio_codec',''),
                         'transcode_audio_channels': session.get('transcode_audio_channels',''),
-                        'transcode_hardware': session.get('transcode_hardware',''),
+                        'transcode_hw_requested': session.get('transcode_hw_requested',''),
+                        'transcode_hw_decode': session.get('transcode_hw_decode',''),
+                        'transcode_hw_decode_title': session.get('transcode_hw_decode_title',''),
+                        'transcode_hw_encode': session.get('transcode_hw_encode',''),
+                        'transcode_hw_encode_title': session.get('transcode_hw_encode_title',''),
+                        'transcode_hw_full_pipeline': session.get('transcode_hw_full_pipeline',''),
                         'session_key': session.get('session_key',''),
                         'transcode_key': session.get('transcode_key',''),
                         'session_id': session.get('session_id',''),
diff --git a/plexpy/pmsconnect.py b/plexpy/pmsconnect.py
index ee02a593..756b7cab 100644
--- a/plexpy/pmsconnect.py
+++ b/plexpy/pmsconnect.py
@@ -1024,6 +1024,45 @@ class PmsConnect(object):
                                                         helpers.get_xml_attr(metadata_main, 'title'))
                         }
 
+        elif metadata_type == 'clip':
+            metadata = {'media_type': metadata_type,
+                        'section_id': section_id,
+                        'library_name': library_name,
+                        'rating_key': helpers.get_xml_attr(metadata_main, 'ratingKey'),
+                        'parent_rating_key': helpers.get_xml_attr(metadata_main, 'parentRatingKey'),
+                        'grandparent_rating_key': helpers.get_xml_attr(metadata_main, 'grandparentRatingKey'),
+                        'title': helpers.get_xml_attr(metadata_main, 'title'),
+                        'parent_title': helpers.get_xml_attr(metadata_main, 'parentTitle'),
+                        'grandparent_title': helpers.get_xml_attr(metadata_main, 'grandparentTitle'),
+                        'media_index': helpers.get_xml_attr(metadata_main, 'index'),
+                        'parent_media_index': helpers.get_xml_attr(metadata_main, 'parentIndex'),
+                        'studio': helpers.get_xml_attr(metadata_main, 'studio'),
+                        'content_rating': helpers.get_xml_attr(metadata_main, 'contentRating'),
+                        'summary': helpers.get_xml_attr(metadata_main, 'summary'),
+                        'tagline': helpers.get_xml_attr(metadata_main, 'tagline'),
+                        'rating': helpers.get_xml_attr(metadata_main, 'rating'),
+                        'audience_rating': helpers.get_xml_attr(metadata_main, 'audienceRating'),
+                        'user_rating': helpers.get_xml_attr(metadata_main, 'userRating'),
+                        'duration': helpers.get_xml_attr(metadata_main, 'duration'),
+                        'year': helpers.get_xml_attr(metadata_main, 'year'),
+                        'thumb': helpers.get_xml_attr(metadata_main, 'thumb'),
+                        'parent_thumb': helpers.get_xml_attr(metadata_main, 'parentThumb'),
+                        'grandparent_thumb': helpers.get_xml_attr(metadata_main, 'grandparentThumb'),
+                        'art': helpers.get_xml_attr(metadata_main, 'art'),
+                        'banner': helpers.get_xml_attr(metadata_main, 'banner'),
+                        'originally_available_at': helpers.get_xml_attr(metadata_main, 'originallyAvailableAt'),
+                        'added_at': helpers.get_xml_attr(metadata_main, 'addedAt'),
+                        'updated_at': helpers.get_xml_attr(metadata_main, 'updatedAt'),
+                        'last_viewed_at': helpers.get_xml_attr(metadata_main, 'lastViewedAt'),
+                        'guid': helpers.get_xml_attr(metadata_main, 'guid'),
+                        'directors': directors,
+                        'writers': writers,
+                        'actors': actors,
+                        'genres': genres,
+                        'labels': labels,
+                        'full_title': helpers.get_xml_attr(metadata_main, 'title')
+                        }
+
         else:
             return {}
 
@@ -1307,21 +1346,11 @@ class PmsConnect(object):
         if session.getElementsByTagName('TranscodeSession'):
             transcode_info = session.getElementsByTagName('TranscodeSession')[0]
 
-            if helpers.get_xml_attr(transcode_info, 'throttled') == '1':
-                transcode_throttled = 1
-            else:
-                transcode_throttled = 0
-
-            if helpers.get_xml_attr(transcode_info, 'transcodeHwFullPipeline') == '1':
-                transcode_hardware = 1
-            else:
-                transcode_hardware = 0
-
             transcode_progress = helpers.get_xml_attr(transcode_info, 'progress')
             transcode_speed = helpers.get_xml_attr(transcode_info, 'speed')
 
             transcode_details = {'transcode_key': helpers.get_xml_attr(transcode_info, 'key'),
-                                 'transcode_throttled': transcode_throttled,
+                                 'transcode_throttled': 1 if helpers.get_xml_attr(transcode_info, 'throttled') == '1' else 0,
                                  'transcode_progress': int(round(helpers.cast_to_float(transcode_progress), 0)),
                                  'transcode_speed': str(round(helpers.cast_to_float(transcode_speed), 1)),
                                  'transcode_audio_channels': helpers.get_xml_attr(transcode_info, 'audioChannels'),
@@ -1331,16 +1360,21 @@ class PmsConnect(object):
                                  'transcode_height': helpers.get_xml_attr(transcode_info, 'height'),  # Blank but keep backwards compatibility
                                  'transcode_container': helpers.get_xml_attr(transcode_info, 'container'),
                                  'transcode_protocol': helpers.get_xml_attr(transcode_info, 'protocol'),
-                                 'transcode_hardware': transcode_hardware,
+                                 'transcode_hw_requested': 1 if helpers.get_xml_attr(transcode_info, 'transcodeHwRequested') == '1' else 0,
+                                 'transcode_hw_decode': helpers.get_xml_attr(transcode_info, 'transcodeHwDecoding'),
+                                 'transcode_hw_decode_title': helpers.get_xml_attr(transcode_info, 'transcodeHwDecodingTitle'),
+                                 'transcode_hw_encode': helpers.get_xml_attr(transcode_info, 'transcodeHwEncoding'),
+                                 'transcode_hw_encode_title': helpers.get_xml_attr(transcode_info, 'transcodeHwEncodingTitle'),
+                                 'transcode_hw_full_pipeline': 1 if helpers.get_xml_attr(transcode_info, 'transcodeHwFullPipeline') == '1' else 0,
                                  'audio_decision': helpers.get_xml_attr(transcode_info, 'audioDecision'),
                                  'video_decision': helpers.get_xml_attr(transcode_info, 'videoDecision'),
                                  'subtitle_decision': helpers.get_xml_attr(transcode_info, 'subtitleDecision'),
-                                 'throttled': str(transcode_throttled)  # Keep for backwards compatibility
+                                 'throttled': '1' if helpers.get_xml_attr(transcode_info, 'throttled') == '1' else '0'  # Keep for backwards compatibility
                                  }
         else:
             transcode_details = {'transcode_key': '',
                                  'transcode_throttled': 0,
-                                 'transcode_progress': '0',
+                                 'transcode_progress': 0,
                                  'transcode_speed': '',
                                  'transcode_audio_channels': '',
                                  'transcode_audio_codec': '',
@@ -1349,7 +1383,12 @@ class PmsConnect(object):
                                  'transcode_height': '',
                                  'transcode_container': '',
                                  'transcode_protocol': '',
-                                 'transcode_hardware': 0,
+                                 'transcode_hw_requested': 0,
+                                 'transcode_hw_decode': '',
+                                 'transcode_hw_decode_title': '',
+                                 'transcode_hw_encode': '',
+                                 'transcode_hw_encode_title': '',
+                                 'transcode_hw_full_pipeline': 0,
                                  'audio_decision': 'direct play',
                                  'video_decision': 'direct play',
                                  'subtitle_decision': '',
@@ -1471,16 +1510,44 @@ class PmsConnect(object):
         source_media_details = source_media_part_details = \
             source_video_details = source_audio_details = source_subtitle_details = {}
 
-        if media_type == 'clip':
+        if media_type == 'clip' and not helpers.get_xml_attr(session, 'ratingKey').isdigit():
             clip_media = session.getElementsByTagName('Media')[0]
             audio_channels = helpers.get_xml_attr(clip_media, 'audioChannels')
-            metadata_details = {'rating_key': helpers.get_xml_attr(session, 'ratingKey'),
+            metadata_details = {'media_type': media_type,
+                                'section_id': helpers.get_xml_attr(session, 'librarySectionID'),
+                                'library_name': helpers.get_xml_attr(session, 'librarySectionTitle'),
+                                'rating_key': helpers.get_xml_attr(session, 'ratingKey'),
+                                'parent_rating_key': helpers.get_xml_attr(session, 'parentRatingKey'),
+                                'grandparent_rating_key': helpers.get_xml_attr(session, 'grandparentRatingKey'),
                                 'title': helpers.get_xml_attr(session, 'title'),
+                                'parent_title': helpers.get_xml_attr(session, 'parentTitle'),
+                                'grandparent_title': helpers.get_xml_attr(session, 'grandparentTitle'),
+                                'media_index': helpers.get_xml_attr(session, 'index'),
+                                'parent_media_index': helpers.get_xml_attr(session, 'parentIndex'),
+                                'studio': helpers.get_xml_attr(session, 'studio'),
+                                'content_rating': helpers.get_xml_attr(session, 'contentRating'),
                                 'summary': helpers.get_xml_attr(session, 'summary'),
+                                'tagline': helpers.get_xml_attr(session, 'tagline'),
+                                'rating': helpers.get_xml_attr(session, 'rating'),
+                                'audience_rating': helpers.get_xml_attr(session, 'audienceRating'),
+                                'user_rating': helpers.get_xml_attr(session, 'userRating'),
                                 'duration': helpers.get_xml_attr(session, 'duration'),
                                 'year': helpers.get_xml_attr(session, 'year'),
                                 'thumb': helpers.get_xml_attr(session, 'thumb'),
+                                'parent_thumb': helpers.get_xml_attr(session, 'parentThumb'),
+                                'grandparent_thumb': helpers.get_xml_attr(session, 'grandparentThumb'),
                                 'art': helpers.get_xml_attr(session, 'art'),
+                                'banner': helpers.get_xml_attr(session, 'banner'),
+                                'originally_available_at': helpers.get_xml_attr(session, 'originallyAvailableAt'),
+                                'added_at': helpers.get_xml_attr(session, 'addedAt'),
+                                'updated_at': helpers.get_xml_attr(session, 'updatedAt'),
+                                'last_viewed_at': helpers.get_xml_attr(session, 'lastViewedAt'),
+                                'guid': helpers.get_xml_attr(session, 'guid'),
+                                'directors': [],
+                                'writers': [],
+                                'actors': [],
+                                'genres': [],
+                                'labels': [],
                                 'full_title': helpers.get_xml_attr(session, 'title'),
                                 'container': helpers.get_xml_attr(clip_media, 'container'),
                                 'height': helpers.get_xml_attr(clip_media, 'height'),
@@ -1490,7 +1557,7 @@ class PmsConnect(object):
                                 'audio_codec': helpers.get_xml_attr(clip_media, 'audioCodec'),
                                 'audio_channels': audio_channels,
                                 'audio_channel_layout': common.AUDIO_CHANNELS.get(audio_channels, audio_channels)
-                                 }
+                                }
         else:
             media_id = helpers.get_xml_attr(stream_media_info, 'id')
             part_id = helpers.get_xml_attr(stream_media_parts_info, 'id')
@@ -1508,22 +1575,22 @@ class PmsConnect(object):
                 source_subtitle_details = next((p for p in source_media_part_streams if p['id'] == subtitle_id), {})
 
         # Get the quality profile
-        if media_type in ('movie', 'episode', 'clip') and 'stream_video_bitrate' in video_details:
-            stream_video_bitrate = helpers.cast_to_int(video_details['stream_video_bitrate'])
-            video_bitrate = helpers.cast_to_int(source_video_details.get('video_bitrate'))
+        if media_type in ('movie', 'episode', 'clip') and 'stream_bitrate' in stream_details:
+            stream_bitrate = helpers.cast_to_int(stream_details['stream_bitrate'])
+            source_bitrate = helpers.cast_to_int(source_media_details.get('bitrate'))
 
             try:
-                quailtiy_bitrate = min(b for b in common.VIDEO_QUALITY_PROFILES if stream_video_bitrate <= b <= video_bitrate)
+                quailtiy_bitrate = min(b for b in common.VIDEO_QUALITY_PROFILES if stream_bitrate <= b <= source_bitrate)
                 quality_profile = common.VIDEO_QUALITY_PROFILES[quailtiy_bitrate]
             except ValueError:
                 quality_profile = 'Original'
             
-        elif media_type == 'track' and 'stream_audio_bitrate' in audio_details:
-            stream_audio_bitrate = helpers.cast_to_int(audio_details['stream_audio_bitrate'])
-            audio_bitrate = helpers.cast_to_int(source_audio_details['audio_bitrate'])
+        elif media_type == 'track' and 'stream_bitrate' in stream_details:
+            stream_bitrate = helpers.cast_to_int(stream_details['stream_bitrate'])
+            source_bitrate = helpers.cast_to_int(source_media_details.get('bitrate'))
 
             try:
-                quailtiy_bitrate = min(b for b in common.AUDIO_QUALITY_PROFILES if stream_audio_bitrate <= b <= audio_bitrate)
+                quailtiy_bitrate = min(b for b in common.AUDIO_QUALITY_PROFILES if stream_bitrate <= b <= source_bitrate)
                 quality_profile = common.AUDIO_QUALITY_PROFILES[quailtiy_bitrate]
             except ValueError:
                 quality_profile = 'Original'