diff --git a/src/components/presentational/NarrativeCard.js b/src/components/presentational/NarrativeCard.js
index 874578c..b47e10c 100644
--- a/src/components/presentational/NarrativeCard.js
+++ b/src/components/presentational/NarrativeCard.js
@@ -24,7 +24,9 @@ function NarrativeCard ({ narrative }) {
 
         {/* <i className='material-icons left'>location_on</i> */}
         {/* {_renderActions(current, steps)} */}
-        <p className='narrative-info-desc'>{narrative.description}</p>
+        <div className='narrative-info-desc'>
+          <p>{narrative.description}</p>
+        </div>
               </div>
     )
   } else {
diff --git a/src/scss/cardstack.scss b/src/scss/cardstack.scss
index 39c5f4a..230d63c 100644
--- a/src/scss/cardstack.scss
+++ b/src/scss/cardstack.scss
@@ -2,7 +2,7 @@
 @import 'card';
 
 $card-width: 370px;
-$narrative-info-max-height: 170px;
+$narrative-info-max-height: 200px;
 $timeline-height: 170px;
 
 .card-stack {
diff --git a/src/scss/narrativecard.scss b/src/scss/narrativecard.scss
index a38a09c..adf5e8b 100644
--- a/src/scss/narrativecard.scss
+++ b/src/scss/narrativecard.scss
@@ -1,4 +1,4 @@
-$narrative-info-width: 370px;
+$narrative-info-width: 386px;
 $timeline-height: 170px;
 
 /*
@@ -8,8 +8,8 @@ NARRATIVE INFO
   position: fixed;
   top: 30px;
   left: auto;
-  right: 25px;
-  height: 170px;
+  right: 9px;
+  height: 205px;
   width: $narrative-info-width;
   box-sizing: border-box;
   max-height: calc(100% - 250px);
@@ -39,7 +39,8 @@ NARRATIVE INFO
   }
 
   .narrative-info-desc {
-    overflow: auto;
+    height: 153px;
+    overflow-y: auto;
   }
 
   p {
@@ -117,7 +118,7 @@ NARRATIVE INFO
 
   &.right {
     // right: calc(#{$narrative-info-width} + 10px);
-    right: 10px;
+    right: 25px;
   }
 
   .material-icons {
@@ -142,7 +143,7 @@ NARRATIVE INFO
   position: fixed;
   padding: 2px 5px 0 5px;
   // right: $narrative-info-width - 15px - 10px;
-  right: 25px;
+  right: 10px;
   top: 5px;
   width: $narrative-info-width - 10px - 2px;
   // width: 15px;