diff --git a/src/components/Overlay/Media.js b/src/components/Overlay/Media.js
index dc6a8d8..f48104d 100644
--- a/src/components/Overlay/Media.js
+++ b/src/components/Overlay/Media.js
@@ -6,7 +6,7 @@ import { selectTypeFromPathWithPoster } from '../../common/utilities'
 class SourceOverlay extends React.Component {
   constructor () {
     super()
-    this.state = { idx: 0 }
+    this.state = { mediaIdx: 0, transIdx: 0 }
     this.onShiftGallery = this.onShiftGallery.bind(this)
   }
 
@@ -22,10 +22,72 @@ class SourceOverlay extends React.Component {
 
   onShiftGallery (shift) {
     // no more left
-    if (this.state.idx === 0 && shift === -1) return
+    if (this.state.mediaIdx === 0 && shift === -1) return
     // no more right
-    if (this.state.idx === this.props.source.paths.length - 1 && shift === 1) return
-    this.setState({ idx: this.state.idx + shift })
+    if (this.state.mediaIdx === this.props.source.paths.length - 1 && shift === 1) return
+    this.setState({ mediaIdx: this.state.mediaIdx + shift })
+  }
+
+  switchToTrans (idx) {
+    this.setState({ transIdx: idx });
+  }
+
+  renderContent(source) {
+    const { url, title, paths, date, type, desc, poster } = source
+    const shortenedTitle = title.substring(0, 100)
+    return (
+      <React.Fragment>
+      <div className='mo-banner'>
+        <div className='mo-banner-close' onClick={this.props.onCancel}>
+          <i className='material-icons'>close</i>
+        </div>
+
+        <h3 className='mo-banner-content'>{shortenedTitle}</h3>
+
+        <div className='mo-banner-trans'>
+          {this.props.translations ? this.props.translations.map((trans, idx) => (
+            this.state.transIdx !== idx + 1 ? (
+              <div className='mo-trans' onClick={() => this.switchToTrans(idx + 1)}>{trans.code}</div>
+            ) : (
+              <div className='mo-trans' onClick={() => this.switchToTrans(0)}>EN</div>
+            )
+          )) : null}
+        </div>
+      </div>
+      <div className='mo-container' onClick={e => e.stopPropagation()}>
+        <div className='mo-media-container'>
+          <Content media={paths.map(p => selectTypeFromPathWithPoster(p, poster))} viewmediaIdx={this.state.mediaIdx} />
+        </div>
+      </div>
+
+      <div className='mo-footer'>
+        <Controls paths={paths} viewmediaIdx={this.state.mediaIdx} onShiftHandler={this.onShiftGallery} />
+
+        <div className='mo-meta-container'>
+          <div className='mo-box-title'>
+            <div>{desc}</div>
+          </div>
+
+          {(type || date || url) ? (
+            <div className='mo-box'>
+              <div>
+                {type ? <h4>Evidence type</h4> : null}
+                {type ? <p><i className='material-icons left'>perm_media</i>{type}</p> : null}
+              </div>
+              <div>
+                {date ? <h4>Date Published</h4> : null}
+                {date ? <p><i className='material-icons left'>today</i>{date}</p> : null}
+              </div>
+              <div>
+                {url ? <h4>Link</h4> : null}
+                {url ? <span><i className='material-icons left'>link</i><a href={url} target='_blank'>Link to original URL</a></span> : null}
+              </div>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </React.Fragment>
+    )
   }
 
   render () {
@@ -33,60 +95,11 @@ class SourceOverlay extends React.Component {
       return this.renderError()
     }
     const { url, title, paths, date, type, desc, poster } = this.props.source
-    const { translations } = this.props
-    const shortenedTitle = title.substring(0, 100)
+    const { transIdx } = this.state
 
     return (
       <div className={`mo-overlay ${this.props.opaque ? 'opaque' : ''}`}>
-        <div className='mo-banner'>
-          <div className='mo-banner-close' onClick={this.props.onCancel}>
-            <i className='material-icons'>close</i>
-          </div>
-
-          <h3 className='mo-banner-content'>{shortenedTitle}</h3>
-
-          <div className='mo-banner-trans'>
-            {translations ? translations.map(trans => (
-              <div className='mo-trans' onClick={() => alert("TODO:")}>{trans.code}</div>
-            )) : null}
-          </div>
-
-        </div>
-
-        <div className='mo-container' onClick={e => e.stopPropagation()}>
-          <div className='mo-media-container'>
-            <Content media={paths.map(p => selectTypeFromPathWithPoster(p, poster))} viewIdx={this.state.idx} />
-          </div>
-
-        </div>
-
-        <div className='mo-footer'>
-          <Controls paths={paths} viewIdx={this.state.idx} onShiftHandler={this.onShiftGallery} />
-
-          <div className='mo-meta-container'>
-            <div className='mo-box-title'>
-              <div>{desc}</div>
-            </div>
-
-            {(type || date || url) ? (
-              <div className='mo-box'>
-                <div>
-                  {type ? <h4>Evidence type</h4> : null}
-                  {type ? <p><i className='material-icons left'>perm_media</i>{type}</p> : null}
-                </div>
-                <div>
-                  {date ? <h4>Date Published</h4> : null}
-                  {date ? <p><i className='material-icons left'>today</i>{date}</p> : null}
-                </div>
-                <div>
-                  {url ? <h4>Link</h4> : null}
-                  {url ? <span><i className='material-icons left'>link</i><a href={url} target='_blank'>Link to original URL</a></span> : null}
-                </div>
-              </div>
-            ) : null}
-          </div>
-        </div>
-
+        {this.renderContent(transIdx === 0 ? this.props.source : this.props.translations[transIdx-1])}
       </div>
     )
   }
diff --git a/src/scss/overlay.scss b/src/scss/overlay.scss
index 35e9942..3fcd259 100644
--- a/src/scss/overlay.scss
+++ b/src/scss/overlay.scss
@@ -33,7 +33,7 @@ $banner-height: 100px;
   align-items: center;
   // height: calc(100vh - 350px);
   // max-height: calc(100vh - 350px);
-  width: $panel-width;
+  width: 70vw;
   max-width: 90vw;
   box-shadow: 0 19px 19px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
   overflow: auto;
@@ -44,6 +44,7 @@ $overlay-bg: rgba(239,239,239,0.9);
 .mo-banner {
   position: fixed;
   min-height: 100px;
+  color: $offwhite;
   background-color: transparent;
   top: 0;
   width: 100%;
@@ -308,6 +309,7 @@ $overlay-bg: rgba(239,239,239,0.9);
   justify-content: center;
   padding: 20px;
   min-width: calc(100% - 40px);
+  z-index: 99999;
 }
 
 .media-player {