2 files changed, 8 insertions, 2 deletions
diff --git a/animism-align/frontend/app/views/media/containers/media.index.js b/animism-align/frontend/app/views/media/containers/media.index.js
index 34845d8..da94d3c 100644
--- a/animism-align/frontend/app/views/media/containers/media.index.js
+++ b/animism-align/frontend/app/views/media/containers/media.index.js
@@ -76,8 +76,10 @@ class MediaIndex extends Component {
             {order.filter(id => lookup[id].type === 'image').map(id => <MediaItem key={id} data={lookup[id]} />)}
             <h2>Galleries</h2>
             {order.filter(id => lookup[id].type === 'gallery').map(id => <GalleryItem key={id} data={lookup[id]} />)}
-            <h2>Video</h2>
-            {order.filter(id => lookup[id].type === 'video').map(id => <MediaItem key={id} data={lookup[id]} />)}
+            <h2>Videos</h2>
+            {order.filter(id => lookup[id].type === 'video' && !lookup[id].medium.match(/book/i)).map(id => <MediaItem key={id} data={lookup[id]} />)}
+            <h2>Books</h2>
+            {order.filter(id => lookup[id].type === 'video' && lookup[id].medium.match(/book/i)).map(id => <MediaItem key={id} data={lookup[id]} />)}
             <h2>Files</h2>
             {order.filter(id => lookup[id].type === 'file').map(id => <FileItem key={id} data={lookup[id]} />)}
           </div>
diff --git a/animism-align/frontend/app/views/media/media.css b/animism-align/frontend/app/views/media/media.css
index 7e5517d..0705b6c 100644
--- a/animism-align/frontend/app/views/media/media.css
+++ b/animism-align/frontend/app/views/media/media.css
@@ -7,6 +7,7 @@
 .results .cell {
   margin-bottom: 1rem;
   margin-right: 1rem;
+  max-width: 295px;
 }
 .results h2 {
   display: block;
@@ -15,6 +16,9 @@
 .media .results .meta > div {
   max-width: 100%;
 }
+.media .results .img img {
+  max-width: 295px;
+}
 
 /* new / edit media forms */