diff -r 5b7ae96768be -r 7a5d729992b8 cms/app-client/app/styles/components/transcript-component.scss
--- a/cms/app-client/app/styles/components/transcript-component.scss	Thu Jul 21 23:36:50 2016 +0200
+++ b/cms/app-client/app/styles/components/transcript-component.scss	Fri Jul 22 16:11:44 2016 +0200
@@ -1,18 +1,61 @@
 .transcript-component {
     background-color: $light-blue;
-    padding: 20px;
+    padding: 0px;
+    width: 554px;
+    box-sizing: border-box;
+}
+
+.transcript-component h2 {
+    position: absolute;
+    z-index: 1;
+    width: inherit;
+    background: linear-gradient($light-blue, $light-blue 50%, transparent);
+    padding-bottom: 54px;
 }
 
-.transcript-component .sentence {
-    padding: 20px;
-    color: $medium-grey;
+.transcript-component .transcript {
+    list-style: none;
+    margin: 0px;
+    padding: 154px 20px 0px 20px;
 }
 
-.transcript-component .sentence.active {
+.transcript-component .transcript .sentence {
+    padding: 24px 48px;
+    color: $medium-grey;
+    position: relative;
+    background-color: transparent;
+    transition: background-color .15s, color .15s;
+}
+
+.transcript-component .transcript .sentence.active {
     background-color: $grey-blue;
     color: $light-white;
 }
 
-.transcript-component .sentence.active .translation {
+.transcript-component .transcript .sentence.active .translation {
     color: $light-blue;
+}
+
+.transcript-component .transcript .sentence .fa-play {
+    position: absolute;
+    border: solid 2px $medium-grey;
+    border-radius: 100%;
+    width: 24px;
+    height: 24px;
+    line-height: 20px;
+    left: 12px;
+}
+
+.transcript-component .transcript .sentence .fa-play::before {
+    margin-left: 2px;
+}
+
+.transcript-component .transcript .sentence.active .fa-play {
+    border-color: $light-blue;
+    color: $light-blue;
+}
+
+.transcript-component .transcript .sentence p {
+    margin: 0;
+    line-height: 24px;
 }
\ No newline at end of file