diff -r eac9e4eb75c7 -r e952c8a31a2b cms/app-client/app/styles/components/transcript-component.scss
--- a/cms/app-client/app/styles/components/transcript-component.scss	Tue Oct 18 20:39:34 2016 +0530
+++ b/cms/app-client/app/styles/components/transcript-component.scss	Thu Oct 20 12:54:07 2016 +0530
@@ -1,5 +1,5 @@
 .transcript-component {
-    background-color: $light-blue;
+    background-color: $corpus-light-grey;
     padding: 0px;
     width: 554px;
     box-sizing: border-box;
@@ -13,16 +13,18 @@
     position: absolute;
     z-index: 1;
     width: inherit;
-    background: linear-gradient($light-blue, $light-blue 50%, transparent);
+    background: linear-gradient($corpus-light-grey, $corpus-light-grey 50%, transparent);
     padding-top: 12px;
     padding-bottom: 66px;
     line-height: 30px;
     margin: 0px!important;
+    color: $corpus-blue;
+    font-weight: bold;
 }
 
-.transcript-component h2 span{
+.transcript-component h2 .translation{
     display: block;
-    color: $medium-grey;
+    font-weight: normal;
 }
 
 body.videoscreen .transcript-component h2 {
@@ -42,7 +44,7 @@
 .transcript-component .transcript h3 {
     padding: 20px 20px 20px 64px;
     font-weight: bold;
-    color: $medium-blue;
+    color: $corpus-blue;
     font-size: 12px;
     line-height: 24px;
 }
@@ -55,7 +57,7 @@
 
 .transcript-component .transcript .annotations .sentence {
     padding: 20px 20px 20px 64px;
-    color: $dark-grey;
+    color: $corpus-black;
     position: relative;
     background-color: transparent;
     transition: background-color .15s, color .15s;
@@ -64,83 +66,94 @@
 
 .transcript-component .transcript .annotations .sentence:not(.active):hover {
     cursor: pointer;
-    background-color: $medium-grey-5;
+    background-color: $corpus-grey;
+    color: $corpus-white;
 }
 
 .transcript-component .transcript .annotations .sentence.active {
-    background-color: $grey-blue;
-    color: $light-white;
+    background-color: $corpus-blue;
+    color: $corpus-white;
     pointer-events: none;
 }
 
+
+.transcript-component .transcript .annotations .sentence.active .translation {
+    color: $corpus-white;
+    font-weight: normal;
+}
+
 .transcript-component .transcript .annotations .sentence .words {
     font-size: 0px;
-    margin: 20px 0px;
+    margin: 10px 0px;
 }
 
 .transcript-component .transcript .annotations .sentence .words .word {
     display: inline-block;
 }
 
+.transcript-component .transcript .annotations .sentence .original {
+    font-weight: bold;
+}
+
 .transcript-component .transcript .annotations .sentence .words .word .original,
 .transcript-component .transcript .annotations .sentence .words .word .translation {
-    background-color: $medium-grey;
+    background-color: $corpus-black;
     padding: 0px 4px;
     margin-right: 2px;
-    margin-bottom: 2px;
+    margin-bottom: 1px;
     font-size: 12px;
 }
 
+.transcript-component .transcript .annotations .sentence:hover .words .word .original,
+.transcript-component .transcript .annotations .sentence:hover .words .word .translation {
+    background-color: $corpus-white;
+    color: $corpus-grey;
+}
+
 .transcript-component .transcript .annotations .sentence.active .words .word .original,
 .transcript-component .transcript .annotations .sentence.active .words .word .translation {
-    background-color: $light-white;
+    background-color: $corpus-white;
 }
 
 .transcript-component .transcript .annotations .sentence .words .word {
-    color: $light-blue;
+    color: $corpus-white;
 }
 
-.transcript-component .transcript .annotations .sentence.active .words .word .original {
-    color: $grey-blue;
+.transcript-component .transcript .annotations .sentence .words .word p {
+    line-height: 20px;
+}
+
+.transcript-component .transcript .annotations .sentence.active .words .word .original,
+.transcript-component .transcript .annotations .sentence.active .words .word .translation {
+    color: $corpus-blue;
 }
 
 .transcript-component .transcript .annotations .sentence .words .word .translation {
-    margin-bottom: 4px;
-}
-
-
-.transcript-component .transcript .annotations .sentence.active .translation {
-    color: $light-blue;
+    margin-bottom: 2px;
 }
 
 .transcript-component .transcript .annotations .sentence .fa-play {
     position: absolute;
-    border: solid 2px $medium-grey;
+    border-style: solid;
+    border-width: 2px;
+    border-color: $corpus-black;
     border-radius: 100%;
     width: 24px;
     height: 24px;
     line-height: 20px;
     left: 20px;
     cursor: pointer;
-    opacity: 0;
-    border-color: $light-blue;
-    color: $light-blue;
-    transition: opacity .15s;
+    opacity: 1;
+    color: $corpus-black;
 }
 
 .transcript-component .transcript .annotations .sentence .fa-play::before {
     margin-left: 3px;
 }
 
-.transcript-component .transcript .annotations .sentence.active .fa-play {
-    pointer-events: all;
-    border-color: $light-blue;
-    color: $light-blue;
-    opacity: 1;
-}
-
 .transcript-component .transcript .annotations .sentence:not(.active):hover .fa-play {
-    opacity: 1;
+    border-color: $corpus-white;
+    color: $corpus-white;
 }
 
 .transcript-component .transcript .annotations .sentence p {
@@ -156,10 +169,14 @@
     float: right;
     line-height: 24px;
     padding-left: 20px;
-    color: $grey-blue;
+    color: $corpus-grey;
     font-weight: bold;
 }
 
 .transcript-component .transcript .annotations .sentence.active .title {
-    color: $light-white;
+    color: $corpus-white;
+}
+
+.transcript-component .transcript .annotations .sentence:not(.active):hover .title {
+    color: $corpus-white;
 }
\ No newline at end of file