diff --git a/src/components/SourceOverlay.jsx b/src/components/SourceOverlay.jsx
index 2999bfe..e5a79f6 100644
--- a/src/components/SourceOverlay.jsx
+++ b/src/components/SourceOverlay.jsx
@@ -4,148 +4,118 @@ import { Player } from 'video-react'
 import Spinner from './presentational/Spinner'
 import NoSource from './presentational/NoSource'
 
-class SourceOverlay extends React.Component {
-  constructor(props) {
-    super(props)
-    this.renderVideo = this.renderVideo.bind(this)
-    this.renderPhoto = this.renderPhoto.bind(this)
-    this.renderPhotobook = this.renderPhotobook.bind(this)
-    this.renderTestimony = this.renderTestimony.bind(this)
+function SourceOverlay ({ source, onCancel }) {
+  function renderImage(path) {
+    return (
+      <div className='source-image-container'>
+        <Img
+          className='source-image'
+          src={path}
+          loader={<Spinner />}
+          unloader={<NoSource failedUrls={source.paths} />}
+        />
+      </div>
+    )
   }
 
-  renderVideo() {
+  function renderVideo(path) {
     // NB: assume only one video
     return (
       <div className="media-player">
         <Player
           className='source-video'
           playsInline
-          src={this.props.source.paths[0]}
+          src={path}
         />
       </div>
     )
   }
 
-  renderPhoto() {
-    return (
-      <div className='source-image-container'>
-        <Img
-          className='source-image'
-          src={this.props.source.paths}
-          loader={<Spinner />}
-          unloader={<NoSource failedUrls={this.props.source.paths} />}
-        />
-      </div>
-    )
+  function renderText(path) {
+    return (<div>{path}</div>)
   }
 
-  renderPhotobook() {
-    return (
-      <div className='source-image-container'>
-        {this.props.source.paths.map((url, idx) => (
-          <Img
-            key={idx}
-            className='source-image'
-            src={url}
-            loader={<Spinner />}
-            unloader={<NoSource failedUrls={[this.props.source.path]} />}
-          />
+  // renderImagebook() {
+  //   return (
+  //     <div className='source-image-container'>
+  //       {source.paths.map((url, idx) => (
+  //         <Img
+  //           key={idx}
+  //           className='source-image'
+  //           src={url}
+  //           loader={<Spinner />}
+  //           unloader={<NoSource failedUrls={[source.path]} />}
+  //         />
+  //
+  //       ))}
+  //     </div>
+  //   )
+  // }
 
-        ))}
-      </div>
-    )
-  }
-
-  renderError() {
+  function renderError() {
     return (
       <NoSource failedUrls={["NOT ALL SOURCES AVAILABLE IN APPLICATION YET"]} />
     )
   }
 
-  renderNoSupport(ext) {
+  function renderNoSupport(ext) {
     return (
-      <NoSource failedUrls={[`Application does not support this extension: ${ext}`]} />
+      <NoSource failedUrls={[`Application does not support extension: ${ext}`]} />
     )
   }
 
-  renderTestimony() {
-    return (
-      <div>
-        <a href={`${this.props.source.path}.docx`}>Download Testimony</a>
-      </div>
-    )
-  }
-
-  _renderPath(path) {
-    // render conditionally based on the extension
+  function _renderPath(path) {
     switch (true) {
       case /\.(png|jpg)$/.test(path):
-        console.log('image')
-        return <div>{path}</div>
+        return renderImage(path)
       case /\.(mp4)$/.test(path):
-        console.log('video')
-        return <div>{path}</div>
+        return renderVideo(path)
       case /\.(md)$/.test(path):
-        console.log('text')
-        return <div>{path}</div>
+        return renderText(path)
       default:
         console.log('unsupported extension')
-        return this.renderNoSupport(path.split('.')[1])
+        return renderNoSupport(path.split('.')[1])
     }
   }
 
-  _renderContent() {
+  function _renderContent() {
     return (
-      <div className='media-content'>
-        {this.props.source.paths.map(this._renderPath)}
-      </div>
+      <React.Fragment>
+        {source.paths.map(_renderPath)}
+      </React.Fragment>
     )
-    // switch(this.props.source.type) {
-    //   case 'Video':
-    //     return this.renderVideo()
-    //   case 'Photo':
-    //     return this.renderPhoto()
-    //   case 'Photobook':
-    //     return this.renderPhotobook()
-    //   case 'Eyewitness Testimony':
-    //     return this.renderTestimony()
-    //   default:
-    //     return this.renderError()
-    // }
   }
 
-  render() {
-    if (typeof(this.props.source) !== 'object') {
-      return this.renderError()
-    }
-    const {id, url, title, date, type, affil_1, affil_2} = this.props.source
-    return (
-      <div className="mo-overlay">
-        <div className="mo-container">
-          <div className="mo-header">
-            <div className="mo-header-close" onClick={this.props.onCancel}>
-              <button className="side-menu-burg is-active"><span></span></button>
-            </div>
-            <div className="mo-header-text">{this.props.source.id}</div>
+  if (typeof(source) !== 'object') {
+    return renderError()
+  }
+  const {id, url, title, date, type, affil_1, affil_2} = source
+  return (
+    <div className="mo-overlay">
+      <div className="mo-container">
+        <div className="mo-header">
+          <div className="mo-header-close" onClick={onCancel}>
+            <button className="side-menu-burg is-active"><span></span></button>
           </div>
-          <div className="mo-media-container">
-            {this._renderContent()}
-          </div>
-          <div className="mo-meta-container">
-            <div className="mo-box">
-              {id ? <div><b>{id}</b></div> : null}
-              {title? <div><b>{title}</b></div> : null}
-              <hr/>
-              {type ? <div>Type: <span className="indent">{type}</span></div> : null}
-              {date ? <div>Date:<span className="indent">{date}</span></div> : null}
-              <hr/>
-              {url ? <div><a href={url} target="_blank">Link to original URL</a></div> : null}
-            </div>
+          <div className="mo-header-text">{source.id}</div>
+        </div>
+        <div className="mo-media-container">
+          {_renderContent()}
+        </div>
+        <div className="mo-meta-container">
+          <div className="mo-box">
+            {id ? <div><b>{id}</b></div> : null}
+            {title? <div><b>{title}</b></div> : null}
+            <hr/>
+            {type ? <div>Type: <span className="indent">{type}</span></div> : null}
+            {date ? <div>Date:<span className="indent">{date}</span></div> : null}
+            <hr/>
+            {url ? <div><a href={url} target="_blank">Link to original URL</a></div> : null}
           </div>
         </div>
       </div>
-    )
-  }
+    </div>
+  )
 }
 
 export default SourceOverlay
diff --git a/src/components/presentational/CardSource.js b/src/components/presentational/CardSource.js
index b3bca21..9b3da5b 100644
--- a/src/components/presentational/CardSource.js
+++ b/src/components/presentational/CardSource.js
@@ -43,7 +43,6 @@ const CardSource = ({ source, isLoading, onClickHandler }) => {
     const imgs = source.paths.filter(p => p.match(isImgUrl))
     thumbnail = imgs.length > 0 ? imgs[0] : null
   }
-  console.log(thumbnail)
 
   const fallbackIcon = (
     <i className="material-icons source-icon">
diff --git a/src/scss/mediaoverlay.scss b/src/scss/mediaoverlay.scss
index 9046ba7..891280f 100644
--- a/src/scss/mediaoverlay.scss
+++ b/src/scss/mediaoverlay.scss
@@ -48,34 +48,45 @@ $header-inset: 10px;
 
 .mo-container {
   background-color: rgba(239, 239, 239, 0.9);
-  max-width: $panel-width;
-  min-width: $panel-width;
-  max-height: $panel-height;
-  min-height: $panel-height;
+  // max-width: $panel-width;
+  // min-width: $panel-width;
+  // max-height: $panel-height;
+  // min-height: $panel-height;
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
   align-items: center;
+  height: 80vh;
+  max-width: 90vw;
 
   .mo-media-container {
     flex: 1;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
   }
 }
 
 .mo-media-container {
-  // padding-top: 3*$header-inset;
   font-family: "Lato", Helvetica, sans-serif;
-  // max-height: $vimeo-height;
   min-width: 100%;
-  max-height: 500px;
+  max-height: 60vh;
+  overflow-y: auto;
 
   .media-player {
     width: 100%;
     max-width: $vimeo-width;
   }
+
+  .media-content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  // NB: topcushion seems to be necessary with certain overflows..
+  &.topcushion {
+    padding-top: 150px;
+  }
 }
 
 .mo-meta-container {
@@ -146,8 +157,10 @@ $header-inset: 10px;
 
 .source-image-container {
   padding: 0 25px;
-  overflow-y: scroll;
   height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .source-image, .source-video {